From ac92596a1ef6d857b6c9647587c9e209861a00fc Mon Sep 17 00:00:00 2001
From: "github-merge-queue[bot]"
 <github-merge-queue[bot]@users.noreply.github.com>
Date: Fri, 3 May 2024 00:20:57 +0000
Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20@=20dpc-sdp/?=
 =?UTF-8?q?ripple-framework@445cacfdce1a95faea7435f34fd50eadb7db90a3=20?=
 =?UTF-8?q?=F0=9F=9A=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 200.html                                      |  78 +++++------
 404.html                                      |  78 +++++------
 __studio.json                                 |   2 +-
 ....nby97MTz.js => AppLayout.vue.hqX4UWMQ.js} |   2 +-
 ...dL.js => AppSidebarLayout.vue.6sfT1On1.js} |   2 +-
 ...Doc.SXcfJrUW.js => ContentDoc.zyRxlzIB.js} |   2 +-
 ...st.UlDpyDEh.js => ContentList.ux5QQJBH.js} |   2 +-
 ...7QjUE.js => ContentNavigation.CfUahY4n.js} |   2 +-
 ...y.EOcFbojz.js => ContentQuery.OgHSivmp.js} |   2 +-
 ...gXd06ZK.js => ContentRenderer.CHEOl3j3.js} |   2 +-
 _nuxt/ContentRendererMarkdown.jF369Aie.js     |   1 -
 ...> ContentRendererMarkdown.vue.sDq3Jws6.js} |   2 +-
 _nuxt/ContentRendererMarkdown.zskQ2UNQ.js     |   1 +
 ...ot.lsaDai_l.js => ContentSlot.uUI9CND_.js} |   2 +-
 ...lert.qUx9DhKf.js => DocsAlert.NYyBoUgq.js} |   2 +-
 _nuxt/DocsCard.BHyI6viP.js                    |   1 +
 _nuxt/DocsCard.NvucPPsI.js                    |   1 -
 ...d.CGE8nz0H.js => DocsCardGrid.PUHkyZXK.js} |   2 +-
 ...8n5f2_3.js => DocsColourTable.LKiaprrs.js} |   2 +-
 ...nt.L9iJVoxE.js => DocsContent.SQZjpxgh.js} |   2 +-
 ...9.js => DocsContentNavigation.sYXaW9Re.js} |   2 +-
 ...le.o_g87j4m.js => DocsExample.TYtIaycF.js} |   2 +-
 ...MaAB_.js => DocsGradientTable.eMExAp1K.js} |   2 +-
 ...sGrid.4LuoD9Zu.js => DocsGrid.CLT9yKLT.js} |   2 +-
 ...PVXBo8Q-.js => DocsHeroHeader.VJrQvyc0.js} |   2 +-
 ...UJpqPBN.js => DocsHomeSection.-8CtU5yK.js} |   2 +-
 ...sIcon.7thEtIhB.js => DocsIcon.T-QbG3WZ.js} |   2 +-
 ...xKF.js => DocsIconSizingTable.5KObi_vr.js} |   2 +-
 ....9o2Ol26d.js => DocsIconTable.SNmL3ofA.js} |   2 +-
 ...BXNxRI.js => DocsImageExample.8UN1-6g4.js} |   2 +-
 ...JyE.js => DocsLayerStyleTable.eVkhneyr.js} |   2 +-
 ...sLink.5OmhIBHZ.js => DocsLink._8mcEyeM.js} |   2 +-
 ...hpjmQYW8.js => DocsModuleCard.2ZwiOzRg.js} |   2 +-
 ...1q5O7tu6.js => DocsModuleInfo.dxnzvO_K.js} |   2 +-
 _nuxt/DocsModuleNavigation.1X1oFgOt.js        |   1 -
 _nuxt/DocsModuleNavigation.N74iA2Tc.js        |   1 +
 ...nk.5k-bni1U.js => DocsNavLink.k4ZwJ1d1.js} |   2 +-
 ...vbDi0R7z.js => DocsPageHeader.J1YDFRG1.js} |   2 +-
 ...6JDrOF.js => DocsThemeChooser.xp0uGfRQ.js} |   2 +-
 ...rHD9.js => DocsTypeClassTable.c5edmzGt.js} |   2 +-
 ....Iq8SBPIK.js => DocsTypeTable.S30MUh9q.js} |   2 +-
 ...w.3ELaYX2l.js => DocsWhatsNew.iLgRC7ZK.js} |   2 +-
 ...YHv.js => DocumentDrivenEmpty.-Bd5tvR3.js} |   2 +-
 ...kdown.4yrCw_l0.js => Markdown.vjX68Z-B.js} |   2 +-
 ...{ProseA.gmWvIO0I.js => ProseA.2rbo7RTC.js} |   2 +-
 ...p_k9Hpd.js => ProseBlockquote.Czpq-HHw.js} |   2 +-
 ...Code.ggTmuEB2.js => ProseCode.Xz7xMLuq.js} |   2 +-
 ...DpSgjM7.js => ProseCodeInline.iJ9KJvnk.js} |   2 +-
 ...roseEm.D-92YCoe.js => ProseEm.jWeQl8xp.js} |   2 +-
 ...roseH1.qgSebaHX.js => ProseH1.50NQSnzl.js} |   2 +-
 ...roseH2.ugZKdBSy.js => ProseH2.G8mCS4ry.js} |   2 +-
 ...roseH3.zV8FfIjw.js => ProseH3.WHOIDSwD.js} |   2 +-
 ...roseH4.CwUV-MIb.js => ProseH4.gK7ORMEc.js} |   2 +-
 ...roseH5.xN9FQiKa.js => ProseH5.ViebVa2Y.js} |   2 +-
 ...roseH6.XPfwxdAr.js => ProseH6.lit-WfaG.js} |   2 +-
 ...roseHr.NdB0-p6G.js => ProseHr.uASz6lXf.js} |   2 +-
 ...seImg.wgVpK8mn.js => ProseImg.Wu9xgcX7.js} |   2 +-
 ...roseLi.MnotWTMg.js => ProseLi.kWofYoPt.js} |   2 +-
 ...roseOl.jzxVYZcz.js => ProseOl.f55gcGCc.js} |   2 +-
 ...{ProseP.cG_oeGiJ.js => ProseP.xOmAEUok.js} |   2 +-
 ...sePre.1p0bzX0t.js => ProsePre.928ctTB_.js} |   2 +-
 ...pt.FDrZUZC2.js => ProseScript.YD2iA94j.js} |   2 +-
 ...ng.F9NVvvm4.js => ProseStrong.GmB4B_NE.js} |   2 +-
 ...ble.Nr-94ppo.js => ProseTable.d8cdIzif.js} |   2 +-
 ...ody.pO4HZmMb.js => ProseTbody.FPzd5AuU.js} |   2 +-
 ...roseTd.KWvY0UVz.js => ProseTd.ydAecYY-.js} |   2 +-
 ...roseTh.15m2hyNr.js => ProseTh.GnFrmIgb.js} |   2 +-
 ...ead.x0xD32yi.js => ProseThead.alimbSyj.js} |   2 +-
 ...roseTr.NjbdsN4h.js => ProseTr.rCUlpnCA.js} |   2 +-
 ...roseUl.GyfBzrRs.js => ProseUl.ajqmVD2y.js} |   2 +-
 ....kobVpNhn.js => RplButton.css.bGBZW0Bs.js} |   2 +-
 ...cfrovusU.js => RplContent.css.7ezTJ87f.js} |   2 +-
 ...UufTF.js => RplExpandable.vue.ErcNtea4.js} |   2 +-
 _nuxt/RplIcon.vue.NIDikUS0.js                 |   7 -
 _nuxt/RplIcon.vue.PZ-X7Qhh.js                 |   7 +
 ...s.o2mWVvok.js => RplImage.css.ouJWHfa9.js} |   2 +-
 ...ue.TWUjSovo.js => RplLink.vue.3IdzOFUB.js} |   2 +-
 ...ue.4pRwhR7E.js => RplList.vue.i5RvVHLA.js} |   2 +-
 ...g01fDe.js => RplPromoCard.vue.pyq2iKcr.js} |   2 +-
 ...l_eQGN0.js => RplTextLink.css.vnmpcBOe.js} |   2 +-
 ...{Swatch.pCyR0PCQ.js => Swatch.FPuuW78y.js} |   2 +-
 ...Data.6xpne1x0.js => asyncData.mgwg8A3s.js} |   2 +-
 _nuxt/builds/latest.json                      |   2 +-
 .../1362ce16-7e83-433f-9854-d1c79bedd190.json |   1 -
 .../1c6da812-7c87-438d-9470-666bc9df1046.json |   1 +
 ...t-db.W4pfov87.js => client-db.lwmN9NLn.js} |   2 +-
 ...Wdn4QDn.js => document-driven.R0qWc0WJ.js} |   2 +-
 .../{entry.49ZHHvLB.js => entry.Do8xnxHS.js}  |   8 +-
 ...-404.T0EgPV7K.js => error-404.7ZxJfF8q.js} |   2 +-
 ...-500.YI21l9fK.js => error-500.zxG8rMw4.js} |   2 +-
 _nuxt/{head.UNWUUq-8.js => head.i1ysHgjT.js}  |   2 +-
 _nuxt/{home.p0dB_qIA.js => home.f8bXHl7K.js}  |   2 +-
 ...gfNK4Jg.js => icon-accessible.JERWHslr.js} |   2 +-
 ...n-add.kzXPKrGl.js => icon-add.hkhs5vZ-.js} |   2 +-
 ...v2hp4Xt.js => icon-arrow-down.SQ1bOEHB.js} |   2 +-
 ...NIGiU1P.js => icon-arrow-left.HVFcOuPq.js} |   2 +-
 ...JTPGc2.js => icon-arrow-right.Z7s6RWiM.js} |   2 +-
 ....PSS8jaD7.js => icon-arrow-up.5ibpXQnN.js} |   2 +-
 ...ch.Fwk4Uxw0.js => icon-attach.KaZHqyGD.js} |   2 +-
 ...r.UxDB2PIC.js => icon-browser.i77M2uFf.js} |   2 +-
 ...YSW.js => icon-calendar-lined.YF7sg5n3.js} |   2 +-
 ... => icon-cancel-circle-filled.CURkLpAF.js} |   2 +-
 ...n-car.u_vczvd4.js => icon-car.PxyroN-0.js} |   2 +-
 ...eck.2p4Xc53D.js => icon-check.X6iFJ1nM.js} |   2 +-
 ...oBoObp.js => icon-child-lined.cl3qOp4j.js} |   2 +-
 ... => icon-dollar-circle-filled.OfCa0qKU.js} |   2 +-
 ...e.1Br3L23I.js => icon-enlarge.fM1MVPt3.js} |   2 +-
 ...fire.6Q6oR_Fn.js => icon-fire.H8m70NW7.js} |   2 +-
 ...ood.0HEgTeD9.js => icon-flood.Ibpk1X0p.js} |   2 +-
 ...free.OVf1QOdo.js => icon-free.Rd0LPl8f.js} |   2 +-
 ...home.QZ-FrcoD.js => icon-home.MT_Aun8G.js} |   2 +-
 ...NFdPBf9w.js => icon-instagram.t6FQ8jrY.js} |   2 +-
 ...lldfgtzu.js => icon-lightning.yIdZoiWx.js} |   2 +-
 ...link.JWvdqMbJ.js => icon-link.POGwWQkT.js} |   2 +-
 ...list.ypbt8G6o.js => icon-list.XfZbIWbX.js} |   2 +-
 ...g.RshIDrCh.js => icon-loading.eTABF85R.js} |   2 +-
 ...Mu9M0.js => icon-log-in-lined.4lvxCkYN.js} |   2 +-
 ...p5JdcEl.js => icon-mail-lined.u9eIXaUH.js} |   2 +-
 ...eBztCA.js => icon-map-zoom-in.bXAuyjx5.js} |   2 +-
 ...61QeS.js => icon-map-zoom-out.pdO56m1U.js} |   2 +-
 ...l.QtoyQ8xF.js => icon-medical.62S53NR4.js} |   2 +-
 ...menu.cXqcWbsn.js => icon-menu.xKbIhOeq.js} |   2 +-
 ...cRYpUs_.js => icon-microphone.n9nS1r9k.js} |   2 +-
 ...js => icon-pause-circle-lined.l6dNNUco.js} |   2 +-
 ...on.GUGJMKmj.js => icon-person.dbcwd-53.js} |   2 +-
 ....js => icon-play-circle-lined.hK5OXOAl.js} |   2 +-
 ...h-olC3.js => icon-print-lined.LSjSkGV0.js} |   2 +-
 ...=> icon-question-circle-lined.BuyJvFG0.js} |   2 +-
 ...ch.GqYFHFIf.js => icon-search.jXi_AnkC.js} |   2 +-
 ...or.neBCSItu.js => icon-senior.Gz8LbPO1.js} |   2 +-
 ...are.yAJ7fkkO.js => icon-share.Mrcz1U3u.js} |   2 +-
 ...oke.iFg4JVG9.js => icon-smoke.ogLcEKzS.js} |   2 +-
 ...y.mOg-s27z.js => icon-spotify.Fqdu0Rmr.js} |   2 +-
 ...star.5-Hz87KX.js => icon-star._n_01cGJ.js} |   2 +-
 ....js => icon-stop-circle-lined.MCDwAMkC.js} |   2 +-
 ...1Cdm75.js => icon-table-lined.Obc807ds.js} |   2 +-
 ...6gMo8Q.js => icon-temperature.iYeUUXBf.js} |   2 +-
 ...c.0NDlUvBB.js => icon-traffic.iZKtggIi.js} |   2 +-
 ...KiB1PC.js => icon-trash-lined.LyLUP7op.js} |   2 +-
 ...ad.Z4PaOLf-.js => icon-upload.kUVI-ycm.js} |   2 +-
 ...js => icon-user-circle-filled.IJIxudQc.js} |   2 +-
 ...deo.kiPGaQ6i.js => icon-video.7VDPpbWR.js} |   2 +-
 ...at.C9k7L3B4.js => icon-wechat.Z6k04rEx.js} |   2 +-
 ...e.ogRB3-Fq.js => icon-youtube.pz58cf0I.js} |   2 +-
 ...n.6p_hWNaT.js => icon-zoom-in.3g5qbP_U.js} |   2 +-
 ....AmH-vH4L.js => icon-zoom-out.GK2jSbWk.js} |   2 +-
 ...hP89siY4.js => module-listing.zWMX5a25.js} |   2 +-
 _nuxt/module.HmGyaUlR.js                      |   1 -
 _nuxt/module.ZEpf0cR7.js                      |   1 +
 ...link.jgZZZkZ5.js => nuxt-link.sM27-MT7.js} |   2 +-
 _nuxt/{page.ciD6J5zn.js => page.dJj1_Sl3.js}  |   2 +-
 ....es.r8Pb5jxA.js => rpl-lib.es.b8udu3ko.js} |   2 +-
 ...JuMbu.js => useDocsNavigation.a2cLzZKV.js} |   2 +-
 ...DMJaxZxB.js => useRippleEvent.Eg1owuZM.js} |   2 +-
 ...udio.ur6OYxmR.js => useStudio.1zk0psWL.js} |   2 +-
 _payload.json                                 |   2 +-
 ...95122636.json => cache.1714695620480.json} |   2 +-
 ...636.json => VEvCElvzal.1714695620480.json} |   0
 ...636.json => X4Kd2USCYY.1714695620480.json} |   0
 ...636.json => u7BbTyuhiE.1714695620480.json} |   0
 ...636.json => 0aaoN3qg9x.1714695620480.json} |   0
 ...636.json => 0yFKOFomIE.1714695620480.json} |   0
 ...636.json => 1h0UvPl5DJ.1714695620480.json} |   0
 ...636.json => 1sexmTbv3K.1714695620480.json} |   0
 ...636.json => 2a1w1AtxYS.1714695620480.json} |   0
 ...636.json => 2mCaREffKT.1714695620480.json} |   0
 ...636.json => 2nhac26oaS.1714695620480.json} |   0
 ...636.json => 37U72dvAml.1714695620480.json} |   0
 ...636.json => 3e5KwkFD8D.1714695620480.json} |   0
 ...636.json => 3pJr534AHd.1714695620480.json} |   0
 ...636.json => 4AcSjmUyKz.1714695620480.json} |   0
 ...636.json => 4CDH2RZlOg.1714695620480.json} |   0
 ...636.json => 4GAecKBcgM.1714695620480.json} |   0
 ...636.json => 4HXkqmVFJb.1714695620480.json} |   0
 ...636.json => 4N78hAZbAr.1714695620480.json} |   0
 ...636.json => 4gRKa55c92.1714695620480.json} |   0
 ...636.json => 4gkyHLRvtL.1714695620480.json} |   0
 ...636.json => 4lybtDCVQt.1714695620480.json} |   0
 ...636.json => 4nnBbKHqJy.1714695620480.json} |   0
 ...636.json => 4voVzfjyBs.1714695620480.json} |   0
 ...636.json => 50smjdqWfq.1714695620480.json} |   0
 ...636.json => 5FAfxJoHkk.1714695620480.json} |   0
 ...636.json => 5U43wnL6p8.1714695620480.json} |   0
 ...636.json => 5jdemGYhzs.1714695620480.json} |   0
 ...636.json => 6m9vKFTHoz.1714695620480.json} |   0
 ...636.json => 6qsnYmf6Kg.1714695620480.json} |   0
 ...636.json => 7YecXPJ42X.1714695620480.json} |   0
 ...636.json => 7ht5DW7UkW.1714695620480.json} |   0
 ...636.json => 7xyfDntTEH.1714695620480.json} |   0
 ...636.json => 8YsCLN3a5w.1714695620480.json} |   0
 ...636.json => 8bRHO8CL4a.1714695620480.json} |   0
 ...636.json => 9XxSCC2Gng.1714695620480.json} |   0
 ...636.json => A9fXFyNTcE.1714695620480.json} |   0
 ...636.json => AWcKDZuk7Q.1714695620480.json} |   0
 ...636.json => Atv5Eb58HG.1714695620480.json} |   0
 ...636.json => Az1biL1r1R.1714695620480.json} |   0
 ...636.json => BNBjGRc556.1714695620480.json} |   0
 ...636.json => BZQqMF8iy9.1714695620480.json} |   0
 ...636.json => BlQCj02zMr.1714695620480.json} |   0
 ...636.json => CPfLz4RDEN.1714695620480.json} |   0
 ...636.json => Cxn4djMCqT.1714695620480.json} |   0
 ...636.json => DRQuabYniG.1714695620480.json} |   0
 ...636.json => DrRBJ50Lyl.1714695620480.json} |   0
 ...636.json => E4VbfHM5TO.1714695620480.json} |   0
 ...636.json => EA1Viu7YX3.1714695620480.json} |   0
 ...636.json => EytvxStB0e.1714695620480.json} |   0
 ...636.json => FL2NoTOnZH.1714695620480.json} |   0
 ...636.json => FRx43BOHwZ.1714695620480.json} |   0
 ...636.json => FXcU8uc5Dd.1714695620480.json} |   0
 ...636.json => G6inKMevJ7.1714695620480.json} |   0
 ...636.json => GJj5YfVIWk.1714695620480.json} |   0
 ...636.json => GNwfSxVFIk.1714695620480.json} |   0
 ...636.json => IHTNSTG2BE.1714695620480.json} |   0
 ...636.json => IVSDZeduvC.1714695620480.json} |   0
 ...636.json => ImzjcGUQec.1714695620480.json} |   0
 ...636.json => Int4bWCGef.1714695620480.json} |   0
 ...636.json => K0FMoZzx9O.1714695620480.json} |   0
 ...636.json => KFY0AW5Ub0.1714695620480.json} |   0
 ...636.json => KrSUbbePmB.1714695620480.json} |   0
 ...636.json => L4BiBaBwSa.1714695620480.json} |   0
 ...636.json => LRqNzYU79f.1714695620480.json} |   0
 ...636.json => LhnX2N5NGd.1714695620480.json} |   0
 ...636.json => LmYw8BgZez.1714695620480.json} |   0
 ...636.json => LoX2CGyAED.1714695620480.json} |   0
 ...636.json => M44yiRFUUt.1714695620480.json} |   0
 ...636.json => MRFkBuP81T.1714695620480.json} |   0
 ...636.json => MdKSCPenip.1714695620480.json} |   0
 ...636.json => Mk9AxDcquK.1714695620480.json} |   0
 ...636.json => MulTBoHiIX.1714695620480.json} |   0
 ...636.json => MyfyBodaI9.1714695620480.json} |   0
 ...636.json => O88noog5Ku.1714695620480.json} |   0
 ...636.json => P93e3h20vo.1714695620480.json} |   0
 ...636.json => PDyWpwM8OX.1714695620480.json} |   0
 ...636.json => PJBEZoM2Co.1714695620480.json} |   0
 ...636.json => QkADENtF1a.1714695620480.json} |   0
 ...636.json => SF9m31U3TG.1714695620480.json} |   0
 ...636.json => SJLhvQED7V.1714695620480.json} |   0
 ...636.json => SM7WENOXwn.1714695620480.json} |   0
 ...636.json => TIFRZ2W30y.1714695620480.json} |   0
 ...636.json => TlwNM8EnUb.1714695620480.json} |   0
 ...636.json => Tr8c01AB9c.1714695620480.json} |   0
 ...636.json => UqYcuzGZzU.1714695620480.json} |   0
 ...636.json => UrnjC2F9dw.1714695620480.json} |   0
 ...636.json => VYBIyuFjts.1714695620480.json} |   0
 ...636.json => VbChyF8OyE.1714695620480.json} |   0
 ...636.json => VgHMTDZLK4.1714695620480.json} |   0
 ...636.json => WTS5sIVY6D.1714695620480.json} |   0
 ...636.json => X0kuUttahW.1714695620480.json} |   0
 ...636.json => X4VxdTjbhP.1714695620480.json} |   0
 ...636.json => XAPzcVjat3.1714695620480.json} |   0
 ...636.json => XFjJyWynAe.1714695620480.json} |   0
 ...636.json => XZp1K2Gry5.1714695620480.json} |   0
 ...636.json => Xh1IsErcFG.1714695620480.json} |   0
 ...636.json => XjS2U5Izhg.1714695620480.json} |   0
 ...636.json => Xl71L7ieAm.1714695620480.json} |   0
 ...636.json => XmTesIf7f9.1714695620480.json} |   0
 ...636.json => YA6fkmNWlw.1714695620480.json} |   0
 ...636.json => YCO3BsA2AE.1714695620480.json} |   0
 ...636.json => YoUlkYQh6c.1714695620480.json} |   0
 ...636.json => Z5EE1O4UbG.1714695620480.json} |   0
 ...636.json => Z70rHCO4fI.1714695620480.json} |   0
 ...636.json => ZWAUGjhMhU.1714695620480.json} |   0
 ...636.json => acark7P3nX.1714695620480.json} |   0
 ...636.json => apkiOdtfcp.1714695620480.json} |   0
 ...636.json => bEnwKjFwnq.1714695620480.json} |   0
 ...636.json => bF3gJlnVu7.1714695620480.json} |   0
 ...636.json => bnDywirsxl.1714695620480.json} |   0
 ...636.json => brX4CwCJoQ.1714695620480.json} |   0
 ...636.json => bzCp7cuiep.1714695620480.json} |   0
 ...636.json => c71XK0jI69.1714695620480.json} |   0
 ...636.json => cExGEtkzuk.1714695620480.json} |   0
 ...636.json => caOGo3s222.1714695620480.json} |   0
 ...636.json => ciwJA2cWZR.1714695620480.json} |   0
 ...636.json => clipwUGxow.1714695620480.json} |   0
 ...636.json => cuM7MVrMUw.1714695620480.json} |   0
 ...636.json => dIqZm2MbqA.1714695620480.json} |   0
 ...636.json => dKdR0W5tzU.1714695620480.json} |   0
 ...636.json => eOtXz0jpwF.1714695620480.json} |   0
 ...636.json => etly8IUHtt.1714695620480.json} |   0
 ...636.json => eygiU6u8aQ.1714695620480.json} |   0
 ...636.json => fRk0JHtrBq.1714695620480.json} |   0
 ...636.json => fyKzonlTVE.1714695620480.json} |   0
 ...636.json => g90uDrGc6h.1714695620480.json} |   0
 ...636.json => gH1XZ96zGS.1714695620480.json} |   0
 ...636.json => grXljdbkxM.1714695620480.json} |   0
 ...636.json => gvk7ITPeIG.1714695620480.json} |   0
 ...636.json => hP08bRT8o2.1714695620480.json} |   0
 ...636.json => hckiE95FTb.1714695620480.json} |   0
 ...636.json => j64GcQcJKA.1714695620480.json} |   0
 ...636.json => j6VGlwh2g9.1714695620480.json} |   0
 ...636.json => jgRpWN3BQE.1714695620480.json} |   0
 ...636.json => k0LdsxuVgM.1714695620480.json} |   0
 ...636.json => kO7epVwzlv.1714695620480.json} |   0
 ...636.json => kXlcvutl1N.1714695620480.json} |   0
 ...636.json => kh2DZ78o4K.1714695620480.json} |   0
 ...636.json => mKPt9msOAD.1714695620480.json} |   0
 ...636.json => mPus9cC6oE.1714695620480.json} |   0
 ...636.json => mrPIJZRQWV.1714695620480.json} |   0
 ...636.json => ok04mhOgoW.1714695620480.json} |   0
 ...636.json => pQRGRVXgWa.1714695620480.json} |   0
 ...636.json => pawOjRstIF.1714695620480.json} |   0
 ...636.json => popbnfes2V.1714695620480.json} |   0
 ...636.json => q8OIs3OPBw.1714695620480.json} |   0
 ...636.json => qhKQKXD4Dg.1714695620480.json} |   0
 ...636.json => qsQbddAhkh.1714695620480.json} |   0
 ...636.json => rjiu3BoM41.1714695620480.json} |   0
 ...636.json => rvljicMwDZ.1714695620480.json} |   0
 ...636.json => s6NQtLySML.1714695620480.json} |   0
 ...636.json => s9WFFuhhYd.1714695620480.json} |   0
 ...636.json => sFf87k6nba.1714695620480.json} |   0
 ...636.json => sdAri5fXY2.1714695620480.json} |   0
 ...636.json => ssqfMqELbL.1714695620480.json} |   0
 ...636.json => t0PepQyppe.1714695620480.json} |   0
 ...636.json => t2lXFVWGtk.1714695620480.json} |   0
 ...636.json => tC2YUplCsO.1714695620480.json} |   0
 ...636.json => tJ9ZGrn4yB.1714695620480.json} |   0
 ...636.json => tTSjBFoWHS.1714695620480.json} |   0
 ...636.json => tXkIYFpTjb.1714695620480.json} |   0
 ...636.json => tdIi0E0ZcT.1714695620480.json} |   0
 ...636.json => tpTHQGg3jH.1714695620480.json} |   0
 ...636.json => u5WCIRmncC.1714695620480.json} |   0
 ...636.json => ufL8jzkw3H.1714695620480.json} |   0
 ...636.json => uiREdQR1My.1714695620480.json} |   0
 ...636.json => utM4Ruw0ol.1714695620480.json} |   0
 ...636.json => v6HPfz8OL9.1714695620480.json} |   0
 ...636.json => vJwSfNopNI.1714695620480.json} |   0
 ...636.json => vdsDSrkXFQ.1714695620480.json} |   0
 ...636.json => vj66SN51A0.1714695620480.json} |   0
 ...636.json => w37itSs4uJ.1714695620480.json} |   0
 ...636.json => wEB9wuD1Rn.1714695620480.json} |   0
 ...636.json => wH3ANibFW3.1714695620480.json} |   0
 ...636.json => xCcU5Gnepq.1714695620480.json} |   0
 ...636.json => xKaOOlWHDJ.1714695620480.json} |   0
 ...636.json => xSzuF1nnCj.1714695620480.json} |   0
 ...636.json => xWeY3NfYtX.1714695620480.json} |   0
 ...636.json => xqajda0wk4.1714695620480.json} |   0
 ...636.json => yCq8hfNCRB.1714695620480.json} |   0
 ...636.json => zVyWsmAcuf.1714695620480.json} |   0
 .../about/contributing/_payload.json          |   2 +-
 design-system/about/contributing/index.html   | 100 +++++++-------
 .../about/getting-support/_payload.json       |   2 +-
 .../about/getting-support/index.html          | 100 +++++++-------
 .../about/what-is-ripple/_payload.json        |   2 +-
 design-system/about/what-is-ripple/index.html | 104 +++++++--------
 design-system/about/whos-it-for/_payload.json |   2 +-
 design-system/about/whos-it-for/index.html    | 102 +++++++--------
 .../components/accordion/_payload.json        |   2 +-
 design-system/components/accordion/index.html | 108 ++++++++--------
 .../components/acknowledgment/_payload.json   |   2 +-
 .../components/acknowledgment/index.html      | 100 +++++++-------
 design-system/components/alert/_payload.json  |   2 +-
 design-system/components/alert/index.html     | 104 +++++++--------
 .../components/block-quote/_payload.json      |   2 +-
 .../components/block-quote/index.html         | 108 ++++++++--------
 .../components/breadcrumb/_payload.json       |   2 +-
 .../components/breadcrumb/index.html          | 108 ++++++++--------
 design-system/components/button/_payload.json |   2 +-
 design-system/components/button/index.html    | 112 ++++++++--------
 .../components/call-to-action/_payload.json   |   2 +-
 .../components/call-to-action/index.html      | 108 ++++++++--------
 .../components/callout/_payload.json          |   2 +-
 design-system/components/callout/index.html   | 110 ++++++++--------
 .../components/campaign-banner/_payload.json  |   2 +-
 .../components/campaign-banner/index.html     | 108 ++++++++--------
 design-system/components/card/_payload.json   |   2 +-
 design-system/components/card/index.html      | 110 ++++++++--------
 .../components/carousel/_payload.json         |   2 +-
 design-system/components/carousel/index.html  | 108 ++++++++--------
 .../components/category-grid/_payload.json    |   2 +-
 .../components/category-grid/index.html       | 108 ++++++++--------
 .../components/checkbox/_payload.json         |   2 +-
 design-system/components/checkbox/index.html  | 112 ++++++++--------
 design-system/components/chip/_payload.json   |   2 +-
 design-system/components/chip/index.html      | 108 ++++++++--------
 .../components/contact-us/_payload.json       |   2 +-
 .../components/contact-us/index.html          | 108 ++++++++--------
 .../components/date-input/_payload.json       |   2 +-
 .../components/date-input/index.html          | 112 ++++++++--------
 .../components/detail-list/_payload.json      |   2 +-
 .../components/detail-list/index.html         | 108 ++++++++--------
 .../components/dropdown/_payload.json         |   2 +-
 design-system/components/dropdown/index.html  | 112 ++++++++--------
 design-system/components/file/_payload.json   |   2 +-
 design-system/components/file/index.html      | 108 ++++++++--------
 design-system/components/footer/_payload.json |   2 +-
 design-system/components/footer/index.html    | 108 ++++++++--------
 .../components/form-alert/_payload.json       |   2 +-
 .../components/form-alert/index.html          | 106 +++++++--------
 design-system/components/form/_payload.json   |   2 +-
 design-system/components/form/index.html      | 110 ++++++++--------
 design-system/components/header/_payload.json |   2 +-
 design-system/components/header/index.html    | 110 ++++++++--------
 .../in-page-navigation/_payload.json          |   2 +-
 .../components/in-page-navigation/index.html  | 108 ++++++++--------
 .../components/input-field/_payload.json      |   2 +-
 .../components/input-field/index.html         | 112 ++++++++--------
 .../components/key-dates/_payload.json        |   2 +-
 design-system/components/key-dates/index.html | 108 ++++++++--------
 .../components/media-embed/_payload.json      |   2 +-
 .../components/media-embed/index.html         | 110 ++++++++--------
 .../components/media-fullscreen/_payload.json |   2 +-
 .../components/media-fullscreen/index.html    | 108 ++++++++--------
 .../components/media-gallery/_payload.json    |   2 +-
 .../components/media-gallery/index.html       | 108 ++++++++--------
 design-system/components/media/_payload.json  |   2 +-
 design-system/components/media/index.html     | 106 +++++++--------
 .../components/option-button/_payload.json    |   2 +-
 .../components/option-button/index.html       | 108 ++++++++--------
 .../components/page-action/_payload.json      |   2 +-
 .../components/page-action/index.html         | 108 ++++++++--------
 .../components/pagination/_payload.json       |   2 +-
 .../components/pagination/index.html          | 110 ++++++++--------
 .../primary-navigation/_payload.json          |   2 +-
 .../components/primary-navigation/index.html  | 112 ++++++++--------
 .../components/profile/_payload.json          |   2 +-
 design-system/components/profile/index.html   | 100 +++++++-------
 .../components/radio-button/_payload.json     |   2 +-
 .../components/radio-button/index.html        | 110 ++++++++--------
 .../components/related-links/_payload.json    |   2 +-
 .../components/related-links/index.html       | 100 +++++++-------
 .../components/results-listing/_payload.json  |   2 +-
 .../components/results-listing/index.html     | 108 ++++++++--------
 .../components/search-bar/_payload.json       |   2 +-
 .../components/search-bar/index.html          | 110 ++++++++--------
 .../components/skip-link/_payload.json        |   2 +-
 design-system/components/skip-link/index.html | 108 ++++++++--------
 .../components/social-share/_payload.json     |   2 +-
 .../components/social-share/index.html        | 108 ++++++++--------
 .../components/statistics-grid/_payload.json  |   2 +-
 .../components/statistics-grid/index.html     | 102 +++++++--------
 design-system/components/table/_payload.json  |   2 +-
 design-system/components/table/index.html     | 108 ++++++++--------
 design-system/components/tabs/_payload.json   |   2 +-
 design-system/components/tabs/index.html      | 108 ++++++++--------
 design-system/components/tag/_payload.json    |   2 +-
 design-system/components/tag/index.html       | 102 +++++++--------
 .../components/text-area/_payload.json        |   2 +-
 design-system/components/text-area/index.html | 112 ++++++++--------
 .../components/timeline/_payload.json         |   2 +-
 design-system/components/timeline/index.html  | 108 ++++++++--------
 .../vertical-navigation/_payload.json         |   2 +-
 .../components/vertical-navigation/index.html | 112 ++++++++--------
 .../design/design-tokens/_payload.json        |   2 +-
 design-system/design/design-tokens/index.html | 104 +++++++--------
 .../design/getting-started/_payload.json      |   2 +-
 .../design/getting-started/index.html         | 104 +++++++--------
 .../our-design-principles/_payload.json       |   2 +-
 .../design/our-design-principles/index.html   |  96 +++++++-------
 .../_payload.json                             |   2 +-
 .../theming-guidance-for-designers/index.html | 120 ++++++++---------
 .../develop/contributing/_payload.json        |   2 +-
 design-system/develop/contributing/index.html |  96 +++++++-------
 .../develop/getting-started/_payload.json     |   2 +-
 .../develop/getting-started/index.html        | 106 +++++++--------
 design-system/develop/theming/_payload.json   |   2 +-
 design-system/develop/theming/index.html      | 104 +++++++--------
 design-system/develop/usage/_payload.json     |   2 +-
 .../access-to-github-packages/_payload.json   |   2 +-
 .../access-to-github-packages/index.html      | 106 +++++++--------
 .../develop/usage/css-only/_payload.json      |   2 +-
 .../develop/usage/css-only/index.html         |  98 +++++++-------
 design-system/develop/usage/index.html        | 114 ++++++++--------
 .../develop/usage/nuxt/_payload.json          |   2 +-
 design-system/develop/usage/nuxt/index.html   |  98 +++++++-------
 design-system/develop/usage/vue/_payload.json |   2 +-
 design-system/develop/usage/vue/index.html    |  98 +++++++-------
 .../develop/usage/webcomponents/_payload.json |   2 +-
 .../develop/usage/webcomponents/index.html    |  96 +++++++-------
 design-system/styles/colour/_payload.json     |   2 +-
 design-system/styles/colour/index.html        | 112 ++++++++--------
 .../styles/focus-state/_payload.json          |   2 +-
 design-system/styles/focus-state/index.html   | 110 ++++++++--------
 design-system/styles/grid/_payload.json       |   2 +-
 design-system/styles/grid/index.html          | 108 ++++++++--------
 design-system/styles/icons/_payload.json      |   2 +-
 design-system/styles/icons/index.html         | 114 ++++++++--------
 .../styles/layer-styles/_payload.json         |   2 +-
 design-system/styles/layer-styles/index.html  | 108 ++++++++--------
 design-system/styles/layout/_payload.json     |   2 +-
 design-system/styles/layout/index.html        | 112 ++++++++--------
 design-system/styles/logo/_payload.json       |   2 +-
 design-system/styles/logo/index.html          | 110 ++++++++--------
 design-system/styles/motion/_payload.json     |   2 +-
 design-system/styles/motion/index.html        | 110 ++++++++--------
 design-system/styles/spacing/_payload.json    |   2 +-
 design-system/styles/spacing/index.html       | 104 +++++++--------
 design-system/styles/typography/_payload.json |   2 +-
 design-system/styles/typography/index.html    | 122 +++++++++---------
 framework/_payload.json                       |   2 +-
 framework/core-modules/_payload.json          |   2 +-
 framework/core-modules/index.html             | 100 +++++++-------
 .../guides/brand-application/_payload.json    |   2 +-
 framework/guides/brand-application/index.html | 102 +++++++--------
 .../creating-content-types/_payload.json      |   2 +-
 .../guides/creating-content-types/index.html  | 108 ++++++++--------
 .../guides/creating-new-layers/_payload.json  |   2 +-
 .../guides/creating-new-layers/index.html     | 108 ++++++++--------
 .../guides/dynamic-components/_payload.json   |   2 +-
 .../guides/dynamic-components/index.html      | 108 ++++++++--------
 framework/guides/migrating/_payload.json      |   2 +-
 framework/guides/migrating/index.html         | 104 +++++++--------
 framework/guides/new-sites/_payload.json      |   2 +-
 framework/guides/new-sites/index.html         | 106 +++++++--------
 framework/index.html                          | 100 +++++++-------
 .../key-concepts/api-endpoints/_payload.json  |   2 +-
 .../key-concepts/api-endpoints/index.html     |  96 +++++++-------
 .../key-concepts/content-types/_payload.json  |   2 +-
 .../key-concepts/content-types/index.html     | 102 +++++++--------
 .../dynamic-components/_payload.json          |   2 +-
 .../dynamic-components/index.html             |  94 +++++++-------
 .../key-concepts/nuxt-layers/_payload.json    |   2 +-
 framework/key-concepts/nuxt-layers/index.html |  96 +++++++-------
 framework/key-concepts/nuxt/_payload.json     |   2 +-
 framework/key-concepts/nuxt/index.html        | 100 +++++++-------
 index.html                                    |  84 ++++++------
 515 files changed, 5050 insertions(+), 5050 deletions(-)
 rename _nuxt/{AppLayout.vue.nby97MTz.js => AppLayout.vue.hqX4UWMQ.js} (98%)
 rename _nuxt/{AppSidebarLayout.vue.aU-pbmdL.js => AppSidebarLayout.vue.6sfT1On1.js} (90%)
 rename _nuxt/{ContentDoc.SXcfJrUW.js => ContentDoc.zyRxlzIB.js} (83%)
 rename _nuxt/{ContentList.UlDpyDEh.js => ContentList.ux5QQJBH.js} (85%)
 rename _nuxt/{ContentNavigation.hJs7QjUE.js => ContentNavigation.CfUahY4n.js} (85%)
 rename _nuxt/{ContentQuery.EOcFbojz.js => ContentQuery.OgHSivmp.js} (92%)
 rename _nuxt/{ContentRenderer.CgXd06ZK.js => ContentRenderer.CHEOl3j3.js} (89%)
 delete mode 100644 _nuxt/ContentRendererMarkdown.jF369Aie.js
 rename _nuxt/{ContentRendererMarkdown.vue.cUVXlmIq.js => ContentRendererMarkdown.vue.sDq3Jws6.js} (99%)
 create mode 100644 _nuxt/ContentRendererMarkdown.zskQ2UNQ.js
 rename _nuxt/{ContentSlot.lsaDai_l.js => ContentSlot.uUI9CND_.js} (92%)
 rename _nuxt/{DocsAlert.qUx9DhKf.js => DocsAlert.NYyBoUgq.js} (80%)
 create mode 100644 _nuxt/DocsCard.BHyI6viP.js
 delete mode 100644 _nuxt/DocsCard.NvucPPsI.js
 rename _nuxt/{DocsCardGrid.CGE8nz0H.js => DocsCardGrid.PUHkyZXK.js} (78%)
 rename _nuxt/{DocsColourTable.N8n5f2_3.js => DocsColourTable.LKiaprrs.js} (88%)
 rename _nuxt/{DocsContent.L9iJVoxE.js => DocsContent.SQZjpxgh.js} (60%)
 rename _nuxt/{DocsContentNavigation.UDfK-BX9.js => DocsContentNavigation.sYXaW9Re.js} (87%)
 rename _nuxt/{DocsExample.o_g87j4m.js => DocsExample.TYtIaycF.js} (99%)
 rename _nuxt/{DocsGradientTable.j5XMaAB_.js => DocsGradientTable.eMExAp1K.js} (91%)
 rename _nuxt/{DocsGrid.4LuoD9Zu.js => DocsGrid.CLT9yKLT.js} (75%)
 rename _nuxt/{DocsHeroHeader.PVXBo8Q-.js => DocsHeroHeader.VJrQvyc0.js} (88%)
 rename _nuxt/{DocsHomeSection.gUJpqPBN.js => DocsHomeSection.-8CtU5yK.js} (75%)
 rename _nuxt/{DocsIcon.7thEtIhB.js => DocsIcon.T-QbG3WZ.js} (58%)
 rename _nuxt/{DocsIconSizingTable.xZUIYxKF.js => DocsIconSizingTable.5KObi_vr.js} (83%)
 rename _nuxt/{DocsIconTable.9o2Ol26d.js => DocsIconTable.SNmL3ofA.js} (76%)
 rename _nuxt/{DocsImageExample.gzBXNxRI.js => DocsImageExample.8UN1-6g4.js} (90%)
 rename _nuxt/{DocsLayerStyleTable.OEKkkJyE.js => DocsLayerStyleTable.eVkhneyr.js} (96%)
 rename _nuxt/{DocsLink.5OmhIBHZ.js => DocsLink._8mcEyeM.js} (73%)
 rename _nuxt/{DocsModuleCard.hpjmQYW8.js => DocsModuleCard.2ZwiOzRg.js} (50%)
 rename _nuxt/{DocsModuleInfo.1q5O7tu6.js => DocsModuleInfo.dxnzvO_K.js} (71%)
 delete mode 100644 _nuxt/DocsModuleNavigation.1X1oFgOt.js
 create mode 100644 _nuxt/DocsModuleNavigation.N74iA2Tc.js
 rename _nuxt/{DocsNavLink.5k-bni1U.js => DocsNavLink.k4ZwJ1d1.js} (77%)
 rename _nuxt/{DocsPageHeader.vbDi0R7z.js => DocsPageHeader.J1YDFRG1.js} (73%)
 rename _nuxt/{DocsThemeChooser.MC6JDrOF.js => DocsThemeChooser.xp0uGfRQ.js} (95%)
 rename _nuxt/{DocsTypeClassTable.JeAjrHD9.js => DocsTypeClassTable.c5edmzGt.js} (94%)
 rename _nuxt/{DocsTypeTable.Iq8SBPIK.js => DocsTypeTable.S30MUh9q.js} (95%)
 rename _nuxt/{DocsWhatsNew.3ELaYX2l.js => DocsWhatsNew.iLgRC7ZK.js} (91%)
 rename _nuxt/{DocumentDrivenEmpty.3DI1wYHv.js => DocumentDrivenEmpty.-Bd5tvR3.js} (77%)
 rename _nuxt/{Markdown.4yrCw_l0.js => Markdown.vjX68Z-B.js} (64%)
 rename _nuxt/{ProseA.gmWvIO0I.js => ProseA.2rbo7RTC.js} (51%)
 rename _nuxt/{ProseBlockquote.lp_k9Hpd.js => ProseBlockquote.Czpq-HHw.js} (75%)
 rename _nuxt/{ProseCode.ggTmuEB2.js => ProseCode.Xz7xMLuq.js} (86%)
 rename _nuxt/{ProseCodeInline.uDpSgjM7.js => ProseCodeInline.iJ9KJvnk.js} (79%)
 rename _nuxt/{ProseEm.D-92YCoe.js => ProseEm.jWeQl8xp.js} (73%)
 rename _nuxt/{ProseH1.qgSebaHX.js => ProseH1.50NQSnzl.js} (85%)
 rename _nuxt/{ProseH2.ugZKdBSy.js => ProseH2.G8mCS4ry.js} (90%)
 rename _nuxt/{ProseH3.zV8FfIjw.js => ProseH3.WHOIDSwD.js} (91%)
 rename _nuxt/{ProseH4.CwUV-MIb.js => ProseH4.gK7ORMEc.js} (73%)
 rename _nuxt/{ProseH5.xN9FQiKa.js => ProseH5.ViebVa2Y.js} (85%)
 rename _nuxt/{ProseH6.XPfwxdAr.js => ProseH6.lit-WfaG.js} (85%)
 rename _nuxt/{ProseHr.NdB0-p6G.js => ProseHr.uASz6lXf.js} (75%)
 rename _nuxt/{ProseImg.wgVpK8mn.js => ProseImg.Wu9xgcX7.js} (89%)
 rename _nuxt/{ProseLi.MnotWTMg.js => ProseLi.kWofYoPt.js} (73%)
 rename _nuxt/{ProseOl.jzxVYZcz.js => ProseOl.f55gcGCc.js} (73%)
 rename _nuxt/{ProseP.cG_oeGiJ.js => ProseP.xOmAEUok.js} (73%)
 rename _nuxt/{ProsePre.1p0bzX0t.js => ProsePre.928ctTB_.js} (83%)
 rename _nuxt/{ProseScript.FDrZUZC2.js => ProseScript.YD2iA94j.js} (86%)
 rename _nuxt/{ProseStrong.F9NVvvm4.js => ProseStrong.GmB4B_NE.js} (73%)
 rename _nuxt/{ProseTable.Nr-94ppo.js => ProseTable.d8cdIzif.js} (83%)
 rename _nuxt/{ProseTbody.pO4HZmMb.js => ProseTbody.FPzd5AuU.js} (73%)
 rename _nuxt/{ProseTd.KWvY0UVz.js => ProseTd.ydAecYY-.js} (73%)
 rename _nuxt/{ProseTh.15m2hyNr.js => ProseTh.GnFrmIgb.js} (73%)
 rename _nuxt/{ProseThead.x0xD32yi.js => ProseThead.alimbSyj.js} (73%)
 rename _nuxt/{ProseTr.NjbdsN4h.js => ProseTr.rCUlpnCA.js} (73%)
 rename _nuxt/{ProseUl.GyfBzrRs.js => ProseUl.ajqmVD2y.js} (73%)
 rename _nuxt/{RplButton.css.kobVpNhn.js => RplButton.css.bGBZW0Bs.js} (92%)
 rename _nuxt/{RplContent.css.cfrovusU.js => RplContent.css.7ezTJ87f.js} (79%)
 rename _nuxt/{RplExpandable.vue.3-aUufTF.js => RplExpandable.vue.ErcNtea4.js} (94%)
 delete mode 100644 _nuxt/RplIcon.vue.NIDikUS0.js
 create mode 100644 _nuxt/RplIcon.vue.PZ-X7Qhh.js
 rename _nuxt/{RplImage.css.o2mWVvok.js => RplImage.css.ouJWHfa9.js} (98%)
 rename _nuxt/{RplLink.vue.TWUjSovo.js => RplLink.vue.3IdzOFUB.js} (68%)
 rename _nuxt/{RplList.vue.4pRwhR7E.js => RplList.vue.i5RvVHLA.js} (90%)
 rename _nuxt/{RplPromoCard.vue.btg01fDe.js => RplPromoCard.vue.pyq2iKcr.js} (92%)
 rename _nuxt/{RplTextLink.css.ll_eQGN0.js => RplTextLink.css.vnmpcBOe.js} (77%)
 rename _nuxt/{Swatch.pCyR0PCQ.js => Swatch.FPuuW78y.js} (82%)
 rename _nuxt/{asyncData.6xpne1x0.js => asyncData.mgwg8A3s.js} (97%)
 delete mode 100644 _nuxt/builds/meta/1362ce16-7e83-433f-9854-d1c79bedd190.json
 create mode 100644 _nuxt/builds/meta/1c6da812-7c87-438d-9470-666bc9df1046.json
 rename _nuxt/{client-db.W4pfov87.js => client-db.lwmN9NLn.js} (99%)
 rename _nuxt/{document-driven.BWdn4QDn.js => document-driven.R0qWc0WJ.js} (81%)
 rename _nuxt/{entry.49ZHHvLB.js => entry.Do8xnxHS.js} (61%)
 rename _nuxt/{error-404.T0EgPV7K.js => error-404.7ZxJfF8q.js} (94%)
 rename _nuxt/{error-500.YI21l9fK.js => error-500.zxG8rMw4.js} (96%)
 rename _nuxt/{head.UNWUUq-8.js => head.i1ysHgjT.js} (78%)
 rename _nuxt/{home.p0dB_qIA.js => home.f8bXHl7K.js} (83%)
 rename _nuxt/{icon-accessible.IgfNK4Jg.js => icon-accessible.JERWHslr.js} (90%)
 rename _nuxt/{icon-add.kzXPKrGl.js => icon-add.hkhs5vZ-.js} (82%)
 rename _nuxt/{icon-arrow-down.2v2hp4Xt.js => icon-arrow-down.SQ1bOEHB.js} (85%)
 rename _nuxt/{icon-arrow-left.0NIGiU1P.js => icon-arrow-left.HVFcOuPq.js} (85%)
 rename _nuxt/{icon-arrow-right.G4JTPGc2.js => icon-arrow-right.Z7s6RWiM.js} (85%)
 rename _nuxt/{icon-arrow-up.PSS8jaD7.js => icon-arrow-up.5ibpXQnN.js} (85%)
 rename _nuxt/{icon-attach.Fwk4Uxw0.js => icon-attach.KaZHqyGD.js} (89%)
 rename _nuxt/{icon-browser.UxDB2PIC.js => icon-browser.i77M2uFf.js} (90%)
 rename _nuxt/{icon-calendar-lined.uqOA-YSW.js => icon-calendar-lined.YF7sg5n3.js} (87%)
 rename _nuxt/{icon-cancel-circle-filled.-GlE6Jtl.js => icon-cancel-circle-filled.CURkLpAF.js} (88%)
 rename _nuxt/{icon-car.u_vczvd4.js => icon-car.PxyroN-0.js} (94%)
 rename _nuxt/{icon-check.2p4Xc53D.js => icon-check.X6iFJ1nM.js} (83%)
 rename _nuxt/{icon-child-lined.CxoBoObp.js => icon-child-lined.cl3qOp4j.js} (91%)
 rename _nuxt/{icon-dollar-circle-filled.pXobvUhs.js => icon-dollar-circle-filled.OfCa0qKU.js} (90%)
 rename _nuxt/{icon-enlarge.1Br3L23I.js => icon-enlarge.fM1MVPt3.js} (91%)
 rename _nuxt/{icon-fire.6Q6oR_Fn.js => icon-fire.H8m70NW7.js} (89%)
 rename _nuxt/{icon-flood.0HEgTeD9.js => icon-flood.Ibpk1X0p.js} (94%)
 rename _nuxt/{icon-free.OVf1QOdo.js => icon-free.Rd0LPl8f.js} (92%)
 rename _nuxt/{icon-home.QZ-FrcoD.js => icon-home.MT_Aun8G.js} (89%)
 rename _nuxt/{icon-instagram.NFdPBf9w.js => icon-instagram.t6FQ8jrY.js} (88%)
 rename _nuxt/{icon-lightning.lldfgtzu.js => icon-lightning.yIdZoiWx.js} (87%)
 rename _nuxt/{icon-link.JWvdqMbJ.js => icon-link.POGwWQkT.js} (88%)
 rename _nuxt/{icon-list.ypbt8G6o.js => icon-list.XfZbIWbX.js} (90%)
 rename _nuxt/{icon-loading.RshIDrCh.js => icon-loading.eTABF85R.js} (93%)
 rename _nuxt/{icon-log-in-lined.suOMu9M0.js => icon-log-in-lined.4lvxCkYN.js} (88%)
 rename _nuxt/{icon-mail-lined.Ip5JdcEl.js => icon-mail-lined.u9eIXaUH.js} (85%)
 rename _nuxt/{icon-map-zoom-in.RoeBztCA.js => icon-map-zoom-in.bXAuyjx5.js} (86%)
 rename _nuxt/{icon-map-zoom-out.V8461QeS.js => icon-map-zoom-out.pdO56m1U.js} (80%)
 rename _nuxt/{icon-medical.QtoyQ8xF.js => icon-medical.62S53NR4.js} (94%)
 rename _nuxt/{icon-menu.cXqcWbsn.js => icon-menu.xKbIhOeq.js} (89%)
 rename _nuxt/{icon-microphone._cRYpUs_.js => icon-microphone.n9nS1r9k.js} (89%)
 rename _nuxt/{icon-pause-circle-lined.gG4gButR.js => icon-pause-circle-lined.l6dNNUco.js} (89%)
 rename _nuxt/{icon-person.GUGJMKmj.js => icon-person.dbcwd-53.js} (94%)
 rename _nuxt/{icon-play-circle-lined.cJRQaA2O.js => icon-play-circle-lined.hK5OXOAl.js} (85%)
 rename _nuxt/{icon-print-lined.W6h-olC3.js => icon-print-lined.LSjSkGV0.js} (92%)
 rename _nuxt/{icon-question-circle-lined.fDPrhu5z.js => icon-question-circle-lined.BuyJvFG0.js} (89%)
 rename _nuxt/{icon-search.GqYFHFIf.js => icon-search.jXi_AnkC.js} (87%)
 rename _nuxt/{icon-senior.neBCSItu.js => icon-senior.Gz8LbPO1.js} (90%)
 rename _nuxt/{icon-share.yAJ7fkkO.js => icon-share.Mrcz1U3u.js} (86%)
 rename _nuxt/{icon-smoke.iFg4JVG9.js => icon-smoke.ogLcEKzS.js} (91%)
 rename _nuxt/{icon-spotify.mOg-s27z.js => icon-spotify.Fqdu0Rmr.js} (90%)
 rename _nuxt/{icon-star.5-Hz87KX.js => icon-star._n_01cGJ.js} (87%)
 rename _nuxt/{icon-stop-circle-lined.3l3IR3Om.js => icon-stop-circle-lined.MCDwAMkC.js} (85%)
 rename _nuxt/{icon-table-lined.i31Cdm75.js => icon-table-lined.Obc807ds.js} (90%)
 rename _nuxt/{icon-temperature.CD6gMo8Q.js => icon-temperature.iYeUUXBf.js} (86%)
 rename _nuxt/{icon-traffic.0NDlUvBB.js => icon-traffic.iZKtggIi.js} (88%)
 rename _nuxt/{icon-trash-lined.lcKiB1PC.js => icon-trash-lined.LyLUP7op.js} (87%)
 rename _nuxt/{icon-upload.Z4PaOLf-.js => icon-upload.kUVI-ycm.js} (87%)
 rename _nuxt/{icon-user-circle-filled.Cmq3FUmD.js => icon-user-circle-filled.IJIxudQc.js} (87%)
 rename _nuxt/{icon-video.kiPGaQ6i.js => icon-video.7VDPpbWR.js} (83%)
 rename _nuxt/{icon-wechat.C9k7L3B4.js => icon-wechat.Z6k04rEx.js} (92%)
 rename _nuxt/{icon-youtube.ogRB3-Fq.js => icon-youtube.pz58cf0I.js} (86%)
 rename _nuxt/{icon-zoom-in.6p_hWNaT.js => icon-zoom-in.3g5qbP_U.js} (91%)
 rename _nuxt/{icon-zoom-out.AmH-vH4L.js => icon-zoom-out.GK2jSbWk.js} (89%)
 rename _nuxt/{module-listing.hP89siY4.js => module-listing.zWMX5a25.js} (89%)
 delete mode 100644 _nuxt/module.HmGyaUlR.js
 create mode 100644 _nuxt/module.ZEpf0cR7.js
 rename _nuxt/{nuxt-link.jgZZZkZ5.js => nuxt-link.sM27-MT7.js} (96%)
 rename _nuxt/{page.ciD6J5zn.js => page.dJj1_Sl3.js} (62%)
 rename _nuxt/{rpl-lib.es.r8Pb5jxA.js => rpl-lib.es.b8udu3ko.js} (99%)
 rename _nuxt/{useDocsNavigation.w75JuMbu.js => useDocsNavigation.a2cLzZKV.js} (88%)
 rename _nuxt/{useRippleEvent.DMJaxZxB.js => useRippleEvent.Eg1owuZM.js} (78%)
 rename _nuxt/{useStudio.ur6OYxmR.js => useStudio.1zk0psWL.js} (98%)
 rename api/_content/{cache.1714695122636.json => cache.1714695620480.json} (99%)
 rename api/_content/navigation/{VEvCElvzal.1714695122636.json => VEvCElvzal.1714695620480.json} (100%)
 rename api/_content/navigation/{X4Kd2USCYY.1714695122636.json => X4Kd2USCYY.1714695620480.json} (100%)
 rename api/_content/navigation/{u7BbTyuhiE.1714695122636.json => u7BbTyuhiE.1714695620480.json} (100%)
 rename api/_content/query/{0aaoN3qg9x.1714695122636.json => 0aaoN3qg9x.1714695620480.json} (100%)
 rename api/_content/query/{0yFKOFomIE.1714695122636.json => 0yFKOFomIE.1714695620480.json} (100%)
 rename api/_content/query/{1h0UvPl5DJ.1714695122636.json => 1h0UvPl5DJ.1714695620480.json} (100%)
 rename api/_content/query/{1sexmTbv3K.1714695122636.json => 1sexmTbv3K.1714695620480.json} (100%)
 rename api/_content/query/{2a1w1AtxYS.1714695122636.json => 2a1w1AtxYS.1714695620480.json} (100%)
 rename api/_content/query/{2mCaREffKT.1714695122636.json => 2mCaREffKT.1714695620480.json} (100%)
 rename api/_content/query/{2nhac26oaS.1714695122636.json => 2nhac26oaS.1714695620480.json} (100%)
 rename api/_content/query/{37U72dvAml.1714695122636.json => 37U72dvAml.1714695620480.json} (100%)
 rename api/_content/query/{3e5KwkFD8D.1714695122636.json => 3e5KwkFD8D.1714695620480.json} (100%)
 rename api/_content/query/{3pJr534AHd.1714695122636.json => 3pJr534AHd.1714695620480.json} (100%)
 rename api/_content/query/{4AcSjmUyKz.1714695122636.json => 4AcSjmUyKz.1714695620480.json} (100%)
 rename api/_content/query/{4CDH2RZlOg.1714695122636.json => 4CDH2RZlOg.1714695620480.json} (100%)
 rename api/_content/query/{4GAecKBcgM.1714695122636.json => 4GAecKBcgM.1714695620480.json} (100%)
 rename api/_content/query/{4HXkqmVFJb.1714695122636.json => 4HXkqmVFJb.1714695620480.json} (100%)
 rename api/_content/query/{4N78hAZbAr.1714695122636.json => 4N78hAZbAr.1714695620480.json} (100%)
 rename api/_content/query/{4gRKa55c92.1714695122636.json => 4gRKa55c92.1714695620480.json} (100%)
 rename api/_content/query/{4gkyHLRvtL.1714695122636.json => 4gkyHLRvtL.1714695620480.json} (100%)
 rename api/_content/query/{4lybtDCVQt.1714695122636.json => 4lybtDCVQt.1714695620480.json} (100%)
 rename api/_content/query/{4nnBbKHqJy.1714695122636.json => 4nnBbKHqJy.1714695620480.json} (100%)
 rename api/_content/query/{4voVzfjyBs.1714695122636.json => 4voVzfjyBs.1714695620480.json} (100%)
 rename api/_content/query/{50smjdqWfq.1714695122636.json => 50smjdqWfq.1714695620480.json} (100%)
 rename api/_content/query/{5FAfxJoHkk.1714695122636.json => 5FAfxJoHkk.1714695620480.json} (100%)
 rename api/_content/query/{5U43wnL6p8.1714695122636.json => 5U43wnL6p8.1714695620480.json} (100%)
 rename api/_content/query/{5jdemGYhzs.1714695122636.json => 5jdemGYhzs.1714695620480.json} (100%)
 rename api/_content/query/{6m9vKFTHoz.1714695122636.json => 6m9vKFTHoz.1714695620480.json} (100%)
 rename api/_content/query/{6qsnYmf6Kg.1714695122636.json => 6qsnYmf6Kg.1714695620480.json} (100%)
 rename api/_content/query/{7YecXPJ42X.1714695122636.json => 7YecXPJ42X.1714695620480.json} (100%)
 rename api/_content/query/{7ht5DW7UkW.1714695122636.json => 7ht5DW7UkW.1714695620480.json} (100%)
 rename api/_content/query/{7xyfDntTEH.1714695122636.json => 7xyfDntTEH.1714695620480.json} (100%)
 rename api/_content/query/{8YsCLN3a5w.1714695122636.json => 8YsCLN3a5w.1714695620480.json} (100%)
 rename api/_content/query/{8bRHO8CL4a.1714695122636.json => 8bRHO8CL4a.1714695620480.json} (100%)
 rename api/_content/query/{9XxSCC2Gng.1714695122636.json => 9XxSCC2Gng.1714695620480.json} (100%)
 rename api/_content/query/{A9fXFyNTcE.1714695122636.json => A9fXFyNTcE.1714695620480.json} (100%)
 rename api/_content/query/{AWcKDZuk7Q.1714695122636.json => AWcKDZuk7Q.1714695620480.json} (100%)
 rename api/_content/query/{Atv5Eb58HG.1714695122636.json => Atv5Eb58HG.1714695620480.json} (100%)
 rename api/_content/query/{Az1biL1r1R.1714695122636.json => Az1biL1r1R.1714695620480.json} (100%)
 rename api/_content/query/{BNBjGRc556.1714695122636.json => BNBjGRc556.1714695620480.json} (100%)
 rename api/_content/query/{BZQqMF8iy9.1714695122636.json => BZQqMF8iy9.1714695620480.json} (100%)
 rename api/_content/query/{BlQCj02zMr.1714695122636.json => BlQCj02zMr.1714695620480.json} (100%)
 rename api/_content/query/{CPfLz4RDEN.1714695122636.json => CPfLz4RDEN.1714695620480.json} (100%)
 rename api/_content/query/{Cxn4djMCqT.1714695122636.json => Cxn4djMCqT.1714695620480.json} (100%)
 rename api/_content/query/{DRQuabYniG.1714695122636.json => DRQuabYniG.1714695620480.json} (100%)
 rename api/_content/query/{DrRBJ50Lyl.1714695122636.json => DrRBJ50Lyl.1714695620480.json} (100%)
 rename api/_content/query/{E4VbfHM5TO.1714695122636.json => E4VbfHM5TO.1714695620480.json} (100%)
 rename api/_content/query/{EA1Viu7YX3.1714695122636.json => EA1Viu7YX3.1714695620480.json} (100%)
 rename api/_content/query/{EytvxStB0e.1714695122636.json => EytvxStB0e.1714695620480.json} (100%)
 rename api/_content/query/{FL2NoTOnZH.1714695122636.json => FL2NoTOnZH.1714695620480.json} (100%)
 rename api/_content/query/{FRx43BOHwZ.1714695122636.json => FRx43BOHwZ.1714695620480.json} (100%)
 rename api/_content/query/{FXcU8uc5Dd.1714695122636.json => FXcU8uc5Dd.1714695620480.json} (100%)
 rename api/_content/query/{G6inKMevJ7.1714695122636.json => G6inKMevJ7.1714695620480.json} (100%)
 rename api/_content/query/{GJj5YfVIWk.1714695122636.json => GJj5YfVIWk.1714695620480.json} (100%)
 rename api/_content/query/{GNwfSxVFIk.1714695122636.json => GNwfSxVFIk.1714695620480.json} (100%)
 rename api/_content/query/{IHTNSTG2BE.1714695122636.json => IHTNSTG2BE.1714695620480.json} (100%)
 rename api/_content/query/{IVSDZeduvC.1714695122636.json => IVSDZeduvC.1714695620480.json} (100%)
 rename api/_content/query/{ImzjcGUQec.1714695122636.json => ImzjcGUQec.1714695620480.json} (100%)
 rename api/_content/query/{Int4bWCGef.1714695122636.json => Int4bWCGef.1714695620480.json} (100%)
 rename api/_content/query/{K0FMoZzx9O.1714695122636.json => K0FMoZzx9O.1714695620480.json} (100%)
 rename api/_content/query/{KFY0AW5Ub0.1714695122636.json => KFY0AW5Ub0.1714695620480.json} (100%)
 rename api/_content/query/{KrSUbbePmB.1714695122636.json => KrSUbbePmB.1714695620480.json} (100%)
 rename api/_content/query/{L4BiBaBwSa.1714695122636.json => L4BiBaBwSa.1714695620480.json} (100%)
 rename api/_content/query/{LRqNzYU79f.1714695122636.json => LRqNzYU79f.1714695620480.json} (100%)
 rename api/_content/query/{LhnX2N5NGd.1714695122636.json => LhnX2N5NGd.1714695620480.json} (100%)
 rename api/_content/query/{LmYw8BgZez.1714695122636.json => LmYw8BgZez.1714695620480.json} (100%)
 rename api/_content/query/{LoX2CGyAED.1714695122636.json => LoX2CGyAED.1714695620480.json} (100%)
 rename api/_content/query/{M44yiRFUUt.1714695122636.json => M44yiRFUUt.1714695620480.json} (100%)
 rename api/_content/query/{MRFkBuP81T.1714695122636.json => MRFkBuP81T.1714695620480.json} (100%)
 rename api/_content/query/{MdKSCPenip.1714695122636.json => MdKSCPenip.1714695620480.json} (100%)
 rename api/_content/query/{Mk9AxDcquK.1714695122636.json => Mk9AxDcquK.1714695620480.json} (100%)
 rename api/_content/query/{MulTBoHiIX.1714695122636.json => MulTBoHiIX.1714695620480.json} (100%)
 rename api/_content/query/{MyfyBodaI9.1714695122636.json => MyfyBodaI9.1714695620480.json} (100%)
 rename api/_content/query/{O88noog5Ku.1714695122636.json => O88noog5Ku.1714695620480.json} (100%)
 rename api/_content/query/{P93e3h20vo.1714695122636.json => P93e3h20vo.1714695620480.json} (100%)
 rename api/_content/query/{PDyWpwM8OX.1714695122636.json => PDyWpwM8OX.1714695620480.json} (100%)
 rename api/_content/query/{PJBEZoM2Co.1714695122636.json => PJBEZoM2Co.1714695620480.json} (100%)
 rename api/_content/query/{QkADENtF1a.1714695122636.json => QkADENtF1a.1714695620480.json} (100%)
 rename api/_content/query/{SF9m31U3TG.1714695122636.json => SF9m31U3TG.1714695620480.json} (100%)
 rename api/_content/query/{SJLhvQED7V.1714695122636.json => SJLhvQED7V.1714695620480.json} (100%)
 rename api/_content/query/{SM7WENOXwn.1714695122636.json => SM7WENOXwn.1714695620480.json} (100%)
 rename api/_content/query/{TIFRZ2W30y.1714695122636.json => TIFRZ2W30y.1714695620480.json} (100%)
 rename api/_content/query/{TlwNM8EnUb.1714695122636.json => TlwNM8EnUb.1714695620480.json} (100%)
 rename api/_content/query/{Tr8c01AB9c.1714695122636.json => Tr8c01AB9c.1714695620480.json} (100%)
 rename api/_content/query/{UqYcuzGZzU.1714695122636.json => UqYcuzGZzU.1714695620480.json} (100%)
 rename api/_content/query/{UrnjC2F9dw.1714695122636.json => UrnjC2F9dw.1714695620480.json} (100%)
 rename api/_content/query/{VYBIyuFjts.1714695122636.json => VYBIyuFjts.1714695620480.json} (100%)
 rename api/_content/query/{VbChyF8OyE.1714695122636.json => VbChyF8OyE.1714695620480.json} (100%)
 rename api/_content/query/{VgHMTDZLK4.1714695122636.json => VgHMTDZLK4.1714695620480.json} (100%)
 rename api/_content/query/{WTS5sIVY6D.1714695122636.json => WTS5sIVY6D.1714695620480.json} (100%)
 rename api/_content/query/{X0kuUttahW.1714695122636.json => X0kuUttahW.1714695620480.json} (100%)
 rename api/_content/query/{X4VxdTjbhP.1714695122636.json => X4VxdTjbhP.1714695620480.json} (100%)
 rename api/_content/query/{XAPzcVjat3.1714695122636.json => XAPzcVjat3.1714695620480.json} (100%)
 rename api/_content/query/{XFjJyWynAe.1714695122636.json => XFjJyWynAe.1714695620480.json} (100%)
 rename api/_content/query/{XZp1K2Gry5.1714695122636.json => XZp1K2Gry5.1714695620480.json} (100%)
 rename api/_content/query/{Xh1IsErcFG.1714695122636.json => Xh1IsErcFG.1714695620480.json} (100%)
 rename api/_content/query/{XjS2U5Izhg.1714695122636.json => XjS2U5Izhg.1714695620480.json} (100%)
 rename api/_content/query/{Xl71L7ieAm.1714695122636.json => Xl71L7ieAm.1714695620480.json} (100%)
 rename api/_content/query/{XmTesIf7f9.1714695122636.json => XmTesIf7f9.1714695620480.json} (100%)
 rename api/_content/query/{YA6fkmNWlw.1714695122636.json => YA6fkmNWlw.1714695620480.json} (100%)
 rename api/_content/query/{YCO3BsA2AE.1714695122636.json => YCO3BsA2AE.1714695620480.json} (100%)
 rename api/_content/query/{YoUlkYQh6c.1714695122636.json => YoUlkYQh6c.1714695620480.json} (100%)
 rename api/_content/query/{Z5EE1O4UbG.1714695122636.json => Z5EE1O4UbG.1714695620480.json} (100%)
 rename api/_content/query/{Z70rHCO4fI.1714695122636.json => Z70rHCO4fI.1714695620480.json} (100%)
 rename api/_content/query/{ZWAUGjhMhU.1714695122636.json => ZWAUGjhMhU.1714695620480.json} (100%)
 rename api/_content/query/{acark7P3nX.1714695122636.json => acark7P3nX.1714695620480.json} (100%)
 rename api/_content/query/{apkiOdtfcp.1714695122636.json => apkiOdtfcp.1714695620480.json} (100%)
 rename api/_content/query/{bEnwKjFwnq.1714695122636.json => bEnwKjFwnq.1714695620480.json} (100%)
 rename api/_content/query/{bF3gJlnVu7.1714695122636.json => bF3gJlnVu7.1714695620480.json} (100%)
 rename api/_content/query/{bnDywirsxl.1714695122636.json => bnDywirsxl.1714695620480.json} (100%)
 rename api/_content/query/{brX4CwCJoQ.1714695122636.json => brX4CwCJoQ.1714695620480.json} (100%)
 rename api/_content/query/{bzCp7cuiep.1714695122636.json => bzCp7cuiep.1714695620480.json} (100%)
 rename api/_content/query/{c71XK0jI69.1714695122636.json => c71XK0jI69.1714695620480.json} (100%)
 rename api/_content/query/{cExGEtkzuk.1714695122636.json => cExGEtkzuk.1714695620480.json} (100%)
 rename api/_content/query/{caOGo3s222.1714695122636.json => caOGo3s222.1714695620480.json} (100%)
 rename api/_content/query/{ciwJA2cWZR.1714695122636.json => ciwJA2cWZR.1714695620480.json} (100%)
 rename api/_content/query/{clipwUGxow.1714695122636.json => clipwUGxow.1714695620480.json} (100%)
 rename api/_content/query/{cuM7MVrMUw.1714695122636.json => cuM7MVrMUw.1714695620480.json} (100%)
 rename api/_content/query/{dIqZm2MbqA.1714695122636.json => dIqZm2MbqA.1714695620480.json} (100%)
 rename api/_content/query/{dKdR0W5tzU.1714695122636.json => dKdR0W5tzU.1714695620480.json} (100%)
 rename api/_content/query/{eOtXz0jpwF.1714695122636.json => eOtXz0jpwF.1714695620480.json} (100%)
 rename api/_content/query/{etly8IUHtt.1714695122636.json => etly8IUHtt.1714695620480.json} (100%)
 rename api/_content/query/{eygiU6u8aQ.1714695122636.json => eygiU6u8aQ.1714695620480.json} (100%)
 rename api/_content/query/{fRk0JHtrBq.1714695122636.json => fRk0JHtrBq.1714695620480.json} (100%)
 rename api/_content/query/{fyKzonlTVE.1714695122636.json => fyKzonlTVE.1714695620480.json} (100%)
 rename api/_content/query/{g90uDrGc6h.1714695122636.json => g90uDrGc6h.1714695620480.json} (100%)
 rename api/_content/query/{gH1XZ96zGS.1714695122636.json => gH1XZ96zGS.1714695620480.json} (100%)
 rename api/_content/query/{grXljdbkxM.1714695122636.json => grXljdbkxM.1714695620480.json} (100%)
 rename api/_content/query/{gvk7ITPeIG.1714695122636.json => gvk7ITPeIG.1714695620480.json} (100%)
 rename api/_content/query/{hP08bRT8o2.1714695122636.json => hP08bRT8o2.1714695620480.json} (100%)
 rename api/_content/query/{hckiE95FTb.1714695122636.json => hckiE95FTb.1714695620480.json} (100%)
 rename api/_content/query/{j64GcQcJKA.1714695122636.json => j64GcQcJKA.1714695620480.json} (100%)
 rename api/_content/query/{j6VGlwh2g9.1714695122636.json => j6VGlwh2g9.1714695620480.json} (100%)
 rename api/_content/query/{jgRpWN3BQE.1714695122636.json => jgRpWN3BQE.1714695620480.json} (100%)
 rename api/_content/query/{k0LdsxuVgM.1714695122636.json => k0LdsxuVgM.1714695620480.json} (100%)
 rename api/_content/query/{kO7epVwzlv.1714695122636.json => kO7epVwzlv.1714695620480.json} (100%)
 rename api/_content/query/{kXlcvutl1N.1714695122636.json => kXlcvutl1N.1714695620480.json} (100%)
 rename api/_content/query/{kh2DZ78o4K.1714695122636.json => kh2DZ78o4K.1714695620480.json} (100%)
 rename api/_content/query/{mKPt9msOAD.1714695122636.json => mKPt9msOAD.1714695620480.json} (100%)
 rename api/_content/query/{mPus9cC6oE.1714695122636.json => mPus9cC6oE.1714695620480.json} (100%)
 rename api/_content/query/{mrPIJZRQWV.1714695122636.json => mrPIJZRQWV.1714695620480.json} (100%)
 rename api/_content/query/{ok04mhOgoW.1714695122636.json => ok04mhOgoW.1714695620480.json} (100%)
 rename api/_content/query/{pQRGRVXgWa.1714695122636.json => pQRGRVXgWa.1714695620480.json} (100%)
 rename api/_content/query/{pawOjRstIF.1714695122636.json => pawOjRstIF.1714695620480.json} (100%)
 rename api/_content/query/{popbnfes2V.1714695122636.json => popbnfes2V.1714695620480.json} (100%)
 rename api/_content/query/{q8OIs3OPBw.1714695122636.json => q8OIs3OPBw.1714695620480.json} (100%)
 rename api/_content/query/{qhKQKXD4Dg.1714695122636.json => qhKQKXD4Dg.1714695620480.json} (100%)
 rename api/_content/query/{qsQbddAhkh.1714695122636.json => qsQbddAhkh.1714695620480.json} (100%)
 rename api/_content/query/{rjiu3BoM41.1714695122636.json => rjiu3BoM41.1714695620480.json} (100%)
 rename api/_content/query/{rvljicMwDZ.1714695122636.json => rvljicMwDZ.1714695620480.json} (100%)
 rename api/_content/query/{s6NQtLySML.1714695122636.json => s6NQtLySML.1714695620480.json} (100%)
 rename api/_content/query/{s9WFFuhhYd.1714695122636.json => s9WFFuhhYd.1714695620480.json} (100%)
 rename api/_content/query/{sFf87k6nba.1714695122636.json => sFf87k6nba.1714695620480.json} (100%)
 rename api/_content/query/{sdAri5fXY2.1714695122636.json => sdAri5fXY2.1714695620480.json} (100%)
 rename api/_content/query/{ssqfMqELbL.1714695122636.json => ssqfMqELbL.1714695620480.json} (100%)
 rename api/_content/query/{t0PepQyppe.1714695122636.json => t0PepQyppe.1714695620480.json} (100%)
 rename api/_content/query/{t2lXFVWGtk.1714695122636.json => t2lXFVWGtk.1714695620480.json} (100%)
 rename api/_content/query/{tC2YUplCsO.1714695122636.json => tC2YUplCsO.1714695620480.json} (100%)
 rename api/_content/query/{tJ9ZGrn4yB.1714695122636.json => tJ9ZGrn4yB.1714695620480.json} (100%)
 rename api/_content/query/{tTSjBFoWHS.1714695122636.json => tTSjBFoWHS.1714695620480.json} (100%)
 rename api/_content/query/{tXkIYFpTjb.1714695122636.json => tXkIYFpTjb.1714695620480.json} (100%)
 rename api/_content/query/{tdIi0E0ZcT.1714695122636.json => tdIi0E0ZcT.1714695620480.json} (100%)
 rename api/_content/query/{tpTHQGg3jH.1714695122636.json => tpTHQGg3jH.1714695620480.json} (100%)
 rename api/_content/query/{u5WCIRmncC.1714695122636.json => u5WCIRmncC.1714695620480.json} (100%)
 rename api/_content/query/{ufL8jzkw3H.1714695122636.json => ufL8jzkw3H.1714695620480.json} (100%)
 rename api/_content/query/{uiREdQR1My.1714695122636.json => uiREdQR1My.1714695620480.json} (100%)
 rename api/_content/query/{utM4Ruw0ol.1714695122636.json => utM4Ruw0ol.1714695620480.json} (100%)
 rename api/_content/query/{v6HPfz8OL9.1714695122636.json => v6HPfz8OL9.1714695620480.json} (100%)
 rename api/_content/query/{vJwSfNopNI.1714695122636.json => vJwSfNopNI.1714695620480.json} (100%)
 rename api/_content/query/{vdsDSrkXFQ.1714695122636.json => vdsDSrkXFQ.1714695620480.json} (100%)
 rename api/_content/query/{vj66SN51A0.1714695122636.json => vj66SN51A0.1714695620480.json} (100%)
 rename api/_content/query/{w37itSs4uJ.1714695122636.json => w37itSs4uJ.1714695620480.json} (100%)
 rename api/_content/query/{wEB9wuD1Rn.1714695122636.json => wEB9wuD1Rn.1714695620480.json} (100%)
 rename api/_content/query/{wH3ANibFW3.1714695122636.json => wH3ANibFW3.1714695620480.json} (100%)
 rename api/_content/query/{xCcU5Gnepq.1714695122636.json => xCcU5Gnepq.1714695620480.json} (100%)
 rename api/_content/query/{xKaOOlWHDJ.1714695122636.json => xKaOOlWHDJ.1714695620480.json} (100%)
 rename api/_content/query/{xSzuF1nnCj.1714695122636.json => xSzuF1nnCj.1714695620480.json} (100%)
 rename api/_content/query/{xWeY3NfYtX.1714695122636.json => xWeY3NfYtX.1714695620480.json} (100%)
 rename api/_content/query/{xqajda0wk4.1714695122636.json => xqajda0wk4.1714695620480.json} (100%)
 rename api/_content/query/{yCq8hfNCRB.1714695122636.json => yCq8hfNCRB.1714695620480.json} (100%)
 rename api/_content/query/{zVyWsmAcuf.1714695122636.json => zVyWsmAcuf.1714695620480.json} (100%)

diff --git a/200.html b/200.html
index 8bce745a47..546473cd1f 100644
--- a/200.html
+++ b/200.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html><html><head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="/_nuxt/entry._ZJTiiG-.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplIcon.27IBR2Sj.css">
 <link rel="prefetch" as="style" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
@@ -10,46 +10,46 @@
 <link rel="prefetch" as="style" href="/_nuxt/RplButton.jSZllYZL.css">
 <link rel="prefetch" as="style" href="/_nuxt/AppLayout.1jyXqt-K.css">
 <link rel="prefetch" as="style" href="/_nuxt/RplExpandable.G47K6rAy.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
 <link rel="prefetch" as="style" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"_errors":1,"serverRendered":2,"data":3,"state":4,"once":5},{},false,{},{},["Set"]]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>
\ No newline at end of file
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"_errors":1,"serverRendered":2,"data":3,"state":4,"once":5},{},false,{},{},["Set"]]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>
\ No newline at end of file
diff --git a/404.html b/404.html
index 8bce745a47..546473cd1f 100644
--- a/404.html
+++ b/404.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html><html><head><meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="/_nuxt/entry._ZJTiiG-.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplIcon.27IBR2Sj.css">
 <link rel="prefetch" as="style" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
@@ -10,46 +10,46 @@
 <link rel="prefetch" as="style" href="/_nuxt/RplButton.jSZllYZL.css">
 <link rel="prefetch" as="style" href="/_nuxt/AppLayout.1jyXqt-K.css">
 <link rel="prefetch" as="style" href="/_nuxt/RplExpandable.G47K6rAy.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
 <link rel="prefetch" as="style" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"_errors":1,"serverRendered":2,"data":3,"state":4,"once":5},{},false,{},{},["Set"]]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>
\ No newline at end of file
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"></div><script type="application/json" id="__NUXT_DATA__" data-ssr="false">[{"_errors":1,"serverRendered":2,"data":3,"state":4,"once":5},{},false,{},{},["Set"]]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script></body></html>
\ No newline at end of file
diff --git a/__studio.json b/__studio.json
index e203749642..5253b61782 100644
--- a/__studio.json
+++ b/__studio.json
@@ -1 +1 @@
-{"version":"1.0.0","tokens":"7ae2515146ef474b6daa2184d4cdf98a00e724791e002e791a928ee41fe5e267","appConfigSchema":{"properties":"","default":""},"appConfig":{"nuxt":{"buildId":"1362ce16-7e83-433f-9854-d1c79bedd190"},"title":"Ripple Design System","subheader":"Ripple is the design system for Victorian government digital products","sections":{"design-system":{"title":"Ripple Design System","color":"var(--rpl-clr-primary)","neutralFooter":false},"framework":{"title":"Ripple Framework","color":"var(--rpl-clr-dark)","neutralFooter":true}},"version":"2.1.0-alpha.76","description":"Make your service consistent with vic.gov.au digital branding. Learn from the research and experience of other service teams and avoid repeating work that’s already been done.","socials":{"github":"dpc-sdp/ripple-framework"},"storybookBaseUrl":"/storybook","hideModulesSection":false},"content":{"sources":{},"ignores":[],"locales":[],"highlight":{"theme":"github-light","preload":["vue","bash","markdown"],"highlighter":"shiki","langs":["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},"navigation":{"fields":["icon","layout"]},"documentDriven":{"layoutFallbacks":["page"]},"experimental":{"clientDB":false,"cacheContents":true,"stripQueryParameters":false,"advanceQuery":false,"search":""}},"components":[{"name":"DocsAlert","path":"components/content/DocsAlert.vue","meta":{"props":[],"slots":[{"name":"default","type":"{}","description":"","schema":{"kind":"object","type":"{}","schema":{}}}],"events":[]}},{"name":"DocsCard","path":"components/content/DocsCard.vue","meta":{"props":[],"slots":[{"name":"default","type":"{}","description":"","schema":{"kind":"object","type":"{}","schema":{}}}],"events":[]}},{"name":"DocsCardGrid","path":"components/content/DocsCardGrid.vue","meta":{"props":[],"slots":[{"name":"default","type":"{}","description":"","schema":{"kind":"object","type":"{}","schema":{}}}],"events":[]}},{"name":"DocsColourTable","path":"components/content/DocsColourTable.vue","meta":{"props":[{"name":"colours","global":false,"description":"","tags":[],"required":true,"type":"string[]","schema":{"kind":"array","type":"string[]","schema":["string"]}}],"slots":[],"events":[]}},{"name":"DocsContent","path":"components/content/DocsContent.vue","meta":{"props":[],"slots":[{"name":"default","type":"{}","description":"","schema":{"kind":"object","type":"{}","schema":{}}}],"events":[]}},{"name":"DocsContentNavigation","path":"components/content/DocsContentNavigation.vue","meta":{"props":[],"slots":[],"events":[]}},{"name":"DocsExample","path":"components/content/DocsExample.vue","meta":{"props":[{"name":"id","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},{"name":"withPadding","global":false,"description":"","tags":[],"required":false,"type":"boolean | undefined","schema":{"kind":"enum","type":"boolean | undefined","schema":["undefined","false","true"]},"default":"false"},{"name":"theme","global":false,"description":"","tags":[],"required":false,"type":"string | undefined","schema":{"kind":"enum","type":"string | undefined","schema":["undefined","string"]},"default":"undefined"},{"name":"useNeutralButtons","global":false,"description":"","tags":[],"required":false,"type":"boolean | undefined","schema":{"kind":"enum","type":"boolean | undefined","schema":["undefined","false","true"]},"default":"false"},{"name":"argsString","global":false,"description":"","tags":[],"required":false,"type":"string | undefined","schema":{"kind":"enum","type":"string | undefined","schema":["undefined","string"]},"default":"\"\""},{"name":"hideNewTab","global":false,"description":"","tags":[],"required":false,"type":"boolean | undefined","schema":{"kind":"enum","type":"boolean | undefined","schema":["undefined","false","true"]}},{"name":"hideCode","global":false,"description":"","tags":[],"required":false,"type":"boolean | undefined","schema":{"kind":"enum","type":"boolean | undefined","schema":["undefined","false","true"]}}],"slots":[],"events":[]}},{"name":"DocsGradientTable","path":"components/content/DocsGradientTable.vue","meta":{"props":[],"slots":[],"events":[]}},{"name":"DocsGrid","path":"components/content/DocsGrid.vue","meta":{"props":[],"slots":[{"name":"default","type":"{}","description":"","schema":{"kind":"object","type":"{}","schema":{}}}],"events":[]}},{"name":"DocsHeroHeader","path":"components/content/DocsHeroHeader.vue","meta":{"props":[{"name":"title","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},{"name":"description","global":false,"description":"","tags":[],"required":false,"type":"string | undefined","schema":{"kind":"enum","type":"string | undefined","schema":["undefined","string"]},"default":"\"\""}],"slots":[],"events":[]}},{"name":"DocsHomeSection","path":"components/content/DocsHomeSection.vue","meta":{"props":[{"name":"title","global":false,"description":"","tags":[],"required":false,"type":"string | undefined","schema":{"kind":"enum","type":"string | undefined","schema":["undefined","string"]},"default":"\"\""}],"slots":[{"name":"default","type":"{}","description":"","schema":{"kind":"object","type":"{}","schema":{}}}],"events":[]}},{"name":"DocsIcon","path":"components/content/DocsIcon.vue","meta":{"props":[{"name":"name","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},{"name":"size","global":false,"description":"","tags":[],"required":false,"type":"\"xs\" | \"s\" | \"m\" | \"l\" | undefined","schema":{"kind":"enum","type":"\"xs\" | \"s\" | \"m\" | \"l\" | undefined","schema":["undefined","\"xs\"","\"s\"","\"m\"","\"l\""]},"default":"\"xs\""}],"slots":[],"events":[]}},{"name":"DocsIconSizingTable","path":"components/content/DocsIconSizingTable.vue","meta":{"props":[{"name":"sizes","global":false,"description":"","tags":[],"required":true,"type":"string[]","schema":{"kind":"array","type":"string[]","schema":["string"]}}],"slots":[],"events":[]}},{"name":"DocsIconTable","path":"components/content/DocsIconTable.vue","meta":{"props":[{"name":"group","global":false,"description":"","tags":[],"required":true,"type":"\"alert\" | \"social\" | \"standard\"","schema":{"kind":"enum","type":"\"alert\" | \"social\" | \"standard\"","schema":["\"alert\"","\"social\"","\"standard\""]}}],"slots":[],"events":[]}},{"name":"DocsImageExample","path":"components/content/DocsImageExample.vue","meta":{"props":[{"name":"src","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},{"name":"alt","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"}],"slots":[{"name":"default","type":"{}","description":"","schema":{"kind":"object","type":"{}","schema":{}}}],"events":[]}},{"name":"DocsLayerStyleTable","path":"components/content/DocsLayerStyleTable.vue","meta":{"props":[{"name":"type","global":false,"description":"","tags":[],"required":true,"type":"\"border\" | \"border.radius\" | \"elevation\"","schema":{"kind":"enum","type":"\"border\" | \"border.radius\" | \"elevation\"","schema":["\"border\"","\"border.radius\"","\"elevation\""]}}],"slots":[],"events":[]}},{"name":"DocsLink","path":"components/content/DocsLink.vue","meta":{"props":[{"name":"url","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},{"name":"isExternal","global":false,"description":"","tags":[],"required":false,"type":"boolean | undefined","schema":{"kind":"enum","type":"boolean | undefined","schema":["undefined","false","true"]},"default":"false"},{"name":"isSmall","global":false,"description":"","tags":[],"required":false,"type":"boolean | undefined","schema":{"kind":"enum","type":"boolean | undefined","schema":["undefined","false","true"]},"default":"false"},{"name":"iconPosition","global":false,"description":"","tags":[],"required":false,"type":"\"start\" | \"end\" | undefined","schema":{"kind":"enum","type":"\"start\" | \"end\" | undefined","schema":["undefined","\"start\"","\"end\""]},"default":"\"start\""}],"slots":[{"name":"default","type":"{}","description":"","schema":{"kind":"object","type":"{}","schema":{}}}],"events":[]}},{"name":"DocsModuleCard","path":"components/content/DocsModuleCard.vue","meta":{"props":[{"name":"moduleSlug","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"}],"slots":[],"events":[]}},{"name":"DocsModuleInfo","path":"components/content/DocsModuleInfo.vue","meta":{"props":[{"name":"module","global":false,"description":"","tags":[],"required":true,"type":"{ name: string; packageName: string; sourceUrl: string; issuesUrl: string; contributor: { name: string; url: string; }; }","schema":{"kind":"object","type":"{ name: string; packageName: string; sourceUrl: string; issuesUrl: string; contributor: { name: string; url: string; }; }","schema":{"name":{"name":"name","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},"packageName":{"name":"packageName","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},"sourceUrl":{"name":"sourceUrl","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},"issuesUrl":{"name":"issuesUrl","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},"contributor":{"name":"contributor","global":false,"description":"","tags":[],"required":true,"type":"{ name: string; url: string; }","schema":{"kind":"object","type":"{ name: string; url: string; }","schema":{"name":{"name":"name","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},"url":{"name":"url","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"}}}}}}}],"slots":[],"events":[]}},{"name":"DocsModuleNavigation","path":"components/content/DocsModuleNavigation.vue","meta":{"props":[],"slots":[],"events":[]}},{"name":"DocsNavLink","path":"components/content/DocsNavLink.vue","meta":{"props":[{"name":"url","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},{"name":"iconPosition","global":false,"description":"","tags":[],"required":false,"type":"\"start\" | \"end\" | undefined","schema":{"kind":"enum","type":"\"start\" | \"end\" | undefined","schema":["undefined","\"start\"","\"end\""]},"default":"\"start\""},{"name":"icon","global":false,"description":"","tags":[],"required":false,"type":"string | undefined","schema":{"kind":"enum","type":"string | undefined","schema":["undefined","string"]},"default":"\"\""}],"slots":[{"name":"default","type":"{}","description":"","schema":{"kind":"object","type":"{}","schema":{}}}],"events":[]}},{"name":"DocsPageHeader","path":"components/content/DocsPageHeader.vue","meta":{"props":[{"name":"title","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},{"name":"description","global":false,"description":"","tags":[],"required":false,"type":"string | undefined","schema":{"kind":"enum","type":"string | undefined","schema":["undefined","string"]},"default":"\"\""},{"name":"links","global":false,"description":"","tags":[],"required":false,"type":"{ text: string; url: string; }[] | undefined","schema":{"kind":"enum","type":"{ text: string; url: string; }[] | undefined","schema":["undefined",{"kind":"array","type":"{ text: string; url: string; }[]","schema":[{"kind":"object","type":"{ text: string; url: string; }","schema":{"text":{"name":"text","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},"url":{"name":"url","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"}}}]}]},"default":"[]"}],"slots":[],"events":[]}},{"name":"DocsThemeChooser","path":"components/content/DocsThemeChooser.vue","meta":{"props":[{"name":"concat","global":false,"description":"Combines two or more arrays.","tags":[{"name":"param","text":"items Additional items to add to the end of array1."},{"name":"param","text":"items Additional items to add to the end of array1."}],"required":true,"type":"Prop<unknown, unknown> | { (...items: ConcatArray<string>[]): string[]; (...items: (string | ConcatArray<string>)[]): string[]; } | { (...items: ConcatArray<string>[]): string[]; (...items: (string | ConcatArray<...>)[]): string[]; } | { ...; } | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | { (...items: ConcatArray<string>[]): string[]; (...items: (string | ConcatArray<string>)[]): string[]; } | { (...items: ConcatArray<string>[]): string[]; (...items: (string | ConcatArray<...>)[]): string[]; } | { ...; } | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},"{ (...items: ConcatArray<string>[]): string[]; (...items: (string | ConcatArray<string>)[]): string[]; }","{ (...items: ConcatArray<string>[]): string[]; (...items: (string | ConcatArray<string>)[]): string[]; }","{ (...items: ConcatArray<string>[]): string[]; (...items: (string | ConcatArray<string>)[]): string[]; }"]}},{"name":"indexOf","global":false,"description":"Returns the index of the first occurrence of a value in an array.","tags":[{"name":"param","text":"searchElement The value to locate in the array."},{"name":"param","text":"fromIndex The array index at which to begin the search. If fromIndex is omitted, the search starts at index 0."}],"required":true,"type":"Prop<unknown, unknown> | ((searchElement: string, fromIndex?: number | undefined) => number) | ((searchElement: string, fromIndex?: number | undefined) => number) | ((searchElement: string, fromIndex?: number | undefined) => number) | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | ((searchElement: string, fromIndex?: number | undefined) => number) | ((searchElement: string, fromIndex?: number | undefined) => number) | ((searchElement: string, fromIndex?: number | undefined) => number) | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(searchElement: string, fromIndex?: number | undefined): number","schema":[]},{"kind":"event","type":"(searchElement: string, fromIndex?: number | undefined): number","schema":[]},{"kind":"event","type":"(searchElement: string, fromIndex?: number | undefined): number","schema":[]}]}},{"name":"lastIndexOf","global":false,"description":"Returns the index of the last occurrence of a specified value in an array.","tags":[{"name":"param","text":"searchElement The value to locate in the array."},{"name":"param","text":"fromIndex The array index at which to begin the search. If fromIndex is omitted, the search starts at the last index in the array."}],"required":true,"type":"Prop<unknown, unknown> | ((searchElement: string, fromIndex?: number | undefined) => number) | ((searchElement: string, fromIndex?: number | undefined) => number) | ((searchElement: string, fromIndex?: number | undefined) => number) | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | ((searchElement: string, fromIndex?: number | undefined) => number) | ((searchElement: string, fromIndex?: number | undefined) => number) | ((searchElement: string, fromIndex?: number | undefined) => number) | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(searchElement: string, fromIndex?: number | undefined): number","schema":[]},{"kind":"event","type":"(searchElement: string, fromIndex?: number | undefined): number","schema":[]},{"kind":"event","type":"(searchElement: string, fromIndex?: number | undefined): number","schema":[]}]}},{"name":"slice","global":false,"description":"Returns a section of an array.","tags":[{"name":"param","text":"start The beginning of the specified portion of the array."},{"name":"param","text":"end The end of the specified portion of the array. This is exclusive of the element at the index 'end'."}],"required":true,"type":"Prop<unknown, unknown> | ((start?: number | undefined, end?: number | undefined) => string[]) | ((start?: number | undefined, end?: number | undefined) => string[]) | ((start?: number | undefined, end?: number | undefined) => string[]) | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | ((start?: number | undefined, end?: number | undefined) => string[]) | ((start?: number | undefined, end?: number | undefined) => string[]) | ((start?: number | undefined, end?: number | undefined) => string[]) | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(start?: number | undefined, end?: number | undefined): string[]","schema":[]},{"kind":"event","type":"(start?: number | undefined, end?: number | undefined): string[]","schema":[]},{"kind":"event","type":"(start?: number | undefined, end?: number | undefined): string[]","schema":[]}]}},{"name":"length","global":false,"description":"Gets the length of the array. This is a number one higher than the highest element defined in an array.","tags":[],"required":true,"type":"number | Prop<unknown, unknown> | null | undefined","schema":{"kind":"enum","type":"number | Prop<unknown, unknown> | null | undefined","schema":["undefined","null","number","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]}]}},{"name":"includes","global":false,"description":"Determines whether an array includes a certain element, returning true or false as appropriate.","tags":[{"name":"param","text":"searchElement The element to search for."},{"name":"param","text":"fromIndex The position in this array at which to begin searching for searchElement."}],"required":true,"type":"Prop<unknown, unknown> | ((searchElement: string, fromIndex?: number | undefined) => boolean) | ((searchElement: string, fromIndex?: number | undefined) => boolean) | ((searchElement: string, fromIndex?: number | undefined) => boolean) | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | ((searchElement: string, fromIndex?: number | undefined) => boolean) | ((searchElement: string, fromIndex?: number | undefined) => boolean) | ((searchElement: string, fromIndex?: number | undefined) => boolean) | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(searchElement: string, fromIndex?: number | undefined): boolean","schema":[]},{"kind":"event","type":"(searchElement: string, fromIndex?: number | undefined): boolean","schema":[]},{"kind":"event","type":"(searchElement: string, fromIndex?: number | undefined): boolean","schema":[]}]}},{"name":"at","global":false,"description":"Returns the item located at the specified index.","tags":[{"name":"param","text":"index The zero-based index of the desired code unit. A negative index will count back from the last item."}],"required":true,"type":"Prop<unknown, unknown> | ((index: number) => string | undefined) | ((index: number) => string | undefined) | ((index: number) => string | undefined) | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | ((index: number) => string | undefined) | ((index: number) => string | undefined) | ((index: number) => string | undefined) | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(index: number): string | undefined","schema":[]},{"kind":"event","type":"(index: number): string | undefined","schema":[]},{"kind":"event","type":"(index: number): string | undefined","schema":[]}]}},{"name":"join","global":false,"description":"Adds all the elements of an array separated by the specified separator string.","tags":[{"name":"param","text":"separator A string used to separate one element of an array from the next in the resulting String. If omitted, the array elements are separated with a comma."}],"required":true,"type":"Prop<unknown, unknown> | ((separator?: string | undefined) => string) | ((separator?: string | undefined) => string) | ((separator?: string | undefined) => string) | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | ((separator?: string | undefined) => string) | ((separator?: string | undefined) => string) | ((separator?: string | undefined) => string) | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(separator?: string | undefined): string","schema":[]},{"kind":"event","type":"(separator?: string | undefined): string","schema":[]},{"kind":"event","type":"(separator?: string | undefined): string","schema":[]}]}},{"name":"every","global":false,"description":"Determines whether all the members of an array satisfy the specified test.","tags":[{"name":"param","text":"predicate A function that accepts up to three arguments. The every method calls\nthe predicate function for each element in the array until the predicate returns a value\nwhich is coercible to the Boolean value false, or until the end of the array."},{"name":"param","text":"thisArg An object to which the this keyword can refer in the predicate function.\nIf thisArg is omitted, undefined is used as the this value."},{"name":"param","text":"predicate A function that accepts up to three arguments. The every method calls\nthe predicate function for each element in the array until the predicate returns a value\nwhich is coercible to the Boolean value false, or until the end of the array."},{"name":"param","text":"thisArg An object to which the this keyword can refer in the predicate function.\nIf thisArg is omitted, undefined is used as the this value."}],"required":true,"type":"Prop<unknown, unknown> | { <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): this is readonly S[]; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): boolean; } | { ...; } | { ...; } | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | { <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): this is readonly S[]; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): boolean; } | { ...; } | { ...; } | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},"{ <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): this is readonly S[]; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): boolean; }","{ <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): this is readonly S[]; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): boolean; }","{ <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): this is readonly S[]; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): boolean; }"]}},{"name":"some","global":false,"description":"Determines whether the specified callback function returns true for any element of an array.","tags":[{"name":"param","text":"predicate A function that accepts up to three arguments. The some method calls\nthe predicate function for each element in the array until the predicate returns a value\nwhich is coercible to the Boolean value true, or until the end of the array."},{"name":"param","text":"thisArg An object to which the this keyword can refer in the predicate function.\nIf thisArg is omitted, undefined is used as the this value."}],"required":true,"type":"Prop<unknown, unknown> | ((predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any) => boolean) | ((predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any) => boolean) | ((predicate: (value: string, index: number, array: readonly string[]) ...","schema":{"kind":"enum","type":"Prop<unknown, unknown> | ((predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any) => boolean) | ((predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any) => boolean) | ((predicate: (value: string, index: number, array: readonly string[]) ...","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): boolean","schema":[]},{"kind":"event","type":"(predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): boolean","schema":[]},{"kind":"event","type":"(predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): boolean","schema":[]}]}},{"name":"forEach","global":false,"description":"Performs the specified action for each element in an array.","tags":[{"name":"param","text":"callbackfn A function that accepts up to three arguments. forEach calls the callbackfn function one time for each element in the array."},{"name":"param","text":"thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value."}],"required":true,"type":"Prop<unknown, unknown> | ((callbackfn: (value: string, index: number, array: readonly string[]) => void, thisArg?: any) => void) | ((callbackfn: (value: string, index: number, array: readonly string[]) => void, thisArg?: any) => void) | ((callbackfn: (value: string, index: number, array: readonly string[]) => void, ...","schema":{"kind":"enum","type":"Prop<unknown, unknown> | ((callbackfn: (value: string, index: number, array: readonly string[]) => void, thisArg?: any) => void) | ((callbackfn: (value: string, index: number, array: readonly string[]) => void, thisArg?: any) => void) | ((callbackfn: (value: string, index: number, array: readonly string[]) => void, ...","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(callbackfn: (value: string, index: number, array: readonly string[]) => void, thisArg?: any): void","schema":[]},{"kind":"event","type":"(callbackfn: (value: string, index: number, array: readonly string[]) => void, thisArg?: any): void","schema":[]},{"kind":"event","type":"(callbackfn: (value: string, index: number, array: readonly string[]) => void, thisArg?: any): void","schema":[]}]}},{"name":"map","global":false,"description":"Calls a defined callback function on each element of an array, and returns an array that contains the results.","tags":[{"name":"param","text":"callbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array."},{"name":"param","text":"thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value."}],"required":true,"type":"Prop<unknown, unknown> | (<U>(callbackfn: (value: string, index: number, array: readonly string[]) => U, thisArg?: any) => U[]) | (<U>(callbackfn: (value: string, index: number, array: readonly string[]) => U, thisArg?: any) => U[]) | (<U>(callbackfn: (value: string, index: number, array: readonly string[]) => U, th...","schema":{"kind":"enum","type":"Prop<unknown, unknown> | (<U>(callbackfn: (value: string, index: number, array: readonly string[]) => U, thisArg?: any) => U[]) | (<U>(callbackfn: (value: string, index: number, array: readonly string[]) => U, thisArg?: any) => U[]) | (<U>(callbackfn: (value: string, index: number, array: readonly string[]) => U, th...","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"<U>(callbackfn: (value: string, index: number, array: readonly string[]) => U, thisArg?: any): U[]","schema":[]},{"kind":"event","type":"<U>(callbackfn: (value: string, index: number, array: readonly string[]) => U, thisArg?: any): U[]","schema":[]},{"kind":"event","type":"<U>(callbackfn: (value: string, index: number, array: readonly string[]) => U, thisArg?: any): U[]","schema":[]}]}},{"name":"filter","global":false,"description":"Returns the elements of an array that meet the condition specified in a callback function.","tags":[{"name":"param","text":"predicate A function that accepts up to three arguments. The filter method calls the predicate function one time for each element in the array."},{"name":"param","text":"thisArg An object to which the this keyword can refer in the predicate function. If thisArg is omitted, undefined is used as the this value."},{"name":"param","text":"predicate A function that accepts up to three arguments. The filter method calls the predicate function one time for each element in the array."},{"name":"param","text":"thisArg An object to which the this keyword can refer in the predicate function. If thisArg is omitted, undefined is used as the this value."}],"required":true,"type":"Prop<unknown, unknown> | { <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S[]; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): string[]; } | { ...; } | { ...; } | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | { <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S[]; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): string[]; } | { ...; } | { ...; } | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},"{ <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S[]; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): string[]; }","{ <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S[]; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): string[]; }","{ <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S[]; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): string[]; }"]}},{"name":"reduce","global":false,"description":"Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.","tags":[{"name":"param","text":"callbackfn A function that accepts up to four arguments. The reduce method calls the callbackfn function one time for each element in the array."},{"name":"param","text":"initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value."},{"name":"param","text":"callbackfn A function that accepts up to four arguments. The reduce method calls the callbackfn function one time for each element in the array."},{"name":"param","text":"initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value."}],"required":true,"type":"Prop<unknown, unknown> | { (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string): string; (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string, initialValue: string): string; <U>(callbackfn...","schema":{"kind":"enum","type":"Prop<unknown, unknown> | { (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string): string; (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string, initialValue: string): string; <U>(callbackfn...","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},"{ (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string): string; (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string, initialValue: string): string; <U>(callbackfn: (previousValue: U, curr...","{ (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string): string; (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string, initialValue: string): string; <U>(callbackfn: (previousValue: U, curr...","{ (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string): string; (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string, initialValue: string): string; <U>(callbackfn: (previousValue: U, curr..."]}},{"name":"reduceRight","global":false,"description":"Calls the specified callback function for all the elements in an array, in descending order. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.","tags":[{"name":"param","text":"callbackfn A function that accepts up to four arguments. The reduceRight method calls the callbackfn function one time for each element in the array."},{"name":"param","text":"initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value."},{"name":"param","text":"callbackfn A function that accepts up to four arguments. The reduceRight method calls the callbackfn function one time for each element in the array."},{"name":"param","text":"initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value."}],"required":true,"type":"Prop<unknown, unknown> | { (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string): string; (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string, initialValue: string): string; <U>(callbackfn...","schema":{"kind":"enum","type":"Prop<unknown, unknown> | { (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string): string; (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string, initialValue: string): string; <U>(callbackfn...","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},"{ (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string): string; (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string, initialValue: string): string; <U>(callbackfn: (previousValue: U, curr...","{ (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string): string; (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string, initialValue: string): string; <U>(callbackfn: (previousValue: U, curr...","{ (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string): string; (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string, initialValue: string): string; <U>(callbackfn: (previousValue: U, curr..."]}},{"name":"find","global":false,"description":"Returns the value of the first element in the array where predicate is true, and undefined\notherwise.","tags":[{"name":"param","text":"predicate find calls predicate once for each element of the array, in ascending\norder, until it finds one where predicate returns true. If such an element is found, find\nimmediately returns that element value. Otherwise, find returns undefined."},{"name":"param","text":"thisArg If provided, it will be used as the this value for each invocation of\npredicate. If it is not provided, undefined is used instead."}],"required":true,"type":"Prop<unknown, unknown> | { <S extends string>(predicate: (value: string, index: number, obj: readonly string[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any): string | undefined; } | { ...; } | { ...; } | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | { <S extends string>(predicate: (value: string, index: number, obj: readonly string[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any): string | undefined; } | { ...; } | { ...; } | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},"{ <S extends string>(predicate: (value: string, index: number, obj: readonly string[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any): string | undefined; }","{ <S extends string>(predicate: (value: string, index: number, obj: readonly string[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any): string | undefined; }","{ <S extends string>(predicate: (value: string, index: number, obj: readonly string[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any): string | undefined; }"]}},{"name":"findIndex","global":false,"description":"Returns the index of the first element in the array where predicate is true, and -1\notherwise.","tags":[{"name":"param","text":"predicate find calls predicate once for each element of the array, in ascending\norder, until it finds one where predicate returns true. If such an element is found,\nfindIndex immediately returns that element index. Otherwise, findIndex returns -1."},{"name":"param","text":"thisArg If provided, it will be used as the this value for each invocation of\npredicate. If it is not provided, undefined is used instead."}],"required":true,"type":"Prop<unknown, unknown> | ((predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any) => number) | ((predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any) => number) | ((predicate: (value: string, index: number, obj: readonly string[]) => unkno...","schema":{"kind":"enum","type":"Prop<unknown, unknown> | ((predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any) => number) | ((predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any) => number) | ((predicate: (value: string, index: number, obj: readonly string[]) => unkno...","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any): number","schema":[]},{"kind":"event","type":"(predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any): number","schema":[]},{"kind":"event","type":"(predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any): number","schema":[]}]}},{"name":"entries","global":false,"description":"Returns an iterable of key, value pairs for every entry in the array","tags":[],"required":true,"type":"Prop<unknown, unknown> | (() => IterableIterator<[number, string]>) | (() => IterableIterator<[number, string]>) | (() => IterableIterator<[number, string]>) | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | (() => IterableIterator<[number, string]>) | (() => IterableIterator<[number, string]>) | (() => IterableIterator<[number, string]>) | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(): IterableIterator<[number, string]>"},{"kind":"event","type":"(): IterableIterator<[number, string]>"},{"kind":"event","type":"(): IterableIterator<[number, string]>"}]}},{"name":"keys","global":false,"description":"Returns an iterable of keys in the array","tags":[],"required":true,"type":"Prop<unknown, unknown> | (() => IterableIterator<number>) | (() => IterableIterator<number>) | (() => IterableIterator<number>) | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | (() => IterableIterator<number>) | (() => IterableIterator<number>) | (() => IterableIterator<number>) | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(): IterableIterator<number>"},{"kind":"event","type":"(): IterableIterator<number>"},{"kind":"event","type":"(): IterableIterator<number>"}]}},{"name":"values","global":false,"description":"Returns an iterable of values in the array","tags":[],"required":true,"type":"Prop<unknown, unknown> | (() => IterableIterator<string>) | (() => IterableIterator<string>) | (() => IterableIterator<string>) | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | (() => IterableIterator<string>) | (() => IterableIterator<string>) | (() => IterableIterator<string>) | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(): IterableIterator<string>"},{"kind":"event","type":"(): IterableIterator<string>"},{"kind":"event","type":"(): IterableIterator<string>"}]}},{"name":"flatMap","global":false,"description":"Calls a defined callback function on each element of an array. Then, flattens the result into\na new array.\nThis is identical to a map followed by flat with depth 1.","tags":[{"name":"param","text":"callback A function that accepts up to three arguments. The flatMap method calls the\ncallback function one time for each element in the array."},{"name":"param","text":"thisArg An object to which the this keyword can refer in the callback function. If\nthisArg is omitted, undefined is used as the this value."}],"required":true,"type":"Prop<unknown, unknown> | (<U, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U | readonly U[], thisArg?: This | undefined) => U[]) | (<U, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U | readonly U[], thisArg?: This | undefined...","schema":{"kind":"enum","type":"Prop<unknown, unknown> | (<U, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U | readonly U[], thisArg?: This | undefined) => U[]) | (<U, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U | readonly U[], thisArg?: This | undefined...","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"<U, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U | readonly U[], thisArg?: This | undefined): U[]","schema":[]},{"kind":"event","type":"<U, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U | readonly U[], thisArg?: This | undefined): U[]","schema":[]},{"kind":"event","type":"<U, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U | readonly U[], thisArg?: This | undefined): U[]","schema":[]}]}},{"name":"flat","global":false,"description":"Returns a new array with all sub-array elements concatenated into it recursively up to the\nspecified depth.","tags":[{"name":"param","text":"depth The maximum recursion depth"}],"required":true,"type":"Prop<unknown, unknown> | (<A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[]) | (<A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[]) | (<A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<...>[]) | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | (<A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[]) | (<A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[]) | (<A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<...>[]) | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[]","schema":[]},{"kind":"event","type":"<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[]","schema":[]},{"kind":"event","type":"<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[]","schema":[]}]}},{"name":"findLast","global":false,"description":"Returns the value of the last element in the array where predicate is true, and undefined\notherwise.","tags":[{"name":"param","text":"predicate findLast calls predicate once for each element of the array, in descending\norder, until it finds one where predicate returns true. If such an element is found, findLast\nimmediately returns that element value. Otherwise, findLast returns undefined."},{"name":"param","text":"thisArg If provided, it will be used as the this value for each invocation of\npredicate. If it is not provided, undefined is used instead."}],"required":true,"type":"Prop<unknown, unknown> | { <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): string | undefined; } | { ...; } | { ...; } | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | { <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): string | undefined; } | { ...; } | { ...; } | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},"{ <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): string | undefined; }","{ <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): string | undefined; }","{ <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): string | undefined; }"]}},{"name":"findLastIndex","global":false,"description":"Returns the index of the last element in the array where predicate is true, and -1\notherwise.","tags":[{"name":"param","text":"predicate findLastIndex calls predicate once for each element of the array, in descending\norder, until it finds one where predicate returns true. If such an element is found,\nfindLastIndex immediately returns that element index. Otherwise, findLastIndex returns -1."},{"name":"param","text":"thisArg If provided, it will be used as the this value for each invocation of\npredicate. If it is not provided, undefined is used instead."}],"required":true,"type":"Prop<unknown, unknown> | ((predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any) => number) | ((predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any) => number) | ((predicate: (value: string, index: number, array: readonly string[]) =>...","schema":{"kind":"enum","type":"Prop<unknown, unknown> | ((predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any) => number) | ((predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any) => number) | ((predicate: (value: string, index: number, array: readonly string[]) =>...","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): number","schema":[]},{"kind":"event","type":"(predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): number","schema":[]},{"kind":"event","type":"(predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): number","schema":[]}]}},{"name":"toString","global":false,"description":"Returns a string representation of an object.\nReturns a string representation of an array.","tags":[],"required":true,"type":"(() => string) | ((() => string) & (() => string)) | ((() => string) & (() => string)) | ((() => string) & (() => string))","schema":{"kind":"enum","type":"(() => string) | ((() => string) & (() => string)) | ((() => string) & (() => string)) | ((() => string) & (() => string))","schema":[{"kind":"event","type":"(): string"},{"kind":"event","type":"(): string"},{"kind":"event","type":"(): string"},{"kind":"event","type":"(): string"}]}},{"name":"toLocaleString","global":false,"description":"Returns a date converted to a string using the current locale.\nReturns a string representation of an array. The elements are converted to string using their toLocaleString methods.","tags":[],"required":true,"type":"(() => string) | ((() => string) & (() => string)) | ((() => string) & (() => string)) | ((() => string) & (() => string))","schema":{"kind":"enum","type":"(() => string) | ((() => string) & (() => string)) | ((() => string) & (() => string)) | ((() => string) & (() => string))","schema":[{"kind":"event","type":"(): string"},{"kind":"event","type":"(): string"},{"kind":"event","type":"(): string"},{"kind":"event","type":"(): string"}]}}],"slots":[{"name":"default","type":"{}","description":"","schema":{"kind":"object","type":"{}","schema":{}}}],"events":[]}},{"name":"DocsTypeClassTable","path":"components/content/DocsTypeClassTable.vue","meta":{"props":[{"name":"type","global":false,"description":"","tags":[],"required":true,"type":"DocsTypeClassType[]","schema":{"kind":"array","type":"DocsTypeClassType[]","schema":[{"kind":"object","type":"DocsTypeClassType","schema":{"style":{"name":"style","global":false,"description":"","tags":[],"required":true,"type":"[string, { values: object[]; }, string]","schema":{"kind":"array","type":"[string, { values: object[]; }, string]","schema":["string",{"kind":"object","type":"{ values: object[]; }","schema":{"values":{"name":"values","global":false,"description":"","tags":[],"required":true,"type":"object[]","schema":{"kind":"array","type":"object[]","schema":["object"]}}}},"string"]}}}}]}}],"slots":[],"events":[]}},{"name":"DocsTypeTable","path":"components/content/DocsTypeTable.vue","meta":{"props":[{"name":"type","global":false,"description":"","tags":[],"required":true,"type":"\"weight\" | \"size\" | \"lh\" | \"ls\"","schema":{"kind":"enum","type":"\"weight\" | \"size\" | \"lh\" | \"ls\"","schema":["\"weight\"","\"size\"","\"lh\"","\"ls\""]}}],"slots":[],"events":[]}},{"name":"DocsWhatsNew","path":"components/content/DocsWhatsNew.vue","meta":{"props":[{"name":"title","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},{"name":"links","global":false,"description":"","tags":[],"required":false,"type":"{ text: string; url: string; }[] | undefined","schema":{"kind":"enum","type":"{ text: string; url: string; }[] | undefined","schema":["undefined",{"kind":"array","type":"{ text: string; url: string; }[]","schema":[{"kind":"object","type":"{ text: string; url: string; }","schema":{"text":{"name":"text","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},"url":{"name":"url","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"}}}]}]},"default":"[]"},{"name":"description","global":false,"description":"","tags":[],"required":false,"type":"string | undefined","schema":{"kind":"enum","type":"string | undefined","schema":["undefined","string"]}}],"slots":[{"name":"default","type":"{}","description":"","schema":{"kind":"object","type":"{}","schema":{}}}],"events":[]}},{"name":"Swatch","path":"components/content/Swatch.vue","meta":{"props":[{"name":"colour","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},{"name":"type","global":false,"description":"","tags":[],"required":false,"type":"\"color\" | \"image\" | undefined","schema":{"kind":"enum","type":"\"color\" | \"image\" | undefined","schema":["undefined","\"color\"","\"image\""]},"default":"\"color\""}],"slots":[],"events":[]}}]}
\ No newline at end of file
+{"version":"1.0.0","tokens":"7ae2515146ef474b6daa2184d4cdf98a00e724791e002e791a928ee41fe5e267","appConfigSchema":{"properties":"","default":""},"appConfig":{"nuxt":{"buildId":"1c6da812-7c87-438d-9470-666bc9df1046"},"title":"Ripple Design System","subheader":"Ripple is the design system for Victorian government digital products","sections":{"design-system":{"title":"Ripple Design System","color":"var(--rpl-clr-primary)","neutralFooter":false},"framework":{"title":"Ripple Framework","color":"var(--rpl-clr-dark)","neutralFooter":true}},"version":"2.1.0-alpha.76","description":"Make your service consistent with vic.gov.au digital branding. Learn from the research and experience of other service teams and avoid repeating work that’s already been done.","socials":{"github":"dpc-sdp/ripple-framework"},"storybookBaseUrl":"/storybook","hideModulesSection":false},"content":{"sources":{},"ignores":[],"locales":[],"highlight":{"theme":"github-light","preload":["vue","bash","markdown"],"highlighter":"shiki","langs":["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},"navigation":{"fields":["icon","layout"]},"documentDriven":{"layoutFallbacks":["page"]},"experimental":{"clientDB":false,"cacheContents":true,"stripQueryParameters":false,"advanceQuery":false,"search":""}},"components":[{"name":"DocsAlert","path":"components/content/DocsAlert.vue","meta":{"props":[],"slots":[{"name":"default","type":"{}","description":"","schema":{"kind":"object","type":"{}","schema":{}}}],"events":[]}},{"name":"DocsCard","path":"components/content/DocsCard.vue","meta":{"props":[],"slots":[{"name":"default","type":"{}","description":"","schema":{"kind":"object","type":"{}","schema":{}}}],"events":[]}},{"name":"DocsCardGrid","path":"components/content/DocsCardGrid.vue","meta":{"props":[],"slots":[{"name":"default","type":"{}","description":"","schema":{"kind":"object","type":"{}","schema":{}}}],"events":[]}},{"name":"DocsColourTable","path":"components/content/DocsColourTable.vue","meta":{"props":[{"name":"colours","global":false,"description":"","tags":[],"required":true,"type":"string[]","schema":{"kind":"array","type":"string[]","schema":["string"]}}],"slots":[],"events":[]}},{"name":"DocsContent","path":"components/content/DocsContent.vue","meta":{"props":[],"slots":[{"name":"default","type":"{}","description":"","schema":{"kind":"object","type":"{}","schema":{}}}],"events":[]}},{"name":"DocsContentNavigation","path":"components/content/DocsContentNavigation.vue","meta":{"props":[],"slots":[],"events":[]}},{"name":"DocsExample","path":"components/content/DocsExample.vue","meta":{"props":[{"name":"id","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},{"name":"withPadding","global":false,"description":"","tags":[],"required":false,"type":"boolean | undefined","schema":{"kind":"enum","type":"boolean | undefined","schema":["undefined","false","true"]},"default":"false"},{"name":"theme","global":false,"description":"","tags":[],"required":false,"type":"string | undefined","schema":{"kind":"enum","type":"string | undefined","schema":["undefined","string"]},"default":"undefined"},{"name":"useNeutralButtons","global":false,"description":"","tags":[],"required":false,"type":"boolean | undefined","schema":{"kind":"enum","type":"boolean | undefined","schema":["undefined","false","true"]},"default":"false"},{"name":"argsString","global":false,"description":"","tags":[],"required":false,"type":"string | undefined","schema":{"kind":"enum","type":"string | undefined","schema":["undefined","string"]},"default":"\"\""},{"name":"hideNewTab","global":false,"description":"","tags":[],"required":false,"type":"boolean | undefined","schema":{"kind":"enum","type":"boolean | undefined","schema":["undefined","false","true"]}},{"name":"hideCode","global":false,"description":"","tags":[],"required":false,"type":"boolean | undefined","schema":{"kind":"enum","type":"boolean | undefined","schema":["undefined","false","true"]}}],"slots":[],"events":[]}},{"name":"DocsGradientTable","path":"components/content/DocsGradientTable.vue","meta":{"props":[],"slots":[],"events":[]}},{"name":"DocsGrid","path":"components/content/DocsGrid.vue","meta":{"props":[],"slots":[{"name":"default","type":"{}","description":"","schema":{"kind":"object","type":"{}","schema":{}}}],"events":[]}},{"name":"DocsHeroHeader","path":"components/content/DocsHeroHeader.vue","meta":{"props":[{"name":"title","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},{"name":"description","global":false,"description":"","tags":[],"required":false,"type":"string | undefined","schema":{"kind":"enum","type":"string | undefined","schema":["undefined","string"]},"default":"\"\""}],"slots":[],"events":[]}},{"name":"DocsHomeSection","path":"components/content/DocsHomeSection.vue","meta":{"props":[{"name":"title","global":false,"description":"","tags":[],"required":false,"type":"string | undefined","schema":{"kind":"enum","type":"string | undefined","schema":["undefined","string"]},"default":"\"\""}],"slots":[{"name":"default","type":"{}","description":"","schema":{"kind":"object","type":"{}","schema":{}}}],"events":[]}},{"name":"DocsIcon","path":"components/content/DocsIcon.vue","meta":{"props":[{"name":"name","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},{"name":"size","global":false,"description":"","tags":[],"required":false,"type":"\"xs\" | \"s\" | \"m\" | \"l\" | undefined","schema":{"kind":"enum","type":"\"xs\" | \"s\" | \"m\" | \"l\" | undefined","schema":["undefined","\"xs\"","\"s\"","\"m\"","\"l\""]},"default":"\"xs\""}],"slots":[],"events":[]}},{"name":"DocsIconSizingTable","path":"components/content/DocsIconSizingTable.vue","meta":{"props":[{"name":"sizes","global":false,"description":"","tags":[],"required":true,"type":"string[]","schema":{"kind":"array","type":"string[]","schema":["string"]}}],"slots":[],"events":[]}},{"name":"DocsIconTable","path":"components/content/DocsIconTable.vue","meta":{"props":[{"name":"group","global":false,"description":"","tags":[],"required":true,"type":"\"alert\" | \"social\" | \"standard\"","schema":{"kind":"enum","type":"\"alert\" | \"social\" | \"standard\"","schema":["\"alert\"","\"social\"","\"standard\""]}}],"slots":[],"events":[]}},{"name":"DocsImageExample","path":"components/content/DocsImageExample.vue","meta":{"props":[{"name":"src","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},{"name":"alt","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"}],"slots":[{"name":"default","type":"{}","description":"","schema":{"kind":"object","type":"{}","schema":{}}}],"events":[]}},{"name":"DocsLayerStyleTable","path":"components/content/DocsLayerStyleTable.vue","meta":{"props":[{"name":"type","global":false,"description":"","tags":[],"required":true,"type":"\"border\" | \"border.radius\" | \"elevation\"","schema":{"kind":"enum","type":"\"border\" | \"border.radius\" | \"elevation\"","schema":["\"border\"","\"border.radius\"","\"elevation\""]}}],"slots":[],"events":[]}},{"name":"DocsLink","path":"components/content/DocsLink.vue","meta":{"props":[{"name":"url","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},{"name":"isExternal","global":false,"description":"","tags":[],"required":false,"type":"boolean | undefined","schema":{"kind":"enum","type":"boolean | undefined","schema":["undefined","false","true"]},"default":"false"},{"name":"isSmall","global":false,"description":"","tags":[],"required":false,"type":"boolean | undefined","schema":{"kind":"enum","type":"boolean | undefined","schema":["undefined","false","true"]},"default":"false"},{"name":"iconPosition","global":false,"description":"","tags":[],"required":false,"type":"\"start\" | \"end\" | undefined","schema":{"kind":"enum","type":"\"start\" | \"end\" | undefined","schema":["undefined","\"start\"","\"end\""]},"default":"\"start\""}],"slots":[{"name":"default","type":"{}","description":"","schema":{"kind":"object","type":"{}","schema":{}}}],"events":[]}},{"name":"DocsModuleCard","path":"components/content/DocsModuleCard.vue","meta":{"props":[{"name":"moduleSlug","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"}],"slots":[],"events":[]}},{"name":"DocsModuleInfo","path":"components/content/DocsModuleInfo.vue","meta":{"props":[{"name":"module","global":false,"description":"","tags":[],"required":true,"type":"{ name: string; packageName: string; sourceUrl: string; issuesUrl: string; contributor: { name: string; url: string; }; }","schema":{"kind":"object","type":"{ name: string; packageName: string; sourceUrl: string; issuesUrl: string; contributor: { name: string; url: string; }; }","schema":{"name":{"name":"name","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},"packageName":{"name":"packageName","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},"sourceUrl":{"name":"sourceUrl","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},"issuesUrl":{"name":"issuesUrl","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},"contributor":{"name":"contributor","global":false,"description":"","tags":[],"required":true,"type":"{ name: string; url: string; }","schema":{"kind":"object","type":"{ name: string; url: string; }","schema":{"name":{"name":"name","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},"url":{"name":"url","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"}}}}}}}],"slots":[],"events":[]}},{"name":"DocsModuleNavigation","path":"components/content/DocsModuleNavigation.vue","meta":{"props":[],"slots":[],"events":[]}},{"name":"DocsNavLink","path":"components/content/DocsNavLink.vue","meta":{"props":[{"name":"url","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},{"name":"iconPosition","global":false,"description":"","tags":[],"required":false,"type":"\"start\" | \"end\" | undefined","schema":{"kind":"enum","type":"\"start\" | \"end\" | undefined","schema":["undefined","\"start\"","\"end\""]},"default":"\"start\""},{"name":"icon","global":false,"description":"","tags":[],"required":false,"type":"string | undefined","schema":{"kind":"enum","type":"string | undefined","schema":["undefined","string"]},"default":"\"\""}],"slots":[{"name":"default","type":"{}","description":"","schema":{"kind":"object","type":"{}","schema":{}}}],"events":[]}},{"name":"DocsPageHeader","path":"components/content/DocsPageHeader.vue","meta":{"props":[{"name":"title","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},{"name":"description","global":false,"description":"","tags":[],"required":false,"type":"string | undefined","schema":{"kind":"enum","type":"string | undefined","schema":["undefined","string"]},"default":"\"\""},{"name":"links","global":false,"description":"","tags":[],"required":false,"type":"{ text: string; url: string; }[] | undefined","schema":{"kind":"enum","type":"{ text: string; url: string; }[] | undefined","schema":["undefined",{"kind":"array","type":"{ text: string; url: string; }[]","schema":[{"kind":"object","type":"{ text: string; url: string; }","schema":{"text":{"name":"text","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},"url":{"name":"url","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"}}}]}]},"default":"[]"}],"slots":[],"events":[]}},{"name":"DocsThemeChooser","path":"components/content/DocsThemeChooser.vue","meta":{"props":[{"name":"concat","global":false,"description":"Combines two or more arrays.","tags":[{"name":"param","text":"items Additional items to add to the end of array1."},{"name":"param","text":"items Additional items to add to the end of array1."}],"required":true,"type":"Prop<unknown, unknown> | { (...items: ConcatArray<string>[]): string[]; (...items: (string | ConcatArray<string>)[]): string[]; } | { (...items: ConcatArray<string>[]): string[]; (...items: (string | ConcatArray<...>)[]): string[]; } | { ...; } | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | { (...items: ConcatArray<string>[]): string[]; (...items: (string | ConcatArray<string>)[]): string[]; } | { (...items: ConcatArray<string>[]): string[]; (...items: (string | ConcatArray<...>)[]): string[]; } | { ...; } | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},"{ (...items: ConcatArray<string>[]): string[]; (...items: (string | ConcatArray<string>)[]): string[]; }","{ (...items: ConcatArray<string>[]): string[]; (...items: (string | ConcatArray<string>)[]): string[]; }","{ (...items: ConcatArray<string>[]): string[]; (...items: (string | ConcatArray<string>)[]): string[]; }"]}},{"name":"indexOf","global":false,"description":"Returns the index of the first occurrence of a value in an array.","tags":[{"name":"param","text":"searchElement The value to locate in the array."},{"name":"param","text":"fromIndex The array index at which to begin the search. If fromIndex is omitted, the search starts at index 0."}],"required":true,"type":"Prop<unknown, unknown> | ((searchElement: string, fromIndex?: number | undefined) => number) | ((searchElement: string, fromIndex?: number | undefined) => number) | ((searchElement: string, fromIndex?: number | undefined) => number) | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | ((searchElement: string, fromIndex?: number | undefined) => number) | ((searchElement: string, fromIndex?: number | undefined) => number) | ((searchElement: string, fromIndex?: number | undefined) => number) | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(searchElement: string, fromIndex?: number | undefined): number","schema":[]},{"kind":"event","type":"(searchElement: string, fromIndex?: number | undefined): number","schema":[]},{"kind":"event","type":"(searchElement: string, fromIndex?: number | undefined): number","schema":[]}]}},{"name":"lastIndexOf","global":false,"description":"Returns the index of the last occurrence of a specified value in an array.","tags":[{"name":"param","text":"searchElement The value to locate in the array."},{"name":"param","text":"fromIndex The array index at which to begin the search. If fromIndex is omitted, the search starts at the last index in the array."}],"required":true,"type":"Prop<unknown, unknown> | ((searchElement: string, fromIndex?: number | undefined) => number) | ((searchElement: string, fromIndex?: number | undefined) => number) | ((searchElement: string, fromIndex?: number | undefined) => number) | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | ((searchElement: string, fromIndex?: number | undefined) => number) | ((searchElement: string, fromIndex?: number | undefined) => number) | ((searchElement: string, fromIndex?: number | undefined) => number) | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(searchElement: string, fromIndex?: number | undefined): number","schema":[]},{"kind":"event","type":"(searchElement: string, fromIndex?: number | undefined): number","schema":[]},{"kind":"event","type":"(searchElement: string, fromIndex?: number | undefined): number","schema":[]}]}},{"name":"slice","global":false,"description":"Returns a section of an array.","tags":[{"name":"param","text":"start The beginning of the specified portion of the array."},{"name":"param","text":"end The end of the specified portion of the array. This is exclusive of the element at the index 'end'."}],"required":true,"type":"Prop<unknown, unknown> | ((start?: number | undefined, end?: number | undefined) => string[]) | ((start?: number | undefined, end?: number | undefined) => string[]) | ((start?: number | undefined, end?: number | undefined) => string[]) | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | ((start?: number | undefined, end?: number | undefined) => string[]) | ((start?: number | undefined, end?: number | undefined) => string[]) | ((start?: number | undefined, end?: number | undefined) => string[]) | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(start?: number | undefined, end?: number | undefined): string[]","schema":[]},{"kind":"event","type":"(start?: number | undefined, end?: number | undefined): string[]","schema":[]},{"kind":"event","type":"(start?: number | undefined, end?: number | undefined): string[]","schema":[]}]}},{"name":"length","global":false,"description":"Gets the length of the array. This is a number one higher than the highest element defined in an array.","tags":[],"required":true,"type":"number | Prop<unknown, unknown> | null | undefined","schema":{"kind":"enum","type":"number | Prop<unknown, unknown> | null | undefined","schema":["undefined","null","number","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]}]}},{"name":"includes","global":false,"description":"Determines whether an array includes a certain element, returning true or false as appropriate.","tags":[{"name":"param","text":"searchElement The element to search for."},{"name":"param","text":"fromIndex The position in this array at which to begin searching for searchElement."}],"required":true,"type":"Prop<unknown, unknown> | ((searchElement: string, fromIndex?: number | undefined) => boolean) | ((searchElement: string, fromIndex?: number | undefined) => boolean) | ((searchElement: string, fromIndex?: number | undefined) => boolean) | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | ((searchElement: string, fromIndex?: number | undefined) => boolean) | ((searchElement: string, fromIndex?: number | undefined) => boolean) | ((searchElement: string, fromIndex?: number | undefined) => boolean) | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(searchElement: string, fromIndex?: number | undefined): boolean","schema":[]},{"kind":"event","type":"(searchElement: string, fromIndex?: number | undefined): boolean","schema":[]},{"kind":"event","type":"(searchElement: string, fromIndex?: number | undefined): boolean","schema":[]}]}},{"name":"at","global":false,"description":"Returns the item located at the specified index.","tags":[{"name":"param","text":"index The zero-based index of the desired code unit. A negative index will count back from the last item."}],"required":true,"type":"Prop<unknown, unknown> | ((index: number) => string | undefined) | ((index: number) => string | undefined) | ((index: number) => string | undefined) | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | ((index: number) => string | undefined) | ((index: number) => string | undefined) | ((index: number) => string | undefined) | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(index: number): string | undefined","schema":[]},{"kind":"event","type":"(index: number): string | undefined","schema":[]},{"kind":"event","type":"(index: number): string | undefined","schema":[]}]}},{"name":"join","global":false,"description":"Adds all the elements of an array separated by the specified separator string.","tags":[{"name":"param","text":"separator A string used to separate one element of an array from the next in the resulting String. If omitted, the array elements are separated with a comma."}],"required":true,"type":"Prop<unknown, unknown> | ((separator?: string | undefined) => string) | ((separator?: string | undefined) => string) | ((separator?: string | undefined) => string) | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | ((separator?: string | undefined) => string) | ((separator?: string | undefined) => string) | ((separator?: string | undefined) => string) | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(separator?: string | undefined): string","schema":[]},{"kind":"event","type":"(separator?: string | undefined): string","schema":[]},{"kind":"event","type":"(separator?: string | undefined): string","schema":[]}]}},{"name":"every","global":false,"description":"Determines whether all the members of an array satisfy the specified test.","tags":[{"name":"param","text":"predicate A function that accepts up to three arguments. The every method calls\nthe predicate function for each element in the array until the predicate returns a value\nwhich is coercible to the Boolean value false, or until the end of the array."},{"name":"param","text":"thisArg An object to which the this keyword can refer in the predicate function.\nIf thisArg is omitted, undefined is used as the this value."},{"name":"param","text":"predicate A function that accepts up to three arguments. The every method calls\nthe predicate function for each element in the array until the predicate returns a value\nwhich is coercible to the Boolean value false, or until the end of the array."},{"name":"param","text":"thisArg An object to which the this keyword can refer in the predicate function.\nIf thisArg is omitted, undefined is used as the this value."}],"required":true,"type":"Prop<unknown, unknown> | { <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): this is readonly S[]; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): boolean; } | { ...; } | { ...; } | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | { <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): this is readonly S[]; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): boolean; } | { ...; } | { ...; } | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},"{ <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): this is readonly S[]; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): boolean; }","{ <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): this is readonly S[]; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): boolean; }","{ <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): this is readonly S[]; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): boolean; }"]}},{"name":"some","global":false,"description":"Determines whether the specified callback function returns true for any element of an array.","tags":[{"name":"param","text":"predicate A function that accepts up to three arguments. The some method calls\nthe predicate function for each element in the array until the predicate returns a value\nwhich is coercible to the Boolean value true, or until the end of the array."},{"name":"param","text":"thisArg An object to which the this keyword can refer in the predicate function.\nIf thisArg is omitted, undefined is used as the this value."}],"required":true,"type":"Prop<unknown, unknown> | ((predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any) => boolean) | ((predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any) => boolean) | ((predicate: (value: string, index: number, array: readonly string[]) ...","schema":{"kind":"enum","type":"Prop<unknown, unknown> | ((predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any) => boolean) | ((predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any) => boolean) | ((predicate: (value: string, index: number, array: readonly string[]) ...","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): boolean","schema":[]},{"kind":"event","type":"(predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): boolean","schema":[]},{"kind":"event","type":"(predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): boolean","schema":[]}]}},{"name":"forEach","global":false,"description":"Performs the specified action for each element in an array.","tags":[{"name":"param","text":"callbackfn A function that accepts up to three arguments. forEach calls the callbackfn function one time for each element in the array."},{"name":"param","text":"thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value."}],"required":true,"type":"Prop<unknown, unknown> | ((callbackfn: (value: string, index: number, array: readonly string[]) => void, thisArg?: any) => void) | ((callbackfn: (value: string, index: number, array: readonly string[]) => void, thisArg?: any) => void) | ((callbackfn: (value: string, index: number, array: readonly string[]) => void, ...","schema":{"kind":"enum","type":"Prop<unknown, unknown> | ((callbackfn: (value: string, index: number, array: readonly string[]) => void, thisArg?: any) => void) | ((callbackfn: (value: string, index: number, array: readonly string[]) => void, thisArg?: any) => void) | ((callbackfn: (value: string, index: number, array: readonly string[]) => void, ...","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(callbackfn: (value: string, index: number, array: readonly string[]) => void, thisArg?: any): void","schema":[]},{"kind":"event","type":"(callbackfn: (value: string, index: number, array: readonly string[]) => void, thisArg?: any): void","schema":[]},{"kind":"event","type":"(callbackfn: (value: string, index: number, array: readonly string[]) => void, thisArg?: any): void","schema":[]}]}},{"name":"map","global":false,"description":"Calls a defined callback function on each element of an array, and returns an array that contains the results.","tags":[{"name":"param","text":"callbackfn A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array."},{"name":"param","text":"thisArg An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value."}],"required":true,"type":"Prop<unknown, unknown> | (<U>(callbackfn: (value: string, index: number, array: readonly string[]) => U, thisArg?: any) => U[]) | (<U>(callbackfn: (value: string, index: number, array: readonly string[]) => U, thisArg?: any) => U[]) | (<U>(callbackfn: (value: string, index: number, array: readonly string[]) => U, th...","schema":{"kind":"enum","type":"Prop<unknown, unknown> | (<U>(callbackfn: (value: string, index: number, array: readonly string[]) => U, thisArg?: any) => U[]) | (<U>(callbackfn: (value: string, index: number, array: readonly string[]) => U, thisArg?: any) => U[]) | (<U>(callbackfn: (value: string, index: number, array: readonly string[]) => U, th...","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"<U>(callbackfn: (value: string, index: number, array: readonly string[]) => U, thisArg?: any): U[]","schema":[]},{"kind":"event","type":"<U>(callbackfn: (value: string, index: number, array: readonly string[]) => U, thisArg?: any): U[]","schema":[]},{"kind":"event","type":"<U>(callbackfn: (value: string, index: number, array: readonly string[]) => U, thisArg?: any): U[]","schema":[]}]}},{"name":"filter","global":false,"description":"Returns the elements of an array that meet the condition specified in a callback function.","tags":[{"name":"param","text":"predicate A function that accepts up to three arguments. The filter method calls the predicate function one time for each element in the array."},{"name":"param","text":"thisArg An object to which the this keyword can refer in the predicate function. If thisArg is omitted, undefined is used as the this value."},{"name":"param","text":"predicate A function that accepts up to three arguments. The filter method calls the predicate function one time for each element in the array."},{"name":"param","text":"thisArg An object to which the this keyword can refer in the predicate function. If thisArg is omitted, undefined is used as the this value."}],"required":true,"type":"Prop<unknown, unknown> | { <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S[]; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): string[]; } | { ...; } | { ...; } | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | { <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S[]; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): string[]; } | { ...; } | { ...; } | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},"{ <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S[]; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): string[]; }","{ <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S[]; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): string[]; }","{ <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S[]; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): string[]; }"]}},{"name":"reduce","global":false,"description":"Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.","tags":[{"name":"param","text":"callbackfn A function that accepts up to four arguments. The reduce method calls the callbackfn function one time for each element in the array."},{"name":"param","text":"initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value."},{"name":"param","text":"callbackfn A function that accepts up to four arguments. The reduce method calls the callbackfn function one time for each element in the array."},{"name":"param","text":"initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value."}],"required":true,"type":"Prop<unknown, unknown> | { (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string): string; (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string, initialValue: string): string; <U>(callbackfn...","schema":{"kind":"enum","type":"Prop<unknown, unknown> | { (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string): string; (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string, initialValue: string): string; <U>(callbackfn...","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},"{ (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string): string; (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string, initialValue: string): string; <U>(callbackfn: (previousValue: U, curr...","{ (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string): string; (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string, initialValue: string): string; <U>(callbackfn: (previousValue: U, curr...","{ (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string): string; (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string, initialValue: string): string; <U>(callbackfn: (previousValue: U, curr..."]}},{"name":"reduceRight","global":false,"description":"Calls the specified callback function for all the elements in an array, in descending order. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.","tags":[{"name":"param","text":"callbackfn A function that accepts up to four arguments. The reduceRight method calls the callbackfn function one time for each element in the array."},{"name":"param","text":"initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value."},{"name":"param","text":"callbackfn A function that accepts up to four arguments. The reduceRight method calls the callbackfn function one time for each element in the array."},{"name":"param","text":"initialValue If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value."}],"required":true,"type":"Prop<unknown, unknown> | { (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string): string; (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string, initialValue: string): string; <U>(callbackfn...","schema":{"kind":"enum","type":"Prop<unknown, unknown> | { (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string): string; (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string, initialValue: string): string; <U>(callbackfn...","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},"{ (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string): string; (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string, initialValue: string): string; <U>(callbackfn: (previousValue: U, curr...","{ (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string): string; (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string, initialValue: string): string; <U>(callbackfn: (previousValue: U, curr...","{ (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string): string; (callbackfn: (previousValue: string, currentValue: string, currentIndex: number, array: readonly string[]) => string, initialValue: string): string; <U>(callbackfn: (previousValue: U, curr..."]}},{"name":"find","global":false,"description":"Returns the value of the first element in the array where predicate is true, and undefined\notherwise.","tags":[{"name":"param","text":"predicate find calls predicate once for each element of the array, in ascending\norder, until it finds one where predicate returns true. If such an element is found, find\nimmediately returns that element value. Otherwise, find returns undefined."},{"name":"param","text":"thisArg If provided, it will be used as the this value for each invocation of\npredicate. If it is not provided, undefined is used instead."}],"required":true,"type":"Prop<unknown, unknown> | { <S extends string>(predicate: (value: string, index: number, obj: readonly string[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any): string | undefined; } | { ...; } | { ...; } | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | { <S extends string>(predicate: (value: string, index: number, obj: readonly string[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any): string | undefined; } | { ...; } | { ...; } | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},"{ <S extends string>(predicate: (value: string, index: number, obj: readonly string[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any): string | undefined; }","{ <S extends string>(predicate: (value: string, index: number, obj: readonly string[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any): string | undefined; }","{ <S extends string>(predicate: (value: string, index: number, obj: readonly string[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any): string | undefined; }"]}},{"name":"findIndex","global":false,"description":"Returns the index of the first element in the array where predicate is true, and -1\notherwise.","tags":[{"name":"param","text":"predicate find calls predicate once for each element of the array, in ascending\norder, until it finds one where predicate returns true. If such an element is found,\nfindIndex immediately returns that element index. Otherwise, findIndex returns -1."},{"name":"param","text":"thisArg If provided, it will be used as the this value for each invocation of\npredicate. If it is not provided, undefined is used instead."}],"required":true,"type":"Prop<unknown, unknown> | ((predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any) => number) | ((predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any) => number) | ((predicate: (value: string, index: number, obj: readonly string[]) => unkno...","schema":{"kind":"enum","type":"Prop<unknown, unknown> | ((predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any) => number) | ((predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any) => number) | ((predicate: (value: string, index: number, obj: readonly string[]) => unkno...","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any): number","schema":[]},{"kind":"event","type":"(predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any): number","schema":[]},{"kind":"event","type":"(predicate: (value: string, index: number, obj: readonly string[]) => unknown, thisArg?: any): number","schema":[]}]}},{"name":"entries","global":false,"description":"Returns an iterable of key, value pairs for every entry in the array","tags":[],"required":true,"type":"Prop<unknown, unknown> | (() => IterableIterator<[number, string]>) | (() => IterableIterator<[number, string]>) | (() => IterableIterator<[number, string]>) | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | (() => IterableIterator<[number, string]>) | (() => IterableIterator<[number, string]>) | (() => IterableIterator<[number, string]>) | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(): IterableIterator<[number, string]>"},{"kind":"event","type":"(): IterableIterator<[number, string]>"},{"kind":"event","type":"(): IterableIterator<[number, string]>"}]}},{"name":"keys","global":false,"description":"Returns an iterable of keys in the array","tags":[],"required":true,"type":"Prop<unknown, unknown> | (() => IterableIterator<number>) | (() => IterableIterator<number>) | (() => IterableIterator<number>) | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | (() => IterableIterator<number>) | (() => IterableIterator<number>) | (() => IterableIterator<number>) | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(): IterableIterator<number>"},{"kind":"event","type":"(): IterableIterator<number>"},{"kind":"event","type":"(): IterableIterator<number>"}]}},{"name":"values","global":false,"description":"Returns an iterable of values in the array","tags":[],"required":true,"type":"Prop<unknown, unknown> | (() => IterableIterator<string>) | (() => IterableIterator<string>) | (() => IterableIterator<string>) | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | (() => IterableIterator<string>) | (() => IterableIterator<string>) | (() => IterableIterator<string>) | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(): IterableIterator<string>"},{"kind":"event","type":"(): IterableIterator<string>"},{"kind":"event","type":"(): IterableIterator<string>"}]}},{"name":"flatMap","global":false,"description":"Calls a defined callback function on each element of an array. Then, flattens the result into\na new array.\nThis is identical to a map followed by flat with depth 1.","tags":[{"name":"param","text":"callback A function that accepts up to three arguments. The flatMap method calls the\ncallback function one time for each element in the array."},{"name":"param","text":"thisArg An object to which the this keyword can refer in the callback function. If\nthisArg is omitted, undefined is used as the this value."}],"required":true,"type":"Prop<unknown, unknown> | (<U, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U | readonly U[], thisArg?: This | undefined) => U[]) | (<U, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U | readonly U[], thisArg?: This | undefined...","schema":{"kind":"enum","type":"Prop<unknown, unknown> | (<U, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U | readonly U[], thisArg?: This | undefined) => U[]) | (<U, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U | readonly U[], thisArg?: This | undefined...","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"<U, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U | readonly U[], thisArg?: This | undefined): U[]","schema":[]},{"kind":"event","type":"<U, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U | readonly U[], thisArg?: This | undefined): U[]","schema":[]},{"kind":"event","type":"<U, This = undefined>(callback: (this: This, value: string, index: number, array: string[]) => U | readonly U[], thisArg?: This | undefined): U[]","schema":[]}]}},{"name":"flat","global":false,"description":"Returns a new array with all sub-array elements concatenated into it recursively up to the\nspecified depth.","tags":[{"name":"param","text":"depth The maximum recursion depth"}],"required":true,"type":"Prop<unknown, unknown> | (<A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[]) | (<A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[]) | (<A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<...>[]) | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | (<A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[]) | (<A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[]) | (<A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<...>[]) | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[]","schema":[]},{"kind":"event","type":"<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[]","schema":[]},{"kind":"event","type":"<A, D extends number = 1>(this: A, depth?: D | undefined): FlatArray<A, D>[]","schema":[]}]}},{"name":"findLast","global":false,"description":"Returns the value of the last element in the array where predicate is true, and undefined\notherwise.","tags":[{"name":"param","text":"predicate findLast calls predicate once for each element of the array, in descending\norder, until it finds one where predicate returns true. If such an element is found, findLast\nimmediately returns that element value. Otherwise, findLast returns undefined."},{"name":"param","text":"thisArg If provided, it will be used as the this value for each invocation of\npredicate. If it is not provided, undefined is used instead."}],"required":true,"type":"Prop<unknown, unknown> | { <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): string | undefined; } | { ...; } | { ...; } | null | undefined","schema":{"kind":"enum","type":"Prop<unknown, unknown> | { <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): string | undefined; } | { ...; } | { ...; } | null | undefined","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},"{ <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): string | undefined; }","{ <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): string | undefined; }","{ <S extends string>(predicate: (value: string, index: number, array: readonly string[]) => value is S, thisArg?: any): S | undefined; (predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): string | undefined; }"]}},{"name":"findLastIndex","global":false,"description":"Returns the index of the last element in the array where predicate is true, and -1\notherwise.","tags":[{"name":"param","text":"predicate findLastIndex calls predicate once for each element of the array, in descending\norder, until it finds one where predicate returns true. If such an element is found,\nfindLastIndex immediately returns that element index. Otherwise, findLastIndex returns -1."},{"name":"param","text":"thisArg If provided, it will be used as the this value for each invocation of\npredicate. If it is not provided, undefined is used instead."}],"required":true,"type":"Prop<unknown, unknown> | ((predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any) => number) | ((predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any) => number) | ((predicate: (value: string, index: number, array: readonly string[]) =>...","schema":{"kind":"enum","type":"Prop<unknown, unknown> | ((predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any) => number) | ((predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any) => number) | ((predicate: (value: string, index: number, array: readonly string[]) =>...","schema":["undefined","null","PropOptions<unknown, unknown>",{"kind":"object","type":"new (...args: any[]) => {}","schema":{}},{"kind":"event","type":"(): unknown"},{"kind":"array","type":"PropConstructor<unknown>[]","schema":[{"kind":"enum","type":"PropConstructor<unknown>","schema":["new (...args: any[]) => {}","() => unknown"]}]},{"kind":"event","type":"(predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): number","schema":[]},{"kind":"event","type":"(predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): number","schema":[]},{"kind":"event","type":"(predicate: (value: string, index: number, array: readonly string[]) => unknown, thisArg?: any): number","schema":[]}]}},{"name":"toString","global":false,"description":"Returns a string representation of an object.\nReturns a string representation of an array.","tags":[],"required":true,"type":"(() => string) | ((() => string) & (() => string)) | ((() => string) & (() => string)) | ((() => string) & (() => string))","schema":{"kind":"enum","type":"(() => string) | ((() => string) & (() => string)) | ((() => string) & (() => string)) | ((() => string) & (() => string))","schema":[{"kind":"event","type":"(): string"},{"kind":"event","type":"(): string"},{"kind":"event","type":"(): string"},{"kind":"event","type":"(): string"}]}},{"name":"toLocaleString","global":false,"description":"Returns a date converted to a string using the current locale.\nReturns a string representation of an array. The elements are converted to string using their toLocaleString methods.","tags":[],"required":true,"type":"(() => string) | ((() => string) & (() => string)) | ((() => string) & (() => string)) | ((() => string) & (() => string))","schema":{"kind":"enum","type":"(() => string) | ((() => string) & (() => string)) | ((() => string) & (() => string)) | ((() => string) & (() => string))","schema":[{"kind":"event","type":"(): string"},{"kind":"event","type":"(): string"},{"kind":"event","type":"(): string"},{"kind":"event","type":"(): string"}]}}],"slots":[{"name":"default","type":"{}","description":"","schema":{"kind":"object","type":"{}","schema":{}}}],"events":[]}},{"name":"DocsTypeClassTable","path":"components/content/DocsTypeClassTable.vue","meta":{"props":[{"name":"type","global":false,"description":"","tags":[],"required":true,"type":"DocsTypeClassType[]","schema":{"kind":"array","type":"DocsTypeClassType[]","schema":[{"kind":"object","type":"DocsTypeClassType","schema":{"style":{"name":"style","global":false,"description":"","tags":[],"required":true,"type":"[string, { values: object[]; }, string]","schema":{"kind":"array","type":"[string, { values: object[]; }, string]","schema":["string",{"kind":"object","type":"{ values: object[]; }","schema":{"values":{"name":"values","global":false,"description":"","tags":[],"required":true,"type":"object[]","schema":{"kind":"array","type":"object[]","schema":["object"]}}}},"string"]}}}}]}}],"slots":[],"events":[]}},{"name":"DocsTypeTable","path":"components/content/DocsTypeTable.vue","meta":{"props":[{"name":"type","global":false,"description":"","tags":[],"required":true,"type":"\"weight\" | \"size\" | \"lh\" | \"ls\"","schema":{"kind":"enum","type":"\"weight\" | \"size\" | \"lh\" | \"ls\"","schema":["\"weight\"","\"size\"","\"lh\"","\"ls\""]}}],"slots":[],"events":[]}},{"name":"DocsWhatsNew","path":"components/content/DocsWhatsNew.vue","meta":{"props":[{"name":"title","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},{"name":"links","global":false,"description":"","tags":[],"required":false,"type":"{ text: string; url: string; }[] | undefined","schema":{"kind":"enum","type":"{ text: string; url: string; }[] | undefined","schema":["undefined",{"kind":"array","type":"{ text: string; url: string; }[]","schema":[{"kind":"object","type":"{ text: string; url: string; }","schema":{"text":{"name":"text","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},"url":{"name":"url","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"}}}]}]},"default":"[]"},{"name":"description","global":false,"description":"","tags":[],"required":false,"type":"string | undefined","schema":{"kind":"enum","type":"string | undefined","schema":["undefined","string"]}}],"slots":[{"name":"default","type":"{}","description":"","schema":{"kind":"object","type":"{}","schema":{}}}],"events":[]}},{"name":"Swatch","path":"components/content/Swatch.vue","meta":{"props":[{"name":"colour","global":false,"description":"","tags":[],"required":true,"type":"string","schema":"string"},{"name":"type","global":false,"description":"","tags":[],"required":false,"type":"\"color\" | \"image\" | undefined","schema":{"kind":"enum","type":"\"color\" | \"image\" | undefined","schema":["undefined","\"color\"","\"image\""]},"default":"\"color\""}],"slots":[],"events":[]}}]}
\ No newline at end of file
diff --git a/_nuxt/AppLayout.vue.nby97MTz.js b/_nuxt/AppLayout.vue.hqX4UWMQ.js
similarity index 98%
rename from _nuxt/AppLayout.vue.nby97MTz.js
rename to _nuxt/AppLayout.vue.hqX4UWMQ.js
index 78844dcf06..c92b23b42e 100644
--- a/_nuxt/AppLayout.vue.nby97MTz.js
+++ b/_nuxt/AppLayout.vue.hqX4UWMQ.js
@@ -1,4 +1,4 @@
-import{d as $,C as De,b as h,c as S,a4 as Ie,G as M,n as O,a2 as ee,N as k,r as z,Z as _e,m as xe,v as Ce,o as Se,a as He,e as p,g as L,w as R,t as H,D as j,f as q,a0 as ue,E as I,p as Oe,i as Ze,aw as Ke,J as Q,F as D,Q as de,H as je,W as K,R as qe}from"./entry.49ZHHvLB.js";import{_ as Ue}from"./nuxt-link.jgZZZkZ5.js";import{_ as ke}from"./RplIcon.vue.NIDikUS0.js";import{u as Ge,t as We,a as Ye,_ as Xe}from"./RplImage.css.o2mWVvok.js";import{_ as Je}from"./_plugin-vue_export-helper.x3n3nnut.js";import{_ as ce}from"./RplTextLink.css.ll_eQGN0.js";import{_ as Qe}from"./RplLink.vue.TWUjSovo.js";import{_ as et}from"./RplList.vue.4pRwhR7E.js";import{_ as tt}from"./RplExpandable.vue.3-aUufTF.js";import{u as Te}from"./useRippleEvent.DMJaxZxB.js";const at=n=>{const e=Object.create(null);for(const t in n){const a=n[t];a!==void 0&&(e[t]=a)}return e},Fe=(n,e)=>(t,a)=>(De(()=>n({...at(t),...a.attrs},a)),()=>{var o,s;return e?(s=(o=a.slots).default)==null?void 0:s.call(o):null}),Le={accesskey:String,autocapitalize:String,autofocus:{type:Boolean,default:void 0},class:[String,Object,Array],contenteditable:{type:Boolean,default:void 0},contextmenu:String,dir:String,draggable:{type:Boolean,default:void 0},enterkeyhint:String,exportparts:String,hidden:{type:Boolean,default:void 0},id:String,inputmode:String,is:String,itemid:String,itemprop:String,itemref:String,itemscope:String,itemtype:String,lang:String,nonce:String,part:String,slot:String,spellcheck:{type:Boolean,default:void 0},style:String,tabindex:String,title:String,translate:String},nt=$({name:"Meta",inheritAttrs:!1,props:{...Le,charset:String,content:String,httpEquiv:String,name:String,body:Boolean,renderPriority:[String,Number]},setup:Fe(n=>{const e={...n};return e.httpEquiv&&(e["http-equiv"]=e.httpEquiv,delete e.httpEquiv),{meta:[e]}})}),rt=$({name:"Html",inheritAttrs:!1,props:{...Le,manifest:String,version:String,xmlns:String,renderPriority:[String,Number]},setup:Fe(n=>({htmlAttrs:n}),!0)}),ot={id:"rpl-icon-sprite","aria-hidden":"true"},it=Ie('<defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs>',25),st=[it];function lt(n,e){return h(),S("svg",ot,st)}const ct={render:lt},ut=$({__name:"RplIconSprite",props:{hidden:{type:Boolean,default:!0},customSprite:{type:Boolean,default:!1}},setup(n){return(e,t)=>e.customSprite?(h(),M(ee(e.customSprite),{key:0,class:O(e.hidden&&"rpl-svg-sprite--hidden")},null,8,["class"])):(h(),M(ee(k(ct)),{key:1,"aria-hidden":e.hidden,class:O(e.hidden&&"rpl-svg-sprite--hidden")},null,8,["aria-hidden","class"]))}}),dt=""+globalThis.__publicAssetsURL("img/vicgovau-logo.svg");/*!
+import{d as $,C as De,b as h,c as S,a4 as Ie,G as M,n as O,a2 as ee,N as k,r as z,Z as _e,m as xe,v as Ce,o as Se,a as He,e as p,g as L,w as R,t as H,D as j,f as q,a0 as ue,E as I,p as Oe,i as Ze,aw as Ke,J as Q,F as D,Q as de,H as je,W as K,R as qe}from"./entry.Do8xnxHS.js";import{_ as Ue}from"./nuxt-link.sM27-MT7.js";import{_ as ke}from"./RplIcon.vue.PZ-X7Qhh.js";import{u as Ge,t as We,a as Ye,_ as Xe}from"./RplImage.css.ouJWHfa9.js";import{_ as Je}from"./_plugin-vue_export-helper.x3n3nnut.js";import{_ as ce}from"./RplTextLink.css.vnmpcBOe.js";import{_ as Qe}from"./RplLink.vue.3IdzOFUB.js";import{_ as et}from"./RplList.vue.i5RvVHLA.js";import{_ as tt}from"./RplExpandable.vue.ErcNtea4.js";import{u as Te}from"./useRippleEvent.Eg1owuZM.js";const at=n=>{const e=Object.create(null);for(const t in n){const a=n[t];a!==void 0&&(e[t]=a)}return e},Fe=(n,e)=>(t,a)=>(De(()=>n({...at(t),...a.attrs},a)),()=>{var o,s;return e?(s=(o=a.slots).default)==null?void 0:s.call(o):null}),Le={accesskey:String,autocapitalize:String,autofocus:{type:Boolean,default:void 0},class:[String,Object,Array],contenteditable:{type:Boolean,default:void 0},contextmenu:String,dir:String,draggable:{type:Boolean,default:void 0},enterkeyhint:String,exportparts:String,hidden:{type:Boolean,default:void 0},id:String,inputmode:String,is:String,itemid:String,itemprop:String,itemref:String,itemscope:String,itemtype:String,lang:String,nonce:String,part:String,slot:String,spellcheck:{type:Boolean,default:void 0},style:String,tabindex:String,title:String,translate:String},nt=$({name:"Meta",inheritAttrs:!1,props:{...Le,charset:String,content:String,httpEquiv:String,name:String,body:Boolean,renderPriority:[String,Number]},setup:Fe(n=>{const e={...n};return e.httpEquiv&&(e["http-equiv"]=e.httpEquiv,delete e.httpEquiv),{meta:[e]}})}),rt=$({name:"Html",inheritAttrs:!1,props:{...Le,manifest:String,version:String,xmlns:String,renderPriority:[String,Number]},setup:Fe(n=>({htmlAttrs:n}),!0)}),ot={id:"rpl-icon-sprite","aria-hidden":"true"},it=Ie('<defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs>',25),st=[it];function lt(n,e){return h(),S("svg",ot,st)}const ct={render:lt},ut=$({__name:"RplIconSprite",props:{hidden:{type:Boolean,default:!0},customSprite:{type:Boolean,default:!1}},setup(n){return(e,t)=>e.customSprite?(h(),M(ee(e.customSprite),{key:0,class:O(e.hidden&&"rpl-svg-sprite--hidden")},null,8,["class"])):(h(),M(ee(k(ct)),{key:1,"aria-hidden":e.hidden,class:O(e.hidden&&"rpl-svg-sprite--hidden")},null,8,["aria-hidden","class"]))}}),dt=""+globalThis.__publicAssetsURL("img/vicgovau-logo.svg");/*!
 * tabbable 6.1.1
 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
 */var Ee=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[href]:not([inert])","button:not([inert])","[tabindex]:not(slot):not([inert])","audio[controls]:not([inert])","video[controls]:not([inert])",'[contenteditable]:not([contenteditable="false"]):not([inert])',"details>summary:first-of-type:not([inert])","details:not([inert])"],te=Ee.join(","),Ne=typeof Element>"u",Z=Ne?function(){}:Element.prototype.matches||Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector,ae=!Ne&&Element.prototype.getRootNode?function(n){var e;return n==null||(e=n.getRootNode)===null||e===void 0?void 0:e.call(n)}:function(n){return n==null?void 0:n.ownerDocument},ne=function n(e,t){var a;t===void 0&&(t=!0);var o=e==null||(a=e.getAttribute)===null||a===void 0?void 0:a.call(e,"inert"),s=o===""||o==="true",r=s||t&&e&&n(e.parentNode);return r},vt=function(e){var t,a=e==null||(t=e.getAttribute)===null||t===void 0?void 0:t.call(e,"contenteditable");return a===""||a==="true"},Be=function(e,t,a){if(ne(e))return[];var o=Array.prototype.slice.apply(e.querySelectorAll(te));return t&&Z.call(e,te)&&o.unshift(e),o=o.filter(a),o},Me=function n(e,t,a){for(var o=[],s=Array.from(e);s.length;){var r=s.shift();if(!ne(r,!1))if(r.tagName==="SLOT"){var d=r.assignedElements(),u=d.length?d:r.children,b=n(u,!0,a);a.flatten?o.push.apply(o,b):o.push({scopeParent:r,candidates:b})}else{var m=Z.call(r,te);m&&a.filter(r)&&(t||!e.includes(r))&&o.push(r);var f=r.shadowRoot||typeof a.getShadowRoot=="function"&&a.getShadowRoot(r),E=!ne(f,!1)&&(!a.shadowRootFilter||a.shadowRootFilter(r));if(f&&E){var w=n(f===!0?r.children:f.children,!0,a);a.flatten?o.push.apply(o,w):o.push({scopeParent:r,candidates:w})}else s.unshift.apply(s,r.children)}}return o},Ae=function(e,t){return e.tabIndex<0&&(t||/^(AUDIO|VIDEO|DETAILS)$/.test(e.tagName)||vt(e))&&isNaN(parseInt(e.getAttribute("tabindex"),10))?0:e.tabIndex},ft=function(e,t){return e.tabIndex===t.tabIndex?e.documentOrder-t.documentOrder:e.tabIndex-t.tabIndex},Ve=function(e){return e.tagName==="INPUT"},pt=function(e){return Ve(e)&&e.type==="hidden"},ht=function(e){var t=e.tagName==="DETAILS"&&Array.prototype.slice.apply(e.children).some(function(a){return a.tagName==="SUMMARY"});return t},mt=function(e,t){for(var a=0;a<e.length;a++)if(e[a].checked&&e[a].form===t)return e[a]},bt=function(e){if(!e.name)return!0;var t=e.form||ae(e),a=function(d){return t.querySelectorAll('input[type="radio"][name="'+d+'"]')},o;if(typeof window<"u"&&typeof window.CSS<"u"&&typeof window.CSS.escape=="function")o=a(window.CSS.escape(e.name));else try{o=a(e.name)}catch(r){return console.error("Looks like you have a radio button with a name attribute containing invalid CSS selector characters and need the CSS.escape polyfill: %s",r.message),!1}var s=mt(o,e.form);return!s||s===e},gt=function(e){return Ve(e)&&e.type==="radio"},wt=function(e){return gt(e)&&!bt(e)},yt=function(e){var t,a=e&&ae(e),o=(t=a)===null||t===void 0?void 0:t.host,s=!1;if(a&&a!==e){var r,d,u;for(s=!!((r=o)!==null&&r!==void 0&&(d=r.ownerDocument)!==null&&d!==void 0&&d.contains(o)||e!=null&&(u=e.ownerDocument)!==null&&u!==void 0&&u.contains(e));!s&&o;){var b,m,f;a=ae(o),o=(b=a)===null||b===void 0?void 0:b.host,s=!!((m=o)!==null&&m!==void 0&&(f=m.ownerDocument)!==null&&f!==void 0&&f.contains(o))}}return s},ve=function(e){var t=e.getBoundingClientRect(),a=t.width,o=t.height;return a===0&&o===0},_t=function(e,t){var a=t.displayCheck,o=t.getShadowRoot;if(getComputedStyle(e).visibility==="hidden")return!0;var s=Z.call(e,"details>summary:first-of-type"),r=s?e.parentElement:e;if(Z.call(r,"details:not([open]) *"))return!0;if(!a||a==="full"||a==="legacy-full"){if(typeof o=="function"){for(var d=e;e;){var u=e.parentElement,b=ae(e);if(u&&!u.shadowRoot&&o(u)===!0)return ve(e);e.assignedSlot?e=e.assignedSlot:!u&&b!==e.ownerDocument?e=b.host:e=u}e=d}if(yt(e))return!e.getClientRects().length;if(a!=="legacy-full")return!0}else if(a==="non-zero-area")return ve(e);return!1},xt=function(e){if(/^(INPUT|BUTTON|SELECT|TEXTAREA)$/.test(e.tagName))for(var t=e.parentElement;t;){if(t.tagName==="FIELDSET"&&t.disabled){for(var a=0;a<t.children.length;a++){var o=t.children.item(a);if(o.tagName==="LEGEND")return Z.call(t,"fieldset[disabled] *")?!0:!o.contains(e)}return!0}t=t.parentElement}return!1},re=function(e,t){return!(t.disabled||ne(t)||pt(t)||_t(t,e)||ht(t)||xt(t))},le=function(e,t){return!(wt(t)||Ae(t)<0||!re(e,t))},Ct=function(e){var t=parseInt(e.getAttribute("tabindex"),10);return!!(isNaN(t)||t>=0)},St=function n(e){var t=[],a=[];return e.forEach(function(o,s){var r=!!o.scopeParent,d=r?o.scopeParent:o,u=Ae(d,r),b=r?n(o.candidates):d;u===0?r?t.push.apply(t,b):t.push(d):a.push({documentOrder:s,tabIndex:u,item:o,isScope:r,content:b})}),a.sort(ft).reduce(function(o,s){return s.isScope?o.push.apply(o,s.content):o.push(s.content),o},[]).concat(t)},kt=function(e,t){t=t||{};var a;return t.getShadowRoot?a=Me([e],t.includeContainer,{filter:le.bind(null,t),flatten:!1,getShadowRoot:t.getShadowRoot,shadowRootFilter:Ct}):a=Be(e,t.includeContainer,le.bind(null,t)),St(a)},Tt=function(e,t){t=t||{};var a;return t.getShadowRoot?a=Me([e],t.includeContainer,{filter:re.bind(null,t),flatten:!0,getShadowRoot:t.getShadowRoot}):a=Be(e,t.includeContainer,re.bind(null,t)),a},X=function(e,t){if(t=t||{},!e)throw new Error("No node provided");return Z.call(e,te)===!1?!1:le(t,e)},Ft=Ee.concat("iframe").join(","),fe=function(e,t){if(t=t||{},!e)throw new Error("No node provided");return Z.call(e,Ft)===!1?!1:re(t,e)};/*!
diff --git a/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js b/_nuxt/AppSidebarLayout.vue.6sfT1On1.js
similarity index 90%
rename from _nuxt/AppSidebarLayout.vue.aU-pbmdL.js
rename to _nuxt/AppSidebarLayout.vue.6sfT1On1.js
index 5f5dbf5197..7690cc259f 100644
--- a/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js
+++ b/_nuxt/AppSidebarLayout.vue.6sfT1On1.js
@@ -1 +1 @@
-import{d as s,b as o,c as r,e as a,E as l,a0 as t,n as c}from"./entry.49ZHHvLB.js";const i={class:"docs-main rpl-col-12 rpl-col-9-l"},n={class:"docs-content"},b=s({__name:"AppSidebarLayout",props:{hideMobileSidebar:{type:Boolean,default:!1}},setup(d){return(e,p)=>(o(),r("div",{class:c({"rpl-grid":!0,"docs-hide-mobile-sidebar":e.hideMobileSidebar})},[a("aside",{class:"docs-sidebar rpl-col-12 rpl-col-3-l",style:t({"--local-vertical-nav-background":"transparent","--local-vertical-nav-item-gutter":"var(--rpl-sp-3)","--local-vertical-nav-hover-bg":"var(--rpl-clr-neutral-100)"})},[l(e.$slots,"aside")],4),a("main",i,[l(e.$slots,"pageHeader"),a("div",n,[l(e.$slots,"default")])])],2))}});export{b as _};
+import{d as s,b as o,c as r,e as a,E as l,a0 as t,n as c}from"./entry.Do8xnxHS.js";const i={class:"docs-main rpl-col-12 rpl-col-9-l"},n={class:"docs-content"},b=s({__name:"AppSidebarLayout",props:{hideMobileSidebar:{type:Boolean,default:!1}},setup(d){return(e,p)=>(o(),r("div",{class:c({"rpl-grid":!0,"docs-hide-mobile-sidebar":e.hideMobileSidebar})},[a("aside",{class:"docs-sidebar rpl-col-12 rpl-col-3-l",style:t({"--local-vertical-nav-background":"transparent","--local-vertical-nav-item-gutter":"var(--rpl-sp-3)","--local-vertical-nav-hover-bg":"var(--rpl-clr-neutral-100)"})},[l(e.$slots,"aside")],4),a("main",i,[l(e.$slots,"pageHeader"),a("div",n,[l(e.$slots,"default")])])],2))}});export{b as _};
diff --git a/_nuxt/ContentDoc.SXcfJrUW.js b/_nuxt/ContentDoc.zyRxlzIB.js
similarity index 83%
rename from _nuxt/ContentDoc.SXcfJrUW.js
rename to _nuxt/ContentDoc.zyRxlzIB.js
index 6ecf4dabdd..8b20d3c32c 100644
--- a/_nuxt/ContentDoc.SXcfJrUW.js
+++ b/_nuxt/ContentDoc.zyRxlzIB.js
@@ -1 +1 @@
-import{d as C,k as g,aq as v,ao as D,m as w,O as o}from"./entry.49ZHHvLB.js";import{u as d}from"./head.UNWUUq-8.js";import _ from"./ContentRenderer.CgXd06ZK.js";import q from"./ContentQuery.EOcFbojz.js";import"./ContentRendererMarkdown.vue.cUVXlmIq.js";import"./asyncData.6xpne1x0.js";const S=C({name:"ContentDoc",props:{tag:{type:String,required:!1,default:"div"},excerpt:{type:Boolean,default:!1},path:{type:String,required:!1,default:void 0},query:{type:Object,required:!1,default:void 0},head:{type:Boolean,required:!1,default:void 0}},render(f){const{contentHead:c}=g().public.content,e=v(),{tag:m,excerpt:a,path:s,query:i,head:r}=f,u=r===void 0?c:r,l={...i||{},path:s||(i==null?void 0:i.path)||D(w().path),find:"one"},h=(t,n)=>o("pre",null,JSON.stringify({message:"You should use slots with <ContentDoc>",slot:t,data:n},null,2));return o(q,l,{default:e!=null&&e.default?({data:t,refresh:n,isPartial:y})=>{var p;return u&&d(t),(p=e.default)==null?void 0:p.call(e,{doc:t,refresh:n,isPartial:y,excerpt:a,...this.$attrs})}:({data:t})=>(u&&d(t),o(_,{value:t,excerpt:a,tag:m,...this.$attrs},{empty:n=>e!=null&&e.empty?e.empty(n):h("default",t)})),empty:t=>{var n;return((n=e==null?void 0:e.empty)==null?void 0:n.call(e,t))||o("p",null,"Document is empty, overwrite this content with #empty slot in <ContentDoc>.")},"not-found":t=>{var n;return((n=e==null?void 0:e["not-found"])==null?void 0:n.call(e,t))||o("p",null,"Document not found, overwrite this content with #not-found slot in <ContentDoc>.")}})}}),B=S;export{B as default};
+import{d as C,k as g,aq as v,ao as D,m as w,O as o}from"./entry.Do8xnxHS.js";import{u as d}from"./head.i1ysHgjT.js";import _ from"./ContentRenderer.CHEOl3j3.js";import q from"./ContentQuery.OgHSivmp.js";import"./ContentRendererMarkdown.vue.sDq3Jws6.js";import"./asyncData.mgwg8A3s.js";const S=C({name:"ContentDoc",props:{tag:{type:String,required:!1,default:"div"},excerpt:{type:Boolean,default:!1},path:{type:String,required:!1,default:void 0},query:{type:Object,required:!1,default:void 0},head:{type:Boolean,required:!1,default:void 0}},render(f){const{contentHead:c}=g().public.content,e=v(),{tag:m,excerpt:a,path:s,query:i,head:r}=f,u=r===void 0?c:r,l={...i||{},path:s||(i==null?void 0:i.path)||D(w().path),find:"one"},h=(t,n)=>o("pre",null,JSON.stringify({message:"You should use slots with <ContentDoc>",slot:t,data:n},null,2));return o(q,l,{default:e!=null&&e.default?({data:t,refresh:n,isPartial:y})=>{var p;return u&&d(t),(p=e.default)==null?void 0:p.call(e,{doc:t,refresh:n,isPartial:y,excerpt:a,...this.$attrs})}:({data:t})=>(u&&d(t),o(_,{value:t,excerpt:a,tag:m,...this.$attrs},{empty:n=>e!=null&&e.empty?e.empty(n):h("default",t)})),empty:t=>{var n;return((n=e==null?void 0:e.empty)==null?void 0:n.call(e,t))||o("p",null,"Document is empty, overwrite this content with #empty slot in <ContentDoc>.")},"not-found":t=>{var n;return((n=e==null?void 0:e["not-found"])==null?void 0:n.call(e,t))||o("p",null,"Document not found, overwrite this content with #not-found slot in <ContentDoc>.")}})}}),B=S;export{B as default};
diff --git a/_nuxt/ContentList.UlDpyDEh.js b/_nuxt/ContentList.ux5QQJBH.js
similarity index 85%
rename from _nuxt/ContentList.UlDpyDEh.js
rename to _nuxt/ContentList.ux5QQJBH.js
index e3d3e5c02c..fc15c70ea9 100644
--- a/_nuxt/ContentList.UlDpyDEh.js
+++ b/_nuxt/ContentList.ux5QQJBH.js
@@ -1 +1 @@
-import n from"./ContentQuery.EOcFbojz.js";import{d as c,aq as l,O as f}from"./entry.49ZHHvLB.js";import"./asyncData.6xpne1x0.js";const r=(u,t)=>f("pre",null,JSON.stringify({message:"You should use slots with <ContentList>",slot:u,data:t},null,2)),h=c({name:"ContentList",props:{path:{type:String,required:!1,default:void 0},query:{type:Object,required:!1,default:void 0}},render(u){const t=l(),{path:p,query:a}=u,d={...a||{},path:p||(a==null?void 0:a.path)||"/"};return f(n,d,{default:t!=null&&t.default?({data:e,refresh:o,isPartial:m})=>t.default({list:e,refresh:o,isPartial:m,...this.$attrs}):e=>r("default",e.data),empty:e=>t!=null&&t.empty?t.empty(e):r("default",e==null?void 0:e.data),"not-found":e=>{var o;return t!=null&&t["not-found"]?(o=t==null?void 0:t["not-found"])==null?void 0:o.call(t,e):r("not-found",e==null?void 0:e.data)}})}}),q=h;export{q as default};
+import n from"./ContentQuery.OgHSivmp.js";import{d as c,aq as l,O as f}from"./entry.Do8xnxHS.js";import"./asyncData.mgwg8A3s.js";const r=(u,t)=>f("pre",null,JSON.stringify({message:"You should use slots with <ContentList>",slot:u,data:t},null,2)),h=c({name:"ContentList",props:{path:{type:String,required:!1,default:void 0},query:{type:Object,required:!1,default:void 0}},render(u){const t=l(),{path:p,query:a}=u,d={...a||{},path:p||(a==null?void 0:a.path)||"/"};return f(n,d,{default:t!=null&&t.default?({data:e,refresh:o,isPartial:m})=>t.default({list:e,refresh:o,isPartial:m,...this.$attrs}):e=>r("default",e.data),empty:e=>t!=null&&t.empty?t.empty(e):r("default",e==null?void 0:e.data),"not-found":e=>{var o;return t!=null&&t["not-found"]?(o=t==null?void 0:t["not-found"])==null?void 0:o.call(t,e):r("not-found",e==null?void 0:e.data)}})}}),q=h;export{q as default};
diff --git a/_nuxt/ContentNavigation.hJs7QjUE.js b/_nuxt/ContentNavigation.CfUahY4n.js
similarity index 85%
rename from _nuxt/ContentNavigation.hJs7QjUE.js
rename to _nuxt/ContentNavigation.CfUahY4n.js
index f6888f1888..07610592f7 100644
--- a/_nuxt/ContentNavigation.hJs7QjUE.js
+++ b/_nuxt/ContentNavigation.CfUahY4n.js
@@ -1 +1 @@
-import{u as d}from"./asyncData.6xpne1x0.js";import{d as l,aE as f,J as v,l as p,V as m,aD as g,aF as h,aq as _,O as s}from"./entry.49ZHHvLB.js";import{_ as y}from"./nuxt-link.jgZZZkZ5.js";const q=l({name:"ContentNavigation",props:{query:{type:Object,required:!1,default:void 0}},async setup(i){const{query:t}=f(i),n=v(()=>{var a;return typeof((a=t.value)==null?void 0:a.params)=="function"?t.value.params():t.value});if(!n.value&&p("dd-navigation").value){const{navigation:a}=m();return{navigation:a}}const{data:o}=await d(`content-navigation-${h(n.value)}`,()=>g(n.value));return{navigation:o}},render(i){const t=_(),{navigation:n}=i,o=e=>s(y,{to:e._path},()=>e.title),a=(e,u)=>s("ul",u?{"data-level":u}:null,e.map(r=>r.children?s("li",null,[o(r),a(r.children,u+1)]):s("li",null,o(r)))),c=e=>a(e,0);return t!=null&&t.default?t.default({navigation:n,...this.$attrs}):c(n)}}),D=q;export{D as default};
+import{u as d}from"./asyncData.mgwg8A3s.js";import{d as l,aE as f,J as v,l as p,V as m,aD as g,aF as h,aq as _,O as s}from"./entry.Do8xnxHS.js";import{_ as y}from"./nuxt-link.sM27-MT7.js";const q=l({name:"ContentNavigation",props:{query:{type:Object,required:!1,default:void 0}},async setup(i){const{query:t}=f(i),n=v(()=>{var a;return typeof((a=t.value)==null?void 0:a.params)=="function"?t.value.params():t.value});if(!n.value&&p("dd-navigation").value){const{navigation:a}=m();return{navigation:a}}const{data:o}=await d(`content-navigation-${h(n.value)}`,()=>g(n.value));return{navigation:o}},render(i){const t=_(),{navigation:n}=i,o=e=>s(y,{to:e._path},()=>e.title),a=(e,u)=>s("ul",u?{"data-level":u}:null,e.map(r=>r.children?s("li",null,[o(r),a(r.children,u+1)]):s("li",null,o(r)))),c=e=>a(e,0);return t!=null&&t.default?t.default({navigation:n,...this.$attrs}):c(n)}}),D=q;export{D as default};
diff --git a/_nuxt/ContentQuery.EOcFbojz.js b/_nuxt/ContentQuery.OgHSivmp.js
similarity index 92%
rename from _nuxt/ContentQuery.EOcFbojz.js
rename to _nuxt/ContentQuery.OgHSivmp.js
index 70366426a0..d064ef578a 100644
--- a/_nuxt/ContentQuery.EOcFbojz.js
+++ b/_nuxt/ContentQuery.OgHSivmp.js
@@ -1 +1 @@
-import{u as g}from"./asyncData.6xpne1x0.js";import{d as C,aE as S,J as b,k,Z as O,q as m,aF as _,aq as A,O as N}from"./entry.49ZHHvLB.js";const Q=C({name:"ContentQuery",props:{path:{type:String,required:!1,default:void 0},only:{type:Array,required:!1,default:void 0},without:{type:Array,required:!1,default:void 0},where:{type:Object,required:!1,default:void 0},sort:{type:Object,required:!1,default:void 0},limit:{type:Number,required:!1,default:void 0},skip:{type:Number,required:!1,default:void 0},locale:{type:String,required:!1,default:void 0},find:{type:String,required:!1,default:void 0}},async setup(a){const{path:t,only:r,without:o,where:u,sort:l,limit:d,skip:f,locale:s,find:h}=S(a),y=b(()=>{var e;return(e=t.value)==null?void 0:e.includes("/_")}),p=!k().public.content.experimental.advanceQuery;O(()=>a,()=>n(),{deep:!0});const i=e=>p?e!=null&&e.surround?e.surround:e!=null&&e._id||Array.isArray(e)?e:e==null?void 0:e.result:e.result,{data:v,refresh:n}=await g(`content-query-${_(a)}`,()=>{let e;return t.value?e=m(t.value):e=m(),r.value&&(e=e.only(r.value)),o.value&&(e=e.without(o.value)),u.value&&(e=e.where(u.value)),l.value&&(e=e.sort(l.value)),d.value&&(e=e.limit(d.value)),f.value&&(e=e.skip(f.value)),s.value&&(e=e.where({_locale:s.value})),h.value==="one"?e.findOne().then(i):h.value==="surround"?t.value?p?e.findSurround(t.value):e.withSurround(t.value).findOne().then(i):(console.warn("[Content] Surround queries requires `path` prop to be set."),console.warn("[Content] Query without `path` will return regular `find()` results."),e.find().then(i)):e.find().then(i)});return{isPartial:y,data:v,refresh:n}},render(a){var c;const t=A(),{data:r,refresh:o,isPartial:u,path:l,only:d,without:f,where:s,sort:h,limit:y,skip:p,locale:i,find:v}=a,n={path:l,only:d,without:f,where:s,sort:h,limit:y,skip:p,locale:i,find:v};if(n.find==="one"){if(!r&&(t!=null&&t["not-found"]))return t["not-found"]({props:n,...this.$attrs});if(t!=null&&t.empty&&(r==null?void 0:r._type)==="markdown"&&!((c=r==null?void 0:r.body)!=null&&c.children.length))return t.empty({props:n,...this.$attrs})}else if((!r||!r.length)&&t!=null&&t["not-found"])return t["not-found"]({props:n,...this.$attrs});return t!=null&&t.default?t.default({data:r,refresh:o,isPartial:u,props:n,...this.$attrs}):((w,q)=>N("pre",null,JSON.stringify({message:"You should use slots with <ContentQuery>!",slot:w,data:q},null,2)))("default",{data:r,props:n,isPartial:u})}}),j=Q;export{j as default};
+import{u as g}from"./asyncData.mgwg8A3s.js";import{d as C,aE as S,J as b,k,Z as O,q as m,aF as _,aq as A,O as N}from"./entry.Do8xnxHS.js";const Q=C({name:"ContentQuery",props:{path:{type:String,required:!1,default:void 0},only:{type:Array,required:!1,default:void 0},without:{type:Array,required:!1,default:void 0},where:{type:Object,required:!1,default:void 0},sort:{type:Object,required:!1,default:void 0},limit:{type:Number,required:!1,default:void 0},skip:{type:Number,required:!1,default:void 0},locale:{type:String,required:!1,default:void 0},find:{type:String,required:!1,default:void 0}},async setup(a){const{path:t,only:r,without:o,where:u,sort:l,limit:d,skip:f,locale:s,find:h}=S(a),y=b(()=>{var e;return(e=t.value)==null?void 0:e.includes("/_")}),p=!k().public.content.experimental.advanceQuery;O(()=>a,()=>n(),{deep:!0});const i=e=>p?e!=null&&e.surround?e.surround:e!=null&&e._id||Array.isArray(e)?e:e==null?void 0:e.result:e.result,{data:v,refresh:n}=await g(`content-query-${_(a)}`,()=>{let e;return t.value?e=m(t.value):e=m(),r.value&&(e=e.only(r.value)),o.value&&(e=e.without(o.value)),u.value&&(e=e.where(u.value)),l.value&&(e=e.sort(l.value)),d.value&&(e=e.limit(d.value)),f.value&&(e=e.skip(f.value)),s.value&&(e=e.where({_locale:s.value})),h.value==="one"?e.findOne().then(i):h.value==="surround"?t.value?p?e.findSurround(t.value):e.withSurround(t.value).findOne().then(i):(console.warn("[Content] Surround queries requires `path` prop to be set."),console.warn("[Content] Query without `path` will return regular `find()` results."),e.find().then(i)):e.find().then(i)});return{isPartial:y,data:v,refresh:n}},render(a){var c;const t=A(),{data:r,refresh:o,isPartial:u,path:l,only:d,without:f,where:s,sort:h,limit:y,skip:p,locale:i,find:v}=a,n={path:l,only:d,without:f,where:s,sort:h,limit:y,skip:p,locale:i,find:v};if(n.find==="one"){if(!r&&(t!=null&&t["not-found"]))return t["not-found"]({props:n,...this.$attrs});if(t!=null&&t.empty&&(r==null?void 0:r._type)==="markdown"&&!((c=r==null?void 0:r.body)!=null&&c.children.length))return t.empty({props:n,...this.$attrs})}else if((!r||!r.length)&&t!=null&&t["not-found"])return t["not-found"]({props:n,...this.$attrs});return t!=null&&t.default?t.default({data:r,refresh:o,isPartial:u,props:n,...this.$attrs}):((w,q)=>N("pre",null,JSON.stringify({message:"You should use slots with <ContentQuery>!",slot:w,data:q},null,2)))("default",{data:r,props:n,isPartial:u})}}),j=Q;export{j as default};
diff --git a/_nuxt/ContentRenderer.CgXd06ZK.js b/_nuxt/ContentRenderer.CHEOl3j3.js
similarity index 89%
rename from _nuxt/ContentRenderer.CgXd06ZK.js
rename to _nuxt/ContentRenderer.CHEOl3j3.js
index 60bf21c874..fe4da3cb56 100644
--- a/_nuxt/ContentRenderer.CgXd06ZK.js
+++ b/_nuxt/ContentRenderer.CHEOl3j3.js
@@ -1 +1 @@
-import{_ as l}from"./ContentRendererMarkdown.vue.cUVXlmIq.js";import{d as o,Z as s,aq as d,O as f}from"./entry.49ZHHvLB.js";const y=o({name:"ContentRenderer",props:{value:{type:Object,required:!1,default:()=>({})},excerpt:{type:Boolean,default:!1},tag:{type:String,default:"div"}},setup(t){s(()=>t.excerpt,n=>{var e,a,u;n&&!((e=t.value)!=null&&e.excerpt)&&(console.warn(`No excerpt found for document content/${(a=t==null?void 0:t.value)==null?void 0:a._path}.${(u=t==null?void 0:t.value)==null?void 0:u._extension}!`),console.warn("Make sure to use <!--more--> in your content if you want to use excerpt feature."))},{immediate:!0})},render(t){var i,c;const n=d(),{value:e,excerpt:a,tag:u}=t,r=a?e==null?void 0:e.excerpt:e==null?void 0:e.body;return!((i=r==null?void 0:r.children)!=null&&i.length)&&(n!=null&&n.empty)?n.empty({value:e,excerpt:a,tag:u,...this.$attrs}):n!=null&&n.default?n.default({value:e,excerpt:a,tag:u,...this.$attrs}):(r==null?void 0:r.type)==="root"&&((c=r==null?void 0:r.children)!=null&&c.length)?f(l,{value:e,excerpt:a,tag:u,...this.$attrs}):f("pre",null,JSON.stringify({message:"You should use slots with <ContentRenderer>",value:e,excerpt:a,tag:u},null,2))}});export{y as default};
+import{_ as l}from"./ContentRendererMarkdown.vue.sDq3Jws6.js";import{d as o,Z as s,aq as d,O as f}from"./entry.Do8xnxHS.js";const y=o({name:"ContentRenderer",props:{value:{type:Object,required:!1,default:()=>({})},excerpt:{type:Boolean,default:!1},tag:{type:String,default:"div"}},setup(t){s(()=>t.excerpt,n=>{var e,a,u;n&&!((e=t.value)!=null&&e.excerpt)&&(console.warn(`No excerpt found for document content/${(a=t==null?void 0:t.value)==null?void 0:a._path}.${(u=t==null?void 0:t.value)==null?void 0:u._extension}!`),console.warn("Make sure to use <!--more--> in your content if you want to use excerpt feature."))},{immediate:!0})},render(t){var i,c;const n=d(),{value:e,excerpt:a,tag:u}=t,r=a?e==null?void 0:e.excerpt:e==null?void 0:e.body;return!((i=r==null?void 0:r.children)!=null&&i.length)&&(n!=null&&n.empty)?n.empty({value:e,excerpt:a,tag:u,...this.$attrs}):n!=null&&n.default?n.default({value:e,excerpt:a,tag:u,...this.$attrs}):(r==null?void 0:r.type)==="root"&&((c=r==null?void 0:r.children)!=null&&c.length)?f(l,{value:e,excerpt:a,tag:u,...this.$attrs}):f("pre",null,JSON.stringify({message:"You should use slots with <ContentRenderer>",value:e,excerpt:a,tag:u},null,2))}});export{y as default};
diff --git a/_nuxt/ContentRendererMarkdown.jF369Aie.js b/_nuxt/ContentRendererMarkdown.jF369Aie.js
deleted file mode 100644
index 53bc69f8ee..0000000000
--- a/_nuxt/ContentRendererMarkdown.jF369Aie.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as m}from"./ContentRendererMarkdown.vue.cUVXlmIq.js";import"./entry.49ZHHvLB.js";export{m as default};
diff --git a/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js b/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js
similarity index 99%
rename from _nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js
rename to _nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js
index 9345e6ab6a..50c5bae95e 100644
--- a/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js
+++ b/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js
@@ -1 +1 @@
-import{d as z,k as J,B as G,J as x,O as E,ai as Q,ar as I,as as w,at as nn,m as ln,au as en,av as on,b as tn,G as rn,N as an}from"./entry.49ZHHvLB.js";class S{constructor(l,o,t){this.property=l,this.normal=o,t&&(this.space=t)}}S.prototype.property={};S.prototype.normal={};S.prototype.space=null;function j(n,l){const o={},t={};let r=-1;for(;++r<n.length;)Object.assign(o,n[r].property),Object.assign(t,n[r].normal);return new S(o,t,l)}function D(n){return n.toLowerCase()}class f{constructor(l,o){this.property=l,this.attribute=o}}f.prototype.space=null;f.prototype.boolean=!1;f.prototype.booleanish=!1;f.prototype.overloadedBoolean=!1;f.prototype.number=!1;f.prototype.commaSeparated=!1;f.prototype.spaceSeparated=!1;f.prototype.commaOrSpaceSeparated=!1;f.prototype.mustUseProperty=!1;f.prototype.defined=!1;let un=0;const u=v(),g=v(),_=v(),e=v(),p=v(),k=v(),m=v();function v(){return 2**++un}const L=Object.freeze(Object.defineProperty({__proto__:null,boolean:u,booleanish:g,commaOrSpaceSeparated:m,commaSeparated:k,number:e,overloadedBoolean:_,spaceSeparated:p},Symbol.toStringTag,{value:"Module"})),O=Object.keys(L);class R extends f{constructor(l,o,t,r){let a=-1;if(super(l,o),B(this,"space",r),typeof t=="number")for(;++a<O.length;){const i=O[a];B(this,O[a],(t&L[i])===L[i])}}}R.prototype.defined=!0;function B(n,l,o){o&&(n[l]=o)}const sn={}.hasOwnProperty;function C(n){const l={},o={};let t;for(t in n.properties)if(sn.call(n.properties,t)){const r=n.properties[t],a=new R(t,n.transform(n.attributes||{},t),r,n.space);n.mustUseProperty&&n.mustUseProperty.includes(t)&&(a.mustUseProperty=!0),l[t]=a,o[D(t)]=t,o[D(a.attribute)]=t}return new S(l,o,n.space)}const F=C({space:"xlink",transform(n,l){return"xlink:"+l.slice(5).toLowerCase()},properties:{xLinkActuate:null,xLinkArcRole:null,xLinkHref:null,xLinkRole:null,xLinkShow:null,xLinkTitle:null,xLinkType:null}}),H=C({space:"xml",transform(n,l){return"xml:"+l.slice(3).toLowerCase()},properties:{xmlLang:null,xmlBase:null,xmlSpace:null}});function V(n,l){return l in n?n[l]:l}function N(n,l){return V(n,l.toLowerCase())}const q=C({space:"xmlns",attributes:{xmlnsxlink:"xmlns:xlink"},transform:N,properties:{xmlns:null,xmlnsXLink:null}}),W=C({transform(n,l){return l==="role"?l:"aria-"+l.slice(4).toLowerCase()},properties:{ariaActiveDescendant:null,ariaAtomic:g,ariaAutoComplete:null,ariaBusy:g,ariaChecked:g,ariaColCount:e,ariaColIndex:e,ariaColSpan:e,ariaControls:p,ariaCurrent:null,ariaDescribedBy:p,ariaDetails:null,ariaDisabled:g,ariaDropEffect:p,ariaErrorMessage:null,ariaExpanded:g,ariaFlowTo:p,ariaGrabbed:g,ariaHasPopup:null,ariaHidden:g,ariaInvalid:null,ariaKeyShortcuts:null,ariaLabel:null,ariaLabelledBy:p,ariaLevel:e,ariaLive:null,ariaModal:g,ariaMultiLine:g,ariaMultiSelectable:g,ariaOrientation:null,ariaOwns:p,ariaPlaceholder:null,ariaPosInSet:e,ariaPressed:g,ariaReadOnly:g,ariaRelevant:null,ariaRequired:g,ariaRoleDescription:p,ariaRowCount:e,ariaRowIndex:e,ariaRowSpan:e,ariaSelected:g,ariaSetSize:e,ariaSort:null,ariaValueMax:e,ariaValueMin:e,ariaValueNow:e,ariaValueText:null,role:null}}),cn=C({space:"html",attributes:{acceptcharset:"accept-charset",classname:"class",htmlfor:"for",httpequiv:"http-equiv"},transform:N,mustUseProperty:["checked","multiple","muted","selected"],properties:{abbr:null,accept:k,acceptCharset:p,accessKey:p,action:null,allow:null,allowFullScreen:u,allowPaymentRequest:u,allowUserMedia:u,alt:null,as:null,async:u,autoCapitalize:null,autoComplete:p,autoFocus:u,autoPlay:u,blocking:p,capture:null,charSet:null,checked:u,cite:null,className:p,cols:e,colSpan:null,content:null,contentEditable:g,controls:u,controlsList:p,coords:e|k,crossOrigin:null,data:null,dateTime:null,decoding:null,default:u,defer:u,dir:null,dirName:null,disabled:u,download:_,draggable:g,encType:null,enterKeyHint:null,fetchPriority:null,form:null,formAction:null,formEncType:null,formMethod:null,formNoValidate:u,formTarget:null,headers:p,height:e,hidden:u,high:e,href:null,hrefLang:null,htmlFor:p,httpEquiv:p,id:null,imageSizes:null,imageSrcSet:null,inert:u,inputMode:null,integrity:null,is:null,isMap:u,itemId:null,itemProp:p,itemRef:p,itemScope:u,itemType:p,kind:null,label:null,lang:null,language:null,list:null,loading:null,loop:u,low:e,manifest:null,max:null,maxLength:e,media:null,method:null,min:null,minLength:e,multiple:u,muted:u,name:null,nonce:null,noModule:u,noValidate:u,onAbort:null,onAfterPrint:null,onAuxClick:null,onBeforeMatch:null,onBeforePrint:null,onBeforeToggle:null,onBeforeUnload:null,onBlur:null,onCancel:null,onCanPlay:null,onCanPlayThrough:null,onChange:null,onClick:null,onClose:null,onContextLost:null,onContextMenu:null,onContextRestored:null,onCopy:null,onCueChange:null,onCut:null,onDblClick:null,onDrag:null,onDragEnd:null,onDragEnter:null,onDragExit:null,onDragLeave:null,onDragOver:null,onDragStart:null,onDrop:null,onDurationChange:null,onEmptied:null,onEnded:null,onError:null,onFocus:null,onFormData:null,onHashChange:null,onInput:null,onInvalid:null,onKeyDown:null,onKeyPress:null,onKeyUp:null,onLanguageChange:null,onLoad:null,onLoadedData:null,onLoadedMetadata:null,onLoadEnd:null,onLoadStart:null,onMessage:null,onMessageError:null,onMouseDown:null,onMouseEnter:null,onMouseLeave:null,onMouseMove:null,onMouseOut:null,onMouseOver:null,onMouseUp:null,onOffline:null,onOnline:null,onPageHide:null,onPageShow:null,onPaste:null,onPause:null,onPlay:null,onPlaying:null,onPopState:null,onProgress:null,onRateChange:null,onRejectionHandled:null,onReset:null,onResize:null,onScroll:null,onScrollEnd:null,onSecurityPolicyViolation:null,onSeeked:null,onSeeking:null,onSelect:null,onSlotChange:null,onStalled:null,onStorage:null,onSubmit:null,onSuspend:null,onTimeUpdate:null,onToggle:null,onUnhandledRejection:null,onUnload:null,onVolumeChange:null,onWaiting:null,onWheel:null,open:u,optimum:e,pattern:null,ping:p,placeholder:null,playsInline:u,popover:null,popoverTarget:null,popoverTargetAction:null,poster:null,preload:null,readOnly:u,referrerPolicy:null,rel:p,required:u,reversed:u,rows:e,rowSpan:e,sandbox:p,scope:null,scoped:u,seamless:u,selected:u,shadowRootDelegatesFocus:u,shadowRootMode:null,shape:null,size:e,sizes:null,slot:null,span:e,spellCheck:g,src:null,srcDoc:null,srcLang:null,srcSet:null,start:e,step:null,style:null,tabIndex:e,target:null,title:null,translate:null,type:null,typeMustMatch:u,useMap:null,value:g,width:e,wrap:null,align:null,aLink:null,archive:p,axis:null,background:null,bgColor:null,border:e,borderColor:null,bottomMargin:e,cellPadding:null,cellSpacing:null,char:null,charOff:null,classId:null,clear:null,code:null,codeBase:null,codeType:null,color:null,compact:u,declare:u,event:null,face:null,frame:null,frameBorder:null,hSpace:e,leftMargin:e,link:null,longDesc:null,lowSrc:null,marginHeight:e,marginWidth:e,noResize:u,noHref:u,noShade:u,noWrap:u,object:null,profile:null,prompt:null,rev:null,rightMargin:e,rules:null,scheme:null,scrolling:g,standby:null,summary:null,text:null,topMargin:e,valueType:null,version:null,vAlign:null,vLink:null,vSpace:e,allowTransparency:null,autoCorrect:null,autoSave:null,disablePictureInPicture:u,disableRemotePlayback:u,prefix:null,property:null,results:e,security:null,unselectable:null}}),pn=C({space:"svg",attributes:{accentHeight:"accent-height",alignmentBaseline:"alignment-baseline",arabicForm:"arabic-form",baselineShift:"baseline-shift",capHeight:"cap-height",className:"class",clipPath:"clip-path",clipRule:"clip-rule",colorInterpolation:"color-interpolation",colorInterpolationFilters:"color-interpolation-filters",colorProfile:"color-profile",colorRendering:"color-rendering",crossOrigin:"crossorigin",dataType:"datatype",dominantBaseline:"dominant-baseline",enableBackground:"enable-background",fillOpacity:"fill-opacity",fillRule:"fill-rule",floodColor:"flood-color",floodOpacity:"flood-opacity",fontFamily:"font-family",fontSize:"font-size",fontSizeAdjust:"font-size-adjust",fontStretch:"font-stretch",fontStyle:"font-style",fontVariant:"font-variant",fontWeight:"font-weight",glyphName:"glyph-name",glyphOrientationHorizontal:"glyph-orientation-horizontal",glyphOrientationVertical:"glyph-orientation-vertical",hrefLang:"hreflang",horizAdvX:"horiz-adv-x",horizOriginX:"horiz-origin-x",horizOriginY:"horiz-origin-y",imageRendering:"image-rendering",letterSpacing:"letter-spacing",lightingColor:"lighting-color",markerEnd:"marker-end",markerMid:"marker-mid",markerStart:"marker-start",navDown:"nav-down",navDownLeft:"nav-down-left",navDownRight:"nav-down-right",navLeft:"nav-left",navNext:"nav-next",navPrev:"nav-prev",navRight:"nav-right",navUp:"nav-up",navUpLeft:"nav-up-left",navUpRight:"nav-up-right",onAbort:"onabort",onActivate:"onactivate",onAfterPrint:"onafterprint",onBeforePrint:"onbeforeprint",onBegin:"onbegin",onCancel:"oncancel",onCanPlay:"oncanplay",onCanPlayThrough:"oncanplaythrough",onChange:"onchange",onClick:"onclick",onClose:"onclose",onCopy:"oncopy",onCueChange:"oncuechange",onCut:"oncut",onDblClick:"ondblclick",onDrag:"ondrag",onDragEnd:"ondragend",onDragEnter:"ondragenter",onDragExit:"ondragexit",onDragLeave:"ondragleave",onDragOver:"ondragover",onDragStart:"ondragstart",onDrop:"ondrop",onDurationChange:"ondurationchange",onEmptied:"onemptied",onEnd:"onend",onEnded:"onended",onError:"onerror",onFocus:"onfocus",onFocusIn:"onfocusin",onFocusOut:"onfocusout",onHashChange:"onhashchange",onInput:"oninput",onInvalid:"oninvalid",onKeyDown:"onkeydown",onKeyPress:"onkeypress",onKeyUp:"onkeyup",onLoad:"onload",onLoadedData:"onloadeddata",onLoadedMetadata:"onloadedmetadata",onLoadStart:"onloadstart",onMessage:"onmessage",onMouseDown:"onmousedown",onMouseEnter:"onmouseenter",onMouseLeave:"onmouseleave",onMouseMove:"onmousemove",onMouseOut:"onmouseout",onMouseOver:"onmouseover",onMouseUp:"onmouseup",onMouseWheel:"onmousewheel",onOffline:"onoffline",onOnline:"ononline",onPageHide:"onpagehide",onPageShow:"onpageshow",onPaste:"onpaste",onPause:"onpause",onPlay:"onplay",onPlaying:"onplaying",onPopState:"onpopstate",onProgress:"onprogress",onRateChange:"onratechange",onRepeat:"onrepeat",onReset:"onreset",onResize:"onresize",onScroll:"onscroll",onSeeked:"onseeked",onSeeking:"onseeking",onSelect:"onselect",onShow:"onshow",onStalled:"onstalled",onStorage:"onstorage",onSubmit:"onsubmit",onSuspend:"onsuspend",onTimeUpdate:"ontimeupdate",onToggle:"ontoggle",onUnload:"onunload",onVolumeChange:"onvolumechange",onWaiting:"onwaiting",onZoom:"onzoom",overlinePosition:"overline-position",overlineThickness:"overline-thickness",paintOrder:"paint-order",panose1:"panose-1",pointerEvents:"pointer-events",referrerPolicy:"referrerpolicy",renderingIntent:"rendering-intent",shapeRendering:"shape-rendering",stopColor:"stop-color",stopOpacity:"stop-opacity",strikethroughPosition:"strikethrough-position",strikethroughThickness:"strikethrough-thickness",strokeDashArray:"stroke-dasharray",strokeDashOffset:"stroke-dashoffset",strokeLineCap:"stroke-linecap",strokeLineJoin:"stroke-linejoin",strokeMiterLimit:"stroke-miterlimit",strokeOpacity:"stroke-opacity",strokeWidth:"stroke-width",tabIndex:"tabindex",textAnchor:"text-anchor",textDecoration:"text-decoration",textRendering:"text-rendering",transformOrigin:"transform-origin",typeOf:"typeof",underlinePosition:"underline-position",underlineThickness:"underline-thickness",unicodeBidi:"unicode-bidi",unicodeRange:"unicode-range",unitsPerEm:"units-per-em",vAlphabetic:"v-alphabetic",vHanging:"v-hanging",vIdeographic:"v-ideographic",vMathematical:"v-mathematical",vectorEffect:"vector-effect",vertAdvY:"vert-adv-y",vertOriginX:"vert-origin-x",vertOriginY:"vert-origin-y",wordSpacing:"word-spacing",writingMode:"writing-mode",xHeight:"x-height",playbackOrder:"playbackorder",timelineBegin:"timelinebegin"},transform:V,properties:{about:m,accentHeight:e,accumulate:null,additive:null,alignmentBaseline:null,alphabetic:e,amplitude:e,arabicForm:null,ascent:e,attributeName:null,attributeType:null,azimuth:e,bandwidth:null,baselineShift:null,baseFrequency:null,baseProfile:null,bbox:null,begin:null,bias:e,by:null,calcMode:null,capHeight:e,className:p,clip:null,clipPath:null,clipPathUnits:null,clipRule:null,color:null,colorInterpolation:null,colorInterpolationFilters:null,colorProfile:null,colorRendering:null,content:null,contentScriptType:null,contentStyleType:null,crossOrigin:null,cursor:null,cx:null,cy:null,d:null,dataType:null,defaultAction:null,descent:e,diffuseConstant:e,direction:null,display:null,dur:null,divisor:e,dominantBaseline:null,download:u,dx:null,dy:null,edgeMode:null,editable:null,elevation:e,enableBackground:null,end:null,event:null,exponent:e,externalResourcesRequired:null,fill:null,fillOpacity:e,fillRule:null,filter:null,filterRes:null,filterUnits:null,floodColor:null,floodOpacity:null,focusable:null,focusHighlight:null,fontFamily:null,fontSize:null,fontSizeAdjust:null,fontStretch:null,fontStyle:null,fontVariant:null,fontWeight:null,format:null,fr:null,from:null,fx:null,fy:null,g1:k,g2:k,glyphName:k,glyphOrientationHorizontal:null,glyphOrientationVertical:null,glyphRef:null,gradientTransform:null,gradientUnits:null,handler:null,hanging:e,hatchContentUnits:null,hatchUnits:null,height:null,href:null,hrefLang:null,horizAdvX:e,horizOriginX:e,horizOriginY:e,id:null,ideographic:e,imageRendering:null,initialVisibility:null,in:null,in2:null,intercept:e,k:e,k1:e,k2:e,k3:e,k4:e,kernelMatrix:m,kernelUnitLength:null,keyPoints:null,keySplines:null,keyTimes:null,kerning:null,lang:null,lengthAdjust:null,letterSpacing:null,lightingColor:null,limitingConeAngle:e,local:null,markerEnd:null,markerMid:null,markerStart:null,markerHeight:null,markerUnits:null,markerWidth:null,mask:null,maskContentUnits:null,maskUnits:null,mathematical:null,max:null,media:null,mediaCharacterEncoding:null,mediaContentEncodings:null,mediaSize:e,mediaTime:null,method:null,min:null,mode:null,name:null,navDown:null,navDownLeft:null,navDownRight:null,navLeft:null,navNext:null,navPrev:null,navRight:null,navUp:null,navUpLeft:null,navUpRight:null,numOctaves:null,observer:null,offset:null,onAbort:null,onActivate:null,onAfterPrint:null,onBeforePrint:null,onBegin:null,onCancel:null,onCanPlay:null,onCanPlayThrough:null,onChange:null,onClick:null,onClose:null,onCopy:null,onCueChange:null,onCut:null,onDblClick:null,onDrag:null,onDragEnd:null,onDragEnter:null,onDragExit:null,onDragLeave:null,onDragOver:null,onDragStart:null,onDrop:null,onDurationChange:null,onEmptied:null,onEnd:null,onEnded:null,onError:null,onFocus:null,onFocusIn:null,onFocusOut:null,onHashChange:null,onInput:null,onInvalid:null,onKeyDown:null,onKeyPress:null,onKeyUp:null,onLoad:null,onLoadedData:null,onLoadedMetadata:null,onLoadStart:null,onMessage:null,onMouseDown:null,onMouseEnter:null,onMouseLeave:null,onMouseMove:null,onMouseOut:null,onMouseOver:null,onMouseUp:null,onMouseWheel:null,onOffline:null,onOnline:null,onPageHide:null,onPageShow:null,onPaste:null,onPause:null,onPlay:null,onPlaying:null,onPopState:null,onProgress:null,onRateChange:null,onRepeat:null,onReset:null,onResize:null,onScroll:null,onSeeked:null,onSeeking:null,onSelect:null,onShow:null,onStalled:null,onStorage:null,onSubmit:null,onSuspend:null,onTimeUpdate:null,onToggle:null,onUnload:null,onVolumeChange:null,onWaiting:null,onZoom:null,opacity:null,operator:null,order:null,orient:null,orientation:null,origin:null,overflow:null,overlay:null,overlinePosition:e,overlineThickness:e,paintOrder:null,panose1:null,path:null,pathLength:e,patternContentUnits:null,patternTransform:null,patternUnits:null,phase:null,ping:p,pitch:null,playbackOrder:null,pointerEvents:null,points:null,pointsAtX:e,pointsAtY:e,pointsAtZ:e,preserveAlpha:null,preserveAspectRatio:null,primitiveUnits:null,propagate:null,property:m,r:null,radius:null,referrerPolicy:null,refX:null,refY:null,rel:m,rev:m,renderingIntent:null,repeatCount:null,repeatDur:null,requiredExtensions:m,requiredFeatures:m,requiredFonts:m,requiredFormats:m,resource:null,restart:null,result:null,rotate:null,rx:null,ry:null,scale:null,seed:null,shapeRendering:null,side:null,slope:null,snapshotTime:null,specularConstant:e,specularExponent:e,spreadMethod:null,spacing:null,startOffset:null,stdDeviation:null,stemh:null,stemv:null,stitchTiles:null,stopColor:null,stopOpacity:null,strikethroughPosition:e,strikethroughThickness:e,string:null,stroke:null,strokeDashArray:m,strokeDashOffset:null,strokeLineCap:null,strokeLineJoin:null,strokeMiterLimit:e,strokeOpacity:e,strokeWidth:null,style:null,surfaceScale:e,syncBehavior:null,syncBehaviorDefault:null,syncMaster:null,syncTolerance:null,syncToleranceDefault:null,systemLanguage:m,tabIndex:e,tableValues:null,target:null,targetX:e,targetY:e,textAnchor:null,textDecoration:null,textRendering:null,textLength:null,timelineBegin:null,title:null,transformBehavior:null,type:null,typeOf:m,to:null,transform:null,transformOrigin:null,u1:null,u2:null,underlinePosition:e,underlineThickness:e,unicode:null,unicodeBidi:null,unicodeRange:null,unitsPerEm:e,values:null,vAlphabetic:e,vMathematical:e,vectorEffect:null,vHanging:e,vIdeographic:e,version:null,vertAdvY:e,vertOriginX:e,vertOriginY:e,viewBox:null,viewTarget:null,visibility:null,width:null,widths:null,wordSpacing:null,writingMode:null,x:null,x1:null,x2:null,xChannelSelector:null,xHeight:e,y:null,y1:null,y2:null,yChannelSelector:null,z:null,zoomAndPan:null}}),dn=/^data[-\w.:]+$/i,U=/-[a-z]/g,gn=/[A-Z]/g;function hn(n,l){const o=D(l);let t=l,r=f;if(o in n.normal)return n.property[n.normal[o]];if(o.length>4&&o.slice(0,4)==="data"&&dn.test(l)){if(l.charAt(4)==="-"){const a=l.slice(5).replace(U,fn);t="data"+a.charAt(0).toUpperCase()+a.slice(1)}else{const a=l.slice(4);if(!U.test(a)){let i=a.replace(gn,mn);i.charAt(0)!=="-"&&(i="-"+i),l="data"+i}}r=R}return new r(t,l)}function mn(n){return"-"+n.toLowerCase()}function fn(n){return n.charAt(1).toUpperCase()}const yn=j([H,F,q,W,cn],"html");j([H,F,q,W,pn],"svg");const T=["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","label","legend","li","link","main","map","mark","math","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rb","rp","rt","rtc","ruby","s","samp","script","section","select","slot","small","source","span","strong","style","sub","summary","sup","svg","table","tbody","td","template","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr"],M="default",K=/^@|^v-on:/,X=/^:|^v-bind:/,Y=/^v-model/,vn=["select","textarea","input"],bn=Object.fromEntries(["p","a","blockquote","code","pre","code","em","h1","h2","h3","h4","h5","h6","hr","img","ul","ol","li","strong","table","thead","tbody","td","th","tr","script"].map(n=>[n,`prose-${n}`])),kn=z({name:"MDCRenderer",props:{body:{type:Object,required:!0},data:{type:Object,default:()=>({})},tag:{type:[String,Boolean],default:void 0},prose:{type:Boolean,default:void 0},components:{type:Object,default:()=>({})}},async setup(n){var r,a;const{mdc:l}=J().public,o={...l.components.prose&&n.prose!==!1?bn:{},...l.components.map,...G(((a=(r=n.data)==null?void 0:r.mdc)==null?void 0:a.components)||{}),...n.components},t=x(()=>{var s;const i=(((s=n.body)==null?void 0:s.children)||[]).map(c=>c.tag||c.type).filter(c=>!T.includes(c));return Array.from(new Set(i)).sort().join(".")});return await Tn(n.body,{tags:o}),{tags:o,contentKey:t}},render(n){var h,y,d;const{tags:l,tag:o,body:t,data:r,contentKey:a}=n;if(!t)return null;const i={...r,tags:l},s=o!==!1?A(o||((h=i.component)==null?void 0:h.name)||i.component||"div"):void 0,c=$(t,E,i,i);return s?E(s,{...(y=i.component)==null?void 0:y.props,...this.$attrs,key:a},c):(d=c.default)==null?void 0:d.call(c)}});function Cn(n,l,o,t={}){if(n.type==="text")return l(w,n.value);const r=n.tag,a=Z(n,o.tags);if(n.tag==="binding")return Sn(n,l,o,t);const i=A(a);typeof i=="object"&&(i.tag=r);const s=xn(n,o);return l(i,s,$(n,l,o,{...t,...s}))}function Sn(n,l,o,t={}){var h,y;const r={...t,$route:()=>ln(),$document:o,$doc:o},a=/\.|\[(\d+)\]/,s=((h=n.props)==null?void 0:h.value.trim().split(a).filter(Boolean)).reduce((d,b)=>b in d?typeof d[b]=="function"?d[b]():d[b]:{},r),c=(y=n.props)==null?void 0:y.defaultValue;return l(w,s??c??"")}function $(n,l,o,t){const a=(n.children||[]).reduce((s,c)=>{if(!Mn(c))return s[M].push(c),s;const h=Ln(c);return s[h]=s[h]||[],c.type==="element"&&s[h].push(...c.children||[]),s},{[M]:[]});return Object.entries(a).reduce((s,[c,h])=>(h.length&&(s[c]=()=>{const y=h.map(d=>Cn(d,l,o,t));return Rn(y)}),s),{})}function xn(n,l){const{tag:o="",props:t={}}=n;return Object.keys(t).reduce(function(r,a){if(a==="__ignoreMap")return r;const i=t[a];if(Y.test(a)&&!vn.includes(o))return wn(a,i,r,l);if(a==="v-bind")return Pn(a,i,r,l);if(K.test(a))return On(a,i,r,l);if(X.test(a))return Dn(a,i,r,l);const{attribute:s}=hn(yn,a);return Array.isArray(i)&&i.every(c=>typeof c=="string")?(r[s]=i.join(" "),r):(r[s]=i,r)},{})}function wn(n,l,o,t){const r=d=>+d,a=d=>d.trim(),i=d=>d,s=n.replace(Y,"").split(".").filter(d=>d).reduce((d,b)=>(d[b]=!0,d),{}),c="value",h=s.lazy?"change":"input",y=s.number?r:s.trim?a:i;return o[c]=P(l,t),o.on=o.on||{},o.on[h]=d=>t[l]=y(d),o}function Pn(n,l,o,t){const r=P(l,t);return o=Object.assign(o,r),o}function On(n,l,o,t){return n=n.replace(K,""),o.on=o.on||{},o.on[n]=()=>P(l,t),o}function Dn(n,l,o,t){return n=n.replace(X,""),o[n]=P(l,t),o}const A=n=>{if(!T.includes(n)&&!(n!=null&&n.render)){const l=Q(I(n),!1);if(typeof l=="object")return l}return n};function P(n,l){const o=n.split(".").reduce((t,r)=>typeof t=="object"?t[r]:void 0,l);return typeof o>"u"?en(n):o}function Ln(n){let l="";for(const o of Object.keys(n.props||{}))if(!(!o.startsWith("#")&&!o.startsWith("v-slot:"))){l=o.split(/[:#]/,2)[1];break}return l||M}function Mn(n){return n.tag==="template"}function Rn(n){const l=[];for(const o of n){const t=l[l.length-1];o.type===w&&(t==null?void 0:t.type)===w?t.children=t.children+o.children:l.push(o)}return l}async function Tn(n,l){if(!n)return;const o=Array.from(new Set(t(n,l)));await Promise.all(o.map(async r=>{if(r!=null&&r.render||r!=null&&r.ssrRender||r!=null&&r.__ssrInlineRender)return;const a=A(r);a!=null&&a.__asyncLoader&&!a.__asyncResolved&&await a.__asyncLoader()}));function t(r,a){const i=r.tag;if(r.type==="text"||i==="binding")return[];const s=Z(r,a.tags),c=[];r.type!=="root"&&!T.includes(s)&&c.push(s);for(const h of r.children||[])c.push(...t(h,a));return c}}function Z(n,l){var t;const o=n.tag;return!o||typeof((t=n.props)==null?void 0:t.__ignoreMap)<"u"?o:l[o]||l[I(o)]||l[nn(n.tag)]||o}const En=z({__name:"ContentRendererMarkdown",props:{value:{type:Object,required:!0},excerpt:{type:Boolean,default:!1},tag:{type:String,default:"div"},components:{type:Object,default:()=>({})},data:{type:Object,default:()=>({})}},setup(n){const l=n,o=on().isEnabled(),t=x(()=>{let i=l.value.body||l.value;return l.excerpt&&l.value.excerpt&&(i=l.value.excerpt),i}),r=x(()=>{const{body:i,excerpt:s,...c}=l.value;return{...c,...l.data}}),a=x(()=>({...l.components,...r.value._components||{}}));return(i,s)=>{const c=kn;return tn(),rn(c,{body:t.value,data:r.value,tag:n.tag,components:a.value,"data-content-id":an(o)?n.value._id:void 0},null,8,["body","data","tag","components","data-content-id"])}}});export{En as _};
+import{d as z,k as J,B as G,J as x,O as E,ai as Q,ar as I,as as w,at as nn,m as ln,au as en,av as on,b as tn,G as rn,N as an}from"./entry.Do8xnxHS.js";class S{constructor(l,o,t){this.property=l,this.normal=o,t&&(this.space=t)}}S.prototype.property={};S.prototype.normal={};S.prototype.space=null;function j(n,l){const o={},t={};let r=-1;for(;++r<n.length;)Object.assign(o,n[r].property),Object.assign(t,n[r].normal);return new S(o,t,l)}function D(n){return n.toLowerCase()}class f{constructor(l,o){this.property=l,this.attribute=o}}f.prototype.space=null;f.prototype.boolean=!1;f.prototype.booleanish=!1;f.prototype.overloadedBoolean=!1;f.prototype.number=!1;f.prototype.commaSeparated=!1;f.prototype.spaceSeparated=!1;f.prototype.commaOrSpaceSeparated=!1;f.prototype.mustUseProperty=!1;f.prototype.defined=!1;let un=0;const u=v(),g=v(),_=v(),e=v(),p=v(),k=v(),m=v();function v(){return 2**++un}const L=Object.freeze(Object.defineProperty({__proto__:null,boolean:u,booleanish:g,commaOrSpaceSeparated:m,commaSeparated:k,number:e,overloadedBoolean:_,spaceSeparated:p},Symbol.toStringTag,{value:"Module"})),O=Object.keys(L);class R extends f{constructor(l,o,t,r){let a=-1;if(super(l,o),B(this,"space",r),typeof t=="number")for(;++a<O.length;){const i=O[a];B(this,O[a],(t&L[i])===L[i])}}}R.prototype.defined=!0;function B(n,l,o){o&&(n[l]=o)}const sn={}.hasOwnProperty;function C(n){const l={},o={};let t;for(t in n.properties)if(sn.call(n.properties,t)){const r=n.properties[t],a=new R(t,n.transform(n.attributes||{},t),r,n.space);n.mustUseProperty&&n.mustUseProperty.includes(t)&&(a.mustUseProperty=!0),l[t]=a,o[D(t)]=t,o[D(a.attribute)]=t}return new S(l,o,n.space)}const F=C({space:"xlink",transform(n,l){return"xlink:"+l.slice(5).toLowerCase()},properties:{xLinkActuate:null,xLinkArcRole:null,xLinkHref:null,xLinkRole:null,xLinkShow:null,xLinkTitle:null,xLinkType:null}}),H=C({space:"xml",transform(n,l){return"xml:"+l.slice(3).toLowerCase()},properties:{xmlLang:null,xmlBase:null,xmlSpace:null}});function V(n,l){return l in n?n[l]:l}function N(n,l){return V(n,l.toLowerCase())}const q=C({space:"xmlns",attributes:{xmlnsxlink:"xmlns:xlink"},transform:N,properties:{xmlns:null,xmlnsXLink:null}}),W=C({transform(n,l){return l==="role"?l:"aria-"+l.slice(4).toLowerCase()},properties:{ariaActiveDescendant:null,ariaAtomic:g,ariaAutoComplete:null,ariaBusy:g,ariaChecked:g,ariaColCount:e,ariaColIndex:e,ariaColSpan:e,ariaControls:p,ariaCurrent:null,ariaDescribedBy:p,ariaDetails:null,ariaDisabled:g,ariaDropEffect:p,ariaErrorMessage:null,ariaExpanded:g,ariaFlowTo:p,ariaGrabbed:g,ariaHasPopup:null,ariaHidden:g,ariaInvalid:null,ariaKeyShortcuts:null,ariaLabel:null,ariaLabelledBy:p,ariaLevel:e,ariaLive:null,ariaModal:g,ariaMultiLine:g,ariaMultiSelectable:g,ariaOrientation:null,ariaOwns:p,ariaPlaceholder:null,ariaPosInSet:e,ariaPressed:g,ariaReadOnly:g,ariaRelevant:null,ariaRequired:g,ariaRoleDescription:p,ariaRowCount:e,ariaRowIndex:e,ariaRowSpan:e,ariaSelected:g,ariaSetSize:e,ariaSort:null,ariaValueMax:e,ariaValueMin:e,ariaValueNow:e,ariaValueText:null,role:null}}),cn=C({space:"html",attributes:{acceptcharset:"accept-charset",classname:"class",htmlfor:"for",httpequiv:"http-equiv"},transform:N,mustUseProperty:["checked","multiple","muted","selected"],properties:{abbr:null,accept:k,acceptCharset:p,accessKey:p,action:null,allow:null,allowFullScreen:u,allowPaymentRequest:u,allowUserMedia:u,alt:null,as:null,async:u,autoCapitalize:null,autoComplete:p,autoFocus:u,autoPlay:u,blocking:p,capture:null,charSet:null,checked:u,cite:null,className:p,cols:e,colSpan:null,content:null,contentEditable:g,controls:u,controlsList:p,coords:e|k,crossOrigin:null,data:null,dateTime:null,decoding:null,default:u,defer:u,dir:null,dirName:null,disabled:u,download:_,draggable:g,encType:null,enterKeyHint:null,fetchPriority:null,form:null,formAction:null,formEncType:null,formMethod:null,formNoValidate:u,formTarget:null,headers:p,height:e,hidden:u,high:e,href:null,hrefLang:null,htmlFor:p,httpEquiv:p,id:null,imageSizes:null,imageSrcSet:null,inert:u,inputMode:null,integrity:null,is:null,isMap:u,itemId:null,itemProp:p,itemRef:p,itemScope:u,itemType:p,kind:null,label:null,lang:null,language:null,list:null,loading:null,loop:u,low:e,manifest:null,max:null,maxLength:e,media:null,method:null,min:null,minLength:e,multiple:u,muted:u,name:null,nonce:null,noModule:u,noValidate:u,onAbort:null,onAfterPrint:null,onAuxClick:null,onBeforeMatch:null,onBeforePrint:null,onBeforeToggle:null,onBeforeUnload:null,onBlur:null,onCancel:null,onCanPlay:null,onCanPlayThrough:null,onChange:null,onClick:null,onClose:null,onContextLost:null,onContextMenu:null,onContextRestored:null,onCopy:null,onCueChange:null,onCut:null,onDblClick:null,onDrag:null,onDragEnd:null,onDragEnter:null,onDragExit:null,onDragLeave:null,onDragOver:null,onDragStart:null,onDrop:null,onDurationChange:null,onEmptied:null,onEnded:null,onError:null,onFocus:null,onFormData:null,onHashChange:null,onInput:null,onInvalid:null,onKeyDown:null,onKeyPress:null,onKeyUp:null,onLanguageChange:null,onLoad:null,onLoadedData:null,onLoadedMetadata:null,onLoadEnd:null,onLoadStart:null,onMessage:null,onMessageError:null,onMouseDown:null,onMouseEnter:null,onMouseLeave:null,onMouseMove:null,onMouseOut:null,onMouseOver:null,onMouseUp:null,onOffline:null,onOnline:null,onPageHide:null,onPageShow:null,onPaste:null,onPause:null,onPlay:null,onPlaying:null,onPopState:null,onProgress:null,onRateChange:null,onRejectionHandled:null,onReset:null,onResize:null,onScroll:null,onScrollEnd:null,onSecurityPolicyViolation:null,onSeeked:null,onSeeking:null,onSelect:null,onSlotChange:null,onStalled:null,onStorage:null,onSubmit:null,onSuspend:null,onTimeUpdate:null,onToggle:null,onUnhandledRejection:null,onUnload:null,onVolumeChange:null,onWaiting:null,onWheel:null,open:u,optimum:e,pattern:null,ping:p,placeholder:null,playsInline:u,popover:null,popoverTarget:null,popoverTargetAction:null,poster:null,preload:null,readOnly:u,referrerPolicy:null,rel:p,required:u,reversed:u,rows:e,rowSpan:e,sandbox:p,scope:null,scoped:u,seamless:u,selected:u,shadowRootDelegatesFocus:u,shadowRootMode:null,shape:null,size:e,sizes:null,slot:null,span:e,spellCheck:g,src:null,srcDoc:null,srcLang:null,srcSet:null,start:e,step:null,style:null,tabIndex:e,target:null,title:null,translate:null,type:null,typeMustMatch:u,useMap:null,value:g,width:e,wrap:null,align:null,aLink:null,archive:p,axis:null,background:null,bgColor:null,border:e,borderColor:null,bottomMargin:e,cellPadding:null,cellSpacing:null,char:null,charOff:null,classId:null,clear:null,code:null,codeBase:null,codeType:null,color:null,compact:u,declare:u,event:null,face:null,frame:null,frameBorder:null,hSpace:e,leftMargin:e,link:null,longDesc:null,lowSrc:null,marginHeight:e,marginWidth:e,noResize:u,noHref:u,noShade:u,noWrap:u,object:null,profile:null,prompt:null,rev:null,rightMargin:e,rules:null,scheme:null,scrolling:g,standby:null,summary:null,text:null,topMargin:e,valueType:null,version:null,vAlign:null,vLink:null,vSpace:e,allowTransparency:null,autoCorrect:null,autoSave:null,disablePictureInPicture:u,disableRemotePlayback:u,prefix:null,property:null,results:e,security:null,unselectable:null}}),pn=C({space:"svg",attributes:{accentHeight:"accent-height",alignmentBaseline:"alignment-baseline",arabicForm:"arabic-form",baselineShift:"baseline-shift",capHeight:"cap-height",className:"class",clipPath:"clip-path",clipRule:"clip-rule",colorInterpolation:"color-interpolation",colorInterpolationFilters:"color-interpolation-filters",colorProfile:"color-profile",colorRendering:"color-rendering",crossOrigin:"crossorigin",dataType:"datatype",dominantBaseline:"dominant-baseline",enableBackground:"enable-background",fillOpacity:"fill-opacity",fillRule:"fill-rule",floodColor:"flood-color",floodOpacity:"flood-opacity",fontFamily:"font-family",fontSize:"font-size",fontSizeAdjust:"font-size-adjust",fontStretch:"font-stretch",fontStyle:"font-style",fontVariant:"font-variant",fontWeight:"font-weight",glyphName:"glyph-name",glyphOrientationHorizontal:"glyph-orientation-horizontal",glyphOrientationVertical:"glyph-orientation-vertical",hrefLang:"hreflang",horizAdvX:"horiz-adv-x",horizOriginX:"horiz-origin-x",horizOriginY:"horiz-origin-y",imageRendering:"image-rendering",letterSpacing:"letter-spacing",lightingColor:"lighting-color",markerEnd:"marker-end",markerMid:"marker-mid",markerStart:"marker-start",navDown:"nav-down",navDownLeft:"nav-down-left",navDownRight:"nav-down-right",navLeft:"nav-left",navNext:"nav-next",navPrev:"nav-prev",navRight:"nav-right",navUp:"nav-up",navUpLeft:"nav-up-left",navUpRight:"nav-up-right",onAbort:"onabort",onActivate:"onactivate",onAfterPrint:"onafterprint",onBeforePrint:"onbeforeprint",onBegin:"onbegin",onCancel:"oncancel",onCanPlay:"oncanplay",onCanPlayThrough:"oncanplaythrough",onChange:"onchange",onClick:"onclick",onClose:"onclose",onCopy:"oncopy",onCueChange:"oncuechange",onCut:"oncut",onDblClick:"ondblclick",onDrag:"ondrag",onDragEnd:"ondragend",onDragEnter:"ondragenter",onDragExit:"ondragexit",onDragLeave:"ondragleave",onDragOver:"ondragover",onDragStart:"ondragstart",onDrop:"ondrop",onDurationChange:"ondurationchange",onEmptied:"onemptied",onEnd:"onend",onEnded:"onended",onError:"onerror",onFocus:"onfocus",onFocusIn:"onfocusin",onFocusOut:"onfocusout",onHashChange:"onhashchange",onInput:"oninput",onInvalid:"oninvalid",onKeyDown:"onkeydown",onKeyPress:"onkeypress",onKeyUp:"onkeyup",onLoad:"onload",onLoadedData:"onloadeddata",onLoadedMetadata:"onloadedmetadata",onLoadStart:"onloadstart",onMessage:"onmessage",onMouseDown:"onmousedown",onMouseEnter:"onmouseenter",onMouseLeave:"onmouseleave",onMouseMove:"onmousemove",onMouseOut:"onmouseout",onMouseOver:"onmouseover",onMouseUp:"onmouseup",onMouseWheel:"onmousewheel",onOffline:"onoffline",onOnline:"ononline",onPageHide:"onpagehide",onPageShow:"onpageshow",onPaste:"onpaste",onPause:"onpause",onPlay:"onplay",onPlaying:"onplaying",onPopState:"onpopstate",onProgress:"onprogress",onRateChange:"onratechange",onRepeat:"onrepeat",onReset:"onreset",onResize:"onresize",onScroll:"onscroll",onSeeked:"onseeked",onSeeking:"onseeking",onSelect:"onselect",onShow:"onshow",onStalled:"onstalled",onStorage:"onstorage",onSubmit:"onsubmit",onSuspend:"onsuspend",onTimeUpdate:"ontimeupdate",onToggle:"ontoggle",onUnload:"onunload",onVolumeChange:"onvolumechange",onWaiting:"onwaiting",onZoom:"onzoom",overlinePosition:"overline-position",overlineThickness:"overline-thickness",paintOrder:"paint-order",panose1:"panose-1",pointerEvents:"pointer-events",referrerPolicy:"referrerpolicy",renderingIntent:"rendering-intent",shapeRendering:"shape-rendering",stopColor:"stop-color",stopOpacity:"stop-opacity",strikethroughPosition:"strikethrough-position",strikethroughThickness:"strikethrough-thickness",strokeDashArray:"stroke-dasharray",strokeDashOffset:"stroke-dashoffset",strokeLineCap:"stroke-linecap",strokeLineJoin:"stroke-linejoin",strokeMiterLimit:"stroke-miterlimit",strokeOpacity:"stroke-opacity",strokeWidth:"stroke-width",tabIndex:"tabindex",textAnchor:"text-anchor",textDecoration:"text-decoration",textRendering:"text-rendering",transformOrigin:"transform-origin",typeOf:"typeof",underlinePosition:"underline-position",underlineThickness:"underline-thickness",unicodeBidi:"unicode-bidi",unicodeRange:"unicode-range",unitsPerEm:"units-per-em",vAlphabetic:"v-alphabetic",vHanging:"v-hanging",vIdeographic:"v-ideographic",vMathematical:"v-mathematical",vectorEffect:"vector-effect",vertAdvY:"vert-adv-y",vertOriginX:"vert-origin-x",vertOriginY:"vert-origin-y",wordSpacing:"word-spacing",writingMode:"writing-mode",xHeight:"x-height",playbackOrder:"playbackorder",timelineBegin:"timelinebegin"},transform:V,properties:{about:m,accentHeight:e,accumulate:null,additive:null,alignmentBaseline:null,alphabetic:e,amplitude:e,arabicForm:null,ascent:e,attributeName:null,attributeType:null,azimuth:e,bandwidth:null,baselineShift:null,baseFrequency:null,baseProfile:null,bbox:null,begin:null,bias:e,by:null,calcMode:null,capHeight:e,className:p,clip:null,clipPath:null,clipPathUnits:null,clipRule:null,color:null,colorInterpolation:null,colorInterpolationFilters:null,colorProfile:null,colorRendering:null,content:null,contentScriptType:null,contentStyleType:null,crossOrigin:null,cursor:null,cx:null,cy:null,d:null,dataType:null,defaultAction:null,descent:e,diffuseConstant:e,direction:null,display:null,dur:null,divisor:e,dominantBaseline:null,download:u,dx:null,dy:null,edgeMode:null,editable:null,elevation:e,enableBackground:null,end:null,event:null,exponent:e,externalResourcesRequired:null,fill:null,fillOpacity:e,fillRule:null,filter:null,filterRes:null,filterUnits:null,floodColor:null,floodOpacity:null,focusable:null,focusHighlight:null,fontFamily:null,fontSize:null,fontSizeAdjust:null,fontStretch:null,fontStyle:null,fontVariant:null,fontWeight:null,format:null,fr:null,from:null,fx:null,fy:null,g1:k,g2:k,glyphName:k,glyphOrientationHorizontal:null,glyphOrientationVertical:null,glyphRef:null,gradientTransform:null,gradientUnits:null,handler:null,hanging:e,hatchContentUnits:null,hatchUnits:null,height:null,href:null,hrefLang:null,horizAdvX:e,horizOriginX:e,horizOriginY:e,id:null,ideographic:e,imageRendering:null,initialVisibility:null,in:null,in2:null,intercept:e,k:e,k1:e,k2:e,k3:e,k4:e,kernelMatrix:m,kernelUnitLength:null,keyPoints:null,keySplines:null,keyTimes:null,kerning:null,lang:null,lengthAdjust:null,letterSpacing:null,lightingColor:null,limitingConeAngle:e,local:null,markerEnd:null,markerMid:null,markerStart:null,markerHeight:null,markerUnits:null,markerWidth:null,mask:null,maskContentUnits:null,maskUnits:null,mathematical:null,max:null,media:null,mediaCharacterEncoding:null,mediaContentEncodings:null,mediaSize:e,mediaTime:null,method:null,min:null,mode:null,name:null,navDown:null,navDownLeft:null,navDownRight:null,navLeft:null,navNext:null,navPrev:null,navRight:null,navUp:null,navUpLeft:null,navUpRight:null,numOctaves:null,observer:null,offset:null,onAbort:null,onActivate:null,onAfterPrint:null,onBeforePrint:null,onBegin:null,onCancel:null,onCanPlay:null,onCanPlayThrough:null,onChange:null,onClick:null,onClose:null,onCopy:null,onCueChange:null,onCut:null,onDblClick:null,onDrag:null,onDragEnd:null,onDragEnter:null,onDragExit:null,onDragLeave:null,onDragOver:null,onDragStart:null,onDrop:null,onDurationChange:null,onEmptied:null,onEnd:null,onEnded:null,onError:null,onFocus:null,onFocusIn:null,onFocusOut:null,onHashChange:null,onInput:null,onInvalid:null,onKeyDown:null,onKeyPress:null,onKeyUp:null,onLoad:null,onLoadedData:null,onLoadedMetadata:null,onLoadStart:null,onMessage:null,onMouseDown:null,onMouseEnter:null,onMouseLeave:null,onMouseMove:null,onMouseOut:null,onMouseOver:null,onMouseUp:null,onMouseWheel:null,onOffline:null,onOnline:null,onPageHide:null,onPageShow:null,onPaste:null,onPause:null,onPlay:null,onPlaying:null,onPopState:null,onProgress:null,onRateChange:null,onRepeat:null,onReset:null,onResize:null,onScroll:null,onSeeked:null,onSeeking:null,onSelect:null,onShow:null,onStalled:null,onStorage:null,onSubmit:null,onSuspend:null,onTimeUpdate:null,onToggle:null,onUnload:null,onVolumeChange:null,onWaiting:null,onZoom:null,opacity:null,operator:null,order:null,orient:null,orientation:null,origin:null,overflow:null,overlay:null,overlinePosition:e,overlineThickness:e,paintOrder:null,panose1:null,path:null,pathLength:e,patternContentUnits:null,patternTransform:null,patternUnits:null,phase:null,ping:p,pitch:null,playbackOrder:null,pointerEvents:null,points:null,pointsAtX:e,pointsAtY:e,pointsAtZ:e,preserveAlpha:null,preserveAspectRatio:null,primitiveUnits:null,propagate:null,property:m,r:null,radius:null,referrerPolicy:null,refX:null,refY:null,rel:m,rev:m,renderingIntent:null,repeatCount:null,repeatDur:null,requiredExtensions:m,requiredFeatures:m,requiredFonts:m,requiredFormats:m,resource:null,restart:null,result:null,rotate:null,rx:null,ry:null,scale:null,seed:null,shapeRendering:null,side:null,slope:null,snapshotTime:null,specularConstant:e,specularExponent:e,spreadMethod:null,spacing:null,startOffset:null,stdDeviation:null,stemh:null,stemv:null,stitchTiles:null,stopColor:null,stopOpacity:null,strikethroughPosition:e,strikethroughThickness:e,string:null,stroke:null,strokeDashArray:m,strokeDashOffset:null,strokeLineCap:null,strokeLineJoin:null,strokeMiterLimit:e,strokeOpacity:e,strokeWidth:null,style:null,surfaceScale:e,syncBehavior:null,syncBehaviorDefault:null,syncMaster:null,syncTolerance:null,syncToleranceDefault:null,systemLanguage:m,tabIndex:e,tableValues:null,target:null,targetX:e,targetY:e,textAnchor:null,textDecoration:null,textRendering:null,textLength:null,timelineBegin:null,title:null,transformBehavior:null,type:null,typeOf:m,to:null,transform:null,transformOrigin:null,u1:null,u2:null,underlinePosition:e,underlineThickness:e,unicode:null,unicodeBidi:null,unicodeRange:null,unitsPerEm:e,values:null,vAlphabetic:e,vMathematical:e,vectorEffect:null,vHanging:e,vIdeographic:e,version:null,vertAdvY:e,vertOriginX:e,vertOriginY:e,viewBox:null,viewTarget:null,visibility:null,width:null,widths:null,wordSpacing:null,writingMode:null,x:null,x1:null,x2:null,xChannelSelector:null,xHeight:e,y:null,y1:null,y2:null,yChannelSelector:null,z:null,zoomAndPan:null}}),dn=/^data[-\w.:]+$/i,U=/-[a-z]/g,gn=/[A-Z]/g;function hn(n,l){const o=D(l);let t=l,r=f;if(o in n.normal)return n.property[n.normal[o]];if(o.length>4&&o.slice(0,4)==="data"&&dn.test(l)){if(l.charAt(4)==="-"){const a=l.slice(5).replace(U,fn);t="data"+a.charAt(0).toUpperCase()+a.slice(1)}else{const a=l.slice(4);if(!U.test(a)){let i=a.replace(gn,mn);i.charAt(0)!=="-"&&(i="-"+i),l="data"+i}}r=R}return new r(t,l)}function mn(n){return"-"+n.toLowerCase()}function fn(n){return n.charAt(1).toUpperCase()}const yn=j([H,F,q,W,cn],"html");j([H,F,q,W,pn],"svg");const T=["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","label","legend","li","link","main","map","mark","math","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rb","rp","rt","rtc","ruby","s","samp","script","section","select","slot","small","source","span","strong","style","sub","summary","sup","svg","table","tbody","td","template","textarea","tfoot","th","thead","time","title","tr","track","u","ul","var","video","wbr"],M="default",K=/^@|^v-on:/,X=/^:|^v-bind:/,Y=/^v-model/,vn=["select","textarea","input"],bn=Object.fromEntries(["p","a","blockquote","code","pre","code","em","h1","h2","h3","h4","h5","h6","hr","img","ul","ol","li","strong","table","thead","tbody","td","th","tr","script"].map(n=>[n,`prose-${n}`])),kn=z({name:"MDCRenderer",props:{body:{type:Object,required:!0},data:{type:Object,default:()=>({})},tag:{type:[String,Boolean],default:void 0},prose:{type:Boolean,default:void 0},components:{type:Object,default:()=>({})}},async setup(n){var r,a;const{mdc:l}=J().public,o={...l.components.prose&&n.prose!==!1?bn:{},...l.components.map,...G(((a=(r=n.data)==null?void 0:r.mdc)==null?void 0:a.components)||{}),...n.components},t=x(()=>{var s;const i=(((s=n.body)==null?void 0:s.children)||[]).map(c=>c.tag||c.type).filter(c=>!T.includes(c));return Array.from(new Set(i)).sort().join(".")});return await Tn(n.body,{tags:o}),{tags:o,contentKey:t}},render(n){var h,y,d;const{tags:l,tag:o,body:t,data:r,contentKey:a}=n;if(!t)return null;const i={...r,tags:l},s=o!==!1?A(o||((h=i.component)==null?void 0:h.name)||i.component||"div"):void 0,c=$(t,E,i,i);return s?E(s,{...(y=i.component)==null?void 0:y.props,...this.$attrs,key:a},c):(d=c.default)==null?void 0:d.call(c)}});function Cn(n,l,o,t={}){if(n.type==="text")return l(w,n.value);const r=n.tag,a=Z(n,o.tags);if(n.tag==="binding")return Sn(n,l,o,t);const i=A(a);typeof i=="object"&&(i.tag=r);const s=xn(n,o);return l(i,s,$(n,l,o,{...t,...s}))}function Sn(n,l,o,t={}){var h,y;const r={...t,$route:()=>ln(),$document:o,$doc:o},a=/\.|\[(\d+)\]/,s=((h=n.props)==null?void 0:h.value.trim().split(a).filter(Boolean)).reduce((d,b)=>b in d?typeof d[b]=="function"?d[b]():d[b]:{},r),c=(y=n.props)==null?void 0:y.defaultValue;return l(w,s??c??"")}function $(n,l,o,t){const a=(n.children||[]).reduce((s,c)=>{if(!Mn(c))return s[M].push(c),s;const h=Ln(c);return s[h]=s[h]||[],c.type==="element"&&s[h].push(...c.children||[]),s},{[M]:[]});return Object.entries(a).reduce((s,[c,h])=>(h.length&&(s[c]=()=>{const y=h.map(d=>Cn(d,l,o,t));return Rn(y)}),s),{})}function xn(n,l){const{tag:o="",props:t={}}=n;return Object.keys(t).reduce(function(r,a){if(a==="__ignoreMap")return r;const i=t[a];if(Y.test(a)&&!vn.includes(o))return wn(a,i,r,l);if(a==="v-bind")return Pn(a,i,r,l);if(K.test(a))return On(a,i,r,l);if(X.test(a))return Dn(a,i,r,l);const{attribute:s}=hn(yn,a);return Array.isArray(i)&&i.every(c=>typeof c=="string")?(r[s]=i.join(" "),r):(r[s]=i,r)},{})}function wn(n,l,o,t){const r=d=>+d,a=d=>d.trim(),i=d=>d,s=n.replace(Y,"").split(".").filter(d=>d).reduce((d,b)=>(d[b]=!0,d),{}),c="value",h=s.lazy?"change":"input",y=s.number?r:s.trim?a:i;return o[c]=P(l,t),o.on=o.on||{},o.on[h]=d=>t[l]=y(d),o}function Pn(n,l,o,t){const r=P(l,t);return o=Object.assign(o,r),o}function On(n,l,o,t){return n=n.replace(K,""),o.on=o.on||{},o.on[n]=()=>P(l,t),o}function Dn(n,l,o,t){return n=n.replace(X,""),o[n]=P(l,t),o}const A=n=>{if(!T.includes(n)&&!(n!=null&&n.render)){const l=Q(I(n),!1);if(typeof l=="object")return l}return n};function P(n,l){const o=n.split(".").reduce((t,r)=>typeof t=="object"?t[r]:void 0,l);return typeof o>"u"?en(n):o}function Ln(n){let l="";for(const o of Object.keys(n.props||{}))if(!(!o.startsWith("#")&&!o.startsWith("v-slot:"))){l=o.split(/[:#]/,2)[1];break}return l||M}function Mn(n){return n.tag==="template"}function Rn(n){const l=[];for(const o of n){const t=l[l.length-1];o.type===w&&(t==null?void 0:t.type)===w?t.children=t.children+o.children:l.push(o)}return l}async function Tn(n,l){if(!n)return;const o=Array.from(new Set(t(n,l)));await Promise.all(o.map(async r=>{if(r!=null&&r.render||r!=null&&r.ssrRender||r!=null&&r.__ssrInlineRender)return;const a=A(r);a!=null&&a.__asyncLoader&&!a.__asyncResolved&&await a.__asyncLoader()}));function t(r,a){const i=r.tag;if(r.type==="text"||i==="binding")return[];const s=Z(r,a.tags),c=[];r.type!=="root"&&!T.includes(s)&&c.push(s);for(const h of r.children||[])c.push(...t(h,a));return c}}function Z(n,l){var t;const o=n.tag;return!o||typeof((t=n.props)==null?void 0:t.__ignoreMap)<"u"?o:l[o]||l[I(o)]||l[nn(n.tag)]||o}const En=z({__name:"ContentRendererMarkdown",props:{value:{type:Object,required:!0},excerpt:{type:Boolean,default:!1},tag:{type:String,default:"div"},components:{type:Object,default:()=>({})},data:{type:Object,default:()=>({})}},setup(n){const l=n,o=on().isEnabled(),t=x(()=>{let i=l.value.body||l.value;return l.excerpt&&l.value.excerpt&&(i=l.value.excerpt),i}),r=x(()=>{const{body:i,excerpt:s,...c}=l.value;return{...c,...l.data}}),a=x(()=>({...l.components,...r.value._components||{}}));return(i,s)=>{const c=kn;return tn(),rn(c,{body:t.value,data:r.value,tag:n.tag,components:a.value,"data-content-id":an(o)?n.value._id:void 0},null,8,["body","data","tag","components","data-content-id"])}}});export{En as _};
diff --git a/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js b/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js
new file mode 100644
index 0000000000..acf4345f23
--- /dev/null
+++ b/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js
@@ -0,0 +1 @@
+import{_ as m}from"./ContentRendererMarkdown.vue.sDq3Jws6.js";import"./entry.Do8xnxHS.js";export{m as default};
diff --git a/_nuxt/ContentSlot.lsaDai_l.js b/_nuxt/ContentSlot.uUI9CND_.js
similarity index 92%
rename from _nuxt/ContentSlot.lsaDai_l.js
rename to _nuxt/ContentSlot.uUI9CND_.js
index caa3120bbe..2634c9b8c7 100644
--- a/_nuxt/ContentSlot.lsaDai_l.js
+++ b/_nuxt/ContentSlot.uUI9CND_.js
@@ -1 +1 @@
-import{f as i}from"./node.uMQX-T_c.js";import{d as u,aq as f,J as c,O as a,ab as d}from"./entry.49ZHHvLB.js";const p=u({name:"MDCSlot",functional:!0,props:{name:{type:String,default:"default"},unwrap:{type:[Boolean,String],default:!1},use:{type:Function,default:void 0}},setup(t){const{parent:s}=d(),{default:o}=f(),r=c(()=>typeof t.unwrap=="string"?t.unwrap.split(" "):["*"]);return{fallbackSlot:o,tags:r,parent:s}},render({use:t,unwrap:s,fallbackSlot:o,tags:r,parent:e}){var l;try{let n=t;return typeof t=="string"&&(n=(e==null?void 0:e.slots[t])||((l=e==null?void 0:e.parent)==null?void 0:l.slots[t]),console.warn(`Please set :use="$slots.${t}" in <MDCSlot> component to enable reactivity`)),n?s?i(n(),r):[n()]:o?o():a("div")}catch{return a("div")}}}),g=u({props:{use:{type:Function,default:void 0},unwrap:{type:[Boolean,String],default:!1}},render(t){return a(p,t)}});export{g as default};
+import{f as i}from"./node.uMQX-T_c.js";import{d as u,aq as f,J as c,O as a,ab as d}from"./entry.Do8xnxHS.js";const p=u({name:"MDCSlot",functional:!0,props:{name:{type:String,default:"default"},unwrap:{type:[Boolean,String],default:!1},use:{type:Function,default:void 0}},setup(t){const{parent:s}=d(),{default:o}=f(),r=c(()=>typeof t.unwrap=="string"?t.unwrap.split(" "):["*"]);return{fallbackSlot:o,tags:r,parent:s}},render({use:t,unwrap:s,fallbackSlot:o,tags:r,parent:e}){var l;try{let n=t;return typeof t=="string"&&(n=(e==null?void 0:e.slots[t])||((l=e==null?void 0:e.parent)==null?void 0:l.slots[t]),console.warn(`Please set :use="$slots.${t}" in <MDCSlot> component to enable reactivity`)),n?s?i(n(),r):[n()]:o?o():a("div")}catch{return a("div")}}}),g=u({props:{use:{type:Function,default:void 0},unwrap:{type:[Boolean,String],default:!1}},render(t){return a(p,t)}});export{g as default};
diff --git a/_nuxt/DocsAlert.qUx9DhKf.js b/_nuxt/DocsAlert.NYyBoUgq.js
similarity index 80%
rename from _nuxt/DocsAlert.qUx9DhKf.js
rename to _nuxt/DocsAlert.NYyBoUgq.js
index f3223409ec..ae7ac1b098 100644
--- a/_nuxt/DocsAlert.qUx9DhKf.js
+++ b/_nuxt/DocsAlert.NYyBoUgq.js
@@ -1 +1 @@
-import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as o,c as s,E as t}from"./entry.49ZHHvLB.js";const a={},c={class:"border rounded p-6 bg-slate-50 dark:bg-slate-800 border-slate-400 my-4"};function n(e,d){return o(),s("div",c,[t(e.$slots,"default")])}const f=r(a,[["render",n]]);export{f as default};
+import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as o,c as s,E as t}from"./entry.Do8xnxHS.js";const a={},c={class:"border rounded p-6 bg-slate-50 dark:bg-slate-800 border-slate-400 my-4"};function n(e,d){return o(),s("div",c,[t(e.$slots,"default")])}const f=r(a,[["render",n]]);export{f as default};
diff --git a/_nuxt/DocsCard.BHyI6viP.js b/_nuxt/DocsCard.BHyI6viP.js
new file mode 100644
index 0000000000..9ed6382fe6
--- /dev/null
+++ b/_nuxt/DocsCard.BHyI6viP.js
@@ -0,0 +1 @@
+import{_ as t}from"./RplPromoCard.vue.pyq2iKcr.js";import{_ as e}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as s,G as a,w as c,E as n}from"./entry.Do8xnxHS.js";import"./RplImage.css.ouJWHfa9.js";import"./RplTextLink.css.vnmpcBOe.js";import"./RplLink.vue.3IdzOFUB.js";import"./useRippleEvent.Eg1owuZM.js";const m={};function _(o,p){const r=t;return s(),a(r,null,{default:c(()=>[n(o.$slots,"default")]),_:3})}const h=e(m,[["render",_]]);export{h as default};
diff --git a/_nuxt/DocsCard.NvucPPsI.js b/_nuxt/DocsCard.NvucPPsI.js
deleted file mode 100644
index 21f911f49f..0000000000
--- a/_nuxt/DocsCard.NvucPPsI.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as t}from"./RplPromoCard.vue.btg01fDe.js";import{_ as e}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as s,G as a,w as c,E as n}from"./entry.49ZHHvLB.js";import"./RplImage.css.o2mWVvok.js";import"./RplTextLink.css.ll_eQGN0.js";import"./RplLink.vue.TWUjSovo.js";import"./useRippleEvent.DMJaxZxB.js";const m={};function _(o,p){const r=t;return s(),a(r,null,{default:c(()=>[n(o.$slots,"default")]),_:3})}const h=e(m,[["render",_]]);export{h as default};
diff --git a/_nuxt/DocsCardGrid.CGE8nz0H.js b/_nuxt/DocsCardGrid.PUHkyZXK.js
similarity index 78%
rename from _nuxt/DocsCardGrid.CGE8nz0H.js
rename to _nuxt/DocsCardGrid.PUHkyZXK.js
index 57fe8b7e6e..7c5caa422e 100644
--- a/_nuxt/DocsCardGrid.CGE8nz0H.js
+++ b/_nuxt/DocsCardGrid.PUHkyZXK.js
@@ -1 +1 @@
-import{_ as o}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as t,c,E as r}from"./entry.49ZHHvLB.js";const s={},n={class:"docs-card-grid"};function _(e,a){return t(),c("div",n,[r(e.$slots,"default",{},void 0,!0)])}const i=o(s,[["render",_],["__scopeId","data-v-1976c17f"]]);export{i as default};
+import{_ as o}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as t,c,E as r}from"./entry.Do8xnxHS.js";const s={},n={class:"docs-card-grid"};function _(e,a){return t(),c("div",n,[r(e.$slots,"default",{},void 0,!0)])}const i=o(s,[["render",_],["__scopeId","data-v-1976c17f"]]);export{i as default};
diff --git a/_nuxt/DocsColourTable.N8n5f2_3.js b/_nuxt/DocsColourTable.LKiaprrs.js
similarity index 88%
rename from _nuxt/DocsColourTable.N8n5f2_3.js
rename to _nuxt/DocsColourTable.LKiaprrs.js
index 8acb64c818..e28d16e106 100644
--- a/_nuxt/DocsColourTable.N8n5f2_3.js
+++ b/_nuxt/DocsColourTable.LKiaprrs.js
@@ -1 +1 @@
-import _ from"./Swatch.pCyR0PCQ.js";import{g as d,a as i,b as m,c as b}from"./colour.GNNGiHzW.js";import{d as h,J as f,b as s,c as n,e as t,F as C,W as g,g as S,t as r,N as v,p as k,i as x}from"./entry.49ZHHvLB.js";import{_ as V}from"./_plugin-vue_export-helper.x3n3nnut.js";const w=o=>(k("data-v-b048886a"),o=o(),x(),o),I={class:"rpl-table rpl-table--no-stripes"},N={class:"rpl-table__scroll-container",tabindex:"0"},B={class:"w-full"},D=w(()=>t("thead",null,[t("tr",null,[t("th",null,"Swatch"),t("th",null,"Colour"),t("th",null,"Value"),t("th",null,"CSS Variable")])],-1)),T=h({__name:"DocsColourTable",props:{colours:{}},setup(o){const c=o,u=f(()=>{const l=d(c.colours);return Object.keys(l).map(a=>({name:i(a),value:m(l[a]),token:b(a)}))});return(l,a)=>{const p=_;return s(),n("div",I,[t("div",N,[t("table",B,[D,t("tbody",null,[(s(!0),n(C,null,g(v(u),e=>(s(),n("tr",{key:e.name},[t("td",null,[S(p,{colour:`var(--${e.token})`},null,8,["colour"])]),t("td",null,r(e.name),1),t("td",null,r(e.value),1),t("td",null,r(e.token),1)]))),128))])])])])}}}),E=V(T,[["__scopeId","data-v-b048886a"]]);export{E as default};
+import _ from"./Swatch.FPuuW78y.js";import{g as d,a as i,b as m,c as b}from"./colour.GNNGiHzW.js";import{d as h,J as f,b as s,c as n,e as t,F as C,W as g,g as S,t as r,N as v,p as k,i as x}from"./entry.Do8xnxHS.js";import{_ as V}from"./_plugin-vue_export-helper.x3n3nnut.js";const w=o=>(k("data-v-b048886a"),o=o(),x(),o),I={class:"rpl-table rpl-table--no-stripes"},N={class:"rpl-table__scroll-container",tabindex:"0"},B={class:"w-full"},D=w(()=>t("thead",null,[t("tr",null,[t("th",null,"Swatch"),t("th",null,"Colour"),t("th",null,"Value"),t("th",null,"CSS Variable")])],-1)),T=h({__name:"DocsColourTable",props:{colours:{}},setup(o){const c=o,u=f(()=>{const l=d(c.colours);return Object.keys(l).map(a=>({name:i(a),value:m(l[a]),token:b(a)}))});return(l,a)=>{const p=_;return s(),n("div",I,[t("div",N,[t("table",B,[D,t("tbody",null,[(s(!0),n(C,null,g(v(u),e=>(s(),n("tr",{key:e.name},[t("td",null,[S(p,{colour:`var(--${e.token})`},null,8,["colour"])]),t("td",null,r(e.name),1),t("td",null,r(e.value),1),t("td",null,r(e.token),1)]))),128))])])])])}}}),E=V(T,[["__scopeId","data-v-b048886a"]]);export{E as default};
diff --git a/_nuxt/DocsContent.L9iJVoxE.js b/_nuxt/DocsContent.SQZjpxgh.js
similarity index 60%
rename from _nuxt/DocsContent.L9iJVoxE.js
rename to _nuxt/DocsContent.SQZjpxgh.js
index ced4d7fa64..b75defd08a 100644
--- a/_nuxt/DocsContent.L9iJVoxE.js
+++ b/_nuxt/DocsContent.SQZjpxgh.js
@@ -1 +1 @@
-import{_ as e}from"./RplContent.css.cfrovusU.js";import{_ as n}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as r,G as s,w as c,E as a}from"./entry.49ZHHvLB.js";const _={};function f(t,l){const o=e;return r(),s(o,null,{default:c(()=>[a(t.$slots,"default")]),_:3})}const d=n(_,[["render",f]]);export{d as default};
+import{_ as e}from"./RplContent.css.7ezTJ87f.js";import{_ as n}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as r,G as s,w as c,E as a}from"./entry.Do8xnxHS.js";const _={};function f(t,l){const o=e;return r(),s(o,null,{default:c(()=>[a(t.$slots,"default")]),_:3})}const d=n(_,[["render",f]]);export{d as default};
diff --git a/_nuxt/DocsContentNavigation.UDfK-BX9.js b/_nuxt/DocsContentNavigation.sYXaW9Re.js
similarity index 87%
rename from _nuxt/DocsContentNavigation.UDfK-BX9.js
rename to _nuxt/DocsContentNavigation.sYXaW9Re.js
index a1bdc8886b..5de4226a06 100644
--- a/_nuxt/DocsContentNavigation.UDfK-BX9.js
+++ b/_nuxt/DocsContentNavigation.sYXaW9Re.js
@@ -1 +1 @@
-import{_ as E,a as V,u as D}from"./useDocsNavigation.w75JuMbu.js";import{_ as R}from"./RplIcon.vue.NIDikUS0.js";import{d as y,b as r,c as p,e as h,t as b,g as C,r as A,J as B,f as k,F as S,W as M,n as T,N as o,G as f,w as $,m as z,v as F,a1 as L,D as q}from"./entry.49ZHHvLB.js";import{_ as G}from"./RplExpandable.vue.3-aUufTF.js";import{u as J}from"./useRippleEvent.DMJaxZxB.js";import P from"./DocsNavLink.5k-bni1U.js";import{_ as W}from"./_plugin-vue_export-helper.x3n3nnut.js";import"./RplLink.vue.TWUjSovo.js";import"./asyncData.6xpne1x0.js";import"./nuxt-link.jgZZZkZ5.js";const j={class:"rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block"},H={class:"rpl-vertical-nav__toggle-text"},K={class:"rpl-vertical-nav__toggle-icon","aria-hidden":"true"},O=y({__name:"RplVerticalNavToggle",props:{text:{}},setup(v){return(l,a)=>(r(),p("button",j,[h("span",H,b(l.text),1),h("span",K,[C(R,{name:"icon-chevron-down",size:"xs"})])]))}});function Q(v,l){const a=A(v);function _(n){return a.value.includes(n)}function i(){return a.value.length===l}function c(n){_(n)==!1?a.value.push(n):a.value=a.value.filter(s=>s!=n)}return{isItemExpanded:_,isAllExpanded:i,toggleItem:c}}const U={class:"rpl-vertical-nav rpl-u-screen-only"},X={key:0,class:"rpl-vertical-nav__heading rpl-type-h3-fixed"},Y={class:"rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"},Z=y({__name:"RplVerticalNav",props:{title:{},items:{}},emits:["toggleMenuItem","navigate"],setup(v,{emit:l}){const a=v,_=l,{emitRplEvent:i}=J("rpl-vertical-nav",_),c=B(()=>(a.items||[]).map(e=>{var d;return e.url&&((d=e.items)!=null&&d.length)?{...e,items:[{id:e.id,text:e.text,url:e.url,active:e.active&&!e.items.some(t=>t.active)},...e.items||[]]}:e})),n=c.value.reduce((e,d)=>d.active?[...e,d.id]:e,[]),{isItemExpanded:s,toggleItem:x}=Q(n,c.value.length),u=e=>`rpl-vertical-nav-${e}-toggle`,m=e=>{x(e.id),i("toggleMenuItem",{id:u(e.id),action:s(e.id)?"open":"close",text:e.text,name:a==null?void 0:a.title},{global:!0})},g=e=>{i("navigate",{...e,name:a==null?void 0:a.title},{global:!0})};return(e,d)=>(r(),p("nav",U,[e.title?(r(),p("h3",X,b(e.title),1)):k("",!0),h("ul",Y,[(r(!0),p(S,null,M(c.value,(t,I)=>{var N;return r(),p("li",{key:I,class:T({"rpl-vertical-nav__list-item":!0,"rpl-vertical-nav__list-item--expanded":o(s)(t.id)})},[t.items?(r(),f(O,{key:0,id:u(t.id),text:t.text,onClick:()=>m(t)},null,8,["id","text","onClick"])):k("",!0),t.items?(r(),f(G,{key:1,"aria-labelledby":`rpl-vertical-nav-${t.id}-toggle`,"aria-hidden":o(s)(t.id)===!1?"true":null,expanded:o(s)(t.id),class:"rpl-vertical-nav__list-item-children"},{default:$(()=>[C(E,{items:t.items,level:2,"is-expanded":o(s)(t.id),onItemClick:g},null,8,["items","is-expanded"])]),_:2},1032,["aria-labelledby","aria-hidden","expanded"])):(r(),f(V,{key:2,text:t.text,href:t.url,active:(t==null?void 0:t.active)&&!((N=t.items)!=null&&N.some(w=>w.active)),onItemClick:g},null,8,["text","href","active"]))],2)}),128))])]))}}),ee=y({__name:"DocsContentNavigation",async setup(v){let l,a;const _=z(),{sections:i,hideModulesSection:c}=F(),n=_.params.slug[0],s=([l,a]=L(()=>D([n||"design-system"],{layout:{$ne:"module"}})),l=await l,a(),l),x=s==null?void 0:s.map(u=>{var m;return{...u,url:(m=u.items)!=null&&m.length?null:u.url}});return(u,m)=>{const g=Z,e=P;return r(),p("div",null,[C(g,{items:o(x)},null,8,["items"]),o(c)?k("",!0):(r(),f(e,{key:0,url:o(n)==="framework"?"/design-system/about/what-is-ripple":"/framework",icon:"icon-link-external-square-filled",iconPosition:"end",class:"docs-section-link"},{default:$(()=>[q(b(o(n)==="framework"?o(i)["design-system"].title:o(i).framework.title),1)]),_:1},8,["url"]))])}}}),_e=W(ee,[["__scopeId","data-v-18cbb85e"]]);export{_e as default};
+import{_ as E,a as V,u as D}from"./useDocsNavigation.a2cLzZKV.js";import{_ as R}from"./RplIcon.vue.PZ-X7Qhh.js";import{d as y,b as r,c as p,e as h,t as b,g as C,r as A,J as B,f as k,F as S,W as M,n as T,N as o,G as f,w as $,m as z,v as F,a1 as L,D as q}from"./entry.Do8xnxHS.js";import{_ as G}from"./RplExpandable.vue.ErcNtea4.js";import{u as J}from"./useRippleEvent.Eg1owuZM.js";import P from"./DocsNavLink.k4ZwJ1d1.js";import{_ as W}from"./_plugin-vue_export-helper.x3n3nnut.js";import"./RplLink.vue.3IdzOFUB.js";import"./asyncData.mgwg8A3s.js";import"./nuxt-link.sM27-MT7.js";const j={class:"rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block"},H={class:"rpl-vertical-nav__toggle-text"},K={class:"rpl-vertical-nav__toggle-icon","aria-hidden":"true"},O=y({__name:"RplVerticalNavToggle",props:{text:{}},setup(v){return(l,a)=>(r(),p("button",j,[h("span",H,b(l.text),1),h("span",K,[C(R,{name:"icon-chevron-down",size:"xs"})])]))}});function Q(v,l){const a=A(v);function _(n){return a.value.includes(n)}function i(){return a.value.length===l}function c(n){_(n)==!1?a.value.push(n):a.value=a.value.filter(s=>s!=n)}return{isItemExpanded:_,isAllExpanded:i,toggleItem:c}}const U={class:"rpl-vertical-nav rpl-u-screen-only"},X={key:0,class:"rpl-vertical-nav__heading rpl-type-h3-fixed"},Y={class:"rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"},Z=y({__name:"RplVerticalNav",props:{title:{},items:{}},emits:["toggleMenuItem","navigate"],setup(v,{emit:l}){const a=v,_=l,{emitRplEvent:i}=J("rpl-vertical-nav",_),c=B(()=>(a.items||[]).map(e=>{var d;return e.url&&((d=e.items)!=null&&d.length)?{...e,items:[{id:e.id,text:e.text,url:e.url,active:e.active&&!e.items.some(t=>t.active)},...e.items||[]]}:e})),n=c.value.reduce((e,d)=>d.active?[...e,d.id]:e,[]),{isItemExpanded:s,toggleItem:x}=Q(n,c.value.length),u=e=>`rpl-vertical-nav-${e}-toggle`,m=e=>{x(e.id),i("toggleMenuItem",{id:u(e.id),action:s(e.id)?"open":"close",text:e.text,name:a==null?void 0:a.title},{global:!0})},g=e=>{i("navigate",{...e,name:a==null?void 0:a.title},{global:!0})};return(e,d)=>(r(),p("nav",U,[e.title?(r(),p("h3",X,b(e.title),1)):k("",!0),h("ul",Y,[(r(!0),p(S,null,M(c.value,(t,I)=>{var N;return r(),p("li",{key:I,class:T({"rpl-vertical-nav__list-item":!0,"rpl-vertical-nav__list-item--expanded":o(s)(t.id)})},[t.items?(r(),f(O,{key:0,id:u(t.id),text:t.text,onClick:()=>m(t)},null,8,["id","text","onClick"])):k("",!0),t.items?(r(),f(G,{key:1,"aria-labelledby":`rpl-vertical-nav-${t.id}-toggle`,"aria-hidden":o(s)(t.id)===!1?"true":null,expanded:o(s)(t.id),class:"rpl-vertical-nav__list-item-children"},{default:$(()=>[C(E,{items:t.items,level:2,"is-expanded":o(s)(t.id),onItemClick:g},null,8,["items","is-expanded"])]),_:2},1032,["aria-labelledby","aria-hidden","expanded"])):(r(),f(V,{key:2,text:t.text,href:t.url,active:(t==null?void 0:t.active)&&!((N=t.items)!=null&&N.some(w=>w.active)),onItemClick:g},null,8,["text","href","active"]))],2)}),128))])]))}}),ee=y({__name:"DocsContentNavigation",async setup(v){let l,a;const _=z(),{sections:i,hideModulesSection:c}=F(),n=_.params.slug[0],s=([l,a]=L(()=>D([n||"design-system"],{layout:{$ne:"module"}})),l=await l,a(),l),x=s==null?void 0:s.map(u=>{var m;return{...u,url:(m=u.items)!=null&&m.length?null:u.url}});return(u,m)=>{const g=Z,e=P;return r(),p("div",null,[C(g,{items:o(x)},null,8,["items"]),o(c)?k("",!0):(r(),f(e,{key:0,url:o(n)==="framework"?"/design-system/about/what-is-ripple":"/framework",icon:"icon-link-external-square-filled",iconPosition:"end",class:"docs-section-link"},{default:$(()=>[q(b(o(n)==="framework"?o(i)["design-system"].title:o(i).framework.title),1)]),_:1},8,["url"]))])}}}),_e=W(ee,[["__scopeId","data-v-18cbb85e"]]);export{_e as default};
diff --git a/_nuxt/DocsExample.o_g87j4m.js b/_nuxt/DocsExample.TYtIaycF.js
similarity index 99%
rename from _nuxt/DocsExample.o_g87j4m.js
rename to _nuxt/DocsExample.TYtIaycF.js
index 98e6366144..afed5beba6 100644
--- a/_nuxt/DocsExample.o_g87j4m.js
+++ b/_nuxt/DocsExample.TYtIaycF.js
@@ -1,2 +1,2 @@
-import zn from"./DocsLink.5OmhIBHZ.js";import{_ as Hn}from"./RplIcon.vue.NIDikUS0.js";import{N as fe,X as Dn,Y as jn,r as xe,Z as Ze,d as Wn,o as Un,J as Ee,v as Gn,H as $n,b as ye,c as ve,g as Ke,w as cn,D as Xe,f as qe,e as Qe,$ as Vn,n as Kn}from"./entry.49ZHHvLB.js";import{g as Mn}from"./_commonjsHelpers.5-cIlDoe.js";import{_ as Xn}from"./_plugin-vue_export-helper.x3n3nnut.js";import"./RplTextLink.css.ll_eQGN0.js";import"./RplLink.vue.TWUjSovo.js";var xn={exports:{}};(function(e){(function(n){if(typeof window>"u")return;var r=0,h=!1,O=!1,N="message",l=N.length,a="[iFrameSizer]",p=a.length,y=null,x=window.requestAnimationFrame,V=Object.freeze({max:1,scroll:1,bodyScroll:1,documentElementScroll:1}),i={},K=null,oe=Object.freeze({autoResize:!0,bodyBackground:null,bodyMargin:null,bodyMarginV1:8,bodyPadding:null,checkOrigin:!0,inPageLinks:!1,enablePublicMethods:!0,heightCalculationMethod:"bodyOffset",id:"iFrameResizer",interval:32,log:!1,maxHeight:1/0,maxWidth:1/0,minHeight:0,minWidth:0,mouseEvents:!0,resizeFrom:"parent",scrolling:!1,sizeHeight:!0,sizeWidth:!1,warningTimeout:5e3,tolerance:0,widthCalculationMethod:"scroll",onClose:function(){return!0},onClosed:function(){},onInit:function(){},onMessage:function(){q("onMessage function not defined")},onMouseEnter:function(){},onMouseLeave:function(){},onResized:function(){},onScroll:function(){return!0}});function ce(){return window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver}function ne(t,u,M){t.addEventListener(u,M,!1)}function H(t,u,M){t.removeEventListener(u,M,!1)}function U(){var t=["moz","webkit","o","ms"],u;for(u=0;u<t.length&&!x;u+=1)x=window[t[u]+"RequestAnimationFrame"];x?x=x.bind(window):T("setup","RequestAnimationFrame not supported")}function re(t){var u="Host page: "+t;return window.top!==window.self&&(u=window.parentIFrame&&window.parentIFrame.getId?window.parentIFrame.getId()+": "+t:"Nested host page: "+t),u}function le(t){return a+"["+re(t)+"]"}function Te(t){return i[t]?i[t].log:h}function T(t,u){Y("log",t,u,Te(t))}function ke(t,u){Y("info",t,u,Te(t))}function q(t,u){Y("warn",t,u,!0)}function Y(t,u,M,s){s===!0&&typeof window.console=="object"&&console[t](le(u),M)}function Se(t){function u(){function f(){R(A),Ae(E),pe("onResized",A)}b("Height"),b("Width"),L(f,A,"init")}function M(){var f=ie.slice(p).split(":"),_=f[1]?parseInt(f[1],10):0,P=i[f[0]]&&i[f[0]].iframe,F=getComputedStyle(P);return{iframe:P,id:f[0],height:_+s(F)+k(F),width:f[2],type:f[3]}}function s(f){if(f.boxSizing!=="border-box")return 0;var _=f.paddingTop?parseInt(f.paddingTop,10):0,P=f.paddingBottom?parseInt(f.paddingBottom,10):0;return _+P}function k(f){if(f.boxSizing!=="border-box")return 0;var _=f.borderTopWidth?parseInt(f.borderTopWidth,10):0,P=f.borderBottomWidth?parseInt(f.borderBottomWidth,10):0;return _+P}function b(f){var _=Number(i[E]["max"+f]),P=Number(i[E]["min"+f]),F=f.toLowerCase(),W=Number(A[F]);T(E,"Checking "+F+" is in range "+P+"-"+_),W<P&&(W=P,T(E,"Set "+F+" to min value")),W>_&&(W=_,T(E,"Set "+F+" to max value")),A[F]=""+W}function S(){function f(){function F(){var $=0,ae=!1;for(T(E,"Checking connection is from allowed list of origins: "+P);$<P.length;$++)if(P[$]===_){ae=!0;break}return ae}function W(){var $=i[E]&&i[E].remoteHost;return T(E,"Checking connection is from: "+$),_===$}return P.constructor===Array?F():W()}var _=t.origin,P=i[E]&&i[E].checkOrigin;if(P&&""+_!="null"&&!f())throw new Error("Unexpected message received from: "+_+" for "+A.iframe.id+". Message was: "+t.data+". This error can be disabled by setting the checkOrigin: false option or by providing of array of trusted domains.");return!0}function Z(){return a===(""+ie).slice(0,p)&&ie.slice(p).split(":")[0]in i}function j(){var f=A.type in{true:1,false:1,undefined:1};return f&&T(E,"Ignoring init message from meta parent page"),f}function Q(f){return ie.slice(ie.indexOf(":")+l+f)}function ee(f){T(E,"onMessage passed: {iframe: "+A.iframe.id+", message: "+f+"}"),pe("onMessage",{iframe:A.iframe,message:JSON.parse(f)}),T(E,"--")}function c(){var f=document.body.getBoundingClientRect(),_=A.iframe.getBoundingClientRect();return JSON.stringify({iframeHeight:_.height,iframeWidth:_.width,clientHeight:Math.max(document.documentElement.clientHeight,window.innerHeight||0),clientWidth:Math.max(document.documentElement.clientWidth,window.innerWidth||0),offsetTop:parseInt(_.top-f.top,10),offsetLeft:parseInt(_.left-f.left,10),scrollTop:window.pageYOffset,scrollLeft:window.pageXOffset,documentHeight:document.documentElement.clientHeight,documentWidth:document.documentElement.clientWidth,windowHeight:window.innerHeight,windowWidth:window.innerWidth})}function g(f,_){function P(){C("Send Page Info","pageInfo:"+c(),f,_)}Ce(P,32,_)}function v(){function f(W,$){function ae(){i[F]?g(i[F].iframe,F):_()}["scroll","resize"].forEach(function(an){T(F,W+an+" listener for sendPageInfo"),$(window,an,ae)})}function _(){f("Remove ",H)}function P(){f("Add ",ne)}var F=E;P(),i[F]&&(i[F].stopPageInfo=_)}function I(){i[E]&&i[E].stopPageInfo&&(i[E].stopPageInfo(),delete i[E].stopPageInfo)}function z(){var f=!0;return A.iframe===null&&(q(E,"IFrame ("+A.id+") not found"),f=!1),f}function d(f){var _=f.getBoundingClientRect();return ge(E),{x:Math.floor(Number(_.left)+Number(y.x)),y:Math.floor(Number(_.top)+Number(y.y))}}function m(f){function _(){y=$,B(),T(E,"--")}function P(){return{x:Number(A.width)+W.x,y:Number(A.height)+W.y}}function F(){window.parentIFrame?window.parentIFrame["scrollTo"+(f?"Offset":"")]($.x,$.y):q(E,"Unable to scroll to requested position, window.parentIFrame not found")}var W=f?d(A.iframe):{x:0,y:0},$=P();T(E,"Reposition requested from iFrame (offset x:"+W.x+" y:"+W.y+")"),window.top===window.self?_():F()}function B(){pe("onScroll",y)===!1?o():Ae(E)}function G(f){function _(){var ae=d($);T(E,"Moving to in page link (#"+F+") at x: "+ae.x+" y: "+ae.y),y={x:ae.x,y:ae.y},B(),T(E,"--")}function P(){window.parentIFrame?window.parentIFrame.moveToAnchor(F):T(E,"In page link #"+F+" not found and window.parentIFrame not found")}var F=f.split("#")[1]||"",W=decodeURIComponent(F),$=document.getElementById(W)||document.getElementsByName(W)[0];$?_():window.top===window.self?T(E,"In page link #"+F+" not found"):P()}function te(f){var _={};if(Number(A.width)===0&&Number(A.height)===0){var P=Q(9).split(":");_={x:P[1],y:P[0]}}else _={x:A.width,y:A.height};pe(f,{iframe:A.iframe,screenX:Number(_.x),screenY:Number(_.y),type:A.type})}function pe(f,_){return me(E,f,_)}function Ue(){switch(i[E]&&i[E].firstRun&&Ve(),A.type){case"close":{Me(A.iframe);break}case"message":{ee(Q(6));break}case"mouseenter":{te("onMouseEnter");break}case"mouseleave":{te("onMouseLeave");break}case"autoResize":{i[E].autoResize=JSON.parse(Q(9));break}case"scrollTo":{m(!1);break}case"scrollToOffset":{m(!0);break}case"pageInfo":{g(i[E]&&i[E].iframe,E),v();break}case"pageInfoStop":{I();break}case"inPageLink":{G(Q(9));break}case"reset":{w(A);break}case"init":{u(),pe("onInit",A.iframe);break}default:Number(A.width)===0&&Number(A.height)===0?q("Unsupported message received ("+A.type+"), this is likely due to the iframe containing a later version of iframe-resizer than the parent page"):u()}}function Ge(f){var _=!0;return i[f]||(_=!1,q(A.type+" No settings for "+f+". Message was: "+ie)),_}function $e(){for(var f in i)C("iFrame requested init",X(f),i[f].iframe,f)}function Ve(){i[E]&&(i[E].firstRun=!1)}var ie=t.data,A={},E=null;ie==="[iFrameResizerChild]Ready"?$e():Z()?(A=M(),E=A.id,i[E]&&(i[E].loaded=!0),!j()&&Ge(E)&&(T(E,"Received: "+ie),z()&&S()&&Ue())):ke(E,"Ignored: "+ie)}function me(t,u,M){var s=null,k=null;if(i[t])if(s=i[t][u],typeof s=="function")k=s(M);else throw new TypeError(u+" on iFrame["+t+"] is not a function");return k}function Ie(t){var u=t.id;delete i[u]}function Me(t){var u=t.id;if(me(u,"onClose",u)===!1){T(u,"Close iframe cancelled by onClose event");return}T(u,"Removing iFrame: "+u);try{t.parentNode&&t.parentNode.removeChild(t)}catch(M){q(M)}me(u,"onClosed",u),T(u,"--"),Ie(t)}function ge(t){y===null&&(y={x:window.pageXOffset===n?document.documentElement.scrollLeft:window.pageXOffset,y:window.pageYOffset===n?document.documentElement.scrollTop:window.pageYOffset},T(t,"Get page position: "+y.x+","+y.y))}function Ae(t){y!==null&&(window.scrollTo(y.x,y.y),T(t,"Set page position: "+y.x+","+y.y),o())}function o(){y=null}function w(t){function u(){R(t),C("reset","reset",t.iframe,t.id)}T(t.id,"Size reset requested by "+(t.type==="init"?"host page":"iFrame")),ge(t.id),L(u,t,"reset")}function R(t){function u(b){if(!t.id){T("undefined","messageData id not set");return}t.iframe.style[b]=t[b]+"px",T(t.id,"IFrame ("+k+") "+b+" set to "+t[b]+"px")}function M(b){!O&&t[b]==="0"&&(O=!0,T(k,"Hidden iFrame detected, creating visibility listener"),Le())}function s(b){u(b),M(b)}var k=t.iframe.id;i[k]&&(i[k].sizeHeight&&s("height"),i[k].sizeWidth&&s("width"))}function L(t,u,M){M!==u.type&&x&&!window.jasmine?(T(u.id,"Requesting animation frame"),x(t)):t()}function C(t,u,M,s,k){function b(){var ee=i[s]&&i[s].targetOrigin;T(s,"["+t+"] Sending msg to iframe["+s+"] ("+u+") targetOrigin: "+ee),M.contentWindow.postMessage(a+u,ee)}function S(){q(s,"["+t+"] IFrame("+s+") not found")}function Z(){M&&"contentWindow"in M&&M.contentWindow!==null?b():S()}function j(){function ee(){i[s]&&!i[s].loaded&&!Q&&(Q=!0,q(s,"IFrame has not responded within "+i[s].warningTimeout/1e3+" seconds. Check iFrameResizer.contentWindow.js has been loaded in iFrame. This message can be ignored if everything is working, or you can set the warningTimeout option to a higher value or zero to suppress this warning."))}k&&i[s]&&i[s].warningTimeout&&(i[s].msgTimeout=setTimeout(ee,i[s].warningTimeout))}var Q=!1;s=s||M.id,i[s]&&(Z(),j())}function X(t){return t+":"+i[t].bodyMarginV1+":"+i[t].sizeWidth+":"+i[t].log+":"+i[t].interval+":"+i[t].enablePublicMethods+":"+i[t].autoResize+":"+i[t].bodyMargin+":"+i[t].heightCalculationMethod+":"+i[t].bodyBackground+":"+i[t].bodyPadding+":"+i[t].tolerance+":"+i[t].inPageLinks+":"+i[t].resizeFrom+":"+i[t].widthCalculationMethod+":"+i[t].mouseEvents}function se(t){return typeof t=="number"}function he(t,u){function M(){function m(G){var te=i[d][G];te!==1/0&&te!==0&&(t.style[G]=se(te)?te+"px":te,T(d,"Set "+G+" = "+t.style[G]))}function B(G){if(i[d]["min"+G]>i[d]["max"+G])throw new Error("Value for min"+G+" can not be greater than max"+G)}B("Height"),B("Width"),m("maxHeight"),m("minHeight"),m("maxWidth"),m("minWidth")}function s(){var m=u&&u.id||oe.id+r++;return document.getElementById(m)!==null&&(m+=r++),m}function k(m){if(typeof m!="string")throw new TypeError("Invaild id for iFrame. Expected String");return m===""&&(t.id=m=s(),h=(u||{}).log,T(m,"Added missing iframe ID: "+m+" ("+t.src+")")),m}function b(){switch(T(d,"IFrame scrolling "+(i[d]&&i[d].scrolling?"enabled":"disabled")+" for "+d),t.style.overflow=(i[d]&&i[d].scrolling)===!1?"hidden":"auto",i[d]&&i[d].scrolling){case"omit":break;case!0:{t.scrolling="yes";break}case!1:{t.scrolling="no";break}default:t.scrolling=i[d]?i[d].scrolling:"no"}}function S(){(typeof(i[d]&&i[d].bodyMargin)=="number"||(i[d]&&i[d].bodyMargin)==="0")&&(i[d].bodyMarginV1=i[d].bodyMargin,i[d].bodyMargin=""+i[d].bodyMargin+"px")}function Z(){var m=i[d]&&i[d].firstRun,B=i[d]&&i[d].heightCalculationMethod in V;!m&&B&&w({iframe:t,height:0,width:0,type:"init"})}function j(){i[d]&&(i[d].iframe.iFrameResizer={close:Me.bind(null,i[d].iframe),removeListeners:Ie.bind(null,i[d].iframe),resize:C.bind(null,"Window resize","resize",i[d].iframe),moveToAnchor:function(m){C("Move to anchor","moveToAnchor:"+m,i[d].iframe,d)},sendMessage:function(m){m=JSON.stringify(m),C("Send Message","message:"+m,i[d].iframe,d)}})}function Q(m){function B(){C("iFrame.onload",m,t,n,!0),Z()}function G(pe){if(t.parentNode){var Ue=new pe(function(Ge){Ge.forEach(function($e){var Ve=Array.prototype.slice.call($e.removedNodes);Ve.forEach(function(ie){ie===t&&Me(t)})})});Ue.observe(t.parentNode,{childList:!0})}}var te=ce();te&&G(te),ne(t,"load",B),C("init",m,t,n,!0)}function ee(m){if(typeof m!="object")throw new TypeError("Options is not an object")}function c(m){for(var B in oe)Object.prototype.hasOwnProperty.call(oe,B)&&(i[d][B]=Object.prototype.hasOwnProperty.call(m,B)?m[B]:oe[B])}function g(m){return m===""||m.match(/^(about:blank|javascript:|file:\/\/)/)!==null?"*":m}function v(m){var B=m.split("Callback");if(B.length===2){var G="on"+B[0].charAt(0).toUpperCase()+B[0].slice(1);this[G]=this[m],delete this[m],q(d,"Deprecated: '"+m+"' has been renamed '"+G+"'. The old method will be removed in the next major version.")}}function I(m){m=m||{},i[d]=Object.create(null),i[d].iframe=t,i[d].firstRun=!0,i[d].remoteHost=t.src&&t.src.split("/").slice(0,3).join("/"),ee(m),Object.keys(m).forEach(v,m),c(m),i[d]&&(i[d].targetOrigin=i[d].checkOrigin===!0?g(i[d].remoteHost):"*")}function z(){return d in i&&"iFrameResizer"in t}var d=k(t.id);z()?q(d,"Ignored iFrame, already setup."):(I(u),b(),M(),S(),Q(X(d)),j())}function D(t,u){K===null&&(K=setTimeout(function(){K=null,t()},u))}var J={};function Ce(t,u,M){J[M]||(J[M]=setTimeout(function(){J[M]=null,t()},u))}function Le(){function t(){function k(b){function S(j){return(i[b]&&i[b].iframe.style[j])==="0px"}function Z(j){return j.offsetParent!==null}i[b]&&Z(i[b].iframe)&&(S("height")||S("width"))&&C("Visibility change","resize",i[b].iframe,b)}Object.keys(i).forEach(function(b){k(b)})}function u(k){T("window","Mutation observed: "+k[0].target+" "+k[0].type),D(t,16)}function M(){var k=document.querySelector("body"),b={attributes:!0,attributeOldValue:!1,characterData:!0,characterDataOldValue:!1,childList:!0,subtree:!0},S=new s(u);S.observe(k,b)}var s=ce();s&&M()}function je(t){function u(){Fe("Window "+t,"resize")}T("window","Trigger event: "+t),D(u,16)}function Pe(){function t(){Fe("Tab Visible","resize")}document.visibilityState!=="hidden"&&(T("document","Trigger event: Visibility change"),D(t,16))}function Fe(t,u){function M(s){return i[s]&&i[s].resizeFrom==="parent"&&i[s].autoResize&&!i[s].firstRun}Object.keys(i).forEach(function(s){M(s)&&C(t,u,i[s].iframe,s)})}function We(){ne(window,"message",Se),ne(window,"resize",function(){je("resize")}),ne(document,"visibilitychange",Pe),ne(document,"-webkit-visibilitychange",Pe)}function ue(){function t(s,k){function b(){if(k.tagName){if(k.tagName.toUpperCase()!=="IFRAME")throw new TypeError("Expected <IFRAME> tag, found <"+k.tagName+">")}else throw new TypeError("Object is not a valid DOM element")}k&&(b(),he(k,s),M.push(k))}function u(s){s&&s.enablePublicMethods&&q("enablePublicMethods option has been removed, public methods are now always available in the iFrame")}var M;return U(),We(),function(k,b){switch(M=[],u(k),typeof b){case"undefined":case"string":{Array.prototype.forEach.call(document.querySelectorAll(b||"iframe"),t.bind(n,k));break}case"object":{t(k,b);break}default:throw new TypeError("Unexpected data type ("+typeof b+")")}return M}}function Be(t){t.fn?t.fn.iFrameResize||(t.fn.iFrameResize=function(M){function s(k,b){he(b,M)}return this.filter("iframe").each(s).end()}):ke("","Unable to bind to jQuery, it is not fully loaded.")}window.jQuery!==n&&Be(window.jQuery),typeof n=="function"&&n.amd?n([],ue):e.exports=ue(),window.iFrameResize=window.iFrameResize||ue()})()})(xn);var qn=xn.exports;const Qn=Mn(qn);var ln;const On=typeof window<"u",Yn=e=>typeof e=="string",Jn=()=>{};On&&((ln=window==null?void 0:window.navigator)!=null&&ln.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent);function Rn(e){return typeof e=="function"?e():fe(e)}function Zn(e){return e}function et(e){return Dn()?(jn(e),!0):!1}function Je(e){var n;const r=Rn(e);return(n=r==null?void 0:r.$el)!=null?n:r}const Nn=On?window:void 0;function nt(...e){let n,r,h,O;if(Yn(e[0])||Array.isArray(e[0])?([r,h,O]=e,n=Nn):[n,r,h,O]=e,!n)return Jn;Array.isArray(r)||(r=[r]),Array.isArray(h)||(h=[h]);const N=[],l=()=>{N.forEach(x=>x()),N.length=0},a=(x,V,i,K)=>(x.addEventListener(V,i,K),()=>x.removeEventListener(V,i,K)),p=Ze(()=>[Je(n),Rn(O)],([x,V])=>{l(),x&&N.push(...r.flatMap(i=>h.map(K=>a(x,i,K,V))))},{immediate:!0,flush:"post"}),y=()=>{p(),l()};return et(y),y}const un=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},fn="__vueuse_ssr_handlers__";un[fn]=un[fn]||{};function tt(e,{window:n=Nn,scrollTarget:r}={}){const h=xe(!1),O=()=>{if(!n)return;const N=n.document,l=Je(e);if(!l)h.value=!1;else{const a=l.getBoundingClientRect();h.value=a.top<=(n.innerHeight||N.documentElement.clientHeight)&&a.left<=(n.innerWidth||N.documentElement.clientWidth)&&a.bottom>=0&&a.right>=0}};return Ze(()=>Je(e),()=>O(),{immediate:!0,flush:"post"}),n&&nt(r||n,"scroll",O,{capture:!1,passive:!0}),h}var dn;(function(e){e.UP="UP",e.RIGHT="RIGHT",e.DOWN="DOWN",e.LEFT="LEFT",e.NONE="NONE"})(dn||(dn={}));var it=Object.defineProperty,gn=Object.getOwnPropertySymbols,rt=Object.prototype.hasOwnProperty,st=Object.prototype.propertyIsEnumerable,hn=(e,n,r)=>n in e?it(e,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[n]=r,ot=(e,n)=>{for(var r in n||(n={}))rt.call(n,r)&&hn(e,r,n[r]);if(gn)for(var r of gn(n))st.call(n,r)&&hn(e,r,n[r]);return e};const at={easeInSine:[.12,0,.39,0],easeOutSine:[.61,1,.88,1],easeInOutSine:[.37,0,.63,1],easeInQuad:[.11,0,.5,0],easeOutQuad:[.5,1,.89,1],easeInOutQuad:[.45,0,.55,1],easeInCubic:[.32,0,.67,0],easeOutCubic:[.33,1,.68,1],easeInOutCubic:[.65,0,.35,1],easeInQuart:[.5,0,.75,0],easeOutQuart:[.25,1,.5,1],easeInOutQuart:[.76,0,.24,1],easeInQuint:[.64,0,.78,0],easeOutQuint:[.22,1,.36,1],easeInOutQuint:[.83,0,.17,1],easeInExpo:[.7,0,.84,0],easeOutExpo:[.16,1,.3,1],easeInOutExpo:[.87,0,.13,1],easeInCirc:[.55,0,1,.45],easeOutCirc:[0,.55,.45,1],easeInOutCirc:[.85,0,.15,1],easeInBack:[.36,0,.66,-.56],easeOutBack:[.34,1.56,.64,1],easeInOutBack:[.68,-.6,.32,1.6]};ot({linear:Zn},at);var en={exports:{}};function nn(e){return e instanceof Map?e.clear=e.delete=e.set=function(){throw new Error("map is read-only")}:e instanceof Set&&(e.add=e.clear=e.delete=function(){throw new Error("set is read-only")}),Object.freeze(e),Object.getOwnPropertyNames(e).forEach(function(n){var r=e[n];typeof r=="object"&&!Object.isFrozen(r)&&nn(r)}),e}en.exports=nn;en.exports.default=nn;class pn{constructor(n){n.data===void 0&&(n.data={}),this.data=n.data,this.isMatchIgnored=!1}ignoreMatch(){this.isMatchIgnored=!0}}function Tn(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;")}function de(e,...n){const r=Object.create(null);for(const h in e)r[h]=e[h];return n.forEach(function(h){for(const O in h)r[O]=h[O]}),r}const ct="</span>",bn=e=>!!e.scope||e.sublanguage&&e.language,lt=(e,{prefix:n})=>{if(e.includes(".")){const r=e.split(".");return[`${n}${r.shift()}`,...r.map((h,O)=>`${h}${"_".repeat(O+1)}`)].join(" ")}return`${n}${e}`};class ut{constructor(n,r){this.buffer="",this.classPrefix=r.classPrefix,n.walk(this)}addText(n){this.buffer+=Tn(n)}openNode(n){if(!bn(n))return;let r="";n.sublanguage?r=`language-${n.language}`:r=lt(n.scope,{prefix:this.classPrefix}),this.span(r)}closeNode(n){bn(n)&&(this.buffer+=ct)}value(){return this.buffer}span(n){this.buffer+=`<span class="${n}">`}}const wn=(e={})=>{const n={children:[]};return Object.assign(n,e),n};class tn{constructor(){this.rootNode=wn(),this.stack=[this.rootNode]}get top(){return this.stack[this.stack.length-1]}get root(){return this.rootNode}add(n){this.top.children.push(n)}openNode(n){const r=wn({scope:n});this.add(r),this.stack.push(r)}closeNode(){if(this.stack.length>1)return this.stack.pop()}closeAllNodes(){for(;this.closeNode(););}toJSON(){return JSON.stringify(this.rootNode,null,4)}walk(n){return this.constructor._walk(n,this.rootNode)}static _walk(n,r){return typeof r=="string"?n.addText(r):r.children&&(n.openNode(r),r.children.forEach(h=>this._walk(n,h)),n.closeNode(r)),n}static _collapse(n){typeof n!="string"&&n.children&&(n.children.every(r=>typeof r=="string")?n.children=[n.children.join("")]:n.children.forEach(r=>{tn._collapse(r)}))}}class ft extends tn{constructor(n){super(),this.options=n}addKeyword(n,r){n!==""&&(this.openNode(r),this.addText(n),this.closeNode())}addText(n){n!==""&&this.add(n)}addSublanguage(n,r){const h=n.root;h.sublanguage=!0,h.language=r,this.add(h)}toHTML(){return new ut(this,this.options).value()}finalize(){return!0}}function Oe(e){return e?typeof e=="string"?e:e.source:null}function kn(e){return we("(?=",e,")")}function dt(e){return we("(?:",e,")*")}function gt(e){return we("(?:",e,")?")}function we(...e){return e.map(r=>Oe(r)).join("")}function ht(e){const n=e[e.length-1];return typeof n=="object"&&n.constructor===Object?(e.splice(e.length-1,1),n):{}}function rn(...e){return"("+(ht(e).capture?"":"?:")+e.map(h=>Oe(h)).join("|")+")"}function Sn(e){return new RegExp(e.toString()+"|").exec("").length-1}function pt(e,n){const r=e&&e.exec(n);return r&&r.index===0}const bt=/\[(?:[^\\\]]|\\.)*\]|\(\??|\\([1-9][0-9]*)|\\./;function sn(e,{joinWith:n}){let r=0;return e.map(h=>{r+=1;const O=r;let N=Oe(h),l="";for(;N.length>0;){const a=bt.exec(N);if(!a){l+=N;break}l+=N.substring(0,a.index),N=N.substring(a.index+a[0].length),a[0][0]==="\\"&&a[1]?l+="\\"+String(Number(a[1])+O):(l+=a[0],a[0]==="("&&r++)}return l}).map(h=>`(${h})`).join(n)}const wt=/\b\B/,In="[a-zA-Z]\\w*",on="[a-zA-Z_]\\w*",An="\\b\\d+(\\.\\d+)?",Cn="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",Ln="\\b(0b[01]+)",mt="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",Et=(e={})=>{const n=/^#![ ]*\//;return e.binary&&(e.begin=we(n,/.*\b/,e.binary,/\b.*/)),de({scope:"meta",begin:n,end:/$/,relevance:0,"on:begin":(r,h)=>{r.index!==0&&h.ignoreMatch()}},e)},Re={begin:"\\\\[\\s\\S]",relevance:0},yt={scope:"string",begin:"'",end:"'",illegal:"\\n",contains:[Re]},vt={scope:"string",begin:'"',end:'"',illegal:"\\n",contains:[Re]},_t={begin:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/},De=function(e,n,r={}){const h=de({scope:"comment",begin:e,end:n,contains:[]},r);h.contains.push({scope:"doctag",begin:"[ ]*(?=(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):)",end:/(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):/,excludeBegin:!0,relevance:0});const O=rn("I","a","is","so","us","to","at","if","in","it","on",/[A-Za-z]+['](d|ve|re|ll|t|s|n)/,/[A-Za-z]+[-][a-z]+/,/[A-Za-z][a-z]{2,}/);return h.contains.push({begin:we(/[ ]+/,"(",O,/[.]?[:]?([.][ ]|[ ])/,"){3}")}),h},Mt=De("//","$"),xt=De("/\\*","\\*/"),Ot=De("#","$"),Rt={scope:"number",begin:An,relevance:0},Nt={scope:"number",begin:Cn,relevance:0},Tt={scope:"number",begin:Ln,relevance:0},kt={begin:/(?=\/[^/\n]*\/)/,contains:[{scope:"regexp",begin:/\//,end:/\/[gimuy]*/,illegal:/\n/,contains:[Re,{begin:/\[/,end:/\]/,relevance:0,contains:[Re]}]}]},St={scope:"title",begin:In,relevance:0},It={scope:"title",begin:on,relevance:0},At={begin:"\\.\\s*"+on,relevance:0},Ct=function(e){return Object.assign(e,{"on:begin":(n,r)=>{r.data._beginMatch=n[1]},"on:end":(n,r)=>{r.data._beginMatch!==n[1]&&r.ignoreMatch()}})};var ze=Object.freeze({__proto__:null,MATCH_NOTHING_RE:wt,IDENT_RE:In,UNDERSCORE_IDENT_RE:on,NUMBER_RE:An,C_NUMBER_RE:Cn,BINARY_NUMBER_RE:Ln,RE_STARTERS_RE:mt,SHEBANG:Et,BACKSLASH_ESCAPE:Re,APOS_STRING_MODE:yt,QUOTE_STRING_MODE:vt,PHRASAL_WORDS_MODE:_t,COMMENT:De,C_LINE_COMMENT_MODE:Mt,C_BLOCK_COMMENT_MODE:xt,HASH_COMMENT_MODE:Ot,NUMBER_MODE:Rt,C_NUMBER_MODE:Nt,BINARY_NUMBER_MODE:Tt,REGEXP_MODE:kt,TITLE_MODE:St,UNDERSCORE_TITLE_MODE:It,METHOD_GUARD:At,END_SAME_AS_BEGIN:Ct});function Lt(e,n){e.input[e.index-1]==="."&&n.ignoreMatch()}function Pt(e,n){e.className!==void 0&&(e.scope=e.className,delete e.className)}function Ft(e,n){n&&e.beginKeywords&&(e.begin="\\b("+e.beginKeywords.split(" ").join("|")+")(?!\\.)(?=\\b|\\s)",e.__beforeBegin=Lt,e.keywords=e.keywords||e.beginKeywords,delete e.beginKeywords,e.relevance===void 0&&(e.relevance=0))}function Bt(e,n){Array.isArray(e.illegal)&&(e.illegal=rn(...e.illegal))}function zt(e,n){if(e.match){if(e.begin||e.end)throw new Error("begin & end are not supported with match");e.begin=e.match,delete e.match}}function Ht(e,n){e.relevance===void 0&&(e.relevance=1)}const Dt=(e,n)=>{if(!e.beforeMatch)return;if(e.starts)throw new Error("beforeMatch cannot be used with starts");const r=Object.assign({},e);Object.keys(e).forEach(h=>{delete e[h]}),e.keywords=r.keywords,e.begin=we(r.beforeMatch,kn(r.begin)),e.starts={relevance:0,contains:[Object.assign(r,{endsParent:!0})]},e.relevance=0,delete r.beforeMatch},jt=["of","and","for","in","not","or","if","then","parent","list","value"],Wt="keyword";function Pn(e,n,r=Wt){const h=Object.create(null);return typeof e=="string"?O(r,e.split(" ")):Array.isArray(e)?O(r,e):Object.keys(e).forEach(function(N){Object.assign(h,Pn(e[N],n,N))}),h;function O(N,l){n&&(l=l.map(a=>a.toLowerCase())),l.forEach(function(a){const p=a.split("|");h[p[0]]=[N,Ut(p[0],p[1])]})}}function Ut(e,n){return n?Number(n):Gt(e)?0:1}function Gt(e){return jt.includes(e.toLowerCase())}const mn={},be=e=>{console.error(e)},En=(e,...n)=>{console.log(`WARN: ${e}`,...n)},_e=(e,n)=>{mn[`${e}/${n}`]||(console.log(`Deprecated as of ${e}. ${n}`),mn[`${e}/${n}`]=!0)},He=new Error;function Fn(e,n,{key:r}){let h=0;const O=e[r],N={},l={};for(let a=1;a<=n.length;a++)l[a+h]=O[a],N[a+h]=!0,h+=Sn(n[a-1]);e[r]=l,e[r]._emit=N,e[r]._multi=!0}function $t(e){if(Array.isArray(e.begin)){if(e.skip||e.excludeBegin||e.returnBegin)throw be("skip, excludeBegin, returnBegin not compatible with beginScope: {}"),He;if(typeof e.beginScope!="object"||e.beginScope===null)throw be("beginScope must be object"),He;Fn(e,e.begin,{key:"beginScope"}),e.begin=sn(e.begin,{joinWith:""})}}function Vt(e){if(Array.isArray(e.end)){if(e.skip||e.excludeEnd||e.returnEnd)throw be("skip, excludeEnd, returnEnd not compatible with endScope: {}"),He;if(typeof e.endScope!="object"||e.endScope===null)throw be("endScope must be object"),He;Fn(e,e.end,{key:"endScope"}),e.end=sn(e.end,{joinWith:""})}}function Kt(e){e.scope&&typeof e.scope=="object"&&e.scope!==null&&(e.beginScope=e.scope,delete e.scope)}function Xt(e){Kt(e),typeof e.beginScope=="string"&&(e.beginScope={_wrap:e.beginScope}),typeof e.endScope=="string"&&(e.endScope={_wrap:e.endScope}),$t(e),Vt(e)}function qt(e){function n(l,a){return new RegExp(Oe(l),"m"+(e.case_insensitive?"i":"")+(e.unicodeRegex?"u":"")+(a?"g":""))}class r{constructor(){this.matchIndexes={},this.regexes=[],this.matchAt=1,this.position=0}addRule(a,p){p.position=this.position++,this.matchIndexes[this.matchAt]=p,this.regexes.push([p,a]),this.matchAt+=Sn(a)+1}compile(){this.regexes.length===0&&(this.exec=()=>null);const a=this.regexes.map(p=>p[1]);this.matcherRe=n(sn(a,{joinWith:"|"}),!0),this.lastIndex=0}exec(a){this.matcherRe.lastIndex=this.lastIndex;const p=this.matcherRe.exec(a);if(!p)return null;const y=p.findIndex((V,i)=>i>0&&V!==void 0),x=this.matchIndexes[y];return p.splice(0,y),Object.assign(p,x)}}class h{constructor(){this.rules=[],this.multiRegexes=[],this.count=0,this.lastIndex=0,this.regexIndex=0}getMatcher(a){if(this.multiRegexes[a])return this.multiRegexes[a];const p=new r;return this.rules.slice(a).forEach(([y,x])=>p.addRule(y,x)),p.compile(),this.multiRegexes[a]=p,p}resumingScanAtSamePosition(){return this.regexIndex!==0}considerAll(){this.regexIndex=0}addRule(a,p){this.rules.push([a,p]),p.type==="begin"&&this.count++}exec(a){const p=this.getMatcher(this.regexIndex);p.lastIndex=this.lastIndex;let y=p.exec(a);if(this.resumingScanAtSamePosition()&&!(y&&y.index===this.lastIndex)){const x=this.getMatcher(0);x.lastIndex=this.lastIndex+1,y=x.exec(a)}return y&&(this.regexIndex+=y.position+1,this.regexIndex===this.count&&this.considerAll()),y}}function O(l){const a=new h;return l.contains.forEach(p=>a.addRule(p.begin,{rule:p,type:"begin"})),l.terminatorEnd&&a.addRule(l.terminatorEnd,{type:"end"}),l.illegal&&a.addRule(l.illegal,{type:"illegal"}),a}function N(l,a){const p=l;if(l.isCompiled)return p;[Pt,zt,Xt,Dt].forEach(x=>x(l,a)),e.compilerExtensions.forEach(x=>x(l,a)),l.__beforeBegin=null,[Ft,Bt,Ht].forEach(x=>x(l,a)),l.isCompiled=!0;let y=null;return typeof l.keywords=="object"&&l.keywords.$pattern&&(l.keywords=Object.assign({},l.keywords),y=l.keywords.$pattern,delete l.keywords.$pattern),y=y||/\w+/,l.keywords&&(l.keywords=Pn(l.keywords,e.case_insensitive)),p.keywordPatternRe=n(y,!0),a&&(l.begin||(l.begin=/\B|\b/),p.beginRe=n(p.begin),!l.end&&!l.endsWithParent&&(l.end=/\B|\b/),l.end&&(p.endRe=n(p.end)),p.terminatorEnd=Oe(p.end)||"",l.endsWithParent&&a.terminatorEnd&&(p.terminatorEnd+=(l.end?"|":"")+a.terminatorEnd)),l.illegal&&(p.illegalRe=n(l.illegal)),l.contains||(l.contains=[]),l.contains=[].concat(...l.contains.map(function(x){return Qt(x==="self"?l:x)})),l.contains.forEach(function(x){N(x,p)}),l.starts&&N(l.starts,a),p.matcher=O(p),p}if(e.compilerExtensions||(e.compilerExtensions=[]),e.contains&&e.contains.includes("self"))throw new Error("ERR: contains `self` is not supported at the top-level of a language.  See documentation.");return e.classNameAliases=de(e.classNameAliases||{}),N(e)}function Bn(e){return e?e.endsWithParent||Bn(e.starts):!1}function Qt(e){return e.variants&&!e.cachedVariants&&(e.cachedVariants=e.variants.map(function(n){return de(e,{variants:null},n)})),e.cachedVariants?e.cachedVariants:Bn(e)?de(e,{starts:e.starts?de(e.starts):null}):Object.isFrozen(e)?de(e):e}var Yt="11.7.0";class Jt extends Error{constructor(n,r){super(n),this.name="HTMLInjectionError",this.html=r}}const Ye=Tn,yn=de,vn=Symbol("nomatch"),Zt=7,ei=function(e){const n=Object.create(null),r=Object.create(null),h=[];let O=!0;const N="Could not find the language '{}', did you forget to load/include a language module?",l={disableAutodetect:!0,name:"Plain text",contains:[]};let a={ignoreUnescapedHTML:!1,throwUnescapedHTML:!1,noHighlightRe:/^(no-?highlight)$/i,languageDetectRe:/\blang(?:uage)?-([\w-]+)\b/i,classPrefix:"hljs-",cssSelector:"pre code",languages:null,__emitter:ft};function p(o){return a.noHighlightRe.test(o)}function y(o){let w=o.className+" ";w+=o.parentNode?o.parentNode.className:"";const R=a.languageDetectRe.exec(w);if(R){const L=Y(R[1]);return L||(En(N.replace("{}",R[1])),En("Falling back to no-highlight mode for this block.",o)),L?R[1]:"no-highlight"}return w.split(/\s+/).find(L=>p(L)||Y(L))}function x(o,w,R){let L="",C="";typeof w=="object"?(L=o,R=w.ignoreIllegals,C=w.language):(_e("10.7.0","highlight(lang, code, ...args) has been deprecated."),_e("10.7.0",`Please use highlight(code, options) instead.
+import zn from"./DocsLink._8mcEyeM.js";import{_ as Hn}from"./RplIcon.vue.PZ-X7Qhh.js";import{N as fe,X as Dn,Y as jn,r as xe,Z as Ze,d as Wn,o as Un,J as Ee,v as Gn,H as $n,b as ye,c as ve,g as Ke,w as cn,D as Xe,f as qe,e as Qe,$ as Vn,n as Kn}from"./entry.Do8xnxHS.js";import{g as Mn}from"./_commonjsHelpers.5-cIlDoe.js";import{_ as Xn}from"./_plugin-vue_export-helper.x3n3nnut.js";import"./RplTextLink.css.vnmpcBOe.js";import"./RplLink.vue.3IdzOFUB.js";var xn={exports:{}};(function(e){(function(n){if(typeof window>"u")return;var r=0,h=!1,O=!1,N="message",l=N.length,a="[iFrameSizer]",p=a.length,y=null,x=window.requestAnimationFrame,V=Object.freeze({max:1,scroll:1,bodyScroll:1,documentElementScroll:1}),i={},K=null,oe=Object.freeze({autoResize:!0,bodyBackground:null,bodyMargin:null,bodyMarginV1:8,bodyPadding:null,checkOrigin:!0,inPageLinks:!1,enablePublicMethods:!0,heightCalculationMethod:"bodyOffset",id:"iFrameResizer",interval:32,log:!1,maxHeight:1/0,maxWidth:1/0,minHeight:0,minWidth:0,mouseEvents:!0,resizeFrom:"parent",scrolling:!1,sizeHeight:!0,sizeWidth:!1,warningTimeout:5e3,tolerance:0,widthCalculationMethod:"scroll",onClose:function(){return!0},onClosed:function(){},onInit:function(){},onMessage:function(){q("onMessage function not defined")},onMouseEnter:function(){},onMouseLeave:function(){},onResized:function(){},onScroll:function(){return!0}});function ce(){return window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver}function ne(t,u,M){t.addEventListener(u,M,!1)}function H(t,u,M){t.removeEventListener(u,M,!1)}function U(){var t=["moz","webkit","o","ms"],u;for(u=0;u<t.length&&!x;u+=1)x=window[t[u]+"RequestAnimationFrame"];x?x=x.bind(window):T("setup","RequestAnimationFrame not supported")}function re(t){var u="Host page: "+t;return window.top!==window.self&&(u=window.parentIFrame&&window.parentIFrame.getId?window.parentIFrame.getId()+": "+t:"Nested host page: "+t),u}function le(t){return a+"["+re(t)+"]"}function Te(t){return i[t]?i[t].log:h}function T(t,u){Y("log",t,u,Te(t))}function ke(t,u){Y("info",t,u,Te(t))}function q(t,u){Y("warn",t,u,!0)}function Y(t,u,M,s){s===!0&&typeof window.console=="object"&&console[t](le(u),M)}function Se(t){function u(){function f(){R(A),Ae(E),pe("onResized",A)}b("Height"),b("Width"),L(f,A,"init")}function M(){var f=ie.slice(p).split(":"),_=f[1]?parseInt(f[1],10):0,P=i[f[0]]&&i[f[0]].iframe,F=getComputedStyle(P);return{iframe:P,id:f[0],height:_+s(F)+k(F),width:f[2],type:f[3]}}function s(f){if(f.boxSizing!=="border-box")return 0;var _=f.paddingTop?parseInt(f.paddingTop,10):0,P=f.paddingBottom?parseInt(f.paddingBottom,10):0;return _+P}function k(f){if(f.boxSizing!=="border-box")return 0;var _=f.borderTopWidth?parseInt(f.borderTopWidth,10):0,P=f.borderBottomWidth?parseInt(f.borderBottomWidth,10):0;return _+P}function b(f){var _=Number(i[E]["max"+f]),P=Number(i[E]["min"+f]),F=f.toLowerCase(),W=Number(A[F]);T(E,"Checking "+F+" is in range "+P+"-"+_),W<P&&(W=P,T(E,"Set "+F+" to min value")),W>_&&(W=_,T(E,"Set "+F+" to max value")),A[F]=""+W}function S(){function f(){function F(){var $=0,ae=!1;for(T(E,"Checking connection is from allowed list of origins: "+P);$<P.length;$++)if(P[$]===_){ae=!0;break}return ae}function W(){var $=i[E]&&i[E].remoteHost;return T(E,"Checking connection is from: "+$),_===$}return P.constructor===Array?F():W()}var _=t.origin,P=i[E]&&i[E].checkOrigin;if(P&&""+_!="null"&&!f())throw new Error("Unexpected message received from: "+_+" for "+A.iframe.id+". Message was: "+t.data+". This error can be disabled by setting the checkOrigin: false option or by providing of array of trusted domains.");return!0}function Z(){return a===(""+ie).slice(0,p)&&ie.slice(p).split(":")[0]in i}function j(){var f=A.type in{true:1,false:1,undefined:1};return f&&T(E,"Ignoring init message from meta parent page"),f}function Q(f){return ie.slice(ie.indexOf(":")+l+f)}function ee(f){T(E,"onMessage passed: {iframe: "+A.iframe.id+", message: "+f+"}"),pe("onMessage",{iframe:A.iframe,message:JSON.parse(f)}),T(E,"--")}function c(){var f=document.body.getBoundingClientRect(),_=A.iframe.getBoundingClientRect();return JSON.stringify({iframeHeight:_.height,iframeWidth:_.width,clientHeight:Math.max(document.documentElement.clientHeight,window.innerHeight||0),clientWidth:Math.max(document.documentElement.clientWidth,window.innerWidth||0),offsetTop:parseInt(_.top-f.top,10),offsetLeft:parseInt(_.left-f.left,10),scrollTop:window.pageYOffset,scrollLeft:window.pageXOffset,documentHeight:document.documentElement.clientHeight,documentWidth:document.documentElement.clientWidth,windowHeight:window.innerHeight,windowWidth:window.innerWidth})}function g(f,_){function P(){C("Send Page Info","pageInfo:"+c(),f,_)}Ce(P,32,_)}function v(){function f(W,$){function ae(){i[F]?g(i[F].iframe,F):_()}["scroll","resize"].forEach(function(an){T(F,W+an+" listener for sendPageInfo"),$(window,an,ae)})}function _(){f("Remove ",H)}function P(){f("Add ",ne)}var F=E;P(),i[F]&&(i[F].stopPageInfo=_)}function I(){i[E]&&i[E].stopPageInfo&&(i[E].stopPageInfo(),delete i[E].stopPageInfo)}function z(){var f=!0;return A.iframe===null&&(q(E,"IFrame ("+A.id+") not found"),f=!1),f}function d(f){var _=f.getBoundingClientRect();return ge(E),{x:Math.floor(Number(_.left)+Number(y.x)),y:Math.floor(Number(_.top)+Number(y.y))}}function m(f){function _(){y=$,B(),T(E,"--")}function P(){return{x:Number(A.width)+W.x,y:Number(A.height)+W.y}}function F(){window.parentIFrame?window.parentIFrame["scrollTo"+(f?"Offset":"")]($.x,$.y):q(E,"Unable to scroll to requested position, window.parentIFrame not found")}var W=f?d(A.iframe):{x:0,y:0},$=P();T(E,"Reposition requested from iFrame (offset x:"+W.x+" y:"+W.y+")"),window.top===window.self?_():F()}function B(){pe("onScroll",y)===!1?o():Ae(E)}function G(f){function _(){var ae=d($);T(E,"Moving to in page link (#"+F+") at x: "+ae.x+" y: "+ae.y),y={x:ae.x,y:ae.y},B(),T(E,"--")}function P(){window.parentIFrame?window.parentIFrame.moveToAnchor(F):T(E,"In page link #"+F+" not found and window.parentIFrame not found")}var F=f.split("#")[1]||"",W=decodeURIComponent(F),$=document.getElementById(W)||document.getElementsByName(W)[0];$?_():window.top===window.self?T(E,"In page link #"+F+" not found"):P()}function te(f){var _={};if(Number(A.width)===0&&Number(A.height)===0){var P=Q(9).split(":");_={x:P[1],y:P[0]}}else _={x:A.width,y:A.height};pe(f,{iframe:A.iframe,screenX:Number(_.x),screenY:Number(_.y),type:A.type})}function pe(f,_){return me(E,f,_)}function Ue(){switch(i[E]&&i[E].firstRun&&Ve(),A.type){case"close":{Me(A.iframe);break}case"message":{ee(Q(6));break}case"mouseenter":{te("onMouseEnter");break}case"mouseleave":{te("onMouseLeave");break}case"autoResize":{i[E].autoResize=JSON.parse(Q(9));break}case"scrollTo":{m(!1);break}case"scrollToOffset":{m(!0);break}case"pageInfo":{g(i[E]&&i[E].iframe,E),v();break}case"pageInfoStop":{I();break}case"inPageLink":{G(Q(9));break}case"reset":{w(A);break}case"init":{u(),pe("onInit",A.iframe);break}default:Number(A.width)===0&&Number(A.height)===0?q("Unsupported message received ("+A.type+"), this is likely due to the iframe containing a later version of iframe-resizer than the parent page"):u()}}function Ge(f){var _=!0;return i[f]||(_=!1,q(A.type+" No settings for "+f+". Message was: "+ie)),_}function $e(){for(var f in i)C("iFrame requested init",X(f),i[f].iframe,f)}function Ve(){i[E]&&(i[E].firstRun=!1)}var ie=t.data,A={},E=null;ie==="[iFrameResizerChild]Ready"?$e():Z()?(A=M(),E=A.id,i[E]&&(i[E].loaded=!0),!j()&&Ge(E)&&(T(E,"Received: "+ie),z()&&S()&&Ue())):ke(E,"Ignored: "+ie)}function me(t,u,M){var s=null,k=null;if(i[t])if(s=i[t][u],typeof s=="function")k=s(M);else throw new TypeError(u+" on iFrame["+t+"] is not a function");return k}function Ie(t){var u=t.id;delete i[u]}function Me(t){var u=t.id;if(me(u,"onClose",u)===!1){T(u,"Close iframe cancelled by onClose event");return}T(u,"Removing iFrame: "+u);try{t.parentNode&&t.parentNode.removeChild(t)}catch(M){q(M)}me(u,"onClosed",u),T(u,"--"),Ie(t)}function ge(t){y===null&&(y={x:window.pageXOffset===n?document.documentElement.scrollLeft:window.pageXOffset,y:window.pageYOffset===n?document.documentElement.scrollTop:window.pageYOffset},T(t,"Get page position: "+y.x+","+y.y))}function Ae(t){y!==null&&(window.scrollTo(y.x,y.y),T(t,"Set page position: "+y.x+","+y.y),o())}function o(){y=null}function w(t){function u(){R(t),C("reset","reset",t.iframe,t.id)}T(t.id,"Size reset requested by "+(t.type==="init"?"host page":"iFrame")),ge(t.id),L(u,t,"reset")}function R(t){function u(b){if(!t.id){T("undefined","messageData id not set");return}t.iframe.style[b]=t[b]+"px",T(t.id,"IFrame ("+k+") "+b+" set to "+t[b]+"px")}function M(b){!O&&t[b]==="0"&&(O=!0,T(k,"Hidden iFrame detected, creating visibility listener"),Le())}function s(b){u(b),M(b)}var k=t.iframe.id;i[k]&&(i[k].sizeHeight&&s("height"),i[k].sizeWidth&&s("width"))}function L(t,u,M){M!==u.type&&x&&!window.jasmine?(T(u.id,"Requesting animation frame"),x(t)):t()}function C(t,u,M,s,k){function b(){var ee=i[s]&&i[s].targetOrigin;T(s,"["+t+"] Sending msg to iframe["+s+"] ("+u+") targetOrigin: "+ee),M.contentWindow.postMessage(a+u,ee)}function S(){q(s,"["+t+"] IFrame("+s+") not found")}function Z(){M&&"contentWindow"in M&&M.contentWindow!==null?b():S()}function j(){function ee(){i[s]&&!i[s].loaded&&!Q&&(Q=!0,q(s,"IFrame has not responded within "+i[s].warningTimeout/1e3+" seconds. Check iFrameResizer.contentWindow.js has been loaded in iFrame. This message can be ignored if everything is working, or you can set the warningTimeout option to a higher value or zero to suppress this warning."))}k&&i[s]&&i[s].warningTimeout&&(i[s].msgTimeout=setTimeout(ee,i[s].warningTimeout))}var Q=!1;s=s||M.id,i[s]&&(Z(),j())}function X(t){return t+":"+i[t].bodyMarginV1+":"+i[t].sizeWidth+":"+i[t].log+":"+i[t].interval+":"+i[t].enablePublicMethods+":"+i[t].autoResize+":"+i[t].bodyMargin+":"+i[t].heightCalculationMethod+":"+i[t].bodyBackground+":"+i[t].bodyPadding+":"+i[t].tolerance+":"+i[t].inPageLinks+":"+i[t].resizeFrom+":"+i[t].widthCalculationMethod+":"+i[t].mouseEvents}function se(t){return typeof t=="number"}function he(t,u){function M(){function m(G){var te=i[d][G];te!==1/0&&te!==0&&(t.style[G]=se(te)?te+"px":te,T(d,"Set "+G+" = "+t.style[G]))}function B(G){if(i[d]["min"+G]>i[d]["max"+G])throw new Error("Value for min"+G+" can not be greater than max"+G)}B("Height"),B("Width"),m("maxHeight"),m("minHeight"),m("maxWidth"),m("minWidth")}function s(){var m=u&&u.id||oe.id+r++;return document.getElementById(m)!==null&&(m+=r++),m}function k(m){if(typeof m!="string")throw new TypeError("Invaild id for iFrame. Expected String");return m===""&&(t.id=m=s(),h=(u||{}).log,T(m,"Added missing iframe ID: "+m+" ("+t.src+")")),m}function b(){switch(T(d,"IFrame scrolling "+(i[d]&&i[d].scrolling?"enabled":"disabled")+" for "+d),t.style.overflow=(i[d]&&i[d].scrolling)===!1?"hidden":"auto",i[d]&&i[d].scrolling){case"omit":break;case!0:{t.scrolling="yes";break}case!1:{t.scrolling="no";break}default:t.scrolling=i[d]?i[d].scrolling:"no"}}function S(){(typeof(i[d]&&i[d].bodyMargin)=="number"||(i[d]&&i[d].bodyMargin)==="0")&&(i[d].bodyMarginV1=i[d].bodyMargin,i[d].bodyMargin=""+i[d].bodyMargin+"px")}function Z(){var m=i[d]&&i[d].firstRun,B=i[d]&&i[d].heightCalculationMethod in V;!m&&B&&w({iframe:t,height:0,width:0,type:"init"})}function j(){i[d]&&(i[d].iframe.iFrameResizer={close:Me.bind(null,i[d].iframe),removeListeners:Ie.bind(null,i[d].iframe),resize:C.bind(null,"Window resize","resize",i[d].iframe),moveToAnchor:function(m){C("Move to anchor","moveToAnchor:"+m,i[d].iframe,d)},sendMessage:function(m){m=JSON.stringify(m),C("Send Message","message:"+m,i[d].iframe,d)}})}function Q(m){function B(){C("iFrame.onload",m,t,n,!0),Z()}function G(pe){if(t.parentNode){var Ue=new pe(function(Ge){Ge.forEach(function($e){var Ve=Array.prototype.slice.call($e.removedNodes);Ve.forEach(function(ie){ie===t&&Me(t)})})});Ue.observe(t.parentNode,{childList:!0})}}var te=ce();te&&G(te),ne(t,"load",B),C("init",m,t,n,!0)}function ee(m){if(typeof m!="object")throw new TypeError("Options is not an object")}function c(m){for(var B in oe)Object.prototype.hasOwnProperty.call(oe,B)&&(i[d][B]=Object.prototype.hasOwnProperty.call(m,B)?m[B]:oe[B])}function g(m){return m===""||m.match(/^(about:blank|javascript:|file:\/\/)/)!==null?"*":m}function v(m){var B=m.split("Callback");if(B.length===2){var G="on"+B[0].charAt(0).toUpperCase()+B[0].slice(1);this[G]=this[m],delete this[m],q(d,"Deprecated: '"+m+"' has been renamed '"+G+"'. The old method will be removed in the next major version.")}}function I(m){m=m||{},i[d]=Object.create(null),i[d].iframe=t,i[d].firstRun=!0,i[d].remoteHost=t.src&&t.src.split("/").slice(0,3).join("/"),ee(m),Object.keys(m).forEach(v,m),c(m),i[d]&&(i[d].targetOrigin=i[d].checkOrigin===!0?g(i[d].remoteHost):"*")}function z(){return d in i&&"iFrameResizer"in t}var d=k(t.id);z()?q(d,"Ignored iFrame, already setup."):(I(u),b(),M(),S(),Q(X(d)),j())}function D(t,u){K===null&&(K=setTimeout(function(){K=null,t()},u))}var J={};function Ce(t,u,M){J[M]||(J[M]=setTimeout(function(){J[M]=null,t()},u))}function Le(){function t(){function k(b){function S(j){return(i[b]&&i[b].iframe.style[j])==="0px"}function Z(j){return j.offsetParent!==null}i[b]&&Z(i[b].iframe)&&(S("height")||S("width"))&&C("Visibility change","resize",i[b].iframe,b)}Object.keys(i).forEach(function(b){k(b)})}function u(k){T("window","Mutation observed: "+k[0].target+" "+k[0].type),D(t,16)}function M(){var k=document.querySelector("body"),b={attributes:!0,attributeOldValue:!1,characterData:!0,characterDataOldValue:!1,childList:!0,subtree:!0},S=new s(u);S.observe(k,b)}var s=ce();s&&M()}function je(t){function u(){Fe("Window "+t,"resize")}T("window","Trigger event: "+t),D(u,16)}function Pe(){function t(){Fe("Tab Visible","resize")}document.visibilityState!=="hidden"&&(T("document","Trigger event: Visibility change"),D(t,16))}function Fe(t,u){function M(s){return i[s]&&i[s].resizeFrom==="parent"&&i[s].autoResize&&!i[s].firstRun}Object.keys(i).forEach(function(s){M(s)&&C(t,u,i[s].iframe,s)})}function We(){ne(window,"message",Se),ne(window,"resize",function(){je("resize")}),ne(document,"visibilitychange",Pe),ne(document,"-webkit-visibilitychange",Pe)}function ue(){function t(s,k){function b(){if(k.tagName){if(k.tagName.toUpperCase()!=="IFRAME")throw new TypeError("Expected <IFRAME> tag, found <"+k.tagName+">")}else throw new TypeError("Object is not a valid DOM element")}k&&(b(),he(k,s),M.push(k))}function u(s){s&&s.enablePublicMethods&&q("enablePublicMethods option has been removed, public methods are now always available in the iFrame")}var M;return U(),We(),function(k,b){switch(M=[],u(k),typeof b){case"undefined":case"string":{Array.prototype.forEach.call(document.querySelectorAll(b||"iframe"),t.bind(n,k));break}case"object":{t(k,b);break}default:throw new TypeError("Unexpected data type ("+typeof b+")")}return M}}function Be(t){t.fn?t.fn.iFrameResize||(t.fn.iFrameResize=function(M){function s(k,b){he(b,M)}return this.filter("iframe").each(s).end()}):ke("","Unable to bind to jQuery, it is not fully loaded.")}window.jQuery!==n&&Be(window.jQuery),typeof n=="function"&&n.amd?n([],ue):e.exports=ue(),window.iFrameResize=window.iFrameResize||ue()})()})(xn);var qn=xn.exports;const Qn=Mn(qn);var ln;const On=typeof window<"u",Yn=e=>typeof e=="string",Jn=()=>{};On&&((ln=window==null?void 0:window.navigator)!=null&&ln.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent);function Rn(e){return typeof e=="function"?e():fe(e)}function Zn(e){return e}function et(e){return Dn()?(jn(e),!0):!1}function Je(e){var n;const r=Rn(e);return(n=r==null?void 0:r.$el)!=null?n:r}const Nn=On?window:void 0;function nt(...e){let n,r,h,O;if(Yn(e[0])||Array.isArray(e[0])?([r,h,O]=e,n=Nn):[n,r,h,O]=e,!n)return Jn;Array.isArray(r)||(r=[r]),Array.isArray(h)||(h=[h]);const N=[],l=()=>{N.forEach(x=>x()),N.length=0},a=(x,V,i,K)=>(x.addEventListener(V,i,K),()=>x.removeEventListener(V,i,K)),p=Ze(()=>[Je(n),Rn(O)],([x,V])=>{l(),x&&N.push(...r.flatMap(i=>h.map(K=>a(x,i,K,V))))},{immediate:!0,flush:"post"}),y=()=>{p(),l()};return et(y),y}const un=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},fn="__vueuse_ssr_handlers__";un[fn]=un[fn]||{};function tt(e,{window:n=Nn,scrollTarget:r}={}){const h=xe(!1),O=()=>{if(!n)return;const N=n.document,l=Je(e);if(!l)h.value=!1;else{const a=l.getBoundingClientRect();h.value=a.top<=(n.innerHeight||N.documentElement.clientHeight)&&a.left<=(n.innerWidth||N.documentElement.clientWidth)&&a.bottom>=0&&a.right>=0}};return Ze(()=>Je(e),()=>O(),{immediate:!0,flush:"post"}),n&&nt(r||n,"scroll",O,{capture:!1,passive:!0}),h}var dn;(function(e){e.UP="UP",e.RIGHT="RIGHT",e.DOWN="DOWN",e.LEFT="LEFT",e.NONE="NONE"})(dn||(dn={}));var it=Object.defineProperty,gn=Object.getOwnPropertySymbols,rt=Object.prototype.hasOwnProperty,st=Object.prototype.propertyIsEnumerable,hn=(e,n,r)=>n in e?it(e,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[n]=r,ot=(e,n)=>{for(var r in n||(n={}))rt.call(n,r)&&hn(e,r,n[r]);if(gn)for(var r of gn(n))st.call(n,r)&&hn(e,r,n[r]);return e};const at={easeInSine:[.12,0,.39,0],easeOutSine:[.61,1,.88,1],easeInOutSine:[.37,0,.63,1],easeInQuad:[.11,0,.5,0],easeOutQuad:[.5,1,.89,1],easeInOutQuad:[.45,0,.55,1],easeInCubic:[.32,0,.67,0],easeOutCubic:[.33,1,.68,1],easeInOutCubic:[.65,0,.35,1],easeInQuart:[.5,0,.75,0],easeOutQuart:[.25,1,.5,1],easeInOutQuart:[.76,0,.24,1],easeInQuint:[.64,0,.78,0],easeOutQuint:[.22,1,.36,1],easeInOutQuint:[.83,0,.17,1],easeInExpo:[.7,0,.84,0],easeOutExpo:[.16,1,.3,1],easeInOutExpo:[.87,0,.13,1],easeInCirc:[.55,0,1,.45],easeOutCirc:[0,.55,.45,1],easeInOutCirc:[.85,0,.15,1],easeInBack:[.36,0,.66,-.56],easeOutBack:[.34,1.56,.64,1],easeInOutBack:[.68,-.6,.32,1.6]};ot({linear:Zn},at);var en={exports:{}};function nn(e){return e instanceof Map?e.clear=e.delete=e.set=function(){throw new Error("map is read-only")}:e instanceof Set&&(e.add=e.clear=e.delete=function(){throw new Error("set is read-only")}),Object.freeze(e),Object.getOwnPropertyNames(e).forEach(function(n){var r=e[n];typeof r=="object"&&!Object.isFrozen(r)&&nn(r)}),e}en.exports=nn;en.exports.default=nn;class pn{constructor(n){n.data===void 0&&(n.data={}),this.data=n.data,this.isMatchIgnored=!1}ignoreMatch(){this.isMatchIgnored=!0}}function Tn(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;")}function de(e,...n){const r=Object.create(null);for(const h in e)r[h]=e[h];return n.forEach(function(h){for(const O in h)r[O]=h[O]}),r}const ct="</span>",bn=e=>!!e.scope||e.sublanguage&&e.language,lt=(e,{prefix:n})=>{if(e.includes(".")){const r=e.split(".");return[`${n}${r.shift()}`,...r.map((h,O)=>`${h}${"_".repeat(O+1)}`)].join(" ")}return`${n}${e}`};class ut{constructor(n,r){this.buffer="",this.classPrefix=r.classPrefix,n.walk(this)}addText(n){this.buffer+=Tn(n)}openNode(n){if(!bn(n))return;let r="";n.sublanguage?r=`language-${n.language}`:r=lt(n.scope,{prefix:this.classPrefix}),this.span(r)}closeNode(n){bn(n)&&(this.buffer+=ct)}value(){return this.buffer}span(n){this.buffer+=`<span class="${n}">`}}const wn=(e={})=>{const n={children:[]};return Object.assign(n,e),n};class tn{constructor(){this.rootNode=wn(),this.stack=[this.rootNode]}get top(){return this.stack[this.stack.length-1]}get root(){return this.rootNode}add(n){this.top.children.push(n)}openNode(n){const r=wn({scope:n});this.add(r),this.stack.push(r)}closeNode(){if(this.stack.length>1)return this.stack.pop()}closeAllNodes(){for(;this.closeNode(););}toJSON(){return JSON.stringify(this.rootNode,null,4)}walk(n){return this.constructor._walk(n,this.rootNode)}static _walk(n,r){return typeof r=="string"?n.addText(r):r.children&&(n.openNode(r),r.children.forEach(h=>this._walk(n,h)),n.closeNode(r)),n}static _collapse(n){typeof n!="string"&&n.children&&(n.children.every(r=>typeof r=="string")?n.children=[n.children.join("")]:n.children.forEach(r=>{tn._collapse(r)}))}}class ft extends tn{constructor(n){super(),this.options=n}addKeyword(n,r){n!==""&&(this.openNode(r),this.addText(n),this.closeNode())}addText(n){n!==""&&this.add(n)}addSublanguage(n,r){const h=n.root;h.sublanguage=!0,h.language=r,this.add(h)}toHTML(){return new ut(this,this.options).value()}finalize(){return!0}}function Oe(e){return e?typeof e=="string"?e:e.source:null}function kn(e){return we("(?=",e,")")}function dt(e){return we("(?:",e,")*")}function gt(e){return we("(?:",e,")?")}function we(...e){return e.map(r=>Oe(r)).join("")}function ht(e){const n=e[e.length-1];return typeof n=="object"&&n.constructor===Object?(e.splice(e.length-1,1),n):{}}function rn(...e){return"("+(ht(e).capture?"":"?:")+e.map(h=>Oe(h)).join("|")+")"}function Sn(e){return new RegExp(e.toString()+"|").exec("").length-1}function pt(e,n){const r=e&&e.exec(n);return r&&r.index===0}const bt=/\[(?:[^\\\]]|\\.)*\]|\(\??|\\([1-9][0-9]*)|\\./;function sn(e,{joinWith:n}){let r=0;return e.map(h=>{r+=1;const O=r;let N=Oe(h),l="";for(;N.length>0;){const a=bt.exec(N);if(!a){l+=N;break}l+=N.substring(0,a.index),N=N.substring(a.index+a[0].length),a[0][0]==="\\"&&a[1]?l+="\\"+String(Number(a[1])+O):(l+=a[0],a[0]==="("&&r++)}return l}).map(h=>`(${h})`).join(n)}const wt=/\b\B/,In="[a-zA-Z]\\w*",on="[a-zA-Z_]\\w*",An="\\b\\d+(\\.\\d+)?",Cn="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",Ln="\\b(0b[01]+)",mt="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",Et=(e={})=>{const n=/^#![ ]*\//;return e.binary&&(e.begin=we(n,/.*\b/,e.binary,/\b.*/)),de({scope:"meta",begin:n,end:/$/,relevance:0,"on:begin":(r,h)=>{r.index!==0&&h.ignoreMatch()}},e)},Re={begin:"\\\\[\\s\\S]",relevance:0},yt={scope:"string",begin:"'",end:"'",illegal:"\\n",contains:[Re]},vt={scope:"string",begin:'"',end:'"',illegal:"\\n",contains:[Re]},_t={begin:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/},De=function(e,n,r={}){const h=de({scope:"comment",begin:e,end:n,contains:[]},r);h.contains.push({scope:"doctag",begin:"[ ]*(?=(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):)",end:/(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):/,excludeBegin:!0,relevance:0});const O=rn("I","a","is","so","us","to","at","if","in","it","on",/[A-Za-z]+['](d|ve|re|ll|t|s|n)/,/[A-Za-z]+[-][a-z]+/,/[A-Za-z][a-z]{2,}/);return h.contains.push({begin:we(/[ ]+/,"(",O,/[.]?[:]?([.][ ]|[ ])/,"){3}")}),h},Mt=De("//","$"),xt=De("/\\*","\\*/"),Ot=De("#","$"),Rt={scope:"number",begin:An,relevance:0},Nt={scope:"number",begin:Cn,relevance:0},Tt={scope:"number",begin:Ln,relevance:0},kt={begin:/(?=\/[^/\n]*\/)/,contains:[{scope:"regexp",begin:/\//,end:/\/[gimuy]*/,illegal:/\n/,contains:[Re,{begin:/\[/,end:/\]/,relevance:0,contains:[Re]}]}]},St={scope:"title",begin:In,relevance:0},It={scope:"title",begin:on,relevance:0},At={begin:"\\.\\s*"+on,relevance:0},Ct=function(e){return Object.assign(e,{"on:begin":(n,r)=>{r.data._beginMatch=n[1]},"on:end":(n,r)=>{r.data._beginMatch!==n[1]&&r.ignoreMatch()}})};var ze=Object.freeze({__proto__:null,MATCH_NOTHING_RE:wt,IDENT_RE:In,UNDERSCORE_IDENT_RE:on,NUMBER_RE:An,C_NUMBER_RE:Cn,BINARY_NUMBER_RE:Ln,RE_STARTERS_RE:mt,SHEBANG:Et,BACKSLASH_ESCAPE:Re,APOS_STRING_MODE:yt,QUOTE_STRING_MODE:vt,PHRASAL_WORDS_MODE:_t,COMMENT:De,C_LINE_COMMENT_MODE:Mt,C_BLOCK_COMMENT_MODE:xt,HASH_COMMENT_MODE:Ot,NUMBER_MODE:Rt,C_NUMBER_MODE:Nt,BINARY_NUMBER_MODE:Tt,REGEXP_MODE:kt,TITLE_MODE:St,UNDERSCORE_TITLE_MODE:It,METHOD_GUARD:At,END_SAME_AS_BEGIN:Ct});function Lt(e,n){e.input[e.index-1]==="."&&n.ignoreMatch()}function Pt(e,n){e.className!==void 0&&(e.scope=e.className,delete e.className)}function Ft(e,n){n&&e.beginKeywords&&(e.begin="\\b("+e.beginKeywords.split(" ").join("|")+")(?!\\.)(?=\\b|\\s)",e.__beforeBegin=Lt,e.keywords=e.keywords||e.beginKeywords,delete e.beginKeywords,e.relevance===void 0&&(e.relevance=0))}function Bt(e,n){Array.isArray(e.illegal)&&(e.illegal=rn(...e.illegal))}function zt(e,n){if(e.match){if(e.begin||e.end)throw new Error("begin & end are not supported with match");e.begin=e.match,delete e.match}}function Ht(e,n){e.relevance===void 0&&(e.relevance=1)}const Dt=(e,n)=>{if(!e.beforeMatch)return;if(e.starts)throw new Error("beforeMatch cannot be used with starts");const r=Object.assign({},e);Object.keys(e).forEach(h=>{delete e[h]}),e.keywords=r.keywords,e.begin=we(r.beforeMatch,kn(r.begin)),e.starts={relevance:0,contains:[Object.assign(r,{endsParent:!0})]},e.relevance=0,delete r.beforeMatch},jt=["of","and","for","in","not","or","if","then","parent","list","value"],Wt="keyword";function Pn(e,n,r=Wt){const h=Object.create(null);return typeof e=="string"?O(r,e.split(" ")):Array.isArray(e)?O(r,e):Object.keys(e).forEach(function(N){Object.assign(h,Pn(e[N],n,N))}),h;function O(N,l){n&&(l=l.map(a=>a.toLowerCase())),l.forEach(function(a){const p=a.split("|");h[p[0]]=[N,Ut(p[0],p[1])]})}}function Ut(e,n){return n?Number(n):Gt(e)?0:1}function Gt(e){return jt.includes(e.toLowerCase())}const mn={},be=e=>{console.error(e)},En=(e,...n)=>{console.log(`WARN: ${e}`,...n)},_e=(e,n)=>{mn[`${e}/${n}`]||(console.log(`Deprecated as of ${e}. ${n}`),mn[`${e}/${n}`]=!0)},He=new Error;function Fn(e,n,{key:r}){let h=0;const O=e[r],N={},l={};for(let a=1;a<=n.length;a++)l[a+h]=O[a],N[a+h]=!0,h+=Sn(n[a-1]);e[r]=l,e[r]._emit=N,e[r]._multi=!0}function $t(e){if(Array.isArray(e.begin)){if(e.skip||e.excludeBegin||e.returnBegin)throw be("skip, excludeBegin, returnBegin not compatible with beginScope: {}"),He;if(typeof e.beginScope!="object"||e.beginScope===null)throw be("beginScope must be object"),He;Fn(e,e.begin,{key:"beginScope"}),e.begin=sn(e.begin,{joinWith:""})}}function Vt(e){if(Array.isArray(e.end)){if(e.skip||e.excludeEnd||e.returnEnd)throw be("skip, excludeEnd, returnEnd not compatible with endScope: {}"),He;if(typeof e.endScope!="object"||e.endScope===null)throw be("endScope must be object"),He;Fn(e,e.end,{key:"endScope"}),e.end=sn(e.end,{joinWith:""})}}function Kt(e){e.scope&&typeof e.scope=="object"&&e.scope!==null&&(e.beginScope=e.scope,delete e.scope)}function Xt(e){Kt(e),typeof e.beginScope=="string"&&(e.beginScope={_wrap:e.beginScope}),typeof e.endScope=="string"&&(e.endScope={_wrap:e.endScope}),$t(e),Vt(e)}function qt(e){function n(l,a){return new RegExp(Oe(l),"m"+(e.case_insensitive?"i":"")+(e.unicodeRegex?"u":"")+(a?"g":""))}class r{constructor(){this.matchIndexes={},this.regexes=[],this.matchAt=1,this.position=0}addRule(a,p){p.position=this.position++,this.matchIndexes[this.matchAt]=p,this.regexes.push([p,a]),this.matchAt+=Sn(a)+1}compile(){this.regexes.length===0&&(this.exec=()=>null);const a=this.regexes.map(p=>p[1]);this.matcherRe=n(sn(a,{joinWith:"|"}),!0),this.lastIndex=0}exec(a){this.matcherRe.lastIndex=this.lastIndex;const p=this.matcherRe.exec(a);if(!p)return null;const y=p.findIndex((V,i)=>i>0&&V!==void 0),x=this.matchIndexes[y];return p.splice(0,y),Object.assign(p,x)}}class h{constructor(){this.rules=[],this.multiRegexes=[],this.count=0,this.lastIndex=0,this.regexIndex=0}getMatcher(a){if(this.multiRegexes[a])return this.multiRegexes[a];const p=new r;return this.rules.slice(a).forEach(([y,x])=>p.addRule(y,x)),p.compile(),this.multiRegexes[a]=p,p}resumingScanAtSamePosition(){return this.regexIndex!==0}considerAll(){this.regexIndex=0}addRule(a,p){this.rules.push([a,p]),p.type==="begin"&&this.count++}exec(a){const p=this.getMatcher(this.regexIndex);p.lastIndex=this.lastIndex;let y=p.exec(a);if(this.resumingScanAtSamePosition()&&!(y&&y.index===this.lastIndex)){const x=this.getMatcher(0);x.lastIndex=this.lastIndex+1,y=x.exec(a)}return y&&(this.regexIndex+=y.position+1,this.regexIndex===this.count&&this.considerAll()),y}}function O(l){const a=new h;return l.contains.forEach(p=>a.addRule(p.begin,{rule:p,type:"begin"})),l.terminatorEnd&&a.addRule(l.terminatorEnd,{type:"end"}),l.illegal&&a.addRule(l.illegal,{type:"illegal"}),a}function N(l,a){const p=l;if(l.isCompiled)return p;[Pt,zt,Xt,Dt].forEach(x=>x(l,a)),e.compilerExtensions.forEach(x=>x(l,a)),l.__beforeBegin=null,[Ft,Bt,Ht].forEach(x=>x(l,a)),l.isCompiled=!0;let y=null;return typeof l.keywords=="object"&&l.keywords.$pattern&&(l.keywords=Object.assign({},l.keywords),y=l.keywords.$pattern,delete l.keywords.$pattern),y=y||/\w+/,l.keywords&&(l.keywords=Pn(l.keywords,e.case_insensitive)),p.keywordPatternRe=n(y,!0),a&&(l.begin||(l.begin=/\B|\b/),p.beginRe=n(p.begin),!l.end&&!l.endsWithParent&&(l.end=/\B|\b/),l.end&&(p.endRe=n(p.end)),p.terminatorEnd=Oe(p.end)||"",l.endsWithParent&&a.terminatorEnd&&(p.terminatorEnd+=(l.end?"|":"")+a.terminatorEnd)),l.illegal&&(p.illegalRe=n(l.illegal)),l.contains||(l.contains=[]),l.contains=[].concat(...l.contains.map(function(x){return Qt(x==="self"?l:x)})),l.contains.forEach(function(x){N(x,p)}),l.starts&&N(l.starts,a),p.matcher=O(p),p}if(e.compilerExtensions||(e.compilerExtensions=[]),e.contains&&e.contains.includes("self"))throw new Error("ERR: contains `self` is not supported at the top-level of a language.  See documentation.");return e.classNameAliases=de(e.classNameAliases||{}),N(e)}function Bn(e){return e?e.endsWithParent||Bn(e.starts):!1}function Qt(e){return e.variants&&!e.cachedVariants&&(e.cachedVariants=e.variants.map(function(n){return de(e,{variants:null},n)})),e.cachedVariants?e.cachedVariants:Bn(e)?de(e,{starts:e.starts?de(e.starts):null}):Object.isFrozen(e)?de(e):e}var Yt="11.7.0";class Jt extends Error{constructor(n,r){super(n),this.name="HTMLInjectionError",this.html=r}}const Ye=Tn,yn=de,vn=Symbol("nomatch"),Zt=7,ei=function(e){const n=Object.create(null),r=Object.create(null),h=[];let O=!0;const N="Could not find the language '{}', did you forget to load/include a language module?",l={disableAutodetect:!0,name:"Plain text",contains:[]};let a={ignoreUnescapedHTML:!1,throwUnescapedHTML:!1,noHighlightRe:/^(no-?highlight)$/i,languageDetectRe:/\blang(?:uage)?-([\w-]+)\b/i,classPrefix:"hljs-",cssSelector:"pre code",languages:null,__emitter:ft};function p(o){return a.noHighlightRe.test(o)}function y(o){let w=o.className+" ";w+=o.parentNode?o.parentNode.className:"";const R=a.languageDetectRe.exec(w);if(R){const L=Y(R[1]);return L||(En(N.replace("{}",R[1])),En("Falling back to no-highlight mode for this block.",o)),L?R[1]:"no-highlight"}return w.split(/\s+/).find(L=>p(L)||Y(L))}function x(o,w,R){let L="",C="";typeof w=="object"?(L=o,R=w.ignoreIllegals,C=w.language):(_e("10.7.0","highlight(lang, code, ...args) has been deprecated."),_e("10.7.0",`Please use highlight(code, options) instead.
 https://github.com/highlightjs/highlight.js/issues/2277`),C=o,L=w),R===void 0&&(R=!0);const X={code:L,language:C};ge("before:highlight",X);const se=X.result?X.result:V(X.language,X.code,R);return se.code=X.code,ge("after:highlight",se),se}function V(o,w,R,L){const C=Object.create(null);function X(c,g){return c.keywords[g]}function se(){if(!s.keywords){b.addText(S);return}let c=0;s.keywordPatternRe.lastIndex=0;let g=s.keywordPatternRe.exec(S),v="";for(;g;){v+=S.substring(c,g.index);const I=t.case_insensitive?g[0].toLowerCase():g[0],z=X(s,I);if(z){const[d,m]=z;if(b.addText(v),v="",C[I]=(C[I]||0)+1,C[I]<=Zt&&(Z+=m),d.startsWith("_"))v+=g[0];else{const B=t.classNameAliases[d]||d;b.addKeyword(g[0],B)}}else v+=g[0];c=s.keywordPatternRe.lastIndex,g=s.keywordPatternRe.exec(S)}v+=S.substring(c),b.addText(v)}function he(){if(S==="")return;let c=null;if(typeof s.subLanguage=="string"){if(!n[s.subLanguage]){b.addText(S);return}c=V(s.subLanguage,S,!0,k[s.subLanguage]),k[s.subLanguage]=c._top}else c=K(S,s.subLanguage.length?s.subLanguage:null);s.relevance>0&&(Z+=c.relevance),b.addSublanguage(c._emitter,c.language)}function D(){s.subLanguage!=null?he():se(),S=""}function J(c,g){let v=1;const I=g.length-1;for(;v<=I;){if(!c._emit[v]){v++;continue}const z=t.classNameAliases[c[v]]||c[v],d=g[v];z?b.addKeyword(d,z):(S=d,se(),S=""),v++}}function Ce(c,g){return c.scope&&typeof c.scope=="string"&&b.openNode(t.classNameAliases[c.scope]||c.scope),c.beginScope&&(c.beginScope._wrap?(b.addKeyword(S,t.classNameAliases[c.beginScope._wrap]||c.beginScope._wrap),S=""):c.beginScope._multi&&(J(c.beginScope,g),S="")),s=Object.create(c,{parent:{value:s}}),s}function Le(c,g,v){let I=pt(c.endRe,v);if(I){if(c["on:end"]){const z=new pn(c);c["on:end"](g,z),z.isMatchIgnored&&(I=!1)}if(I){for(;c.endsParent&&c.parent;)c=c.parent;return c}}if(c.endsWithParent)return Le(c.parent,g,v)}function je(c){return s.matcher.regexIndex===0?(S+=c[0],1):(ee=!0,0)}function Pe(c){const g=c[0],v=c.rule,I=new pn(v),z=[v.__beforeBegin,v["on:begin"]];for(const d of z)if(d&&(d(c,I),I.isMatchIgnored))return je(g);return v.skip?S+=g:(v.excludeBegin&&(S+=g),D(),!v.returnBegin&&!v.excludeBegin&&(S=g)),Ce(v,c),v.returnBegin?0:g.length}function Fe(c){const g=c[0],v=w.substring(c.index),I=Le(s,c,v);if(!I)return vn;const z=s;s.endScope&&s.endScope._wrap?(D(),b.addKeyword(g,s.endScope._wrap)):s.endScope&&s.endScope._multi?(D(),J(s.endScope,c)):z.skip?S+=g:(z.returnEnd||z.excludeEnd||(S+=g),D(),z.excludeEnd&&(S=g));do s.scope&&b.closeNode(),!s.skip&&!s.subLanguage&&(Z+=s.relevance),s=s.parent;while(s!==I.parent);return I.starts&&Ce(I.starts,c),z.returnEnd?0:g.length}function We(){const c=[];for(let g=s;g!==t;g=g.parent)g.scope&&c.unshift(g.scope);c.forEach(g=>b.openNode(g))}let ue={};function Be(c,g){const v=g&&g[0];if(S+=c,v==null)return D(),0;if(ue.type==="begin"&&g.type==="end"&&ue.index===g.index&&v===""){if(S+=w.slice(g.index,g.index+1),!O){const I=new Error(`0 width match regex (${o})`);throw I.languageName=o,I.badRule=ue.rule,I}return 1}if(ue=g,g.type==="begin")return Pe(g);if(g.type==="illegal"&&!R){const I=new Error('Illegal lexeme "'+v+'" for mode "'+(s.scope||"<unnamed>")+'"');throw I.mode=s,I}else if(g.type==="end"){const I=Fe(g);if(I!==vn)return I}if(g.type==="illegal"&&v==="")return 1;if(Q>1e5&&Q>g.index*3)throw new Error("potential infinite loop, way more iterations than matches");return S+=v,v.length}const t=Y(o);if(!t)throw be(N.replace("{}",o)),new Error('Unknown language: "'+o+'"');const u=qt(t);let M="",s=L||u;const k={},b=new a.__emitter(a);We();let S="",Z=0,j=0,Q=0,ee=!1;try{for(s.matcher.considerAll();;){Q++,ee?ee=!1:s.matcher.considerAll(),s.matcher.lastIndex=j;const c=s.matcher.exec(w);if(!c)break;const g=w.substring(j,c.index),v=Be(g,c);j=c.index+v}return Be(w.substring(j)),b.closeAllNodes(),b.finalize(),M=b.toHTML(),{language:o,value:M,relevance:Z,illegal:!1,_emitter:b,_top:s}}catch(c){if(c.message&&c.message.includes("Illegal"))return{language:o,value:Ye(w),illegal:!0,relevance:0,_illegalBy:{message:c.message,index:j,context:w.slice(j-100,j+100),mode:c.mode,resultSoFar:M},_emitter:b};if(O)return{language:o,value:Ye(w),illegal:!1,relevance:0,errorRaised:c,_emitter:b,_top:s};throw c}}function i(o){const w={value:Ye(o),illegal:!1,relevance:0,_top:l,_emitter:new a.__emitter(a)};return w._emitter.addText(o),w}function K(o,w){w=w||a.languages||Object.keys(n);const R=i(o),L=w.filter(Y).filter(me).map(D=>V(D,o,!1));L.unshift(R);const C=L.sort((D,J)=>{if(D.relevance!==J.relevance)return J.relevance-D.relevance;if(D.language&&J.language){if(Y(D.language).supersetOf===J.language)return 1;if(Y(J.language).supersetOf===D.language)return-1}return 0}),[X,se]=C,he=X;return he.secondBest=se,he}function oe(o,w,R){const L=w&&r[w]||R;o.classList.add("hljs"),o.classList.add(`language-${L}`)}function ce(o){let w=null;const R=y(o);if(p(R))return;if(ge("before:highlightElement",{el:o,language:R}),o.children.length>0&&(a.ignoreUnescapedHTML||(console.warn("One of your code blocks includes unescaped HTML. This is a potentially serious security risk."),console.warn("https://github.com/highlightjs/highlight.js/wiki/security"),console.warn("The element with unescaped HTML:"),console.warn(o)),a.throwUnescapedHTML))throw new Jt("One of your code blocks includes unescaped HTML.",o.innerHTML);w=o;const L=w.textContent,C=R?x(L,{language:R,ignoreIllegals:!0}):K(L);o.innerHTML=C.value,oe(o,R,C.language),o.result={language:C.language,re:C.relevance,relevance:C.relevance},C.secondBest&&(o.secondBest={language:C.secondBest.language,relevance:C.secondBest.relevance}),ge("after:highlightElement",{el:o,result:C,text:L})}function ne(o){a=yn(a,o)}const H=()=>{le(),_e("10.6.0","initHighlighting() deprecated.  Use highlightAll() now.")};function U(){le(),_e("10.6.0","initHighlightingOnLoad() deprecated.  Use highlightAll() now.")}let re=!1;function le(){if(document.readyState==="loading"){re=!0;return}document.querySelectorAll(a.cssSelector).forEach(ce)}function Te(){re&&le()}typeof window<"u"&&window.addEventListener&&window.addEventListener("DOMContentLoaded",Te,!1);function T(o,w){let R=null;try{R=w(e)}catch(L){if(be("Language definition for '{}' could not be registered.".replace("{}",o)),O)be(L);else throw L;R=l}R.name||(R.name=o),n[o]=R,R.rawDefinition=w.bind(null,e),R.aliases&&Se(R.aliases,{languageName:o})}function ke(o){delete n[o];for(const w of Object.keys(r))r[w]===o&&delete r[w]}function q(){return Object.keys(n)}function Y(o){return o=(o||"").toLowerCase(),n[o]||n[r[o]]}function Se(o,{languageName:w}){typeof o=="string"&&(o=[o]),o.forEach(R=>{r[R.toLowerCase()]=w})}function me(o){const w=Y(o);return w&&!w.disableAutodetect}function Ie(o){o["before:highlightBlock"]&&!o["before:highlightElement"]&&(o["before:highlightElement"]=w=>{o["before:highlightBlock"](Object.assign({block:w.el},w))}),o["after:highlightBlock"]&&!o["after:highlightElement"]&&(o["after:highlightElement"]=w=>{o["after:highlightBlock"](Object.assign({block:w.el},w))})}function Me(o){Ie(o),h.push(o)}function ge(o,w){const R=o;h.forEach(function(L){L[R]&&L[R](w)})}function Ae(o){return _e("10.7.0","highlightBlock will be removed entirely in v12.0"),_e("10.7.0","Please use highlightElement now."),ce(o)}Object.assign(e,{highlight:x,highlightAuto:K,highlightAll:le,highlightElement:ce,highlightBlock:Ae,configure:ne,initHighlighting:H,initHighlightingOnLoad:U,registerLanguage:T,unregisterLanguage:ke,listLanguages:q,getLanguage:Y,registerAliases:Se,autoDetection:me,inherit:yn,addPlugin:Me}),e.debugMode=function(){O=!1},e.safeMode=function(){O=!0},e.versionString=Yt,e.regex={concat:we,lookahead:kn,either:rn,optional:gt,anyNumberOfTimes:dt};for(const o in ze)typeof ze[o]=="object"&&en.exports(ze[o]);return Object.assign(e,ze),e};var Ne=ei({}),ni=Ne;Ne.HighlightJS=Ne;Ne.default=Ne;const _n=Mn(ni);function ti(e){const n=e.regex,r=n.concat(/[\p{L}_]/u,n.optional(/[\p{L}0-9_.-]*:/u),/[\p{L}0-9_.-]*/u),h=/[\p{L}0-9._:-]+/u,O={className:"symbol",begin:/&[a-z]+;|&#[0-9]+;|&#x[a-f0-9]+;/},N={begin:/\s/,contains:[{className:"keyword",begin:/#?[a-z_][a-z1-9_-]+/,illegal:/\n/}]},l=e.inherit(N,{begin:/\(/,end:/\)/}),a=e.inherit(e.APOS_STRING_MODE,{className:"string"}),p=e.inherit(e.QUOTE_STRING_MODE,{className:"string"}),y={endsWithParent:!0,illegal:/</,relevance:0,contains:[{className:"attr",begin:h,relevance:0},{begin:/=\s*/,relevance:0,contains:[{className:"string",endsParent:!0,variants:[{begin:/"/,end:/"/,contains:[O]},{begin:/'/,end:/'/,contains:[O]},{begin:/[^\s"'=<>`]+/}]}]}]};return{name:"HTML, XML",aliases:["html","xhtml","rss","atom","xjb","xsd","xsl","plist","wsf","svg"],case_insensitive:!0,unicodeRegex:!0,contains:[{className:"meta",begin:/<![a-z]/,end:/>/,relevance:10,contains:[N,p,a,l,{begin:/\[/,end:/\]/,contains:[{className:"meta",begin:/<![a-z]/,end:/>/,contains:[N,l,p,a]}]}]},e.COMMENT(/<!--/,/-->/,{relevance:10}),{begin:/<!\[CDATA\[/,end:/\]\]>/,relevance:10},O,{className:"meta",end:/\?>/,variants:[{begin:/<\?xml/,relevance:10,contains:[p]},{begin:/<\?[a-z][a-z0-9]+/}]},{className:"tag",begin:/<style(?=\s|>)/,end:/>/,keywords:{name:"style"},contains:[y],starts:{end:/<\/style>/,returnEnd:!0,subLanguage:["css","xml"]}},{className:"tag",begin:/<script(?=\s|>)/,end:/>/,keywords:{name:"script"},contains:[y],starts:{end:/<\/script>/,returnEnd:!0,subLanguage:["javascript","handlebars","xml"]}},{className:"tag",begin:/<>|<\/>/},{className:"tag",begin:n.concat(/</,n.lookahead(n.concat(r,n.either(/\/>/,/>/,/\s/)))),end:/\/?>/,contains:[{className:"name",begin:r,relevance:0,starts:y}]},{className:"tag",begin:n.concat(/<\//,n.lookahead(n.concat(r,/>/))),contains:[{className:"name",begin:r,relevance:0},{begin:/>/,relevance:0,endsParent:!0}]}]}}const ii={key:0,class:"docs-example-header"},ri={class:"docs-example-body"},si=["src"],oi={key:1,class:"frame"},ai={key:1,class:"docs-example-footer"},ci={key:2,class:"docs-example-code"},li=["innerHTML"],ui="storybook/docs/snippet-rendered",fi=Wn({__name:"DocsExample",props:{id:{},hideNewTab:{type:Boolean},hideCode:{type:Boolean},withPadding:{type:Boolean,default:!1},theme:{default:void 0},useNeutralButtons:{type:Boolean,default:!1},argsString:{default:""}},setup(e){_n.registerLanguage("xml",ti);const n=e,r=xe(!1),h=xe(""),O=xe(!1),N=xe(null),l=tt(N),a={mounted:(H,{value:U={}})=>{H.addEventListener("load",()=>Qn(U,H))},unmounted:H=>{var U;return(U=H.iFrameResizer)==null?void 0:U.removeListeners()}},p=()=>{r.value=!r.value};Un(()=>{window.addEventListener("message",async H=>{var re;let U;try{U=JSON.parse(H.data)}catch{return}((re=U.event)==null?void 0:re.type)===ui&&U.event.args[0]===n.id&&(h.value=U.event.args[1])},!1)});const y=Ee(()=>_n.highlight(h.value,{language:"xml"}).value),{storybookBaseUrl:x}=Gn(),V=$n("exampleTheme","default"),i=Ee(()=>n.theme?n.theme:V.value),K=Ee(()=>n.useNeutralButtons?"neutral":"default"),oe=Ee(()=>`args=${n.argsString}&viewMode=story&globals=theme:${i.value};buttonTheme:${K.value}`),ce=Ee(()=>`${x}/?path=/story/${n.id}&${oe.value}`),ne=Ee(()=>`${x}/iframe.html?id=${n.id}&${oe.value}`);return Ze(l,(H,U)=>{H&&!U&&(O.value=!0)}),(H,U)=>{const re=zn,le=Hn;return ye(),ve("div",{ref_key:"target",ref:N,class:Kn({"docs-example":!0,"with-padding":H.withPadding})},[H.hideNewTab?qe("",!0):(ye(),ve("div",ii,[Ke(re,{url:fe(ne),target:"_blank",isExternal:"",isSmall:"",iconPosition:"end"},{default:cn(()=>[Xe("Open this example in a new tab")]),_:1},8,["url"]),Ke(re,{url:fe(ce),target:"_blank",isExternal:"",isSmall:"",iconPosition:"end"},{default:cn(()=>[Xe("View in storybook")]),_:1},8,["url"])])),Qe("div",ri,[fe(O)?Vn((ye(),ve("iframe",{key:0,src:fe(ne),class:"frame"},null,8,si)),[[a]]):(ye(),ve("div",oi))]),H.hideCode?qe("",!0):(ye(),ve("div",ai,[Qe("button",{onClick:p,class:"docs-example-code-btn rpl-type-p-small"},[Xe(" Show code "),Ke(le,{name:fe(r)?"icon-chevron-up":"icon-chevron-down",size:"xs",class:"docs-example-code-btn-icon"},null,8,["name"])])])),fe(r)?(ye(),ve("div",ci,[Qe("code",{class:"hljs xml",innerHTML:fe(y)},null,8,li)])):qe("",!0)],2)}}}),Ei=Xn(fi,[["__scopeId","data-v-ed064f73"]]);export{Ei as default};
diff --git a/_nuxt/DocsGradientTable.j5XMaAB_.js b/_nuxt/DocsGradientTable.eMExAp1K.js
similarity index 91%
rename from _nuxt/DocsGradientTable.j5XMaAB_.js
rename to _nuxt/DocsGradientTable.eMExAp1K.js
index c790c9befb..cfff66a1f9 100644
--- a/_nuxt/DocsGradientTable.j5XMaAB_.js
+++ b/_nuxt/DocsGradientTable.eMExAp1K.js
@@ -1 +1 @@
-import v from"./Swatch.pCyR0PCQ.js";import{g as c,a as S,b as g,c as k}from"./colour.GNNGiHzW.js";import{d as C,J as p,b as n,c as s,e as t,F as i,W as d,g as _,t as u,N as m,p as x,i as V}from"./entry.49ZHHvLB.js";import{_ as w}from"./_plugin-vue_export-helper.x3n3nnut.js";const h=a=>(x("data-v-8e2514b8"),a=a(),V(),a),y={class:"rpl-table rpl-table--no-stripes"},I={class:"rpl-table__scroll-container",tabindex:"0"},N={class:"w-full"},B=h(()=>t("thead",null,[t("tr",null,[t("th",null,"Swatch"),t("th",null,"Colour"),t("th",null,"CSS Variable")])],-1)),D=h(()=>t("thead",null,[t("tr",null,[t("th"),t("th",null,"Value"),t("th",null,"Position")])],-1)),O=C({__name:"DocsGradientTable",setup(a){const b=p(()=>{const o=c(["clr.gradient"]);return Object.keys(o).map(l=>({name:S(l),value:g(o[l]),token:k(l)}))}),f=p(()=>{let o=[];const l=c(["theme.clr.gradient"]);for(const[r,e]of Object.entries(l))o.push({value:e,position:r.split(".").pop()});return o});return(o,l)=>{const r=v;return n(),s("div",y,[t("div",I,[t("table",N,[B,t("tbody",null,[(n(!0),s(i,null,d(m(b),e=>(n(),s("tr",{key:e.name},[t("td",null,[_(r,{colour:`var(--${e.token})`},null,8,["colour"])]),t("td",null,u(e.name),1),t("td",null,u(e.token),1)]))),128))]),D,t("tbody",null,[(n(!0),s(i,null,d(m(f),e=>(n(),s("tr",{key:e.name},[t("td",null,[_(r,{colour:e.value},null,8,["colour"])]),t("td",null,u(e.value),1),t("td",null,u(e.position)+"%",1)]))),128))])])])])}}}),E=w(O,[["__scopeId","data-v-8e2514b8"]]);export{E as default};
+import v from"./Swatch.FPuuW78y.js";import{g as c,a as S,b as g,c as k}from"./colour.GNNGiHzW.js";import{d as C,J as p,b as n,c as s,e as t,F as i,W as d,g as _,t as u,N as m,p as x,i as V}from"./entry.Do8xnxHS.js";import{_ as w}from"./_plugin-vue_export-helper.x3n3nnut.js";const h=a=>(x("data-v-8e2514b8"),a=a(),V(),a),y={class:"rpl-table rpl-table--no-stripes"},I={class:"rpl-table__scroll-container",tabindex:"0"},N={class:"w-full"},B=h(()=>t("thead",null,[t("tr",null,[t("th",null,"Swatch"),t("th",null,"Colour"),t("th",null,"CSS Variable")])],-1)),D=h(()=>t("thead",null,[t("tr",null,[t("th"),t("th",null,"Value"),t("th",null,"Position")])],-1)),O=C({__name:"DocsGradientTable",setup(a){const b=p(()=>{const o=c(["clr.gradient"]);return Object.keys(o).map(l=>({name:S(l),value:g(o[l]),token:k(l)}))}),f=p(()=>{let o=[];const l=c(["theme.clr.gradient"]);for(const[r,e]of Object.entries(l))o.push({value:e,position:r.split(".").pop()});return o});return(o,l)=>{const r=v;return n(),s("div",y,[t("div",I,[t("table",N,[B,t("tbody",null,[(n(!0),s(i,null,d(m(b),e=>(n(),s("tr",{key:e.name},[t("td",null,[_(r,{colour:`var(--${e.token})`},null,8,["colour"])]),t("td",null,u(e.name),1),t("td",null,u(e.token),1)]))),128))]),D,t("tbody",null,[(n(!0),s(i,null,d(m(f),e=>(n(),s("tr",{key:e.name},[t("td",null,[_(r,{colour:e.value},null,8,["colour"])]),t("td",null,u(e.value),1),t("td",null,u(e.position)+"%",1)]))),128))])])])])}}}),E=w(O,[["__scopeId","data-v-8e2514b8"]]);export{E as default};
diff --git a/_nuxt/DocsGrid.4LuoD9Zu.js b/_nuxt/DocsGrid.CLT9yKLT.js
similarity index 75%
rename from _nuxt/DocsGrid.4LuoD9Zu.js
rename to _nuxt/DocsGrid.CLT9yKLT.js
index 1feba0c2f5..e80101fbda 100644
--- a/_nuxt/DocsGrid.4LuoD9Zu.js
+++ b/_nuxt/DocsGrid.CLT9yKLT.js
@@ -1 +1 @@
-import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as o,c as s,E as t}from"./entry.49ZHHvLB.js";const c={},n={class:"rpl-grid"};function a(e,_){return o(),s("div",n,[t(e.$slots,"default")])}const f=r(c,[["render",a]]);export{f as default};
+import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as o,c as s,E as t}from"./entry.Do8xnxHS.js";const c={},n={class:"rpl-grid"};function a(e,_){return o(),s("div",n,[t(e.$slots,"default")])}const f=r(c,[["render",a]]);export{f as default};
diff --git a/_nuxt/DocsHeroHeader.PVXBo8Q-.js b/_nuxt/DocsHeroHeader.VJrQvyc0.js
similarity index 88%
rename from _nuxt/DocsHeroHeader.PVXBo8Q-.js
rename to _nuxt/DocsHeroHeader.VJrQvyc0.js
index aea15db526..543733e245 100644
--- a/_nuxt/DocsHeroHeader.PVXBo8Q-.js
+++ b/_nuxt/DocsHeroHeader.VJrQvyc0.js
@@ -1 +1 @@
-import{d as o,b as r,c,e as s,t}from"./entry.49ZHHvLB.js";import{_ as a}from"./_plugin-vue_export-helper.x3n3nnut.js";const n={class:"root"},p={class:"rpl-container inner"},_={class:"rpl-grid"},i={class:"rpl-col-10 rpl-col-7-m"},l={class:"rpl-type-h1 rpl-u-margin-b-4"},d={class:"rpl-type-p-large"},m=o({__name:"DocsHeroHeader",props:{title:{},description:{default:""}},setup(h){return(e,f)=>(r(),c("div",n,[s("div",p,[s("div",_,[s("div",i,[s("h1",l,t(e.title),1),s("p",d,t(e.description),1)])])])]))}}),g=a(m,[["__scopeId","data-v-22759f45"]]);export{g as default};
+import{d as o,b as r,c,e as s,t}from"./entry.Do8xnxHS.js";import{_ as a}from"./_plugin-vue_export-helper.x3n3nnut.js";const n={class:"root"},p={class:"rpl-container inner"},_={class:"rpl-grid"},i={class:"rpl-col-10 rpl-col-7-m"},l={class:"rpl-type-h1 rpl-u-margin-b-4"},d={class:"rpl-type-p-large"},m=o({__name:"DocsHeroHeader",props:{title:{},description:{default:""}},setup(h){return(e,f)=>(r(),c("div",n,[s("div",p,[s("div",_,[s("div",i,[s("h1",l,t(e.title),1),s("p",d,t(e.description),1)])])])]))}}),g=a(m,[["__scopeId","data-v-22759f45"]]);export{g as default};
diff --git a/_nuxt/DocsHomeSection.gUJpqPBN.js b/_nuxt/DocsHomeSection.-8CtU5yK.js
similarity index 75%
rename from _nuxt/DocsHomeSection.gUJpqPBN.js
rename to _nuxt/DocsHomeSection.-8CtU5yK.js
index adc4cbbac6..aebff1d563 100644
--- a/_nuxt/DocsHomeSection.gUJpqPBN.js
+++ b/_nuxt/DocsHomeSection.-8CtU5yK.js
@@ -1 +1 @@
-import{d as s,b as t,c as o,t as a,f as n,E as c}from"./entry.49ZHHvLB.js";import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";const i={class:"docs-home-section"},p={key:0,class:"docs-home-section-title rpl-type-h2 rpl-u-margin-b-2","data-cy":"page-component-title"},l=s({__name:"DocsHomeSection",props:{title:{default:""}},setup(_){return(e,d)=>(t(),o("div",i,[e.title?(t(),o("h2",p,a(e.title),1)):n("",!0),c(e.$slots,"default",{},void 0,!0)]))}}),u=r(l,[["__scopeId","data-v-ff42b386"]]);export{u as default};
+import{d as s,b as t,c as o,t as a,f as n,E as c}from"./entry.Do8xnxHS.js";import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";const i={class:"docs-home-section"},p={key:0,class:"docs-home-section-title rpl-type-h2 rpl-u-margin-b-2","data-cy":"page-component-title"},l=s({__name:"DocsHomeSection",props:{title:{default:""}},setup(_){return(e,d)=>(t(),o("div",i,[e.title?(t(),o("h2",p,a(e.title),1)):n("",!0),c(e.$slots,"default",{},void 0,!0)]))}}),u=r(l,[["__scopeId","data-v-ff42b386"]]);export{u as default};
diff --git a/_nuxt/DocsIcon.7thEtIhB.js b/_nuxt/DocsIcon.T-QbG3WZ.js
similarity index 58%
rename from _nuxt/DocsIcon.7thEtIhB.js
rename to _nuxt/DocsIcon.T-QbG3WZ.js
index bad26d32fc..63231c8f86 100644
--- a/_nuxt/DocsIcon.7thEtIhB.js
+++ b/_nuxt/DocsIcon.T-QbG3WZ.js
@@ -1 +1 @@
-import{_ as n}from"./RplIcon.vue.NIDikUS0.js";import{d as s,b as a,G as c}from"./entry.49ZHHvLB.js";const _=s({__name:"DocsIcon",props:{name:{},size:{default:"xs"}},setup(m){return(e,r)=>{const o=n;return a(),c(o,{name:e.name,colour:"default",size:e.size},null,8,["name","size"])}}});export{_ as default};
+import{_ as n}from"./RplIcon.vue.PZ-X7Qhh.js";import{d as s,b as a,G as c}from"./entry.Do8xnxHS.js";const _=s({__name:"DocsIcon",props:{name:{},size:{default:"xs"}},setup(m){return(e,r)=>{const o=n;return a(),c(o,{name:e.name,colour:"default",size:e.size},null,8,["name","size"])}}});export{_ as default};
diff --git a/_nuxt/DocsIconSizingTable.xZUIYxKF.js b/_nuxt/DocsIconSizingTable.5KObi_vr.js
similarity index 83%
rename from _nuxt/DocsIconSizingTable.xZUIYxKF.js
rename to _nuxt/DocsIconSizingTable.5KObi_vr.js
index 171f35e440..7e696e43e7 100644
--- a/_nuxt/DocsIconSizingTable.xZUIYxKF.js
+++ b/_nuxt/DocsIconSizingTable.5KObi_vr.js
@@ -1 +1 @@
-import{_ as i}from"./RplIcon.vue.NIDikUS0.js";import{d as p,J as d,b as l,c as n,e,F as _,W as m,g as f,t as a,N as h}from"./entry.49ZHHvLB.js";const b={class:"rpl-table rpl-table--no-stripes"},z={class:"w-full"},v=e("thead",null,[e("tr",null,[e("th",null,"Preview"),e("th",null,"Value"),e("th",null,"Size")])],-1),S=p({__name:"DocsIconSizingTable",props:{sizes:{}},setup(o){const c=o,r=d(()=>c.sizes.map(s=>({value:Object.values(s)[0],size:Object.keys(s)[0]})));return(s,g)=>{const u=i;return l(),n("div",b,[e("table",z,[v,e("tbody",null,[(l(!0),n(_,null,m(h(r),t=>(l(),n("tr",{key:t.size},[e("td",null,[f(u,{name:"icon-search",colour:"default",size:t.size},null,8,["size"])]),e("td",null,a(t.value),1),e("td",null,a(t.size),1)]))),128))])])])}}});export{S as default};
+import{_ as i}from"./RplIcon.vue.PZ-X7Qhh.js";import{d as p,J as d,b as l,c as n,e,F as _,W as m,g as f,t as a,N as h}from"./entry.Do8xnxHS.js";const b={class:"rpl-table rpl-table--no-stripes"},z={class:"w-full"},v=e("thead",null,[e("tr",null,[e("th",null,"Preview"),e("th",null,"Value"),e("th",null,"Size")])],-1),S=p({__name:"DocsIconSizingTable",props:{sizes:{}},setup(o){const c=o,r=d(()=>c.sizes.map(s=>({value:Object.values(s)[0],size:Object.keys(s)[0]})));return(s,g)=>{const u=i;return l(),n("div",b,[e("table",z,[v,e("tbody",null,[(l(!0),n(_,null,m(h(r),t=>(l(),n("tr",{key:t.size},[e("td",null,[f(u,{name:"icon-search",colour:"default",size:t.size},null,8,["size"])]),e("td",null,a(t.value),1),e("td",null,a(t.size),1)]))),128))])])])}}});export{S as default};
diff --git a/_nuxt/DocsIconTable.9o2Ol26d.js b/_nuxt/DocsIconTable.SNmL3ofA.js
similarity index 76%
rename from _nuxt/DocsIconTable.9o2Ol26d.js
rename to _nuxt/DocsIconTable.SNmL3ofA.js
index 95bf422093..fcf70f1bdc 100644
--- a/_nuxt/DocsIconTable.9o2Ol26d.js
+++ b/_nuxt/DocsIconTable.SNmL3ofA.js
@@ -1 +1 @@
-import{_ as l}from"./RplIcon.vue.NIDikUS0.js";import{R as m}from"./rpl-lib.es.r8Pb5jxA.js";import{d as i,J as u,b as a,c as n,F as _,W as d,g as f,e as b,t as g,N as I}from"./entry.49ZHHvLB.js";import{_ as h}from"./_plugin-vue_export-helper.x3n3nnut.js";const x={class:"docs-icon-table"},B={class:"rpl-type-p-small"},D=i({__name:"DocsIconTable",props:{group:{}},setup(t){const c=t,r=u(()=>{var s;return(((s=m)==null?void 0:s[c.group])||[]).map(o=>({value:o,name:o.replace("icon-","").split("-").map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(" ")}))});return(p,s)=>{const o=l;return a(),n("ul",x,[(a(!0),n(_,null,d(I(r),e=>(a(),n("li",null,[f(o,{name:e.value,colour:"default",size:"l"},null,8,["name"]),b("span",B,g(e.name),1)]))),256))])}}}),y=h(D,[["__scopeId","data-v-e0bacec0"]]);export{y as default};
+import{_ as l}from"./RplIcon.vue.PZ-X7Qhh.js";import{R as m}from"./rpl-lib.es.b8udu3ko.js";import{d as i,J as u,b as a,c as n,F as _,W as d,g as f,e as b,t as g,N as I}from"./entry.Do8xnxHS.js";import{_ as h}from"./_plugin-vue_export-helper.x3n3nnut.js";const x={class:"docs-icon-table"},B={class:"rpl-type-p-small"},D=i({__name:"DocsIconTable",props:{group:{}},setup(t){const c=t,r=u(()=>{var s;return(((s=m)==null?void 0:s[c.group])||[]).map(o=>({value:o,name:o.replace("icon-","").split("-").map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(" ")}))});return(p,s)=>{const o=l;return a(),n("ul",x,[(a(!0),n(_,null,d(I(r),e=>(a(),n("li",null,[f(o,{name:e.value,colour:"default",size:"l"},null,8,["name"]),b("span",B,g(e.name),1)]))),256))])}}}),y=h(D,[["__scopeId","data-v-e0bacec0"]]);export{y as default};
diff --git a/_nuxt/DocsImageExample.gzBXNxRI.js b/_nuxt/DocsImageExample.8UN1-6g4.js
similarity index 90%
rename from _nuxt/DocsImageExample.gzBXNxRI.js
rename to _nuxt/DocsImageExample.8UN1-6g4.js
index ca0966f3cb..2d2e91f307 100644
--- a/_nuxt/DocsImageExample.gzBXNxRI.js
+++ b/_nuxt/DocsImageExample.8UN1-6g4.js
@@ -1 +1 @@
-import{f as d}from"./node.uMQX-T_c.js";import{E as c,d as n,b as r,c as l,e as o,f as i}from"./entry.49ZHHvLB.js";import{_}from"./_plugin-vue_export-helper.x3n3nnut.js";const f=(t,e,a,...s)=>t[e]?c({...t,[e]:()=>d(t[e](),a==null?void 0:a.unwrap)},e,a,...s):c(t,e,a,...s),m={class:"docs-example"},u={class:"docs-example-body"},p=["src","alt"],g={key:0,class:"docs-example-footer"},h=n({__name:"DocsImageExample",props:{src:{},alt:{}},setup(t){return(e,a)=>(r(),l("figure",m,[o("div",u,[o("img",{src:e.src,alt:e.alt},null,8,p)]),e.$slots.default?(r(),l("div",g,[o("figcaption",null,[f(e.$slots,"default",{unwrap:"p"},void 0,!0)])])):i("",!0)]))}}),b=_(h,[["__scopeId","data-v-d653ba7c"]]);export{b as default};
+import{f as d}from"./node.uMQX-T_c.js";import{E as c,d as n,b as r,c as l,e as o,f as i}from"./entry.Do8xnxHS.js";import{_}from"./_plugin-vue_export-helper.x3n3nnut.js";const f=(t,e,a,...s)=>t[e]?c({...t,[e]:()=>d(t[e](),a==null?void 0:a.unwrap)},e,a,...s):c(t,e,a,...s),m={class:"docs-example"},u={class:"docs-example-body"},p=["src","alt"],g={key:0,class:"docs-example-footer"},h=n({__name:"DocsImageExample",props:{src:{},alt:{}},setup(t){return(e,a)=>(r(),l("figure",m,[o("div",u,[o("img",{src:e.src,alt:e.alt},null,8,p)]),e.$slots.default?(r(),l("div",g,[o("figcaption",null,[f(e.$slots,"default",{unwrap:"p"},void 0,!0)])])):i("",!0)]))}}),b=_(h,[["__scopeId","data-v-d653ba7c"]]);export{b as default};
diff --git a/_nuxt/DocsLayerStyleTable.OEKkkJyE.js b/_nuxt/DocsLayerStyleTable.eVkhneyr.js
similarity index 96%
rename from _nuxt/DocsLayerStyleTable.OEKkkJyE.js
rename to _nuxt/DocsLayerStyleTable.eVkhneyr.js
index f66f7fe69e..69828f9b92 100644
--- a/_nuxt/DocsLayerStyleTable.OEKkkJyE.js
+++ b/_nuxt/DocsLayerStyleTable.eVkhneyr.js
@@ -1 +1 @@
-import{d as y,J as b,b as t,c as r,e as l,F as m,W as _,a0 as n,f as u,t as c,N as x,p as h,i as f}from"./entry.49ZHHvLB.js";import{_ as k}from"./_plugin-vue_export-helper.x3n3nnut.js";const w={border:{1:{value:"1px"},2:{value:"2px"},3:{value:"4px"},4:{value:"8px"},radius:{1:{value:"2px"},2:{value:"4px"},3:{value:"8px"},4:{value:"12px"},full:{value:"999px"}}},elevation:{1:{comment:"2px spread",value:"0 2px 8px rgb(26 26 26 / 16%)"},2:{comment:"4px spread",value:"0 4px 8px 2px rgb(26 26 26 / 16%)"}}},s=w,S=o=>(h("data-v-5dc4dd17"),o=o(),f(),o),V={class:"rpl-table rpl-table--no-stripes"},$={class:"rpl-table__scroll-container",tabindex:"0"},g={class:"w-full"},I=S(()=>l("thead",null,[l("tr",null,[l("th",null,"Visual"),l("th",null,"Value"),l("th",null,"CSS Variable")])],-1)),N=y({__name:"DocsLayerStyleTable",props:{type:{}},setup(o){const p=o,i=b(()=>{var d;let a=(s==null?void 0:s[p.type])||{};if(p.type.includes(".")){const[e,v]=p.type.split(".");a=((d=s==null?void 0:s[e])==null?void 0:d[v])||a}return Object.keys(a).filter(Number).map(e=>({key:e,value:a[e].value,token:`rpl-${p.type.replace(".","-")}-${e}`}))});return(a,d)=>(t(),r("div",V,[l("div",$,[l("table",g,[I,l("tbody",null,[(t(!0),r(m,null,_(x(i),e=>(t(),r("tr",{key:e.token},[l("td",null,[a.type==="border"?(t(),r("span",{key:0,class:"docs-layer-style-preview docs-layer-style-preview--border",style:n(`border-width: var(--rpl-border-${e.key})`)},null,4)):u("",!0),a.type==="border.radius"?(t(),r("span",{key:1,class:"docs-layer-style-preview docs-layer-style-preview--border-radius",style:n(`border-radius: var(--rpl-border-radius-${e.key})`)},null,4)):u("",!0),a.type==="elevation"?(t(),r("span",{key:2,class:"docs-layer-style-preview docs-layer-style-preview--elevation",style:n(`box-shadow: var(--rpl-elevation-${e.key})`)},null,4)):u("",!0)]),l("td",null,c(e.value),1),l("td",null,c(e.token),1)]))),128))])])])]))}}),D=k(N,[["__scopeId","data-v-5dc4dd17"]]);export{D as default};
+import{d as y,J as b,b as t,c as r,e as l,F as m,W as _,a0 as n,f as u,t as c,N as x,p as h,i as f}from"./entry.Do8xnxHS.js";import{_ as k}from"./_plugin-vue_export-helper.x3n3nnut.js";const w={border:{1:{value:"1px"},2:{value:"2px"},3:{value:"4px"},4:{value:"8px"},radius:{1:{value:"2px"},2:{value:"4px"},3:{value:"8px"},4:{value:"12px"},full:{value:"999px"}}},elevation:{1:{comment:"2px spread",value:"0 2px 8px rgb(26 26 26 / 16%)"},2:{comment:"4px spread",value:"0 4px 8px 2px rgb(26 26 26 / 16%)"}}},s=w,S=o=>(h("data-v-5dc4dd17"),o=o(),f(),o),V={class:"rpl-table rpl-table--no-stripes"},$={class:"rpl-table__scroll-container",tabindex:"0"},g={class:"w-full"},I=S(()=>l("thead",null,[l("tr",null,[l("th",null,"Visual"),l("th",null,"Value"),l("th",null,"CSS Variable")])],-1)),N=y({__name:"DocsLayerStyleTable",props:{type:{}},setup(o){const p=o,i=b(()=>{var d;let a=(s==null?void 0:s[p.type])||{};if(p.type.includes(".")){const[e,v]=p.type.split(".");a=((d=s==null?void 0:s[e])==null?void 0:d[v])||a}return Object.keys(a).filter(Number).map(e=>({key:e,value:a[e].value,token:`rpl-${p.type.replace(".","-")}-${e}`}))});return(a,d)=>(t(),r("div",V,[l("div",$,[l("table",g,[I,l("tbody",null,[(t(!0),r(m,null,_(x(i),e=>(t(),r("tr",{key:e.token},[l("td",null,[a.type==="border"?(t(),r("span",{key:0,class:"docs-layer-style-preview docs-layer-style-preview--border",style:n(`border-width: var(--rpl-border-${e.key})`)},null,4)):u("",!0),a.type==="border.radius"?(t(),r("span",{key:1,class:"docs-layer-style-preview docs-layer-style-preview--border-radius",style:n(`border-radius: var(--rpl-border-radius-${e.key})`)},null,4)):u("",!0),a.type==="elevation"?(t(),r("span",{key:2,class:"docs-layer-style-preview docs-layer-style-preview--elevation",style:n(`box-shadow: var(--rpl-elevation-${e.key})`)},null,4)):u("",!0)]),l("td",null,c(e.value),1),l("td",null,c(e.token),1)]))),128))])])])]))}}),D=k(N,[["__scopeId","data-v-5dc4dd17"]]);export{D as default};
diff --git a/_nuxt/DocsLink.5OmhIBHZ.js b/_nuxt/DocsLink._8mcEyeM.js
similarity index 73%
rename from _nuxt/DocsLink.5OmhIBHZ.js
rename to _nuxt/DocsLink._8mcEyeM.js
index 94a4bc8ea0..a684d2cc0b 100644
--- a/_nuxt/DocsLink.5OmhIBHZ.js
+++ b/_nuxt/DocsLink._8mcEyeM.js
@@ -1 +1 @@
-import{_ as t}from"./RplIcon.vue.NIDikUS0.js";import{_ as r}from"./RplTextLink.css.ll_eQGN0.js";import{d as i,b as o,G as s,w as p,f as n,E as c,n as m}from"./entry.49ZHHvLB.js";import{_ as d}from"./_plugin-vue_export-helper.x3n3nnut.js";import"./RplLink.vue.TWUjSovo.js";const f=i({__name:"DocsLink",props:{url:{},isExternal:{type:Boolean,default:!1},isSmall:{type:Boolean,default:!1},iconPosition:{default:"start"}},setup(_){return(e,u)=>{const a=t,l=r;return o(),s(l,{url:e.url,target:"_blank",class:m({"docs-link":!0,"rpl-type-p":!e.isSmall,"rpl-type-p-small":e.isSmall})},{default:p(()=>[e.isExternal&&e.iconPosition==="start"?(o(),s(a,{key:0,name:"icon-link-external-square-filled",class:"docs-link-icon"})):n("",!0),c(e.$slots,"default",{},void 0,!0),e.isExternal&&e.iconPosition==="end"?(o(),s(a,{key:1,name:"icon-link-external-square-filled",class:"docs-link-icon"})):n("",!0)]),_:3},8,["url","class"])}}}),S=d(f,[["__scopeId","data-v-5d4aedf1"]]);export{S as default};
+import{_ as t}from"./RplIcon.vue.PZ-X7Qhh.js";import{_ as r}from"./RplTextLink.css.vnmpcBOe.js";import{d as i,b as o,G as s,w as p,f as n,E as c,n as m}from"./entry.Do8xnxHS.js";import{_ as d}from"./_plugin-vue_export-helper.x3n3nnut.js";import"./RplLink.vue.3IdzOFUB.js";const f=i({__name:"DocsLink",props:{url:{},isExternal:{type:Boolean,default:!1},isSmall:{type:Boolean,default:!1},iconPosition:{default:"start"}},setup(_){return(e,u)=>{const a=t,l=r;return o(),s(l,{url:e.url,target:"_blank",class:m({"docs-link":!0,"rpl-type-p":!e.isSmall,"rpl-type-p-small":e.isSmall})},{default:p(()=>[e.isExternal&&e.iconPosition==="start"?(o(),s(a,{key:0,name:"icon-link-external-square-filled",class:"docs-link-icon"})):n("",!0),c(e.$slots,"default",{},void 0,!0),e.isExternal&&e.iconPosition==="end"?(o(),s(a,{key:1,name:"icon-link-external-square-filled",class:"docs-link-icon"})):n("",!0)]),_:3},8,["url","class"])}}}),S=d(f,[["__scopeId","data-v-5d4aedf1"]]);export{S as default};
diff --git a/_nuxt/DocsModuleCard.hpjmQYW8.js b/_nuxt/DocsModuleCard.2ZwiOzRg.js
similarity index 50%
rename from _nuxt/DocsModuleCard.hpjmQYW8.js
rename to _nuxt/DocsModuleCard.2ZwiOzRg.js
index 212ca3b42b..6ea678b8d6 100644
--- a/_nuxt/DocsModuleCard.hpjmQYW8.js
+++ b/_nuxt/DocsModuleCard.2ZwiOzRg.js
@@ -1 +1 @@
-import{_ as m}from"./RplPromoCard.vue.btg01fDe.js";import{u}from"./asyncData.6xpne1x0.js";import{d as c,a1 as i,b as d,G as p,w as _,N as n,t as f,e as w,q as y}from"./entry.49ZHHvLB.js";import"./RplImage.css.o2mWVvok.js";import"./RplTextLink.css.ll_eQGN0.js";import"./RplLink.vue.TWUjSovo.js";import"./useRippleEvent.DMJaxZxB.js";const D=c({__name:"DocsModuleCard",props:{moduleSlug:{}},async setup(r){let o,t;const e=r,{data:a}=([o,t]=i(async()=>u(`module-info-${e.moduleSlug}`,async()=>await y(`framework/modules/${e.moduleSlug}/_module`).findOne()||null)),o=await o,t(),o);return(s,C)=>{const l=m;return d(),p(l,{title:n(a).name,url:`/framework/modules/${e.moduleSlug}`},{default:_(()=>[w("p",null,f(n(a).description),1)]),_:1},8,["title","url"])}}});export{D as default};
+import{_ as m}from"./RplPromoCard.vue.pyq2iKcr.js";import{u}from"./asyncData.mgwg8A3s.js";import{d as c,a1 as i,b as d,G as p,w as _,N as n,t as f,e as w,q as y}from"./entry.Do8xnxHS.js";import"./RplImage.css.ouJWHfa9.js";import"./RplTextLink.css.vnmpcBOe.js";import"./RplLink.vue.3IdzOFUB.js";import"./useRippleEvent.Eg1owuZM.js";const D=c({__name:"DocsModuleCard",props:{moduleSlug:{}},async setup(r){let o,t;const e=r,{data:a}=([o,t]=i(async()=>u(`module-info-${e.moduleSlug}`,async()=>await y(`framework/modules/${e.moduleSlug}/_module`).findOne()||null)),o=await o,t(),o);return(s,C)=>{const l=m;return d(),p(l,{title:n(a).name,url:`/framework/modules/${e.moduleSlug}`},{default:_(()=>[w("p",null,f(n(a).description),1)]),_:1},8,["title","url"])}}});export{D as default};
diff --git a/_nuxt/DocsModuleInfo.1q5O7tu6.js b/_nuxt/DocsModuleInfo.dxnzvO_K.js
similarity index 71%
rename from _nuxt/DocsModuleInfo.1q5O7tu6.js
rename to _nuxt/DocsModuleInfo.dxnzvO_K.js
index 63d742f36d..caf534865d 100644
--- a/_nuxt/DocsModuleInfo.1q5O7tu6.js
+++ b/_nuxt/DocsModuleInfo.dxnzvO_K.js
@@ -1 +1 @@
-import c from"./DocsLink.5OmhIBHZ.js";import{_ as d}from"./RplTextLink.css.ll_eQGN0.js";import{d as _,b as i,c as m,e,t,g as l,w as n,D as s}from"./entry.49ZHHvLB.js";import{_ as u}from"./_plugin-vue_export-helper.x3n3nnut.js";import"./RplIcon.vue.NIDikUS0.js";import"./RplLink.vue.TWUjSovo.js";const p={class:"docs-module"},f={class:"docs-module-section"},h={class:"docs-module-name rpl-type-p-large"},k={class:"rpl-type-p"},b={class:"docs-module-links"},v={class:"docs-module-section"},y={class:"rpl-type-p-small"},g=_({__name:"DocsModuleInfo",props:{module:{}},setup(x){return(o,D)=>{const r=c,a=d;return i(),m("div",p,[e("div",f,[e("h2",h,t(o.module.name),1),e("p",k,t(o.module.packageName),1),e("div",b,[l(r,{url:o.module.sourceUrl,isExternal:""},{default:n(()=>[s("View source")]),_:1},8,["url"]),l(r,{url:o.module.issuesUrl,isExternal:""},{default:n(()=>[s("Report an issue")]),_:1},8,["url"])])]),e("div",v,[e("p",y,[s(" Contributed by "),l(a,{url:o.module.contributor.url},{default:n(()=>[s(t(o.module.contributor.name),1)]),_:1},8,["url"])])])])}}}),I=u(g,[["__scopeId","data-v-68732258"]]);export{I as default};
+import c from"./DocsLink._8mcEyeM.js";import{_ as d}from"./RplTextLink.css.vnmpcBOe.js";import{d as _,b as i,c as m,e,t,g as l,w as n,D as s}from"./entry.Do8xnxHS.js";import{_ as u}from"./_plugin-vue_export-helper.x3n3nnut.js";import"./RplIcon.vue.PZ-X7Qhh.js";import"./RplLink.vue.3IdzOFUB.js";const p={class:"docs-module"},f={class:"docs-module-section"},h={class:"docs-module-name rpl-type-p-large"},k={class:"rpl-type-p"},b={class:"docs-module-links"},v={class:"docs-module-section"},y={class:"rpl-type-p-small"},g=_({__name:"DocsModuleInfo",props:{module:{}},setup(x){return(o,D)=>{const r=c,a=d;return i(),m("div",p,[e("div",f,[e("h2",h,t(o.module.name),1),e("p",k,t(o.module.packageName),1),e("div",b,[l(r,{url:o.module.sourceUrl,isExternal:""},{default:n(()=>[s("View source")]),_:1},8,["url"]),l(r,{url:o.module.issuesUrl,isExternal:""},{default:n(()=>[s("Report an issue")]),_:1},8,["url"])])]),e("div",v,[e("p",y,[s(" Contributed by "),l(a,{url:o.module.contributor.url},{default:n(()=>[s(t(o.module.contributor.name),1)]),_:1},8,["url"])])])])}}}),I=u(g,[["__scopeId","data-v-68732258"]]);export{I as default};
diff --git a/_nuxt/DocsModuleNavigation.1X1oFgOt.js b/_nuxt/DocsModuleNavigation.1X1oFgOt.js
deleted file mode 100644
index fb64a2c165..0000000000
--- a/_nuxt/DocsModuleNavigation.1X1oFgOt.js
+++ /dev/null
@@ -1 +0,0 @@
-import i from"./DocsNavLink.5k-bni1U.js";import{u as m,_ as c}from"./useDocsNavigation.w75JuMbu.js";import{d as p,m as l,a1 as u,b as d,c as f,g as n,w as x,N as a,t as g,D as v}from"./entry.49ZHHvLB.js";import{_ as N}from"./_plugin-vue_export-helper.x3n3nnut.js";import"./RplIcon.vue.NIDikUS0.js";import"./nuxt-link.jgZZZkZ5.js";import"./RplLink.vue.TWUjSovo.js";import"./useRippleEvent.DMJaxZxB.js";import"./asyncData.6xpne1x0.js";const D=p({__name:"DocsModuleNavigation",async setup(h){let t,s;const o=l(),e=([t,s]=u(()=>m([o.params.slug[0],o.params.slug[1],o.params.slug[2]])),t=await t,s(),t);return(w,C)=>{const r=i,_=c;return d(),f("div",null,[n(r,{url:a(e)[0].url},{default:x(()=>[v(g(a(e)[0].text),1)]),_:1},8,["url"]),n(_,{items:a(e)[0].items,level:2},null,8,["items"])])}}}),I=N(D,[["__scopeId","data-v-d45d87fb"]]);export{I as default};
diff --git a/_nuxt/DocsModuleNavigation.N74iA2Tc.js b/_nuxt/DocsModuleNavigation.N74iA2Tc.js
new file mode 100644
index 0000000000..0b36504843
--- /dev/null
+++ b/_nuxt/DocsModuleNavigation.N74iA2Tc.js
@@ -0,0 +1 @@
+import i from"./DocsNavLink.k4ZwJ1d1.js";import{u as m,_ as c}from"./useDocsNavigation.a2cLzZKV.js";import{d as p,m as l,a1 as u,b as d,c as f,g as n,w as x,N as a,t as g,D as v}from"./entry.Do8xnxHS.js";import{_ as N}from"./_plugin-vue_export-helper.x3n3nnut.js";import"./RplIcon.vue.PZ-X7Qhh.js";import"./nuxt-link.sM27-MT7.js";import"./RplLink.vue.3IdzOFUB.js";import"./useRippleEvent.Eg1owuZM.js";import"./asyncData.mgwg8A3s.js";const D=p({__name:"DocsModuleNavigation",async setup(h){let t,s;const o=l(),e=([t,s]=u(()=>m([o.params.slug[0],o.params.slug[1],o.params.slug[2]])),t=await t,s(),t);return(w,C)=>{const r=i,_=c;return d(),f("div",null,[n(r,{url:a(e)[0].url},{default:x(()=>[v(g(a(e)[0].text),1)]),_:1},8,["url"]),n(_,{items:a(e)[0].items,level:2},null,8,["items"])])}}}),I=N(D,[["__scopeId","data-v-d45d87fb"]]);export{I as default};
diff --git a/_nuxt/DocsNavLink.5k-bni1U.js b/_nuxt/DocsNavLink.k4ZwJ1d1.js
similarity index 77%
rename from _nuxt/DocsNavLink.5k-bni1U.js
rename to _nuxt/DocsNavLink.k4ZwJ1d1.js
index a4700b080c..5900b13cfe 100644
--- a/_nuxt/DocsNavLink.5k-bni1U.js
+++ b/_nuxt/DocsNavLink.k4ZwJ1d1.js
@@ -1 +1 @@
-import{_ as r}from"./RplIcon.vue.NIDikUS0.js";import{_ as c}from"./nuxt-link.jgZZZkZ5.js";import{d as i,b as n,G as e,w as l,f as a,E as p,e as m}from"./entry.49ZHHvLB.js";import{_ as u}from"./_plugin-vue_export-helper.x3n3nnut.js";const _=i({__name:"DocsNavLink",props:{url:{},icon:{default:""},iconPosition:{default:"start"}},setup(d){return(o,f)=>{const s=r,t=c;return n(),e(t,{to:o.url,class:"docs-nav-link rpl-type-p-small rpl-u-focusable-block"},{default:l(()=>[o.icon&&o.iconPosition==="start"?(n(),e(s,{key:0,name:o.icon,size:"xs",class:"rpl-u-margin-r-1"},null,8,["name"])):a("",!0),m("span",null,[p(o.$slots,"default",{},void 0,!0)]),o.icon&&o.iconPosition==="end"?(n(),e(s,{key:1,name:o.icon,size:"xs",class:"rpl-u-margin-r-1"},null,8,["name"])):a("",!0)]),_:3},8,["to"])}}}),y=u(_,[["__scopeId","data-v-c9c4789e"]]);export{y as default};
+import{_ as r}from"./RplIcon.vue.PZ-X7Qhh.js";import{_ as c}from"./nuxt-link.sM27-MT7.js";import{d as i,b as n,G as e,w as l,f as a,E as p,e as m}from"./entry.Do8xnxHS.js";import{_ as u}from"./_plugin-vue_export-helper.x3n3nnut.js";const _=i({__name:"DocsNavLink",props:{url:{},icon:{default:""},iconPosition:{default:"start"}},setup(d){return(o,f)=>{const s=r,t=c;return n(),e(t,{to:o.url,class:"docs-nav-link rpl-type-p-small rpl-u-focusable-block"},{default:l(()=>[o.icon&&o.iconPosition==="start"?(n(),e(s,{key:0,name:o.icon,size:"xs",class:"rpl-u-margin-r-1"},null,8,["name"])):a("",!0),m("span",null,[p(o.$slots,"default",{},void 0,!0)]),o.icon&&o.iconPosition==="end"?(n(),e(s,{key:1,name:o.icon,size:"xs",class:"rpl-u-margin-r-1"},null,8,["name"])):a("",!0)]),_:3},8,["to"])}}}),y=u(_,[["__scopeId","data-v-c9c4789e"]]);export{y as default};
diff --git a/_nuxt/DocsPageHeader.vbDi0R7z.js b/_nuxt/DocsPageHeader.J1YDFRG1.js
similarity index 73%
rename from _nuxt/DocsPageHeader.vbDi0R7z.js
rename to _nuxt/DocsPageHeader.J1YDFRG1.js
index aa44cf93af..598d58083e 100644
--- a/_nuxt/DocsPageHeader.vbDi0R7z.js
+++ b/_nuxt/DocsPageHeader.J1YDFRG1.js
@@ -1 +1 @@
-import l from"./DocsLink.5OmhIBHZ.js";import{d as p,b as t,c as s,e as a,t as o,F as c,W as _,g as d,w as m,D as u,f}from"./entry.49ZHHvLB.js";import{_ as h}from"./_plugin-vue_export-helper.x3n3nnut.js";import"./RplIcon.vue.NIDikUS0.js";import"./RplTextLink.css.ll_eQGN0.js";import"./RplLink.vue.TWUjSovo.js";const g={class:"docs-page-header"},k={class:"rpl-type-h1 rpl-u-margin-b-2"},y={class:"rpl-type-p-large"},x={key:0,class:"links rpl-u-margin-t-5"},D=p({__name:"DocsPageHeader",props:{title:{},description:{default:""},links:{default:()=>[]}},setup(N){return(e,V)=>{const n=l;return t(),s("header",g,[a("h1",k,o(e.title),1),a("p",y,o(e.description),1),e.links&&e.links.length?(t(),s("ul",x,[(t(!0),s(c,null,_(e.links,(r,i)=>(t(),s("li",{key:i},[d(n,{isExternal:"",iconPosition:"start",url:r.url,class:"rpl-type-p"},{default:m(()=>[u(o(r.text),1)]),_:2},1032,["url"])]))),128))])):f("",!0)])}}}),L=h(D,[["__scopeId","data-v-3163c6df"]]);export{L as default};
+import l from"./DocsLink._8mcEyeM.js";import{d as p,b as t,c as s,e as a,t as o,F as c,W as _,g as d,w as m,D as u,f}from"./entry.Do8xnxHS.js";import{_ as h}from"./_plugin-vue_export-helper.x3n3nnut.js";import"./RplIcon.vue.PZ-X7Qhh.js";import"./RplTextLink.css.vnmpcBOe.js";import"./RplLink.vue.3IdzOFUB.js";const g={class:"docs-page-header"},k={class:"rpl-type-h1 rpl-u-margin-b-2"},y={class:"rpl-type-p-large"},x={key:0,class:"links rpl-u-margin-t-5"},D=p({__name:"DocsPageHeader",props:{title:{},description:{default:""},links:{default:()=>[]}},setup(N){return(e,V)=>{const n=l;return t(),s("header",g,[a("h1",k,o(e.title),1),a("p",y,o(e.description),1),e.links&&e.links.length?(t(),s("ul",x,[(t(!0),s(c,null,_(e.links,(r,i)=>(t(),s("li",{key:i},[d(n,{isExternal:"",iconPosition:"start",url:r.url,class:"rpl-type-p"},{default:m(()=>[u(o(r.text),1)]),_:2},1032,["url"])]))),128))])):f("",!0)])}}}),L=h(D,[["__scopeId","data-v-3163c6df"]]);export{L as default};
diff --git a/_nuxt/DocsThemeChooser.MC6JDrOF.js b/_nuxt/DocsThemeChooser.xp0uGfRQ.js
similarity index 95%
rename from _nuxt/DocsThemeChooser.MC6JDrOF.js
rename to _nuxt/DocsThemeChooser.xp0uGfRQ.js
index 2dc12bc92a..22832cff13 100644
--- a/_nuxt/DocsThemeChooser.MC6JDrOF.js
+++ b/_nuxt/DocsThemeChooser.xp0uGfRQ.js
@@ -1 +1 @@
-import{d as m,b as r,G as y,w as h,E as b,e as i,c as d,f as C,a2 as R,H as k,F as v,W as B,t as F,n as T,r as $,R as q,g as f,D as V,N as _,a3 as E}from"./entry.49ZHHvLB.js";import{u as D}from"./rpl-lib.es.r8Pb5jxA.js";import{_ as x}from"./_plugin-vue_export-helper.x3n3nnut.js";const A={class:"rpl-form-label__inner"},S={key:0,class:"rpl-form-label__required rpl-type-label-small"},I=m({__name:"RplFormLabel",props:{tag:{default:"label"},isRequired:{type:Boolean,default:!1}},setup(o){return(e,t)=>(r(),y(R(e.tag),{class:"rpl-form-label rpl-type-h4-fixed"},{default:h(()=>[i("span",A,[b(e.$slots,"default")]),e.isRequired?(r(),d("span",S,"(Required)")):C("",!0)]),_:3}))}});function L(o,e,t,...a){o[t]&&typeof o[t]=="function"&&o[t](...a),e(t,...a)}const N=(o,e)=>{const t=Array.isArray(e)?e.join(","):e;return o!==!1?"[redacted]":t},j=["id","data-rpl-focus-input","name","disabled","checked","onChange"],w=["for"],O=m({__name:"RplFormOptionButtons",props:{id:{},name:{},value:{},label:{default:void 0},disabled:{type:Boolean,default:!1},perfectSquares:{type:Boolean,default:!1},onChange:{type:Function,default:()=>{}},options:{default:()=>[]},pii:{type:Boolean,default:!0}},emits:["onChange","update"],setup(o,{emit:e}){const t=o,a=e,s=k("form"),{emitRplEvent:u}=D("rpl-form-option-buttons",a),p=l=>{L(t,a,"onChange",l),u("update",{action:"update",id:t.id,label:t==null?void 0:t.label,value:N(t.pii,l),contextId:s==null?void 0:s.id,contextName:s==null?void 0:s.name},{global:!0})},c=l=>t.value===l;return(l,U)=>(r(),d("div",{class:T({"rpl-form-opt-buttons":!0,"rpl-form-opt-buttons--squares":t.perfectSquares})},[(r(!0),d(v,null,B(l.options,(n,g)=>(r(),d("div",{key:n.id,class:"rpl-form-opt-buttons-option"},[i("input",{id:n.id,class:"rpl-form-opt-buttons-option__input",type:"radio","data-rpl-focus-input":g===0?l.id:void 0,name:l.name,disabled:l.disabled||n.disabled,checked:c(n.id),onChange:W=>p(n.id)},null,40,j),i("label",{class:"rpl-form-opt-buttons-option__label rpl-type-label",for:n.id},F(n.label),9,w)]))),128))],2))}}),z={class:"rpl-form__outer docs-theme-chooser-controls"},G={class:"docs-theme-chooser-examples"},H=m({__name:"DocsThemeChooser",setup(o){const e=$("docsTheme1"),t=a=>{e.value=a};return q("exampleTheme",e),(a,s)=>{const u=I,p=O;return r(),d(v,null,[i("div",z,[f(u,{tag:"label"},{default:h(()=>[V("Theme options")]),_:1}),f(p,{modelValue:_(e),"onUpdate:modelValue":s[0]||(s[0]=c=>E(e)?e.value=c:null),id:"theme-chooser",name:"theme-chooser",onChange:t,value:_(e),options:[{id:"docsTheme1",label:"Alt 1",value:"light"},{id:"docsTheme2",label:"Alt 2",value:"dark"},{id:"default",label:"vic.gov.au",value:"default"}]},null,8,["modelValue","value","options"])]),i("div",G,[b(a.$slots,"default",{},void 0,!0)])],64)}}}),P=x(H,[["__scopeId","data-v-058e8db5"]]);export{P as default};
+import{d as m,b as r,G as y,w as h,E as b,e as i,c as d,f as C,a2 as R,H as k,F as v,W as B,t as F,n as T,r as $,R as q,g as f,D as V,N as _,a3 as E}from"./entry.Do8xnxHS.js";import{u as D}from"./rpl-lib.es.b8udu3ko.js";import{_ as x}from"./_plugin-vue_export-helper.x3n3nnut.js";const A={class:"rpl-form-label__inner"},S={key:0,class:"rpl-form-label__required rpl-type-label-small"},I=m({__name:"RplFormLabel",props:{tag:{default:"label"},isRequired:{type:Boolean,default:!1}},setup(o){return(e,t)=>(r(),y(R(e.tag),{class:"rpl-form-label rpl-type-h4-fixed"},{default:h(()=>[i("span",A,[b(e.$slots,"default")]),e.isRequired?(r(),d("span",S,"(Required)")):C("",!0)]),_:3}))}});function L(o,e,t,...a){o[t]&&typeof o[t]=="function"&&o[t](...a),e(t,...a)}const N=(o,e)=>{const t=Array.isArray(e)?e.join(","):e;return o!==!1?"[redacted]":t},j=["id","data-rpl-focus-input","name","disabled","checked","onChange"],w=["for"],O=m({__name:"RplFormOptionButtons",props:{id:{},name:{},value:{},label:{default:void 0},disabled:{type:Boolean,default:!1},perfectSquares:{type:Boolean,default:!1},onChange:{type:Function,default:()=>{}},options:{default:()=>[]},pii:{type:Boolean,default:!0}},emits:["onChange","update"],setup(o,{emit:e}){const t=o,a=e,s=k("form"),{emitRplEvent:u}=D("rpl-form-option-buttons",a),p=l=>{L(t,a,"onChange",l),u("update",{action:"update",id:t.id,label:t==null?void 0:t.label,value:N(t.pii,l),contextId:s==null?void 0:s.id,contextName:s==null?void 0:s.name},{global:!0})},c=l=>t.value===l;return(l,U)=>(r(),d("div",{class:T({"rpl-form-opt-buttons":!0,"rpl-form-opt-buttons--squares":t.perfectSquares})},[(r(!0),d(v,null,B(l.options,(n,g)=>(r(),d("div",{key:n.id,class:"rpl-form-opt-buttons-option"},[i("input",{id:n.id,class:"rpl-form-opt-buttons-option__input",type:"radio","data-rpl-focus-input":g===0?l.id:void 0,name:l.name,disabled:l.disabled||n.disabled,checked:c(n.id),onChange:W=>p(n.id)},null,40,j),i("label",{class:"rpl-form-opt-buttons-option__label rpl-type-label",for:n.id},F(n.label),9,w)]))),128))],2))}}),z={class:"rpl-form__outer docs-theme-chooser-controls"},G={class:"docs-theme-chooser-examples"},H=m({__name:"DocsThemeChooser",setup(o){const e=$("docsTheme1"),t=a=>{e.value=a};return q("exampleTheme",e),(a,s)=>{const u=I,p=O;return r(),d(v,null,[i("div",z,[f(u,{tag:"label"},{default:h(()=>[V("Theme options")]),_:1}),f(p,{modelValue:_(e),"onUpdate:modelValue":s[0]||(s[0]=c=>E(e)?e.value=c:null),id:"theme-chooser",name:"theme-chooser",onChange:t,value:_(e),options:[{id:"docsTheme1",label:"Alt 1",value:"light"},{id:"docsTheme2",label:"Alt 2",value:"dark"},{id:"default",label:"vic.gov.au",value:"default"}]},null,8,["modelValue","value","options"])]),i("div",G,[b(a.$slots,"default",{},void 0,!0)])],64)}}}),P=x(H,[["__scopeId","data-v-058e8db5"]]);export{P as default};
diff --git a/_nuxt/DocsTypeClassTable.JeAjrHD9.js b/_nuxt/DocsTypeClassTable.c5edmzGt.js
similarity index 94%
rename from _nuxt/DocsTypeClassTable.JeAjrHD9.js
rename to _nuxt/DocsTypeClassTable.c5edmzGt.js
index 383fe8b0df..7e3fd0aa1d 100644
--- a/_nuxt/DocsTypeClassTable.JeAjrHD9.js
+++ b/_nuxt/DocsTypeClassTable.c5edmzGt.js
@@ -1 +1 @@
-import{d as m,J as b,b as l,c as n,e,F as u,W as d,n as h,t as o,N as v,p as f,i as y}from"./entry.49ZHHvLB.js";import{_ as S}from"./_plugin-vue_export-helper.x3n3nnut.js";const C=t=>(f("data-v-ba93a87c"),t=t(),y(),t),k={class:"rpl-table rpl-table--no-stripes"},T={class:"rpl-table__scroll-container",tabindex:"0"},x={class:"w-full"},I=C(()=>e("thead",null,[e("tr",null,[e("th",null,"Style"),e("th",null,"Values"),e("th",null,"CSS Class")])],-1)),j={class:"docs-type-preview"},w=m({__name:"DocsTypeClassTable",props:{type:{}},setup(t){const _=t,i=b(()=>_.type.map(({style:c})=>{const[r,s,a]=Object.values(c);return{name:r,values:s==null?void 0:s.values.map(p=>({name:Object.keys(p)[0],value:Object.values(p)[0]})),selector:a}}));return(c,r)=>(l(),n("div",k,[e("div",T,[e("table",x,[I,e("tbody",null,[(l(!0),n(u,null,d(v(i),s=>(l(),n("tr",{key:s.name},[e("td",j,[e("span",{class:h(s.selector)},o(s.name),3)]),e("td",null,[(l(!0),n(u,null,d(s.values,a=>(l(),n("div",{key:a.name},o(a.name)+": "+o(a.value),1))),128))]),e("td",null,o(s.selector),1)]))),128))])])])]))}}),O=S(w,[["__scopeId","data-v-ba93a87c"]]);export{O as default};
+import{d as m,J as b,b as l,c as n,e,F as u,W as d,n as h,t as o,N as v,p as f,i as y}from"./entry.Do8xnxHS.js";import{_ as S}from"./_plugin-vue_export-helper.x3n3nnut.js";const C=t=>(f("data-v-ba93a87c"),t=t(),y(),t),k={class:"rpl-table rpl-table--no-stripes"},T={class:"rpl-table__scroll-container",tabindex:"0"},x={class:"w-full"},I=C(()=>e("thead",null,[e("tr",null,[e("th",null,"Style"),e("th",null,"Values"),e("th",null,"CSS Class")])],-1)),j={class:"docs-type-preview"},w=m({__name:"DocsTypeClassTable",props:{type:{}},setup(t){const _=t,i=b(()=>_.type.map(({style:c})=>{const[r,s,a]=Object.values(c);return{name:r,values:s==null?void 0:s.values.map(p=>({name:Object.keys(p)[0],value:Object.values(p)[0]})),selector:a}}));return(c,r)=>(l(),n("div",k,[e("div",T,[e("table",x,[I,e("tbody",null,[(l(!0),n(u,null,d(v(i),s=>(l(),n("tr",{key:s.name},[e("td",j,[e("span",{class:h(s.selector)},o(s.name),3)]),e("td",null,[(l(!0),n(u,null,d(s.values,a=>(l(),n("div",{key:a.name},o(a.name)+": "+o(a.value),1))),128))]),e("td",null,o(s.selector),1)]))),128))])])])]))}}),O=S(w,[["__scopeId","data-v-ba93a87c"]]);export{O as default};
diff --git a/_nuxt/DocsTypeTable.Iq8SBPIK.js b/_nuxt/DocsTypeTable.S30MUh9q.js
similarity index 95%
rename from _nuxt/DocsTypeTable.Iq8SBPIK.js
rename to _nuxt/DocsTypeTable.S30MUh9q.js
index e8a540622f..7033508904 100644
--- a/_nuxt/DocsTypeTable.Iq8SBPIK.js
+++ b/_nuxt/DocsTypeTable.S30MUh9q.js
@@ -1 +1 @@
-import{d as v,J as c,b as s,c as u,e,F as p,W as d,t as n,N as i,p as _,i as y}from"./entry.49ZHHvLB.js";import{_ as b}from"./_plugin-vue_export-helper.x3n3nnut.js";const h={type:{font:{family:{value:"VIC, Arial, Helvetica, sans-serif"}},weight:{regular:{value:400},bold:{value:700}},size:{1:{value:"1.4rem"},2:{value:"1.6rem"},3:{value:"2rem"},4:{value:"2.4rem"},5:{value:"2.8rem"},6:{value:"3.2rem"},7:{value:"4rem"},8:{value:"5.6rem"}},lh:{1:{value:"1.4rem"},2:{value:"1.6rem"},3:{value:"2rem"},4:{value:"2.4rem"},5:{value:"2.8rem"},6:{value:"3.2rem"},7:{value:"3.6rem"},8:{value:"4rem"},9:{value:"4.4rem"},10:{value:"5.2rem"},11:{value:"6rem"},12:{value:"8rem"}},ls:{1:{value:"0.0192em"},2:{value:"0.018em"},3:{value:"0.0168em"},4:{value:"0.016em"},5:{value:"0.014em"},6:{value:"0.012em"},7:{value:"0.008em"}}}},f=h,S=a=>(_("data-v-48c75dd7"),a=a(),y(),a),k={class:"rpl-table rpl-table--no-stripes"},I={class:"rpl-table__scroll-container",tabindex:"0"},g={class:"w-full"},x=S(()=>e("thead",null,[e("tr",null,[e("th",null,"Value"),e("th",null,"CSS Variable")])],-1)),T=v({__name:"DocsTypeTable",props:{type:{}},setup(a){const o=a,m=c(()=>{let l=f.type[o.type];return Object.keys(l).map(t=>({value:l[t].value,token:`rpl-type-${o.type}-${t}`}))});return(l,t)=>(s(),u("div",k,[e("div",I,[e("table",g,[x,e("tbody",null,[(s(!0),u(p,null,d(i(m),r=>(s(),u("tr",{key:r.token},[e("td",null,n(r.value),1),e("td",null,n(r.token),1)]))),128))])])])]))}}),B=b(T,[["__scopeId","data-v-48c75dd7"]]);export{B as default};
+import{d as v,J as c,b as s,c as u,e,F as p,W as d,t as n,N as i,p as _,i as y}from"./entry.Do8xnxHS.js";import{_ as b}from"./_plugin-vue_export-helper.x3n3nnut.js";const h={type:{font:{family:{value:"VIC, Arial, Helvetica, sans-serif"}},weight:{regular:{value:400},bold:{value:700}},size:{1:{value:"1.4rem"},2:{value:"1.6rem"},3:{value:"2rem"},4:{value:"2.4rem"},5:{value:"2.8rem"},6:{value:"3.2rem"},7:{value:"4rem"},8:{value:"5.6rem"}},lh:{1:{value:"1.4rem"},2:{value:"1.6rem"},3:{value:"2rem"},4:{value:"2.4rem"},5:{value:"2.8rem"},6:{value:"3.2rem"},7:{value:"3.6rem"},8:{value:"4rem"},9:{value:"4.4rem"},10:{value:"5.2rem"},11:{value:"6rem"},12:{value:"8rem"}},ls:{1:{value:"0.0192em"},2:{value:"0.018em"},3:{value:"0.0168em"},4:{value:"0.016em"},5:{value:"0.014em"},6:{value:"0.012em"},7:{value:"0.008em"}}}},f=h,S=a=>(_("data-v-48c75dd7"),a=a(),y(),a),k={class:"rpl-table rpl-table--no-stripes"},I={class:"rpl-table__scroll-container",tabindex:"0"},g={class:"w-full"},x=S(()=>e("thead",null,[e("tr",null,[e("th",null,"Value"),e("th",null,"CSS Variable")])],-1)),T=v({__name:"DocsTypeTable",props:{type:{}},setup(a){const o=a,m=c(()=>{let l=f.type[o.type];return Object.keys(l).map(t=>({value:l[t].value,token:`rpl-type-${o.type}-${t}`}))});return(l,t)=>(s(),u("div",k,[e("div",I,[e("table",g,[x,e("tbody",null,[(s(!0),u(p,null,d(i(m),r=>(s(),u("tr",{key:r.token},[e("td",null,n(r.value),1),e("td",null,n(r.token),1)]))),128))])])])]))}}),B=b(T,[["__scopeId","data-v-48c75dd7"]]);export{B as default};
diff --git a/_nuxt/DocsWhatsNew.3ELaYX2l.js b/_nuxt/DocsWhatsNew.iLgRC7ZK.js
similarity index 91%
rename from _nuxt/DocsWhatsNew.3ELaYX2l.js
rename to _nuxt/DocsWhatsNew.iLgRC7ZK.js
index 3a617fdab2..7cfae9506e 100644
--- a/_nuxt/DocsWhatsNew.3ELaYX2l.js
+++ b/_nuxt/DocsWhatsNew.iLgRC7ZK.js
@@ -1 +1 @@
-import{d as v,aq as L,J as R,b as s,c as r,E as n,f as c,e as p,n as b,t as k,G as f,F as B,W as E,w as m,D as I,g as y,aC as W}from"./entry.49ZHHvLB.js";import{_ as w}from"./RplIcon.vue.NIDikUS0.js";import{_ as H}from"./RplList.vue.4pRwhR7E.js";import{_ as S}from"./RplButton.css.kobVpNhn.js";import{_ as V}from"./RplTextLink.css.ll_eQGN0.js";import{u as N}from"./useRippleEvent.DMJaxZxB.js";import{_ as z}from"./_plugin-vue_export-helper.x3n3nnut.js";import"./RplLink.vue.TWUjSovo.js";const D={class:"rpl-header"},T={key:0,class:"rpl-header__behind rpl-u-screen-only"},F={class:"rpl-container"},q={class:"rpl-grid"},G={key:0,class:"rpl-header__upper"},J={class:"rpl-header__body"},j={class:"rpl-header__content"},A={key:1,class:"rpl-header__lower"},K={key:0,class:"rpl-header__aside rpl-col-12 rpl-col-4-m rpl-col-start-9-m"},M=v({__name:"RplHeader",props:{fullWidth:{type:Boolean,default:!1},limitContent:{type:Boolean,default:!1}},setup(_){const i=_,o=L(),a=R(()=>({"rpl-header__main":!0,"rpl-col-12":!0,"rpl-col-7-m":!i.fullWidth&&(o.aside||i.limitContent),"rpl-col-10-m":!i.fullWidth&&!o.aside&&!i.limitContent}));return(t,u)=>(s(),r("div",D,[t.$slots.behind?(s(),r("div",T,[n(t.$slots,"behind")])):c("",!0),p("div",F,[p("div",q,[p("div",{class:b(a.value)},[t.$slots.upper?(s(),r("div",G,[n(t.$slots,"upper")])):c("",!0),p("div",J,[n(t.$slots,"title"),p("div",j,[n(t.$slots,"default")])]),t.$slots.lower?(s(),r("div",A,[n(t.$slots,"lower")])):c("",!0)],2),t.$slots.aside?(s(),r("div",K,[n(t.$slots,"aside")])):c("",!0)])])]))}}),O={key:0,class:"rpl-header-links__title rpl-type-h4"},P={key:2,class:"rpl-header-links__list"},Q={key:3,class:"rpl-header-links__more"},U=v({__name:"RplHeaderLinks",props:{title:{default:void 0},items:{},type:{default:"link"},moreLink:{default:void 0}},emits:["itemClick"],setup(_,{emit:i}){const o=_,a=i,{emitRplEvent:t}=N("rpl-header",a),u=e=>{t("itemClick",{action:"click",value:e.url,text:e.text,section:"links",elementType:o.type})},l=e=>{t("itemClick",{...e,section:"links",elementType:o.type})};return(e,h)=>(s(),r("div",{class:b(`rpl-header-links rpl-header-links--${e.type}`)},[e.title?(s(),r("h2",O,k(e.title),1)):c("",!0),e.type==="link"?(s(),f(H,{key:1,items:e.items,"container-class":"rpl-header-links__list","item-class":"rpl-header-links__item rpl-header__text-large-fixed rpl-type-p","icon-placement":"after",onItemClick:l},null,8,["items"])):(s(),r("div",P,[(s(!0),r(B,null,E(e.items,d=>(s(),f(S,{key:d.url,url:d.url,el:"a",class:"rpl-header-links__item",onClick:()=>u(d)},{default:m(()=>[I(k(d.text),1)]),_:2},1032,["url","onClick"]))),128))])),e.moreLink?(s(),r("div",Q,[y(V,{url:e.moreLink.url,class:"rpl-header__text-large-fixed rpl-header__icon-link rpl-type-p rpl-type-weight-bold",onClick:h[0]||(h[0]=()=>u(e.moreLink))},{default:m(()=>[p("span",null,k(e.moreLink.text),1),y(w,{name:"icon-arrow-right",size:"xs"})]),_:1},8,["url"])])):c("",!0)],2))}}),X={class:"rpl-header__title rpl-type-h2","data-cy":"title"},Y={key:0,"data-cy":"summary"},Z=v({__name:"RplIntroHeader",props:{title:{},content:{default:void 0},links:{default:void 0},iconName:{default:void 0}},emits:["navigate"],setup(_,{emit:i}){const o=_,a=i,{emitRplEvent:t}=N("rpl-header",a),u=l=>{t("navigate",{...l,label:o==null?void 0:o.title,type:"intro"},{global:!0})};return(l,e)=>{var h,d;return s(),f(M,{class:"rpl-header--intro"},W({title:m(()=>[p("h2",X,k(l.title),1)]),default:m(()=>[l.$slots.default?(s(),r("div",Y,[n(l.$slots,"default")])):c("",!0)]),_:2},[l.iconName?{name:"upper",fn:m(()=>[y(w,{class:"rpl-header__icon",name:l.iconName,size:"l"},null,8,["name"])]),key:"0"}:void 0,(d=(h=l.links)==null?void 0:h.items)!=null&&d.length?{name:"aside",fn:m(()=>{var $,C;return[y(U,{title:($=l.links)==null?void 0:$.title,items:(l.links.items||[]).map(g=>({...g,icon:g.icon||"icon-arrow-right"})),type:(C=l.links)==null?void 0:C.type,"more-link":l.links.more,onItemClick:u},null,8,["title","items","type","more-link"])]}),key:"1"}:void 0]),1024)}}}),x=v({__name:"DocsWhatsNew",props:{title:{},description:{},links:{default:()=>[]}},setup(_){return(i,o)=>{const a=Z;return s(),f(a,{class:"custom",title:i.title,iconName:"icon-information-circle-filled",links:{items:i.links}},{default:m(()=>[n(i.$slots,"default",{},void 0,!0)]),_:3},8,["title","links"])}}}),ae=z(x,[["__scopeId","data-v-bb051665"]]);export{ae as default};
+import{d as v,aq as L,J as R,b as s,c as r,E as n,f as c,e as p,n as b,t as k,G as f,F as B,W as E,w as m,D as I,g as y,aC as W}from"./entry.Do8xnxHS.js";import{_ as w}from"./RplIcon.vue.PZ-X7Qhh.js";import{_ as H}from"./RplList.vue.i5RvVHLA.js";import{_ as S}from"./RplButton.css.bGBZW0Bs.js";import{_ as V}from"./RplTextLink.css.vnmpcBOe.js";import{u as N}from"./useRippleEvent.Eg1owuZM.js";import{_ as z}from"./_plugin-vue_export-helper.x3n3nnut.js";import"./RplLink.vue.3IdzOFUB.js";const D={class:"rpl-header"},T={key:0,class:"rpl-header__behind rpl-u-screen-only"},F={class:"rpl-container"},q={class:"rpl-grid"},G={key:0,class:"rpl-header__upper"},J={class:"rpl-header__body"},j={class:"rpl-header__content"},A={key:1,class:"rpl-header__lower"},K={key:0,class:"rpl-header__aside rpl-col-12 rpl-col-4-m rpl-col-start-9-m"},M=v({__name:"RplHeader",props:{fullWidth:{type:Boolean,default:!1},limitContent:{type:Boolean,default:!1}},setup(_){const i=_,o=L(),a=R(()=>({"rpl-header__main":!0,"rpl-col-12":!0,"rpl-col-7-m":!i.fullWidth&&(o.aside||i.limitContent),"rpl-col-10-m":!i.fullWidth&&!o.aside&&!i.limitContent}));return(t,u)=>(s(),r("div",D,[t.$slots.behind?(s(),r("div",T,[n(t.$slots,"behind")])):c("",!0),p("div",F,[p("div",q,[p("div",{class:b(a.value)},[t.$slots.upper?(s(),r("div",G,[n(t.$slots,"upper")])):c("",!0),p("div",J,[n(t.$slots,"title"),p("div",j,[n(t.$slots,"default")])]),t.$slots.lower?(s(),r("div",A,[n(t.$slots,"lower")])):c("",!0)],2),t.$slots.aside?(s(),r("div",K,[n(t.$slots,"aside")])):c("",!0)])])]))}}),O={key:0,class:"rpl-header-links__title rpl-type-h4"},P={key:2,class:"rpl-header-links__list"},Q={key:3,class:"rpl-header-links__more"},U=v({__name:"RplHeaderLinks",props:{title:{default:void 0},items:{},type:{default:"link"},moreLink:{default:void 0}},emits:["itemClick"],setup(_,{emit:i}){const o=_,a=i,{emitRplEvent:t}=N("rpl-header",a),u=e=>{t("itemClick",{action:"click",value:e.url,text:e.text,section:"links",elementType:o.type})},l=e=>{t("itemClick",{...e,section:"links",elementType:o.type})};return(e,h)=>(s(),r("div",{class:b(`rpl-header-links rpl-header-links--${e.type}`)},[e.title?(s(),r("h2",O,k(e.title),1)):c("",!0),e.type==="link"?(s(),f(H,{key:1,items:e.items,"container-class":"rpl-header-links__list","item-class":"rpl-header-links__item rpl-header__text-large-fixed rpl-type-p","icon-placement":"after",onItemClick:l},null,8,["items"])):(s(),r("div",P,[(s(!0),r(B,null,E(e.items,d=>(s(),f(S,{key:d.url,url:d.url,el:"a",class:"rpl-header-links__item",onClick:()=>u(d)},{default:m(()=>[I(k(d.text),1)]),_:2},1032,["url","onClick"]))),128))])),e.moreLink?(s(),r("div",Q,[y(V,{url:e.moreLink.url,class:"rpl-header__text-large-fixed rpl-header__icon-link rpl-type-p rpl-type-weight-bold",onClick:h[0]||(h[0]=()=>u(e.moreLink))},{default:m(()=>[p("span",null,k(e.moreLink.text),1),y(w,{name:"icon-arrow-right",size:"xs"})]),_:1},8,["url"])])):c("",!0)],2))}}),X={class:"rpl-header__title rpl-type-h2","data-cy":"title"},Y={key:0,"data-cy":"summary"},Z=v({__name:"RplIntroHeader",props:{title:{},content:{default:void 0},links:{default:void 0},iconName:{default:void 0}},emits:["navigate"],setup(_,{emit:i}){const o=_,a=i,{emitRplEvent:t}=N("rpl-header",a),u=l=>{t("navigate",{...l,label:o==null?void 0:o.title,type:"intro"},{global:!0})};return(l,e)=>{var h,d;return s(),f(M,{class:"rpl-header--intro"},W({title:m(()=>[p("h2",X,k(l.title),1)]),default:m(()=>[l.$slots.default?(s(),r("div",Y,[n(l.$slots,"default")])):c("",!0)]),_:2},[l.iconName?{name:"upper",fn:m(()=>[y(w,{class:"rpl-header__icon",name:l.iconName,size:"l"},null,8,["name"])]),key:"0"}:void 0,(d=(h=l.links)==null?void 0:h.items)!=null&&d.length?{name:"aside",fn:m(()=>{var $,C;return[y(U,{title:($=l.links)==null?void 0:$.title,items:(l.links.items||[]).map(g=>({...g,icon:g.icon||"icon-arrow-right"})),type:(C=l.links)==null?void 0:C.type,"more-link":l.links.more,onItemClick:u},null,8,["title","items","type","more-link"])]}),key:"1"}:void 0]),1024)}}}),x=v({__name:"DocsWhatsNew",props:{title:{},description:{},links:{default:()=>[]}},setup(_){return(i,o)=>{const a=Z;return s(),f(a,{class:"custom",title:i.title,iconName:"icon-information-circle-filled",links:{items:i.links}},{default:m(()=>[n(i.$slots,"default",{},void 0,!0)]),_:3},8,["title","links"])}}}),ae=z(x,[["__scopeId","data-v-bb051665"]]);export{ae as default};
diff --git a/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js b/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js
similarity index 77%
rename from _nuxt/DocumentDrivenEmpty.3DI1wYHv.js
rename to _nuxt/DocumentDrivenEmpty.-Bd5tvR3.js
index a2fd55eb65..4256ac0b95 100644
--- a/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js
+++ b/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js
@@ -1 +1 @@
-import{d as n,O as e}from"./entry.49ZHHvLB.js";const r=n({name:"DocumentDrivenEmpty",props:{value:{type:Object,required:!0}},render({value:t}){return e("div",void 0,[e("p","Document is empty"),e("p",`Add content to it by opening ${t._source}/${t._file} file.`)])}});export{r as default};
+import{d as n,O as e}from"./entry.Do8xnxHS.js";const r=n({name:"DocumentDrivenEmpty",props:{value:{type:Object,required:!0}},render({value:t}){return e("div",void 0,[e("p","Document is empty"),e("p",`Add content to it by opening ${t._source}/${t._file} file.`)])}});export{r as default};
diff --git a/_nuxt/Markdown.4yrCw_l0.js b/_nuxt/Markdown.vjX68Z-B.js
similarity index 64%
rename from _nuxt/Markdown.4yrCw_l0.js
rename to _nuxt/Markdown.vjX68Z-B.js
index b8b7368c16..58237e6a0b 100644
--- a/_nuxt/Markdown.4yrCw_l0.js
+++ b/_nuxt/Markdown.vjX68Z-B.js
@@ -1 +1 @@
-import s from"./ContentSlot.lsaDai_l.js";import{d as o,aq as u,J as f,ab as m}from"./entry.49ZHHvLB.js";import"./node.uMQX-T_c.js";const d=o({name:"Markdown",extends:s,setup(t){const{parent:e}=m(),{between:n,default:a}=u(),r=f(()=>typeof t.unwrap=="string"?t.unwrap.split(" "):["*"]);return{fallbackSlot:a,tags:r,between:n,parent:e}}});export{d as default};
+import s from"./ContentSlot.uUI9CND_.js";import{d as o,aq as u,J as f,ab as m}from"./entry.Do8xnxHS.js";import"./node.uMQX-T_c.js";const d=o({name:"Markdown",extends:s,setup(t){const{parent:e}=m(),{between:n,default:a}=u(),r=f(()=>typeof t.unwrap=="string"?t.unwrap.split(" "):["*"]);return{fallbackSlot:a,tags:r,between:n,parent:e}}});export{d as default};
diff --git a/_nuxt/ProseA.gmWvIO0I.js b/_nuxt/ProseA.2rbo7RTC.js
similarity index 51%
rename from _nuxt/ProseA.gmWvIO0I.js
rename to _nuxt/ProseA.2rbo7RTC.js
index 0aefbfed32..695b58553b 100644
--- a/_nuxt/ProseA.gmWvIO0I.js
+++ b/_nuxt/ProseA.2rbo7RTC.js
@@ -1 +1 @@
-import{_ as a}from"./RplTextLink.css.ll_eQGN0.js";import{d as r,b as n,G as s,w as l,E as f}from"./entry.49ZHHvLB.js";import"./RplLink.vue.TWUjSovo.js";const u=r({__name:"ProseA",props:{href:{type:String,default:""},blank:{type:Boolean,default:!1}},setup(e){return(t,p)=>{const o=a;return n(),s(o,{url:e.href},{default:l(()=>[f(t.$slots,"default")]),_:3},8,["url"])}}});export{u as default};
+import{_ as a}from"./RplTextLink.css.vnmpcBOe.js";import{d as r,b as n,G as s,w as l,E as f}from"./entry.Do8xnxHS.js";import"./RplLink.vue.3IdzOFUB.js";const u=r({__name:"ProseA",props:{href:{type:String,default:""},blank:{type:Boolean,default:!1}},setup(e){return(t,p)=>{const o=a;return n(),s(o,{url:e.href},{default:l(()=>[f(t.$slots,"default")]),_:3},8,["url"])}}});export{u as default};
diff --git a/_nuxt/ProseBlockquote.lp_k9Hpd.js b/_nuxt/ProseBlockquote.Czpq-HHw.js
similarity index 75%
rename from _nuxt/ProseBlockquote.lp_k9Hpd.js
rename to _nuxt/ProseBlockquote.Czpq-HHw.js
index 44881dcd4b..c18e0fc8b9 100644
--- a/_nuxt/ProseBlockquote.lp_k9Hpd.js
+++ b/_nuxt/ProseBlockquote.Czpq-HHw.js
@@ -1 +1 @@
-import{_ as e}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as t,c,E as r}from"./entry.49ZHHvLB.js";const s={},l={class:"rpl-callout"};function a(o,n){return t(),c("blockquote",l,[r(o.$slots,"default")])}const u=e(s,[["render",a]]);export{u as default};
+import{_ as e}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as t,c,E as r}from"./entry.Do8xnxHS.js";const s={},l={class:"rpl-callout"};function a(o,n){return t(),c("blockquote",l,[r(o.$slots,"default")])}const u=e(s,[["render",a]]);export{u as default};
diff --git a/_nuxt/ProseCode.ggTmuEB2.js b/_nuxt/ProseCode.Xz7xMLuq.js
similarity index 86%
rename from _nuxt/ProseCode.ggTmuEB2.js
rename to _nuxt/ProseCode.Xz7xMLuq.js
index cf806f0f9e..2fb2ff0d68 100644
--- a/_nuxt/ProseCode.ggTmuEB2.js
+++ b/_nuxt/ProseCode.Xz7xMLuq.js
@@ -1 +1 @@
-import{d as t,b as o,c as n,E as a}from"./entry.49ZHHvLB.js";import{_ as s}from"./_plugin-vue_export-helper.x3n3nnut.js";const r=t({props:{code:{type:String,default:""},language:{type:String,default:null},filename:{type:String,default:null},highlights:{type:Array,default:()=>[]}}}),c={class:"docs-code-block"};function d(e,l,p,_,f,i){return o(),n("div",c,[a(e.$slots,"default",{},void 0,!0)])}const g=s(r,[["render",d],["__scopeId","data-v-efa4b2dc"]]);export{g as default};
+import{d as t,b as o,c as n,E as a}from"./entry.Do8xnxHS.js";import{_ as s}from"./_plugin-vue_export-helper.x3n3nnut.js";const r=t({props:{code:{type:String,default:""},language:{type:String,default:null},filename:{type:String,default:null},highlights:{type:Array,default:()=>[]}}}),c={class:"docs-code-block"};function d(e,l,p,_,f,i){return o(),n("div",c,[a(e.$slots,"default",{},void 0,!0)])}const g=s(r,[["render",d],["__scopeId","data-v-efa4b2dc"]]);export{g as default};
diff --git a/_nuxt/ProseCodeInline.uDpSgjM7.js b/_nuxt/ProseCodeInline.iJ9KJvnk.js
similarity index 79%
rename from _nuxt/ProseCodeInline.uDpSgjM7.js
rename to _nuxt/ProseCodeInline.iJ9KJvnk.js
index a0bf6f0ba5..ed40dc7580 100644
--- a/_nuxt/ProseCodeInline.uDpSgjM7.js
+++ b/_nuxt/ProseCodeInline.iJ9KJvnk.js
@@ -1 +1 @@
-import{_ as o}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as c,c as s,E as n}from"./entry.49ZHHvLB.js";const t={},r={class:"docs-code-inline"};function a(e,d){return c(),s("code",r,[n(e.$slots,"default",{},void 0,!0)])}const f=o(t,[["render",a],["__scopeId","data-v-2e6046ca"]]);export{f as default};
+import{_ as o}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as c,c as s,E as n}from"./entry.Do8xnxHS.js";const t={},r={class:"docs-code-inline"};function a(e,d){return c(),s("code",r,[n(e.$slots,"default",{},void 0,!0)])}const f=o(t,[["render",a],["__scopeId","data-v-2e6046ca"]]);export{f as default};
diff --git a/_nuxt/ProseEm.D-92YCoe.js b/_nuxt/ProseEm.jWeQl8xp.js
similarity index 73%
rename from _nuxt/ProseEm.D-92YCoe.js
rename to _nuxt/ProseEm.jWeQl8xp.js
index a058dbd3ab..1b0d39c4d0 100644
--- a/_nuxt/ProseEm.D-92YCoe.js
+++ b/_nuxt/ProseEm.jWeQl8xp.js
@@ -1 +1 @@
-import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as o,c as t,E as s}from"./entry.49ZHHvLB.js";const c={};function n(e,a){return o(),t("em",null,[s(e.$slots,"default")])}const m=r(c,[["render",n]]);export{m as default};
+import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as o,c as t,E as s}from"./entry.Do8xnxHS.js";const c={};function n(e,a){return o(),t("em",null,[s(e.$slots,"default")])}const m=r(c,[["render",n]]);export{m as default};
diff --git a/_nuxt/ProseH1.qgSebaHX.js b/_nuxt/ProseH1.50NQSnzl.js
similarity index 85%
rename from _nuxt/ProseH1.qgSebaHX.js
rename to _nuxt/ProseH1.50NQSnzl.js
index b454a4d03f..37dd1f9ca7 100644
--- a/_nuxt/ProseH1.qgSebaHX.js
+++ b/_nuxt/ProseH1.50NQSnzl.js
@@ -1 +1 @@
-import{d as c,k as i,J as p,b as o,c as t,N as u,E as n}from"./entry.49ZHHvLB.js";const f=["id"],l=["href"],k=c({__name:"ProseH1",props:{id:{}},setup(r){const a=r,{headings:s}=i().public.mdc,d=p(()=>{var e;return a.id&&((e=s==null?void 0:s.anchorLinks)==null?void 0:e.h1)});return(e,m)=>(o(),t("h1",{id:e.id},[u(d)?(o(),t("a",{key:0,href:`#${e.id}`},[n(e.$slots,"default")],8,l)):n(e.$slots,"default",{key:1})],8,f))}});export{k as default};
+import{d as c,k as i,J as p,b as o,c as t,N as u,E as n}from"./entry.Do8xnxHS.js";const f=["id"],l=["href"],k=c({__name:"ProseH1",props:{id:{}},setup(r){const a=r,{headings:s}=i().public.mdc,d=p(()=>{var e;return a.id&&((e=s==null?void 0:s.anchorLinks)==null?void 0:e.h1)});return(e,m)=>(o(),t("h1",{id:e.id},[u(d)?(o(),t("a",{key:0,href:`#${e.id}`},[n(e.$slots,"default")],8,l)):n(e.$slots,"default",{key:1})],8,f))}});export{k as default};
diff --git a/_nuxt/ProseH2.ugZKdBSy.js b/_nuxt/ProseH2.G8mCS4ry.js
similarity index 90%
rename from _nuxt/ProseH2.ugZKdBSy.js
rename to _nuxt/ProseH2.G8mCS4ry.js
index 2b8a8750a6..68d7aad556 100644
--- a/_nuxt/ProseH2.ugZKdBSy.js
+++ b/_nuxt/ProseH2.G8mCS4ry.js
@@ -1 +1 @@
-import{d as p,k as n,J as i,b as t,c as a,N as f,E as d,p as h,i as u,e as l}from"./entry.49ZHHvLB.js";import{_}from"./_plugin-vue_export-helper.x3n3nnut.js";const m=s=>(h("data-v-fff5b905"),s=s(),u(),s),k=["id"],b=["href"],v=m(()=>l("span",{class:"docs-h2--hash"},"#",-1)),I=p({__name:"ProseH2",props:{id:{}},setup(s){const c=s,{headings:o}=n().public.mdc,r=i(()=>{var e;return c.id&&((e=o==null?void 0:o.anchorLinks)==null?void 0:e.h2)});return(e,S)=>(t(),a("h2",{class:"rpl-type-h2 docs-h2",id:e.id},[e.id&&f(r)?(t(),a("a",{key:0,href:`#${e.id}`},[v,d(e.$slots,"default",{},void 0,!0)],8,b)):d(e.$slots,"default",{key:1},void 0,!0)],8,k))}}),$=_(I,[["__scopeId","data-v-fff5b905"]]);export{$ as default};
+import{d as p,k as n,J as i,b as t,c as a,N as f,E as d,p as h,i as u,e as l}from"./entry.Do8xnxHS.js";import{_}from"./_plugin-vue_export-helper.x3n3nnut.js";const m=s=>(h("data-v-fff5b905"),s=s(),u(),s),k=["id"],b=["href"],v=m(()=>l("span",{class:"docs-h2--hash"},"#",-1)),I=p({__name:"ProseH2",props:{id:{}},setup(s){const c=s,{headings:o}=n().public.mdc,r=i(()=>{var e;return c.id&&((e=o==null?void 0:o.anchorLinks)==null?void 0:e.h2)});return(e,S)=>(t(),a("h2",{class:"rpl-type-h2 docs-h2",id:e.id},[e.id&&f(r)?(t(),a("a",{key:0,href:`#${e.id}`},[v,d(e.$slots,"default",{},void 0,!0)],8,b)):d(e.$slots,"default",{key:1},void 0,!0)],8,k))}}),$=_(I,[["__scopeId","data-v-fff5b905"]]);export{$ as default};
diff --git a/_nuxt/ProseH3.zV8FfIjw.js b/_nuxt/ProseH3.WHOIDSwD.js
similarity index 91%
rename from _nuxt/ProseH3.zV8FfIjw.js
rename to _nuxt/ProseH3.WHOIDSwD.js
index 91384b7260..d81e58a594 100644
--- a/_nuxt/ProseH3.zV8FfIjw.js
+++ b/_nuxt/ProseH3.WHOIDSwD.js
@@ -1 +1 @@
-import{d as p,k as n,J as i,b as t,c as a,N as h,E as d,p as u,i as l,e as _}from"./entry.49ZHHvLB.js";import{_ as f}from"./_plugin-vue_export-helper.x3n3nnut.js";const m=s=>(u("data-v-ea525968"),s=s(),l(),s),k=["id"],v=["href"],I=m(()=>_("span",{class:"docs-h3--hash"},"#",-1)),S=p({__name:"ProseH3",props:{id:{}},setup(s){const c=s,{headings:o}=n().public.mdc,r=i(()=>{var e;return c.id&&((e=o==null?void 0:o.anchorLinks)==null?void 0:e.h2)});return(e,y)=>(t(),a("h2",{class:"rpl-type-h3 docs-h3",id:e.id},[e.id&&h(r)?(t(),a("a",{key:0,href:`#${e.id}`},[I,d(e.$slots,"default",{},void 0,!0)],8,v)):d(e.$slots,"default",{key:1},void 0,!0)],8,k))}}),b=f(S,[["__scopeId","data-v-ea525968"]]);export{b as default};
+import{d as p,k as n,J as i,b as t,c as a,N as h,E as d,p as u,i as l,e as _}from"./entry.Do8xnxHS.js";import{_ as f}from"./_plugin-vue_export-helper.x3n3nnut.js";const m=s=>(u("data-v-ea525968"),s=s(),l(),s),k=["id"],v=["href"],I=m(()=>_("span",{class:"docs-h3--hash"},"#",-1)),S=p({__name:"ProseH3",props:{id:{}},setup(s){const c=s,{headings:o}=n().public.mdc,r=i(()=>{var e;return c.id&&((e=o==null?void 0:o.anchorLinks)==null?void 0:e.h2)});return(e,y)=>(t(),a("h2",{class:"rpl-type-h3 docs-h3",id:e.id},[e.id&&h(r)?(t(),a("a",{key:0,href:`#${e.id}`},[I,d(e.$slots,"default",{},void 0,!0)],8,v)):d(e.$slots,"default",{key:1},void 0,!0)],8,k))}}),b=f(S,[["__scopeId","data-v-ea525968"]]);export{b as default};
diff --git a/_nuxt/ProseH4.CwUV-MIb.js b/_nuxt/ProseH4.gK7ORMEc.js
similarity index 73%
rename from _nuxt/ProseH4.CwUV-MIb.js
rename to _nuxt/ProseH4.gK7ORMEc.js
index 7ef86bb5c4..09d70c3580 100644
--- a/_nuxt/ProseH4.CwUV-MIb.js
+++ b/_nuxt/ProseH4.gK7ORMEc.js
@@ -1 +1 @@
-import{d as s,b as o,c as t,E as r}from"./entry.49ZHHvLB.js";const a=["id"],c=s({__name:"ProseH4",props:{id:{}},setup(n){return(e,d)=>(o(),t("h4",{class:"rpl-type-h4 docs-h4",id:e.id},[r(e.$slots,"default")],8,a))}});export{c as default};
+import{d as s,b as o,c as t,E as r}from"./entry.Do8xnxHS.js";const a=["id"],c=s({__name:"ProseH4",props:{id:{}},setup(n){return(e,d)=>(o(),t("h4",{class:"rpl-type-h4 docs-h4",id:e.id},[r(e.$slots,"default")],8,a))}});export{c as default};
diff --git a/_nuxt/ProseH5.xN9FQiKa.js b/_nuxt/ProseH5.ViebVa2Y.js
similarity index 85%
rename from _nuxt/ProseH5.xN9FQiKa.js
rename to _nuxt/ProseH5.ViebVa2Y.js
index 7b1bdc5163..7383615e3c 100644
--- a/_nuxt/ProseH5.xN9FQiKa.js
+++ b/_nuxt/ProseH5.ViebVa2Y.js
@@ -1 +1 @@
-import{d as i,k as c,J as p,b as o,c as n,N as u,E as t}from"./entry.49ZHHvLB.js";const f=["id"],l=["href"],k=i({__name:"ProseH5",props:{id:{}},setup(r){const a=r,{headings:s}=c().public.mdc,d=p(()=>{var e;return a.id&&((e=s==null?void 0:s.anchorLinks)==null?void 0:e.h5)});return(e,m)=>(o(),n("h5",{id:e.id},[e.id&&u(d)?(o(),n("a",{key:0,href:`#${e.id}`},[t(e.$slots,"default")],8,l)):t(e.$slots,"default",{key:1})],8,f))}});export{k as default};
+import{d as i,k as c,J as p,b as o,c as n,N as u,E as t}from"./entry.Do8xnxHS.js";const f=["id"],l=["href"],k=i({__name:"ProseH5",props:{id:{}},setup(r){const a=r,{headings:s}=c().public.mdc,d=p(()=>{var e;return a.id&&((e=s==null?void 0:s.anchorLinks)==null?void 0:e.h5)});return(e,m)=>(o(),n("h5",{id:e.id},[e.id&&u(d)?(o(),n("a",{key:0,href:`#${e.id}`},[t(e.$slots,"default")],8,l)):t(e.$slots,"default",{key:1})],8,f))}});export{k as default};
diff --git a/_nuxt/ProseH6.XPfwxdAr.js b/_nuxt/ProseH6.lit-WfaG.js
similarity index 85%
rename from _nuxt/ProseH6.XPfwxdAr.js
rename to _nuxt/ProseH6.lit-WfaG.js
index f73c3b534b..3555f495df 100644
--- a/_nuxt/ProseH6.XPfwxdAr.js
+++ b/_nuxt/ProseH6.lit-WfaG.js
@@ -1 +1 @@
-import{d as i,k as c,J as p,b as o,c as n,N as u,E as t}from"./entry.49ZHHvLB.js";const f=["id"],l=["href"],k=i({__name:"ProseH6",props:{id:{}},setup(r){const a=r,{headings:s}=c().public.mdc,d=p(()=>{var e;return a.id&&((e=s==null?void 0:s.anchorLinks)==null?void 0:e.h6)});return(e,m)=>(o(),n("h6",{id:e.id},[e.id&&u(d)?(o(),n("a",{key:0,href:`#${e.id}`},[t(e.$slots,"default")],8,l)):t(e.$slots,"default",{key:1})],8,f))}});export{k as default};
+import{d as i,k as c,J as p,b as o,c as n,N as u,E as t}from"./entry.Do8xnxHS.js";const f=["id"],l=["href"],k=i({__name:"ProseH6",props:{id:{}},setup(r){const a=r,{headings:s}=c().public.mdc,d=p(()=>{var e;return a.id&&((e=s==null?void 0:s.anchorLinks)==null?void 0:e.h6)});return(e,m)=>(o(),n("h6",{id:e.id},[e.id&&u(d)?(o(),n("a",{key:0,href:`#${e.id}`},[t(e.$slots,"default")],8,l)):t(e.$slots,"default",{key:1})],8,f))}});export{k as default};
diff --git a/_nuxt/ProseHr.NdB0-p6G.js b/_nuxt/ProseHr.uASz6lXf.js
similarity index 75%
rename from _nuxt/ProseHr.NdB0-p6G.js
rename to _nuxt/ProseHr.uASz6lXf.js
index b922d4a97e..41190b2462 100644
--- a/_nuxt/ProseHr.NdB0-p6G.js
+++ b/_nuxt/ProseHr.uASz6lXf.js
@@ -1 +1 @@
-import{_ as c}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as e,c as o}from"./entry.49ZHHvLB.js";const r={},s={class:"docs-hr"};function t(_,a){return e(),o("hr",s)}const f=c(r,[["render",t],["__scopeId","data-v-341b6a73"]]);export{f as default};
+import{_ as c}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as e,c as o}from"./entry.Do8xnxHS.js";const r={},s={class:"docs-hr"};function t(_,a){return e(),o("hr",s)}const f=c(r,[["render",t],["__scopeId","data-v-341b6a73"]]);export{f as default};
diff --git a/_nuxt/ProseImg.wgVpK8mn.js b/_nuxt/ProseImg.Wu9xgcX7.js
similarity index 89%
rename from _nuxt/ProseImg.wgVpK8mn.js
rename to _nuxt/ProseImg.Wu9xgcX7.js
index db34dc9e49..2330be3cb8 100644
--- a/_nuxt/ProseImg.wgVpK8mn.js
+++ b/_nuxt/ProseImg.Wu9xgcX7.js
@@ -1 +1 @@
-import{d as r,J as n,aG as c,ao as h,k as o,aj as d,b as l,c as u,N as f}from"./entry.49ZHHvLB.js";const g=["src","alt","width","height"],p=r({__name:"ProseImg",props:{src:{type:String,default:""},alt:{type:String,default:""},width:{type:[String,Number],default:void 0},height:{type:[String,Number],default:void 0}},setup(e){const t=e,i=n(()=>{var a;if((a=t.src)!=null&&a.startsWith("/")&&!t.src.startsWith("//")){const s=c(h(o().app.baseURL));if(s!=="/"&&!t.src.startsWith(s))return d(s,t.src)}return t.src});return(a,s)=>(l(),u("img",{src:f(i),alt:e.alt,width:e.width,height:e.height},null,8,g))}});export{p as default};
+import{d as r,J as n,aG as c,ao as h,k as o,aj as d,b as l,c as u,N as f}from"./entry.Do8xnxHS.js";const g=["src","alt","width","height"],p=r({__name:"ProseImg",props:{src:{type:String,default:""},alt:{type:String,default:""},width:{type:[String,Number],default:void 0},height:{type:[String,Number],default:void 0}},setup(e){const t=e,i=n(()=>{var a;if((a=t.src)!=null&&a.startsWith("/")&&!t.src.startsWith("//")){const s=c(h(o().app.baseURL));if(s!=="/"&&!t.src.startsWith(s))return d(s,t.src)}return t.src});return(a,s)=>(l(),u("img",{src:f(i),alt:e.alt,width:e.width,height:e.height},null,8,g))}});export{p as default};
diff --git a/_nuxt/ProseLi.MnotWTMg.js b/_nuxt/ProseLi.kWofYoPt.js
similarity index 73%
rename from _nuxt/ProseLi.MnotWTMg.js
rename to _nuxt/ProseLi.kWofYoPt.js
index dfd5753d8f..a0cc32d946 100644
--- a/_nuxt/ProseLi.MnotWTMg.js
+++ b/_nuxt/ProseLi.kWofYoPt.js
@@ -1 +1 @@
-import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as o,c as t,E as s}from"./entry.49ZHHvLB.js";const c={};function n(e,a){return o(),t("li",null,[s(e.$slots,"default")])}const _=r(c,[["render",n]]);export{_ as default};
+import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as o,c as t,E as s}from"./entry.Do8xnxHS.js";const c={};function n(e,a){return o(),t("li",null,[s(e.$slots,"default")])}const _=r(c,[["render",n]]);export{_ as default};
diff --git a/_nuxt/ProseOl.jzxVYZcz.js b/_nuxt/ProseOl.f55gcGCc.js
similarity index 73%
rename from _nuxt/ProseOl.jzxVYZcz.js
rename to _nuxt/ProseOl.f55gcGCc.js
index 83596807a0..30b7fa2d74 100644
--- a/_nuxt/ProseOl.jzxVYZcz.js
+++ b/_nuxt/ProseOl.f55gcGCc.js
@@ -1 +1 @@
-import{_ as o}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as r,c as t,E as s}from"./entry.49ZHHvLB.js";const c={};function n(e,l){return r(),t("ol",null,[s(e.$slots,"default")])}const _=o(c,[["render",n]]);export{_ as default};
+import{_ as o}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as r,c as t,E as s}from"./entry.Do8xnxHS.js";const c={};function n(e,l){return r(),t("ol",null,[s(e.$slots,"default")])}const _=o(c,[["render",n]]);export{_ as default};
diff --git a/_nuxt/ProseP.cG_oeGiJ.js b/_nuxt/ProseP.xOmAEUok.js
similarity index 73%
rename from _nuxt/ProseP.cG_oeGiJ.js
rename to _nuxt/ProseP.xOmAEUok.js
index 6a9edb21c8..99f6e34bff 100644
--- a/_nuxt/ProseP.cG_oeGiJ.js
+++ b/_nuxt/ProseP.xOmAEUok.js
@@ -1 +1 @@
-import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as o,c as t,E as s}from"./entry.49ZHHvLB.js";const c={};function n(e,a){return o(),t("p",null,[s(e.$slots,"default")])}const _=r(c,[["render",n]]);export{_ as default};
+import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as o,c as t,E as s}from"./entry.Do8xnxHS.js";const c={};function n(e,a){return o(),t("p",null,[s(e.$slots,"default")])}const _=r(c,[["render",n]]);export{_ as default};
diff --git a/_nuxt/ProsePre.1p0bzX0t.js b/_nuxt/ProsePre.928ctTB_.js
similarity index 83%
rename from _nuxt/ProsePre.1p0bzX0t.js
rename to _nuxt/ProsePre.928ctTB_.js
index 3d7e3fc2c1..b5ef92a7cb 100644
--- a/_nuxt/ProsePre.1p0bzX0t.js
+++ b/_nuxt/ProsePre.928ctTB_.js
@@ -1 +1 @@
-import l from"./ProseCode.ggTmuEB2.js";import{d as n,b as s,G as i,w as o,n as r,a0 as u,E as g,e as m}from"./entry.49ZHHvLB.js";import"./_plugin-vue_export-helper.x3n3nnut.js";const y=n({__name:"ProsePre",props:{code:{type:String,default:""},language:{type:String,default:null},filename:{type:String,default:null},highlights:{type:Array,default:()=>[]},meta:{type:String,default:null},class:{type:String,default:null},style:{type:[String,Object],default:null}},setup(e){return(t,d)=>{const a=l;return s(),i(a,{code:e.code,language:e.language,filename:e.filename,highlights:e.highlights,meta:e.meta},{default:o(()=>[m("pre",{class:r(t.$props.class),style:u(e.style)},[g(t.$slots,"default")],6)]),_:3},8,["code","language","filename","highlights","meta"])}}});export{y as default};
+import l from"./ProseCode.Xz7xMLuq.js";import{d as n,b as s,G as i,w as o,n as r,a0 as u,E as g,e as m}from"./entry.Do8xnxHS.js";import"./_plugin-vue_export-helper.x3n3nnut.js";const y=n({__name:"ProsePre",props:{code:{type:String,default:""},language:{type:String,default:null},filename:{type:String,default:null},highlights:{type:Array,default:()=>[]},meta:{type:String,default:null},class:{type:String,default:null},style:{type:[String,Object],default:null}},setup(e){return(t,d)=>{const a=l;return s(),i(a,{code:e.code,language:e.language,filename:e.filename,highlights:e.highlights,meta:e.meta},{default:o(()=>[m("pre",{class:r(t.$props.class),style:u(e.style)},[g(t.$slots,"default")],6)]),_:3},8,["code","language","filename","highlights","meta"])}}});export{y as default};
diff --git a/_nuxt/ProseScript.FDrZUZC2.js b/_nuxt/ProseScript.YD2iA94j.js
similarity index 86%
rename from _nuxt/ProseScript.FDrZUZC2.js
rename to _nuxt/ProseScript.YD2iA94j.js
index bf08398a75..1fdebd602f 100644
--- a/_nuxt/ProseScript.FDrZUZC2.js
+++ b/_nuxt/ProseScript.YD2iA94j.js
@@ -1 +1 @@
-import{d as s,J as n,b as r,c as a,D as e,f as c,e as t}from"./entry.49ZHHvLB.js";const d={key:0},i=t("code",null,"script",-1),l=t("code",null,"ProseScript",-1),f=s({__name:"ProseScript",props:{src:{type:String,default:""}},setup(p){const o=n(()=>!1);return(_,m)=>o.value?(r(),a("div",d,[e(" Rendering the "),i,e(" element is dangerous and is disabled by default. Consider implementing your own "),l,e(" element to have control over script rendering. ")])):c("",!0)}});export{f as default};
+import{d as s,J as n,b as r,c as a,D as e,f as c,e as t}from"./entry.Do8xnxHS.js";const d={key:0},i=t("code",null,"script",-1),l=t("code",null,"ProseScript",-1),f=s({__name:"ProseScript",props:{src:{type:String,default:""}},setup(p){const o=n(()=>!1);return(_,m)=>o.value?(r(),a("div",d,[e(" Rendering the "),i,e(" element is dangerous and is disabled by default. Consider implementing your own "),l,e(" element to have control over script rendering. ")])):c("",!0)}});export{f as default};
diff --git a/_nuxt/ProseStrong.F9NVvvm4.js b/_nuxt/ProseStrong.GmB4B_NE.js
similarity index 73%
rename from _nuxt/ProseStrong.F9NVvvm4.js
rename to _nuxt/ProseStrong.GmB4B_NE.js
index 61e05ae8ec..96e4aeb776 100644
--- a/_nuxt/ProseStrong.F9NVvvm4.js
+++ b/_nuxt/ProseStrong.GmB4B_NE.js
@@ -1 +1 @@
-import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as o,c as t,E as n}from"./entry.49ZHHvLB.js";const s={};function c(e,a){return o(),t("strong",null,[n(e.$slots,"default")])}const _=r(s,[["render",c]]);export{_ as default};
+import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as o,c as t,E as n}from"./entry.Do8xnxHS.js";const s={};function c(e,a){return o(),t("strong",null,[n(e.$slots,"default")])}const _=r(s,[["render",c]]);export{_ as default};
diff --git a/_nuxt/ProseTable.Nr-94ppo.js b/_nuxt/ProseTable.d8cdIzif.js
similarity index 83%
rename from _nuxt/ProseTable.Nr-94ppo.js
rename to _nuxt/ProseTable.d8cdIzif.js
index f71b1a5cee..d8e10ed534 100644
--- a/_nuxt/ProseTable.Nr-94ppo.js
+++ b/_nuxt/ProseTable.d8cdIzif.js
@@ -1 +1 @@
-import{_ as t}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as o,c as a,e,E as c}from"./entry.49ZHHvLB.js";const r={},l={class:"rpl-table"},n={class:"rpl-table__scroll-container"},_={class:"docs-table"};function d(s,f){return o(),a("div",l,[e("div",n,[e("table",_,[c(s.$slots,"default",{},void 0,!0)])])])}const b=t(r,[["render",d],["__scopeId","data-v-a29f0e4f"]]);export{b as default};
+import{_ as t}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as o,c as a,e,E as c}from"./entry.Do8xnxHS.js";const r={},l={class:"rpl-table"},n={class:"rpl-table__scroll-container"},_={class:"docs-table"};function d(s,f){return o(),a("div",l,[e("div",n,[e("table",_,[c(s.$slots,"default",{},void 0,!0)])])])}const b=t(r,[["render",d],["__scopeId","data-v-a29f0e4f"]]);export{b as default};
diff --git a/_nuxt/ProseTbody.pO4HZmMb.js b/_nuxt/ProseTbody.FPzd5AuU.js
similarity index 73%
rename from _nuxt/ProseTbody.pO4HZmMb.js
rename to _nuxt/ProseTbody.FPzd5AuU.js
index 68da65cf5f..586c143589 100644
--- a/_nuxt/ProseTbody.pO4HZmMb.js
+++ b/_nuxt/ProseTbody.FPzd5AuU.js
@@ -1 +1 @@
-import{_ as o}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as r,c as t,E as s}from"./entry.49ZHHvLB.js";const c={};function n(e,a){return r(),t("tbody",null,[s(e.$slots,"default")])}const _=o(c,[["render",n]]);export{_ as default};
+import{_ as o}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as r,c as t,E as s}from"./entry.Do8xnxHS.js";const c={};function n(e,a){return r(),t("tbody",null,[s(e.$slots,"default")])}const _=o(c,[["render",n]]);export{_ as default};
diff --git a/_nuxt/ProseTd.KWvY0UVz.js b/_nuxt/ProseTd.ydAecYY-.js
similarity index 73%
rename from _nuxt/ProseTd.KWvY0UVz.js
rename to _nuxt/ProseTd.ydAecYY-.js
index 46f285bb80..792ad9aa4e 100644
--- a/_nuxt/ProseTd.KWvY0UVz.js
+++ b/_nuxt/ProseTd.ydAecYY-.js
@@ -1 +1 @@
-import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as o,c as t,E as s}from"./entry.49ZHHvLB.js";const c={};function n(e,a){return o(),t("td",null,[s(e.$slots,"default")])}const _=r(c,[["render",n]]);export{_ as default};
+import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as o,c as t,E as s}from"./entry.Do8xnxHS.js";const c={};function n(e,a){return o(),t("td",null,[s(e.$slots,"default")])}const _=r(c,[["render",n]]);export{_ as default};
diff --git a/_nuxt/ProseTh.15m2hyNr.js b/_nuxt/ProseTh.GnFrmIgb.js
similarity index 73%
rename from _nuxt/ProseTh.15m2hyNr.js
rename to _nuxt/ProseTh.GnFrmIgb.js
index 9691f0ef26..380732e2b7 100644
--- a/_nuxt/ProseTh.15m2hyNr.js
+++ b/_nuxt/ProseTh.GnFrmIgb.js
@@ -1 +1 @@
-import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as o,c as t,E as s}from"./entry.49ZHHvLB.js";const c={};function n(e,a){return o(),t("th",null,[s(e.$slots,"default")])}const _=r(c,[["render",n]]);export{_ as default};
+import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as o,c as t,E as s}from"./entry.Do8xnxHS.js";const c={};function n(e,a){return o(),t("th",null,[s(e.$slots,"default")])}const _=r(c,[["render",n]]);export{_ as default};
diff --git a/_nuxt/ProseThead.x0xD32yi.js b/_nuxt/ProseThead.alimbSyj.js
similarity index 73%
rename from _nuxt/ProseThead.x0xD32yi.js
rename to _nuxt/ProseThead.alimbSyj.js
index 60730a69c7..6c56d80dca 100644
--- a/_nuxt/ProseThead.x0xD32yi.js
+++ b/_nuxt/ProseThead.alimbSyj.js
@@ -1 +1 @@
-import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as o,c as t,E as s}from"./entry.49ZHHvLB.js";const a={};function c(e,n){return o(),t("thead",null,[s(e.$slots,"default")])}const _=r(a,[["render",c]]);export{_ as default};
+import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as o,c as t,E as s}from"./entry.Do8xnxHS.js";const a={};function c(e,n){return o(),t("thead",null,[s(e.$slots,"default")])}const _=r(a,[["render",c]]);export{_ as default};
diff --git a/_nuxt/ProseTr.NjbdsN4h.js b/_nuxt/ProseTr.rCUlpnCA.js
similarity index 73%
rename from _nuxt/ProseTr.NjbdsN4h.js
rename to _nuxt/ProseTr.rCUlpnCA.js
index cefc589cf4..f456c1ac5f 100644
--- a/_nuxt/ProseTr.NjbdsN4h.js
+++ b/_nuxt/ProseTr.rCUlpnCA.js
@@ -1 +1 @@
-import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as o,c as t,E as s}from"./entry.49ZHHvLB.js";const c={};function n(e,a){return o(),t("tr",null,[s(e.$slots,"default")])}const _=r(c,[["render",n]]);export{_ as default};
+import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as o,c as t,E as s}from"./entry.Do8xnxHS.js";const c={};function n(e,a){return o(),t("tr",null,[s(e.$slots,"default")])}const _=r(c,[["render",n]]);export{_ as default};
diff --git a/_nuxt/ProseUl.GyfBzrRs.js b/_nuxt/ProseUl.ajqmVD2y.js
similarity index 73%
rename from _nuxt/ProseUl.GyfBzrRs.js
rename to _nuxt/ProseUl.ajqmVD2y.js
index 24be3863ba..0ee78555bc 100644
--- a/_nuxt/ProseUl.GyfBzrRs.js
+++ b/_nuxt/ProseUl.ajqmVD2y.js
@@ -1 +1 @@
-import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as o,c as t,E as s}from"./entry.49ZHHvLB.js";const c={};function n(e,l){return o(),t("ul",null,[s(e.$slots,"default")])}const _=r(c,[["render",n]]);export{_ as default};
+import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";import{b as o,c as t,E as s}from"./entry.Do8xnxHS.js";const c={};function n(e,l){return o(),t("ul",null,[s(e.$slots,"default")])}const _=r(c,[["render",n]]);export{_ as default};
diff --git a/_nuxt/RplButton.css.kobVpNhn.js b/_nuxt/RplButton.css.bGBZW0Bs.js
similarity index 92%
rename from _nuxt/RplButton.css.kobVpNhn.js
rename to _nuxt/RplButton.css.bGBZW0Bs.js
index 0c9a766ce4..a16d6886fa 100644
--- a/_nuxt/RplButton.css.kobVpNhn.js
+++ b/_nuxt/RplButton.css.bGBZW0Bs.js
@@ -1,4 +1,4 @@
-import{_ as d}from"./RplIcon.vue.NIDikUS0.js";import{d as f,b as s,G as u,w as b,e as t,H as y,J as o,r as v,g as C,c as i,f as r,F as z,t as g,D as k,E as w,n as B,a2 as M}from"./entry.49ZHHvLB.js";const N=t("svg",{viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[t("path",{d:"M12,0c-0.7,0-1.2,0.5-1.2,1.2v6c0,0.7,0.5,1.2,1.2,1.2s1.2-0.5,1.2-1.2v-6C13.2,0.5,12.7,0,12,0z"}),t("path",{d:`M16.2,9.5l4.2-4.2C21,4.7,21,4,20.5,3.5C20,3,19.3,3,18.8,3.5l-4.2,4.2c-0.5,0.5-0.5,1.2,0,1.7
+import{_ as d}from"./RplIcon.vue.PZ-X7Qhh.js";import{d as f,b as s,G as u,w as b,e as t,H as y,J as o,r as v,g as C,c as i,f as r,F as z,t as g,D as k,E as w,n as B,a2 as M}from"./entry.Do8xnxHS.js";const N=t("svg",{viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[t("path",{d:"M12,0c-0.7,0-1.2,0.5-1.2,1.2v6c0,0.7,0.5,1.2,1.2,1.2s1.2-0.5,1.2-1.2v-6C13.2,0.5,12.7,0,12,0z"}),t("path",{d:`M16.2,9.5l4.2-4.2C21,4.7,21,4,20.5,3.5C20,3,19.3,3,18.8,3.5l-4.2,4.2c-0.5,0.5-0.5,1.2,0,1.7
   C15,9.9,15.8,9.9,16.2,9.5z`}),t("path",{d:"M22.8,10.8h-6c-0.7,0-1.2,0.5-1.2,1.2s0.5,1.2,1.2,1.2h6c0.7,0,1.2-0.5,1.2-1.2S23.5,10.8,22.8,10.8z"}),t("path",{d:`M16.2,14.5c-0.5-0.5-1.2-0.5-1.7,0c-0.5,0.5-0.5,1.2,0,1.7l4.2,4.2c0.5,0.5,1.2,0.5,1.7,0
   c0.5-0.5,0.5-1.2,0-1.7L16.2,14.5z`}),t("path",{d:"M12,15.6c-0.7,0-1.2,0.5-1.2,1.2v6c0,0.7,0.5,1.2,1.2,1.2s1.2-0.5,1.2-1.2v-6C13.2,16.1,12.7,15.6,12,15.6z"}),t("path",{d:`M7.8,14.5l-4.2,4.2C3,19.3,3,20,3.5,20.5C4,21,4.7,21,5.2,20.5l4.2-4.2c0.5-0.5,0.5-1.2,0-1.7
   C9,14.1,8.2,14.1,7.8,14.5z`}),t("path",{d:"M8.4,12c0-0.7-0.5-1.2-1.2-1.2h-6C0.5,10.8,0,11.3,0,12s0.5,1.2,1.2,1.2h6C7.9,13.2,8.4,12.7,8.4,12z"}),t("path",{d:"M5.2,3.5C4.7,3,4,3,3.5,3.5S3,4.7,3.5,5.2l4.2,4.2c0.5,0.5,1.2,0.5,1.7,0s0.5-1.2,0-1.7L5.2,3.5z"})],-1),$=f({__name:"RplSpinner",props:{size:{default:"m"}},setup(p){return(n,l)=>(s(),u(d,{size:n.size,class:"rpl-spinner"},{default:b(()=>[N]),_:1},8,["size"]))}}),S={key:0,class:"rpl-button__spinner"},T={class:"rpl-button__label rpl-type-label rpl-type-weight-bold"},P=f({__name:"RplButton",props:{el:{default:"button"},url:{default:""},variant:{default:"filled"},theme:{default:void 0},iconName:{default:void 0},iconPosition:{default:"right"},label:{default:void 0},disabled:{type:Boolean,default:!1},busy:{type:Boolean,default:!1}},setup(p,{expose:n}){const l=y("featureFlags",{buttonTheme:"default"}),a=p,h=o(()=>a.theme?a.theme:l&&l.hasOwnProperty("buttonTheme")?l.buttonTheme:"default"),m=o(()=>({"rpl-button":!0,[`rpl-button--${a.variant}`]:!0,[`rpl-button--${h.value}`]:!0,"rpl-u-focusable-block":!0,"rpl-button--reverse":a.iconPosition==="left","rpl-button--busy":a.busy})),c=v(null);n({link:c});const _=o(()=>a.el==="a");return(e,F)=>(s(),u(M(e.el),{ref_key:"link",ref:c,href:_.value?e.url:null,type:"button",class:B(m.value),disabled:e.disabled,"aria-busy":e.busy},{default:b(()=>[e.busy?(s(),i("span",S,[C($)])):r("",!0),t("span",T,[e.label?(s(),i(z,{key:0},[k(g(e.label),1)],64)):r("",!0),w(e.$slots,"default")]),e.iconName?(s(),u(d,{key:1,name:e.iconName,class:"rpl-button__icon"},null,8,["name"])):r("",!0)]),_:3},8,["href","class","disabled","aria-busy"]))}});export{P as _};
diff --git a/_nuxt/RplContent.css.cfrovusU.js b/_nuxt/RplContent.css.7ezTJ87f.js
similarity index 79%
rename from _nuxt/RplContent.css.cfrovusU.js
rename to _nuxt/RplContent.css.7ezTJ87f.js
index 1a626dc8fc..23ff7d2485 100644
--- a/_nuxt/RplContent.css.cfrovusU.js
+++ b/_nuxt/RplContent.css.7ezTJ87f.js
@@ -1 +1 @@
-import{d as o,b as n,c as t,E as s}from"./entry.49ZHHvLB.js";const l=["innerHTML"],r={key:1,class:"rpl-content"},_=o({__name:"RplContent",props:{html:{}},setup(a){return(e,c)=>e.html?(n(),t("div",{key:0,class:"rpl-content",innerHTML:e.html},null,8,l)):(n(),t("div",r,[s(e.$slots,"default")]))}});export{_};
+import{d as o,b as n,c as t,E as s}from"./entry.Do8xnxHS.js";const l=["innerHTML"],r={key:1,class:"rpl-content"},_=o({__name:"RplContent",props:{html:{}},setup(a){return(e,c)=>e.html?(n(),t("div",{key:0,class:"rpl-content",innerHTML:e.html},null,8,l)):(n(),t("div",r,[s(e.$slots,"default")]))}});export{_};
diff --git a/_nuxt/RplExpandable.vue.3-aUufTF.js b/_nuxt/RplExpandable.vue.ErcNtea4.js
similarity index 94%
rename from _nuxt/RplExpandable.vue.3-aUufTF.js
rename to _nuxt/RplExpandable.vue.ErcNtea4.js
index cc2322d073..8b3c224d67 100644
--- a/_nuxt/RplExpandable.vue.3-aUufTF.js
+++ b/_nuxt/RplExpandable.vue.ErcNtea4.js
@@ -1 +1 @@
-import{r,o as i,d as x,J as v,b as g,G as m,w as y,n as B,E as _,e as w,aB as C,$ as E,T as b}from"./entry.49ZHHvLB.js";function R(s,n,a=null){const t=r(a);return i(()=>{t.value=parseFloat(getComputedStyle(s.value).getPropertyValue(n))*1e3}),t}const T=x({__name:"RplExpandable",props:{expanded:{type:Boolean,default:!1}},setup(s){const n=s,a=r(null),t=r(!1),l=R(a,"--rpl-motion-speed-9",420);function p(e){e.style.height="0px"}function u(e,o){e.style.height=`${e.scrollHeight}px`,setTimeout(o,l.value)}function d(e){e.style.height="auto",e.style.overflow="initial"}function c(e){e.style.height=`${e.getBoundingClientRect().height}px`,e.style.overflow="hidden"}function f(e,o){e.style.height="0px",setTimeout(o,l.value)}const h=v(()=>({"rpl-expandable":!0,"rpl-expandable--open":n.expanded,"rpl-expandable--start-expanded":t.value}));return i(()=>{n.expanded&&(t.value=!0)}),(e,o)=>(g(),m(b,{onBeforeEnter:p,onEnter:u,onAfterEnter:d,onBeforeLeave:c,onLeave:f},{default:y(()=>[E(w("div",{ref_key:"containerRef",ref:a,class:B(h.value),role:"region"},[_(e.$slots,"default")],2),[[C,e.expanded]])]),_:3}))}});export{T as _};
+import{r,o as i,d as x,J as v,b as g,G as m,w as y,n as B,E as _,e as w,aB as C,$ as E,T as b}from"./entry.Do8xnxHS.js";function R(s,n,a=null){const t=r(a);return i(()=>{t.value=parseFloat(getComputedStyle(s.value).getPropertyValue(n))*1e3}),t}const T=x({__name:"RplExpandable",props:{expanded:{type:Boolean,default:!1}},setup(s){const n=s,a=r(null),t=r(!1),l=R(a,"--rpl-motion-speed-9",420);function p(e){e.style.height="0px"}function u(e,o){e.style.height=`${e.scrollHeight}px`,setTimeout(o,l.value)}function d(e){e.style.height="auto",e.style.overflow="initial"}function c(e){e.style.height=`${e.getBoundingClientRect().height}px`,e.style.overflow="hidden"}function f(e,o){e.style.height="0px",setTimeout(o,l.value)}const h=v(()=>({"rpl-expandable":!0,"rpl-expandable--open":n.expanded,"rpl-expandable--start-expanded":t.value}));return i(()=>{n.expanded&&(t.value=!0)}),(e,o)=>(g(),m(b,{onBeforeEnter:p,onEnter:u,onAfterEnter:d,onBeforeLeave:c,onLeave:f},{default:y(()=>[E(w("div",{ref_key:"containerRef",ref:a,class:B(h.value),role:"region"},[_(e.$slots,"default")],2),[[C,e.expanded]])]),_:3}))}});export{T as _};
diff --git a/_nuxt/RplIcon.vue.NIDikUS0.js b/_nuxt/RplIcon.vue.NIDikUS0.js
deleted file mode 100644
index 59e9011864..0000000000
--- a/_nuxt/RplIcon.vue.NIDikUS0.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import{_ as o,d,r as E,H as s,J as n,ax as v,b as t,c as e,G as I,a2 as R,t as D,f as V,e as A,E as O,n as P}from"./entry.49ZHHvLB.js";const L=["icon-cancel","icon-check-circle-filled","icon-chevron-down","icon-chevron-left","icon-chevron-right","icon-chevron-up","icon-current-location","icon-document-lined","icon-document","icon-download","icon-enlarge-square-filled","icon-enlarge","icon-exclamation-circle-filled","icon-facebook","icon-home","icon-information-circle-filled","icon-link-external-square-filled","icon-linkedin","icon-mail","icon-phone","icon-pin","icon-twitter","icon-view","icon-whatsapp","icon-x"],l={"icon-accessible":()=>o(()=>import("./icon-accessible.IgfNK4Jg.js"),__vite__mapDeps([0,1,2]),import.meta.url),"icon-add":()=>o(()=>import("./icon-add.kzXPKrGl.js"),__vite__mapDeps([3,1,2]),import.meta.url),"icon-arrow-down":()=>o(()=>import("./icon-arrow-down.2v2hp4Xt.js"),__vite__mapDeps([4,1,2]),import.meta.url),"icon-arrow-left":()=>o(()=>import("./icon-arrow-left.0NIGiU1P.js"),__vite__mapDeps([5,1,2]),import.meta.url),"icon-arrow-right":()=>o(()=>import("./icon-arrow-right.G4JTPGc2.js"),__vite__mapDeps([6,1,2]),import.meta.url),"icon-arrow-up":()=>o(()=>import("./icon-arrow-up.PSS8jaD7.js"),__vite__mapDeps([7,1,2]),import.meta.url),"icon-attach":()=>o(()=>import("./icon-attach.Fwk4Uxw0.js"),__vite__mapDeps([8,1,2]),import.meta.url),"icon-browser":()=>o(()=>import("./icon-browser.UxDB2PIC.js"),__vite__mapDeps([9,1,2]),import.meta.url),"icon-calendar-lined":()=>o(()=>import("./icon-calendar-lined.uqOA-YSW.js"),__vite__mapDeps([10,1,2]),import.meta.url),"icon-cancel-circle-filled":()=>o(()=>import("./icon-cancel-circle-filled.-GlE6Jtl.js"),__vite__mapDeps([11,1,2]),import.meta.url),"icon-car":()=>o(()=>import("./icon-car.u_vczvd4.js"),__vite__mapDeps([12,1,2]),import.meta.url),"icon-check":()=>o(()=>import("./icon-check.2p4Xc53D.js"),__vite__mapDeps([13,1,2]),import.meta.url),"icon-child-lined":()=>o(()=>import("./icon-child-lined.CxoBoObp.js"),__vite__mapDeps([14,1,2]),import.meta.url),"icon-dollar-circle-filled":()=>o(()=>import("./icon-dollar-circle-filled.pXobvUhs.js"),__vite__mapDeps([15,1,2]),import.meta.url),"icon-fire":()=>o(()=>import("./icon-fire.6Q6oR_Fn.js"),__vite__mapDeps([16,1,2]),import.meta.url),"icon-flood":()=>o(()=>import("./icon-flood.0HEgTeD9.js"),__vite__mapDeps([17,1,2]),import.meta.url),"icon-free":()=>o(()=>import("./icon-free.OVf1QOdo.js"),__vite__mapDeps([18,1,2]),import.meta.url),"icon-instagram":()=>o(()=>import("./icon-instagram.NFdPBf9w.js"),__vite__mapDeps([19,1,2]),import.meta.url),"icon-lightning":()=>o(()=>import("./icon-lightning.lldfgtzu.js"),__vite__mapDeps([20,1,2]),import.meta.url),"icon-link":()=>o(()=>import("./icon-link.JWvdqMbJ.js"),__vite__mapDeps([21,1,2]),import.meta.url),"icon-list":()=>o(()=>import("./icon-list.ypbt8G6o.js"),__vite__mapDeps([22,1,2]),import.meta.url),"icon-loading":()=>o(()=>import("./icon-loading.RshIDrCh.js"),__vite__mapDeps([23,1,2]),import.meta.url),"icon-log-in-lined":()=>o(()=>import("./icon-log-in-lined.suOMu9M0.js"),__vite__mapDeps([24,1,2]),import.meta.url),"icon-mail-lined":()=>o(()=>import("./icon-mail-lined.Ip5JdcEl.js"),__vite__mapDeps([25,1,2]),import.meta.url),"icon-medical":()=>o(()=>import("./icon-medical.QtoyQ8xF.js"),__vite__mapDeps([26,1,2]),import.meta.url),"icon-menu":()=>o(()=>import("./icon-menu.cXqcWbsn.js"),__vite__mapDeps([27,1,2]),import.meta.url),"icon-microphone":()=>o(()=>import("./icon-microphone._cRYpUs_.js"),__vite__mapDeps([28,1,2]),import.meta.url),"icon-pause-circle-lined":()=>o(()=>import("./icon-pause-circle-lined.gG4gButR.js"),__vite__mapDeps([29,1,2]),import.meta.url),"icon-person":()=>o(()=>import("./icon-person.GUGJMKmj.js"),__vite__mapDeps([30,1,2]),import.meta.url),"icon-play-circle-lined":()=>o(()=>import("./icon-play-circle-lined.cJRQaA2O.js"),__vite__mapDeps([31,1,2]),import.meta.url),"icon-print-lined":()=>o(()=>import("./icon-print-lined.W6h-olC3.js"),__vite__mapDeps([32,1,2]),import.meta.url),"icon-question-circle-lined":()=>o(()=>import("./icon-question-circle-lined.fDPrhu5z.js"),__vite__mapDeps([33,1,2]),import.meta.url),"icon-search":()=>o(()=>import("./icon-search.GqYFHFIf.js"),__vite__mapDeps([34,1,2]),import.meta.url),"icon-senior":()=>o(()=>import("./icon-senior.neBCSItu.js"),__vite__mapDeps([35,1,2]),import.meta.url),"icon-share":()=>o(()=>import("./icon-share.yAJ7fkkO.js"),__vite__mapDeps([36,1,2]),import.meta.url),"icon-smoke":()=>o(()=>import("./icon-smoke.iFg4JVG9.js"),__vite__mapDeps([37,1,2]),import.meta.url),"icon-spotify":()=>o(()=>import("./icon-spotify.mOg-s27z.js"),__vite__mapDeps([38,1,2]),import.meta.url),"icon-star":()=>o(()=>import("./icon-star.5-Hz87KX.js"),__vite__mapDeps([39,1,2]),import.meta.url),"icon-stop-circle-lined":()=>o(()=>import("./icon-stop-circle-lined.3l3IR3Om.js"),__vite__mapDeps([40,1,2]),import.meta.url),"icon-table-lined":()=>o(()=>import("./icon-table-lined.i31Cdm75.js"),__vite__mapDeps([41,1,2]),import.meta.url),"icon-temperature":()=>o(()=>import("./icon-temperature.CD6gMo8Q.js"),__vite__mapDeps([42,1,2]),import.meta.url),"icon-traffic":()=>o(()=>import("./icon-traffic.0NDlUvBB.js"),__vite__mapDeps([43,1,2]),import.meta.url),"icon-trash-lined":()=>o(()=>import("./icon-trash-lined.lcKiB1PC.js"),__vite__mapDeps([44,1,2]),import.meta.url),"icon-upload":()=>o(()=>import("./icon-upload.Z4PaOLf-.js"),__vite__mapDeps([45,1,2]),import.meta.url),"icon-user-circle-filled":()=>o(()=>import("./icon-user-circle-filled.Cmq3FUmD.js"),__vite__mapDeps([46,1,2]),import.meta.url),"icon-video":()=>o(()=>import("./icon-video.kiPGaQ6i.js"),__vite__mapDeps([47,1,2]),import.meta.url),"icon-wechat":()=>o(()=>import("./icon-wechat.C9k7L3B4.js"),__vite__mapDeps([48,1,2]),import.meta.url),"icon-youtube":()=>o(()=>import("./icon-youtube.ogRB3-Fq.js"),__vite__mapDeps([49,1,2]),import.meta.url),"icon-zoom-in":()=>o(()=>import("./icon-zoom-in.6p_hWNaT.js"),__vite__mapDeps([50,1,2]),import.meta.url),"icon-zoom-out":()=>o(()=>import("./icon-zoom-out.AmH-vH4L.js"),__vite__mapDeps([51,1,2]),import.meta.url),"icon-map-zoom-in":()=>o(()=>import("./icon-map-zoom-in.RoeBztCA.js"),__vite__mapDeps([52,1,2]),import.meta.url),"icon-map-zoom-out":()=>o(()=>import("./icon-map-zoom-out.V8461QeS.js"),__vite__mapDeps([53,1,2]),import.meta.url),"icon-enlarge":()=>o(()=>import("./icon-enlarge.1Br3L23I.js"),__vite__mapDeps([54,1,2]),import.meta.url),"icon-home":()=>o(()=>import("./icon-home.QZ-FrcoD.js"),__vite__mapDeps([55,1,2]),import.meta.url)},c=L,T=Object.keys(l);[...c,...T];const f=["role"],h={key:0},k=["xlink:href"],g=d({__name:"RplIcon",props:{name:{default:void 0},colour:{default:void 0},size:{default:"s"},padded:{type:Boolean,default:!1},title:{default:void 0}},setup(a){const r=a,_=E(c.find(i=>i===r.name)),p=s("rplIcons",{}),m=n(()=>{if(!_.value)try{return v({...l,...p}[r.name])}catch{return console.error(`RplIcon error: Couldn't dynamically import icon with name "${r.name}"`),!1}return!1}),u=n(()=>["rpl-icon",`rpl-icon--size-${r.size}`,r.name?`rpl-icon--${r.name}`:null,r.colour?`rpl-icon--colour-${r.colour}`:null,r.padded?"rpl-icon--padded":null]);return(i,y)=>(t(),e("span",{class:P(u.value)},[i.name&&!_.value&&m.value?(t(),I(R(m.value),{key:0})):i.name?(t(),e("svg",{key:1,role:i.title?void 0:"presentation"},[i.title?(t(),e("title",h,D(i.title),1)):V("",!0),A("use",{"xlink:href":`#${i.name}`},null,8,k)],8,f)):O(i.$slots,"default",{key:2})],2))}});export{g as _};
-function __vite__mapDeps(indexes) {
-  if (!__vite__mapDeps.viteFileDeps) {
-    __vite__mapDeps.viteFileDeps = ["./icon-accessible.IgfNK4Jg.js","./entry.49ZHHvLB.js","./entry._ZJTiiG-.css","./icon-add.kzXPKrGl.js","./icon-arrow-down.2v2hp4Xt.js","./icon-arrow-left.0NIGiU1P.js","./icon-arrow-right.G4JTPGc2.js","./icon-arrow-up.PSS8jaD7.js","./icon-attach.Fwk4Uxw0.js","./icon-browser.UxDB2PIC.js","./icon-calendar-lined.uqOA-YSW.js","./icon-cancel-circle-filled.-GlE6Jtl.js","./icon-car.u_vczvd4.js","./icon-check.2p4Xc53D.js","./icon-child-lined.CxoBoObp.js","./icon-dollar-circle-filled.pXobvUhs.js","./icon-fire.6Q6oR_Fn.js","./icon-flood.0HEgTeD9.js","./icon-free.OVf1QOdo.js","./icon-instagram.NFdPBf9w.js","./icon-lightning.lldfgtzu.js","./icon-link.JWvdqMbJ.js","./icon-list.ypbt8G6o.js","./icon-loading.RshIDrCh.js","./icon-log-in-lined.suOMu9M0.js","./icon-mail-lined.Ip5JdcEl.js","./icon-medical.QtoyQ8xF.js","./icon-menu.cXqcWbsn.js","./icon-microphone._cRYpUs_.js","./icon-pause-circle-lined.gG4gButR.js","./icon-person.GUGJMKmj.js","./icon-play-circle-lined.cJRQaA2O.js","./icon-print-lined.W6h-olC3.js","./icon-question-circle-lined.fDPrhu5z.js","./icon-search.GqYFHFIf.js","./icon-senior.neBCSItu.js","./icon-share.yAJ7fkkO.js","./icon-smoke.iFg4JVG9.js","./icon-spotify.mOg-s27z.js","./icon-star.5-Hz87KX.js","./icon-stop-circle-lined.3l3IR3Om.js","./icon-table-lined.i31Cdm75.js","./icon-temperature.CD6gMo8Q.js","./icon-traffic.0NDlUvBB.js","./icon-trash-lined.lcKiB1PC.js","./icon-upload.Z4PaOLf-.js","./icon-user-circle-filled.Cmq3FUmD.js","./icon-video.kiPGaQ6i.js","./icon-wechat.C9k7L3B4.js","./icon-youtube.ogRB3-Fq.js","./icon-zoom-in.6p_hWNaT.js","./icon-zoom-out.AmH-vH4L.js","./icon-map-zoom-in.RoeBztCA.js","./icon-map-zoom-out.V8461QeS.js","./icon-enlarge.1Br3L23I.js","./icon-home.QZ-FrcoD.js"]
-  }
-  return indexes.map((i) => __vite__mapDeps.viteFileDeps[i])
-}
diff --git a/_nuxt/RplIcon.vue.PZ-X7Qhh.js b/_nuxt/RplIcon.vue.PZ-X7Qhh.js
new file mode 100644
index 0000000000..9b2d74f798
--- /dev/null
+++ b/_nuxt/RplIcon.vue.PZ-X7Qhh.js
@@ -0,0 +1,7 @@
+import{_ as o,d,r as E,H as s,J as n,ax as v,b as t,c as e,G as I,a2 as R,t as D,f as V,e as A,E as O,n as P}from"./entry.Do8xnxHS.js";const L=["icon-cancel","icon-check-circle-filled","icon-chevron-down","icon-chevron-left","icon-chevron-right","icon-chevron-up","icon-current-location","icon-document-lined","icon-document","icon-download","icon-enlarge-square-filled","icon-enlarge","icon-exclamation-circle-filled","icon-facebook","icon-home","icon-information-circle-filled","icon-link-external-square-filled","icon-linkedin","icon-mail","icon-phone","icon-pin","icon-twitter","icon-view","icon-whatsapp","icon-x"],l={"icon-accessible":()=>o(()=>import("./icon-accessible.JERWHslr.js"),__vite__mapDeps([0,1,2]),import.meta.url),"icon-add":()=>o(()=>import("./icon-add.hkhs5vZ-.js"),__vite__mapDeps([3,1,2]),import.meta.url),"icon-arrow-down":()=>o(()=>import("./icon-arrow-down.SQ1bOEHB.js"),__vite__mapDeps([4,1,2]),import.meta.url),"icon-arrow-left":()=>o(()=>import("./icon-arrow-left.HVFcOuPq.js"),__vite__mapDeps([5,1,2]),import.meta.url),"icon-arrow-right":()=>o(()=>import("./icon-arrow-right.Z7s6RWiM.js"),__vite__mapDeps([6,1,2]),import.meta.url),"icon-arrow-up":()=>o(()=>import("./icon-arrow-up.5ibpXQnN.js"),__vite__mapDeps([7,1,2]),import.meta.url),"icon-attach":()=>o(()=>import("./icon-attach.KaZHqyGD.js"),__vite__mapDeps([8,1,2]),import.meta.url),"icon-browser":()=>o(()=>import("./icon-browser.i77M2uFf.js"),__vite__mapDeps([9,1,2]),import.meta.url),"icon-calendar-lined":()=>o(()=>import("./icon-calendar-lined.YF7sg5n3.js"),__vite__mapDeps([10,1,2]),import.meta.url),"icon-cancel-circle-filled":()=>o(()=>import("./icon-cancel-circle-filled.CURkLpAF.js"),__vite__mapDeps([11,1,2]),import.meta.url),"icon-car":()=>o(()=>import("./icon-car.PxyroN-0.js"),__vite__mapDeps([12,1,2]),import.meta.url),"icon-check":()=>o(()=>import("./icon-check.X6iFJ1nM.js"),__vite__mapDeps([13,1,2]),import.meta.url),"icon-child-lined":()=>o(()=>import("./icon-child-lined.cl3qOp4j.js"),__vite__mapDeps([14,1,2]),import.meta.url),"icon-dollar-circle-filled":()=>o(()=>import("./icon-dollar-circle-filled.OfCa0qKU.js"),__vite__mapDeps([15,1,2]),import.meta.url),"icon-fire":()=>o(()=>import("./icon-fire.H8m70NW7.js"),__vite__mapDeps([16,1,2]),import.meta.url),"icon-flood":()=>o(()=>import("./icon-flood.Ibpk1X0p.js"),__vite__mapDeps([17,1,2]),import.meta.url),"icon-free":()=>o(()=>import("./icon-free.Rd0LPl8f.js"),__vite__mapDeps([18,1,2]),import.meta.url),"icon-instagram":()=>o(()=>import("./icon-instagram.t6FQ8jrY.js"),__vite__mapDeps([19,1,2]),import.meta.url),"icon-lightning":()=>o(()=>import("./icon-lightning.yIdZoiWx.js"),__vite__mapDeps([20,1,2]),import.meta.url),"icon-link":()=>o(()=>import("./icon-link.POGwWQkT.js"),__vite__mapDeps([21,1,2]),import.meta.url),"icon-list":()=>o(()=>import("./icon-list.XfZbIWbX.js"),__vite__mapDeps([22,1,2]),import.meta.url),"icon-loading":()=>o(()=>import("./icon-loading.eTABF85R.js"),__vite__mapDeps([23,1,2]),import.meta.url),"icon-log-in-lined":()=>o(()=>import("./icon-log-in-lined.4lvxCkYN.js"),__vite__mapDeps([24,1,2]),import.meta.url),"icon-mail-lined":()=>o(()=>import("./icon-mail-lined.u9eIXaUH.js"),__vite__mapDeps([25,1,2]),import.meta.url),"icon-medical":()=>o(()=>import("./icon-medical.62S53NR4.js"),__vite__mapDeps([26,1,2]),import.meta.url),"icon-menu":()=>o(()=>import("./icon-menu.xKbIhOeq.js"),__vite__mapDeps([27,1,2]),import.meta.url),"icon-microphone":()=>o(()=>import("./icon-microphone.n9nS1r9k.js"),__vite__mapDeps([28,1,2]),import.meta.url),"icon-pause-circle-lined":()=>o(()=>import("./icon-pause-circle-lined.l6dNNUco.js"),__vite__mapDeps([29,1,2]),import.meta.url),"icon-person":()=>o(()=>import("./icon-person.dbcwd-53.js"),__vite__mapDeps([30,1,2]),import.meta.url),"icon-play-circle-lined":()=>o(()=>import("./icon-play-circle-lined.hK5OXOAl.js"),__vite__mapDeps([31,1,2]),import.meta.url),"icon-print-lined":()=>o(()=>import("./icon-print-lined.LSjSkGV0.js"),__vite__mapDeps([32,1,2]),import.meta.url),"icon-question-circle-lined":()=>o(()=>import("./icon-question-circle-lined.BuyJvFG0.js"),__vite__mapDeps([33,1,2]),import.meta.url),"icon-search":()=>o(()=>import("./icon-search.jXi_AnkC.js"),__vite__mapDeps([34,1,2]),import.meta.url),"icon-senior":()=>o(()=>import("./icon-senior.Gz8LbPO1.js"),__vite__mapDeps([35,1,2]),import.meta.url),"icon-share":()=>o(()=>import("./icon-share.Mrcz1U3u.js"),__vite__mapDeps([36,1,2]),import.meta.url),"icon-smoke":()=>o(()=>import("./icon-smoke.ogLcEKzS.js"),__vite__mapDeps([37,1,2]),import.meta.url),"icon-spotify":()=>o(()=>import("./icon-spotify.Fqdu0Rmr.js"),__vite__mapDeps([38,1,2]),import.meta.url),"icon-star":()=>o(()=>import("./icon-star._n_01cGJ.js"),__vite__mapDeps([39,1,2]),import.meta.url),"icon-stop-circle-lined":()=>o(()=>import("./icon-stop-circle-lined.MCDwAMkC.js"),__vite__mapDeps([40,1,2]),import.meta.url),"icon-table-lined":()=>o(()=>import("./icon-table-lined.Obc807ds.js"),__vite__mapDeps([41,1,2]),import.meta.url),"icon-temperature":()=>o(()=>import("./icon-temperature.iYeUUXBf.js"),__vite__mapDeps([42,1,2]),import.meta.url),"icon-traffic":()=>o(()=>import("./icon-traffic.iZKtggIi.js"),__vite__mapDeps([43,1,2]),import.meta.url),"icon-trash-lined":()=>o(()=>import("./icon-trash-lined.LyLUP7op.js"),__vite__mapDeps([44,1,2]),import.meta.url),"icon-upload":()=>o(()=>import("./icon-upload.kUVI-ycm.js"),__vite__mapDeps([45,1,2]),import.meta.url),"icon-user-circle-filled":()=>o(()=>import("./icon-user-circle-filled.IJIxudQc.js"),__vite__mapDeps([46,1,2]),import.meta.url),"icon-video":()=>o(()=>import("./icon-video.7VDPpbWR.js"),__vite__mapDeps([47,1,2]),import.meta.url),"icon-wechat":()=>o(()=>import("./icon-wechat.Z6k04rEx.js"),__vite__mapDeps([48,1,2]),import.meta.url),"icon-youtube":()=>o(()=>import("./icon-youtube.pz58cf0I.js"),__vite__mapDeps([49,1,2]),import.meta.url),"icon-zoom-in":()=>o(()=>import("./icon-zoom-in.3g5qbP_U.js"),__vite__mapDeps([50,1,2]),import.meta.url),"icon-zoom-out":()=>o(()=>import("./icon-zoom-out.GK2jSbWk.js"),__vite__mapDeps([51,1,2]),import.meta.url),"icon-map-zoom-in":()=>o(()=>import("./icon-map-zoom-in.bXAuyjx5.js"),__vite__mapDeps([52,1,2]),import.meta.url),"icon-map-zoom-out":()=>o(()=>import("./icon-map-zoom-out.pdO56m1U.js"),__vite__mapDeps([53,1,2]),import.meta.url),"icon-enlarge":()=>o(()=>import("./icon-enlarge.fM1MVPt3.js"),__vite__mapDeps([54,1,2]),import.meta.url),"icon-home":()=>o(()=>import("./icon-home.MT_Aun8G.js"),__vite__mapDeps([55,1,2]),import.meta.url)},c=L,T=Object.keys(l);[...c,...T];const f=["role"],h={key:0},k=["xlink:href"],g=d({__name:"RplIcon",props:{name:{default:void 0},colour:{default:void 0},size:{default:"s"},padded:{type:Boolean,default:!1},title:{default:void 0}},setup(a){const r=a,_=E(c.find(i=>i===r.name)),p=s("rplIcons",{}),m=n(()=>{if(!_.value)try{return v({...l,...p}[r.name])}catch{return console.error(`RplIcon error: Couldn't dynamically import icon with name "${r.name}"`),!1}return!1}),u=n(()=>["rpl-icon",`rpl-icon--size-${r.size}`,r.name?`rpl-icon--${r.name}`:null,r.colour?`rpl-icon--colour-${r.colour}`:null,r.padded?"rpl-icon--padded":null]);return(i,y)=>(t(),e("span",{class:P(u.value)},[i.name&&!_.value&&m.value?(t(),I(R(m.value),{key:0})):i.name?(t(),e("svg",{key:1,role:i.title?void 0:"presentation"},[i.title?(t(),e("title",h,D(i.title),1)):V("",!0),A("use",{"xlink:href":`#${i.name}`},null,8,k)],8,f)):O(i.$slots,"default",{key:2})],2))}});export{g as _};
+function __vite__mapDeps(indexes) {
+  if (!__vite__mapDeps.viteFileDeps) {
+    __vite__mapDeps.viteFileDeps = ["./icon-accessible.JERWHslr.js","./entry.Do8xnxHS.js","./entry._ZJTiiG-.css","./icon-add.hkhs5vZ-.js","./icon-arrow-down.SQ1bOEHB.js","./icon-arrow-left.HVFcOuPq.js","./icon-arrow-right.Z7s6RWiM.js","./icon-arrow-up.5ibpXQnN.js","./icon-attach.KaZHqyGD.js","./icon-browser.i77M2uFf.js","./icon-calendar-lined.YF7sg5n3.js","./icon-cancel-circle-filled.CURkLpAF.js","./icon-car.PxyroN-0.js","./icon-check.X6iFJ1nM.js","./icon-child-lined.cl3qOp4j.js","./icon-dollar-circle-filled.OfCa0qKU.js","./icon-fire.H8m70NW7.js","./icon-flood.Ibpk1X0p.js","./icon-free.Rd0LPl8f.js","./icon-instagram.t6FQ8jrY.js","./icon-lightning.yIdZoiWx.js","./icon-link.POGwWQkT.js","./icon-list.XfZbIWbX.js","./icon-loading.eTABF85R.js","./icon-log-in-lined.4lvxCkYN.js","./icon-mail-lined.u9eIXaUH.js","./icon-medical.62S53NR4.js","./icon-menu.xKbIhOeq.js","./icon-microphone.n9nS1r9k.js","./icon-pause-circle-lined.l6dNNUco.js","./icon-person.dbcwd-53.js","./icon-play-circle-lined.hK5OXOAl.js","./icon-print-lined.LSjSkGV0.js","./icon-question-circle-lined.BuyJvFG0.js","./icon-search.jXi_AnkC.js","./icon-senior.Gz8LbPO1.js","./icon-share.Mrcz1U3u.js","./icon-smoke.ogLcEKzS.js","./icon-spotify.Fqdu0Rmr.js","./icon-star._n_01cGJ.js","./icon-stop-circle-lined.MCDwAMkC.js","./icon-table-lined.Obc807ds.js","./icon-temperature.iYeUUXBf.js","./icon-traffic.iZKtggIi.js","./icon-trash-lined.LyLUP7op.js","./icon-upload.kUVI-ycm.js","./icon-user-circle-filled.IJIxudQc.js","./icon-video.7VDPpbWR.js","./icon-wechat.Z6k04rEx.js","./icon-youtube.pz58cf0I.js","./icon-zoom-in.3g5qbP_U.js","./icon-zoom-out.GK2jSbWk.js","./icon-map-zoom-in.bXAuyjx5.js","./icon-map-zoom-out.pdO56m1U.js","./icon-enlarge.fM1MVPt3.js","./icon-home.MT_Aun8G.js"]
+  }
+  return indexes.map((i) => __vite__mapDeps.viteFileDeps[i])
+}
diff --git a/_nuxt/RplImage.css.o2mWVvok.js b/_nuxt/RplImage.css.ouJWHfa9.js
similarity index 98%
rename from _nuxt/RplImage.css.o2mWVvok.js
rename to _nuxt/RplImage.css.ouJWHfa9.js
index b1d80e671c..578eb9a891 100644
--- a/_nuxt/RplImage.css.o2mWVvok.js
+++ b/_nuxt/RplImage.css.ouJWHfa9.js
@@ -1 +1 @@
-import{X as j,Y as L,N as I,Z as k,J as h,r as _,aw as z,o as x,ab as B,d as A,b as O,c as C,az as N,aA as W,G as q,n as G,a0 as R}from"./entry.49ZHHvLB.js";function S(t){return j()?(L(t),!0):!1}function g(t){return typeof t=="function"?t():I(t)}const M=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const F=Object.prototype.toString,T=t=>F.call(t)==="[object Object]",y=()=>{},D=Q();function Q(){var t,e;return M&&((t=window==null?void 0:window.navigator)==null?void 0:t.userAgent)&&(/iP(ad|hone|od)/.test(window.navigator.userAgent)||((e=window==null?void 0:window.navigator)==null?void 0:e.maxTouchPoints)>2&&/iPad|Macintosh/.test(window==null?void 0:window.navigator.userAgent))}function V(t,e){var r;if(typeof t=="number")return t+e;const o=((r=t.match(/^-?[0-9]+\.?[0-9]*/))==null?void 0:r[0])||"",c=t.slice(o.length),u=Number.parseFloat(o)+e;return Number.isNaN(u)?t:u+c}function v(t){var e;const r=g(t);return(e=r==null?void 0:r.$el)!=null?e:r}const b=M?window:void 0;function $(...t){let e,r,o,c;if(typeof t[0]=="string"||Array.isArray(t[0])?([r,o,c]=t,e=b):[e,r,o,c]=t,!e)return y;Array.isArray(r)||(r=[r]),Array.isArray(o)||(o=[o]);const u=[],s=()=>{u.forEach(n=>n()),u.length=0},l=(n,a,i,d)=>(n.addEventListener(a,i,d),()=>n.removeEventListener(a,i,d)),f=k(()=>[v(e),g(c)],([n,a])=>{if(s(),!n)return;const i=T(a)?{...a}:a;u.push(...r.flatMap(d=>o.map(m=>l(n,d,m,i))))},{immediate:!0,flush:"post"}),p=()=>{f(),s()};return S(p),p}let E=!1;function H(t,e,r={}){const{window:o=b,ignore:c=[],capture:u=!0,detectIframe:s=!1}=r;if(!o)return y;D&&!E&&(E=!0,Array.from(o.document.body.children).forEach(i=>i.addEventListener("click",y)),o.document.documentElement.addEventListener("click",y));let l=!0;const f=i=>c.some(d=>{if(typeof d=="string")return Array.from(o.document.querySelectorAll(d)).some(m=>m===i.target||i.composedPath().includes(m));{const m=v(d);return m&&(i.target===m||i.composedPath().includes(m))}}),n=[$(o,"click",i=>{const d=v(t);if(!(!d||d===i.target||i.composedPath().includes(d))){if(i.detail===0&&(l=!f(i)),!l){l=!0;return}e(i)}},{passive:!0,capture:u}),$(o,"pointerdown",i=>{const d=v(t);l=!f(i)&&!!(d&&!i.composedPath().includes(d))},{passive:!0}),s&&$(o,"blur",i=>{setTimeout(()=>{var d;const m=v(t);((d=o.document.activeElement)==null?void 0:d.tagName)==="IFRAME"&&!(m!=null&&m.contains(o.document.activeElement))&&e(i)},0)})].filter(Boolean);return()=>n.forEach(i=>i())}function J(){const t=_(!1),e=B();return e&&x(()=>{t.value=!0},e),t}function U(t){const e=J();return h(()=>(e.value,!!t()))}function w(t,e={}){const{window:r=b}=e,o=U(()=>r&&"matchMedia"in r&&typeof r.matchMedia=="function");let c;const u=_(!1),s=p=>{u.value=p.matches},l=()=>{c&&("removeEventListener"in c?c.removeEventListener("change",s):c.removeListener(s))},f=z(()=>{o.value&&(l(),c=r.matchMedia(g(t)),"addEventListener"in c?c.addEventListener("change",s):c.addListener(s),u.value=c.matches)});return S(()=>{f(),l(),c=void 0}),u}function K(t,e={}){function r(n,a){let i=g(t[g(n)]);return a!=null&&(i=V(i,a)),typeof i=="number"&&(i=`${i}px`),i}const{window:o=b,strategy:c="min-width"}=e;function u(n){return o?o.matchMedia(n).matches:!1}const s=n=>w(()=>`(min-width: ${r(n)})`,e),l=n=>w(()=>`(max-width: ${r(n)})`,e),f=Object.keys(t).reduce((n,a)=>(Object.defineProperty(n,a,{get:()=>c==="min-width"?s(a):l(a),enumerable:!0,configurable:!0}),n),{});function p(){const n=Object.keys(t).map(a=>[a,s(a)]);return h(()=>n.filter(([,a])=>a.value).map(([a])=>a))}return Object.assign(f,{greaterOrEqual:s,smallerOrEqual:l,greater(n){return w(()=>`(min-width: ${r(n,.1)})`,e)},smaller(n){return w(()=>`(max-width: ${r(n,-.1)})`,e)},between(n,a){return w(()=>`(min-width: ${r(n)}) and (max-width: ${r(a,-.1)})`,e)},isGreater(n){return u(`(min-width: ${r(n,.1)})`)},isGreaterOrEqual(n){return u(`(min-width: ${r(n)})`)},isSmaller(n){return u(`(max-width: ${r(n,-.1)})`)},isSmallerOrEqual(n){return u(`(max-width: ${r(n)})`)},isInBetween(n,a){return u(`(min-width: ${r(n)}) and (max-width: ${r(a,-.1)})`)},current:p,active(){const n=p();return h(()=>n.value.length===0?"":n.value.at(-1))}})}const X={inheritAttrs:!1},Y=A({...X,__name:"RplImg",props:{class:{},src:{},alt:{default:""},width:{},height:{},srcset:{default:void 0},sizes:{default:void 0},loading:{},fetchpriority:{},style:{type:[Boolean,null,String,Object,Array]}},setup(t){const e=t;return(r,o)=>(O(),C("img",N(W(e)),null,16))}}),P=(t,e)=>t<0?0:t>e?100:Number((t/e*100).toFixed(2)),ee=A({__name:"RplImage",props:{src:{},alt:{},width:{default:void 0},height:{default:void 0},sizes:{default:void 0},circle:{type:Boolean,default:!1},focalPoint:{default:void 0},aspect:{default:void 0},fit:{default:"cover"},priority:{default:"auto"}},setup(t){const e=t,r=h(()=>{const s="rpl-u-aspect";if(e.circle)return{[`${s}-square`]:!0};if(typeof e.aspect=="string")return{[`${s}-${e.aspect}`]:!0};if(typeof e.aspect=="object"){const l={};for(const f in e.aspect){const p=f!=="xs"?`-${f}`:"";l[`${s}-${e.aspect[f]}${p}`]=!0}return l}return!1}),o=h(()=>({"rpl-image":!0,"rpl-image--fill":e.aspect,"rpl-image--circle":e.circle,[`rpl-image--${e.fit}`]:e.fit,...r.value})),c=h(()=>{var f,p;if(!e.height||!e.width||!((f=e.focalPoint)!=null&&f.x)||!((p=e.focalPoint)!=null&&p.y))return;const s=P(e.focalPoint.x,e.width),l=P(e.focalPoint.y,e.height);return{"object-position":`${s}% ${l}%`}}),u=h(()=>e.priority==="high"?"eager":"lazy");return(s,l)=>{const f=Y;return O(),q(f,{src:s.src,alt:s.alt||"",class:G(o.value),aspect:s.aspect,sizes:s.sizes,width:s.width,height:s.height,loading:u.value,fetchpriority:s.priority,style:R(c.value)},null,8,["src","alt","class","aspect","sizes","width","height","loading","fetchpriority","style"])}}});export{ee as _,K as a,$ as b,H as o,S as t,v as u};
+import{X as j,Y as L,N as I,Z as k,J as h,r as _,aw as z,o as x,ab as B,d as A,b as O,c as C,az as N,aA as W,G as q,n as G,a0 as R}from"./entry.Do8xnxHS.js";function S(t){return j()?(L(t),!0):!1}function g(t){return typeof t=="function"?t():I(t)}const M=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const F=Object.prototype.toString,T=t=>F.call(t)==="[object Object]",y=()=>{},D=Q();function Q(){var t,e;return M&&((t=window==null?void 0:window.navigator)==null?void 0:t.userAgent)&&(/iP(ad|hone|od)/.test(window.navigator.userAgent)||((e=window==null?void 0:window.navigator)==null?void 0:e.maxTouchPoints)>2&&/iPad|Macintosh/.test(window==null?void 0:window.navigator.userAgent))}function V(t,e){var r;if(typeof t=="number")return t+e;const o=((r=t.match(/^-?[0-9]+\.?[0-9]*/))==null?void 0:r[0])||"",c=t.slice(o.length),u=Number.parseFloat(o)+e;return Number.isNaN(u)?t:u+c}function v(t){var e;const r=g(t);return(e=r==null?void 0:r.$el)!=null?e:r}const b=M?window:void 0;function $(...t){let e,r,o,c;if(typeof t[0]=="string"||Array.isArray(t[0])?([r,o,c]=t,e=b):[e,r,o,c]=t,!e)return y;Array.isArray(r)||(r=[r]),Array.isArray(o)||(o=[o]);const u=[],s=()=>{u.forEach(n=>n()),u.length=0},l=(n,a,i,d)=>(n.addEventListener(a,i,d),()=>n.removeEventListener(a,i,d)),f=k(()=>[v(e),g(c)],([n,a])=>{if(s(),!n)return;const i=T(a)?{...a}:a;u.push(...r.flatMap(d=>o.map(m=>l(n,d,m,i))))},{immediate:!0,flush:"post"}),p=()=>{f(),s()};return S(p),p}let E=!1;function H(t,e,r={}){const{window:o=b,ignore:c=[],capture:u=!0,detectIframe:s=!1}=r;if(!o)return y;D&&!E&&(E=!0,Array.from(o.document.body.children).forEach(i=>i.addEventListener("click",y)),o.document.documentElement.addEventListener("click",y));let l=!0;const f=i=>c.some(d=>{if(typeof d=="string")return Array.from(o.document.querySelectorAll(d)).some(m=>m===i.target||i.composedPath().includes(m));{const m=v(d);return m&&(i.target===m||i.composedPath().includes(m))}}),n=[$(o,"click",i=>{const d=v(t);if(!(!d||d===i.target||i.composedPath().includes(d))){if(i.detail===0&&(l=!f(i)),!l){l=!0;return}e(i)}},{passive:!0,capture:u}),$(o,"pointerdown",i=>{const d=v(t);l=!f(i)&&!!(d&&!i.composedPath().includes(d))},{passive:!0}),s&&$(o,"blur",i=>{setTimeout(()=>{var d;const m=v(t);((d=o.document.activeElement)==null?void 0:d.tagName)==="IFRAME"&&!(m!=null&&m.contains(o.document.activeElement))&&e(i)},0)})].filter(Boolean);return()=>n.forEach(i=>i())}function J(){const t=_(!1),e=B();return e&&x(()=>{t.value=!0},e),t}function U(t){const e=J();return h(()=>(e.value,!!t()))}function w(t,e={}){const{window:r=b}=e,o=U(()=>r&&"matchMedia"in r&&typeof r.matchMedia=="function");let c;const u=_(!1),s=p=>{u.value=p.matches},l=()=>{c&&("removeEventListener"in c?c.removeEventListener("change",s):c.removeListener(s))},f=z(()=>{o.value&&(l(),c=r.matchMedia(g(t)),"addEventListener"in c?c.addEventListener("change",s):c.addListener(s),u.value=c.matches)});return S(()=>{f(),l(),c=void 0}),u}function K(t,e={}){function r(n,a){let i=g(t[g(n)]);return a!=null&&(i=V(i,a)),typeof i=="number"&&(i=`${i}px`),i}const{window:o=b,strategy:c="min-width"}=e;function u(n){return o?o.matchMedia(n).matches:!1}const s=n=>w(()=>`(min-width: ${r(n)})`,e),l=n=>w(()=>`(max-width: ${r(n)})`,e),f=Object.keys(t).reduce((n,a)=>(Object.defineProperty(n,a,{get:()=>c==="min-width"?s(a):l(a),enumerable:!0,configurable:!0}),n),{});function p(){const n=Object.keys(t).map(a=>[a,s(a)]);return h(()=>n.filter(([,a])=>a.value).map(([a])=>a))}return Object.assign(f,{greaterOrEqual:s,smallerOrEqual:l,greater(n){return w(()=>`(min-width: ${r(n,.1)})`,e)},smaller(n){return w(()=>`(max-width: ${r(n,-.1)})`,e)},between(n,a){return w(()=>`(min-width: ${r(n)}) and (max-width: ${r(a,-.1)})`,e)},isGreater(n){return u(`(min-width: ${r(n,.1)})`)},isGreaterOrEqual(n){return u(`(min-width: ${r(n)})`)},isSmaller(n){return u(`(max-width: ${r(n,-.1)})`)},isSmallerOrEqual(n){return u(`(max-width: ${r(n)})`)},isInBetween(n,a){return u(`(min-width: ${r(n)}) and (max-width: ${r(a,-.1)})`)},current:p,active(){const n=p();return h(()=>n.value.length===0?"":n.value.at(-1))}})}const X={inheritAttrs:!1},Y=A({...X,__name:"RplImg",props:{class:{},src:{},alt:{default:""},width:{},height:{},srcset:{default:void 0},sizes:{default:void 0},loading:{},fetchpriority:{},style:{type:[Boolean,null,String,Object,Array]}},setup(t){const e=t;return(r,o)=>(O(),C("img",N(W(e)),null,16))}}),P=(t,e)=>t<0?0:t>e?100:Number((t/e*100).toFixed(2)),ee=A({__name:"RplImage",props:{src:{},alt:{},width:{default:void 0},height:{default:void 0},sizes:{default:void 0},circle:{type:Boolean,default:!1},focalPoint:{default:void 0},aspect:{default:void 0},fit:{default:"cover"},priority:{default:"auto"}},setup(t){const e=t,r=h(()=>{const s="rpl-u-aspect";if(e.circle)return{[`${s}-square`]:!0};if(typeof e.aspect=="string")return{[`${s}-${e.aspect}`]:!0};if(typeof e.aspect=="object"){const l={};for(const f in e.aspect){const p=f!=="xs"?`-${f}`:"";l[`${s}-${e.aspect[f]}${p}`]=!0}return l}return!1}),o=h(()=>({"rpl-image":!0,"rpl-image--fill":e.aspect,"rpl-image--circle":e.circle,[`rpl-image--${e.fit}`]:e.fit,...r.value})),c=h(()=>{var f,p;if(!e.height||!e.width||!((f=e.focalPoint)!=null&&f.x)||!((p=e.focalPoint)!=null&&p.y))return;const s=P(e.focalPoint.x,e.width),l=P(e.focalPoint.y,e.height);return{"object-position":`${s}% ${l}%`}}),u=h(()=>e.priority==="high"?"eager":"lazy");return(s,l)=>{const f=Y;return O(),q(f,{src:s.src,alt:s.alt||"",class:G(o.value),aspect:s.aspect,sizes:s.sizes,width:s.width,height:s.height,loading:u.value,fetchpriority:s.priority,style:R(c.value)},null,8,["src","alt","class","aspect","sizes","width","height","loading","fetchpriority","style"])}}});export{ee as _,K as a,$ as b,H as o,S as t,v as u};
diff --git a/_nuxt/RplLink.vue.TWUjSovo.js b/_nuxt/RplLink.vue.3IdzOFUB.js
similarity index 68%
rename from _nuxt/RplLink.vue.TWUjSovo.js
rename to _nuxt/RplLink.vue.3IdzOFUB.js
index c0e2aacdeb..a134ac104c 100644
--- a/_nuxt/RplLink.vue.TWUjSovo.js
+++ b/_nuxt/RplLink.vue.3IdzOFUB.js
@@ -1 +1 @@
-import{d as r,b as o,c as s,E as n}from"./entry.49ZHHvLB.js";const t=["href"],_=r({__name:"RplLink",props:{url:{}},setup(a){return(e,p)=>(o(),s("a",{href:e.url},[n(e.$slots,"default")],8,t))}});export{_};
+import{d as r,b as o,c as s,E as n}from"./entry.Do8xnxHS.js";const t=["href"],_=r({__name:"RplLink",props:{url:{}},setup(a){return(e,p)=>(o(),s("a",{href:e.url},[n(e.$slots,"default")],8,t))}});export{_};
diff --git a/_nuxt/RplList.vue.4pRwhR7E.js b/_nuxt/RplList.vue.i5RvVHLA.js
similarity index 90%
rename from _nuxt/RplList.vue.4pRwhR7E.js
rename to _nuxt/RplList.vue.i5RvVHLA.js
index cab9b99e66..c443887bd2 100644
--- a/_nuxt/RplList.vue.4pRwhR7E.js
+++ b/_nuxt/RplList.vue.i5RvVHLA.js
@@ -1 +1 @@
-import{_ as m}from"./RplIcon.vue.NIDikUS0.js";import{d as _,b as a,c as t,f as s,G as o,e as L,E as P,F as u,J as R,w as c,n as f,t as h,D as C,g as $,W as B,a2 as g}from"./entry.49ZHHvLB.js";import{_ as w}from"./RplTextLink.css.ll_eQGN0.js";import{u as E}from"./useRippleEvent.DMJaxZxB.js";const V={key:0,class:"rpl-icon--child"},F={class:"rpl-list__label"},k=_({__name:"RplListContent",props:{iconName:{default:void 0},iconColour:{default:"default"},depth:{default:0},iconPlacement:{default:"before"}},setup(p){return(n,r)=>(a(),t(u,null,[n.depth>0?(a(),t("span",V)):s("",!0),n.iconName&&n.iconPlacement==="before"?(a(),o(m,{key:1,name:n.iconName,colour:n.iconColour,class:"rpl-list__icon"},null,8,["name","colour"])):s("",!0),L("span",F,[P(n.$slots,"default")]),n.iconName&&n.iconPlacement==="after"?(a(),o(m,{key:2,name:n.iconName,colour:n.iconColour,class:"rpl-list__icon"},null,8,["name","colour"])):s("",!0)],64))}}),I=_({__name:"RplList",props:{items:{default:()=>[]},type:{default:"ul"},itemClass:{default:""},containerClass:{default:""},depth:{default:0},maxDepth:{default:null},iconPlacement:{default:"before"},withLinkIds:{type:Boolean,default:!1}},emits:["itemClick"],setup(p,{emit:n}){const r=p,y=n,{emitRplEvent:N}=E("rpl-list",y),v=R(()=>r.maxDepth!==null?r.depth<r.maxDepth:!0),b=(e,d)=>{N("itemClick",{action:"click",value:e.url,text:e.text,index:d+1,type:e==null?void 0:e.type})};return(e,d)=>{const D=I;return e.items.length>0?(a(),o(g(e.type),{key:0,class:f(["rpl-list__items",e.containerClass?e.containerClass:null]),"data-depth":e.depth},{default:c(()=>[(a(!0),t(u,null,B(e.items,(l,i)=>(a(),t(u,{key:i},[l.url||l.text?(a(),t("li",{key:0,class:f(["rpl-list__item",e.itemClass?e.itemClass:null])},[l.url?(a(),o(w,{key:0,id:e.withLinkIds?l.id:void 0,url:l.url,class:"rpl-list__link",onClick:()=>b(l,i)},{default:c(()=>[$(k,{"icon-name":l==null?void 0:l.icon,"icon-colour":l==null?void 0:l.iconColour,"icon-placement":e.iconPlacement,depth:e.depth},{default:c(()=>[C(h(l.text),1)]),_:2},1032,["icon-name","icon-colour","icon-placement","depth"])]),_:2},1032,["id","url","onClick"])):(a(),o(k,{key:1,"icon-name":l==null?void 0:l.icon,"icon-colour":l==null?void 0:l.iconColour,"icon-placement":e.iconPlacement,depth:e.depth},{default:c(()=>[C(h(l.text),1)]),_:2},1032,["icon-name","icon-colour","icon-placement","depth"])),v.value&&l.items?(a(),o(D,{key:`${e.depth}-${i}`,items:l.items,"item-class":e.itemClass,"container-class":"rpl-list__items--sub",depth:e.depth+1},null,8,["items","item-class","depth"])):s("",!0)],2)):s("",!0)],64))),128))]),_:1},8,["class","data-depth"])):s("",!0)}}});export{I as _};
+import{_ as m}from"./RplIcon.vue.PZ-X7Qhh.js";import{d as _,b as a,c as t,f as s,G as o,e as L,E as P,F as u,J as R,w as c,n as f,t as h,D as C,g as $,W as B,a2 as g}from"./entry.Do8xnxHS.js";import{_ as w}from"./RplTextLink.css.vnmpcBOe.js";import{u as E}from"./useRippleEvent.Eg1owuZM.js";const V={key:0,class:"rpl-icon--child"},F={class:"rpl-list__label"},k=_({__name:"RplListContent",props:{iconName:{default:void 0},iconColour:{default:"default"},depth:{default:0},iconPlacement:{default:"before"}},setup(p){return(n,r)=>(a(),t(u,null,[n.depth>0?(a(),t("span",V)):s("",!0),n.iconName&&n.iconPlacement==="before"?(a(),o(m,{key:1,name:n.iconName,colour:n.iconColour,class:"rpl-list__icon"},null,8,["name","colour"])):s("",!0),L("span",F,[P(n.$slots,"default")]),n.iconName&&n.iconPlacement==="after"?(a(),o(m,{key:2,name:n.iconName,colour:n.iconColour,class:"rpl-list__icon"},null,8,["name","colour"])):s("",!0)],64))}}),I=_({__name:"RplList",props:{items:{default:()=>[]},type:{default:"ul"},itemClass:{default:""},containerClass:{default:""},depth:{default:0},maxDepth:{default:null},iconPlacement:{default:"before"},withLinkIds:{type:Boolean,default:!1}},emits:["itemClick"],setup(p,{emit:n}){const r=p,y=n,{emitRplEvent:N}=E("rpl-list",y),v=R(()=>r.maxDepth!==null?r.depth<r.maxDepth:!0),b=(e,d)=>{N("itemClick",{action:"click",value:e.url,text:e.text,index:d+1,type:e==null?void 0:e.type})};return(e,d)=>{const D=I;return e.items.length>0?(a(),o(g(e.type),{key:0,class:f(["rpl-list__items",e.containerClass?e.containerClass:null]),"data-depth":e.depth},{default:c(()=>[(a(!0),t(u,null,B(e.items,(l,i)=>(a(),t(u,{key:i},[l.url||l.text?(a(),t("li",{key:0,class:f(["rpl-list__item",e.itemClass?e.itemClass:null])},[l.url?(a(),o(w,{key:0,id:e.withLinkIds?l.id:void 0,url:l.url,class:"rpl-list__link",onClick:()=>b(l,i)},{default:c(()=>[$(k,{"icon-name":l==null?void 0:l.icon,"icon-colour":l==null?void 0:l.iconColour,"icon-placement":e.iconPlacement,depth:e.depth},{default:c(()=>[C(h(l.text),1)]),_:2},1032,["icon-name","icon-colour","icon-placement","depth"])]),_:2},1032,["id","url","onClick"])):(a(),o(k,{key:1,"icon-name":l==null?void 0:l.icon,"icon-colour":l==null?void 0:l.iconColour,"icon-placement":e.iconPlacement,depth:e.depth},{default:c(()=>[C(h(l.text),1)]),_:2},1032,["icon-name","icon-colour","icon-placement","depth"])),v.value&&l.items?(a(),o(D,{key:`${e.depth}-${i}`,items:l.items,"item-class":e.itemClass,"container-class":"rpl-list__items--sub",depth:e.depth+1},null,8,["items","item-class","depth"])):s("",!0)],2)):s("",!0)],64))),128))]),_:1},8,["class","data-depth"])):s("",!0)}}});export{I as _};
diff --git a/_nuxt/RplPromoCard.vue.btg01fDe.js b/_nuxt/RplPromoCard.vue.pyq2iKcr.js
similarity index 92%
rename from _nuxt/RplPromoCard.vue.btg01fDe.js
rename to _nuxt/RplPromoCard.vue.pyq2iKcr.js
index 5aaaa5f6cc..4b30fdde48 100644
--- a/_nuxt/RplPromoCard.vue.btg01fDe.js
+++ b/_nuxt/RplPromoCard.vue.pyq2iKcr.js
@@ -1 +1 @@
-import{b as g,_ as b}from"./RplImage.css.o2mWVvok.js";import{r as y,d as k,J as C,b as c,G as $,w as o,c as f,f as h,E as r,e as m,n as w,a2 as B,H as D,aC as E,Q as S,g as v,t as N,D as R,N as P}from"./entry.49ZHHvLB.js";import{_ as V}from"./RplTextLink.css.ll_eQGN0.js";import{u as L}from"./useRippleEvent.DMJaxZxB.js";const z=["rpl-card__cta","rpl-type-h3-fixed"];function T(){const i=t=>(t=t||window.event,"buttons"in t?t.buttons===1:t.button===1),l=y(null),s=y(null);let e,n,d=!1;return g(l,"pointerdown",t=>{i(t)&&(d=!0,n=+new Date)}),g(l,"pointerup",t=>{var p;if(d&&(t.preventDefault(),e=+new Date,e-n<200)){const u=(((p=l.value)==null?void 0:p.$el)||l.value).querySelector("a");u!==t.target&&u.click()}}),{container:l,trigger:s}}const j={key:0,class:"rpl-card__highlight"},q={key:1,class:"rpl-card__upper"},A={class:"rpl-card__body"},F={class:"rpl-card__content","data-cy":"content"},G={key:2,class:"rpl-card__lower"},H=k({__name:"RplCard",props:{el:{default:"div"},type:{default:"promo"},highlight:{type:Boolean,default:!1},link:{default:void 0}},setup(i){const l=i,s=C(()=>["rpl-card","rpl-type-p",`rpl-card--${l.type}`,l.link?"rpl-card--link":null]);return(e,n)=>(c(),$(B(e.el),{class:w(s.value)},{default:o(()=>[e.highlight?(c(),f("div",j)):h("",!0),e.$slots.upper?(c(),f("div",q,[r(e.$slots,"upper")])):h("",!0),m("div",A,[r(e.$slots,"meta"),r(e.$slots,"title"),m("div",F,[r(e.$slots,"default")])]),e.$slots.lower?(c(),f("div",G,[r(e.$slots,"lower")])):h("",!0)]),_:3},8,["class"]))}}),J={class:"rpl-card__meta rpl-type-label-small"},U=k({__name:"RplPromoCard",props:{el:{default:"div"},highlight:{type:Boolean,default:!1},image:{default:void 0},title:{},url:{default:void 0}},emits:["navigate"],setup(i,{emit:l}){const s=i,e=l,{emitRplEvent:n}=L("rpl-card",e),d=C(()=>z),{container:t,trigger:p}=T(),{hidePromoCardStripe:_}=D("featureFlags",{hidePromoCardStripe:!1}),u=()=>{n("navigate",{action:"click",value:s==null?void 0:s.url,text:s.title,type:"promo"},{global:!0})};return(a,M)=>(c(),$(H,{ref_key:"container",ref:t,type:"promo",highlight:P(_)?!1:a.highlight,link:a.url,el:a.el},E({title:o(()=>[m("h3",{class:w(d.value),"data-cy":"title"},[v(V,{ref_key:"trigger",ref:p,url:a.url,onClick:u},{default:o(()=>[R(N(a.title),1)]),_:1},8,["url"])],2)]),default:o(()=>[r(a.$slots,"default")]),_:2},[a.image?{name:"upper",fn:o(()=>[v(b,S(a.image,{class:"rpl-card__media",aspect:{xs:"wide",s:"ultrawide",m:"wide"},sizes:"sm:768px","data-cy":"image"}),null,16)]),key:"0"}:void 0,a.$slots.meta?{name:"meta",fn:o(()=>[m("div",J,[r(a.$slots,"meta")])]),key:"1"}:void 0]),1032,["highlight","link","el"]))}});export{U as _};
+import{b as g,_ as b}from"./RplImage.css.ouJWHfa9.js";import{r as y,d as k,J as C,b as c,G as $,w as o,c as f,f as h,E as r,e as m,n as w,a2 as B,H as D,aC as E,Q as S,g as v,t as N,D as R,N as P}from"./entry.Do8xnxHS.js";import{_ as V}from"./RplTextLink.css.vnmpcBOe.js";import{u as L}from"./useRippleEvent.Eg1owuZM.js";const z=["rpl-card__cta","rpl-type-h3-fixed"];function T(){const i=t=>(t=t||window.event,"buttons"in t?t.buttons===1:t.button===1),l=y(null),s=y(null);let e,n,d=!1;return g(l,"pointerdown",t=>{i(t)&&(d=!0,n=+new Date)}),g(l,"pointerup",t=>{var p;if(d&&(t.preventDefault(),e=+new Date,e-n<200)){const u=(((p=l.value)==null?void 0:p.$el)||l.value).querySelector("a");u!==t.target&&u.click()}}),{container:l,trigger:s}}const j={key:0,class:"rpl-card__highlight"},q={key:1,class:"rpl-card__upper"},A={class:"rpl-card__body"},F={class:"rpl-card__content","data-cy":"content"},G={key:2,class:"rpl-card__lower"},H=k({__name:"RplCard",props:{el:{default:"div"},type:{default:"promo"},highlight:{type:Boolean,default:!1},link:{default:void 0}},setup(i){const l=i,s=C(()=>["rpl-card","rpl-type-p",`rpl-card--${l.type}`,l.link?"rpl-card--link":null]);return(e,n)=>(c(),$(B(e.el),{class:w(s.value)},{default:o(()=>[e.highlight?(c(),f("div",j)):h("",!0),e.$slots.upper?(c(),f("div",q,[r(e.$slots,"upper")])):h("",!0),m("div",A,[r(e.$slots,"meta"),r(e.$slots,"title"),m("div",F,[r(e.$slots,"default")])]),e.$slots.lower?(c(),f("div",G,[r(e.$slots,"lower")])):h("",!0)]),_:3},8,["class"]))}}),J={class:"rpl-card__meta rpl-type-label-small"},U=k({__name:"RplPromoCard",props:{el:{default:"div"},highlight:{type:Boolean,default:!1},image:{default:void 0},title:{},url:{default:void 0}},emits:["navigate"],setup(i,{emit:l}){const s=i,e=l,{emitRplEvent:n}=L("rpl-card",e),d=C(()=>z),{container:t,trigger:p}=T(),{hidePromoCardStripe:_}=D("featureFlags",{hidePromoCardStripe:!1}),u=()=>{n("navigate",{action:"click",value:s==null?void 0:s.url,text:s.title,type:"promo"},{global:!0})};return(a,M)=>(c(),$(H,{ref_key:"container",ref:t,type:"promo",highlight:P(_)?!1:a.highlight,link:a.url,el:a.el},E({title:o(()=>[m("h3",{class:w(d.value),"data-cy":"title"},[v(V,{ref_key:"trigger",ref:p,url:a.url,onClick:u},{default:o(()=>[R(N(a.title),1)]),_:1},8,["url"])],2)]),default:o(()=>[r(a.$slots,"default")]),_:2},[a.image?{name:"upper",fn:o(()=>[v(b,S(a.image,{class:"rpl-card__media",aspect:{xs:"wide",s:"ultrawide",m:"wide"},sizes:"sm:768px","data-cy":"image"}),null,16)]),key:"0"}:void 0,a.$slots.meta?{name:"meta",fn:o(()=>[m("div",J,[r(a.$slots,"meta")])]),key:"1"}:void 0]),1032,["highlight","link","el"]))}});export{U as _};
diff --git a/_nuxt/RplTextLink.css.ll_eQGN0.js b/_nuxt/RplTextLink.css.vnmpcBOe.js
similarity index 77%
rename from _nuxt/RplTextLink.css.ll_eQGN0.js
rename to _nuxt/RplTextLink.css.vnmpcBOe.js
index 430192a308..76c3eb0d87 100644
--- a/_nuxt/RplTextLink.css.ll_eQGN0.js
+++ b/_nuxt/RplTextLink.css.vnmpcBOe.js
@@ -1 +1 @@
-import{_ as a}from"./RplLink.vue.TWUjSovo.js";import{d as o,J as r,ay as l,b as t,G as p,w as i,t as c,D as u,E as _,c as d,f as m}from"./entry.49ZHHvLB.js";const f={key:0,class:"rpl-u-visually-hidden"},y=o({__name:"RplTextLink",props:{url:{},text:{}},setup(k){const s=r(()=>l().target==="_blank");return(e,w)=>{const n=a;return t(),p(n,{ref:"link",class:"rpl-text-link rpl-u-focusable-inline",url:e.url},{default:i(()=>[_(e.$slots,"default",{},()=>[u(c(e.text),1)]),s.value?(t(),d("span",f," (opens in a new window) ")):m("",!0)]),_:3},8,["url"])}}});export{y as _};
+import{_ as a}from"./RplLink.vue.3IdzOFUB.js";import{d as o,J as r,ay as l,b as t,G as p,w as i,t as c,D as u,E as _,c as d,f as m}from"./entry.Do8xnxHS.js";const f={key:0,class:"rpl-u-visually-hidden"},y=o({__name:"RplTextLink",props:{url:{},text:{}},setup(k){const s=r(()=>l().target==="_blank");return(e,w)=>{const n=a;return t(),p(n,{ref:"link",class:"rpl-text-link rpl-u-focusable-inline",url:e.url},{default:i(()=>[_(e.$slots,"default",{},()=>[u(c(e.text),1)]),s.value?(t(),d("span",f," (opens in a new window) ")):m("",!0)]),_:3},8,["url"])}}});export{y as _};
diff --git a/_nuxt/Swatch.pCyR0PCQ.js b/_nuxt/Swatch.FPuuW78y.js
similarity index 82%
rename from _nuxt/Swatch.pCyR0PCQ.js
rename to _nuxt/Swatch.FPuuW78y.js
index b9a804c17f..8d26f0b070 100644
--- a/_nuxt/Swatch.pCyR0PCQ.js
+++ b/_nuxt/Swatch.FPuuW78y.js
@@ -1 +1 @@
-import{d as e,b as t,c as a,a0 as c}from"./entry.49ZHHvLB.js";import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";const s=e({__name:"Swatch",props:{colour:{},type:{default:"color"}},setup(n){return(o,_)=>(t(),a("div",{class:"docs-colour-swatch",style:c({background:o.colour})},null,4))}}),u=r(s,[["__scopeId","data-v-a0076e87"]]);export{u as default};
+import{d as e,b as t,c as a,a0 as c}from"./entry.Do8xnxHS.js";import{_ as r}from"./_plugin-vue_export-helper.x3n3nnut.js";const s=e({__name:"Swatch",props:{colour:{},type:{default:"color"}},setup(n){return(o,_)=>(t(),a("div",{class:"docs-colour-swatch",style:c({background:o.colour})},null,4))}}),u=r(s,[["__scopeId","data-v-a0076e87"]]);export{u as default};
diff --git a/_nuxt/asyncData.6xpne1x0.js b/_nuxt/asyncData.mgwg8A3s.js
similarity index 97%
rename from _nuxt/asyncData.6xpne1x0.js
rename to _nuxt/asyncData.mgwg8A3s.js
index 297a0ddec9..cc55f12a13 100644
--- a/_nuxt/asyncData.6xpne1x0.js
+++ b/_nuxt/asyncData.mgwg8A3s.js
@@ -1 +1 @@
-import{a5 as x,r as d,a6 as C,a7 as b,a8 as O,a as m,Z as k,a9 as B,j as D,aa as H,N as M,ab as R,ac as A}from"./entry.49ZHHvLB.js";const E=n=>n==="defer"||n===!1;function z(...n){var h;const l=typeof n[n.length-1]=="string"?n.pop():void 0;typeof n[0]!="string"&&n.unshift(l);let[a,u,e={}]=n;if(typeof a!="string")throw new TypeError("[nuxt] [asyncData] key must be a string.");if(typeof u!="function")throw new TypeError("[nuxt] [asyncData] handler must be a function.");const t=D(),v=u,_=()=>null,g=()=>t.isHydrating?t.payload.data[a]:t.static.data[a];e.server=e.server??!0,e.default=e.default??_,e.getCachedData=e.getCachedData??g,e.lazy=e.lazy??!1,e.immediate=e.immediate??!0,e.deep=e.deep??x.deep,e.dedupe=e.dedupe??"cancel";const f=()=>![null,void 0].includes(e.getCachedData(a));if(!t._asyncData[a]||!e.immediate){(h=t.payload._errors)[a]??(h[a]=null);const o=e.deep?d:C;t._asyncData[a]={data:o(e.getCachedData(a)??e.default()),pending:d(!f()),error:b(t.payload._errors,a),status:d("idle")}}const s={...t._asyncData[a]};s.refresh=s.execute=(o={})=>{if(t._asyncDataPromises[a]){if(E(o.dedupe??e.dedupe))return t._asyncDataPromises[a];t._asyncDataPromises[a].cancelled=!0}if((o._initial||t.isHydrating&&o._initial!==!1)&&f())return Promise.resolve(e.getCachedData(a));s.pending.value=!0,s.status.value="pending";const c=new Promise((r,i)=>{try{r(v(t))}catch(w){i(w)}}).then(r=>{if(c.cancelled)return t._asyncDataPromises[a];let i=r;e.transform&&(i=e.transform(r)),e.pick&&(i=N(i,e.pick)),t.payload.data[a]=i,s.data.value=i,s.error.value=null,s.status.value="success"}).catch(r=>{if(c.cancelled)return t._asyncDataPromises[a];s.error.value=H(r),s.data.value=M(e.default()),s.status.value="error"}).finally(()=>{c.cancelled||(s.pending.value=!1,delete t._asyncDataPromises[a])});return t._asyncDataPromises[a]=c,t._asyncDataPromises[a]};const y=()=>s.refresh({_initial:!0}),P=e.server!==!1&&t.payload.serverRendered;{const o=R();if(o&&!o._nuxtOnBeforeMountCbs){o._nuxtOnBeforeMountCbs=[];const r=o._nuxtOnBeforeMountCbs;o&&(O(()=>{r.forEach(i=>{i()}),r.splice(0,r.length)}),m(()=>r.splice(0,r.length)))}P&&t.isHydrating&&(s.error.value||f())?(s.pending.value=!1,s.status.value=s.error.value?"error":"success"):o&&(t.payload.serverRendered&&t.isHydrating||e.lazy)&&e.immediate?o._nuxtOnBeforeMountCbs.push(y):e.immediate&&y(),e.watch&&k(e.watch,()=>s.refresh());const c=t.hook("app:data:refresh",async r=>{(!r||r.includes(a))&&await s.refresh()});o&&m(c)}const p=Promise.resolve(t._asyncDataPromises[a]).then(()=>s);return Object.assign(p,s),p}async function T(n){await new Promise(a=>B(a));const l=n?A(n):void 0;await D().hooks.callHookParallel("app:data:refresh",l)}function N(n,l){const a={};for(const u of l)a[u]=n[u];return a}export{T as r,z as u};
+import{a5 as x,r as d,a6 as C,a7 as b,a8 as O,a as m,Z as k,a9 as B,j as D,aa as H,N as M,ab as R,ac as A}from"./entry.Do8xnxHS.js";const E=n=>n==="defer"||n===!1;function z(...n){var h;const l=typeof n[n.length-1]=="string"?n.pop():void 0;typeof n[0]!="string"&&n.unshift(l);let[a,u,e={}]=n;if(typeof a!="string")throw new TypeError("[nuxt] [asyncData] key must be a string.");if(typeof u!="function")throw new TypeError("[nuxt] [asyncData] handler must be a function.");const t=D(),v=u,_=()=>null,g=()=>t.isHydrating?t.payload.data[a]:t.static.data[a];e.server=e.server??!0,e.default=e.default??_,e.getCachedData=e.getCachedData??g,e.lazy=e.lazy??!1,e.immediate=e.immediate??!0,e.deep=e.deep??x.deep,e.dedupe=e.dedupe??"cancel";const f=()=>![null,void 0].includes(e.getCachedData(a));if(!t._asyncData[a]||!e.immediate){(h=t.payload._errors)[a]??(h[a]=null);const o=e.deep?d:C;t._asyncData[a]={data:o(e.getCachedData(a)??e.default()),pending:d(!f()),error:b(t.payload._errors,a),status:d("idle")}}const s={...t._asyncData[a]};s.refresh=s.execute=(o={})=>{if(t._asyncDataPromises[a]){if(E(o.dedupe??e.dedupe))return t._asyncDataPromises[a];t._asyncDataPromises[a].cancelled=!0}if((o._initial||t.isHydrating&&o._initial!==!1)&&f())return Promise.resolve(e.getCachedData(a));s.pending.value=!0,s.status.value="pending";const c=new Promise((r,i)=>{try{r(v(t))}catch(w){i(w)}}).then(r=>{if(c.cancelled)return t._asyncDataPromises[a];let i=r;e.transform&&(i=e.transform(r)),e.pick&&(i=N(i,e.pick)),t.payload.data[a]=i,s.data.value=i,s.error.value=null,s.status.value="success"}).catch(r=>{if(c.cancelled)return t._asyncDataPromises[a];s.error.value=H(r),s.data.value=M(e.default()),s.status.value="error"}).finally(()=>{c.cancelled||(s.pending.value=!1,delete t._asyncDataPromises[a])});return t._asyncDataPromises[a]=c,t._asyncDataPromises[a]};const y=()=>s.refresh({_initial:!0}),P=e.server!==!1&&t.payload.serverRendered;{const o=R();if(o&&!o._nuxtOnBeforeMountCbs){o._nuxtOnBeforeMountCbs=[];const r=o._nuxtOnBeforeMountCbs;o&&(O(()=>{r.forEach(i=>{i()}),r.splice(0,r.length)}),m(()=>r.splice(0,r.length)))}P&&t.isHydrating&&(s.error.value||f())?(s.pending.value=!1,s.status.value=s.error.value?"error":"success"):o&&(t.payload.serverRendered&&t.isHydrating||e.lazy)&&e.immediate?o._nuxtOnBeforeMountCbs.push(y):e.immediate&&y(),e.watch&&k(e.watch,()=>s.refresh());const c=t.hook("app:data:refresh",async r=>{(!r||r.includes(a))&&await s.refresh()});o&&m(c)}const p=Promise.resolve(t._asyncDataPromises[a]).then(()=>s);return Object.assign(p,s),p}async function T(n){await new Promise(a=>B(a));const l=n?A(n):void 0;await D().hooks.callHookParallel("app:data:refresh",l)}function N(n,l){const a={};for(const u of l)a[u]=n[u];return a}export{T as r,z as u};
diff --git a/_nuxt/builds/latest.json b/_nuxt/builds/latest.json
index abf9812da2..71d449abbd 100644
--- a/_nuxt/builds/latest.json
+++ b/_nuxt/builds/latest.json
@@ -1 +1 @@
-{"id":"1362ce16-7e83-433f-9854-d1c79bedd190","timestamp":1714695123136}
\ No newline at end of file
+{"id":"1c6da812-7c87-438d-9470-666bc9df1046","timestamp":1714695620961}
\ No newline at end of file
diff --git a/_nuxt/builds/meta/1362ce16-7e83-433f-9854-d1c79bedd190.json b/_nuxt/builds/meta/1362ce16-7e83-433f-9854-d1c79bedd190.json
deleted file mode 100644
index d46a0551ee..0000000000
--- a/_nuxt/builds/meta/1362ce16-7e83-433f-9854-d1c79bedd190.json
+++ /dev/null
@@ -1 +0,0 @@
-{"id":"1362ce16-7e83-433f-9854-d1c79bedd190","timestamp":1714695123136,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":["/","/framework","/design-system/design/our-design-principles","/design-system/about/whos-it-for","/design-system/develop/getting-started","/design-system/design/getting-started","/design-system/about/what-is-ripple","/framework/key-concepts/nuxt-layers","/framework/guides/migrating","/framework/key-concepts/nuxt","/framework/key-concepts/api-endpoints","/framework/key-concepts/content-types","/framework/key-concepts/dynamic-components","/framework/core-modules","/framework/guides/brand-application","/framework/guides/new-sites","/framework/guides/dynamic-components","/framework/guides/creating-new-layers","/framework/guides/creating-content-types","/design-system/about/getting-support","/design-system/about/contributing","/design-system/design/design-tokens","/design-system/develop/contributing","/design-system/develop/theming","/design-system/develop/usage/vue","/design-system/develop/usage/webcomponents","/design-system/design/theming-guidance-for-designers","/design-system/develop/usage/nuxt","/design-system/develop/usage/access-to-github-packages","/design-system/develop/usage","/design-system/develop/usage/css-only","/design-system/styles/grid","/design-system/styles/focus-state","/design-system/styles/layout","/design-system/styles/logo","/design-system/styles/colour","/design-system/styles/layer-styles","/design-system/styles/icons","/design-system/styles/motion","/design-system/styles/spacing","/design-system/components/acknowledgment","/design-system/components/alert","/design-system/components/breadcrumb","/design-system/components/accordion","/design-system/components/block-quote","/design-system/components/button","/design-system/styles/typography","/design-system/components/call-to-action","/design-system/components/callout","/design-system/components/campaign-banner","/design-system/components/carousel","/design-system/components/card","/design-system/components/category-grid","/design-system/components/checkbox","/design-system/components/chip","/design-system/components/contact-us","/design-system/components/date-input","/design-system/components/file","/design-system/components/detail-list","/design-system/components/dropdown","/design-system/components/footer","/design-system/components/form-alert","/design-system/components/form","/design-system/components/in-page-navigation","/design-system/components/header","/design-system/components/key-dates","/design-system/components/input-field","/design-system/components/media","/design-system/components/media-embed","/design-system/components/media-fullscreen","/design-system/components/media-gallery","/design-system/components/option-button","/design-system/components/page-action","/design-system/components/pagination","/design-system/components/profile","/design-system/components/primary-navigation","/design-system/components/radio-button","/design-system/components/related-links","/design-system/components/skip-link","/design-system/components/results-listing","/design-system/components/search-bar","/design-system/components/social-share","/design-system/components/statistics-grid","/design-system/components/table","/design-system/components/tabs","/design-system/components/tag","/design-system/components/text-area","/design-system/components/timeline","/design-system/components/vertical-navigation"]}
\ No newline at end of file
diff --git a/_nuxt/builds/meta/1c6da812-7c87-438d-9470-666bc9df1046.json b/_nuxt/builds/meta/1c6da812-7c87-438d-9470-666bc9df1046.json
new file mode 100644
index 0000000000..5f889ce3bc
--- /dev/null
+++ b/_nuxt/builds/meta/1c6da812-7c87-438d-9470-666bc9df1046.json
@@ -0,0 +1 @@
+{"id":"1c6da812-7c87-438d-9470-666bc9df1046","timestamp":1714695620961,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":["/","/framework","/design-system/design/our-design-principles","/design-system/about/whos-it-for","/design-system/design/getting-started","/design-system/about/what-is-ripple","/design-system/develop/getting-started","/framework/key-concepts/nuxt","/framework/guides/migrating","/framework/key-concepts/nuxt-layers","/framework/key-concepts/api-endpoints","/framework/key-concepts/content-types","/framework/key-concepts/dynamic-components","/framework/core-modules","/design-system/about/getting-support","/framework/guides/brand-application","/framework/guides/new-sites","/framework/guides/dynamic-components","/framework/guides/creating-new-layers","/framework/guides/creating-content-types","/design-system/about/contributing","/design-system/design/design-tokens","/design-system/develop/contributing","/design-system/develop/theming","/design-system/develop/usage/nuxt","/design-system/develop/usage/vue","/design-system/design/theming-guidance-for-designers","/design-system/develop/usage/webcomponents","/design-system/develop/usage","/design-system/develop/usage/access-to-github-packages","/design-system/develop/usage/css-only","/design-system/styles/grid","/design-system/styles/layout","/design-system/styles/focus-state","/design-system/styles/logo","/design-system/styles/colour","/design-system/styles/layer-styles","/design-system/styles/icons","/design-system/styles/motion","/design-system/styles/spacing","/design-system/components/acknowledgment","/design-system/components/alert","/design-system/components/accordion","/design-system/components/block-quote","/design-system/components/breadcrumb","/design-system/components/button","/design-system/styles/typography","/design-system/components/call-to-action","/design-system/components/campaign-banner","/design-system/components/callout","/design-system/components/card","/design-system/components/carousel","/design-system/components/category-grid","/design-system/components/checkbox","/design-system/components/chip","/design-system/components/contact-us","/design-system/components/detail-list","/design-system/components/date-input","/design-system/components/file","/design-system/components/dropdown","/design-system/components/footer","/design-system/components/form","/design-system/components/form-alert","/design-system/components/header","/design-system/components/in-page-navigation","/design-system/components/input-field","/design-system/components/key-dates","/design-system/components/media","/design-system/components/media-fullscreen","/design-system/components/media-embed","/design-system/components/media-gallery","/design-system/components/option-button","/design-system/components/page-action","/design-system/components/pagination","/design-system/components/profile","/design-system/components/primary-navigation","/design-system/components/radio-button","/design-system/components/related-links","/design-system/components/results-listing","/design-system/components/search-bar","/design-system/components/skip-link","/design-system/components/social-share","/design-system/components/statistics-grid","/design-system/components/table","/design-system/components/tabs","/design-system/components/tag","/design-system/components/timeline","/design-system/components/text-area","/design-system/components/vertical-navigation"]}
\ No newline at end of file
diff --git a/_nuxt/client-db.W4pfov87.js b/_nuxt/client-db.lwmN9NLn.js
similarity index 99%
rename from _nuxt/client-db.W4pfov87.js
rename to _nuxt/client-db.lwmN9NLn.js
index 5922e868e2..d7a4784123 100644
--- a/_nuxt/client-db.W4pfov87.js
+++ b/_nuxt/client-db.lwmN9NLn.js
@@ -1 +1 @@
-import{au as _,aK as W,aL as j,aM as E,aN as B,aO as T,aP as $,aQ as P,aR as D,aj as k,ar as J,k as M,aS as H,av as U,aT as b,j as G}from"./entry.49ZHHvLB.js";import{c as Z}from"./_commonjsHelpers.5-cIlDoe.js";const q="memory",F=()=>{const t=new Map;return{name:q,options:{},hasItem(r){return t.has(r)},getItem(r){return t.get(r)??null},getItemRaw(r){return t.get(r)??null},setItem(r,n){t.set(r,n)},setItemRaw(r,n){t.set(r,n)},removeItem(r){t.delete(r)},getKeys(){return Array.from(t.keys())},clear(){t.clear()},dispose(){t.clear()}}};function V(t){return!t||typeof t.then!="function"?Promise.resolve(t):t}function p(t,...r){try{return V(t(...r))}catch(n){return Promise.reject(n)}}function Q(t){const r=typeof t;return t===null||r!=="object"&&r!=="function"}function X(t){const r=Object.getPrototypeOf(t);return!r||r.isPrototypeOf(Object)}function K(t){if(Q(t))return String(t);if(X(t)||Array.isArray(t))return JSON.stringify(t);if(typeof t.toJSON=="function")return K(t.toJSON());throw new Error("[unstorage] Cannot stringify value!")}function z(){if(typeof Buffer===void 0)throw new TypeError("[unstorage] Buffer is not supported!")}const C="base64:";function ee(t){if(typeof t=="string")return t;z();const r=Buffer.from(t).toString("base64");return C+r}function te(t){return typeof t!="string"||!t.startsWith(C)?t:(z(),Buffer.from(t.slice(C.length),"base64"))}const re=["hasItem","getItem","getItemRaw","setItem","setItemRaw","removeItem","getMeta","setMeta","removeMeta","getKeys","clear","mount","unmount"];function ne(t,r){if(r=A(r),!r)return t;const n={...t};for(const a of re)n[a]=(l="",...c)=>t[a](r+l,...c);return n.getKeys=(a="",...l)=>t.getKeys(r+a,...l).then(c=>c.map(o=>o.slice(r.length))),n}function d(t){return t?t.split("?")[0].replace(/[/\\]/g,":").replace(/:+/g,":").replace(/^:|:$/g,""):""}function ie(...t){return d(t.join(":"))}function A(t){return t=d(t),t?t+":":""}const ae="memory",se=()=>{const t=new Map;return{name:ae,options:{},hasItem(r){return t.has(r)},getItem(r){return t.get(r)??null},getItemRaw(r){return t.get(r)??null},setItem(r,n){t.set(r,n)},setItemRaw(r,n){t.set(r,n)},removeItem(r){t.delete(r)},getKeys(){return Array.from(t.keys())},clear(){t.clear()},dispose(){t.clear()}}};function oe(t={}){const r={mounts:{"":t.driver||se()},mountpoints:[""],watching:!1,watchListeners:[],unwatch:{}},n=e=>{for(const i of r.mountpoints)if(e.startsWith(i))return{base:i,relativeKey:e.slice(i.length),driver:r.mounts[i]};return{base:"",relativeKey:e,driver:r.mounts[""]}},a=(e,i)=>r.mountpoints.filter(s=>s.startsWith(e)||i&&e.startsWith(s)).map(s=>({relativeBase:e.length>s.length?e.slice(s.length):void 0,mountpoint:s,driver:r.mounts[s]})),l=(e,i)=>{if(r.watching){i=d(i);for(const s of r.watchListeners)s(e,i)}},c=async()=>{if(!r.watching){r.watching=!0;for(const e in r.mounts)r.unwatch[e]=await L(r.mounts[e],l,e)}},o=async()=>{if(r.watching){for(const e in r.unwatch)await r.unwatch[e]();r.unwatch={},r.watching=!1}},h=(e,i,s)=>{const u=new Map,f=m=>{let y=u.get(m.base);return y||(y={driver:m.driver,base:m.base,items:[]},u.set(m.base,y)),y};for(const m of e){const y=typeof m=="string",v=d(y?m:m.key),w=y?void 0:m.value,I=y||!m.options?i:{...i,...m.options},O=n(v);f(O).items.push({key:v,value:w,relativeKey:O.relativeKey,options:I})}return Promise.all([...u.values()].map(m=>s(m))).then(m=>m.flat())},g={hasItem(e,i={}){e=d(e);const{relativeKey:s,driver:u}=n(e);return p(u.hasItem,s,i)},getItem(e,i={}){e=d(e);const{relativeKey:s,driver:u}=n(e);return p(u.getItem,s,i).then(f=>_(f))},getItems(e,i){return h(e,i,s=>s.driver.getItems?p(s.driver.getItems,s.items.map(u=>({key:u.relativeKey,options:u.options})),i).then(u=>u.map(f=>({key:ie(s.base,f.key),value:_(f.value)}))):Promise.all(s.items.map(u=>p(s.driver.getItem,u.relativeKey,u.options).then(f=>({key:u.key,value:_(f)})))))},getItemRaw(e,i={}){e=d(e);const{relativeKey:s,driver:u}=n(e);return u.getItemRaw?p(u.getItemRaw,s,i):p(u.getItem,s,i).then(f=>te(f))},async setItem(e,i,s={}){if(i===void 0)return g.removeItem(e);e=d(e);const{relativeKey:u,driver:f}=n(e);f.setItem&&(await p(f.setItem,u,K(i),s),f.watch||l("update",e))},async setItems(e,i){await h(e,i,async s=>{s.driver.setItems&&await p(s.driver.setItems,s.items.map(u=>({key:u.relativeKey,value:K(u.value),options:u.options})),i),s.driver.setItem&&await Promise.all(s.items.map(u=>p(s.driver.setItem,u.relativeKey,K(u.value),u.options)))})},async setItemRaw(e,i,s={}){if(i===void 0)return g.removeItem(e,s);e=d(e);const{relativeKey:u,driver:f}=n(e);if(f.setItemRaw)await p(f.setItemRaw,u,i,s);else if(f.setItem)await p(f.setItem,u,ee(i),s);else return;f.watch||l("update",e)},async removeItem(e,i={}){typeof i=="boolean"&&(i={removeMeta:i}),e=d(e);const{relativeKey:s,driver:u}=n(e);u.removeItem&&(await p(u.removeItem,s,i),(i.removeMeta||i.removeMata)&&await p(u.removeItem,s+"$",i),u.watch||l("remove",e))},async getMeta(e,i={}){typeof i=="boolean"&&(i={nativeOnly:i}),e=d(e);const{relativeKey:s,driver:u}=n(e),f=Object.create(null);if(u.getMeta&&Object.assign(f,await p(u.getMeta,s,i)),!i.nativeOnly){const m=await p(u.getItem,s+"$",i).then(y=>_(y));m&&typeof m=="object"&&(typeof m.atime=="string"&&(m.atime=new Date(m.atime)),typeof m.mtime=="string"&&(m.mtime=new Date(m.mtime)),Object.assign(f,m))}return f},setMeta(e,i,s={}){return this.setItem(e+"$",i,s)},removeMeta(e,i={}){return this.removeItem(e+"$",i)},async getKeys(e,i={}){e=A(e);const s=a(e,!0);let u=[];const f=[];for(const m of s){const v=(await p(m.driver.getKeys,m.relativeBase,i)).map(w=>m.mountpoint+d(w)).filter(w=>!u.some(I=>w.startsWith(I)));f.push(...v),u=[m.mountpoint,...u.filter(w=>!w.startsWith(m.mountpoint))]}return e?f.filter(m=>m.startsWith(e)&&!m.endsWith("$")):f.filter(m=>!m.endsWith("$"))},async clear(e,i={}){e=A(e),await Promise.all(a(e,!1).map(async s=>{if(s.driver.clear)return p(s.driver.clear,s.relativeBase,i);if(s.driver.removeItem){const u=await s.driver.getKeys(s.relativeBase||"",i);return Promise.all(u.map(f=>s.driver.removeItem(f,i)))}}))},async dispose(){await Promise.all(Object.values(r.mounts).map(e=>x(e)))},async watch(e){return await c(),r.watchListeners.push(e),async()=>{r.watchListeners=r.watchListeners.filter(i=>i!==e),r.watchListeners.length===0&&await o()}},async unwatch(){r.watchListeners=[],await o()},mount(e,i){if(e=A(e),e&&r.mounts[e])throw new Error(`already mounted at ${e}`);return e&&(r.mountpoints.push(e),r.mountpoints.sort((s,u)=>u.length-s.length)),r.mounts[e]=i,r.watching&&Promise.resolve(L(i,l,e)).then(s=>{r.unwatch[e]=s}).catch(console.error),g},async unmount(e,i=!0){e=A(e),!(!e||!r.mounts[e])&&(r.watching&&e in r.unwatch&&(r.unwatch[e](),delete r.unwatch[e]),i&&await x(r.mounts[e]),r.mountpoints=r.mountpoints.filter(s=>s!==e),delete r.mounts[e])},getMount(e=""){e=d(e)+":";const i=n(e);return{driver:i.driver,base:i.base}},getMounts(e="",i={}){return e=d(e),a(e,i.parents).map(u=>({driver:u.driver,base:u.mountpoint}))}};return g}function L(t,r,n){return t.watch?t.watch((a,l)=>r(a,n+l)):()=>{}}async function x(t){typeof t.dispose=="function"&&await p(t.dispose)}function ue(t={}){const r=ce(n,t.operators);function n(a,l){return typeof l!="object"||l instanceof RegExp?r.$eq(a,l):Object.keys(l||{}).every(c=>{const o=l[c];if(c.startsWith("$")&&r[c]){const h=r[c];return typeof h=="function"?h(a,o):!1}return n(W(a,c),o)})}return n}function ce(t,r={}){return{$match:(n,a)=>t(n,a),$eq:(n,a)=>a instanceof RegExp?a.test(n):n===a,$ne:(n,a)=>a instanceof RegExp?!a.test(n):n!==a,$not:(n,a)=>!t(n,a),$and:(n,a)=>(j(a,"$and requires an array as condition"),a.every(l=>t(n,l))),$or:(n,a)=>(j(a,"$or requires an array as condition"),a.some(l=>t(n,l))),$in:(n,a)=>E(a).some(l=>Array.isArray(n)?t(n,{$contains:l}):t(n,l)),$contains:(n,a)=>(n=Array.isArray(n)?n:String(n),E(a).every(l=>n.includes(l))),$icontains:(n,a)=>{if(typeof a!="string")throw new TypeError("$icontains requires a string, use $contains instead");return n=String(n).toLocaleLowerCase(),E(a).every(l=>n.includes(l.toLocaleLowerCase()))},$containsAny:(n,a)=>(j(a,"$containsAny requires an array as condition"),n=Array.isArray(n)?n:String(n),a.some(l=>n.includes(l))),$exists:(n,a)=>a?typeof n<"u":typeof n>"u",$type:(n,a)=>typeof n===String(a),$regex:(n,a)=>{if(!(a instanceof RegExp)){const l=String(a).match(/\/(.*)\/([dgimsuy]*)$/);a=l?new RegExp(l[1],l[2]||""):new RegExp(a)}return a.test(String(n||""))},$lt:(n,a)=>n<a,$lte:(n,a)=>n<=a,$gt:(n,a)=>n>a,$gte:(n,a)=>n>=a,...r||{}}}function le(t){const r=ue(),n=(c,{query:o,before:h,after:g})=>{const e=typeof o=="string"?{_path:o}:o,i=c.findIndex(u=>r(u,e));h=h??1,g=g??1;const s=new Array(h+g).fill(null,0);return i===-1?s:s.map((u,f)=>c[i-h+f+ +(f>=h)]||null)},a=[(c,o)=>{const h=c.result.filter(g=>E(o.where).every(e=>r(g,e)));return{...c,result:h,total:h.length}},(c,o)=>E(o.sort).forEach(h=>T(c.result,h)),function(o,h,g){var e;if(h.surround){let i=n(((e=o.result)==null?void 0:e.length)===1?g:o.result,h.surround);i=$(P(h.without))(i),i=$(D(h.only))(i),o.surround=i}return o}],l=[(c,o)=>{if(o.skip)return{...c,result:c.result.slice(o.skip),skip:o.skip}},(c,o)=>{if(o.limit)return{...c,result:c.result.slice(0,o.limit),limit:o.limit}},function(o,h,g){var e,i,s;if(h.dirConfig){const u=((e=o.result[0])==null?void 0:e._path)||((s=(i=h.where)==null?void 0:i.find(f=>f._path))==null?void 0:s._path);if(typeof u=="string"){const f=g.find(m=>m._path===k(u,"_dir"));f&&(o.dirConfig={_path:f._path,...P(["_"])(f)})}}return o},(c,o)=>({...c,result:$(P(o.without))(c.result)}),(c,o)=>({...c,result:$(D(o.only))(c.result)})];return async c=>{const o=await t(),h=c.params(),g={result:o,limit:0,skip:0,total:o.length},e=a.reduce((s,u)=>u(s,h,o)||s,g);if(h.count)return{result:e.result.length};const i=l.reduce((s,u)=>u(s,h,o)||s,e);return h.first?{...B(["skip","limit","total"])(i),result:i.result[0]}:i}}function N(t){const r=le(t);return async n=>{var c;n.params().first&&n.withDirConfig();const a=n.params(),l=await r(n);return a.surround?l==null?void 0:l.surround:(l!=null&&l.dirConfig&&(l.result={_path:(c=l.dirConfig)==null?void 0:c._path,...l.result,_dir:l.dirConfig}),l==null?void 0:l.result)}}var fe={exports:{}};(function(t,r){(function(n,a,l){t.exports=l(),t.exports.default=l()})("slugify",Z,function(){var n=JSON.parse(`{"$":"dollar","%":"percent","&":"and","<":"less",">":"greater","|":"or","¢":"cent","£":"pound","¤":"currency","¥":"yen","©":"(c)","ª":"a","®":"(r)","º":"o","À":"A","Á":"A","Â":"A","Ã":"A","Ä":"A","Å":"A","Æ":"AE","Ç":"C","È":"E","É":"E","Ê":"E","Ë":"E","Ì":"I","Í":"I","Î":"I","Ï":"I","Ð":"D","Ñ":"N","Ò":"O","Ó":"O","Ô":"O","Õ":"O","Ö":"O","Ø":"O","Ù":"U","Ú":"U","Û":"U","Ü":"U","Ý":"Y","Þ":"TH","ß":"ss","à":"a","á":"a","â":"a","ã":"a","ä":"a","å":"a","æ":"ae","ç":"c","è":"e","é":"e","ê":"e","ë":"e","ì":"i","í":"i","î":"i","ï":"i","ð":"d","ñ":"n","ò":"o","ó":"o","ô":"o","õ":"o","ö":"o","ø":"o","ù":"u","ú":"u","û":"u","ü":"u","ý":"y","þ":"th","ÿ":"y","Ā":"A","ā":"a","Ă":"A","ă":"a","Ą":"A","ą":"a","Ć":"C","ć":"c","Č":"C","č":"c","Ď":"D","ď":"d","Đ":"DJ","đ":"dj","Ē":"E","ē":"e","Ė":"E","ė":"e","Ę":"e","ę":"e","Ě":"E","ě":"e","Ğ":"G","ğ":"g","Ģ":"G","ģ":"g","Ĩ":"I","ĩ":"i","Ī":"i","ī":"i","Į":"I","į":"i","İ":"I","ı":"i","Ķ":"k","ķ":"k","Ļ":"L","ļ":"l","Ľ":"L","ľ":"l","Ł":"L","ł":"l","Ń":"N","ń":"n","Ņ":"N","ņ":"n","Ň":"N","ň":"n","Ō":"O","ō":"o","Ő":"O","ő":"o","Œ":"OE","œ":"oe","Ŕ":"R","ŕ":"r","Ř":"R","ř":"r","Ś":"S","ś":"s","Ş":"S","ş":"s","Š":"S","š":"s","Ţ":"T","ţ":"t","Ť":"T","ť":"t","Ũ":"U","ũ":"u","Ū":"u","ū":"u","Ů":"U","ů":"u","Ű":"U","ű":"u","Ų":"U","ų":"u","Ŵ":"W","ŵ":"w","Ŷ":"Y","ŷ":"y","Ÿ":"Y","Ź":"Z","ź":"z","Ż":"Z","ż":"z","Ž":"Z","ž":"z","Ə":"E","ƒ":"f","Ơ":"O","ơ":"o","Ư":"U","ư":"u","Lj":"LJ","lj":"lj","Nj":"NJ","nj":"nj","Ș":"S","ș":"s","Ț":"T","ț":"t","ə":"e","˚":"o","Ά":"A","Έ":"E","Ή":"H","Ί":"I","Ό":"O","Ύ":"Y","Ώ":"W","ΐ":"i","Α":"A","Β":"B","Γ":"G","Δ":"D","Ε":"E","Ζ":"Z","Η":"H","Θ":"8","Ι":"I","Κ":"K","Λ":"L","Μ":"M","Ν":"N","Ξ":"3","Ο":"O","Π":"P","Ρ":"R","Σ":"S","Τ":"T","Υ":"Y","Φ":"F","Χ":"X","Ψ":"PS","Ω":"W","Ϊ":"I","Ϋ":"Y","ά":"a","έ":"e","ή":"h","ί":"i","ΰ":"y","α":"a","β":"b","γ":"g","δ":"d","ε":"e","ζ":"z","η":"h","θ":"8","ι":"i","κ":"k","λ":"l","μ":"m","ν":"n","ξ":"3","ο":"o","π":"p","ρ":"r","ς":"s","σ":"s","τ":"t","υ":"y","φ":"f","χ":"x","ψ":"ps","ω":"w","ϊ":"i","ϋ":"y","ό":"o","ύ":"y","ώ":"w","Ё":"Yo","Ђ":"DJ","Є":"Ye","І":"I","Ї":"Yi","Ј":"J","Љ":"LJ","Њ":"NJ","Ћ":"C","Џ":"DZ","А":"A","Б":"B","В":"V","Г":"G","Д":"D","Е":"E","Ж":"Zh","З":"Z","И":"I","Й":"J","К":"K","Л":"L","М":"M","Н":"N","О":"O","П":"P","Р":"R","С":"S","Т":"T","У":"U","Ф":"F","Х":"H","Ц":"C","Ч":"Ch","Ш":"Sh","Щ":"Sh","Ъ":"U","Ы":"Y","Ь":"","Э":"E","Ю":"Yu","Я":"Ya","а":"a","б":"b","в":"v","г":"g","д":"d","е":"e","ж":"zh","з":"z","и":"i","й":"j","к":"k","л":"l","м":"m","н":"n","о":"o","п":"p","р":"r","с":"s","т":"t","у":"u","ф":"f","х":"h","ц":"c","ч":"ch","ш":"sh","щ":"sh","ъ":"u","ы":"y","ь":"","э":"e","ю":"yu","я":"ya","ё":"yo","ђ":"dj","є":"ye","і":"i","ї":"yi","ј":"j","љ":"lj","њ":"nj","ћ":"c","ѝ":"u","џ":"dz","Ґ":"G","ґ":"g","Ғ":"GH","ғ":"gh","Қ":"KH","қ":"kh","Ң":"NG","ң":"ng","Ү":"UE","ү":"ue","Ұ":"U","ұ":"u","Һ":"H","һ":"h","Ә":"AE","ә":"ae","Ө":"OE","ө":"oe","Ա":"A","Բ":"B","Գ":"G","Դ":"D","Ե":"E","Զ":"Z","Է":"E'","Ը":"Y'","Թ":"T'","Ժ":"JH","Ի":"I","Լ":"L","Խ":"X","Ծ":"C'","Կ":"K","Հ":"H","Ձ":"D'","Ղ":"GH","Ճ":"TW","Մ":"M","Յ":"Y","Ն":"N","Շ":"SH","Չ":"CH","Պ":"P","Ջ":"J","Ռ":"R'","Ս":"S","Վ":"V","Տ":"T","Ր":"R","Ց":"C","Փ":"P'","Ք":"Q'","Օ":"O''","Ֆ":"F","և":"EV","ء":"a","آ":"aa","أ":"a","ؤ":"u","إ":"i","ئ":"e","ا":"a","ب":"b","ة":"h","ت":"t","ث":"th","ج":"j","ح":"h","خ":"kh","د":"d","ذ":"th","ر":"r","ز":"z","س":"s","ش":"sh","ص":"s","ض":"dh","ط":"t","ظ":"z","ع":"a","غ":"gh","ف":"f","ق":"q","ك":"k","ل":"l","م":"m","ن":"n","ه":"h","و":"w","ى":"a","ي":"y","ً":"an","ٌ":"on","ٍ":"en","َ":"a","ُ":"u","ِ":"e","ْ":"","٠":"0","١":"1","٢":"2","٣":"3","٤":"4","٥":"5","٦":"6","٧":"7","٨":"8","٩":"9","پ":"p","چ":"ch","ژ":"zh","ک":"k","گ":"g","ی":"y","۰":"0","۱":"1","۲":"2","۳":"3","۴":"4","۵":"5","۶":"6","۷":"7","۸":"8","۹":"9","฿":"baht","ა":"a","ბ":"b","გ":"g","დ":"d","ე":"e","ვ":"v","ზ":"z","თ":"t","ი":"i","კ":"k","ლ":"l","მ":"m","ნ":"n","ო":"o","პ":"p","ჟ":"zh","რ":"r","ს":"s","ტ":"t","უ":"u","ფ":"f","ქ":"k","ღ":"gh","ყ":"q","შ":"sh","ჩ":"ch","ც":"ts","ძ":"dz","წ":"ts","ჭ":"ch","ხ":"kh","ჯ":"j","ჰ":"h","Ṣ":"S","ṣ":"s","Ẁ":"W","ẁ":"w","Ẃ":"W","ẃ":"w","Ẅ":"W","ẅ":"w","ẞ":"SS","Ạ":"A","ạ":"a","Ả":"A","ả":"a","Ấ":"A","ấ":"a","Ầ":"A","ầ":"a","Ẩ":"A","ẩ":"a","Ẫ":"A","ẫ":"a","Ậ":"A","ậ":"a","Ắ":"A","ắ":"a","Ằ":"A","ằ":"a","Ẳ":"A","ẳ":"a","Ẵ":"A","ẵ":"a","Ặ":"A","ặ":"a","Ẹ":"E","ẹ":"e","Ẻ":"E","ẻ":"e","Ẽ":"E","ẽ":"e","Ế":"E","ế":"e","Ề":"E","ề":"e","Ể":"E","ể":"e","Ễ":"E","ễ":"e","Ệ":"E","ệ":"e","Ỉ":"I","ỉ":"i","Ị":"I","ị":"i","Ọ":"O","ọ":"o","Ỏ":"O","ỏ":"o","Ố":"O","ố":"o","Ồ":"O","ồ":"o","Ổ":"O","ổ":"o","Ỗ":"O","ỗ":"o","Ộ":"O","ộ":"o","Ớ":"O","ớ":"o","Ờ":"O","ờ":"o","Ở":"O","ở":"o","Ỡ":"O","ỡ":"o","Ợ":"O","ợ":"o","Ụ":"U","ụ":"u","Ủ":"U","ủ":"u","Ứ":"U","ứ":"u","Ừ":"U","ừ":"u","Ử":"U","ử":"u","Ữ":"U","ữ":"u","Ự":"U","ự":"u","Ỳ":"Y","ỳ":"y","Ỵ":"Y","ỵ":"y","Ỷ":"Y","ỷ":"y","Ỹ":"Y","ỹ":"y","–":"-","‘":"'","’":"'","“":"\\"","”":"\\"","„":"\\"","†":"+","•":"*","…":"...","₠":"ecu","₢":"cruzeiro","₣":"french franc","₤":"lira","₥":"mill","₦":"naira","₧":"peseta","₨":"rupee","₩":"won","₪":"new shequel","₫":"dong","€":"euro","₭":"kip","₮":"tugrik","₯":"drachma","₰":"penny","₱":"peso","₲":"guarani","₳":"austral","₴":"hryvnia","₵":"cedi","₸":"kazakhstani tenge","₹":"indian rupee","₺":"turkish lira","₽":"russian ruble","₿":"bitcoin","℠":"sm","™":"tm","∂":"d","∆":"delta","∑":"sum","∞":"infinity","♥":"love","元":"yuan","円":"yen","﷼":"rial","ﻵ":"laa","ﻷ":"laa","ﻹ":"lai","ﻻ":"la"}`),a=JSON.parse('{"bg":{"Й":"Y","Ц":"Ts","Щ":"Sht","Ъ":"A","Ь":"Y","й":"y","ц":"ts","щ":"sht","ъ":"a","ь":"y"},"de":{"Ä":"AE","ä":"ae","Ö":"OE","ö":"oe","Ü":"UE","ü":"ue","ß":"ss","%":"prozent","&":"und","|":"oder","∑":"summe","∞":"unendlich","♥":"liebe"},"es":{"%":"por ciento","&":"y","<":"menor que",">":"mayor que","|":"o","¢":"centavos","£":"libras","¤":"moneda","₣":"francos","∑":"suma","∞":"infinito","♥":"amor"},"fr":{"%":"pourcent","&":"et","<":"plus petit",">":"plus grand","|":"ou","¢":"centime","£":"livre","¤":"devise","₣":"franc","∑":"somme","∞":"infini","♥":"amour"},"pt":{"%":"porcento","&":"e","<":"menor",">":"maior","|":"ou","¢":"centavo","∑":"soma","£":"libra","∞":"infinito","♥":"amor"},"uk":{"И":"Y","и":"y","Й":"Y","й":"y","Ц":"Ts","ц":"ts","Х":"Kh","х":"kh","Щ":"Shch","щ":"shch","Г":"H","г":"h"},"vi":{"Đ":"D","đ":"d"},"da":{"Ø":"OE","ø":"oe","Å":"AA","å":"aa","%":"procent","&":"og","|":"eller","$":"dollar","<":"mindre end",">":"større end"},"nb":{"&":"og","Å":"AA","Æ":"AE","Ø":"OE","å":"aa","æ":"ae","ø":"oe"},"it":{"&":"e"},"nl":{"&":"en"},"sv":{"&":"och","Å":"AA","Ä":"AE","Ö":"OE","å":"aa","ä":"ae","ö":"oe"}}');function l(c,o){if(typeof c!="string")throw new Error("slugify: string argument expected");o=typeof o=="string"?{replacement:o}:o||{};var h=a[o.locale]||{},g=o.replacement===void 0?"-":o.replacement,e=o.trim===void 0?!0:o.trim,i=c.normalize().split("").reduce(function(s,u){var f=h[u];return f===void 0&&(f=n[u]),f===void 0&&(f=u),f===g&&(f=" "),s+f.replace(o.remove||/[^\w\s$*_+~.()'"!\-:@]+/g,"")},"");return o.strict&&(i=i.replace(/[^A-Za-z0-9\s]/g,"")),e&&(i=i.trim()),i=i.replace(/\s+/g,g),o.lower&&(i=i.toLowerCase()),i}return l.extend=function(c){Object.assign(n,c)},l})})(fe);const me=t=>t.split(/[\s-]/g).map(J).join(" ");function he(t,r){const{navigation:n}=M().public.content;if(n===!1)return[];const a=c=>({...pe(["title",...n.fields])(c),...de(c==null?void 0:c.navigation)?c.navigation:{}}),l=t.sort((c,o)=>c._path.localeCompare(o._path)).reduce((c,o)=>{const h=o._path.substring(1).split("/"),g=o._id.split(":").slice(1),e=!!g[g.length-1].match(/([1-9][0-9]*\.)?index.md/g),i=f=>({title:f.title,_path:f._path,_file:f._file,children:[],...a(f),...f._draft?{_draft:!0}:{}}),s=i(o);if(e){const f=r[s._path];if(typeof(f==null?void 0:f.navigation)<"u"&&!(f!=null&&f.navigation))return c;if(o._path!=="/"){const m=i(o);s.children.push(m)}Object.assign(s,a(f))}return h.length===1?(c.push(s),c):(h.slice(0,-1).reduce((f,m,y)=>{const v="/"+h.slice(0,y+1).join("/"),w=r[v];if(typeof(w==null?void 0:w.navigation)<"u"&&!w.navigation)return[];let I=f.find(O=>O._path===v);return I||(I={title:me(m),_path:v,_file:o._file,children:[],...a(w)},f.push(I)),I.children},c).push(s),c)},[]);return Y(l)}const ge=new Intl.Collator(void 0,{numeric:!0,sensitivity:"base"});function Y(t){var n;t.forEach(a=>{a._file=a._file.split(".").slice(0,-1).join(".")});const r=t.sort((a,l)=>ge.compare(a._file,l._file));for(const a of r)(n=a.children)!=null&&n.length?Y(a.children):delete a.children,delete a._file;return t}function pe(t){return r=>(r=r||{},t&&t.length?t.filter(n=>typeof r[n]<"u").reduce((n,a)=>Object.assign(n,{[a]:r[a]}),{}):r)}function de(t){return Object.prototype.toString.call(t)==="[object Object]"}const ye=t=>b(t,M().public.content.api.baseURL),we=ne(oe({driver:F()}),"@content");function ve(t){async function r(){const n=new Set(await t.getKeys("cache:")),a=U().getPreviewToken();if(a){const c=await t.getItem(`${a}$`).then(g=>g||{});if(Array.isArray(c.ignoreSources)){const g=c.ignoreSources.map(e=>`cache:${e.trim()}:`);for(const e of n)g.some(i=>e.startsWith(i))&&n.delete(e)}const o=await t.getKeys(`${a}:`),h=await Promise.all(o.map(g=>t.getItem(g)));for(const g of h)n.delete(`cache:${g._id}`),g.__deleted||n.add(`${a}:${g._id}`)}return await Promise.all(Array.from(n).map(c=>t.getItem(c)))}return{storage:t,fetch:N(r),query:n=>H(N(r),{initialParams:n,legacy:!0})}}let R=null,S=null;async function Ie(){return S?await S:R||(S=Ae(),R=await S),R}async function Ae(){const t=G(),{content:r}=M().public,n=ve(we),a=await n.storage.getItem("integrity");if(r.integrity!==+(a||0)){const{contents:l,navigation:c}=await $fetch(ye(r.integrity?`cache.${r.integrity}.json`:"cache.json"));await Promise.all(l.map(o=>n.storage.setItem(`cache:${o._id}`,o))),await n.storage.setItem("navigation",c),await n.storage.setItem("integrity",r.integrity)}return await t.callHook("content:storage",n.storage),n}async function _e(t){const r=await Ie();if(!U().getPreviewToken()&&Object.keys(t||{}).length===0)return r.storage.getItem("navigation");const n=await r.query(t).where({_partial:!1,navigation:{$ne:!1}}).find(),l=(await r.query().where({_path:/\/_dir$/i,_partial:!0}).find()).reduce((c,o)=>{var g;((g=o.title)==null?void 0:g.toLowerCase())==="dir"&&(o.title=void 0);const h=o._path.split("/").slice(0,-1).join("/")||"/";return c[h]={...o,...o.body},c},{});return he(n,l)}export{we as contentStorage,ve as createDB,_e as generateNavigation,Ie as useContentDatabase};
+import{au as _,aK as W,aL as j,aM as E,aN as B,aO as T,aP as $,aQ as P,aR as D,aj as k,ar as J,k as M,aS as H,av as U,aT as b,j as G}from"./entry.Do8xnxHS.js";import{c as Z}from"./_commonjsHelpers.5-cIlDoe.js";const q="memory",F=()=>{const t=new Map;return{name:q,options:{},hasItem(r){return t.has(r)},getItem(r){return t.get(r)??null},getItemRaw(r){return t.get(r)??null},setItem(r,n){t.set(r,n)},setItemRaw(r,n){t.set(r,n)},removeItem(r){t.delete(r)},getKeys(){return Array.from(t.keys())},clear(){t.clear()},dispose(){t.clear()}}};function V(t){return!t||typeof t.then!="function"?Promise.resolve(t):t}function p(t,...r){try{return V(t(...r))}catch(n){return Promise.reject(n)}}function Q(t){const r=typeof t;return t===null||r!=="object"&&r!=="function"}function X(t){const r=Object.getPrototypeOf(t);return!r||r.isPrototypeOf(Object)}function K(t){if(Q(t))return String(t);if(X(t)||Array.isArray(t))return JSON.stringify(t);if(typeof t.toJSON=="function")return K(t.toJSON());throw new Error("[unstorage] Cannot stringify value!")}function z(){if(typeof Buffer===void 0)throw new TypeError("[unstorage] Buffer is not supported!")}const C="base64:";function ee(t){if(typeof t=="string")return t;z();const r=Buffer.from(t).toString("base64");return C+r}function te(t){return typeof t!="string"||!t.startsWith(C)?t:(z(),Buffer.from(t.slice(C.length),"base64"))}const re=["hasItem","getItem","getItemRaw","setItem","setItemRaw","removeItem","getMeta","setMeta","removeMeta","getKeys","clear","mount","unmount"];function ne(t,r){if(r=A(r),!r)return t;const n={...t};for(const a of re)n[a]=(l="",...c)=>t[a](r+l,...c);return n.getKeys=(a="",...l)=>t.getKeys(r+a,...l).then(c=>c.map(o=>o.slice(r.length))),n}function d(t){return t?t.split("?")[0].replace(/[/\\]/g,":").replace(/:+/g,":").replace(/^:|:$/g,""):""}function ie(...t){return d(t.join(":"))}function A(t){return t=d(t),t?t+":":""}const ae="memory",se=()=>{const t=new Map;return{name:ae,options:{},hasItem(r){return t.has(r)},getItem(r){return t.get(r)??null},getItemRaw(r){return t.get(r)??null},setItem(r,n){t.set(r,n)},setItemRaw(r,n){t.set(r,n)},removeItem(r){t.delete(r)},getKeys(){return Array.from(t.keys())},clear(){t.clear()},dispose(){t.clear()}}};function oe(t={}){const r={mounts:{"":t.driver||se()},mountpoints:[""],watching:!1,watchListeners:[],unwatch:{}},n=e=>{for(const i of r.mountpoints)if(e.startsWith(i))return{base:i,relativeKey:e.slice(i.length),driver:r.mounts[i]};return{base:"",relativeKey:e,driver:r.mounts[""]}},a=(e,i)=>r.mountpoints.filter(s=>s.startsWith(e)||i&&e.startsWith(s)).map(s=>({relativeBase:e.length>s.length?e.slice(s.length):void 0,mountpoint:s,driver:r.mounts[s]})),l=(e,i)=>{if(r.watching){i=d(i);for(const s of r.watchListeners)s(e,i)}},c=async()=>{if(!r.watching){r.watching=!0;for(const e in r.mounts)r.unwatch[e]=await L(r.mounts[e],l,e)}},o=async()=>{if(r.watching){for(const e in r.unwatch)await r.unwatch[e]();r.unwatch={},r.watching=!1}},h=(e,i,s)=>{const u=new Map,f=m=>{let y=u.get(m.base);return y||(y={driver:m.driver,base:m.base,items:[]},u.set(m.base,y)),y};for(const m of e){const y=typeof m=="string",v=d(y?m:m.key),w=y?void 0:m.value,I=y||!m.options?i:{...i,...m.options},O=n(v);f(O).items.push({key:v,value:w,relativeKey:O.relativeKey,options:I})}return Promise.all([...u.values()].map(m=>s(m))).then(m=>m.flat())},g={hasItem(e,i={}){e=d(e);const{relativeKey:s,driver:u}=n(e);return p(u.hasItem,s,i)},getItem(e,i={}){e=d(e);const{relativeKey:s,driver:u}=n(e);return p(u.getItem,s,i).then(f=>_(f))},getItems(e,i){return h(e,i,s=>s.driver.getItems?p(s.driver.getItems,s.items.map(u=>({key:u.relativeKey,options:u.options})),i).then(u=>u.map(f=>({key:ie(s.base,f.key),value:_(f.value)}))):Promise.all(s.items.map(u=>p(s.driver.getItem,u.relativeKey,u.options).then(f=>({key:u.key,value:_(f)})))))},getItemRaw(e,i={}){e=d(e);const{relativeKey:s,driver:u}=n(e);return u.getItemRaw?p(u.getItemRaw,s,i):p(u.getItem,s,i).then(f=>te(f))},async setItem(e,i,s={}){if(i===void 0)return g.removeItem(e);e=d(e);const{relativeKey:u,driver:f}=n(e);f.setItem&&(await p(f.setItem,u,K(i),s),f.watch||l("update",e))},async setItems(e,i){await h(e,i,async s=>{s.driver.setItems&&await p(s.driver.setItems,s.items.map(u=>({key:u.relativeKey,value:K(u.value),options:u.options})),i),s.driver.setItem&&await Promise.all(s.items.map(u=>p(s.driver.setItem,u.relativeKey,K(u.value),u.options)))})},async setItemRaw(e,i,s={}){if(i===void 0)return g.removeItem(e,s);e=d(e);const{relativeKey:u,driver:f}=n(e);if(f.setItemRaw)await p(f.setItemRaw,u,i,s);else if(f.setItem)await p(f.setItem,u,ee(i),s);else return;f.watch||l("update",e)},async removeItem(e,i={}){typeof i=="boolean"&&(i={removeMeta:i}),e=d(e);const{relativeKey:s,driver:u}=n(e);u.removeItem&&(await p(u.removeItem,s,i),(i.removeMeta||i.removeMata)&&await p(u.removeItem,s+"$",i),u.watch||l("remove",e))},async getMeta(e,i={}){typeof i=="boolean"&&(i={nativeOnly:i}),e=d(e);const{relativeKey:s,driver:u}=n(e),f=Object.create(null);if(u.getMeta&&Object.assign(f,await p(u.getMeta,s,i)),!i.nativeOnly){const m=await p(u.getItem,s+"$",i).then(y=>_(y));m&&typeof m=="object"&&(typeof m.atime=="string"&&(m.atime=new Date(m.atime)),typeof m.mtime=="string"&&(m.mtime=new Date(m.mtime)),Object.assign(f,m))}return f},setMeta(e,i,s={}){return this.setItem(e+"$",i,s)},removeMeta(e,i={}){return this.removeItem(e+"$",i)},async getKeys(e,i={}){e=A(e);const s=a(e,!0);let u=[];const f=[];for(const m of s){const v=(await p(m.driver.getKeys,m.relativeBase,i)).map(w=>m.mountpoint+d(w)).filter(w=>!u.some(I=>w.startsWith(I)));f.push(...v),u=[m.mountpoint,...u.filter(w=>!w.startsWith(m.mountpoint))]}return e?f.filter(m=>m.startsWith(e)&&!m.endsWith("$")):f.filter(m=>!m.endsWith("$"))},async clear(e,i={}){e=A(e),await Promise.all(a(e,!1).map(async s=>{if(s.driver.clear)return p(s.driver.clear,s.relativeBase,i);if(s.driver.removeItem){const u=await s.driver.getKeys(s.relativeBase||"",i);return Promise.all(u.map(f=>s.driver.removeItem(f,i)))}}))},async dispose(){await Promise.all(Object.values(r.mounts).map(e=>x(e)))},async watch(e){return await c(),r.watchListeners.push(e),async()=>{r.watchListeners=r.watchListeners.filter(i=>i!==e),r.watchListeners.length===0&&await o()}},async unwatch(){r.watchListeners=[],await o()},mount(e,i){if(e=A(e),e&&r.mounts[e])throw new Error(`already mounted at ${e}`);return e&&(r.mountpoints.push(e),r.mountpoints.sort((s,u)=>u.length-s.length)),r.mounts[e]=i,r.watching&&Promise.resolve(L(i,l,e)).then(s=>{r.unwatch[e]=s}).catch(console.error),g},async unmount(e,i=!0){e=A(e),!(!e||!r.mounts[e])&&(r.watching&&e in r.unwatch&&(r.unwatch[e](),delete r.unwatch[e]),i&&await x(r.mounts[e]),r.mountpoints=r.mountpoints.filter(s=>s!==e),delete r.mounts[e])},getMount(e=""){e=d(e)+":";const i=n(e);return{driver:i.driver,base:i.base}},getMounts(e="",i={}){return e=d(e),a(e,i.parents).map(u=>({driver:u.driver,base:u.mountpoint}))}};return g}function L(t,r,n){return t.watch?t.watch((a,l)=>r(a,n+l)):()=>{}}async function x(t){typeof t.dispose=="function"&&await p(t.dispose)}function ue(t={}){const r=ce(n,t.operators);function n(a,l){return typeof l!="object"||l instanceof RegExp?r.$eq(a,l):Object.keys(l||{}).every(c=>{const o=l[c];if(c.startsWith("$")&&r[c]){const h=r[c];return typeof h=="function"?h(a,o):!1}return n(W(a,c),o)})}return n}function ce(t,r={}){return{$match:(n,a)=>t(n,a),$eq:(n,a)=>a instanceof RegExp?a.test(n):n===a,$ne:(n,a)=>a instanceof RegExp?!a.test(n):n!==a,$not:(n,a)=>!t(n,a),$and:(n,a)=>(j(a,"$and requires an array as condition"),a.every(l=>t(n,l))),$or:(n,a)=>(j(a,"$or requires an array as condition"),a.some(l=>t(n,l))),$in:(n,a)=>E(a).some(l=>Array.isArray(n)?t(n,{$contains:l}):t(n,l)),$contains:(n,a)=>(n=Array.isArray(n)?n:String(n),E(a).every(l=>n.includes(l))),$icontains:(n,a)=>{if(typeof a!="string")throw new TypeError("$icontains requires a string, use $contains instead");return n=String(n).toLocaleLowerCase(),E(a).every(l=>n.includes(l.toLocaleLowerCase()))},$containsAny:(n,a)=>(j(a,"$containsAny requires an array as condition"),n=Array.isArray(n)?n:String(n),a.some(l=>n.includes(l))),$exists:(n,a)=>a?typeof n<"u":typeof n>"u",$type:(n,a)=>typeof n===String(a),$regex:(n,a)=>{if(!(a instanceof RegExp)){const l=String(a).match(/\/(.*)\/([dgimsuy]*)$/);a=l?new RegExp(l[1],l[2]||""):new RegExp(a)}return a.test(String(n||""))},$lt:(n,a)=>n<a,$lte:(n,a)=>n<=a,$gt:(n,a)=>n>a,$gte:(n,a)=>n>=a,...r||{}}}function le(t){const r=ue(),n=(c,{query:o,before:h,after:g})=>{const e=typeof o=="string"?{_path:o}:o,i=c.findIndex(u=>r(u,e));h=h??1,g=g??1;const s=new Array(h+g).fill(null,0);return i===-1?s:s.map((u,f)=>c[i-h+f+ +(f>=h)]||null)},a=[(c,o)=>{const h=c.result.filter(g=>E(o.where).every(e=>r(g,e)));return{...c,result:h,total:h.length}},(c,o)=>E(o.sort).forEach(h=>T(c.result,h)),function(o,h,g){var e;if(h.surround){let i=n(((e=o.result)==null?void 0:e.length)===1?g:o.result,h.surround);i=$(P(h.without))(i),i=$(D(h.only))(i),o.surround=i}return o}],l=[(c,o)=>{if(o.skip)return{...c,result:c.result.slice(o.skip),skip:o.skip}},(c,o)=>{if(o.limit)return{...c,result:c.result.slice(0,o.limit),limit:o.limit}},function(o,h,g){var e,i,s;if(h.dirConfig){const u=((e=o.result[0])==null?void 0:e._path)||((s=(i=h.where)==null?void 0:i.find(f=>f._path))==null?void 0:s._path);if(typeof u=="string"){const f=g.find(m=>m._path===k(u,"_dir"));f&&(o.dirConfig={_path:f._path,...P(["_"])(f)})}}return o},(c,o)=>({...c,result:$(P(o.without))(c.result)}),(c,o)=>({...c,result:$(D(o.only))(c.result)})];return async c=>{const o=await t(),h=c.params(),g={result:o,limit:0,skip:0,total:o.length},e=a.reduce((s,u)=>u(s,h,o)||s,g);if(h.count)return{result:e.result.length};const i=l.reduce((s,u)=>u(s,h,o)||s,e);return h.first?{...B(["skip","limit","total"])(i),result:i.result[0]}:i}}function N(t){const r=le(t);return async n=>{var c;n.params().first&&n.withDirConfig();const a=n.params(),l=await r(n);return a.surround?l==null?void 0:l.surround:(l!=null&&l.dirConfig&&(l.result={_path:(c=l.dirConfig)==null?void 0:c._path,...l.result,_dir:l.dirConfig}),l==null?void 0:l.result)}}var fe={exports:{}};(function(t,r){(function(n,a,l){t.exports=l(),t.exports.default=l()})("slugify",Z,function(){var n=JSON.parse(`{"$":"dollar","%":"percent","&":"and","<":"less",">":"greater","|":"or","¢":"cent","£":"pound","¤":"currency","¥":"yen","©":"(c)","ª":"a","®":"(r)","º":"o","À":"A","Á":"A","Â":"A","Ã":"A","Ä":"A","Å":"A","Æ":"AE","Ç":"C","È":"E","É":"E","Ê":"E","Ë":"E","Ì":"I","Í":"I","Î":"I","Ï":"I","Ð":"D","Ñ":"N","Ò":"O","Ó":"O","Ô":"O","Õ":"O","Ö":"O","Ø":"O","Ù":"U","Ú":"U","Û":"U","Ü":"U","Ý":"Y","Þ":"TH","ß":"ss","à":"a","á":"a","â":"a","ã":"a","ä":"a","å":"a","æ":"ae","ç":"c","è":"e","é":"e","ê":"e","ë":"e","ì":"i","í":"i","î":"i","ï":"i","ð":"d","ñ":"n","ò":"o","ó":"o","ô":"o","õ":"o","ö":"o","ø":"o","ù":"u","ú":"u","û":"u","ü":"u","ý":"y","þ":"th","ÿ":"y","Ā":"A","ā":"a","Ă":"A","ă":"a","Ą":"A","ą":"a","Ć":"C","ć":"c","Č":"C","č":"c","Ď":"D","ď":"d","Đ":"DJ","đ":"dj","Ē":"E","ē":"e","Ė":"E","ė":"e","Ę":"e","ę":"e","Ě":"E","ě":"e","Ğ":"G","ğ":"g","Ģ":"G","ģ":"g","Ĩ":"I","ĩ":"i","Ī":"i","ī":"i","Į":"I","į":"i","İ":"I","ı":"i","Ķ":"k","ķ":"k","Ļ":"L","ļ":"l","Ľ":"L","ľ":"l","Ł":"L","ł":"l","Ń":"N","ń":"n","Ņ":"N","ņ":"n","Ň":"N","ň":"n","Ō":"O","ō":"o","Ő":"O","ő":"o","Œ":"OE","œ":"oe","Ŕ":"R","ŕ":"r","Ř":"R","ř":"r","Ś":"S","ś":"s","Ş":"S","ş":"s","Š":"S","š":"s","Ţ":"T","ţ":"t","Ť":"T","ť":"t","Ũ":"U","ũ":"u","Ū":"u","ū":"u","Ů":"U","ů":"u","Ű":"U","ű":"u","Ų":"U","ų":"u","Ŵ":"W","ŵ":"w","Ŷ":"Y","ŷ":"y","Ÿ":"Y","Ź":"Z","ź":"z","Ż":"Z","ż":"z","Ž":"Z","ž":"z","Ə":"E","ƒ":"f","Ơ":"O","ơ":"o","Ư":"U","ư":"u","Lj":"LJ","lj":"lj","Nj":"NJ","nj":"nj","Ș":"S","ș":"s","Ț":"T","ț":"t","ə":"e","˚":"o","Ά":"A","Έ":"E","Ή":"H","Ί":"I","Ό":"O","Ύ":"Y","Ώ":"W","ΐ":"i","Α":"A","Β":"B","Γ":"G","Δ":"D","Ε":"E","Ζ":"Z","Η":"H","Θ":"8","Ι":"I","Κ":"K","Λ":"L","Μ":"M","Ν":"N","Ξ":"3","Ο":"O","Π":"P","Ρ":"R","Σ":"S","Τ":"T","Υ":"Y","Φ":"F","Χ":"X","Ψ":"PS","Ω":"W","Ϊ":"I","Ϋ":"Y","ά":"a","έ":"e","ή":"h","ί":"i","ΰ":"y","α":"a","β":"b","γ":"g","δ":"d","ε":"e","ζ":"z","η":"h","θ":"8","ι":"i","κ":"k","λ":"l","μ":"m","ν":"n","ξ":"3","ο":"o","π":"p","ρ":"r","ς":"s","σ":"s","τ":"t","υ":"y","φ":"f","χ":"x","ψ":"ps","ω":"w","ϊ":"i","ϋ":"y","ό":"o","ύ":"y","ώ":"w","Ё":"Yo","Ђ":"DJ","Є":"Ye","І":"I","Ї":"Yi","Ј":"J","Љ":"LJ","Њ":"NJ","Ћ":"C","Џ":"DZ","А":"A","Б":"B","В":"V","Г":"G","Д":"D","Е":"E","Ж":"Zh","З":"Z","И":"I","Й":"J","К":"K","Л":"L","М":"M","Н":"N","О":"O","П":"P","Р":"R","С":"S","Т":"T","У":"U","Ф":"F","Х":"H","Ц":"C","Ч":"Ch","Ш":"Sh","Щ":"Sh","Ъ":"U","Ы":"Y","Ь":"","Э":"E","Ю":"Yu","Я":"Ya","а":"a","б":"b","в":"v","г":"g","д":"d","е":"e","ж":"zh","з":"z","и":"i","й":"j","к":"k","л":"l","м":"m","н":"n","о":"o","п":"p","р":"r","с":"s","т":"t","у":"u","ф":"f","х":"h","ц":"c","ч":"ch","ш":"sh","щ":"sh","ъ":"u","ы":"y","ь":"","э":"e","ю":"yu","я":"ya","ё":"yo","ђ":"dj","є":"ye","і":"i","ї":"yi","ј":"j","љ":"lj","њ":"nj","ћ":"c","ѝ":"u","џ":"dz","Ґ":"G","ґ":"g","Ғ":"GH","ғ":"gh","Қ":"KH","қ":"kh","Ң":"NG","ң":"ng","Ү":"UE","ү":"ue","Ұ":"U","ұ":"u","Һ":"H","һ":"h","Ә":"AE","ә":"ae","Ө":"OE","ө":"oe","Ա":"A","Բ":"B","Գ":"G","Դ":"D","Ե":"E","Զ":"Z","Է":"E'","Ը":"Y'","Թ":"T'","Ժ":"JH","Ի":"I","Լ":"L","Խ":"X","Ծ":"C'","Կ":"K","Հ":"H","Ձ":"D'","Ղ":"GH","Ճ":"TW","Մ":"M","Յ":"Y","Ն":"N","Շ":"SH","Չ":"CH","Պ":"P","Ջ":"J","Ռ":"R'","Ս":"S","Վ":"V","Տ":"T","Ր":"R","Ց":"C","Փ":"P'","Ք":"Q'","Օ":"O''","Ֆ":"F","և":"EV","ء":"a","آ":"aa","أ":"a","ؤ":"u","إ":"i","ئ":"e","ا":"a","ب":"b","ة":"h","ت":"t","ث":"th","ج":"j","ح":"h","خ":"kh","د":"d","ذ":"th","ر":"r","ز":"z","س":"s","ش":"sh","ص":"s","ض":"dh","ط":"t","ظ":"z","ع":"a","غ":"gh","ف":"f","ق":"q","ك":"k","ل":"l","م":"m","ن":"n","ه":"h","و":"w","ى":"a","ي":"y","ً":"an","ٌ":"on","ٍ":"en","َ":"a","ُ":"u","ِ":"e","ْ":"","٠":"0","١":"1","٢":"2","٣":"3","٤":"4","٥":"5","٦":"6","٧":"7","٨":"8","٩":"9","پ":"p","چ":"ch","ژ":"zh","ک":"k","گ":"g","ی":"y","۰":"0","۱":"1","۲":"2","۳":"3","۴":"4","۵":"5","۶":"6","۷":"7","۸":"8","۹":"9","฿":"baht","ა":"a","ბ":"b","გ":"g","დ":"d","ე":"e","ვ":"v","ზ":"z","თ":"t","ი":"i","კ":"k","ლ":"l","მ":"m","ნ":"n","ო":"o","პ":"p","ჟ":"zh","რ":"r","ს":"s","ტ":"t","უ":"u","ფ":"f","ქ":"k","ღ":"gh","ყ":"q","შ":"sh","ჩ":"ch","ც":"ts","ძ":"dz","წ":"ts","ჭ":"ch","ხ":"kh","ჯ":"j","ჰ":"h","Ṣ":"S","ṣ":"s","Ẁ":"W","ẁ":"w","Ẃ":"W","ẃ":"w","Ẅ":"W","ẅ":"w","ẞ":"SS","Ạ":"A","ạ":"a","Ả":"A","ả":"a","Ấ":"A","ấ":"a","Ầ":"A","ầ":"a","Ẩ":"A","ẩ":"a","Ẫ":"A","ẫ":"a","Ậ":"A","ậ":"a","Ắ":"A","ắ":"a","Ằ":"A","ằ":"a","Ẳ":"A","ẳ":"a","Ẵ":"A","ẵ":"a","Ặ":"A","ặ":"a","Ẹ":"E","ẹ":"e","Ẻ":"E","ẻ":"e","Ẽ":"E","ẽ":"e","Ế":"E","ế":"e","Ề":"E","ề":"e","Ể":"E","ể":"e","Ễ":"E","ễ":"e","Ệ":"E","ệ":"e","Ỉ":"I","ỉ":"i","Ị":"I","ị":"i","Ọ":"O","ọ":"o","Ỏ":"O","ỏ":"o","Ố":"O","ố":"o","Ồ":"O","ồ":"o","Ổ":"O","ổ":"o","Ỗ":"O","ỗ":"o","Ộ":"O","ộ":"o","Ớ":"O","ớ":"o","Ờ":"O","ờ":"o","Ở":"O","ở":"o","Ỡ":"O","ỡ":"o","Ợ":"O","ợ":"o","Ụ":"U","ụ":"u","Ủ":"U","ủ":"u","Ứ":"U","ứ":"u","Ừ":"U","ừ":"u","Ử":"U","ử":"u","Ữ":"U","ữ":"u","Ự":"U","ự":"u","Ỳ":"Y","ỳ":"y","Ỵ":"Y","ỵ":"y","Ỷ":"Y","ỷ":"y","Ỹ":"Y","ỹ":"y","–":"-","‘":"'","’":"'","“":"\\"","”":"\\"","„":"\\"","†":"+","•":"*","…":"...","₠":"ecu","₢":"cruzeiro","₣":"french franc","₤":"lira","₥":"mill","₦":"naira","₧":"peseta","₨":"rupee","₩":"won","₪":"new shequel","₫":"dong","€":"euro","₭":"kip","₮":"tugrik","₯":"drachma","₰":"penny","₱":"peso","₲":"guarani","₳":"austral","₴":"hryvnia","₵":"cedi","₸":"kazakhstani tenge","₹":"indian rupee","₺":"turkish lira","₽":"russian ruble","₿":"bitcoin","℠":"sm","™":"tm","∂":"d","∆":"delta","∑":"sum","∞":"infinity","♥":"love","元":"yuan","円":"yen","﷼":"rial","ﻵ":"laa","ﻷ":"laa","ﻹ":"lai","ﻻ":"la"}`),a=JSON.parse('{"bg":{"Й":"Y","Ц":"Ts","Щ":"Sht","Ъ":"A","Ь":"Y","й":"y","ц":"ts","щ":"sht","ъ":"a","ь":"y"},"de":{"Ä":"AE","ä":"ae","Ö":"OE","ö":"oe","Ü":"UE","ü":"ue","ß":"ss","%":"prozent","&":"und","|":"oder","∑":"summe","∞":"unendlich","♥":"liebe"},"es":{"%":"por ciento","&":"y","<":"menor que",">":"mayor que","|":"o","¢":"centavos","£":"libras","¤":"moneda","₣":"francos","∑":"suma","∞":"infinito","♥":"amor"},"fr":{"%":"pourcent","&":"et","<":"plus petit",">":"plus grand","|":"ou","¢":"centime","£":"livre","¤":"devise","₣":"franc","∑":"somme","∞":"infini","♥":"amour"},"pt":{"%":"porcento","&":"e","<":"menor",">":"maior","|":"ou","¢":"centavo","∑":"soma","£":"libra","∞":"infinito","♥":"amor"},"uk":{"И":"Y","и":"y","Й":"Y","й":"y","Ц":"Ts","ц":"ts","Х":"Kh","х":"kh","Щ":"Shch","щ":"shch","Г":"H","г":"h"},"vi":{"Đ":"D","đ":"d"},"da":{"Ø":"OE","ø":"oe","Å":"AA","å":"aa","%":"procent","&":"og","|":"eller","$":"dollar","<":"mindre end",">":"større end"},"nb":{"&":"og","Å":"AA","Æ":"AE","Ø":"OE","å":"aa","æ":"ae","ø":"oe"},"it":{"&":"e"},"nl":{"&":"en"},"sv":{"&":"och","Å":"AA","Ä":"AE","Ö":"OE","å":"aa","ä":"ae","ö":"oe"}}');function l(c,o){if(typeof c!="string")throw new Error("slugify: string argument expected");o=typeof o=="string"?{replacement:o}:o||{};var h=a[o.locale]||{},g=o.replacement===void 0?"-":o.replacement,e=o.trim===void 0?!0:o.trim,i=c.normalize().split("").reduce(function(s,u){var f=h[u];return f===void 0&&(f=n[u]),f===void 0&&(f=u),f===g&&(f=" "),s+f.replace(o.remove||/[^\w\s$*_+~.()'"!\-:@]+/g,"")},"");return o.strict&&(i=i.replace(/[^A-Za-z0-9\s]/g,"")),e&&(i=i.trim()),i=i.replace(/\s+/g,g),o.lower&&(i=i.toLowerCase()),i}return l.extend=function(c){Object.assign(n,c)},l})})(fe);const me=t=>t.split(/[\s-]/g).map(J).join(" ");function he(t,r){const{navigation:n}=M().public.content;if(n===!1)return[];const a=c=>({...pe(["title",...n.fields])(c),...de(c==null?void 0:c.navigation)?c.navigation:{}}),l=t.sort((c,o)=>c._path.localeCompare(o._path)).reduce((c,o)=>{const h=o._path.substring(1).split("/"),g=o._id.split(":").slice(1),e=!!g[g.length-1].match(/([1-9][0-9]*\.)?index.md/g),i=f=>({title:f.title,_path:f._path,_file:f._file,children:[],...a(f),...f._draft?{_draft:!0}:{}}),s=i(o);if(e){const f=r[s._path];if(typeof(f==null?void 0:f.navigation)<"u"&&!(f!=null&&f.navigation))return c;if(o._path!=="/"){const m=i(o);s.children.push(m)}Object.assign(s,a(f))}return h.length===1?(c.push(s),c):(h.slice(0,-1).reduce((f,m,y)=>{const v="/"+h.slice(0,y+1).join("/"),w=r[v];if(typeof(w==null?void 0:w.navigation)<"u"&&!w.navigation)return[];let I=f.find(O=>O._path===v);return I||(I={title:me(m),_path:v,_file:o._file,children:[],...a(w)},f.push(I)),I.children},c).push(s),c)},[]);return Y(l)}const ge=new Intl.Collator(void 0,{numeric:!0,sensitivity:"base"});function Y(t){var n;t.forEach(a=>{a._file=a._file.split(".").slice(0,-1).join(".")});const r=t.sort((a,l)=>ge.compare(a._file,l._file));for(const a of r)(n=a.children)!=null&&n.length?Y(a.children):delete a.children,delete a._file;return t}function pe(t){return r=>(r=r||{},t&&t.length?t.filter(n=>typeof r[n]<"u").reduce((n,a)=>Object.assign(n,{[a]:r[a]}),{}):r)}function de(t){return Object.prototype.toString.call(t)==="[object Object]"}const ye=t=>b(t,M().public.content.api.baseURL),we=ne(oe({driver:F()}),"@content");function ve(t){async function r(){const n=new Set(await t.getKeys("cache:")),a=U().getPreviewToken();if(a){const c=await t.getItem(`${a}$`).then(g=>g||{});if(Array.isArray(c.ignoreSources)){const g=c.ignoreSources.map(e=>`cache:${e.trim()}:`);for(const e of n)g.some(i=>e.startsWith(i))&&n.delete(e)}const o=await t.getKeys(`${a}:`),h=await Promise.all(o.map(g=>t.getItem(g)));for(const g of h)n.delete(`cache:${g._id}`),g.__deleted||n.add(`${a}:${g._id}`)}return await Promise.all(Array.from(n).map(c=>t.getItem(c)))}return{storage:t,fetch:N(r),query:n=>H(N(r),{initialParams:n,legacy:!0})}}let R=null,S=null;async function Ie(){return S?await S:R||(S=Ae(),R=await S),R}async function Ae(){const t=G(),{content:r}=M().public,n=ve(we),a=await n.storage.getItem("integrity");if(r.integrity!==+(a||0)){const{contents:l,navigation:c}=await $fetch(ye(r.integrity?`cache.${r.integrity}.json`:"cache.json"));await Promise.all(l.map(o=>n.storage.setItem(`cache:${o._id}`,o))),await n.storage.setItem("navigation",c),await n.storage.setItem("integrity",r.integrity)}return await t.callHook("content:storage",n.storage),n}async function _e(t){const r=await Ie();if(!U().getPreviewToken()&&Object.keys(t||{}).length===0)return r.storage.getItem("navigation");const n=await r.query(t).where({_partial:!1,navigation:{$ne:!1}}).find(),l=(await r.query().where({_path:/\/_dir$/i,_partial:!0}).find()).reduce((c,o)=>{var g;((g=o.title)==null?void 0:g.toLowerCase())==="dir"&&(o.title=void 0);const h=o._path.split("/").slice(0,-1).join("/")||"/";return c[h]={...o,...o.body},c},{});return he(n,l)}export{we as contentStorage,ve as createDB,_e as generateNavigation,Ie as useContentDatabase};
diff --git a/_nuxt/document-driven.BWdn4QDn.js b/_nuxt/document-driven.R0qWc0WJ.js
similarity index 81%
rename from _nuxt/document-driven.BWdn4QDn.js
rename to _nuxt/document-driven.R0qWc0WJ.js
index 3041931902..b20fb3d5d7 100644
--- a/_nuxt/document-driven.BWdn4QDn.js
+++ b/_nuxt/document-driven.R0qWc0WJ.js
@@ -1 +1 @@
-import R from"./DocumentDrivenEmpty.3DI1wYHv.js";import L from"./ContentRenderer.CgXd06ZK.js";import{_ as C}from"./RplContent.css.cfrovusU.js";import{_ as $}from"./RplButton.css.kobVpNhn.js";import{j as S,d as c,b as r,c as d,e as b,t as k,f as g,E as N,G as f,w as l,D as w,g as y,H as E,P as x,m as B,I as T,J as j,r as A,u as H,K as h,L as O,M as D,N as u,O as v,T as V,Q as M,A as q,S as G,R as I,U as F,k as J,V as K}from"./entry.49ZHHvLB.js";import{_ as Q}from"./AppLayout.vue.nby97MTz.js";import{_ as U}from"./_plugin-vue_export-helper.x3n3nnut.js";import{u as W}from"./head.UNWUUq-8.js";import"./ContentRendererMarkdown.vue.cUVXlmIq.js";import"./RplIcon.vue.NIDikUS0.js";import"./nuxt-link.jgZZZkZ5.js";import"./RplImage.css.o2mWVvok.js";import"./RplTextLink.css.ll_eQGN0.js";import"./RplLink.vue.TWUjSovo.js";import"./RplList.vue.4pRwhR7E.js";import"./useRippleEvent.DMJaxZxB.js";import"./RplExpandable.vue.3-aUufTF.js";const z={class:"rpl-error-message"},X={class:"rpl-error-message__title rpl-type-weight-bold"},Y={key:0,class:"rpl-error-message__intro rpl-type-p-large"},Z={key:1,class:"rpl-error-message__body rpl-type-p"},ee=c({__name:"RplErrorMessage",props:{title:{},intro:{default:void 0},link:{default:void 0}},setup(o){return(t,e)=>(r(),d("div",z,[b("h1",X,k(t.title),1),t.intro?(r(),d("h2",Y,k(t.intro),1)):g("",!0),t.$slots.default?(r(),d("div",Z,[N(t.$slots,"default")])):g("",!0),t.link?(r(),f($,{key:2,el:"a",class:"rpl-error-message__button",url:t.link.url},{default:l(()=>[w(k(t.link.text),1)]),_:1},8,["url"])):g("",!0)]))}}),te={},oe=b("p",null," Have a look at the web address to make sure it was typed correctly. We may also have deleted this page. ",-1);function ae(o,t){const e=C,a=ee,n=Q;return r(),f(n,{theme:"default"},{default:l(()=>[y(a,{title:"Oops!",intro:"Sorry, we couldn't find the page you were looking for.",link:{url:"/",text:"Go back home"}},{default:l(()=>[y(e,null,{default:l(()=>[oe]),_:1})]),_:1})]),_:1})}const se=U(te,[["render",ae]]),ne=c({name:"LayoutLoader",inheritAttrs:!1,props:{name:String,layoutProps:Object},async setup(o,t){const e=await h[o.name]().then(a=>a.default||a);return()=>v(e,o.layoutProps,t.slots)}}),re=c({name:"NuxtLayout",inheritAttrs:!1,props:{name:{type:[String,Boolean,Object],default:null},fallback:{type:[String,Object],default:null}},setup(o,t){const e=S(),a=E(x),n=a===B()?T():a,i=j(()=>{let s=u(o.name)??n.meta.layout??"default";return s&&!(s in h)&&o.fallback&&(s=u(o.fallback)),s}),p=A();t.expose({layoutRef:p});const m=e.deferHydration();if(e.isHydrating){const s=e.hooks.hookOnce("app:error",m);H().beforeEach(s)}return()=>{const s=i.value&&i.value in h,_=n.meta.layoutTransition??O;return D(V,s&&_,{default:()=>v(G,{suspensible:!0,onResolve:()=>{q(m)}},{default:()=>v(ue,{layoutProps:M(t.attrs,{ref:p}),key:i.value||void 0,name:i.value,shouldProvide:!o.name,hasTransition:!!_},t.slots)})}).default()}}}),ue=c({name:"NuxtLayoutProvider",inheritAttrs:!1,props:{name:{type:[String,Boolean]},layoutProps:{type:Object},hasTransition:{type:Boolean},shouldProvide:{type:Boolean}},setup(o,t){const e=o.name;return o.shouldProvide&&I(F,{isCurrent:a=>e===(a.meta.layout??"default")}),()=>{var a,n;return!e||typeof e=="string"&&!(e in h)?(n=(a=t.slots).default)==null?void 0:n.call(a):v(ne,{key:e,layoutProps:o.layoutProps,name:e},t.slots)}}}),le={class:"document-driven-page"},$e=c({__name:"document-driven",setup(o){const{contentHead:t}=J().public.content,{page:e,layout:a}=K();return e.value,t&&W(e),(n,i)=>{const p=R,m=L,s=se,_=re;return r(),d("div",le,[y(_,{name:u(a)||"default"},{default:l(()=>[u(e)?(r(),f(m,{key:u(e)._id,value:u(e)},{empty:l(({value:P})=>[y(p,{value:P},null,8,["value"])]),_:1},8,["value"])):(r(),f(s,{key:1}))]),_:1},8,["name"])])}}});export{$e as default};
+import R from"./DocumentDrivenEmpty.-Bd5tvR3.js";import L from"./ContentRenderer.CHEOl3j3.js";import{_ as C}from"./RplContent.css.7ezTJ87f.js";import{_ as $}from"./RplButton.css.bGBZW0Bs.js";import{j as S,d as c,b as r,c as d,e as b,t as k,f as g,E as N,G as f,w as l,D as w,g as y,H as E,P as x,m as B,I as T,J as j,r as A,u as H,K as h,L as O,M as D,N as u,O as v,T as V,Q as M,A as q,S as G,R as I,U as F,k as J,V as K}from"./entry.Do8xnxHS.js";import{_ as Q}from"./AppLayout.vue.hqX4UWMQ.js";import{_ as U}from"./_plugin-vue_export-helper.x3n3nnut.js";import{u as W}from"./head.i1ysHgjT.js";import"./ContentRendererMarkdown.vue.sDq3Jws6.js";import"./RplIcon.vue.PZ-X7Qhh.js";import"./nuxt-link.sM27-MT7.js";import"./RplImage.css.ouJWHfa9.js";import"./RplTextLink.css.vnmpcBOe.js";import"./RplLink.vue.3IdzOFUB.js";import"./RplList.vue.i5RvVHLA.js";import"./useRippleEvent.Eg1owuZM.js";import"./RplExpandable.vue.ErcNtea4.js";const z={class:"rpl-error-message"},X={class:"rpl-error-message__title rpl-type-weight-bold"},Y={key:0,class:"rpl-error-message__intro rpl-type-p-large"},Z={key:1,class:"rpl-error-message__body rpl-type-p"},ee=c({__name:"RplErrorMessage",props:{title:{},intro:{default:void 0},link:{default:void 0}},setup(o){return(t,e)=>(r(),d("div",z,[b("h1",X,k(t.title),1),t.intro?(r(),d("h2",Y,k(t.intro),1)):g("",!0),t.$slots.default?(r(),d("div",Z,[N(t.$slots,"default")])):g("",!0),t.link?(r(),f($,{key:2,el:"a",class:"rpl-error-message__button",url:t.link.url},{default:l(()=>[w(k(t.link.text),1)]),_:1},8,["url"])):g("",!0)]))}}),te={},oe=b("p",null," Have a look at the web address to make sure it was typed correctly. We may also have deleted this page. ",-1);function ae(o,t){const e=C,a=ee,n=Q;return r(),f(n,{theme:"default"},{default:l(()=>[y(a,{title:"Oops!",intro:"Sorry, we couldn't find the page you were looking for.",link:{url:"/",text:"Go back home"}},{default:l(()=>[y(e,null,{default:l(()=>[oe]),_:1})]),_:1})]),_:1})}const se=U(te,[["render",ae]]),ne=c({name:"LayoutLoader",inheritAttrs:!1,props:{name:String,layoutProps:Object},async setup(o,t){const e=await h[o.name]().then(a=>a.default||a);return()=>v(e,o.layoutProps,t.slots)}}),re=c({name:"NuxtLayout",inheritAttrs:!1,props:{name:{type:[String,Boolean,Object],default:null},fallback:{type:[String,Object],default:null}},setup(o,t){const e=S(),a=E(x),n=a===B()?T():a,i=j(()=>{let s=u(o.name)??n.meta.layout??"default";return s&&!(s in h)&&o.fallback&&(s=u(o.fallback)),s}),p=A();t.expose({layoutRef:p});const m=e.deferHydration();if(e.isHydrating){const s=e.hooks.hookOnce("app:error",m);H().beforeEach(s)}return()=>{const s=i.value&&i.value in h,_=n.meta.layoutTransition??O;return D(V,s&&_,{default:()=>v(G,{suspensible:!0,onResolve:()=>{q(m)}},{default:()=>v(ue,{layoutProps:M(t.attrs,{ref:p}),key:i.value||void 0,name:i.value,shouldProvide:!o.name,hasTransition:!!_},t.slots)})}).default()}}}),ue=c({name:"NuxtLayoutProvider",inheritAttrs:!1,props:{name:{type:[String,Boolean]},layoutProps:{type:Object},hasTransition:{type:Boolean},shouldProvide:{type:Boolean}},setup(o,t){const e=o.name;return o.shouldProvide&&I(F,{isCurrent:a=>e===(a.meta.layout??"default")}),()=>{var a,n;return!e||typeof e=="string"&&!(e in h)?(n=(a=t.slots).default)==null?void 0:n.call(a):v(ne,{key:e,layoutProps:o.layoutProps,name:e},t.slots)}}}),le={class:"document-driven-page"},$e=c({__name:"document-driven",setup(o){const{contentHead:t}=J().public.content,{page:e,layout:a}=K();return e.value,t&&W(e),(n,i)=>{const p=R,m=L,s=se,_=re;return r(),d("div",le,[y(_,{name:u(a)||"default"},{default:l(()=>[u(e)?(r(),f(m,{key:u(e)._id,value:u(e)},{empty:l(({value:P})=>[y(p,{value:P},null,8,["value"])]),_:1},8,["value"])):(r(),f(s,{key:1}))]),_:1},8,["name"])])}}});export{$e as default};
diff --git a/_nuxt/entry.49ZHHvLB.js b/_nuxt/entry.Do8xnxHS.js
similarity index 61%
rename from _nuxt/entry.49ZHHvLB.js
rename to _nuxt/entry.Do8xnxHS.js
index 6e6024adf6..f8ac2d047b 100644
--- a/_nuxt/entry.49ZHHvLB.js
+++ b/_nuxt/entry.Do8xnxHS.js
@@ -16,20 +16,20 @@
 * @license MIT
 **/const Jh="http://www.w3.org/2000/svg",Qh="http://www.w3.org/1998/Math/MathML",zt=typeof document<"u"?document:null,el=zt&&zt.createElement("template"),Yh={insert:(e,t,r)=>{t.insertBefore(e,r||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,r,n)=>{const s=t==="svg"?zt.createElementNS(Jh,e):t==="mathml"?zt.createElementNS(Qh,e):zt.createElement(e,r?{is:r}:void 0);return e==="select"&&n&&n.multiple!=null&&s.setAttribute("multiple",n.multiple),s},createText:e=>zt.createTextNode(e),createComment:e=>zt.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>zt.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},insertStaticContent(e,t,r,n,s,i){const o=r?r.previousSibling:t.lastChild;if(s&&(s===i||s.nextSibling))for(;t.insertBefore(s.cloneNode(!0),r),!(s===i||!(s=s.nextSibling)););else{el.innerHTML=n==="svg"?`<svg>${e}</svg>`:n==="mathml"?`<math>${e}</math>`:e;const a=el.content;if(n==="svg"||n==="mathml"){const l=a.firstChild;for(;l.firstChild;)a.appendChild(l.firstChild);a.removeChild(l)}t.insertBefore(a,r)}return[o?o.nextSibling:t.firstChild,r?r.previousSibling:t.lastChild]}},jt="transition",fn="animation",Mn=Symbol("_vtc"),sa=(e,{slots:t})=>nt(uh,Xh(e),t);sa.displayName="Transition";const Yu={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String};sa.props=Ae({},_u,Yu);const ar=(e,t=[])=>{Y(e)?e.forEach(r=>r(...t)):e&&e(...t)},tl=e=>e?Y(e)?e.some(t=>t.length>1):e.length>1:!1;function Xh(e){const t={};for(const S in e)S in Yu||(t[S]=e[S]);if(e.css===!1)return t;const{name:r="v",type:n,duration:s,enterFromClass:i=`${r}-enter-from`,enterActiveClass:o=`${r}-enter-active`,enterToClass:a=`${r}-enter-to`,appearFromClass:l=i,appearActiveClass:c=o,appearToClass:u=a,leaveFromClass:f=`${r}-leave-from`,leaveActiveClass:p=`${r}-leave-active`,leaveToClass:d=`${r}-leave-to`}=e,v=Zh(s),_=v&&v[0],R=v&&v[1],{onBeforeEnter:w,onEnter:b,onEnterCancelled:h,onLeave:g,onLeaveCancelled:$,onBeforeAppear:m=w,onAppear:C=b,onAppearCancelled:A=h}=t,x=(S,j,ie)=>{lr(S,j?u:a),lr(S,j?c:o),ie&&ie()},E=(S,j)=>{S._isLeaving=!1,lr(S,f),lr(S,d),lr(S,p),j&&j()},T=S=>(j,ie)=>{const X=S?C:b,D=()=>x(j,S,ie);ar(X,[j,D]),rl(()=>{lr(j,S?l:i),Ft(j,S?u:a),tl(X)||nl(j,n,_,D)})};return Ae(t,{onBeforeEnter(S){ar(w,[S]),Ft(S,i),Ft(S,o)},onBeforeAppear(S){ar(m,[S]),Ft(S,l),Ft(S,c)},onEnter:T(!1),onAppear:T(!0),onLeave(S,j){S._isLeaving=!0;const ie=()=>E(S,j);Ft(S,f),rm(),Ft(S,p),rl(()=>{S._isLeaving&&(lr(S,f),Ft(S,d),tl(g)||nl(S,n,R,ie))}),ar(g,[S,ie])},onEnterCancelled(S){x(S,!1),ar(h,[S])},onAppearCancelled(S){x(S,!0),ar(A,[S])},onLeaveCancelled(S){E(S),ar($,[S])}})}function Zh(e){if(e==null)return null;if(ye(e))return[$i(e.enter),$i(e.leave)];{const t=$i(e);return[t,t]}}function $i(e){return Hc(e)}function Ft(e,t){t.split(/\s+/).forEach(r=>r&&e.classList.add(r)),(e[Mn]||(e[Mn]=new Set)).add(t)}function lr(e,t){t.split(/\s+/).forEach(n=>n&&e.classList.remove(n));const r=e[Mn];r&&(r.delete(t),r.size||(e[Mn]=void 0))}function rl(e){requestAnimationFrame(()=>{requestAnimationFrame(e)})}let em=0;function nl(e,t,r,n){const s=e._endId=++em,i=()=>{s===e._endId&&n()};if(r)return setTimeout(i,r);const{type:o,timeout:a,propCount:l}=tm(e,t);if(!o)return n();const c=o+"end";let u=0;const f=()=>{e.removeEventListener(c,p),i()},p=d=>{d.target===e&&++u>=l&&f()};setTimeout(()=>{u<l&&f()},a+1),e.addEventListener(c,p)}function tm(e,t){const r=window.getComputedStyle(e),n=v=>(r[v]||"").split(", "),s=n(`${jt}Delay`),i=n(`${jt}Duration`),o=sl(s,i),a=n(`${fn}Delay`),l=n(`${fn}Duration`),c=sl(a,l);let u=null,f=0,p=0;t===jt?o>0&&(u=jt,f=o,p=i.length):t===fn?c>0&&(u=fn,f=c,p=l.length):(f=Math.max(o,c),u=f>0?o>c?jt:fn:null,p=u?u===jt?i.length:l.length:0);const d=u===jt&&/\b(transform|all)(,|$)/.test(n(`${jt}Property`).toString());return{type:u,timeout:f,propCount:p,hasTransform:d}}function sl(e,t){for(;e.length<t.length;)e=e.concat(e);return Math.max(...t.map((r,n)=>il(r)+il(e[n])))}function il(e){return e==="auto"?0:Number(e.slice(0,-1).replace(",","."))*1e3}function rm(){return document.body.offsetHeight}function nm(e,t,r){const n=e[Mn];n&&(t=(t?[t,...n]:[...n]).join(" ")),t==null?e.removeAttribute("class"):r?e.setAttribute("class",t):e.className=t}const ks=Symbol("_vod"),Xu=Symbol("_vsh"),HP={beforeMount(e,{value:t},{transition:r}){e[ks]=e.style.display==="none"?"":e.style.display,r&&t?r.beforeEnter(e):pn(e,t)},mounted(e,{value:t},{transition:r}){r&&t&&r.enter(e)},updated(e,{value:t,oldValue:r},{transition:n}){!t!=!r&&(n?t?(n.beforeEnter(e),pn(e,!0),n.enter(e)):n.leave(e,()=>{pn(e,!1)}):pn(e,t))},beforeUnmount(e,{value:t}){pn(e,t)}};function pn(e,t){e.style.display=t?e[ks]:"none",e[Xu]=!t}const sm=Symbol(""),im=/(^|;)\s*display\s*:/;function om(e,t,r){const n=e.style,s=Pe(r);let i=!1;if(r&&!s){if(t)if(Pe(t))for(const o of t.split(";")){const a=o.slice(0,o.indexOf(":")).trim();r[a]==null&&us(n,a,"")}else for(const o in t)r[o]==null&&us(n,o,"");for(const o in r)o==="display"&&(i=!0),us(n,o,r[o])}else if(s){if(t!==r){const o=n[sm];o&&(r+=";"+o),n.cssText=r,i=im.test(r)}}else t&&e.removeAttribute("style");ks in e&&(e[ks]=i?n.display:"",e[Xu]&&(n.display="none"))}const ol=/\s*!important$/;function us(e,t,r){if(Y(r))r.forEach(n=>us(e,t,n));else if(r==null&&(r=""),t.startsWith("--"))e.setProperty(t,r);else{const n=am(e,t);ol.test(r)?e.setProperty(Pr(n),r.replace(ol,""),"important"):e[n]=r}}const al=["Webkit","Moz","ms"],Ei={};function am(e,t){const r=Ei[t];if(r)return r;let n=Rt(t);if(n!=="filter"&&n in e)return Ei[t]=n;n=Gs(n);for(let s=0;s<al.length;s++){const i=al[s]+n;if(i in e)return Ei[t]=i}return t}const ll="http://www.w3.org/1999/xlink";function lm(e,t,r,n,s){if(n&&t.startsWith("xlink:"))r==null?e.removeAttributeNS(ll,t.slice(6,t.length)):e.setAttributeNS(ll,t,r);else{const i=pd(t);r==null||i&&!Fc(r)?e.removeAttribute(t):e.setAttribute(t,i?"":r)}}function cm(e,t,r,n,s,i,o){if(t==="innerHTML"||t==="textContent"){n&&o(n,s,i),e[t]=r??"";return}const a=e.tagName;if(t==="value"&&a!=="PROGRESS"&&!a.includes("-")){const c=a==="OPTION"?e.getAttribute("value")||"":e.value,u=r??"";(c!==u||!("_value"in e))&&(e.value=u),r==null&&e.removeAttribute(t),e._value=r;return}let l=!1;if(r===""||r==null){const c=typeof e[t];c==="boolean"?r=Fc(r):r==null&&c==="string"?(r="",l=!0):c==="number"&&(r=0,l=!0)}try{e[t]=r}catch{}l&&e.removeAttribute(t)}function Or(e,t,r,n){e.addEventListener(t,r,n)}function um(e,t,r,n){e.removeEventListener(t,r,n)}const cl=Symbol("_vei");function fm(e,t,r,n,s=null){const i=e[cl]||(e[cl]={}),o=i[t];if(n&&o)o.value=n;else{const[a,l]=pm(t);if(n){const c=i[t]=mm(n,s);Or(e,a,c,l)}else o&&(um(e,a,o,l),i[t]=void 0)}}const ul=/(?:Once|Passive|Capture)$/;function pm(e){let t;if(ul.test(e)){t={};let n;for(;n=e.match(ul);)e=e.slice(0,e.length-n[0].length),t[n[0].toLowerCase()]=!0}return[e[2]===":"?e.slice(3):Pr(e.slice(2)),t]}let Ri=0;const dm=Promise.resolve(),hm=()=>Ri||(dm.then(()=>Ri=0),Ri=Date.now());function mm(e,t){const r=n=>{if(!n._vts)n._vts=Date.now();else if(n._vts<=r.attached)return;rt(gm(n,r.value),t,5,[n])};return r.value=e,r.attached=hm(),r}function gm(e,t){if(Y(t)){const r=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{r.call(e),e._stopped=!0},t.map(n=>s=>!s._stopped&&n&&n(s))}else return t}const fl=e=>e.charCodeAt(0)===111&&e.charCodeAt(1)===110&&e.charCodeAt(2)>96&&e.charCodeAt(2)<123,ym=(e,t,r,n,s,i,o,a,l)=>{const c=s==="svg";t==="class"?nm(e,n,c):t==="style"?om(e,r,n):jn(t)?Io(t)||fm(e,t,r,n,o):(t[0]==="."?(t=t.slice(1),!0):t[0]==="^"?(t=t.slice(1),!1):_m(e,t,n,c))?cm(e,t,n,i,o,a,l):(t==="true-value"?e._trueValue=n:t==="false-value"&&(e._falseValue=n),lm(e,t,n,c))};function _m(e,t,r,n){if(n)return!!(t==="innerHTML"||t==="textContent"||t in e&&fl(t)&&ee(r));if(t==="spellcheck"||t==="draggable"||t==="translate"||t==="form"||t==="list"&&e.tagName==="INPUT"||t==="type"&&e.tagName==="TEXTAREA")return!1;if(t==="width"||t==="height"){const s=e.tagName;if(s==="IMG"||s==="VIDEO"||s==="CANVAS"||s==="SOURCE")return!1}return fl(t)&&Pe(r)?!1:t in e}const pl=e=>{const t=e.props["onUpdate:modelValue"]||!1;return Y(t)?r=>Vr(t,r):t};function vm(e){e.target.composing=!0}function dl(e){const t=e.target;t.composing&&(t.composing=!1,t.dispatchEvent(new Event("input")))}const Pi=Symbol("_assign"),jP={created(e,{modifiers:{lazy:t,trim:r,number:n}},s){e[Pi]=pl(s);const i=n||s.props&&s.props.type==="number";Or(e,t?"change":"input",o=>{if(o.target.composing)return;let a=e.value;r&&(a=a.trim()),i&&(a=Hi(a)),e[Pi](a)}),r&&Or(e,"change",()=>{e.value=e.value.trim()}),t||(Or(e,"compositionstart",vm),Or(e,"compositionend",dl),Or(e,"change",dl))},mounted(e,{value:t}){e.value=t??""},beforeUpdate(e,{value:t,modifiers:{lazy:r,trim:n,number:s}},i){if(e[Pi]=pl(i),e.composing)return;const o=(s||e.type==="number")&&!/^0\d/.test(e.value)?Hi(e.value):e.value,a=t??"";o!==a&&(document.activeElement===e&&e.type!=="range"&&(r||n&&e.value.trim()===a)||(e.value=a))}},bm=["ctrl","shift","alt","meta"],wm={stop:e=>e.stopPropagation(),prevent:e=>e.preventDefault(),self:e=>e.target!==e.currentTarget,ctrl:e=>!e.ctrlKey,shift:e=>!e.shiftKey,alt:e=>!e.altKey,meta:e=>!e.metaKey,left:e=>"button"in e&&e.button!==0,middle:e=>"button"in e&&e.button!==1,right:e=>"button"in e&&e.button!==2,exact:(e,t)=>bm.some(r=>e[`${r}Key`]&&!t.includes(r))},FP=(e,t)=>{const r=e._withMods||(e._withMods={}),n=t.join(".");return r[n]||(r[n]=(s,...i)=>{for(let o=0;o<t.length;o++){const a=wm[t[o]];if(a&&a(s,t))return}return e(s,...i)})},$m={esc:"escape",space:" ",up:"arrow-up",left:"arrow-left",right:"arrow-right",down:"arrow-down",delete:"backspace"},VP=(e,t)=>{const r=e._withKeys||(e._withKeys={}),n=t.join(".");return r[n]||(r[n]=s=>{if(!("key"in s))return;const i=Pr(s.key);if(t.some(o=>o===i||$m[o]===i))return e(s)})},Zu=Ae({patchProp:ym},Yh);let Rn,hl=!1;function Em(){return Rn||(Rn=Mh(Zu))}function Rm(){return Rn=hl?Rn:Dh(Zu),hl=!0,Rn}const Pm=(...e)=>{const t=Em().createApp(...e),{mount:r}=t;return t.mount=n=>{const s=tf(n);if(!s)return;const i=t._component;!ee(i)&&!i.render&&!i.template&&(i.template=s.innerHTML),s.innerHTML="";const o=r(s,!1,ef(s));return s instanceof Element&&(s.removeAttribute("v-cloak"),s.setAttribute("data-v-app","")),o},t},Cm=(...e)=>{const t=Rm().createApp(...e),{mount:r}=t;return t.mount=n=>{const s=tf(n);if(s)return r(s,!0,ef(s))},t};function ef(e){if(e instanceof SVGElement)return"svg";if(typeof MathMLElement=="function"&&e instanceof MathMLElement)return"mathml"}function tf(e){return Pe(e)?document.querySelector(e):e}const Sm=/#/g,km=/&/g,Am=/\//g,Tm=/=/g,ia=/\+/g,xm=/%5e/gi,Om=/%60/gi,Lm=/%7c/gi,Im=/%20/gi;function Mm(e){return encodeURI(""+e).replace(Lm,"|")}function to(e){return Mm(typeof e=="string"?e:JSON.stringify(e)).replace(ia,"%2B").replace(Im,"+").replace(Sm,"%23").replace(km,"%26").replace(Om,"`").replace(xm,"^").replace(Am,"%2F")}function Ci(e){return to(e).replace(Tm,"%3D")}function As(e=""){try{return decodeURIComponent(""+e)}catch{return""+e}}function Dm(e){return As(e.replace(ia," "))}function Nm(e){return As(e.replace(ia," "))}function Hm(e=""){const t={};e[0]==="?"&&(e=e.slice(1));for(const r of e.split("&")){const n=r.match(/([^=]+)=?(.*)/)||[];if(n.length<2)continue;const s=Dm(n[1]);if(s==="__proto__"||s==="constructor")continue;const i=Nm(n[2]||"");t[s]===void 0?t[s]=i:Array.isArray(t[s])?t[s].push(i):t[s]=[t[s],i]}return t}function jm(e,t){return(typeof t=="number"||typeof t=="boolean")&&(t=String(t)),t?Array.isArray(t)?t.map(r=>`${Ci(e)}=${to(r)}`).join("&"):`${Ci(e)}=${to(t)}`:Ci(e)}function Fm(e){return Object.keys(e).filter(t=>e[t]!==void 0).map(t=>jm(t,e[t])).filter(Boolean).join("&")}const Vm=/^[\s\w\0+.-]{2,}:([/\\]{1,2})/,Bm=/^[\s\w\0+.-]{2,}:([/\\]{2})?/,Um=/^([/\\]\s*){2,}[^/\\]/,Km=/^[\s\0]*(blob|data|javascript|vbscript):$/i,zm=/\/$|\/\?|\/#/,Wm=/^\.?\//;function br(e,t={}){return typeof t=="boolean"&&(t={acceptRelative:t}),t.strict?Vm.test(e):Bm.test(e)||(t.acceptRelative?Um.test(e):!1)}function qm(e){return!!e&&Km.test(e)}function ro(e="",t){return t?zm.test(e):e.endsWith("/")}function wr(e="",t){if(!t)return(ro(e)?e.slice(0,-1):e)||"/";if(!ro(e,!0))return e||"/";let r=e,n="";const s=e.indexOf("#");s>=0&&(r=e.slice(0,s),n=e.slice(s));const[i,...o]=r.split("?");return(i.slice(0,-1)||"/")+(o.length>0?`?${o.join("?")}`:"")+n}function no(e="",t){if(!t)return e.endsWith("/")?e:e+"/";if(ro(e,!0))return e||"/";let r=e,n="";const s=e.indexOf("#");if(s>=0&&(r=e.slice(0,s),n=e.slice(s),!r))return n;const[i,...o]=r.split("?");return i+"/"+(o.length>0?`?${o.join("?")}`:"")+n}function Gm(e=""){return e.startsWith("/")}function so(e=""){return Gm(e)?e:"/"+e}function rf(e,t){if(sf(t)||br(e))return e;const r=wr(t);return e.startsWith(r)?e:ln(r,e)}function ml(e,t){if(sf(t))return e;const r=wr(t);if(!e.startsWith(r))return e;const n=e.slice(r.length);return n[0]==="/"?n:"/"+n}function nf(e,t){const r=si(e),n={...Hm(r.search),...t};return r.search=Fm(n),Ym(r)}function sf(e){return!e||e==="/"}function Jm(e){return e&&e!=="/"}function ln(e,...t){let r=e||"";for(const n of t.filter(s=>Jm(s)))if(r){const s=n.replace(Wm,"");r=no(r)+s}else r=n;return r}function Qm(e,t,r={}){return r.trailingSlash||(e=no(e),t=no(t)),r.leadingSlash||(e=so(e),t=so(t)),r.encoding||(e=As(e),t=As(t)),e===t}const of=Symbol.for("ufo:protocolRelative");function si(e="",t){const r=e.match(/^[\s\0]*(blob:|data:|javascript:|vbscript:)(.*)/i);if(r){const[,f,p=""]=r;return{protocol:f.toLowerCase(),pathname:p,href:f+p,auth:"",host:"",search:"",hash:""}}if(!br(e,{acceptRelative:!0}))return t?si(t+e):gl(e);const[,n="",s,i=""]=e.replace(/\\/g,"/").match(/^[\s\0]*([\w+.-]{2,}:)?\/\/([^/@]+@)?(.*)/)||[],[,o="",a=""]=i.match(/([^#/?]*)(.*)?/)||[],{pathname:l,search:c,hash:u}=gl(a.replace(/\/(?=[A-Za-z]:)/,""));return{protocol:n.toLowerCase(),auth:s?s.slice(0,Math.max(0,s.length-1)):"",host:o,pathname:l,search:c,hash:u,[of]:!n}}function gl(e=""){const[t="",r="",n=""]=(e.match(/([^#?]*)(\?[^#]*)?(#.*)?/)||[]).splice(1);return{pathname:t,search:r,hash:n}}function Ym(e){const t=e.pathname||"",r=e.search?(e.search.startsWith("?")?"":"?")+e.search:"",n=e.hash||"",s=e.auth?e.auth+"@":"",i=e.host||"";return(e.protocol||e[of]?(e.protocol||"")+"//":"")+s+i+t+r+n}const Xm=()=>{var e;return((e=window==null?void 0:window.__NUXT__)==null?void 0:e.config)||{}},Ts=Xm().app,Zm=()=>Ts.baseURL,eg=()=>Ts.buildAssetsDir,oa=(...e)=>ln(af(),eg(),...e),af=(...e)=>{const t=Ts.cdnURL||Ts.baseURL;return e.length?ln(t,...e):t};globalThis.__buildAssetsURL=oa,globalThis.__publicAssetsURL=af;const tg=/"(?:_|\\u0{2}5[Ff]){2}(?:p|\\u0{2}70)(?:r|\\u0{2}72)(?:o|\\u0{2}6[Ff])(?:t|\\u0{2}74)(?:o|\\u0{2}6[Ff])(?:_|\\u0{2}5[Ff]){2}"\s*:/,rg=/"(?:c|\\u0063)(?:o|\\u006[Ff])(?:n|\\u006[Ee])(?:s|\\u0073)(?:t|\\u0074)(?:r|\\u0072)(?:u|\\u0075)(?:c|\\u0063)(?:t|\\u0074)(?:o|\\u006[Ff])(?:r|\\u0072)"\s*:/,ng=/^\s*["[{]|^\s*-?\d[\d.]{0,14}\s*$/;function sg(e,t){if(e!=="__proto__"&&!(e==="constructor"&&t&&typeof t=="object"&&"prototype"in t))return t}function ig(e,t={}){if(typeof e!="string")return e;const r=e.toLowerCase().trim();if(r==="true")return!0;if(r==="false")return!1;if(r==="null")return null;if(r==="nan")return Number.NaN;if(r==="infinity")return Number.POSITIVE_INFINITY;if(r!=="undefined"){if(!ng.test(e)){if(t.strict)throw new SyntaxError("Invalid JSON");return e}try{return tg.test(e)||rg.test(e)?JSON.parse(e,sg):JSON.parse(e)}catch(n){if(t.strict)throw n;return e}}}class og extends Error{constructor(){super(...arguments),this.name="FetchError"}}function ag(e,t,r){let n="";t&&(n=t.message),e&&r?n=`${n} (${r.status} ${r.statusText} (${e.toString()}))`:e&&(n=`${n} (${e.toString()})`);const s=new og(n);return Object.defineProperty(s,"request",{get(){return e}}),Object.defineProperty(s,"response",{get(){return r}}),Object.defineProperty(s,"data",{get(){return r&&r._data}}),Object.defineProperty(s,"status",{get(){return r&&r.status}}),Object.defineProperty(s,"statusText",{get(){return r&&r.statusText}}),Object.defineProperty(s,"statusCode",{get(){return r&&r.status}}),Object.defineProperty(s,"statusMessage",{get(){return r&&r.statusText}}),s}const lg=new Set(Object.freeze(["PATCH","POST","PUT","DELETE"]));function yl(e="GET"){return lg.has(e.toUpperCase())}function cg(e){if(e===void 0)return!1;const t=typeof e;return t==="string"||t==="number"||t==="boolean"||t===null?!0:t!=="object"?!1:Array.isArray(e)?!0:e.constructor&&e.constructor.name==="Object"||typeof e.toJSON=="function"}const ug=new Set(["image/svg","application/xml","application/xhtml","application/html"]),fg=/^application\/(?:[\w!#$%&*.^`~-]*\+)?json(;.+)?$/i;function pg(e=""){if(!e)return"json";const t=e.split(";").shift()||"";return fg.test(t)?"json":ug.has(t)||t.startsWith("text/")?"text":"blob"}const dg=new Set([408,409,425,429,500,502,503,504]);function lf(e){const{fetch:t,Headers:r}=e;function n(o){const a=o.error&&o.error.name==="AbortError"||!1;if(o.options.retry!==!1&&!a){let c;typeof o.options.retry=="number"?c=o.options.retry:c=yl(o.options.method)?0:1;const u=o.response&&o.response.status||500;if(c>0&&dg.has(u))return s(o.request,{...o.options,retry:c-1})}const l=ag(o.request,o.error,o.response);throw Error.captureStackTrace&&Error.captureStackTrace(l,s),l}const s=async function(a,l={}){const c={request:a,options:{...e.defaults,...l},response:void 0,error:void 0};c.options.onRequest&&await c.options.onRequest(c),typeof c.request=="string"&&(c.options.baseURL&&(c.request=rf(c.request,c.options.baseURL)),(c.options.query||c.options.params)&&(c.request=nf(c.request,{...c.options.params,...c.options.query})),c.options.body&&yl(c.options.method)&&cg(c.options.body)&&(c.options.body=typeof c.options.body=="string"?c.options.body:JSON.stringify(c.options.body),c.options.headers=new r(c.options.headers),c.options.headers.has("content-type")||c.options.headers.set("content-type","application/json"),c.options.headers.has("accept")||c.options.headers.set("accept","application/json"))),c.response=await t(c.request,c.options).catch(async f=>(c.error=f,c.options.onRequestError&&await c.options.onRequestError(c),n(c)));const u=(c.options.parseResponse?"json":c.options.responseType)||pg(c.response.headers.get("content-type")||"");if(u==="json"){const f=await c.response.text(),p=c.options.parseResponse||ig;c.response._data=p(f)}else u==="stream"?c.response._data=c.response.body:c.response._data=await c.response[u]();return c.options.onResponse&&await c.options.onResponse(c),c.response.status>=400&&c.response.status<600?(c.options.onResponseError&&await c.options.onResponseError(c),n(c)):c.response},i=function(a,l){return s(a,l).then(c=>c._data)};return i.raw=s,i.native=t,i.create=(o={})=>lf({...e,defaults:{...e.defaults,...o}}),i}const cf=function(){if(typeof globalThis<"u")return globalThis;if(typeof self<"u")return self;if(typeof window<"u")return window;if(typeof global<"u")return global;throw new Error("unable to locate global object")}(),hg=cf.fetch||(()=>Promise.reject(new Error("[ofetch] global.fetch is not supported!"))),mg=cf.Headers,gg=lf({fetch:hg,Headers:mg}),yg=gg;globalThis.$fetch||(globalThis.$fetch=yg.create({baseURL:Zm()}));function io(e,t={},r){for(const n in e){const s=e[n],i=r?`${r}:${n}`:n;typeof s=="object"&&s!==null?io(s,t,i):typeof s=="function"&&(t[i]=s)}return t}const _g={run:e=>e()},vg=()=>_g,uf=typeof console.createTask<"u"?console.createTask:vg;function bg(e,t){const r=t.shift(),n=uf(r);return e.reduce((s,i)=>s.then(()=>n.run(()=>i(...t))),Promise.resolve())}function wg(e,t){const r=t.shift(),n=uf(r);return Promise.all(e.map(s=>n.run(()=>s(...t))))}function Si(e,t){for(const r of[...e])r(t)}class $g{constructor(){this._hooks={},this._before=void 0,this._after=void 0,this._deprecatedMessages=void 0,this._deprecatedHooks={},this.hook=this.hook.bind(this),this.callHook=this.callHook.bind(this),this.callHookWith=this.callHookWith.bind(this)}hook(t,r,n={}){if(!t||typeof r!="function")return()=>{};const s=t;let i;for(;this._deprecatedHooks[t];)i=this._deprecatedHooks[t],t=i.to;if(i&&!n.allowDeprecated){let o=i.message;o||(o=`${s} hook has been deprecated`+(i.to?`, please use ${i.to}`:"")),this._deprecatedMessages||(this._deprecatedMessages=new Set),this._deprecatedMessages.has(o)||(console.warn(o),this._deprecatedMessages.add(o))}if(!r.name)try{Object.defineProperty(r,"name",{get:()=>"_"+t.replace(/\W+/g,"_")+"_hook_cb",configurable:!0})}catch{}return this._hooks[t]=this._hooks[t]||[],this._hooks[t].push(r),()=>{r&&(this.removeHook(t,r),r=void 0)}}hookOnce(t,r){let n,s=(...i)=>(typeof n=="function"&&n(),n=void 0,s=void 0,r(...i));return n=this.hook(t,s),n}removeHook(t,r){if(this._hooks[t]){const n=this._hooks[t].indexOf(r);n!==-1&&this._hooks[t].splice(n,1),this._hooks[t].length===0&&delete this._hooks[t]}}deprecateHook(t,r){this._deprecatedHooks[t]=typeof r=="string"?{to:r}:r;const n=this._hooks[t]||[];delete this._hooks[t];for(const s of n)this.hook(t,s)}deprecateHooks(t){Object.assign(this._deprecatedHooks,t);for(const r in t)this.deprecateHook(r,t[r])}addHooks(t){const r=io(t),n=Object.keys(r).map(s=>this.hook(s,r[s]));return()=>{for(const s of n.splice(0,n.length))s()}}removeHooks(t){const r=io(t);for(const n in r)this.removeHook(n,r[n])}removeAllHooks(){for(const t in this._hooks)delete this._hooks[t]}callHook(t,...r){return r.unshift(t),this.callHookWith(bg,t,...r)}callHookParallel(t,...r){return r.unshift(t),this.callHookWith(wg,t,...r)}callHookWith(t,r,...n){const s=this._before||this._after?{name:r,args:n,context:{}}:void 0;this._before&&Si(this._before,s);const i=t(r in this._hooks?[...this._hooks[r]]:[],n);return i instanceof Promise?i.finally(()=>{this._after&&s&&Si(this._after,s)}):(this._after&&s&&Si(this._after,s),i)}beforeEach(t){return this._before=this._before||[],this._before.push(t),()=>{if(this._before!==void 0){const r=this._before.indexOf(t);r!==-1&&this._before.splice(r,1)}}}afterEach(t){return this._after=this._after||[],this._after.push(t),()=>{if(this._after!==void 0){const r=this._after.indexOf(t);r!==-1&&this._after.splice(r,1)}}}}function ff(){return new $g}function Eg(e={}){let t,r=!1;const n=o=>{if(t&&t!==o)throw new Error("Context conflict")};let s;if(e.asyncContext){const o=e.AsyncLocalStorage||globalThis.AsyncLocalStorage;o?s=new o:console.warn("[unctx] `AsyncLocalStorage` is not provided.")}const i=()=>{if(s&&t===void 0){const o=s.getStore();if(o!==void 0)return o}return t};return{use:()=>{const o=i();if(o===void 0)throw new Error("Context is not available");return o},tryUse:()=>i(),set:(o,a)=>{a||n(o),t=o,r=!0},unset:()=>{t=void 0,r=!1},call:(o,a)=>{n(o),t=o;try{return s?s.run(o,a):a()}finally{r||(t=void 0)}},async callAsync(o,a){t=o;const l=()=>{t=o},c=()=>t===o?l:void 0;oo.add(c);try{const u=s?s.run(o,a):a();return r||(t=void 0),await u}finally{oo.delete(c)}}}}function Rg(e={}){const t={};return{get(r,n={}){return t[r]||(t[r]=Eg({...e,...n})),t[r],t[r]}}}const xs=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof global<"u"?global:typeof window<"u"?window:{},_l="__unctx__",Pg=xs[_l]||(xs[_l]=Rg()),Cg=(e,t={})=>Pg.get(e,t),vl="__unctx_async_handlers__",oo=xs[vl]||(xs[vl]=new Set);function Dn(e){const t=[];for(const s of oo){const i=s();i&&t.push(i)}const r=()=>{for(const s of t)s()};let n=e();return n&&typeof n=="object"&&"catch"in n&&(n=n.catch(s=>{throw r(),s})),[n,r]}const pf=Cg("nuxt-app",{asyncContext:!1}),Sg="__nuxt_plugin";function kg(e){let t=0;const r={_scope:dd(),provide:void 0,globalName:"nuxt",versions:{get nuxt(){return"3.10.2"},get vue(){return r.vueApp.version}},payload:He({data:{},state:{},once:new Set,_errors:{},...window.__NUXT__??{}}),static:{data:{}},runWithContext:s=>r._scope.run(()=>df(r,s)),isHydrating:!0,deferHydration(){if(!r.isHydrating)return()=>{};t++;let s=!1;return()=>{if(!s&&(s=!0,t--,t===0))return r.isHydrating=!1,r.callHook("app:suspense:resolve")}},_asyncDataPromises:{},_asyncData:{},_payloadRevivers:{},...e};r.hooks=ff(),r.hook=r.hooks.hook,r.callHook=r.hooks.callHook,r.provide=(s,i)=>{const o="$"+s;is(r,o,i),is(r.vueApp.config.globalProperties,o,i)},is(r.vueApp,"$nuxt",r),is(r.vueApp.config.globalProperties,"$nuxt",r);{window.addEventListener("nuxt.preloadError",i=>{r.callHook("app:chunkError",{error:i.payload})}),window.useNuxtApp=window.useNuxtApp||$e;const s=r.hook("app:error",(...i)=>{console.error("[nuxt] error caught during app initialization",...i)});r.hook("app:mounted",s)}const n=He(r.payload.config);return r.provide("config",n),r}async function Ag(e,t){if(t.hooks&&e.hooks.addHooks(t.hooks),typeof t=="function"){const{provide:r}=await e.runWithContext(()=>t(e))||{};if(r&&typeof r=="object")for(const n in r)e.provide(n,r[n])}}async function Tg(e,t){const r=[],n=[],s=[],i=[];let o=0;async function a(l){var u;const c=((u=l.dependsOn)==null?void 0:u.filter(f=>t.some(p=>p._name===f)&&!r.includes(f)))??[];if(c.length>0)n.push([new Set(c),l]);else{const f=Ag(e,l).then(async()=>{l._name&&(r.push(l._name),await Promise.all(n.map(async([p,d])=>{p.has(l._name)&&(p.delete(l._name),p.size===0&&(o++,await a(d)))})))});l.parallel?s.push(f.catch(p=>i.push(p))):await f}}for(const l of t)await a(l);if(await Promise.all(s),o)for(let l=0;l<o;l++)await Promise.all(s);if(i.length)throw i[0]}function it(e){if(typeof e=="function")return e;const t=e._name||e.name;return delete e.name,Object.assign(e.setup||(()=>{}),e,{[Sg]:!0,_name:t})}function df(e,t,r){const n=()=>r?t(...r):t();return pf.set(e),e.vueApp.runWithContext(n)}function xg(){var t;let e;return Tu()&&(e=(t=Ot())==null?void 0:t.appContext.app.$nuxt),e=e||pf.tryUse(),e||null}function $e(){const e=xg();if(!e)throw new Error("[nuxt] instance unavailable");return e}function dt(e){return $e().$config}function is(e,t,r){Object.defineProperty(e,t,{get:()=>r})}const os=/^[\u0009\u0020-\u007E\u0080-\u00FF]+$/;function Og(e,t){if(typeof e!="string")throw new TypeError("argument str must be a string");const r={},s=(t||{}).decode||Mg;let i=0;for(;i<e.length;){const o=e.indexOf("=",i);if(o===-1)break;let a=e.indexOf(";",i);if(a===-1)a=e.length;else if(a<o){i=e.lastIndexOf(";",o-1)+1;continue}const l=e.slice(i,o).trim();if(r[l]===void 0){let c=e.slice(o+1,a).trim();c.codePointAt(0)===34&&(c=c.slice(1,-1)),r[l]=Ig(c,s)}i=a+1}return r}function bl(e,t,r){const n=r||{},s=n.encode||Dg;if(typeof s!="function")throw new TypeError("option encode is invalid");if(!os.test(e))throw new TypeError("argument name is invalid");const i=s(t);if(i&&!os.test(i))throw new TypeError("argument val is invalid");let o=e+"="+i;if(n.maxAge!==void 0&&n.maxAge!==null){const a=n.maxAge-0;if(Number.isNaN(a)||!Number.isFinite(a))throw new TypeError("option maxAge is invalid");o+="; Max-Age="+Math.floor(a)}if(n.domain){if(!os.test(n.domain))throw new TypeError("option domain is invalid");o+="; Domain="+n.domain}if(n.path){if(!os.test(n.path))throw new TypeError("option path is invalid");o+="; Path="+n.path}if(n.expires){if(!Lg(n.expires)||Number.isNaN(n.expires.valueOf()))throw new TypeError("option expires is invalid");o+="; Expires="+n.expires.toUTCString()}if(n.httpOnly&&(o+="; HttpOnly"),n.secure&&(o+="; Secure"),n.priority)switch(typeof n.priority=="string"?n.priority.toLowerCase():n.priority){case"low":o+="; Priority=Low";break;case"medium":o+="; Priority=Medium";break;case"high":o+="; Priority=High";break;default:throw new TypeError("option priority is invalid")}if(n.sameSite)switch(typeof n.sameSite=="string"?n.sameSite.toLowerCase():n.sameSite){case!0:o+="; SameSite=Strict";break;case"lax":o+="; SameSite=Lax";break;case"strict":o+="; SameSite=Strict";break;case"none":o+="; SameSite=None";break;default:throw new TypeError("option sameSite is invalid")}return o}function Lg(e){return Object.prototype.toString.call(e)==="[object Date]"||e instanceof Date}function Ig(e,t){try{return t(e)}catch{return e}}function Mg(e){return e.includes("%")?decodeURIComponent(e):e}function Dg(e){return encodeURIComponent(e)}const wl=Object.freeze({ignoreUnknown:!1,respectType:!1,respectFunctionNames:!1,respectFunctionProperties:!1,unorderedObjects:!0,unorderedArrays:!1,unorderedSets:!1,excludeKeys:void 0,excludeValues:void 0,replacer:void 0});function ao(e,t){t?t={...wl,...t}:t=wl;const r=hf(t);return r.dispatch(e),r.toString()}const Ng=Object.freeze(["prototype","__proto__","constructor"]);function hf(e){let t="",r=new Map;const n=s=>{t+=s};return{toString(){return t},getContext(){return r},dispatch(s){return e.replacer&&(s=e.replacer(s)),this[s===null?"null":typeof s](s)},object(s){if(s&&typeof s.toJSON=="function")return this.object(s.toJSON());const i=Object.prototype.toString.call(s);let o="";const a=i.length;a<10?o="unknown:["+i+"]":o=i.slice(8,a-1),o=o.toLowerCase();let l=null;if((l=r.get(s))===void 0)r.set(s,r.size);else return this.dispatch("[CIRCULAR:"+l+"]");if(typeof Buffer<"u"&&Buffer.isBuffer&&Buffer.isBuffer(s))return n("buffer:"),n(s.toString("utf8"));if(o!=="object"&&o!=="function"&&o!=="asyncfunction")this[o]?this[o](s):e.ignoreUnknown||this.unkown(s,o);else{let c=Object.keys(s);e.unorderedObjects&&(c=c.sort());let u=[];e.respectType!==!1&&!$l(s)&&(u=Ng),e.excludeKeys&&(c=c.filter(p=>!e.excludeKeys(p)),u=u.filter(p=>!e.excludeKeys(p))),n("object:"+(c.length+u.length)+":");const f=p=>{this.dispatch(p),n(":"),e.excludeValues||this.dispatch(s[p]),n(",")};for(const p of c)f(p);for(const p of u)f(p)}},array(s,i){if(i=i===void 0?e.unorderedArrays!==!1:i,n("array:"+s.length+":"),!i||s.length<=1){for(const l of s)this.dispatch(l);return}const o=new Map,a=s.map(l=>{const c=hf(e);c.dispatch(l);for(const[u,f]of c.getContext())o.set(u,f);return c.toString()});return r=o,a.sort(),this.array(a,!1)},date(s){return n("date:"+s.toJSON())},symbol(s){return n("symbol:"+s.toString())},unkown(s,i){if(n(i),!!s&&(n(":"),s&&typeof s.entries=="function"))return this.array(Array.from(s.entries()),!0)},error(s){return n("error:"+s.toString())},boolean(s){return n("bool:"+s)},string(s){n("string:"+s.length+":"),n(s)},function(s){n("fn:"),$l(s)?this.dispatch("[native]"):this.dispatch(s.toString()),e.respectFunctionNames!==!1&&this.dispatch("function-name:"+String(s.name)),e.respectFunctionProperties&&this.object(s)},number(s){return n("number:"+s)},xml(s){return n("xml:"+s.toString())},null(){return n("Null")},undefined(){return n("Undefined")},regexp(s){return n("regex:"+s.toString())},uint8array(s){return n("uint8array:"),this.dispatch(Array.prototype.slice.call(s))},uint8clampedarray(s){return n("uint8clampedarray:"),this.dispatch(Array.prototype.slice.call(s))},int8array(s){return n("int8array:"),this.dispatch(Array.prototype.slice.call(s))},uint16array(s){return n("uint16array:"),this.dispatch(Array.prototype.slice.call(s))},int16array(s){return n("int16array:"),this.dispatch(Array.prototype.slice.call(s))},uint32array(s){return n("uint32array:"),this.dispatch(Array.prototype.slice.call(s))},int32array(s){return n("int32array:"),this.dispatch(Array.prototype.slice.call(s))},float32array(s){return n("float32array:"),this.dispatch(Array.prototype.slice.call(s))},float64array(s){return n("float64array:"),this.dispatch(Array.prototype.slice.call(s))},arraybuffer(s){return n("arraybuffer:"),this.dispatch(new Uint8Array(s))},url(s){return n("url:"+s.toString())},map(s){n("map:");const i=[...s];return this.array(i,e.unorderedSets!==!1)},set(s){n("set:");const i=[...s];return this.array(i,e.unorderedSets!==!1)},file(s){return n("file:"),this.dispatch([s.name,s.size,s.type,s.lastModfied])},blob(){if(e.ignoreUnknown)return n("[blob]");throw new Error(`Hashing Blob objects is currently not supported
 Use "options.replacer" or "options.ignoreUnknown"
-`)},domwindow(){return n("domwindow")},bigint(s){return n("bigint:"+s.toString())},process(){return n("process")},timer(){return n("timer")},pipe(){return n("pipe")},tcp(){return n("tcp")},udp(){return n("udp")},tty(){return n("tty")},statwatcher(){return n("statwatcher")},securecontext(){return n("securecontext")},connection(){return n("connection")},zlib(){return n("zlib")},context(){return n("context")},nodescript(){return n("nodescript")},httpparser(){return n("httpparser")},dataview(){return n("dataview")},signal(){return n("signal")},fsevent(){return n("fsevent")},tlswrap(){return n("tlswrap")}}}const mf="[native code] }",Hg=mf.length;function $l(e){return typeof e!="function"?!1:Function.prototype.toString.call(e).slice(-Hg)===mf}class Yt{constructor(t,r){t=this.words=t||[],this.sigBytes=r===void 0?t.length*4:r}toString(t){return(t||jg).stringify(this)}concat(t){if(this.clamp(),this.sigBytes%4)for(let r=0;r<t.sigBytes;r++){const n=t.words[r>>>2]>>>24-r%4*8&255;this.words[this.sigBytes+r>>>2]|=n<<24-(this.sigBytes+r)%4*8}else for(let r=0;r<t.sigBytes;r+=4)this.words[this.sigBytes+r>>>2]=t.words[r>>>2];return this.sigBytes+=t.sigBytes,this}clamp(){this.words[this.sigBytes>>>2]&=4294967295<<32-this.sigBytes%4*8,this.words.length=Math.ceil(this.sigBytes/4)}clone(){return new Yt([...this.words])}}const jg={stringify(e){const t=[];for(let r=0;r<e.sigBytes;r++){const n=e.words[r>>>2]>>>24-r%4*8&255;t.push((n>>>4).toString(16),(n&15).toString(16))}return t.join("")}},Fg={stringify(e){const t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",r=[];for(let n=0;n<e.sigBytes;n+=3){const s=e.words[n>>>2]>>>24-n%4*8&255,i=e.words[n+1>>>2]>>>24-(n+1)%4*8&255,o=e.words[n+2>>>2]>>>24-(n+2)%4*8&255,a=s<<16|i<<8|o;for(let l=0;l<4&&n*8+l*6<e.sigBytes*8;l++)r.push(t.charAt(a>>>6*(3-l)&63))}return r.join("")}},Vg={parse(e){const t=e.length,r=[];for(let n=0;n<t;n++)r[n>>>2]|=(e.charCodeAt(n)&255)<<24-n%4*8;return new Yt(r,t)}},Bg={parse(e){return Vg.parse(unescape(encodeURIComponent(e)))}};class Ug{constructor(){this._data=new Yt,this._nDataBytes=0,this._minBufferSize=0,this.blockSize=512/32}reset(){this._data=new Yt,this._nDataBytes=0}_append(t){typeof t=="string"&&(t=Bg.parse(t)),this._data.concat(t),this._nDataBytes+=t.sigBytes}_doProcessBlock(t,r){}_process(t){let r,n=this._data.sigBytes/(this.blockSize*4);t?n=Math.ceil(n):n=Math.max((n|0)-this._minBufferSize,0);const s=n*this.blockSize,i=Math.min(s*4,this._data.sigBytes);if(s){for(let o=0;o<s;o+=this.blockSize)this._doProcessBlock(this._data.words,o);r=this._data.words.splice(0,s),this._data.sigBytes-=i}return new Yt(r,i)}}class Kg extends Ug{update(t){return this._append(t),this._process(),this}finalize(t){t&&this._append(t)}}const El=[1779033703,-1150833019,1013904242,-1521486534,1359893119,-1694144372,528734635,1541459225],zg=[1116352408,1899447441,-1245643825,-373957723,961987163,1508970993,-1841331548,-1424204075,-670586216,310598401,607225278,1426881987,1925078388,-2132889090,-1680079193,-1046744716,-459576895,-272742522,264347078,604807628,770255983,1249150122,1555081692,1996064986,-1740746414,-1473132947,-1341970488,-1084653625,-958395405,-710438585,113926993,338241895,666307205,773529912,1294757372,1396182291,1695183700,1986661051,-2117940946,-1838011259,-1564481375,-1474664885,-1035236496,-949202525,-778901479,-694614492,-200395387,275423344,430227734,506948616,659060556,883997877,958139571,1322822218,1537002063,1747873779,1955562222,2024104815,-2067236844,-1933114872,-1866530822,-1538233109,-1090935817,-965641998],cr=[];class Wg extends Kg{constructor(){super(...arguments),this._hash=new Yt([...El])}reset(){super.reset(),this._hash=new Yt([...El])}_doProcessBlock(t,r){const n=this._hash.words;let s=n[0],i=n[1],o=n[2],a=n[3],l=n[4],c=n[5],u=n[6],f=n[7];for(let p=0;p<64;p++){if(p<16)cr[p]=t[r+p]|0;else{const h=cr[p-15],g=(h<<25|h>>>7)^(h<<14|h>>>18)^h>>>3,$=cr[p-2],m=($<<15|$>>>17)^($<<13|$>>>19)^$>>>10;cr[p]=g+cr[p-7]+m+cr[p-16]}const d=l&c^~l&u,v=s&i^s&o^i&o,_=(s<<30|s>>>2)^(s<<19|s>>>13)^(s<<10|s>>>22),R=(l<<26|l>>>6)^(l<<21|l>>>11)^(l<<7|l>>>25),w=f+R+d+zg[p]+cr[p],b=_+v;f=u,u=c,c=l,l=a+w|0,a=o,o=i,i=s,s=w+b|0}n[0]=n[0]+s|0,n[1]=n[1]+i|0,n[2]=n[2]+o|0,n[3]=n[3]+a|0,n[4]=n[4]+l|0,n[5]=n[5]+c|0,n[6]=n[6]+u|0,n[7]=n[7]+f|0}finalize(t){super.finalize(t);const r=this._nDataBytes*8,n=this._data.sigBytes*8;return this._data.words[n>>>5]|=128<<24-n%32,this._data.words[(n+64>>>9<<4)+14]=Math.floor(r/4294967296),this._data.words[(n+64>>>9<<4)+15]=r,this._data.sigBytes=this._data.words.length*4,this._process(),this._hash}}function qg(e){return new Wg().finalize(e).toString(Fg)}function Os(e,t={}){const r=typeof e=="string"?e:ao(e,t);return qg(r).slice(0,10)}function Gg(e,t,r={}){return e===t||ao(e,r)===ao(t,r)}function Jg(e){return{ctx:{table:e},matchAll:t=>yf(t,e)}}function gf(e){const t={};for(const r in e)t[r]=r==="dynamic"?new Map(Object.entries(e[r]).map(([n,s])=>[n,gf(s)])):new Map(Object.entries(e[r]));return t}function Qg(e){return Jg(gf(e))}function yf(e,t){const r=[];for(const[s,i]of Rl(t.wildcard))e.startsWith(s)&&r.push(i);for(const[s,i]of Rl(t.dynamic))if(e.startsWith(s+"/")){const o="/"+e.slice(s.length).split("/").splice(2).join("/");r.push(...yf(o,i))}const n=t.static.get(e);return n&&r.push(n),r.filter(Boolean)}function Rl(e){return[...e.entries()].sort((t,r)=>t[0].length-r[0].length)}const Yg=/"(?:_|\\u0{2}5[Ff]){2}(?:p|\\u0{2}70)(?:r|\\u0{2}72)(?:o|\\u0{2}6[Ff])(?:t|\\u0{2}74)(?:o|\\u0{2}6[Ff])(?:_|\\u0{2}5[Ff]){2}"\s*:/,Xg=/"(?:c|\\u0063)(?:o|\\u006[Ff])(?:n|\\u006[Ee])(?:s|\\u0073)(?:t|\\u0074)(?:r|\\u0072)(?:u|\\u0075)(?:c|\\u0063)(?:t|\\u0074)(?:o|\\u006[Ff])(?:r|\\u0072)"\s*:/,Zg=/^\s*["[{]|^\s*-?\d{1,16}(\.\d{1,17})?([Ee][+-]?\d+)?\s*$/;function ey(e,t){if(e==="__proto__"||e==="constructor"&&t&&typeof t=="object"&&"prototype"in t){ty(e);return}return t}function ty(e){console.warn(`[destr] Dropping "${e}" key to prevent prototype pollution.`)}function Ls(e,t={}){if(typeof e!="string")return e;const r=e.trim();if(e[0]==='"'&&e.at(-1)==='"'&&!e.includes("\\"))return r.slice(1,-1);if(r.length<=9){const n=r.toLowerCase();if(n==="true")return!0;if(n==="false")return!1;if(n==="undefined")return;if(n==="null")return null;if(n==="nan")return Number.NaN;if(n==="infinity")return Number.POSITIVE_INFINITY;if(n==="-infinity")return Number.NEGATIVE_INFINITY}if(!Zg.test(e)){if(t.strict)throw new SyntaxError("[destr] Invalid JSON");return e}try{if(Yg.test(e)||Xg.test(e)){if(t.strict)throw new Error("[destr] Possible prototype pollution");return JSON.parse(e,ey)}return JSON.parse(e)}catch(n){if(t.strict)throw n;return e}}function ki(e){if(e===null||typeof e!="object")return!1;const t=Object.getPrototypeOf(e);return t!==null&&t!==Object.prototype&&Object.getPrototypeOf(t)!==null||Symbol.iterator in e?!1:Symbol.toStringTag in e?Object.prototype.toString.call(e)==="[object Module]":!0}function lo(e,t,r=".",n){if(!ki(t))return lo(e,{},r,n);const s=Object.assign({},t);for(const i in e){if(i==="__proto__"||i==="constructor")continue;const o=e[i];o!=null&&(n&&n(s,i,o,r)||(Array.isArray(o)&&Array.isArray(s[i])?s[i]=[...o,...s[i]]:ki(o)&&ki(s[i])?s[i]=lo(o,s[i],(r?`${r}.`:"")+i.toString(),n):s[i]=o))}return s}function ry(e){return(...t)=>t.reduce((r,n)=>lo(r,n,"",e),{})}const _f=ry();function ny(e,t){try{return t in e}catch{return!1}}var sy=Object.defineProperty,iy=(e,t,r)=>t in e?sy(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,ur=(e,t,r)=>(iy(e,typeof t!="symbol"?t+"":t,r),r);class co extends Error{constructor(t,r={}){super(t,r),ur(this,"statusCode",500),ur(this,"fatal",!1),ur(this,"unhandled",!1),ur(this,"statusMessage"),ur(this,"data"),ur(this,"cause"),r.cause&&!this.cause&&(this.cause=r.cause)}toJSON(){const t={message:this.message,statusCode:fo(this.statusCode,500)};return this.statusMessage&&(t.statusMessage=vf(this.statusMessage)),this.data!==void 0&&(t.data=this.data),t}}ur(co,"__h3_error__",!0);function uo(e){if(typeof e=="string")return new co(e);if(oy(e))return e;const t=new co(e.message??e.statusMessage??"",{cause:e.cause||e});if(ny(e,"stack"))try{Object.defineProperty(t,"stack",{get(){return e.stack}})}catch{try{t.stack=e.stack}catch{}}if(e.data&&(t.data=e.data),e.statusCode?t.statusCode=fo(e.statusCode,t.statusCode):e.status&&(t.statusCode=fo(e.status,t.statusCode)),e.statusMessage?t.statusMessage=e.statusMessage:e.statusText&&(t.statusMessage=e.statusText),t.statusMessage){const r=t.statusMessage;vf(t.statusMessage)!==r&&console.warn("[h3] Please prefer using `message` for longer error messages instead of `statusMessage`. In the future, `statusMessage` will be sanitized by default.")}return e.fatal!==void 0&&(t.fatal=e.fatal),e.unhandled!==void 0&&(t.unhandled=e.unhandled),t}function oy(e){var t;return((t=e==null?void 0:e.constructor)==null?void 0:t.__h3_error__)===!0}const ay=/[^\u0009\u0020-\u007E]/g;function vf(e=""){return e.replace(ay,"")}function fo(e,t=200){return!e||(typeof e=="string"&&(e=Number.parseInt(e,10)),e<100||e>999)?t:e}const ly=Symbol("layout-meta"),ii=Symbol("route"),gt=()=>{var e;return(e=$e())==null?void 0:e.$router},$r=()=>Tu()?Oe(ii,$e()._route):$e()._route;const cy=(e,t,r={})=>{const n=$e(),s=r.global||typeof e!="string",i=typeof e!="string"?e:t;if(!i){console.warn("[nuxt] No route middleware passed to `addRouteMiddleware`.",e);return}s?n._middleware.global.push(i):n._middleware.named[e]=i},uy=()=>{try{if($e()._processingMiddleware)return!0}catch{return!0}return!1},fy=(e,t)=>{e||(e="/");const r=typeof e=="string"?e:nf(e.path||"/",e.query||{})+(e.hash||"");if(t!=null&&t.open){{const{target:a="_blank",windowFeatures:l={}}=t.open,c=Object.entries(l).filter(([u,f])=>f!==void 0).map(([u,f])=>`${u.toLowerCase()}=${f}`).join(", ");open(r,a,c)}return Promise.resolve()}const n=(t==null?void 0:t.external)||br(r,{acceptRelative:!0});if(n){if(!(t!=null&&t.external))throw new Error("Navigating to an external URL is not allowed by default. Use `navigateTo(url, { external: true })`.");const a=si(r).protocol;if(a&&qm(a))throw new Error(`Cannot navigate to a URL with '${a}' protocol.`)}const s=uy();if(!n&&s)return e;const i=gt(),o=$e();return n?(o._scope.stop(),t!=null&&t.replace?location.replace(r):location.href=r,s?o.isHydrating?new Promise(()=>{}):!1:Promise.resolve()):t!=null&&t.replace?i.replace(e):i.push(e)},bf="__nuxt_error",oi=()=>qo($e().payload,"error"),Dr=e=>{const t=ai(e);try{const r=$e(),n=oi();r.hooks.callHook("app:error",t),n.value=n.value||t}catch{throw t}return t},py=async(e={})=>{const t=$e(),r=oi();t.callHook("app:error:cleared",e),e.redirect&&await gt().replace(e.redirect),r.value=null},dy=e=>!!e&&typeof e=="object"&&bf in e,ai=e=>{const t=uo(e);return Object.defineProperty(t,bf,{value:!0,configurable:!1,writable:!1}),t},hy="modulepreload",my=function(e,t){return e[0]==="."?new URL(e,t).href:e},Pl={},gy=function(t,r,n){let s=Promise.resolve();if(r&&r.length>0){const i=document.getElementsByTagName("link");s=Promise.all(r.map(o=>{if(o=my(o,n),o in Pl)return;Pl[o]=!0;const a=o.endsWith(".css"),l=a?'[rel="stylesheet"]':"";if(!!n)for(let f=i.length-1;f>=0;f--){const p=i[f];if(p.href===o&&(!a||p.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${o}"]${l}`))return;const u=document.createElement("link");if(u.rel=a?"stylesheet":hy,a||(u.as="script",u.crossOrigin=""),u.href=o,document.head.appendChild(u),a)return new Promise((f,p)=>{u.addEventListener("load",f),u.addEventListener("error",()=>p(new Error(`Unable to preload CSS for ${o}`)))})}))}return s.then(()=>t()).catch(i=>{const o=new Event("vite:preloadError",{cancelable:!0});if(o.payload=i,window.dispatchEvent(o),!o.defaultPrevented)throw i})},U=(...e)=>gy(...e).catch(t=>{const r=new Event("nuxt.preloadError");throw r.payload=t,window.dispatchEvent(r),t}),yy=-1,_y=-2,vy=-3,by=-4,wy=-5,$y=-6;function Ey(e,t){return Ry(JSON.parse(e),t)}function Ry(e,t){if(typeof e=="number")return s(e,!0);if(!Array.isArray(e)||e.length===0)throw new Error("Invalid input");const r=e,n=Array(r.length);function s(i,o=!1){if(i===yy)return;if(i===vy)return NaN;if(i===by)return 1/0;if(i===wy)return-1/0;if(i===$y)return-0;if(o)throw new Error("Invalid input");if(i in n)return n[i];const a=r[i];if(!a||typeof a!="object")n[i]=a;else if(Array.isArray(a))if(typeof a[0]=="string"){const l=a[0],c=t==null?void 0:t[l];if(c)return n[i]=c(s(a[1]));switch(l){case"Date":n[i]=new Date(a[1]);break;case"Set":const u=new Set;n[i]=u;for(let d=1;d<a.length;d+=1)u.add(s(a[d]));break;case"Map":const f=new Map;n[i]=f;for(let d=1;d<a.length;d+=2)f.set(s(a[d]),s(a[d+1]));break;case"RegExp":n[i]=new RegExp(a[1],a[2]);break;case"Object":n[i]=Object(a[1]);break;case"BigInt":n[i]=BigInt(a[1]);break;case"null":const p=Object.create(null);n[i]=p;for(let d=1;d<a.length;d+=2)p[a[d]]=s(a[d+1]);break;default:throw new Error(`Unknown type ${l}`)}}else{const l=new Array(a.length);n[i]=l;for(let c=0;c<a.length;c+=1){const u=a[c];u!==_y&&(l[c]=s(u))}}else{const l={};n[i]=l;for(const c in a){const u=a[c];l[c]=s(u)}}return n[i]}return s(0)}function Py(e){return Array.isArray(e)?e:[e]}const Cy=["title","titleTemplate","script","style","noscript"],fs=["base","meta","link","style","script","noscript"],Sy=["title","titleTemplate","templateParams","base","htmlAttrs","bodyAttrs","meta","link","style","script","noscript"],ky=["base","title","titleTemplate","bodyAttrs","htmlAttrs","templateParams"],wf=["tagPosition","tagPriority","tagDuplicateStrategy","children","innerHTML","textContent","processTemplateParams"],Ay=typeof window<"u";function aa(e){let t=9;for(let r=0;r<e.length;)t=Math.imul(t^e.charCodeAt(r++),9**9);return((t^t>>>9)+65536).toString(16).substring(1,8).toLowerCase()}function Cl(e){return e._h||aa(e._d?e._d:`${e.tag}:${e.textContent||e.innerHTML||""}:${Object.entries(e.props).map(([t,r])=>`${t}:${String(r)}`).join(",")}`)}function $f(e,t){const{props:r,tag:n}=e;if(ky.includes(n))return n;if(n==="link"&&r.rel==="canonical")return"canonical";if(r.charset)return"charset";const s=["id"];n==="meta"&&s.push("name","property","http-equiv");for(const i of s)if(typeof r[i]<"u"){const o=String(r[i]);return t&&!t(o)?!1:`${n}:${i}:${o}`}return!1}function Sl(e,t){return e==null?t||null:typeof e=="function"?e(t):e}async function Ty(e,t,r){const n={tag:e,props:await Ef(typeof t=="object"&&typeof t!="function"&&!(t instanceof Promise)?{...t}:{[["script","noscript","style"].includes(e)?"innerHTML":"textContent"]:t},["templateParams","titleTemplate"].includes(e))};return wf.forEach(s=>{const i=typeof n.props[s]<"u"?n.props[s]:r[s];typeof i<"u"&&((!["innerHTML","textContent","children"].includes(s)||Cy.includes(n.tag))&&(n[s==="children"?"innerHTML":s]=i),delete n.props[s])}),n.props.body&&(n.tagPosition="bodyClose",delete n.props.body),n.tag==="script"&&typeof n.innerHTML=="object"&&(n.innerHTML=JSON.stringify(n.innerHTML),n.props.type=n.props.type||"application/json"),Array.isArray(n.props.content)?n.props.content.map(s=>({...n,props:{...n.props,content:s}})):n}function xy(e){return typeof e=="object"&&!Array.isArray(e)&&(e=Object.keys(e).filter(t=>e[t])),(Array.isArray(e)?e.join(" "):e).split(" ").filter(t=>t.trim()).filter(Boolean).join(" ")}async function Ef(e,t){for(const r of Object.keys(e)){if(r==="class"){e[r]=xy(e[r]);continue}if(e[r]instanceof Promise&&(e[r]=await e[r]),!t&&!wf.includes(r)){const n=String(e[r]),s=r.startsWith("data-");n==="true"||n===""?e[r]=s?"true":!0:e[r]||(s&&n==="false"?e[r]="false":delete e[r])}}return e}const Oy=10;async function Ly(e){const t=[];return Object.entries(e.resolvedInput).filter(([r,n])=>typeof n<"u"&&Sy.includes(r)).forEach(([r,n])=>{const s=Py(n);t.push(...s.map(i=>Ty(r,i,e)).flat())}),(await Promise.all(t)).flat().filter(Boolean).map((r,n)=>(r._e=e._i,e.mode&&(r._m=e.mode),r._p=(e._i<<Oy)+n,r))}const kl={base:-10,title:10},Al={critical:-80,high:-10,low:20};function Is(e){let t=100;const r=e.tagPriority;return typeof r=="number"?r:(e.tag==="meta"?(e.props["http-equiv"]==="content-security-policy"&&(t=-30),e.props.charset&&(t=-20),e.props.name==="viewport"&&(t=-15)):e.tag==="link"&&e.props.rel==="preconnect"?t=20:e.tag in kl&&(t=kl[e.tag]),typeof r=="string"&&r in Al?t+Al[r]:t)}const Iy=[{prefix:"before:",offset:-1},{prefix:"after:",offset:1}],Rf=["onload","onerror","onabort","onprogress","onloadstart"],Vt="%separator";function ps(e,t,r){if(typeof e!="string"||!e.includes("%"))return e;function n(o){let a;return["s","pageTitle"].includes(o)?a=t.pageTitle:o.includes(".")?a=o.split(".").reduce((l,c)=>l&&l[c]||void 0,t):a=t[o],typeof a<"u"?(a||"").replace(/"/g,'\\"'):!1}let s=e;try{s=decodeURI(e)}catch{}return(s.match(/%(\w+\.+\w+)|%(\w+)/g)||[]).sort().reverse().forEach(o=>{const a=n(o.slice(1));typeof a=="string"&&(e=e.replace(new RegExp(`\\${o}(\\W|$)`,"g"),(l,c)=>`${a}${c}`).trim())}),e.includes(Vt)&&(e.endsWith(Vt)&&(e=e.slice(0,-Vt.length).trim()),e.startsWith(Vt)&&(e=e.slice(Vt.length).trim()),e=e.replace(new RegExp(`\\${Vt}\\s*\\${Vt}`,"g"),Vt),e=ps(e,{separator:r},r)),e}async function My(e){const t={tag:e.tagName.toLowerCase(),props:await Ef(e.getAttributeNames().reduce((r,n)=>({...r,[n]:e.getAttribute(n)}),{})),innerHTML:e.innerHTML};return t._d=$f(t),t}async function Pf(e,t={}){var u;const r=t.document||e.resolvedOptions.document;if(!r)return;const n={shouldRender:e.dirty,tags:[]};if(await e.hooks.callHook("dom:beforeRender",n),!n.shouldRender)return;const s=(await e.resolveTags()).map(f=>({tag:f,id:fs.includes(f.tag)?Cl(f):f.tag,shouldRender:!0}));let i=e._dom;if(!i){i={elMap:{htmlAttrs:r.documentElement,bodyAttrs:r.body}};for(const f of["body","head"]){const p=(u=r==null?void 0:r[f])==null?void 0:u.children;for(const d of[...p].filter(v=>fs.includes(v.tagName.toLowerCase())))i.elMap[d.getAttribute("data-hid")||Cl(await My(d))]=d}}i.pendingSideEffects={...i.sideEffects||{}},i.sideEffects={};function o(f,p,d){const v=`${f}:${p}`;i.sideEffects[v]=d,delete i.pendingSideEffects[v]}function a({id:f,$el:p,tag:d}){const v=d.tag.endsWith("Attrs");i.elMap[f]=p,v||(["textContent","innerHTML"].forEach(_=>{d[_]&&d[_]!==p[_]&&(p[_]=d[_])}),o(f,"el",()=>{i.elMap[f].remove(),delete i.elMap[f]})),Object.entries(d.props).forEach(([_,R])=>{const w=`attr:${_}`;if(_==="class")for(const b of(R||"").split(" ").filter(Boolean))v&&o(f,`${w}:${b}`,()=>p.classList.remove(b)),!p.classList.contains(b)&&p.classList.add(b);else p.getAttribute(_)!==R&&p.setAttribute(_,R===!0?"":String(R)),v&&o(f,w,()=>p.removeAttribute(_))})}const l=[],c={bodyClose:void 0,bodyOpen:void 0,head:void 0};for(const f of s){const{tag:p,shouldRender:d,id:v}=f;if(d){if(p.tag==="title"){r.title=p.textContent;continue}f.$el=f.$el||i.elMap[v],f.$el?a(f):fs.includes(p.tag)&&l.push(f)}}for(const f of l){const p=f.tag.tagPosition||"head";f.$el=r.createElement(f.tag.tag),a(f),c[p]=c[p]||r.createDocumentFragment(),c[p].appendChild(f.$el)}for(const f of s)await e.hooks.callHook("dom:renderTag",f,r,o);c.head&&r.head.appendChild(c.head),c.bodyOpen&&r.body.insertBefore(c.bodyOpen,r.body.firstChild),c.bodyClose&&r.body.appendChild(c.bodyClose),Object.values(i.pendingSideEffects).forEach(f=>f()),e._dom=i,e.dirty=!1,await e.hooks.callHook("dom:rendered",{renders:s})}async function Dy(e,t={}){const r=t.delayFn||(n=>setTimeout(n,10));return e._domUpdatePromise=e._domUpdatePromise||new Promise(n=>r(async()=>{await Pf(e,t),delete e._domUpdatePromise,n()}))}function Ny(e){return t=>{var n,s;const r=((s=(n=t.resolvedOptions.document)==null?void 0:n.head.querySelector('script[id="unhead:payload"]'))==null?void 0:s.innerHTML)||!1;return r&&t.push(JSON.parse(r)),{mode:"client",hooks:{"entries:updated":function(i){Dy(i,e)}}}}}const Hy=["templateParams","htmlAttrs","bodyAttrs"],jy={hooks:{"tag:normalise":function({tag:e}){["hid","vmid","key"].forEach(n=>{e.props[n]&&(e.key=e.props[n],delete e.props[n])});const r=$f(e)||(e.key?`${e.tag}:${e.key}`:!1);r&&(e._d=r)},"tags:resolve":function(e){const t={};e.tags.forEach(n=>{const s=(n.key?`${n.tag}:${n.key}`:n._d)||n._p,i=t[s];if(i){let a=n==null?void 0:n.tagDuplicateStrategy;if(!a&&Hy.includes(n.tag)&&(a="merge"),a==="merge"){const l=i.props;["class","style"].forEach(c=>{l[c]&&(n.props[c]?(c==="style"&&!l[c].endsWith(";")&&(l[c]+=";"),n.props[c]=`${l[c]} ${n.props[c]}`):n.props[c]=l[c])}),t[s].props={...l,...n.props};return}else if(n._e===i._e){i._duped=i._duped||[],n._d=`${i._d}:${i._duped.length+1}`,i._duped.push(n);return}else if(Is(n)>Is(i))return}const o=Object.keys(n.props).length+(n.innerHTML?1:0)+(n.textContent?1:0);if(fs.includes(n.tag)&&o===0){delete t[s];return}t[s]=n});const r=[];Object.values(t).forEach(n=>{const s=n._duped;delete n._duped,r.push(n),s&&r.push(...s)}),e.tags=r,e.tags=e.tags.filter(n=>!(n.tag==="meta"&&(n.props.name||n.props.property)&&!n.props.content))}}},Fy={mode:"server",hooks:{"tags:resolve":function(e){const t={};e.tags.filter(r=>["titleTemplate","templateParams","title"].includes(r.tag)&&r._m==="server").forEach(r=>{t[r.tag]=r.tag.startsWith("title")?r.textContent:r.props}),Object.keys(t).length&&e.tags.push({tag:"script",innerHTML:JSON.stringify(t),props:{id:"unhead:payload",type:"application/json"}})}}},Vy=["script","link","bodyAttrs"];function By(e){const t={},r={};return Object.entries(e.props).forEach(([n,s])=>{n.startsWith("on")&&typeof s=="function"?(Rf.includes(n)&&(t[n]=`this.dataset.${n} = true`),r[n]=s):t[n]=s}),{props:t,eventHandlers:r}}const Uy=e=>({hooks:{"tags:resolve":function(t){for(const r of t.tags)if(Vy.includes(r.tag)){const{props:n,eventHandlers:s}=By(r);r.props=n,Object.keys(s).length&&((r.props.src||r.props.href)&&(r.key=r.key||aa(r.props.src||r.props.href)),r._eventHandlers=s)}},"dom:renderTag":function(t,r,n){if(!t.tag._eventHandlers)return;const s=t.tag.tag==="bodyAttrs"?r.defaultView:t.$el;Object.entries(t.tag._eventHandlers).forEach(([i,o])=>{const a=`${t.tag._d||t.tag._p}:${i}`,l=i.slice(2).toLowerCase(),c=`data-h-${l}`;if(n(t.id,a,()=>{}),t.$el.hasAttribute(c))return;t.$el.setAttribute(c,"");let u;const f=p=>{o(p),u==null||u.disconnect()};i in t.$el.dataset?f(new Event(i.replace("on",""))):Rf.includes(i)&&typeof MutationObserver<"u"?(u=new MutationObserver(p=>{p.some(v=>v.attributeName===`data-${i}`)&&(f(new Event(i.replace("on",""))),u==null||u.disconnect())}),u.observe(t.$el,{attributes:!0})):s.addEventListener(l,f),n(t.id,a,()=>{u==null||u.disconnect(),s.removeEventListener(l,f),t.$el.removeAttribute(c)})})}}}),Ky=["link","style","script","noscript"],zy={hooks:{"tag:normalise":({tag:e})=>{e.key&&Ky.includes(e.tag)&&(e.props["data-hid"]=e._h=aa(e.key))}}},Wy={hooks:{"tags:resolve":e=>{const t=r=>{var n;return(n=e.tags.find(s=>s._d===r))==null?void 0:n._p};for(const{prefix:r,offset:n}of Iy)for(const s of e.tags.filter(i=>typeof i.tagPriority=="string"&&i.tagPriority.startsWith(r))){const i=t(s.tagPriority.replace(r,""));typeof i<"u"&&(s._p=i+n)}e.tags.sort((r,n)=>r._p-n._p).sort((r,n)=>Is(r)-Is(n))}}},qy={meta:"content",link:"href",htmlAttrs:"lang"},Gy=e=>({hooks:{"tags:resolve":t=>{var a;const{tags:r}=t,n=(a=r.find(l=>l.tag==="title"))==null?void 0:a.textContent,s=r.findIndex(l=>l.tag==="templateParams"),i=s!==-1?r[s].props:{},o=i.separator||"|";delete i.separator,i.pageTitle=ps(i.pageTitle||n||"",i,o);for(const l of r.filter(c=>c.processTemplateParams!==!1)){const c=qy[l.tag];c&&typeof l.props[c]=="string"?l.props[c]=ps(l.props[c],i,o):(l.processTemplateParams===!0||["titleTemplate","title"].includes(l.tag))&&["innerHTML","textContent"].forEach(u=>{typeof l[u]=="string"&&(l[u]=ps(l[u],i,o))})}e._templateParams=i,e._separator=o,t.tags=r.filter(l=>l.tag!=="templateParams")}}}),Jy={hooks:{"tags:resolve":e=>{const{tags:t}=e;let r=t.findIndex(s=>s.tag==="titleTemplate");const n=t.findIndex(s=>s.tag==="title");if(n!==-1&&r!==-1){const s=Sl(t[r].textContent,t[n].textContent);s!==null?t[n].textContent=s||t[n].textContent:delete t[n]}else if(r!==-1){const s=Sl(t[r].textContent);s!==null&&(t[r].textContent=s,t[r].tag="title",r=-1)}r!==-1&&delete t[r],e.tags=t.filter(Boolean)}}},Qy={hooks:{"tags:afterResolve":function(e){for(const t of e.tags)typeof t.innerHTML=="string"&&(t.innerHTML&&["application/ld+json","application/json"].includes(t.props.type)?t.innerHTML=t.innerHTML.replace(/</g,"\\u003C"):t.innerHTML=t.innerHTML.replace(new RegExp(`</${t.tag}`,"g"),`<\\/${t.tag}`))}}};let Cf;function Yy(e={}){const t=Xy(e);return t.use(Ny()),Cf=t}function Tl(e,t){return!e||e==="server"&&t||e==="client"&&!t}function Xy(e={}){const t=ff();t.addHooks(e.hooks||{}),e.document=e.document||(Ay?document:void 0);const r=!e.document,n=()=>{a.dirty=!0,t.callHook("entries:updated",a)};let s=0,i=[];const o=[],a={plugins:o,dirty:!1,resolvedOptions:e,hooks:t,headEntries(){return i},use(l){const c=typeof l=="function"?l(a):l;(!c.key||!o.some(u=>u.key===c.key))&&(o.push(c),Tl(c.mode,r)&&t.addHooks(c.hooks||{}))},push(l,c){c==null||delete c.head;const u={_i:s++,input:l,...c};return Tl(u.mode,r)&&(i.push(u),n()),{dispose(){i=i.filter(f=>f._i!==u._i),t.callHook("entries:updated",a),n()},patch(f){i=i.map(p=>(p._i===u._i&&(p.input=u.input=f),p)),n()}}},async resolveTags(){const l={tags:[],entries:[...i]};await t.callHook("entries:resolve",l);for(const c of l.entries){const u=c.resolvedInput||c.input;if(c.resolvedInput=await(c.transform?c.transform(u):u),c.resolvedInput)for(const f of await Ly(c)){const p={tag:f,entry:c,resolvedOptions:a.resolvedOptions};await t.callHook("tag:normalise",p),l.tags.push(p.tag)}}return await t.callHook("tags:beforeResolve",l),await t.callHook("tags:resolve",l),await t.callHook("tags:afterResolve",l),l.tags},ssr:r};return[jy,Fy,Uy,zy,Wy,Gy,Jy,Qy,...(e==null?void 0:e.plugins)||[]].forEach(l=>a.use(l)),a.hooks.callHook("init",a),a}function Zy(){return Cf}const e_=Qu.startsWith("3");function t_(e){return typeof e=="function"?e():Ee(e)}function Ms(e,t=""){if(e instanceof Promise)return e;const r=t_(e);return!e||!r?r:Array.isArray(r)?r.map(n=>Ms(n,t)):typeof r=="object"?Object.fromEntries(Object.entries(r).map(([n,s])=>n==="titleTemplate"||n.startsWith("on")?[n,Ee(s)]:[n,Ms(s,n)])):r}const r_={hooks:{"entries:resolve":function(e){for(const t of e.entries)t.resolvedInput=Ms(t.input)}}},Sf="usehead";function n_(e){return{install(r){e_&&(r.config.globalProperties.$unhead=e,r.config.globalProperties.$head=e,r.provide(Sf,e))}}.install}function s_(e={}){e.domDelayFn=e.domDelayFn||(r=>rr(()=>setTimeout(()=>r(),0)));const t=Yy(e);return t.use(r_),t.install=n_(t),t}const po=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},ho="__unhead_injection_handler__";function i_(e){po[ho]=e}function o_(){if(ho in po)return po[ho]();const e=Oe(Sf);return e||Zy()}function a_(e,t={}){const r=t.head||o_();if(r)return r.ssr?r.push(e,t):l_(r,e,t)}function l_(e,t,r={}){const n=_e(!1),s=_e({});bt(()=>{s.value=n.value?{}:Ms(t)});const i=e.push(s.value,r);return Je(s,a=>{i.patch(a)}),Ot()&&(Un(()=>{i.dispose()}),$u(()=>{n.value=!0}),wu(()=>{n.value=!1})),i}function vt(e){if(typeof e!="object")return e;var t,r,n=Object.prototype.toString.call(e);if(n==="[object Object]"){if(e.constructor!==Object&&typeof e.constructor=="function"){r=new e.constructor;for(t in e)e.hasOwnProperty(t)&&r[t]!==e[t]&&(r[t]=vt(e[t]))}else{r={};for(t in e)t==="__proto__"?Object.defineProperty(r,t,{value:vt(e[t]),configurable:!0,enumerable:!0,writable:!0}):r[t]=vt(e[t])}return r}if(n==="[object Array]"){for(t=e.length,r=Array(t);t--;)r[t]=vt(e[t]);return r}return n==="[object Set]"?(r=new Set,e.forEach(function(s){r.add(vt(s))}),r):n==="[object Map]"?(r=new Map,e.forEach(function(s,i){r.set(vt(i),vt(s))}),r):n==="[object Date]"?new Date(+e):n==="[object RegExp]"?(r=new RegExp(e.source,e.flags),r.lastIndex=e.lastIndex,r):n==="[object DataView]"?new e.constructor(vt(e.buffer)):n==="[object ArrayBuffer]"?e.slice(0):n.slice(-6)==="Array]"?new e.constructor(e):e}function Ai(e){return e!==null&&typeof e=="object"}function mo(e,t,r=".",n){if(!Ai(t))return mo(e,{},r,n);const s=Object.assign({},t);for(const i in e){if(i==="__proto__"||i==="constructor")continue;const o=e[i];o!=null&&(n&&n(s,i,o,r)||(Array.isArray(o)&&Array.isArray(s[i])?s[i]=[...o,...s[i]]:Ai(o)&&Ai(s[i])?s[i]=mo(o,s[i],(r?`${r}.`:"")+i.toString(),n):s[i]=o))}return s}function kf(e){return(...t)=>t.reduce((r,n)=>mo(r,n,"",e),{})}const BP=kf(),c_=kf((e,t,r)=>{if(typeof e[t]<"u"&&typeof r=="function")return e[t]=r(e[t]),!0}),u_="docs",f_="pnpm@8.6.2",p_="2.1.0-alpha.76",d_={build:"nuxt build","build:docs-storybook":'STATIC_BASE_PATH="/storybook/" pnpm -F ripple-storybook static:build --output-dir ../../docs/public/storybook',dev:"nuxt dev",generate:"pnpm build:docs-storybook && nuxt generate",preview:"nuxt preview"},h_={"@dpc-sdp/ripple-ui-core":"workspace:*","@dpc-sdp/ripple-ui-forms":"workspace:*","@dpc-sdp/stylelint-config-ripple":"workspace:*","@modyfi/vite-plugin-yaml":"^1.0.4","@nuxt/content":"^2.12.0","highlight.js":"^11.7.0","iframe-resizer":"^4.3.6",nuxt:"^3.10.0"},m_={"@iconify/vue":"^4.1.0","@nuxt/content":"^2.12.0","@nuxthq/studio":"^1.0.0","@types/iframe-resizer":"^3.5.9"},g_={private:!0,name:u_,packageManager:f_,version:p_,scripts:d_,dependencies:h_,devDependencies:m_},y_={title:"Ripple Design System",subheader:"Ripple is the design system for Victorian government digital products",sections:{"design-system":{title:"Ripple Design System",color:"var(--rpl-clr-primary)",neutralFooter:!1},framework:{title:"Ripple Framework",color:"var(--rpl-clr-dark)",neutralFooter:!0}},version:g_.version,description:"Make your service consistent with vic.gov.au digital branding. Learn from the research and experience of other service teams and avoid repeating work that’s already been done.",socials:{github:"dpc-sdp/ripple-framework"},storybookBaseUrl:"/storybook",hideModulesSection:!1},__={nuxt:{buildId:"1362ce16-7e83-433f-9854-d1c79bedd190"}},v_=c_(y_,__);function b_(){const e=$e();return e._appConfig||(e._appConfig=He(v_)),e._appConfig}const UP=!1,go=!1,w_=!1,KP={componentName:"NuxtLink"},zP={deep:!0},$_="#__nuxt";let ds,Af;function E_(){var t;const e=(t=b_().nuxt)==null?void 0:t.buildId;return ds=$fetch(oa(`builds/meta/${e}.json`)),ds.then(r=>{Af=Qg(r.matcher)}),ds}function li(){return ds||E_()}async function Tf(e){return await li(),_f({},...Af.matchAll(e).reverse())}function xl(e,t={}){const r=R_(e,t),n=$e(),s=n._payloadCache=n._payloadCache||{};return r in s||(s[r]=P_(e).then(i=>i?xf(r).then(o=>o||(delete s[r],null)):(s[r]=null,null))),s[r]}const Ol="json";function R_(e,t={}){const r=new URL(e,"http://localhost");if(r.host!=="localhost"||br(r.pathname,{acceptRelative:!0}))throw new Error("Payload URL must not include hostname: "+e);const n=t.hash||(t.fresh?Date.now():"");return ln(dt().app.baseURL,r.pathname,n?`_payload.${n}.${Ol}`:`_payload.${Ol}`)}async function xf(e){const t=fetch(e).then(r=>r.text().then(Of));try{return await t}catch(r){console.warn("[nuxt] Cannot load payload ",e,r)}return null}async function P_(e=$r().path){if(e=wr(e),(await li()).prerendered.includes(e))return!0;const r=await Tf(e);return!!r.prerender&&!r.redirect}let as=null;async function C_(){if(as)return as;const e=document.getElementById("__NUXT_DATA__");if(!e)return{};const t=await Of(e.textContent||""),r=e.dataset.src?await xf(e.dataset.src):void 0;return as={...t,...r,...window.__NUXT__},as}async function Of(e){return await Ey(e,$e()._payloadRevivers)}function S_(e,t){$e()._payloadRevivers[e]=t}const Ll={NuxtError:e=>ai(e),EmptyShallowRef:e=>Jt(e==="_"?void 0:e==="0n"?BigInt(0):Ls(e)),EmptyRef:e=>_e(e==="_"?void 0:e==="0n"?BigInt(0):Ls(e)),ShallowRef:e=>Jt(e),ShallowReactive:e=>mr(e),Ref:e=>_e(e),Reactive:e=>He(e)},k_=it({name:"nuxt:revive-payload:client",order:-30,async setup(e){let t,r;for(const n in Ll)S_(n,Ll[n]);Object.assign(e.payload,([t,r]=Dn(()=>e.runWithContext(C_)),t=await t,r(),t)),window.__NUXT__=e.payload}}),A_=[],T_=it({name:"nuxt:head",enforce:"pre",setup(e){const t=s_({plugins:A_});i_(()=>$e().vueApp._context.provides.usehead),e.vueApp.use(t);{let r=!0;const n=async()=>{r=!1,await Pf(t)};t.hooks.hook("dom:beforeRender",s=>{s.shouldRender=!r}),e.hooks.hook("page:start",()=>{r=!0}),e.hooks.hook("page:finish",()=>{e.isHydrating||n()}),e.hooks.hook("app:error",n),e.hooks.hook("app:suspense:resolve",n)}}});/*!
+`)},domwindow(){return n("domwindow")},bigint(s){return n("bigint:"+s.toString())},process(){return n("process")},timer(){return n("timer")},pipe(){return n("pipe")},tcp(){return n("tcp")},udp(){return n("udp")},tty(){return n("tty")},statwatcher(){return n("statwatcher")},securecontext(){return n("securecontext")},connection(){return n("connection")},zlib(){return n("zlib")},context(){return n("context")},nodescript(){return n("nodescript")},httpparser(){return n("httpparser")},dataview(){return n("dataview")},signal(){return n("signal")},fsevent(){return n("fsevent")},tlswrap(){return n("tlswrap")}}}const mf="[native code] }",Hg=mf.length;function $l(e){return typeof e!="function"?!1:Function.prototype.toString.call(e).slice(-Hg)===mf}class Yt{constructor(t,r){t=this.words=t||[],this.sigBytes=r===void 0?t.length*4:r}toString(t){return(t||jg).stringify(this)}concat(t){if(this.clamp(),this.sigBytes%4)for(let r=0;r<t.sigBytes;r++){const n=t.words[r>>>2]>>>24-r%4*8&255;this.words[this.sigBytes+r>>>2]|=n<<24-(this.sigBytes+r)%4*8}else for(let r=0;r<t.sigBytes;r+=4)this.words[this.sigBytes+r>>>2]=t.words[r>>>2];return this.sigBytes+=t.sigBytes,this}clamp(){this.words[this.sigBytes>>>2]&=4294967295<<32-this.sigBytes%4*8,this.words.length=Math.ceil(this.sigBytes/4)}clone(){return new Yt([...this.words])}}const jg={stringify(e){const t=[];for(let r=0;r<e.sigBytes;r++){const n=e.words[r>>>2]>>>24-r%4*8&255;t.push((n>>>4).toString(16),(n&15).toString(16))}return t.join("")}},Fg={stringify(e){const t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",r=[];for(let n=0;n<e.sigBytes;n+=3){const s=e.words[n>>>2]>>>24-n%4*8&255,i=e.words[n+1>>>2]>>>24-(n+1)%4*8&255,o=e.words[n+2>>>2]>>>24-(n+2)%4*8&255,a=s<<16|i<<8|o;for(let l=0;l<4&&n*8+l*6<e.sigBytes*8;l++)r.push(t.charAt(a>>>6*(3-l)&63))}return r.join("")}},Vg={parse(e){const t=e.length,r=[];for(let n=0;n<t;n++)r[n>>>2]|=(e.charCodeAt(n)&255)<<24-n%4*8;return new Yt(r,t)}},Bg={parse(e){return Vg.parse(unescape(encodeURIComponent(e)))}};class Ug{constructor(){this._data=new Yt,this._nDataBytes=0,this._minBufferSize=0,this.blockSize=512/32}reset(){this._data=new Yt,this._nDataBytes=0}_append(t){typeof t=="string"&&(t=Bg.parse(t)),this._data.concat(t),this._nDataBytes+=t.sigBytes}_doProcessBlock(t,r){}_process(t){let r,n=this._data.sigBytes/(this.blockSize*4);t?n=Math.ceil(n):n=Math.max((n|0)-this._minBufferSize,0);const s=n*this.blockSize,i=Math.min(s*4,this._data.sigBytes);if(s){for(let o=0;o<s;o+=this.blockSize)this._doProcessBlock(this._data.words,o);r=this._data.words.splice(0,s),this._data.sigBytes-=i}return new Yt(r,i)}}class Kg extends Ug{update(t){return this._append(t),this._process(),this}finalize(t){t&&this._append(t)}}const El=[1779033703,-1150833019,1013904242,-1521486534,1359893119,-1694144372,528734635,1541459225],zg=[1116352408,1899447441,-1245643825,-373957723,961987163,1508970993,-1841331548,-1424204075,-670586216,310598401,607225278,1426881987,1925078388,-2132889090,-1680079193,-1046744716,-459576895,-272742522,264347078,604807628,770255983,1249150122,1555081692,1996064986,-1740746414,-1473132947,-1341970488,-1084653625,-958395405,-710438585,113926993,338241895,666307205,773529912,1294757372,1396182291,1695183700,1986661051,-2117940946,-1838011259,-1564481375,-1474664885,-1035236496,-949202525,-778901479,-694614492,-200395387,275423344,430227734,506948616,659060556,883997877,958139571,1322822218,1537002063,1747873779,1955562222,2024104815,-2067236844,-1933114872,-1866530822,-1538233109,-1090935817,-965641998],cr=[];class Wg extends Kg{constructor(){super(...arguments),this._hash=new Yt([...El])}reset(){super.reset(),this._hash=new Yt([...El])}_doProcessBlock(t,r){const n=this._hash.words;let s=n[0],i=n[1],o=n[2],a=n[3],l=n[4],c=n[5],u=n[6],f=n[7];for(let p=0;p<64;p++){if(p<16)cr[p]=t[r+p]|0;else{const h=cr[p-15],g=(h<<25|h>>>7)^(h<<14|h>>>18)^h>>>3,$=cr[p-2],m=($<<15|$>>>17)^($<<13|$>>>19)^$>>>10;cr[p]=g+cr[p-7]+m+cr[p-16]}const d=l&c^~l&u,v=s&i^s&o^i&o,_=(s<<30|s>>>2)^(s<<19|s>>>13)^(s<<10|s>>>22),R=(l<<26|l>>>6)^(l<<21|l>>>11)^(l<<7|l>>>25),w=f+R+d+zg[p]+cr[p],b=_+v;f=u,u=c,c=l,l=a+w|0,a=o,o=i,i=s,s=w+b|0}n[0]=n[0]+s|0,n[1]=n[1]+i|0,n[2]=n[2]+o|0,n[3]=n[3]+a|0,n[4]=n[4]+l|0,n[5]=n[5]+c|0,n[6]=n[6]+u|0,n[7]=n[7]+f|0}finalize(t){super.finalize(t);const r=this._nDataBytes*8,n=this._data.sigBytes*8;return this._data.words[n>>>5]|=128<<24-n%32,this._data.words[(n+64>>>9<<4)+14]=Math.floor(r/4294967296),this._data.words[(n+64>>>9<<4)+15]=r,this._data.sigBytes=this._data.words.length*4,this._process(),this._hash}}function qg(e){return new Wg().finalize(e).toString(Fg)}function Os(e,t={}){const r=typeof e=="string"?e:ao(e,t);return qg(r).slice(0,10)}function Gg(e,t,r={}){return e===t||ao(e,r)===ao(t,r)}function Jg(e){return{ctx:{table:e},matchAll:t=>yf(t,e)}}function gf(e){const t={};for(const r in e)t[r]=r==="dynamic"?new Map(Object.entries(e[r]).map(([n,s])=>[n,gf(s)])):new Map(Object.entries(e[r]));return t}function Qg(e){return Jg(gf(e))}function yf(e,t){const r=[];for(const[s,i]of Rl(t.wildcard))e.startsWith(s)&&r.push(i);for(const[s,i]of Rl(t.dynamic))if(e.startsWith(s+"/")){const o="/"+e.slice(s.length).split("/").splice(2).join("/");r.push(...yf(o,i))}const n=t.static.get(e);return n&&r.push(n),r.filter(Boolean)}function Rl(e){return[...e.entries()].sort((t,r)=>t[0].length-r[0].length)}const Yg=/"(?:_|\\u0{2}5[Ff]){2}(?:p|\\u0{2}70)(?:r|\\u0{2}72)(?:o|\\u0{2}6[Ff])(?:t|\\u0{2}74)(?:o|\\u0{2}6[Ff])(?:_|\\u0{2}5[Ff]){2}"\s*:/,Xg=/"(?:c|\\u0063)(?:o|\\u006[Ff])(?:n|\\u006[Ee])(?:s|\\u0073)(?:t|\\u0074)(?:r|\\u0072)(?:u|\\u0075)(?:c|\\u0063)(?:t|\\u0074)(?:o|\\u006[Ff])(?:r|\\u0072)"\s*:/,Zg=/^\s*["[{]|^\s*-?\d{1,16}(\.\d{1,17})?([Ee][+-]?\d+)?\s*$/;function ey(e,t){if(e==="__proto__"||e==="constructor"&&t&&typeof t=="object"&&"prototype"in t){ty(e);return}return t}function ty(e){console.warn(`[destr] Dropping "${e}" key to prevent prototype pollution.`)}function Ls(e,t={}){if(typeof e!="string")return e;const r=e.trim();if(e[0]==='"'&&e.at(-1)==='"'&&!e.includes("\\"))return r.slice(1,-1);if(r.length<=9){const n=r.toLowerCase();if(n==="true")return!0;if(n==="false")return!1;if(n==="undefined")return;if(n==="null")return null;if(n==="nan")return Number.NaN;if(n==="infinity")return Number.POSITIVE_INFINITY;if(n==="-infinity")return Number.NEGATIVE_INFINITY}if(!Zg.test(e)){if(t.strict)throw new SyntaxError("[destr] Invalid JSON");return e}try{if(Yg.test(e)||Xg.test(e)){if(t.strict)throw new Error("[destr] Possible prototype pollution");return JSON.parse(e,ey)}return JSON.parse(e)}catch(n){if(t.strict)throw n;return e}}function ki(e){if(e===null||typeof e!="object")return!1;const t=Object.getPrototypeOf(e);return t!==null&&t!==Object.prototype&&Object.getPrototypeOf(t)!==null||Symbol.iterator in e?!1:Symbol.toStringTag in e?Object.prototype.toString.call(e)==="[object Module]":!0}function lo(e,t,r=".",n){if(!ki(t))return lo(e,{},r,n);const s=Object.assign({},t);for(const i in e){if(i==="__proto__"||i==="constructor")continue;const o=e[i];o!=null&&(n&&n(s,i,o,r)||(Array.isArray(o)&&Array.isArray(s[i])?s[i]=[...o,...s[i]]:ki(o)&&ki(s[i])?s[i]=lo(o,s[i],(r?`${r}.`:"")+i.toString(),n):s[i]=o))}return s}function ry(e){return(...t)=>t.reduce((r,n)=>lo(r,n,"",e),{})}const _f=ry();function ny(e,t){try{return t in e}catch{return!1}}var sy=Object.defineProperty,iy=(e,t,r)=>t in e?sy(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,ur=(e,t,r)=>(iy(e,typeof t!="symbol"?t+"":t,r),r);class co extends Error{constructor(t,r={}){super(t,r),ur(this,"statusCode",500),ur(this,"fatal",!1),ur(this,"unhandled",!1),ur(this,"statusMessage"),ur(this,"data"),ur(this,"cause"),r.cause&&!this.cause&&(this.cause=r.cause)}toJSON(){const t={message:this.message,statusCode:fo(this.statusCode,500)};return this.statusMessage&&(t.statusMessage=vf(this.statusMessage)),this.data!==void 0&&(t.data=this.data),t}}ur(co,"__h3_error__",!0);function uo(e){if(typeof e=="string")return new co(e);if(oy(e))return e;const t=new co(e.message??e.statusMessage??"",{cause:e.cause||e});if(ny(e,"stack"))try{Object.defineProperty(t,"stack",{get(){return e.stack}})}catch{try{t.stack=e.stack}catch{}}if(e.data&&(t.data=e.data),e.statusCode?t.statusCode=fo(e.statusCode,t.statusCode):e.status&&(t.statusCode=fo(e.status,t.statusCode)),e.statusMessage?t.statusMessage=e.statusMessage:e.statusText&&(t.statusMessage=e.statusText),t.statusMessage){const r=t.statusMessage;vf(t.statusMessage)!==r&&console.warn("[h3] Please prefer using `message` for longer error messages instead of `statusMessage`. In the future, `statusMessage` will be sanitized by default.")}return e.fatal!==void 0&&(t.fatal=e.fatal),e.unhandled!==void 0&&(t.unhandled=e.unhandled),t}function oy(e){var t;return((t=e==null?void 0:e.constructor)==null?void 0:t.__h3_error__)===!0}const ay=/[^\u0009\u0020-\u007E]/g;function vf(e=""){return e.replace(ay,"")}function fo(e,t=200){return!e||(typeof e=="string"&&(e=Number.parseInt(e,10)),e<100||e>999)?t:e}const ly=Symbol("layout-meta"),ii=Symbol("route"),gt=()=>{var e;return(e=$e())==null?void 0:e.$router},$r=()=>Tu()?Oe(ii,$e()._route):$e()._route;const cy=(e,t,r={})=>{const n=$e(),s=r.global||typeof e!="string",i=typeof e!="string"?e:t;if(!i){console.warn("[nuxt] No route middleware passed to `addRouteMiddleware`.",e);return}s?n._middleware.global.push(i):n._middleware.named[e]=i},uy=()=>{try{if($e()._processingMiddleware)return!0}catch{return!0}return!1},fy=(e,t)=>{e||(e="/");const r=typeof e=="string"?e:nf(e.path||"/",e.query||{})+(e.hash||"");if(t!=null&&t.open){{const{target:a="_blank",windowFeatures:l={}}=t.open,c=Object.entries(l).filter(([u,f])=>f!==void 0).map(([u,f])=>`${u.toLowerCase()}=${f}`).join(", ");open(r,a,c)}return Promise.resolve()}const n=(t==null?void 0:t.external)||br(r,{acceptRelative:!0});if(n){if(!(t!=null&&t.external))throw new Error("Navigating to an external URL is not allowed by default. Use `navigateTo(url, { external: true })`.");const a=si(r).protocol;if(a&&qm(a))throw new Error(`Cannot navigate to a URL with '${a}' protocol.`)}const s=uy();if(!n&&s)return e;const i=gt(),o=$e();return n?(o._scope.stop(),t!=null&&t.replace?location.replace(r):location.href=r,s?o.isHydrating?new Promise(()=>{}):!1:Promise.resolve()):t!=null&&t.replace?i.replace(e):i.push(e)},bf="__nuxt_error",oi=()=>qo($e().payload,"error"),Dr=e=>{const t=ai(e);try{const r=$e(),n=oi();r.hooks.callHook("app:error",t),n.value=n.value||t}catch{throw t}return t},py=async(e={})=>{const t=$e(),r=oi();t.callHook("app:error:cleared",e),e.redirect&&await gt().replace(e.redirect),r.value=null},dy=e=>!!e&&typeof e=="object"&&bf in e,ai=e=>{const t=uo(e);return Object.defineProperty(t,bf,{value:!0,configurable:!1,writable:!1}),t},hy="modulepreload",my=function(e,t){return e[0]==="."?new URL(e,t).href:e},Pl={},gy=function(t,r,n){let s=Promise.resolve();if(r&&r.length>0){const i=document.getElementsByTagName("link");s=Promise.all(r.map(o=>{if(o=my(o,n),o in Pl)return;Pl[o]=!0;const a=o.endsWith(".css"),l=a?'[rel="stylesheet"]':"";if(!!n)for(let f=i.length-1;f>=0;f--){const p=i[f];if(p.href===o&&(!a||p.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${o}"]${l}`))return;const u=document.createElement("link");if(u.rel=a?"stylesheet":hy,a||(u.as="script",u.crossOrigin=""),u.href=o,document.head.appendChild(u),a)return new Promise((f,p)=>{u.addEventListener("load",f),u.addEventListener("error",()=>p(new Error(`Unable to preload CSS for ${o}`)))})}))}return s.then(()=>t()).catch(i=>{const o=new Event("vite:preloadError",{cancelable:!0});if(o.payload=i,window.dispatchEvent(o),!o.defaultPrevented)throw i})},U=(...e)=>gy(...e).catch(t=>{const r=new Event("nuxt.preloadError");throw r.payload=t,window.dispatchEvent(r),t}),yy=-1,_y=-2,vy=-3,by=-4,wy=-5,$y=-6;function Ey(e,t){return Ry(JSON.parse(e),t)}function Ry(e,t){if(typeof e=="number")return s(e,!0);if(!Array.isArray(e)||e.length===0)throw new Error("Invalid input");const r=e,n=Array(r.length);function s(i,o=!1){if(i===yy)return;if(i===vy)return NaN;if(i===by)return 1/0;if(i===wy)return-1/0;if(i===$y)return-0;if(o)throw new Error("Invalid input");if(i in n)return n[i];const a=r[i];if(!a||typeof a!="object")n[i]=a;else if(Array.isArray(a))if(typeof a[0]=="string"){const l=a[0],c=t==null?void 0:t[l];if(c)return n[i]=c(s(a[1]));switch(l){case"Date":n[i]=new Date(a[1]);break;case"Set":const u=new Set;n[i]=u;for(let d=1;d<a.length;d+=1)u.add(s(a[d]));break;case"Map":const f=new Map;n[i]=f;for(let d=1;d<a.length;d+=2)f.set(s(a[d]),s(a[d+1]));break;case"RegExp":n[i]=new RegExp(a[1],a[2]);break;case"Object":n[i]=Object(a[1]);break;case"BigInt":n[i]=BigInt(a[1]);break;case"null":const p=Object.create(null);n[i]=p;for(let d=1;d<a.length;d+=2)p[a[d]]=s(a[d+1]);break;default:throw new Error(`Unknown type ${l}`)}}else{const l=new Array(a.length);n[i]=l;for(let c=0;c<a.length;c+=1){const u=a[c];u!==_y&&(l[c]=s(u))}}else{const l={};n[i]=l;for(const c in a){const u=a[c];l[c]=s(u)}}return n[i]}return s(0)}function Py(e){return Array.isArray(e)?e:[e]}const Cy=["title","titleTemplate","script","style","noscript"],fs=["base","meta","link","style","script","noscript"],Sy=["title","titleTemplate","templateParams","base","htmlAttrs","bodyAttrs","meta","link","style","script","noscript"],ky=["base","title","titleTemplate","bodyAttrs","htmlAttrs","templateParams"],wf=["tagPosition","tagPriority","tagDuplicateStrategy","children","innerHTML","textContent","processTemplateParams"],Ay=typeof window<"u";function aa(e){let t=9;for(let r=0;r<e.length;)t=Math.imul(t^e.charCodeAt(r++),9**9);return((t^t>>>9)+65536).toString(16).substring(1,8).toLowerCase()}function Cl(e){return e._h||aa(e._d?e._d:`${e.tag}:${e.textContent||e.innerHTML||""}:${Object.entries(e.props).map(([t,r])=>`${t}:${String(r)}`).join(",")}`)}function $f(e,t){const{props:r,tag:n}=e;if(ky.includes(n))return n;if(n==="link"&&r.rel==="canonical")return"canonical";if(r.charset)return"charset";const s=["id"];n==="meta"&&s.push("name","property","http-equiv");for(const i of s)if(typeof r[i]<"u"){const o=String(r[i]);return t&&!t(o)?!1:`${n}:${i}:${o}`}return!1}function Sl(e,t){return e==null?t||null:typeof e=="function"?e(t):e}async function Ty(e,t,r){const n={tag:e,props:await Ef(typeof t=="object"&&typeof t!="function"&&!(t instanceof Promise)?{...t}:{[["script","noscript","style"].includes(e)?"innerHTML":"textContent"]:t},["templateParams","titleTemplate"].includes(e))};return wf.forEach(s=>{const i=typeof n.props[s]<"u"?n.props[s]:r[s];typeof i<"u"&&((!["innerHTML","textContent","children"].includes(s)||Cy.includes(n.tag))&&(n[s==="children"?"innerHTML":s]=i),delete n.props[s])}),n.props.body&&(n.tagPosition="bodyClose",delete n.props.body),n.tag==="script"&&typeof n.innerHTML=="object"&&(n.innerHTML=JSON.stringify(n.innerHTML),n.props.type=n.props.type||"application/json"),Array.isArray(n.props.content)?n.props.content.map(s=>({...n,props:{...n.props,content:s}})):n}function xy(e){return typeof e=="object"&&!Array.isArray(e)&&(e=Object.keys(e).filter(t=>e[t])),(Array.isArray(e)?e.join(" "):e).split(" ").filter(t=>t.trim()).filter(Boolean).join(" ")}async function Ef(e,t){for(const r of Object.keys(e)){if(r==="class"){e[r]=xy(e[r]);continue}if(e[r]instanceof Promise&&(e[r]=await e[r]),!t&&!wf.includes(r)){const n=String(e[r]),s=r.startsWith("data-");n==="true"||n===""?e[r]=s?"true":!0:e[r]||(s&&n==="false"?e[r]="false":delete e[r])}}return e}const Oy=10;async function Ly(e){const t=[];return Object.entries(e.resolvedInput).filter(([r,n])=>typeof n<"u"&&Sy.includes(r)).forEach(([r,n])=>{const s=Py(n);t.push(...s.map(i=>Ty(r,i,e)).flat())}),(await Promise.all(t)).flat().filter(Boolean).map((r,n)=>(r._e=e._i,e.mode&&(r._m=e.mode),r._p=(e._i<<Oy)+n,r))}const kl={base:-10,title:10},Al={critical:-80,high:-10,low:20};function Is(e){let t=100;const r=e.tagPriority;return typeof r=="number"?r:(e.tag==="meta"?(e.props["http-equiv"]==="content-security-policy"&&(t=-30),e.props.charset&&(t=-20),e.props.name==="viewport"&&(t=-15)):e.tag==="link"&&e.props.rel==="preconnect"?t=20:e.tag in kl&&(t=kl[e.tag]),typeof r=="string"&&r in Al?t+Al[r]:t)}const Iy=[{prefix:"before:",offset:-1},{prefix:"after:",offset:1}],Rf=["onload","onerror","onabort","onprogress","onloadstart"],Vt="%separator";function ps(e,t,r){if(typeof e!="string"||!e.includes("%"))return e;function n(o){let a;return["s","pageTitle"].includes(o)?a=t.pageTitle:o.includes(".")?a=o.split(".").reduce((l,c)=>l&&l[c]||void 0,t):a=t[o],typeof a<"u"?(a||"").replace(/"/g,'\\"'):!1}let s=e;try{s=decodeURI(e)}catch{}return(s.match(/%(\w+\.+\w+)|%(\w+)/g)||[]).sort().reverse().forEach(o=>{const a=n(o.slice(1));typeof a=="string"&&(e=e.replace(new RegExp(`\\${o}(\\W|$)`,"g"),(l,c)=>`${a}${c}`).trim())}),e.includes(Vt)&&(e.endsWith(Vt)&&(e=e.slice(0,-Vt.length).trim()),e.startsWith(Vt)&&(e=e.slice(Vt.length).trim()),e=e.replace(new RegExp(`\\${Vt}\\s*\\${Vt}`,"g"),Vt),e=ps(e,{separator:r},r)),e}async function My(e){const t={tag:e.tagName.toLowerCase(),props:await Ef(e.getAttributeNames().reduce((r,n)=>({...r,[n]:e.getAttribute(n)}),{})),innerHTML:e.innerHTML};return t._d=$f(t),t}async function Pf(e,t={}){var u;const r=t.document||e.resolvedOptions.document;if(!r)return;const n={shouldRender:e.dirty,tags:[]};if(await e.hooks.callHook("dom:beforeRender",n),!n.shouldRender)return;const s=(await e.resolveTags()).map(f=>({tag:f,id:fs.includes(f.tag)?Cl(f):f.tag,shouldRender:!0}));let i=e._dom;if(!i){i={elMap:{htmlAttrs:r.documentElement,bodyAttrs:r.body}};for(const f of["body","head"]){const p=(u=r==null?void 0:r[f])==null?void 0:u.children;for(const d of[...p].filter(v=>fs.includes(v.tagName.toLowerCase())))i.elMap[d.getAttribute("data-hid")||Cl(await My(d))]=d}}i.pendingSideEffects={...i.sideEffects||{}},i.sideEffects={};function o(f,p,d){const v=`${f}:${p}`;i.sideEffects[v]=d,delete i.pendingSideEffects[v]}function a({id:f,$el:p,tag:d}){const v=d.tag.endsWith("Attrs");i.elMap[f]=p,v||(["textContent","innerHTML"].forEach(_=>{d[_]&&d[_]!==p[_]&&(p[_]=d[_])}),o(f,"el",()=>{i.elMap[f].remove(),delete i.elMap[f]})),Object.entries(d.props).forEach(([_,R])=>{const w=`attr:${_}`;if(_==="class")for(const b of(R||"").split(" ").filter(Boolean))v&&o(f,`${w}:${b}`,()=>p.classList.remove(b)),!p.classList.contains(b)&&p.classList.add(b);else p.getAttribute(_)!==R&&p.setAttribute(_,R===!0?"":String(R)),v&&o(f,w,()=>p.removeAttribute(_))})}const l=[],c={bodyClose:void 0,bodyOpen:void 0,head:void 0};for(const f of s){const{tag:p,shouldRender:d,id:v}=f;if(d){if(p.tag==="title"){r.title=p.textContent;continue}f.$el=f.$el||i.elMap[v],f.$el?a(f):fs.includes(p.tag)&&l.push(f)}}for(const f of l){const p=f.tag.tagPosition||"head";f.$el=r.createElement(f.tag.tag),a(f),c[p]=c[p]||r.createDocumentFragment(),c[p].appendChild(f.$el)}for(const f of s)await e.hooks.callHook("dom:renderTag",f,r,o);c.head&&r.head.appendChild(c.head),c.bodyOpen&&r.body.insertBefore(c.bodyOpen,r.body.firstChild),c.bodyClose&&r.body.appendChild(c.bodyClose),Object.values(i.pendingSideEffects).forEach(f=>f()),e._dom=i,e.dirty=!1,await e.hooks.callHook("dom:rendered",{renders:s})}async function Dy(e,t={}){const r=t.delayFn||(n=>setTimeout(n,10));return e._domUpdatePromise=e._domUpdatePromise||new Promise(n=>r(async()=>{await Pf(e,t),delete e._domUpdatePromise,n()}))}function Ny(e){return t=>{var n,s;const r=((s=(n=t.resolvedOptions.document)==null?void 0:n.head.querySelector('script[id="unhead:payload"]'))==null?void 0:s.innerHTML)||!1;return r&&t.push(JSON.parse(r)),{mode:"client",hooks:{"entries:updated":function(i){Dy(i,e)}}}}}const Hy=["templateParams","htmlAttrs","bodyAttrs"],jy={hooks:{"tag:normalise":function({tag:e}){["hid","vmid","key"].forEach(n=>{e.props[n]&&(e.key=e.props[n],delete e.props[n])});const r=$f(e)||(e.key?`${e.tag}:${e.key}`:!1);r&&(e._d=r)},"tags:resolve":function(e){const t={};e.tags.forEach(n=>{const s=(n.key?`${n.tag}:${n.key}`:n._d)||n._p,i=t[s];if(i){let a=n==null?void 0:n.tagDuplicateStrategy;if(!a&&Hy.includes(n.tag)&&(a="merge"),a==="merge"){const l=i.props;["class","style"].forEach(c=>{l[c]&&(n.props[c]?(c==="style"&&!l[c].endsWith(";")&&(l[c]+=";"),n.props[c]=`${l[c]} ${n.props[c]}`):n.props[c]=l[c])}),t[s].props={...l,...n.props};return}else if(n._e===i._e){i._duped=i._duped||[],n._d=`${i._d}:${i._duped.length+1}`,i._duped.push(n);return}else if(Is(n)>Is(i))return}const o=Object.keys(n.props).length+(n.innerHTML?1:0)+(n.textContent?1:0);if(fs.includes(n.tag)&&o===0){delete t[s];return}t[s]=n});const r=[];Object.values(t).forEach(n=>{const s=n._duped;delete n._duped,r.push(n),s&&r.push(...s)}),e.tags=r,e.tags=e.tags.filter(n=>!(n.tag==="meta"&&(n.props.name||n.props.property)&&!n.props.content))}}},Fy={mode:"server",hooks:{"tags:resolve":function(e){const t={};e.tags.filter(r=>["titleTemplate","templateParams","title"].includes(r.tag)&&r._m==="server").forEach(r=>{t[r.tag]=r.tag.startsWith("title")?r.textContent:r.props}),Object.keys(t).length&&e.tags.push({tag:"script",innerHTML:JSON.stringify(t),props:{id:"unhead:payload",type:"application/json"}})}}},Vy=["script","link","bodyAttrs"];function By(e){const t={},r={};return Object.entries(e.props).forEach(([n,s])=>{n.startsWith("on")&&typeof s=="function"?(Rf.includes(n)&&(t[n]=`this.dataset.${n} = true`),r[n]=s):t[n]=s}),{props:t,eventHandlers:r}}const Uy=e=>({hooks:{"tags:resolve":function(t){for(const r of t.tags)if(Vy.includes(r.tag)){const{props:n,eventHandlers:s}=By(r);r.props=n,Object.keys(s).length&&((r.props.src||r.props.href)&&(r.key=r.key||aa(r.props.src||r.props.href)),r._eventHandlers=s)}},"dom:renderTag":function(t,r,n){if(!t.tag._eventHandlers)return;const s=t.tag.tag==="bodyAttrs"?r.defaultView:t.$el;Object.entries(t.tag._eventHandlers).forEach(([i,o])=>{const a=`${t.tag._d||t.tag._p}:${i}`,l=i.slice(2).toLowerCase(),c=`data-h-${l}`;if(n(t.id,a,()=>{}),t.$el.hasAttribute(c))return;t.$el.setAttribute(c,"");let u;const f=p=>{o(p),u==null||u.disconnect()};i in t.$el.dataset?f(new Event(i.replace("on",""))):Rf.includes(i)&&typeof MutationObserver<"u"?(u=new MutationObserver(p=>{p.some(v=>v.attributeName===`data-${i}`)&&(f(new Event(i.replace("on",""))),u==null||u.disconnect())}),u.observe(t.$el,{attributes:!0})):s.addEventListener(l,f),n(t.id,a,()=>{u==null||u.disconnect(),s.removeEventListener(l,f),t.$el.removeAttribute(c)})})}}}),Ky=["link","style","script","noscript"],zy={hooks:{"tag:normalise":({tag:e})=>{e.key&&Ky.includes(e.tag)&&(e.props["data-hid"]=e._h=aa(e.key))}}},Wy={hooks:{"tags:resolve":e=>{const t=r=>{var n;return(n=e.tags.find(s=>s._d===r))==null?void 0:n._p};for(const{prefix:r,offset:n}of Iy)for(const s of e.tags.filter(i=>typeof i.tagPriority=="string"&&i.tagPriority.startsWith(r))){const i=t(s.tagPriority.replace(r,""));typeof i<"u"&&(s._p=i+n)}e.tags.sort((r,n)=>r._p-n._p).sort((r,n)=>Is(r)-Is(n))}}},qy={meta:"content",link:"href",htmlAttrs:"lang"},Gy=e=>({hooks:{"tags:resolve":t=>{var a;const{tags:r}=t,n=(a=r.find(l=>l.tag==="title"))==null?void 0:a.textContent,s=r.findIndex(l=>l.tag==="templateParams"),i=s!==-1?r[s].props:{},o=i.separator||"|";delete i.separator,i.pageTitle=ps(i.pageTitle||n||"",i,o);for(const l of r.filter(c=>c.processTemplateParams!==!1)){const c=qy[l.tag];c&&typeof l.props[c]=="string"?l.props[c]=ps(l.props[c],i,o):(l.processTemplateParams===!0||["titleTemplate","title"].includes(l.tag))&&["innerHTML","textContent"].forEach(u=>{typeof l[u]=="string"&&(l[u]=ps(l[u],i,o))})}e._templateParams=i,e._separator=o,t.tags=r.filter(l=>l.tag!=="templateParams")}}}),Jy={hooks:{"tags:resolve":e=>{const{tags:t}=e;let r=t.findIndex(s=>s.tag==="titleTemplate");const n=t.findIndex(s=>s.tag==="title");if(n!==-1&&r!==-1){const s=Sl(t[r].textContent,t[n].textContent);s!==null?t[n].textContent=s||t[n].textContent:delete t[n]}else if(r!==-1){const s=Sl(t[r].textContent);s!==null&&(t[r].textContent=s,t[r].tag="title",r=-1)}r!==-1&&delete t[r],e.tags=t.filter(Boolean)}}},Qy={hooks:{"tags:afterResolve":function(e){for(const t of e.tags)typeof t.innerHTML=="string"&&(t.innerHTML&&["application/ld+json","application/json"].includes(t.props.type)?t.innerHTML=t.innerHTML.replace(/</g,"\\u003C"):t.innerHTML=t.innerHTML.replace(new RegExp(`</${t.tag}`,"g"),`<\\/${t.tag}`))}}};let Cf;function Yy(e={}){const t=Xy(e);return t.use(Ny()),Cf=t}function Tl(e,t){return!e||e==="server"&&t||e==="client"&&!t}function Xy(e={}){const t=ff();t.addHooks(e.hooks||{}),e.document=e.document||(Ay?document:void 0);const r=!e.document,n=()=>{a.dirty=!0,t.callHook("entries:updated",a)};let s=0,i=[];const o=[],a={plugins:o,dirty:!1,resolvedOptions:e,hooks:t,headEntries(){return i},use(l){const c=typeof l=="function"?l(a):l;(!c.key||!o.some(u=>u.key===c.key))&&(o.push(c),Tl(c.mode,r)&&t.addHooks(c.hooks||{}))},push(l,c){c==null||delete c.head;const u={_i:s++,input:l,...c};return Tl(u.mode,r)&&(i.push(u),n()),{dispose(){i=i.filter(f=>f._i!==u._i),t.callHook("entries:updated",a),n()},patch(f){i=i.map(p=>(p._i===u._i&&(p.input=u.input=f),p)),n()}}},async resolveTags(){const l={tags:[],entries:[...i]};await t.callHook("entries:resolve",l);for(const c of l.entries){const u=c.resolvedInput||c.input;if(c.resolvedInput=await(c.transform?c.transform(u):u),c.resolvedInput)for(const f of await Ly(c)){const p={tag:f,entry:c,resolvedOptions:a.resolvedOptions};await t.callHook("tag:normalise",p),l.tags.push(p.tag)}}return await t.callHook("tags:beforeResolve",l),await t.callHook("tags:resolve",l),await t.callHook("tags:afterResolve",l),l.tags},ssr:r};return[jy,Fy,Uy,zy,Wy,Gy,Jy,Qy,...(e==null?void 0:e.plugins)||[]].forEach(l=>a.use(l)),a.hooks.callHook("init",a),a}function Zy(){return Cf}const e_=Qu.startsWith("3");function t_(e){return typeof e=="function"?e():Ee(e)}function Ms(e,t=""){if(e instanceof Promise)return e;const r=t_(e);return!e||!r?r:Array.isArray(r)?r.map(n=>Ms(n,t)):typeof r=="object"?Object.fromEntries(Object.entries(r).map(([n,s])=>n==="titleTemplate"||n.startsWith("on")?[n,Ee(s)]:[n,Ms(s,n)])):r}const r_={hooks:{"entries:resolve":function(e){for(const t of e.entries)t.resolvedInput=Ms(t.input)}}},Sf="usehead";function n_(e){return{install(r){e_&&(r.config.globalProperties.$unhead=e,r.config.globalProperties.$head=e,r.provide(Sf,e))}}.install}function s_(e={}){e.domDelayFn=e.domDelayFn||(r=>rr(()=>setTimeout(()=>r(),0)));const t=Yy(e);return t.use(r_),t.install=n_(t),t}const po=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},ho="__unhead_injection_handler__";function i_(e){po[ho]=e}function o_(){if(ho in po)return po[ho]();const e=Oe(Sf);return e||Zy()}function a_(e,t={}){const r=t.head||o_();if(r)return r.ssr?r.push(e,t):l_(r,e,t)}function l_(e,t,r={}){const n=_e(!1),s=_e({});bt(()=>{s.value=n.value?{}:Ms(t)});const i=e.push(s.value,r);return Je(s,a=>{i.patch(a)}),Ot()&&(Un(()=>{i.dispose()}),$u(()=>{n.value=!0}),wu(()=>{n.value=!1})),i}function vt(e){if(typeof e!="object")return e;var t,r,n=Object.prototype.toString.call(e);if(n==="[object Object]"){if(e.constructor!==Object&&typeof e.constructor=="function"){r=new e.constructor;for(t in e)e.hasOwnProperty(t)&&r[t]!==e[t]&&(r[t]=vt(e[t]))}else{r={};for(t in e)t==="__proto__"?Object.defineProperty(r,t,{value:vt(e[t]),configurable:!0,enumerable:!0,writable:!0}):r[t]=vt(e[t])}return r}if(n==="[object Array]"){for(t=e.length,r=Array(t);t--;)r[t]=vt(e[t]);return r}return n==="[object Set]"?(r=new Set,e.forEach(function(s){r.add(vt(s))}),r):n==="[object Map]"?(r=new Map,e.forEach(function(s,i){r.set(vt(i),vt(s))}),r):n==="[object Date]"?new Date(+e):n==="[object RegExp]"?(r=new RegExp(e.source,e.flags),r.lastIndex=e.lastIndex,r):n==="[object DataView]"?new e.constructor(vt(e.buffer)):n==="[object ArrayBuffer]"?e.slice(0):n.slice(-6)==="Array]"?new e.constructor(e):e}function Ai(e){return e!==null&&typeof e=="object"}function mo(e,t,r=".",n){if(!Ai(t))return mo(e,{},r,n);const s=Object.assign({},t);for(const i in e){if(i==="__proto__"||i==="constructor")continue;const o=e[i];o!=null&&(n&&n(s,i,o,r)||(Array.isArray(o)&&Array.isArray(s[i])?s[i]=[...o,...s[i]]:Ai(o)&&Ai(s[i])?s[i]=mo(o,s[i],(r?`${r}.`:"")+i.toString(),n):s[i]=o))}return s}function kf(e){return(...t)=>t.reduce((r,n)=>mo(r,n,"",e),{})}const BP=kf(),c_=kf((e,t,r)=>{if(typeof e[t]<"u"&&typeof r=="function")return e[t]=r(e[t]),!0}),u_="docs",f_="pnpm@8.6.2",p_="2.1.0-alpha.76",d_={build:"nuxt build","build:docs-storybook":'STATIC_BASE_PATH="/storybook/" pnpm -F ripple-storybook static:build --output-dir ../../docs/public/storybook',dev:"nuxt dev",generate:"pnpm build:docs-storybook && nuxt generate",preview:"nuxt preview"},h_={"@dpc-sdp/ripple-ui-core":"workspace:*","@dpc-sdp/ripple-ui-forms":"workspace:*","@dpc-sdp/stylelint-config-ripple":"workspace:*","@modyfi/vite-plugin-yaml":"^1.0.4","@nuxt/content":"^2.12.0","highlight.js":"^11.7.0","iframe-resizer":"^4.3.6",nuxt:"^3.10.0"},m_={"@iconify/vue":"^4.1.0","@nuxt/content":"^2.12.0","@nuxthq/studio":"^1.0.0","@types/iframe-resizer":"^3.5.9"},g_={private:!0,name:u_,packageManager:f_,version:p_,scripts:d_,dependencies:h_,devDependencies:m_},y_={title:"Ripple Design System",subheader:"Ripple is the design system for Victorian government digital products",sections:{"design-system":{title:"Ripple Design System",color:"var(--rpl-clr-primary)",neutralFooter:!1},framework:{title:"Ripple Framework",color:"var(--rpl-clr-dark)",neutralFooter:!0}},version:g_.version,description:"Make your service consistent with vic.gov.au digital branding. Learn from the research and experience of other service teams and avoid repeating work that’s already been done.",socials:{github:"dpc-sdp/ripple-framework"},storybookBaseUrl:"/storybook",hideModulesSection:!1},__={nuxt:{buildId:"1c6da812-7c87-438d-9470-666bc9df1046"}},v_=c_(y_,__);function b_(){const e=$e();return e._appConfig||(e._appConfig=He(v_)),e._appConfig}const UP=!1,go=!1,w_=!1,KP={componentName:"NuxtLink"},zP={deep:!0},$_="#__nuxt";let ds,Af;function E_(){var t;const e=(t=b_().nuxt)==null?void 0:t.buildId;return ds=$fetch(oa(`builds/meta/${e}.json`)),ds.then(r=>{Af=Qg(r.matcher)}),ds}function li(){return ds||E_()}async function Tf(e){return await li(),_f({},...Af.matchAll(e).reverse())}function xl(e,t={}){const r=R_(e,t),n=$e(),s=n._payloadCache=n._payloadCache||{};return r in s||(s[r]=P_(e).then(i=>i?xf(r).then(o=>o||(delete s[r],null)):(s[r]=null,null))),s[r]}const Ol="json";function R_(e,t={}){const r=new URL(e,"http://localhost");if(r.host!=="localhost"||br(r.pathname,{acceptRelative:!0}))throw new Error("Payload URL must not include hostname: "+e);const n=t.hash||(t.fresh?Date.now():"");return ln(dt().app.baseURL,r.pathname,n?`_payload.${n}.${Ol}`:`_payload.${Ol}`)}async function xf(e){const t=fetch(e).then(r=>r.text().then(Of));try{return await t}catch(r){console.warn("[nuxt] Cannot load payload ",e,r)}return null}async function P_(e=$r().path){if(e=wr(e),(await li()).prerendered.includes(e))return!0;const r=await Tf(e);return!!r.prerender&&!r.redirect}let as=null;async function C_(){if(as)return as;const e=document.getElementById("__NUXT_DATA__");if(!e)return{};const t=await Of(e.textContent||""),r=e.dataset.src?await xf(e.dataset.src):void 0;return as={...t,...r,...window.__NUXT__},as}async function Of(e){return await Ey(e,$e()._payloadRevivers)}function S_(e,t){$e()._payloadRevivers[e]=t}const Ll={NuxtError:e=>ai(e),EmptyShallowRef:e=>Jt(e==="_"?void 0:e==="0n"?BigInt(0):Ls(e)),EmptyRef:e=>_e(e==="_"?void 0:e==="0n"?BigInt(0):Ls(e)),ShallowRef:e=>Jt(e),ShallowReactive:e=>mr(e),Ref:e=>_e(e),Reactive:e=>He(e)},k_=it({name:"nuxt:revive-payload:client",order:-30,async setup(e){let t,r;for(const n in Ll)S_(n,Ll[n]);Object.assign(e.payload,([t,r]=Dn(()=>e.runWithContext(C_)),t=await t,r(),t)),window.__NUXT__=e.payload}}),A_=[],T_=it({name:"nuxt:head",enforce:"pre",setup(e){const t=s_({plugins:A_});i_(()=>$e().vueApp._context.provides.usehead),e.vueApp.use(t);{let r=!0;const n=async()=>{r=!1,await Pf(t)};t.hooks.hook("dom:beforeRender",s=>{s.shouldRender=!r}),e.hooks.hook("page:start",()=>{r=!0}),e.hooks.hook("page:finish",()=>{e.isHydrating||n()}),e.hooks.hook("app:error",n),e.hooks.hook("app:suspense:resolve",n)}}});/*!
   * vue-router v4.1.6
   * (c) 2022 Eduardo San Martin Morote
   * @license MIT
-  */const Lr=typeof window<"u";function x_(e){return e.__esModule||e[Symbol.toStringTag]==="Module"}const de=Object.assign;function Ti(e,t){const r={};for(const n in t){const s=t[n];r[n]=ht(s)?s.map(e):e(s)}return r}const Pn=()=>{},ht=Array.isArray,O_=/\/$/,L_=e=>e.replace(O_,"");function xi(e,t,r="/"){let n,s={},i="",o="";const a=t.indexOf("#");let l=t.indexOf("?");return a<l&&a>=0&&(l=-1),l>-1&&(n=t.slice(0,l),i=t.slice(l+1,a>-1?a:t.length),s=e(i)),a>-1&&(n=n||t.slice(0,a),o=t.slice(a,t.length)),n=N_(n??t,r),{fullPath:n+(i&&"?")+i+o,path:n,query:s,hash:o}}function I_(e,t){const r=t.query?e(t.query):"";return t.path+(r&&"?")+r+(t.hash||"")}function Il(e,t){return!t||!e.toLowerCase().startsWith(t.toLowerCase())?e:e.slice(t.length)||"/"}function M_(e,t,r){const n=t.matched.length-1,s=r.matched.length-1;return n>-1&&n===s&&en(t.matched[n],r.matched[s])&&Lf(t.params,r.params)&&e(t.query)===e(r.query)&&t.hash===r.hash}function en(e,t){return(e.aliasOf||e)===(t.aliasOf||t)}function Lf(e,t){if(Object.keys(e).length!==Object.keys(t).length)return!1;for(const r in e)if(!D_(e[r],t[r]))return!1;return!0}function D_(e,t){return ht(e)?Ml(e,t):ht(t)?Ml(t,e):e===t}function Ml(e,t){return ht(t)?e.length===t.length&&e.every((r,n)=>r===t[n]):e.length===1&&e[0]===t}function N_(e,t){if(e.startsWith("/"))return e;if(!e)return t;const r=t.split("/"),n=e.split("/");let s=r.length-1,i,o;for(i=0;i<n.length;i++)if(o=n[i],o!==".")if(o==="..")s>1&&s--;else break;return r.slice(0,s).join("/")+"/"+n.slice(i-(i===n.length?1:0)).join("/")}var Nn;(function(e){e.pop="pop",e.push="push"})(Nn||(Nn={}));var Cn;(function(e){e.back="back",e.forward="forward",e.unknown=""})(Cn||(Cn={}));function H_(e){if(!e)if(Lr){const t=document.querySelector("base");e=t&&t.getAttribute("href")||"/",e=e.replace(/^\w+:\/\/[^\/]+/,"")}else e="/";return e[0]!=="/"&&e[0]!=="#"&&(e="/"+e),L_(e)}const j_=/^[^#]+#/;function F_(e,t){return e.replace(j_,"#")+t}function V_(e,t){const r=document.documentElement.getBoundingClientRect(),n=e.getBoundingClientRect();return{behavior:t.behavior,left:n.left-r.left-(t.left||0),top:n.top-r.top-(t.top||0)}}const ci=()=>({left:window.pageXOffset,top:window.pageYOffset});function B_(e){let t;if("el"in e){const r=e.el,n=typeof r=="string"&&r.startsWith("#"),s=typeof r=="string"?n?document.getElementById(r.slice(1)):document.querySelector(r):r;if(!s)return;t=V_(s,e)}else t=e;"scrollBehavior"in document.documentElement.style?window.scrollTo(t):window.scrollTo(t.left!=null?t.left:window.pageXOffset,t.top!=null?t.top:window.pageYOffset)}function Dl(e,t){return(history.state?history.state.position-t:-1)+e}const yo=new Map;function U_(e,t){yo.set(e,t)}function K_(e){const t=yo.get(e);return yo.delete(e),t}let z_=()=>location.protocol+"//"+location.host;function If(e,t){const{pathname:r,search:n,hash:s}=t,i=e.indexOf("#");if(i>-1){let a=s.includes(e.slice(i))?e.slice(i).length:1,l=s.slice(a);return l[0]!=="/"&&(l="/"+l),Il(l,"")}return Il(r,e)+n+s}function W_(e,t,r,n){let s=[],i=[],o=null;const a=({state:p})=>{const d=If(e,location),v=r.value,_=t.value;let R=0;if(p){if(r.value=d,t.value=p,o&&o===v){o=null;return}R=_?p.position-_.position:0}else n(d);s.forEach(w=>{w(r.value,v,{delta:R,type:Nn.pop,direction:R?R>0?Cn.forward:Cn.back:Cn.unknown})})};function l(){o=r.value}function c(p){s.push(p);const d=()=>{const v=s.indexOf(p);v>-1&&s.splice(v,1)};return i.push(d),d}function u(){const{history:p}=window;p.state&&p.replaceState(de({},p.state,{scroll:ci()}),"")}function f(){for(const p of i)p();i=[],window.removeEventListener("popstate",a),window.removeEventListener("beforeunload",u)}return window.addEventListener("popstate",a),window.addEventListener("beforeunload",u),{pauseListeners:l,listen:c,destroy:f}}function Nl(e,t,r,n=!1,s=!1){return{back:e,current:t,forward:r,replaced:n,position:window.history.length,scroll:s?ci():null}}function q_(e){const{history:t,location:r}=window,n={value:If(e,r)},s={value:t.state};s.value||i(n.value,{back:null,current:n.value,forward:null,position:t.length-1,replaced:!0,scroll:null},!0);function i(l,c,u){const f=e.indexOf("#"),p=f>-1?(r.host&&document.querySelector("base")?e:e.slice(f))+l:z_()+e+l;try{t[u?"replaceState":"pushState"](c,"",p),s.value=c}catch(d){console.error(d),r[u?"replace":"assign"](p)}}function o(l,c){const u=de({},t.state,Nl(s.value.back,l,s.value.forward,!0),c,{position:s.value.position});i(l,u,!0),n.value=l}function a(l,c){const u=de({},s.value,t.state,{forward:l,scroll:ci()});i(u.current,u,!0);const f=de({},Nl(n.value,l,null),{position:u.position+1},c);i(l,f,!1),n.value=l}return{location:n,state:s,push:a,replace:o}}function Mf(e){e=H_(e);const t=q_(e),r=W_(e,t.state,t.location,t.replace);function n(i,o=!0){o||r.pauseListeners(),history.go(i)}const s=de({location:"",base:e,go:n,createHref:F_.bind(null,e)},t,r);return Object.defineProperty(s,"location",{enumerable:!0,get:()=>t.location.value}),Object.defineProperty(s,"state",{enumerable:!0,get:()=>t.state.value}),s}function G_(e){return e=location.host?e||location.pathname+location.search:"",e.includes("#")||(e+="#"),Mf(e)}function J_(e){return typeof e=="string"||e&&typeof e=="object"}function Df(e){return typeof e=="string"||typeof e=="symbol"}const lt={path:"/",name:void 0,params:{},query:{},hash:"",fullPath:"/",matched:[],meta:{},redirectedFrom:void 0},Nf=Symbol("");var Hl;(function(e){e[e.aborted=4]="aborted",e[e.cancelled=8]="cancelled",e[e.duplicated=16]="duplicated"})(Hl||(Hl={}));function tn(e,t){return de(new Error,{type:e,[Nf]:!0},t)}function Pt(e,t){return e instanceof Error&&Nf in e&&(t==null||!!(e.type&t))}const jl="[^/]+?",Q_={sensitive:!1,strict:!1,start:!0,end:!0},Y_=/[.+*?^${}()[\]/\\]/g;function X_(e,t){const r=de({},Q_,t),n=[];let s=r.start?"^":"";const i=[];for(const c of e){const u=c.length?[]:[90];r.strict&&!c.length&&(s+="/");for(let f=0;f<c.length;f++){const p=c[f];let d=40+(r.sensitive?.25:0);if(p.type===0)f||(s+="/"),s+=p.value.replace(Y_,"\\$&"),d+=40;else if(p.type===1){const{value:v,repeatable:_,optional:R,regexp:w}=p;i.push({name:v,repeatable:_,optional:R});const b=w||jl;if(b!==jl){d+=10;try{new RegExp(`(${b})`)}catch(g){throw new Error(`Invalid custom RegExp for param "${v}" (${b}): `+g.message)}}let h=_?`((?:${b})(?:/(?:${b}))*)`:`(${b})`;f||(h=R&&c.length<2?`(?:/${h})`:"/"+h),R&&(h+="?"),s+=h,d+=20,R&&(d+=-8),_&&(d+=-20),b===".*"&&(d+=-50)}u.push(d)}n.push(u)}if(r.strict&&r.end){const c=n.length-1;n[c][n[c].length-1]+=.7000000000000001}r.strict||(s+="/?"),r.end?s+="$":r.strict&&(s+="(?:/|$)");const o=new RegExp(s,r.sensitive?"":"i");function a(c){const u=c.match(o),f={};if(!u)return null;for(let p=1;p<u.length;p++){const d=u[p]||"",v=i[p-1];f[v.name]=d&&v.repeatable?d.split("/"):d}return f}function l(c){let u="",f=!1;for(const p of e){(!f||!u.endsWith("/"))&&(u+="/"),f=!1;for(const d of p)if(d.type===0)u+=d.value;else if(d.type===1){const{value:v,repeatable:_,optional:R}=d,w=v in c?c[v]:"";if(ht(w)&&!_)throw new Error(`Provided param "${v}" is an array but it is not repeatable (* or + modifiers)`);const b=ht(w)?w.join("/"):w;if(!b)if(R)p.length<2&&(u.endsWith("/")?u=u.slice(0,-1):f=!0);else throw new Error(`Missing required param "${v}"`);u+=b}}return u||"/"}return{re:o,score:n,keys:i,parse:a,stringify:l}}function Z_(e,t){let r=0;for(;r<e.length&&r<t.length;){const n=t[r]-e[r];if(n)return n;r++}return e.length<t.length?e.length===1&&e[0]===80?-1:1:e.length>t.length?t.length===1&&t[0]===80?1:-1:0}function ev(e,t){let r=0;const n=e.score,s=t.score;for(;r<n.length&&r<s.length;){const i=Z_(n[r],s[r]);if(i)return i;r++}if(Math.abs(s.length-n.length)===1){if(Fl(n))return 1;if(Fl(s))return-1}return s.length-n.length}function Fl(e){const t=e[e.length-1];return e.length>0&&t[t.length-1]<0}const tv={type:0,value:""},rv=/[a-zA-Z0-9_]/;function nv(e){if(!e)return[[]];if(e==="/")return[[tv]];if(!e.startsWith("/"))throw new Error(`Invalid path "${e}"`);function t(d){throw new Error(`ERR (${r})/"${c}": ${d}`)}let r=0,n=r;const s=[];let i;function o(){i&&s.push(i),i=[]}let a=0,l,c="",u="";function f(){c&&(r===0?i.push({type:0,value:c}):r===1||r===2||r===3?(i.length>1&&(l==="*"||l==="+")&&t(`A repeatable param (${c}) must be alone in its segment. eg: '/:ids+.`),i.push({type:1,value:c,regexp:u,repeatable:l==="*"||l==="+",optional:l==="*"||l==="?"})):t("Invalid state to consume buffer"),c="")}function p(){c+=l}for(;a<e.length;){if(l=e[a++],l==="\\"&&r!==2){n=r,r=4;continue}switch(r){case 0:l==="/"?(c&&f(),o()):l===":"?(f(),r=1):p();break;case 4:p(),r=n;break;case 1:l==="("?r=2:rv.test(l)?p():(f(),r=0,l!=="*"&&l!=="?"&&l!=="+"&&a--);break;case 2:l===")"?u[u.length-1]=="\\"?u=u.slice(0,-1)+l:r=3:u+=l;break;case 3:f(),r=0,l!=="*"&&l!=="?"&&l!=="+"&&a--,u="";break;default:t("Unknown state");break}}return r===2&&t(`Unfinished custom RegExp for param "${c}"`),f(),o(),s}function sv(e,t,r){const n=X_(nv(e.path),r),s=de(n,{record:e,parent:t,children:[],alias:[]});return t&&!s.record.aliasOf==!t.record.aliasOf&&t.children.push(s),s}function iv(e,t){const r=[],n=new Map;t=Ul({strict:!1,end:!0,sensitive:!1},t);function s(u){return n.get(u)}function i(u,f,p){const d=!p,v=ov(u);v.aliasOf=p&&p.record;const _=Ul(t,u),R=[v];if("alias"in u){const h=typeof u.alias=="string"?[u.alias]:u.alias;for(const g of h)R.push(de({},v,{components:p?p.record.components:v.components,path:g,aliasOf:p?p.record:v}))}let w,b;for(const h of R){const{path:g}=h;if(f&&g[0]!=="/"){const $=f.record.path,m=$[$.length-1]==="/"?"":"/";h.path=f.record.path+(g&&m+g)}if(w=sv(h,f,_),p?p.alias.push(w):(b=b||w,b!==w&&b.alias.push(w),d&&u.name&&!Bl(w)&&o(u.name)),v.children){const $=v.children;for(let m=0;m<$.length;m++)i($[m],w,p&&p.children[m])}p=p||w,(w.record.components&&Object.keys(w.record.components).length||w.record.name||w.record.redirect)&&l(w)}return b?()=>{o(b)}:Pn}function o(u){if(Df(u)){const f=n.get(u);f&&(n.delete(u),r.splice(r.indexOf(f),1),f.children.forEach(o),f.alias.forEach(o))}else{const f=r.indexOf(u);f>-1&&(r.splice(f,1),u.record.name&&n.delete(u.record.name),u.children.forEach(o),u.alias.forEach(o))}}function a(){return r}function l(u){let f=0;for(;f<r.length&&ev(u,r[f])>=0&&(u.record.path!==r[f].record.path||!Hf(u,r[f]));)f++;r.splice(f,0,u),u.record.name&&!Bl(u)&&n.set(u.record.name,u)}function c(u,f){let p,d={},v,_;if("name"in u&&u.name){if(p=n.get(u.name),!p)throw tn(1,{location:u});_=p.record.name,d=de(Vl(f.params,p.keys.filter(b=>!b.optional).map(b=>b.name)),u.params&&Vl(u.params,p.keys.map(b=>b.name))),v=p.stringify(d)}else if("path"in u)v=u.path,p=r.find(b=>b.re.test(v)),p&&(d=p.parse(v),_=p.record.name);else{if(p=f.name?n.get(f.name):r.find(b=>b.re.test(f.path)),!p)throw tn(1,{location:u,currentLocation:f});_=p.record.name,d=de({},f.params,u.params),v=p.stringify(d)}const R=[];let w=p;for(;w;)R.unshift(w.record),w=w.parent;return{name:_,path:v,params:d,matched:R,meta:lv(R)}}return e.forEach(u=>i(u)),{addRoute:i,resolve:c,removeRoute:o,getRoutes:a,getRecordMatcher:s}}function Vl(e,t){const r={};for(const n of t)n in e&&(r[n]=e[n]);return r}function ov(e){return{path:e.path,redirect:e.redirect,name:e.name,meta:e.meta||{},aliasOf:void 0,beforeEnter:e.beforeEnter,props:av(e),children:e.children||[],instances:{},leaveGuards:new Set,updateGuards:new Set,enterCallbacks:{},components:"components"in e?e.components||null:e.component&&{default:e.component}}}function av(e){const t={},r=e.props||!1;if("component"in e)t.default=r;else for(const n in e.components)t[n]=typeof r=="boolean"?r:r[n];return t}function Bl(e){for(;e;){if(e.record.aliasOf)return!0;e=e.parent}return!1}function lv(e){return e.reduce((t,r)=>de(t,r.meta),{})}function Ul(e,t){const r={};for(const n in e)r[n]=n in t?t[n]:e[n];return r}function Hf(e,t){return t.children.some(r=>r===e||Hf(e,r))}const jf=/#/g,cv=/&/g,uv=/\//g,fv=/=/g,pv=/\?/g,Ff=/\+/g,dv=/%5B/g,hv=/%5D/g,Vf=/%5E/g,mv=/%60/g,Bf=/%7B/g,gv=/%7C/g,Uf=/%7D/g,yv=/%20/g;function la(e){return encodeURI(""+e).replace(gv,"|").replace(dv,"[").replace(hv,"]")}function _v(e){return la(e).replace(Bf,"{").replace(Uf,"}").replace(Vf,"^")}function _o(e){return la(e).replace(Ff,"%2B").replace(yv,"+").replace(jf,"%23").replace(cv,"%26").replace(mv,"`").replace(Bf,"{").replace(Uf,"}").replace(Vf,"^")}function vv(e){return _o(e).replace(fv,"%3D")}function bv(e){return la(e).replace(jf,"%23").replace(pv,"%3F")}function wv(e){return e==null?"":bv(e).replace(uv,"%2F")}function Ds(e){try{return decodeURIComponent(""+e)}catch{}return""+e}function $v(e){const t={};if(e===""||e==="?")return t;const n=(e[0]==="?"?e.slice(1):e).split("&");for(let s=0;s<n.length;++s){const i=n[s].replace(Ff," "),o=i.indexOf("="),a=Ds(o<0?i:i.slice(0,o)),l=o<0?null:Ds(i.slice(o+1));if(a in t){let c=t[a];ht(c)||(c=t[a]=[c]),c.push(l)}else t[a]=l}return t}function Kl(e){let t="";for(let r in e){const n=e[r];if(r=vv(r),n==null){n!==void 0&&(t+=(t.length?"&":"")+r);continue}(ht(n)?n.map(i=>i&&_o(i)):[n&&_o(n)]).forEach(i=>{i!==void 0&&(t+=(t.length?"&":"")+r,i!=null&&(t+="="+i))})}return t}function Ev(e){const t={};for(const r in e){const n=e[r];n!==void 0&&(t[r]=ht(n)?n.map(s=>s==null?null:""+s):n==null?n:""+n)}return t}const Rv=Symbol(""),zl=Symbol(""),ca=Symbol(""),ua=Symbol(""),vo=Symbol("");function dn(){let e=[];function t(n){return e.push(n),()=>{const s=e.indexOf(n);s>-1&&e.splice(s,1)}}function r(){e=[]}return{add:t,list:()=>e,reset:r}}function Wt(e,t,r,n,s){const i=n&&(n.enterCallbacks[s]=n.enterCallbacks[s]||[]);return()=>new Promise((o,a)=>{const l=f=>{f===!1?a(tn(4,{from:r,to:t})):f instanceof Error?a(f):J_(f)?a(tn(2,{from:t,to:f})):(i&&n.enterCallbacks[s]===i&&typeof f=="function"&&i.push(f),o())},c=e.call(n&&n.instances[s],t,r,l);let u=Promise.resolve(c);e.length<3&&(u=u.then(l)),u.catch(f=>a(f))})}function Oi(e,t,r,n){const s=[];for(const i of e)for(const o in i.components){let a=i.components[o];if(!(t!=="beforeRouteEnter"&&!i.instances[o]))if(Pv(a)){const c=(a.__vccOpts||a)[t];c&&s.push(Wt(c,r,n,i,o))}else{let l=a();s.push(()=>l.then(c=>{if(!c)return Promise.reject(new Error(`Couldn't resolve component "${o}" at "${i.path}"`));const u=x_(c)?c.default:c;i.components[o]=u;const p=(u.__vccOpts||u)[t];return p&&Wt(p,r,n,i,o)()}))}}return s}function Pv(e){return typeof e=="object"||"displayName"in e||"props"in e||"__vccOpts"in e}function Wl(e){const t=Oe(ca),r=Oe(ua),n=ge(()=>t.resolve(Ee(e.to))),s=ge(()=>{const{matched:l}=n.value,{length:c}=l,u=l[c-1],f=r.matched;if(!u||!f.length)return-1;const p=f.findIndex(en.bind(null,u));if(p>-1)return p;const d=ql(l[c-2]);return c>1&&ql(u)===d&&f[f.length-1].path!==d?f.findIndex(en.bind(null,l[c-2])):p}),i=ge(()=>s.value>-1&&Av(r.params,n.value.params)),o=ge(()=>s.value>-1&&s.value===r.matched.length-1&&Lf(r.params,n.value.params));function a(l={}){return kv(l)?t[Ee(e.replace)?"replace":"push"](Ee(e.to)).catch(Pn):Promise.resolve()}return{route:n,href:ge(()=>n.value.href),isActive:i,isExactActive:o,navigate:a}}const Cv=nr({name:"RouterLink",compatConfig:{MODE:3},props:{to:{type:[String,Object],required:!0},replace:Boolean,activeClass:String,exactActiveClass:String,custom:Boolean,ariaCurrentValue:{type:String,default:"page"}},useLink:Wl,setup(e,{slots:t}){const r=He(Wl(e)),{options:n}=Oe(ca),s=ge(()=>({[Gl(e.activeClass,n.linkActiveClass,"router-link-active")]:r.isActive,[Gl(e.exactActiveClass,n.linkExactActiveClass,"router-link-exact-active")]:r.isExactActive}));return()=>{const i=t.default&&t.default(r);return e.custom?i:nt("a",{"aria-current":r.isExactActive?e.ariaCurrentValue:null,href:r.href,onClick:r.navigate,class:s.value},i)}}}),Sv=Cv;function kv(e){if(!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)&&!e.defaultPrevented&&!(e.button!==void 0&&e.button!==0)){if(e.currentTarget&&e.currentTarget.getAttribute){const t=e.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(t))return}return e.preventDefault&&e.preventDefault(),!0}}function Av(e,t){for(const r in t){const n=t[r],s=e[r];if(typeof n=="string"){if(n!==s)return!1}else if(!ht(s)||s.length!==n.length||n.some((i,o)=>i!==s[o]))return!1}return!0}function ql(e){return e?e.aliasOf?e.aliasOf.path:e.path:""}const Gl=(e,t,r)=>e??t??r,Tv=nr({name:"RouterView",inheritAttrs:!1,props:{name:{type:String,default:"default"},route:Object},compatConfig:{MODE:3},setup(e,{attrs:t,slots:r}){const n=Oe(vo),s=ge(()=>e.route||n.value),i=Oe(zl,0),o=ge(()=>{let c=Ee(i);const{matched:u}=s.value;let f;for(;(f=u[c])&&!f.components;)c++;return c}),a=ge(()=>s.value.matched[o.value]);_r(zl,ge(()=>o.value+1)),_r(Rv,a),_r(vo,s);const l=_e();return Je(()=>[l.value,a.value,e.name],([c,u,f],[p,d,v])=>{u&&(u.instances[f]=c,d&&d!==u&&c&&c===p&&(u.leaveGuards.size||(u.leaveGuards=d.leaveGuards),u.updateGuards.size||(u.updateGuards=d.updateGuards))),c&&u&&(!d||!en(u,d)||!p)&&(u.enterCallbacks[f]||[]).forEach(_=>_(c))},{flush:"post"}),()=>{const c=s.value,u=e.name,f=a.value,p=f&&f.components[u];if(!p)return Jl(r.default,{Component:p,route:c});const d=f.props[u],v=d?d===!0?c.params:typeof d=="function"?d(c):d:null,R=nt(p,de({},v,t,{onVnodeUnmounted:w=>{w.component.isUnmounted&&(f.instances[u]=null)},ref:l}));return Jl(r.default,{Component:R,route:c})||R}}});function Jl(e,t){if(!e)return null;const r=e(t);return r.length===1?r[0]:r}const Kf=Tv;function xv(e){const t=iv(e.routes,e),r=e.parseQuery||$v,n=e.stringifyQuery||Kl,s=e.history,i=dn(),o=dn(),a=dn(),l=Jt(lt);let c=lt;Lr&&e.scrollBehavior&&"scrollRestoration"in history&&(history.scrollRestoration="manual");const u=Ti.bind(null,O=>""+O),f=Ti.bind(null,wv),p=Ti.bind(null,Ds);function d(O,K){let V,J;return Df(O)?(V=t.getRecordMatcher(O),J=K):J=O,t.addRoute(J,V)}function v(O){const K=t.getRecordMatcher(O);K&&t.removeRoute(K)}function _(){return t.getRoutes().map(O=>O.record)}function R(O){return!!t.getRecordMatcher(O)}function w(O,K){if(K=de({},K||l.value),typeof O=="string"){const se=xi(r,O,K.path),y=t.resolve({path:se.path},K),P=s.createHref(se.fullPath);return de(se,y,{params:p(y.params),hash:Ds(se.hash),redirectedFrom:void 0,href:P})}let V;if("path"in O)V=de({},O,{path:xi(r,O.path,K.path).path});else{const se=de({},O.params);for(const y in se)se[y]==null&&delete se[y];V=de({},O,{params:f(O.params)}),K.params=f(K.params)}const J=t.resolve(V,K),pe=O.hash||"";J.params=u(p(J.params));const me=I_(n,de({},O,{hash:_v(pe),path:J.path})),oe=s.createHref(me);return de({fullPath:me,hash:pe,query:n===Kl?Ev(O.query):O.query||{}},J,{redirectedFrom:void 0,href:oe})}function b(O){return typeof O=="string"?xi(r,O,l.value.path):de({},O)}function h(O,K){if(c!==O)return tn(8,{from:K,to:O})}function g(O){return C(O)}function $(O){return g(de(b(O),{replace:!0}))}function m(O){const K=O.matched[O.matched.length-1];if(K&&K.redirect){const{redirect:V}=K;let J=typeof V=="function"?V(O):V;return typeof J=="string"&&(J=J.includes("?")||J.includes("#")?J=b(J):{path:J},J.params={}),de({query:O.query,hash:O.hash,params:"path"in J?{}:O.params},J)}}function C(O,K){const V=c=w(O),J=l.value,pe=O.state,me=O.force,oe=O.replace===!0,se=m(V);if(se)return C(de(b(se),{state:typeof se=="object"?de({},pe,se.state):pe,force:me,replace:oe}),K||V);const y=V;y.redirectedFrom=K;let P;return!me&&M_(n,J,V)&&(P=tn(16,{to:y,from:J}),Ye(J,J,!0,!1)),(P?Promise.resolve(P):x(y,J)).catch(k=>Pt(k)?Pt(k,2)?k:be(k):G(k,y,J)).then(k=>{if(k){if(Pt(k,2))return C(de({replace:oe},b(k.to),{state:typeof k.to=="object"?de({},pe,k.to.state):pe,force:me}),K||y)}else k=T(y,J,!0,oe,pe);return E(y,J,k),k})}function A(O,K){const V=h(O,K);return V?Promise.reject(V):Promise.resolve()}function x(O,K){let V;const[J,pe,me]=Ov(O,K);V=Oi(J.reverse(),"beforeRouteLeave",O,K);for(const se of J)se.leaveGuards.forEach(y=>{V.push(Wt(y,O,K))});const oe=A.bind(null,O,K);return V.push(oe),Tr(V).then(()=>{V=[];for(const se of i.list())V.push(Wt(se,O,K));return V.push(oe),Tr(V)}).then(()=>{V=Oi(pe,"beforeRouteUpdate",O,K);for(const se of pe)se.updateGuards.forEach(y=>{V.push(Wt(y,O,K))});return V.push(oe),Tr(V)}).then(()=>{V=[];for(const se of O.matched)if(se.beforeEnter&&!K.matched.includes(se))if(ht(se.beforeEnter))for(const y of se.beforeEnter)V.push(Wt(y,O,K));else V.push(Wt(se.beforeEnter,O,K));return V.push(oe),Tr(V)}).then(()=>(O.matched.forEach(se=>se.enterCallbacks={}),V=Oi(me,"beforeRouteEnter",O,K),V.push(oe),Tr(V))).then(()=>{V=[];for(const se of o.list())V.push(Wt(se,O,K));return V.push(oe),Tr(V)}).catch(se=>Pt(se,8)?se:Promise.reject(se))}function E(O,K,V){for(const J of a.list())J(O,K,V)}function T(O,K,V,J,pe){const me=h(O,K);if(me)return me;const oe=K===lt,se=Lr?history.state:{};V&&(J||oe?s.replace(O.fullPath,de({scroll:oe&&se&&se.scroll},pe)):s.push(O.fullPath,pe)),l.value=O,Ye(O,K,V,oe),be()}let S;function j(){S||(S=s.listen((O,K,V)=>{if(!Gn.listening)return;const J=w(O),pe=m(J);if(pe){C(de(pe,{replace:!0}),J).catch(Pn);return}c=J;const me=l.value;Lr&&U_(Dl(me.fullPath,V.delta),ci()),x(J,me).catch(oe=>Pt(oe,12)?oe:Pt(oe,2)?(C(oe.to,J).then(se=>{Pt(se,20)&&!V.delta&&V.type===Nn.pop&&s.go(-1,!1)}).catch(Pn),Promise.reject()):(V.delta&&s.go(-V.delta,!1),G(oe,J,me))).then(oe=>{oe=oe||T(J,me,!1),oe&&(V.delta&&!Pt(oe,8)?s.go(-V.delta,!1):V.type===Nn.pop&&Pt(oe,20)&&s.go(-1,!1)),E(J,me,oe)}).catch(Pn)}))}let ie=dn(),X=dn(),D;function G(O,K,V){be(O);const J=X.list();return J.length?J.forEach(pe=>pe(O,K,V)):console.error(O),Promise.reject(O)}function q(){return D&&l.value!==lt?Promise.resolve():new Promise((O,K)=>{ie.add([O,K])})}function be(O){return D||(D=!O,j(),ie.list().forEach(([K,V])=>O?V(O):K()),ie.reset()),O}function Ye(O,K,V,J){const{scrollBehavior:pe}=e;if(!Lr||!pe)return Promise.resolve();const me=!V&&K_(Dl(O.fullPath,0))||(J||!V)&&history.state&&history.state.scroll||null;return rr().then(()=>pe(O,K,me)).then(oe=>oe&&B_(oe)).catch(oe=>G(oe,O,K))}const Le=O=>s.go(O);let Ve;const kr=new Set,Gn={currentRoute:l,listening:!0,addRoute:d,removeRoute:v,hasRoute:R,getRoutes:_,resolve:w,options:e,push:g,replace:$,go:Le,back:()=>Le(-1),forward:()=>Le(1),beforeEach:i.add,beforeResolve:o.add,afterEach:a.add,onError:X.add,isReady:q,install(O){const K=this;O.component("RouterLink",Sv),O.component("RouterView",Kf),O.config.globalProperties.$router=K,Object.defineProperty(O.config.globalProperties,"$route",{enumerable:!0,get:()=>Ee(l)}),Lr&&!Ve&&l.value===lt&&(Ve=!0,g(s.location).catch(pe=>{}));const V={};for(const pe in lt)V[pe]=ge(()=>l.value[pe]);O.provide(ca,K),O.provide(ua,He(V)),O.provide(vo,l);const J=O.unmount;kr.add(O),O.unmount=function(){kr.delete(O),kr.size<1&&(c=lt,S&&S(),S=null,l.value=lt,Ve=!1,D=!1),J()}}};return Gn}function Tr(e){return e.reduce((t,r)=>t.then(()=>r()),Promise.resolve())}function Ov(e,t){const r=[],n=[],s=[],i=Math.max(t.matched.length,e.matched.length);for(let o=0;o<i;o++){const a=t.matched[o];a&&(e.matched.find(c=>en(c,a))?n.push(a):r.push(a));const l=e.matched[o];l&&(t.matched.find(c=>en(c,l))||s.push(l))}return[r,n,s]}function WP(){return Oe(ua)}const Lv=(e,t)=>t.path.replace(/(:\w+)\([^)]+\)/g,"$1").replace(/(:\w+)[?+*]/g,"$1").replace(/:\w+/g,r=>{var n;return((n=e.params[r.slice(1)])==null?void 0:n.toString())||""}),bo=(e,t)=>{const r=e.route.matched.find(s=>{var i;return((i=s.components)==null?void 0:i.default)===e.Component.type}),n=t??(r==null?void 0:r.meta.key)??(r&&Lv(e.route,r));return typeof n=="function"?n(e.route):n},Iv=(e,t)=>({default:()=>e?nt(ph,e===!0?{}:e,t):t});function fa(e){return Array.isArray(e)?e:[e]}const Li=null,Ql=[{name:"slug",path:"/:slug(.*)*",meta:{},alias:[],redirect:Li==null?void 0:Li.redirect,component:()=>U(()=>import("./document-driven.BWdn4QDn.js"),__vite__mapDeps([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]),import.meta.url).then(e=>e.default||e)}],Mv=(e,t,r)=>(t=t===!0?{}:t,{default:()=>{var n;return t?nt(e,t,r):(n=r.default)==null?void 0:n.call(r)}});function Yl(e){const t=(e==null?void 0:e.meta.key)??e.path.replace(/(:\w+)\([^)]+\)/g,"$1").replace(/(:\w+)[?+*]/g,"$1").replace(/:\w+/g,r=>{var n;return((n=e.params[r.slice(1)])==null?void 0:n.toString())||""});return typeof t=="function"?t(e):t}function Dv(e,t){return e===t||t===lt?!1:Yl(e)!==Yl(t)?!0:!e.matched.every((n,s)=>{var i,o;return n.components&&n.components.default===((o=(i=t.matched[s])==null?void 0:i.components)==null?void 0:o.default)})}const Nv={scrollBehavior(e,t,r){var c;const n=$e(),s=((c=gt().options)==null?void 0:c.scrollBehaviorType)??"auto";let i=r||void 0;const o=typeof e.meta.scrollToTop=="function"?e.meta.scrollToTop(e,t):e.meta.scrollToTop;if(!i&&t&&e&&o!==!1&&Dv(e,t)&&(i={left:0,top:0}),e.path===t.path){if(t.hash&&!e.hash)return{left:0,top:0};if(e.hash)return{el:e.hash,top:Xl(e.hash),behavior:s}}const a=u=>!!(u.meta.pageTransition??go),l=a(t)&&a(e)?"page:transition:finish":"page:finish";return new Promise(u=>{n.hooks.hookOnce(l,async()=>{await rr(),e.hash&&(i={el:e.hash,top:Xl(e.hash),behavior:s}),u(i)})})}};function Xl(e){try{const t=document.querySelector(e);if(t)return parseFloat(getComputedStyle(t).scrollMarginTop)}catch{}return 0}const Hv={hashMode:!1,scrollBehaviorType:"auto"},qe={...Hv,...Nv},jv=async e=>{var l;let t,r;if(!((l=e.meta)!=null&&l.validate))return;const n=$e(),s=gt();if(([t,r]=Dn(()=>Promise.resolve(e.meta.validate(e))),t=await t,r(),t)===!0)return;const o=ai({statusCode:404,statusMessage:`Page Not Found: ${e.fullPath}`,data:{path:e.fullPath}}),a=s.beforeResolve(c=>{if(a(),c===e){const u=s.afterEach(async()=>{u(),await n.runWithContext(()=>Dr(o)),window.history.pushState({},"",e.fullPath)});return!1}})},Fv=async e=>{let t,r;const n=([t,r]=Dn(()=>Tf(e.path)),t=await t,r(),t);if(n.redirect)return n.redirect},Vv=[jv,Fv],Sn={};function Bv(e,t,r){const{pathname:n,search:s,hash:i}=t,o=e.indexOf("#");if(o>-1){const c=i.includes(e.slice(o))?e.slice(o).length:1;let u=i.slice(c);return u[0]!=="/"&&(u="/"+u),ml(u,"")}const a=ml(n,e),l=!r||Qm(a,r,{trailingSlash:!0})?a:r;return l+(l.includes("?")?"":s)+i}const Uv=it({name:"nuxt:router",enforce:"pre",async setup(e){var _,R;let t,r,n=dt().app.baseURL;qe.hashMode&&!n.includes("#")&&(n+="#");const s=((_=qe.history)==null?void 0:_.call(qe,n))??(qe.hashMode?G_(n):Mf(n)),i=((R=qe.routes)==null?void 0:R.call(qe,Ql))??Ql;let o;const a=Bv(n,window.location,e.payload.path),l=xv({...qe,scrollBehavior:(w,b,h)=>{if(b===lt){o=h;return}if(qe.scrollBehavior){if(l.options.scrollBehavior=qe.scrollBehavior,"scrollRestoration"in window.history){const g=l.beforeEach(()=>{g(),window.history.scrollRestoration="manual"})}return qe.scrollBehavior(w,lt,o||h)}},history:s,routes:i});"scrollRestoration"in window.history&&(window.history.scrollRestoration="auto"),e.vueApp.use(l);const c=Jt(l.currentRoute.value);l.afterEach((w,b)=>{c.value=b}),Object.defineProperty(e.vueApp.config.globalProperties,"previousRoute",{get:()=>c.value});const u=Jt(l.resolve(a)),f=()=>{u.value=l.currentRoute.value};e.hook("page:finish",f),l.afterEach((w,b)=>{var h,g,$,m;((g=(h=w.matched[0])==null?void 0:h.components)==null?void 0:g.default)===((m=($=b.matched[0])==null?void 0:$.components)==null?void 0:m.default)&&f()});const p={};for(const w in u.value)Object.defineProperty(p,w,{get:()=>u.value[w]});e._route=mr(p),e._middleware=e._middleware||{global:[],named:{}};const d=oi();try{[t,r]=Dn(()=>l.isReady()),await t,r()}catch(w){[t,r]=Dn(()=>e.runWithContext(()=>Dr(w))),await t,r()}const v=e.payload.state._layout;return l.beforeEach(async(w,b)=>{var h;await e.callHook("page:loading:start"),w.meta=He(w.meta),e.isHydrating&&v&&!Qr(w.meta.layout)&&(w.meta.layout=v),e._processingMiddleware=!0;{const g=new Set([...Vv,...e._middleware.global]);for(const $ of w.matched){const m=$.meta.middleware;if(m)for(const C of fa(m))g.add(C)}for(const $ of g){const m=typeof $=="string"?e._middleware.named[$]||await((h=Sn[$])==null?void 0:h.call(Sn).then(A=>A.default||A)):$;if(!m)throw new Error(`Unknown route middleware: '${$}'.`);const C=await e.runWithContext(()=>m(w,b));if(!e.payload.serverRendered&&e.isHydrating&&(C===!1||C instanceof Error)){const A=C||uo({statusCode:404,statusMessage:`Page Not Found: ${a}`});return await e.runWithContext(()=>Dr(A)),!1}if(C!==!0&&(C||C===!1))return C}}}),l.onError(async()=>{delete e._processingMiddleware,await e.callHook("page:loading:end")}),l.afterEach(async(w,b,h)=>{delete e._processingMiddleware,!e.isHydrating&&d.value&&await e.runWithContext(py),h&&await e.callHook("page:loading:end"),w.matched.length===0&&await e.runWithContext(()=>Dr(uo({statusCode:404,fatal:!1,statusMessage:`Page not found: ${w.fullPath}`,data:{path:w.fullPath}})))}),e.hooks.hookOnce("app:created",async()=>{try{await l.replace({...l.resolve(a),name:void 0,force:!0}),l.options.scrollBehavior=qe.scrollBehavior}catch(w){await e.runWithContext(()=>Dr(w))}}),{provide:{router:l}}}}),Zl=globalThis.requestIdleCallback||(e=>{const t=Date.now(),r={didTimeout:!1,timeRemaining:()=>Math.max(0,50-(Date.now()-t))};return setTimeout(()=>{e(r)},1)}),qP=globalThis.cancelIdleCallback||(e=>{clearTimeout(e)}),zf=e=>{const t=$e();t.isHydrating?t.hooks.hookOnce("app:suspense:resolve",()=>{Zl(e)}):Zl(e)},Kv=it({name:"nuxt:payload",setup(e){gt().beforeResolve(async(t,r)=>{if(t.path===r.path)return;const n=await xl(t.path);n&&Object.assign(e.static.data,n.data)}),zf(()=>{var t;e.hooks.hook("link:prefetch",async r=>{si(r).protocol||await xl(r)}),((t=navigator.connection)==null?void 0:t.effectiveType)!=="slow-2g"&&setTimeout(li,1e3)})}}),zv=it(e=>{let t;async function r(){const n=await li();t&&clearTimeout(t),t=setTimeout(r,1e3*60*60);const s=await $fetch(oa("builds/latest.json"));s.id!==n.id&&e.hooks.callHook("app:manifest:update",s)}zf(()=>{t=setTimeout(r,1e3*60*60)})}),Wv=W(()=>U(()=>import("./DocsAlert.qUx9DhKf.js"),__vite__mapDeps([25,14]),import.meta.url).then(e=>e.default)),qv=W(()=>U(()=>import("./DocsCard.NvucPPsI.js"),__vite__mapDeps([26,27,12,13,15,16,17,19,28,14]),import.meta.url).then(e=>e.default)),Gv=W(()=>U(()=>import("./DocsCardGrid.CGE8nz0H.js"),__vite__mapDeps([29,14,30]),import.meta.url).then(e=>e.default)),Jv=W(()=>U(()=>import("./DocsColourTable.N8n5f2_3.js"),__vite__mapDeps([31,32,14,33,34,35]),import.meta.url).then(e=>e.default)),Qv=W(()=>U(()=>import("./DocsContent.L9iJVoxE.js"),__vite__mapDeps([36,4,5,14]),import.meta.url).then(e=>e.default)),Yv=W(()=>U(()=>import("./DocsContentNavigation.UDfK-BX9.js"),__vite__mapDeps([37,38,16,19,39,7,8,20,21,40,11,14,41,42]),import.meta.url).then(e=>e.default)),Xv=W(()=>U(()=>import("./DocsExample.o_g87j4m.js"),__vite__mapDeps([43,44,7,8,15,16,17,14,45,46,47]),import.meta.url).then(e=>e.default)),Zv=W(()=>U(()=>import("./DocsGradientTable.j5XMaAB_.js"),__vite__mapDeps([48,32,14,33,34,49]),import.meta.url).then(e=>e.default)),eb=W(()=>U(()=>import("./DocsGrid.4LuoD9Zu.js"),__vite__mapDeps([50,14]),import.meta.url).then(e=>e.default)),tb=W(()=>U(()=>import("./DocsHeroHeader.PVXBo8Q-.js"),__vite__mapDeps([51,14,52]),import.meta.url).then(e=>e.default)),rb=W(()=>U(()=>import("./DocsHomeSection.gUJpqPBN.js"),__vite__mapDeps([53,14,54]),import.meta.url).then(e=>e.default)),nb=W(()=>U(()=>import("./DocsIcon.7thEtIhB.js"),__vite__mapDeps([55,7,8]),import.meta.url).then(e=>e.default)),sb=W(()=>U(()=>import("./DocsIconSizingTable.xZUIYxKF.js"),__vite__mapDeps([56,7,8]),import.meta.url).then(e=>e.default)),ib=W(()=>U(()=>import("./DocsIconTable.9o2Ol26d.js"),__vite__mapDeps([57,7,8,58,14,59]),import.meta.url).then(e=>e.default)),ob=W(()=>U(()=>import("./DocsImageExample.gzBXNxRI.js"),__vite__mapDeps([60,61,14,62]),import.meta.url).then(e=>e.default)),ab=W(()=>U(()=>import("./DocsLayerStyleTable.OEKkkJyE.js"),__vite__mapDeps([63,14,64]),import.meta.url).then(e=>e.default)),lb=W(()=>U(()=>import("./DocsLink.5OmhIBHZ.js"),__vite__mapDeps([44,7,8,15,16,17,14,45]),import.meta.url).then(e=>e.default)),cb=W(()=>U(()=>import("./DocsModuleCard.hpjmQYW8.js"),__vite__mapDeps([65,27,12,13,15,16,17,19,28,39]),import.meta.url).then(e=>e.default)),ub=W(()=>U(()=>import("./DocsModuleInfo.1q5O7tu6.js"),__vite__mapDeps([66,44,7,8,15,16,17,14,45,67]),import.meta.url).then(e=>e.default)),fb=W(()=>U(()=>import("./DocsModuleNavigation.1X1oFgOt.js"),__vite__mapDeps([68,40,7,8,11,14,41,38,16,19,39,69]),import.meta.url).then(e=>e.default)),pb=W(()=>U(()=>import("./DocsNavLink.5k-bni1U.js"),__vite__mapDeps([40,7,8,11,14,41]),import.meta.url).then(e=>e.default)),db=W(()=>U(()=>import("./DocsPageHeader.vbDi0R7z.js"),__vite__mapDeps([70,44,7,8,15,16,17,14,45,71]),import.meta.url).then(e=>e.default)),hb=W(()=>U(()=>import("./DocsThemeChooser.MC6JDrOF.js"),__vite__mapDeps([72,58,14,73]),import.meta.url).then(e=>e.default)),mb=W(()=>U(()=>import("./DocsTypeClassTable.JeAjrHD9.js"),__vite__mapDeps([74,14,75]),import.meta.url).then(e=>e.default)),gb=W(()=>U(()=>import("./DocsTypeTable.Iq8SBPIK.js"),__vite__mapDeps([76,14,77]),import.meta.url).then(e=>e.default)),yb=W(()=>U(()=>import("./DocsWhatsNew.3ELaYX2l.js"),__vite__mapDeps([78,7,8,18,15,16,17,19,6,9,14,79]),import.meta.url).then(e=>e.default)),_b=W(()=>U(()=>import("./ProseA.gmWvIO0I.js"),__vite__mapDeps([80,15,16,17]),import.meta.url).then(e=>e.default)),vb=W(()=>U(()=>import("./ProseBlockquote.lp_k9Hpd.js"),__vite__mapDeps([81,14]),import.meta.url).then(e=>e.default)),bb=W(()=>U(()=>import("./ProseCode.ggTmuEB2.js"),__vite__mapDeps([82,14,83]),import.meta.url).then(e=>e.default)),wb=W(()=>U(()=>import("./ProseCodeInline.uDpSgjM7.js"),__vite__mapDeps([84,14,85]),import.meta.url).then(e=>e.default)),$b=W(()=>U(()=>import("./ProseH2.ugZKdBSy.js"),__vite__mapDeps([86,14,87]),import.meta.url).then(e=>e.default)),Eb=W(()=>U(()=>import("./ProseH3.zV8FfIjw.js"),__vite__mapDeps([88,14,89]),import.meta.url).then(e=>e.default)),Rb=W(()=>U(()=>import("./ProseH4.CwUV-MIb.js"),__vite__mapDeps([]),import.meta.url).then(e=>e.default)),Pb=W(()=>U(()=>import("./ProseHr.NdB0-p6G.js"),__vite__mapDeps([90,14,91]),import.meta.url).then(e=>e.default)),Cb=W(()=>U(()=>import("./ProseTable.Nr-94ppo.js"),__vite__mapDeps([92,14,93]),import.meta.url).then(e=>e.default)),Sb=W(()=>U(()=>import("./Swatch.pCyR0PCQ.js"),__vite__mapDeps([32,14,33]),import.meta.url).then(e=>e.default)),kb=W(()=>U(()=>import("./ContentDoc.SXcfJrUW.js"),__vite__mapDeps([94,23,2,3,95,39]),import.meta.url).then(e=>e.default)),Ab=W(()=>U(()=>import("./ContentList.UlDpyDEh.js"),__vite__mapDeps([96,95,39]),import.meta.url).then(e=>e.default)),Tb=W(()=>U(()=>import("./ContentNavigation.hJs7QjUE.js"),__vite__mapDeps([97,39,11]),import.meta.url).then(e=>e.default)),xb=W(()=>U(()=>import("./ContentQuery.EOcFbojz.js"),__vite__mapDeps([95,39]),import.meta.url).then(e=>e.default)),Ob=W(()=>U(()=>import("./ContentRenderer.CgXd06ZK.js"),__vite__mapDeps([2,3]),import.meta.url).then(e=>e.default)),Lb=W(()=>U(()=>import("./ContentRendererMarkdown.jF369Aie.js"),__vite__mapDeps([98,3]),import.meta.url).then(e=>e.default)),Ib=W(()=>U(()=>import("./ContentSlot.lsaDai_l.js"),__vite__mapDeps([99,61]),import.meta.url).then(e=>e.default)),Mb=W(()=>U(()=>import("./DocumentDrivenEmpty.3DI1wYHv.js"),__vite__mapDeps([]),import.meta.url).then(e=>e.default)),Db=W(()=>U(()=>import("./Markdown.4yrCw_l0.js"),__vite__mapDeps([100,99,61]),import.meta.url).then(e=>e.default)),Nb=W(()=>U(()=>import("./ProsePre.1p0bzX0t.js"),__vite__mapDeps([101,82,14,83,102]),import.meta.url).then(e=>e.default)),Hb=W(()=>U(()=>import("./ProseEm.D-92YCoe.js"),__vite__mapDeps([103,14]),import.meta.url).then(e=>e.default)),jb=W(()=>U(()=>import("./ProseH1.qgSebaHX.js"),__vite__mapDeps([]),import.meta.url).then(e=>e.default)),Fb=W(()=>U(()=>import("./ProseH5.xN9FQiKa.js"),__vite__mapDeps([]),import.meta.url).then(e=>e.default)),Vb=W(()=>U(()=>import("./ProseH6.XPfwxdAr.js"),__vite__mapDeps([]),import.meta.url).then(e=>e.default)),Bb=W(()=>U(()=>import("./ProseImg.wgVpK8mn.js"),__vite__mapDeps([]),import.meta.url).then(e=>e.default)),Ub=W(()=>U(()=>import("./ProseLi.MnotWTMg.js"),__vite__mapDeps([104,14]),import.meta.url).then(e=>e.default)),Kb=W(()=>U(()=>import("./ProseOl.jzxVYZcz.js"),__vite__mapDeps([105,14]),import.meta.url).then(e=>e.default)),zb=W(()=>U(()=>import("./ProseP.cG_oeGiJ.js"),__vite__mapDeps([106,14]),import.meta.url).then(e=>e.default)),Wb=W(()=>U(()=>import("./ProseScript.FDrZUZC2.js"),__vite__mapDeps([]),import.meta.url).then(e=>e.default)),qb=W(()=>U(()=>import("./ProseStrong.F9NVvvm4.js"),__vite__mapDeps([107,14]),import.meta.url).then(e=>e.default)),Gb=W(()=>U(()=>import("./ProseTbody.pO4HZmMb.js"),__vite__mapDeps([108,14]),import.meta.url).then(e=>e.default)),Jb=W(()=>U(()=>import("./ProseTd.KWvY0UVz.js"),__vite__mapDeps([109,14]),import.meta.url).then(e=>e.default)),Qb=W(()=>U(()=>import("./ProseTh.15m2hyNr.js"),__vite__mapDeps([110,14]),import.meta.url).then(e=>e.default)),Yb=W(()=>U(()=>import("./ProseThead.x0xD32yi.js"),__vite__mapDeps([111,14]),import.meta.url).then(e=>e.default)),Xb=W(()=>U(()=>import("./ProseTr.NjbdsN4h.js"),__vite__mapDeps([112,14]),import.meta.url).then(e=>e.default)),Zb=W(()=>U(()=>import("./ProseUl.GyfBzrRs.js"),__vite__mapDeps([113,14]),import.meta.url).then(e=>e.default)),e0=[["DocsAlert",Wv],["DocsCard",qv],["DocsCardGrid",Gv],["DocsColourTable",Jv],["DocsContent",Qv],["DocsContentNavigation",Yv],["DocsExample",Xv],["DocsGradientTable",Zv],["DocsGrid",eb],["DocsHeroHeader",tb],["DocsHomeSection",rb],["DocsIcon",nb],["DocsIconSizingTable",sb],["DocsIconTable",ib],["DocsImageExample",ob],["DocsLayerStyleTable",ab],["DocsLink",lb],["DocsModuleCard",cb],["DocsModuleInfo",ub],["DocsModuleNavigation",fb],["DocsNavLink",pb],["DocsPageHeader",db],["DocsThemeChooser",hb],["DocsTypeClassTable",mb],["DocsTypeTable",gb],["DocsWhatsNew",yb],["ProseA",_b],["ProseBlockquote",vb],["ProseCode",bb],["ProseCodeInline",wb],["ProseH2",$b],["ProseH3",Eb],["ProseH4",Rb],["ProseHr",Pb],["ProseTable",Cb],["Swatch",Sb],["ContentDoc",kb],["ContentList",Ab],["ContentNavigation",Tb],["ContentQuery",xb],["ContentRenderer",Ob],["ContentRendererMarkdown",Lb],["MDCSlot",Ib],["DocumentDrivenEmpty",Mb],["Markdown",Db],["ProsePre",Nb],["ProseEm",Hb],["ProseH1",jb],["ProseH5",Fb],["ProseH6",Vb],["ProseImg",Bb],["ProseLi",Ub],["ProseOl",Kb],["ProseP",zb],["ProseScript",Wb],["ProseStrong",qb],["ProseTbody",Gb],["ProseTd",Jb],["ProseTh",Qb],["ProseThead",Yb],["ProseTr",Xb],["ProseUl",Zb]],t0=it({name:"nuxt:global-components",setup(e){for(const[t,r]of e0)e.vueApp.component(t,r),e.vueApp.component("Lazy"+t,r)}}),gn={home:()=>U(()=>import("./home.p0dB_qIA.js"),__vite__mapDeps([114,7,8,15,16,17,19,14,51,52,27,12,13,28,53,54,2,3,4,5,78,18,6,9,79,10,11,20,21,22,23,115]),import.meta.url).then(e=>e.default||e),"module-listing":()=>U(()=>import("./module-listing.hP89siY4.js"),__vite__mapDeps([116,37,38,16,19,39,7,8,20,21,40,11,14,41,42,70,44,15,17,45,71,12,13,27,28,29,30,117,118,10,18,22,23,119]),import.meta.url).then(e=>e.default||e),module:()=>U(()=>import("./module.HmGyaUlR.js"),__vite__mapDeps([120,68,40,7,8,11,14,41,38,16,19,39,69,66,44,15,17,45,67,70,71,2,3,117,118,10,12,13,18,20,21,22,23,121]),import.meta.url).then(e=>e.default||e),page:()=>U(()=>import("./page.ciD6J5zn.js"),__vite__mapDeps([122,37,38,16,19,39,7,8,20,21,40,11,14,41,42,70,44,15,17,45,71,2,3,117,118,10,12,13,18,22,23]),import.meta.url).then(e=>e.default||e)},r0=it({name:"nuxt:prefetch",setup(e){const t=gt();e.hooks.hook("app:mounted",()=>{t.beforeEach(async r=>{var s;const n=(s=r==null?void 0:r.meta)==null?void 0:s.layout;n&&typeof gn[n]=="function"&&await gn[n]()})}),e.hooks.hook("link:prefetch",r=>{if(br(r))return;const n=t.resolve(r);if(!n)return;const s=n.meta.layout;let i=fa(n.meta.middleware);i=i.filter(o=>typeof o=="string");for(const o of i)typeof Sn[o]=="function"&&Sn[o]();s&&typeof gn[s]=="function"&&gn[s]()})}});function n0(e){return Array.isArray(e)?e:[e]}const s0={path:"/",watch:!0,decode:e=>Ls(decodeURIComponent(e)),encode:e=>encodeURIComponent(typeof e=="string"?e:JSON.stringify(e))};function hs(e,t){var l;const r={...s0,...t},n=ec(r)||{};let s;r.maxAge!==void 0?s=r.maxAge*1e3:r.expires&&(s=r.expires.getTime()-Date.now());const i=s!==void 0&&s<=0,o=vt(i?void 0:n[e]??((l=r.default)==null?void 0:l.call(r))),a=s&&!i?a0(o,s):_e(o);{const c=typeof BroadcastChannel>"u"?null:new BroadcastChannel(`nuxt:cookies:${e}`),u=()=>{r.readonly||Gg(a.value,n[e])||(o0(e,a.value,r),n[e]=vt(a.value),c==null||c.postMessage({value:r.encode(a.value)}))},f=d=>{var _;const v=d.refresh?(_=ec(r))==null?void 0:_[e]:r.decode(d.value);p=!0,n[e]=a.value=v,rr(()=>{p=!1})};let p=!1;Ho()&&Uc(()=>{p=!0,u(),c==null||c.close()}),c&&(c.onmessage=({data:d})=>f(d)),r.watch?Je(a,()=>{p||u()},{deep:r.watch!=="shallow"}):u()}return a}function ec(e={}){return Og(document.cookie,e)}function i0(e,t,r={}){return t==null?bl(e,t,{...r,maxAge:-1}):bl(e,t,r)}function o0(e,t,r={}){document.cookie=i0(e,t,r)}const tc=2147483647;function a0(e,t){let r,n=0;return Ho()&&Uc(()=>{clearTimeout(r)}),jd((s,i)=>{function o(){clearTimeout(r);const a=t-n,l=a<tc?a:tc;r=setTimeout(()=>{if(n+=l,n<t)return o();e=void 0,i()},l)}return{get(){return s(),e},set(a){o(),e=a,i()}}})}const l0="$s";function yn(...e){const t=typeof e[e.length-1]=="string"?e.pop():void 0;typeof e[0]!="string"&&e.unshift(t);const[r,n]=e;if(!r||typeof r!="string")throw new TypeError("[nuxt] [useState] key must be a string: "+r);if(n!==void 0&&typeof n!="function")throw new Error("[nuxt] [useState] init must be a function: "+n);const s=l0+r,i=$e(),o=qo(i.payload.state,s);if(o.value===void 0&&n){const a=n();if(Se(a))return i.payload.state[s]=a,a;o.value=a}return o}const c0=it(e=>{const t=dt().public.studio||{},r=$r(),n=hs("previewToken",{sameSite:"none",secure:!0}),s=yn("studio-client-db",()=>null);async function i(){const o=await U(()=>import("./useStudio.ur6OYxmR.js"),__vite__mapDeps([123,39,14,124]),import.meta.url).then(c=>c.useStudio),{mountPreviewUI:a,initiateIframeCommunication:l}=o();a(),l()}if(t.apiURL){if(Object.prototype.hasOwnProperty.call(r.query,"preview")&&!r.query.preview||!r.query.preview&&!n.value)return;r.query.preview&&(n.value=String(r.query.preview)),window.sessionStorage.setItem("previewToken",String(n.value)),e.hook("content:storage",o=>{s.value=o}),e.hook("app:mounted",async()=>{await i()})}}),u0=async e=>{const t=$e();e=n0(e),await Promise.all(e.map(r=>p0(t.vueApp._context.components[r])))},f0=e=>u0(e);function p0(e){if(e!=null&&e.__asyncLoader&&!e.__asyncResolved)return e.__asyncLoader()}async function d0(e,t=gt()){const{path:r,matched:n}=t.resolve(e);if(!n.length||(t._routePreloaded||(t._routePreloaded=new Set),t._routePreloaded.has(r)))return;const s=t._preloadPromises=t._preloadPromises||[];if(s.length>4)return Promise.all(s).then(()=>d0(e,t));t._routePreloaded.add(r);const i=n.map(o=>{var a;return(a=o.components)==null?void 0:a.default}).filter(o=>typeof o=="function");for(const o of i){const a=Promise.resolve(o()).catch(()=>{}).finally(()=>s.splice(s.indexOf(a)));s.push(a)}await Promise.all(s)}const h0=["DocsAlert","DocsCard","DocsCardGrid","DocsColourTable","DocsContent","DocsContentNavigation","DocsExample","DocsGradientTable","DocsGrid","DocsHeroHeader","DocsHomeSection","DocsIcon","DocsIconSizingTable","DocsIconTable","DocsImageExample","DocsLayerStyleTable","DocsLink","DocsModuleCard","DocsModuleInfo","DocsModuleNavigation","DocsNavLink","DocsPageHeader","DocsThemeChooser","DocsTypeClassTable","DocsTypeTable","DocsWhatsNew","ProseA","ProseBlockquote","ProseCode","ProseCodeInline","ProseH2","ProseH3","ProseH4","ProseHr","ProseTable","Swatch","DocumentDrivenNotFound","AppFooter","AppLayout","AppLoadingBar","AppNavbar","AppSidebarLayout","RplAccordion","RplAcknowledgement","RplAlert","RplAlertsContainer","RplBreadcrumbs","RplButton","RplCampaignBanner","RplPrimaryCampaign","RplSecondaryCampaign","RplCardCarousel","RplAvatarCard","RplCallToActionCard","RplCard","RplCategoryGridCard","RplKeyDatesCard","RplNavCard","RplPromoCard","RplChip","RplContactUs","RplContent","RplDataTable","RplDataTableRow","RplDescriptionList","RplDescriptionListItem","RplDocument","RplErrorMessage","RplExpandable","RplFile","RplFooter","RplNavSection","RplHeader","RplHeaderActions","RplHeaderGraphic","RplHeaderLinks","RplHeroHeader","RplIntroHeader","RplIcon","RplIconSprite","RplImage","RplImg","RplInPageNavigation","RplCardGrid","RplLayout","RplLayoutBackToTop","RplLayoutSkipLink","RplPageComponent","RplSidebarComponent","RplLink","RplList","RplListContent","RplMediaEmbed","RplMediaGallery","RplMediaGalleryContent","RplModal","RplPageAction","RplPageLinks","RplPageLinksItem","RplPagination","RplPaginationLink","RplPrimaryNav","RplPrimaryNavMegaMenu","RplPrimaryNavMegaMenuAction","RplPrimaryNavMegaMenuBackButton","RplPrimaryNavMegaMenuHomeButton","RplPrimaryNavMegaMenuList","RplPrimaryNavBar","RplPrimaryNavBarAction","RplPrimaryNavQuickExit","RplPrimaryNavSearchForm","RplProfile","RplRelatedLinks","RplResultListing","RplResultListingItem","RplSearchResult","RplSearchBar","RplSearchBarRefine","RplSitemap","RplSlider","RplSocialShare","RplSocialShareEmail","RplSocialShareLink","RplSpinner","RplStatsGrid","RplStatsGridItem","RplTabs","RplTag","RplTextLink","RplTimeline","RplVerticalNav","RplVerticalNavChildList","RplVerticalNavLink","RplVerticalNavToggle","RplFormkitInputError","RplFormkitOuter","RplForm","RplFormActions","RplFormAlert","RplFormContent","RplFormCounter","RplFormDate","RplFormDivider","RplMultiValueLabel","RplFormDropdown","RplFormElement","RplFormFieldset","RplFormHelpText","RplFormInput","RplFormInputGrid","RplFormLabel","RplFormNumber","RplFormOptionButtons","RplFormCheckboxGroup","RplFormOption","RplFormRadioGroup","RplFormTextarea","RplFormValidationError","RplStorybookInputFixture","ContentDoc","ContentList","ContentNavigation","ContentQuery","ContentRenderer","ContentRendererMarkdown","MDCSlot","DocumentDrivenEmpty","Markdown","ProsePre","ProseEm","ProseH1","ProseH5","ProseH6","ProseImg","ProseLi","ProseOl","ProseP","ProseScript","ProseStrong","ProseTbody","ProseTd","ProseTh","ProseThead","ProseTr","ProseUl","ContentPreviewMode","NuxtWelcome","NuxtLayout","NuxtErrorBoundary","ClientOnly","DevOnly","ServerPlaceholder","NuxtLink","NuxtLoadingIndicator","NuxtImg","NuxtPicture","MDC","MDCRenderer","MDCSlot","NuxtPage","NoScript","Link","Base","Title","Meta","Style","Head","Html","Body"],m0=/\d/,g0=["-","_","/","."];function y0(e=""){if(!m0.test(e))return e!==e.toLowerCase()}function Wf(e,t){const r=t??g0,n=[];if(!e||typeof e!="string")return n;let s="",i,o;for(const a of e){const l=r.includes(a);if(l===!0){n.push(s),s="",i=void 0;continue}const c=y0(a);if(o===!1){if(i===!1&&c===!0){n.push(s),s=a,i=c;continue}if(i===!0&&c===!1&&s.length>1){const u=s.at(-1);n.push(s.slice(0,Math.max(0,s.length-1))),s=u+a,i=c;continue}}s+=a,i=c,o=l}return n.push(s),n}function _0(e){return e?e[0].toUpperCase()+e.slice(1):""}function v0(e,t){return e?(Array.isArray(e)?e:Wf(e)).map(r=>_0(t!=null&&t.normalize?r.toLowerCase():r)).join(""):""}function GP(e,t){return e?(Array.isArray(e)?e:Wf(e)).map(r=>r.toLowerCase()).join(t??"-"):""}const Ir=()=>{const e=yn("dd-pages",()=>Jt(mr({}))),t=yn("dd-surrounds",()=>Jt(mr({}))),r=yn("dd-navigation"),n=yn("dd-globals",()=>Jt(mr({})));return{pages:e,surrounds:t,navigation:r,globals:n}},JP=()=>{const{navigation:e,pages:t,surrounds:r,globals:n}=Ir(),s=ge(()=>wr($r().path)),i=ge(()=>t.value[s.value]),o=ge(()=>r.value[s.value]),a=ge(()=>{var d,v;return(v=(d=i==null?void 0:i.value)==null?void 0:d.body)==null?void 0:v.toc}),l=ge(()=>{var d;return(d=i.value)==null?void 0:d._type}),c=ge(()=>{var d;return(d=i.value)==null?void 0:d.excerpt}),u=ge(()=>{var d;return(d=i.value)==null?void 0:d.layout}),f=ge(()=>{var d;return(d=o.value)==null?void 0:d[1]}),p=ge(()=>{var d;return(d=o.value)==null?void 0:d[0]});return{globals:n,navigation:e,surround:o,page:i,excerpt:c,toc:a,type:l,layout:u,next:f,prev:p}},qf=e=>{if(!e.children)return e._path;for(const t of(e==null?void 0:e.children)||[]){const r=qf(t);if(r)return r}},Gf=(e,t)=>{for(const r of t){if(r._path===e&&!r._id)return r.children;if(r.children){const n=Gf(e,r.children);if(n)return n}}},Jf=(e,t)=>{for(const r of t){if(r._path===e)return r;if(r.children){const n=Jf(e,r.children);if(n)return n}}},b0=(e,t,r)=>{let n;const s=(i,o)=>{for(const a of o)if(!(i!=="/"&&a._path==="/")){if(i!=null&&i.startsWith(a._path)&&a[t]&&(n=a[t]),a._path===i)return;a.children&&s(i,a.children)}};return s(e,r),n},w0=()=>({navBottomLink:qf,navDirFromPath:Gf,navPageFromPath:Jf,navKeyFromPath:b0});function pa(e){return JSON.stringify(e,$0)}function $0(e,t){return t instanceof RegExp?`--REGEX ${t.toString()}`:t}const Qf=e=>{let t=pa(e);return t=typeof Buffer<"u"?Buffer.from(t).toString("base64"):btoa(t),t=t.replace(/\+/g,"-").replace(/\//g,"_").replace(/=/g,""),(t.match(/.{1,100}/g)||[]).join("/")},da=()=>({isEnabled:()=>{const n=$r().query;return Object.prototype.hasOwnProperty.call(n,"preview")&&!n.preview?!1:!!(n.preview||hs("previewToken").value||sessionStorage.getItem("previewToken"))},getPreviewToken:()=>hs("previewToken").value||sessionStorage.getItem("previewToken")||void 0,setPreviewToken:n=>{hs("previewToken").value=n,$r().query.preview=n||"",n?sessionStorage.setItem("previewToken",n):sessionStorage.removeItem("previewToken"),window.location.reload()}}),Ns=e=>rf(e,dt().public.content.api.baseURL),Yf=()=>{const{experimental:e}=dt().public.content;return e.clientDB?!0:da().isEnabled()},rc=(e,t)=>t.split(".").reduce((r,n)=>r&&r[n],e),ha=(e,t)=>Object.keys(e).filter(t).reduce((r,n)=>Object.assign(r,{[n]:e[n]}),{}),QP=e=>t=>e&&e.length?ha(t,r=>!e.includes(r)):t,YP=e=>t=>Array.isArray(t)?t.map(r=>e(r)):e(t),Xf=e=>{const t=[],r=[];for(const n of e)["$","_"].includes(n)?t.push(n):r.push(n);return{prefixes:t,properties:r}},XP=(e=[])=>t=>{if(e.length===0||!t)return t;const{prefixes:r,properties:n}=Xf(e);return ha(t,s=>!n.includes(s)&&!r.includes(s[0]))},ZP=(e=[])=>t=>{if(e.length===0||!t)return t;const{prefixes:r,properties:n}=Xf(e);return ha(t,s=>n.includes(s)||r.includes(s[0]))},eC=(e,t)=>{const r=new Intl.Collator(t.$locale,{numeric:t.$numeric,caseFirst:t.$caseFirst,sensitivity:t.$sensitivity}),n=Object.keys(t).filter(s=>!s.startsWith("$"));for(const s of n)e=e.sort((i,o)=>{const a=[rc(i,s),rc(o,s)].map(l=>{if(l!==null)return l instanceof Date?l.toISOString():l});return t[s]===-1&&a.reverse(),r.compare(a[0],a[1])});return e},tC=(e,t="Expected an array")=>{if(!Array.isArray(e))throw new TypeError(t)},Ct=e=>Array.isArray(e)?e:[void 0,null].includes(e)?[]:[e],E0=["sort","where","only","without"];function R0(e,t={}){const r={};for(const o of Object.keys(t.initialParams||{}))r[o]=E0.includes(o)?Ct(t.initialParams[o]):t.initialParams[o];const n=(o,a=l=>l)=>(...l)=>(r[o]=a(...l),i),s=o=>{var a;return t.legacy?o!=null&&o.surround?o.surround:o&&(o!=null&&o.dirConfig&&(o.result={_path:(a=o.dirConfig)==null?void 0:a._path,...o.result,_dir:o.dirConfig}),o!=null&&o._path||Array.isArray(o)||!Object.prototype.hasOwnProperty.call(o,"result")?o:o==null?void 0:o.result):o},i={params:()=>({...r,...r.where?{where:[...Ct(r.where)]}:{},...r.sort?{sort:[...Ct(r.sort)]}:{}}),only:n("only",Ct),without:n("without",Ct),where:n("where",o=>[...Ct(r.where),...Ct(o)]),sort:n("sort",o=>[...Ct(r.sort),...Ct(o)]),limit:n("limit",o=>parseInt(String(o),10)),skip:n("skip",o=>parseInt(String(o),10)),find:()=>e(i).then(s),findOne:()=>e(n("first")(!0)).then(s),count:()=>e(n("count")(!0)).then(s),locale:o=>i.where({_locale:o}),withSurround:n("surround",(o,a)=>({query:o,...a})),withDirConfig:()=>n("dirConfig")(!0)};return t.legacy&&(i.findSurround=(o,a)=>i.withSurround(o,a).find().then(s)),i}const P0=()=>async e=>{const{content:t}=dt().public,r=e.params(),n=t.experimental.stripQueryParameters?Ns(`/query/${`${Os(r)}.${t.integrity}`}/${Qf(r)}.json`):Ns(`/query/${Os(r)}.${t.integrity}.json`);if(Yf())return(await U(()=>import("./client-db.W4pfov87.js"),__vite__mapDeps([125,46]),import.meta.url).then(o=>o.useContentDatabase())).fetch(e);const s=await $fetch(n,{method:"GET",responseType:"json",params:t.experimental.stripQueryParameters?void 0:{_params:pa(r),previewToken:da().getPreviewToken()}});if(typeof s=="string"&&s.startsWith("<!DOCTYPE html>"))throw new Error("Not found");return s};function ms(e,...t){const{content:r}=dt().public,n=R0(P0(),{initialParams:typeof e!="string"?e:{},legacy:!0});let s;typeof e=="string"&&(s=so(ln(e,...t)));const i=n.params;return n.params=()=>{var a,l,c;const o=i();return s&&(o.where=o.where||[],o.first&&(o.where||[]).length===0?o.where.push({_path:wr(s)}):o.where.push({_path:new RegExp(`^${s.replace(/[-[\]{}()*+.,^$\s/]/g,"\\$&")}`)})),(a=o.sort)!=null&&a.length||(o.sort=[{_file:1,$numeric:!0}]),r.locales.length&&((c=(l=o.where)==null?void 0:l.find(f=>f._locale))!=null&&c._locale||(o.where=o.where||[],o.where.push({_locale:r.defaultLocale}))),o},n}const C0=async e=>{const{content:t}=dt().public;typeof(e==null?void 0:e.params)!="function"&&(e=ms(e));const r=e.params(),n=t.experimental.stripQueryParameters?Ns(`/navigation/${`${Os(r)}.${t.integrity}`}/${Qf(r)}.json`):Ns(`/navigation/${Os(r)}.${t.integrity}.json`);if(Yf())return(await U(()=>import("./client-db.W4pfov87.js"),__vite__mapDeps([125,46]),import.meta.url).then(o=>o.generateNavigation))(r);const s=await $fetch(n,{method:"GET",responseType:"json",params:t.experimental.stripQueryParameters?void 0:{_params:pa(r),previewToken:da().getPreviewToken()}});if(typeof s=="string"&&s.startsWith("<!DOCTYPE html>"))throw new Error("Not found");return s},S0=it(e=>{var c,u,f,p;const t=(u=(c=dt())==null?void 0:c.public)==null?void 0:u.content.documentDriven,r=(p=(f=dt())==null?void 0:f.public)==null?void 0:p.content.experimental.clientDB,{navigation:n,pages:s,globals:i,surrounds:o}=Ir(),a=(d,v,_,R)=>{var w;if(v&&(v!=null&&v.layout))return v.layout;if(d.matched.length&&((w=d.matched[0].meta)!=null&&w.layout))return d.matched[0].meta.layout;if(_&&v){const{navKeyFromPath:b}=w0(),h=b(v._path,"layout",_);if(h)return h}if(t.layoutFallbacks&&R){let b;for(const h of t.layoutFallbacks)if(R[h]&&R[h].layout){b=R[h].layout;break}if(b)return b}return"default"},l=async(d,v=!1)=>{e.callHook("content:document-driven:start",{route:d,dedup:v});const _=d.meta.documentDriven||{};if(d.meta.documentDriven===!1)return;const R=wr(d.path),w=[];if(t.navigation&&_.navigation!==!1){const b=()=>{const{navigation:h}=Ir();return h.value&&!v?h.value:C0().then(g=>(h.value=g,g)).catch(()=>null)};w.push(b)}else w.push(()=>Promise.resolve(null));if(t.globals){const b=()=>{const{globals:h}=Ir();if(typeof t.globals=="object"&&Array.isArray(t.globals)){console.log("Globals must be a list of keys with QueryBuilderParams as a value.");return}return Promise.all(Object.entries(t.globals).map(([g,$])=>{if(!v&&h.value[g])return h.value[g];let m="findOne";return $!=null&&$.type&&(m=$.type),ms($)[m]().catch(()=>null)})).then(g=>g.reduce(($,m,C)=>{const A=Object.keys(t.globals)[C];return $[A]=m,$},{}))};w.push(b)}else w.push(()=>Promise.resolve(null));if(t.page&&_.page!==!1){let b={_path:R};typeof _.page=="string"&&(b={_path:_.page}),typeof _.page=="object"&&(b=_.page);const h=()=>{const{pages:g}=Ir();return!v&&g.value[R]&&g.value[R]._path===R?g.value[R]:ms().where(b).findOne().catch(()=>null)};w.push(h)}else w.push(()=>Promise.resolve(null));if(t.surround&&_.surround!==!1){let b=R;["string","object"].includes(typeof _.page)&&(b=_.page),["string","object"].includes(typeof _.surround)&&(b=_.surround);const h=()=>{const{surrounds:g}=Ir();return!v&&g.value[R]?g.value[R]:ms().where({_partial:{$not:!0},navigation:{$not:!1}}).without(["body"]).findSurround(b).catch(()=>null)};w.push(h)}else w.push(()=>Promise.resolve(null));return await Promise.all(w.map(b=>b())).then(async([b,h,g,$])=>{var C,A;b&&(n.value=b),h&&(i.value=h),$&&(o.value[R]=$);const m=(g==null?void 0:g.redirect)||((A=(C=g==null?void 0:g._dir)==null?void 0:C.navigation)==null?void 0:A.redirect);if(m)return s.value[R]=g,m;if(g){const x=a(d,g,b,h),E=gn[x];E&&typeof E=="function"&&await E(),d.meta.layout=x,g.layout=x}s.value[R]=g,await e.callHook("content:document-driven:finish",{route:d,dedup:v,page:g,navigation:b,globals:h,surround:$})})};{const d=gt();e.hook("link:prefetch",v=>{if(!(v in s.value)&&!br(v)){const _=d.resolve(v);_.matched.length>0&&l(_)}}),e.hooks.hook("content:document-driven:finish",({page:v})=>{var _;(_=v==null?void 0:v.body)!=null&&_.children&&Zf(v.body.children)})}cy(async(d,v)=>{if(!r&&d.path===v.path){if(!d.meta.layout){const R=wr(d.path);s.value[R]&&(d.meta.layout=s.value[R].layout)}return}const _=await l(d,!1);if(_)return br(_)?df(e,fy,[_,{external:!0}]):_}),e.hook("app:data:refresh",async()=>await l($r(),!0))});function Zf(e){for(const t of e)if(t.children&&Zf(t.children),t.type==="element"&&t.tag){const r=v0(t.tag);for(const n of["Prose"+r,r])h0.includes(n)&&f0(n)}}var ep=["__key","__init","__shim","__original","__index","__prevKey"];function cn(){return Math.random().toString(36).substring(2,15)}function k0(e,t){const r=e instanceof Set?e:new Set(e);return t&&t.forEach(n=>r.add(n)),[...r]}function re(e,t){return Object.prototype.hasOwnProperty.call(e,t)}function Fe(e,t,r=!0,n=["__key"]){if(e===t)return!0;if(typeof t=="object"&&typeof e=="object"){if(e instanceof Map||e instanceof Set)return!1;if(e instanceof Date&&t instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp&&t instanceof RegExp)return A0(e,t);if(e===null||t===null||Object.keys(e).length!==Object.keys(t).length)return!1;for(const s of n)if((s in e||s in t)&&e[s]!==t[s])return!1;for(const s in e)if(!(s in t)||e[s]!==t[s]&&!r||r&&!Fe(e[s],t[s],r,n))return!1;return!0}return!1}function A0(e,t){return e.source===t.source&&e.flags.split("").sort().join("")===t.flags.split("").sort().join("")}function st(e){const t=typeof e;if(t==="number")return!1;if(e===void 0)return!0;if(t==="string")return e==="";if(t==="object"){if(e===null)return!0;for(const r in e)return!1;return!(e instanceof RegExp||e instanceof Date)}return!1}function T0(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function x0(e){const t=`^${T0(e)}$`,r={MM:"(0[1-9]|1[012])",M:"([1-9]|1[012])",DD:"([012][0-9]|3[01])",D:"([012]?[0-9]|3[01])",YYYY:"\\d{4}",YY:"\\d{2}"},n=Object.keys(r);return new RegExp(n.reduce((s,i)=>s.replace(i,r[i]),t))}function wo(e){return Object.prototype.toString.call(e)==="[object Object]"}function kn(e){return wo(e)||Array.isArray(e)}function rn(e){if(wo(e)===!1||e.__FKNode__||e.__POJO__===!1)return!1;const t=e.constructor;if(t===void 0)return!0;const r=t.prototype;return!(wo(r)===!1||r.hasOwnProperty("isPrototypeOf")===!1)}var Zt=(e,t,r=!1,n=!1)=>{if(t===null)return null;const s={};if(typeof t=="string")return t;for(const i in e)if(re(t,i)&&(t[i]!==void 0||!n)){if(r&&Array.isArray(e[i])&&Array.isArray(t[i])){s[i]=e[i].concat(t[i]);continue}if(t[i]===void 0)continue;rn(e[i])&&rn(t[i])?s[i]=Zt(e[i],t[i],r,n):s[i]=t[i]}else s[i]=e[i];for(const i in t)!re(s,i)&&t[i]!==void 0&&(s[i]=t[i]);return s};function O0(e){if(e[0]!=='"'&&e[0]!=="'"||e[0]!==e[e.length-1])return!1;const t=e[0];for(let r=1;r<e.length;r++)if(e[r]===t&&(r===1||e[r-1]!=="\\")&&r!==e.length-1)return!1;return!0}function L0(e){if(!e.length)return"";let t="",r="";for(let n=0;n<e.length;n++){const s=e.charAt(n);(s!=="\\"||r==="\\")&&(t+=s),r=s}return t}function xr(...e){return e.reduce((t,r)=>{const{value:n,name:s,modelValue:i,config:o,plugins:a,...l}=r;return Object.assign(t,l)},{})}function I0(e){const t=[];let r="",n=0,s="",i="";for(let o=0;o<e.length;o++){const a=e.charAt(o);a===s&&i!=="\\"?s="":(a==="'"||a==='"')&&!s&&i!=="\\"?s=a:a==="("&&!s?n++:a===")"&&!s&&n--,a===","&&!s&&n===0?(t.push(r),r=""):(a!==" "||s)&&(r+=a),i=a}return r&&t.push(r),t}function nc(e,t){const r={},n=t.filter(i=>i instanceof RegExp),s=new Set(t);for(const i in e)!s.has(i)&&!n.some(o=>o.test(i))&&(r[i]=e[i]);return r}function sc(e,t){const r={},n=t.filter(s=>s instanceof RegExp);return t.forEach(s=>{s instanceof RegExp||(r[s]=e[s])}),Object.keys(e).forEach(s=>{n.some(i=>i.test(s))&&(r[s]=e[s])}),r}function Wr(e){return e.replace(/-([a-z0-9])/gi,(t,r)=>r.toUpperCase())}function tp(e){return e.replace(/([a-z0-9])([A-Z])/g,(t,r,n)=>r+"-"+n.toLowerCase()).replace(" ","-").toLowerCase()}function $o(e,t=ep){if(e!==null&&typeof e=="object"){let r;if(Array.isArray(e)?r=[...e]:rn(e)&&(r={...e}),r)return D0(e,r,t),r}return e}function nn(e,t=ep){if(e===null||e instanceof RegExp||e instanceof Date||e instanceof Map||e instanceof Set||typeof File=="function"&&e instanceof File)return e;let r;Array.isArray(e)?r=e.map(n=>typeof n=="object"?nn(n,t):n):r=Object.keys(e).reduce((n,s)=>(n[s]=typeof e[s]=="object"?nn(e[s],t):e[s],n),{});for(const n of t)n in e&&Object.defineProperty(r,n,{enumerable:!1,value:e[n]});return r}function ut(e){return typeof e=="object"?nn(e):e}function M0(e,t){if(!e||typeof e!="object")return null;const r=t.split(".");let n=e;for(const s in r){const i=r[s];if(re(n,i)&&(n=n[i]),+s===r.length-1)return n;if(!n||typeof n!="object")return null}return null}function ft(e){return e!==void 0&&e!=="false"&&e!==!1?!0:void 0}function sn(e){return Object.isFrozen(e)?e:Object.defineProperty(e,"__init",{enumerable:!1,value:!0})}function ma(e){return e.normalize("NFD").replace(/[\u0300-\u036f]/g,"").toLowerCase().replace(/[^a-z0-9]/g," ").trim().replace(/\s+/g,"-")}function D0(e,t,r){for(const n of r)n in e&&Object.defineProperty(t,n,{enumerable:!1,value:e[n]});return t}function N0(e){let t=!1;return(...r)=>{if(!t)return t=!0,queueMicrotask(()=>t=!1),e(...r)}}function H0(e){if(!(e==="false"||e===!1))return!0}function ga(){const e=[];let t=0;const r=s=>e.push(s),n=s=>{const i=e[t];return typeof i=="function"?i(s,o=>(t++,n(o))):(t=0,s)};return r.dispatch=n,r.unshift=s=>e.unshift(s),r.remove=s=>{const i=e.indexOf(s);i>-1&&e.splice(i,1)},r}function rp(){const e=new Map,t=new Map;let r;const n=(s,i)=>{if(r){r.set(i.name,[s,i]);return}e.has(i.name)&&e.get(i.name).forEach(o=>{(i.origin===s||o.modifiers.includes("deep"))&&o.listener(i)}),i.bubble&&s.bubble(i)};return n.flush=()=>{e.clear(),t.clear(),r==null||r.clear()},n.on=(s,i,o="push")=>{const[a,...l]=s.split("."),c=i.receipt||cn(),u={modifiers:l,event:a,listener:i,receipt:c};return e.has(a)?e.get(a)[o](u):e.set(a,[u]),t.has(c)?t.get(c)[o](a):t.set(c,[a]),c},n.off=s=>{var i;t.has(s)&&((i=t.get(s))==null||i.forEach(o=>{const a=e.get(o);Array.isArray(a)&&e.set(o,a.filter(l=>l.receipt!==s))}),t.delete(s))},n.pause=s=>{r||(r=new Map),s&&s.walk(i=>i._e.pause())},n.play=s=>{if(!r)return;const i=r;r=void 0,i.forEach(([o,a])=>n(o,a)),s&&s.walk(o=>o._e.play())},n}function j0(e,t,r,n,s=!0,i){return t._e(e,{payload:n,name:r,bubble:s,origin:e,meta:i}),e}function F0(e,t,r){return Wn(e.parent)&&e.parent._e(e.parent,r),e}function V0(e,t,r,n,s){return t._e.on(r,n,s)}function B0(e,t,r){return t._e.off(r),e}var ya=ga();ya((e,t)=>(e.message||(e.message=`E${e.code}`),t(e)));var _a=ga();_a((e,t)=>{e.message||(e.message=`W${e.code}`);const r=t(e);return console&&typeof console.warn=="function"&&console.warn(r.message),r});function Cr(e,t={}){_a.dispatch({code:e,data:t})}function Qe(e,t={}){throw Error(ya.dispatch({code:e,data:t}).message)}function mt(e,t){const r={blocking:!1,key:cn(),meta:{},type:"state",visible:!0,...e};return t&&r.value&&r.meta.localize!==!1&&(r.value=t.t(r),r.meta.locale=t.config.locale),r}var ic={apply:G0,set:K0,remove:np,filter:W0,reduce:q0,release:Y0,touch:z0};function U0(e=!1){const t={};let r,n=e,s=[];const i=new Map;let o;const a=new Proxy(t,{get(...l){const[c,u]=l;return u==="buffer"?n:u==="_b"?s:u==="_m"?i:u==="_r"?o:re(ic,u)?ic[u].bind(null,t,a,r):Reflect.get(...l)},set(l,c,u){return c==="_n"?(r=u,o==="__n"&&sp(r,a),!0):c==="_b"?(s=u,!0):c==="buffer"?(n=u,!0):c==="_r"?(o=u,!0):(Qe(101,r),!1)}});return a}function K0(e,t,r,n){if(t.buffer)return t._b.push([[n]]),t;if(e[n.key]!==n){if(typeof n.value=="string"&&n.meta.localize!==!1){const i=n.value;n.value=r.t(n),n.value!==i&&(n.meta.locale=r.props.locale)}const s=`message-${re(e,n.key)?"updated":"added"}`;e[n.key]=Object.freeze(r.hook.message.dispatch(n)),r.emit(s,n)}return t}function z0(e,t){for(const r in e){const n={...e[r]};t.set(n)}}function np(e,t,r,n){if(re(e,n)){const s=e[n];delete e[n],r.emit("message-removed",s)}return t.buffer===!0&&(t._b=t._b.filter(s=>(s[0]=s[0].filter(i=>i.key!==n),s[1]||s[0].length))),t}function W0(e,t,r,n,s){for(const i in e){const o=e[i];(!s||o.type===s)&&!n(o)&&np(e,t,r,i)}}function q0(e,t,r,n,s){for(const i in e){const o=e[i];s=n(s,o)}return s}function G0(e,t,r,n,s){if(Array.isArray(n)){if(t.buffer){t._b.push([n,s]);return}const i=new Set(n.map(o=>(t.set(o),o.key)));typeof s=="string"?t.filter(o=>o.type!==s||i.has(o.key)):typeof s=="function"&&t.filter(o=>!s(o)||i.has(o.key))}else for(const i in n){const o=r.at(i);o?o.store.apply(n[i],s):Q0(r,t,i,n[i],s)}}function J0(e,...t){const r=`${e.name}-set`,n=s=>mt({key:ma(s),type:"error",value:s,meta:{source:r,autoClear:!0}});return t.filter(s=>!!s).map(s=>{if(typeof s=="string"&&(s=[s]),Array.isArray(s))return s.map(i=>n(i));{const i={};for(const o in s)Array.isArray(s[o])?i[o]=s[o].map(a=>n(a)):i[o]=[n(s[o])];return i}})}function Q0(e,t,r,n,s){var o;const i=t._m;i.has(r)||i.set(r,[]),t._r||(t._r=sp(e,t)),(o=i.get(r))==null||o.push([n,s])}function sp(e,t){return e.on("child.deep",({payload:r})=>{t._m.forEach((n,s)=>{e.at(s)===r&&(n.forEach(([i,o])=>{r.store.apply(i,o)}),t._m.delete(s))}),t._m.size===0&&t._r&&(e.off(t._r),t._r=void 0)})}function Y0(e,t){t.buffer=!1,t._b.forEach(([r,n])=>t.apply(r,n)),t._b=[]}function X0(){const e={};let t;return{count:(...r)=>Z0(t,e,...r),init(r){t=r,r.on("message-added.deep",oc(e,1)),r.on("message-removed.deep",oc(e,-1))},merge:r=>ac(t,e,r),settled(r){return re(e,r)?e[r].promise:Promise.resolve()},unmerge:r=>ac(t,e,r,!0),value(r){return re(e,r)?e[r].count:0}}}function Z0(e,t,r,n,s=0){if(n=ew(n||r),!re(t,r)){const i={condition:n,count:0,name:r,node:e,promise:Promise.resolve(),resolve:()=>{}};t[r]=i,s=e.store.reduce((o,a)=>o+i.condition(a)*1,s),e.each(o=>{o.ledger.count(i.name,i.condition),s+=o.ledger.value(i.name)})}return ip(t[r],s).promise}function ew(e){return typeof e=="function"?e:t=>t.type===e}function ip(e,t){const r=e.count,n=e.count+t;return e.count=n,r===0&&n!==0?(e.node.emit(`unsettled:${e.name}`,e.count,!1),e.promise=new Promise(s=>e.resolve=s)):r!==0&&n===0&&(e.node.emit(`settled:${e.name}`,e.count,!1),e.resolve()),e.node.emit(`count:${e.name}`,e.count,!1),e}function oc(e,t){return r=>{for(const n in e){const s=e[n];s.condition(r.payload)&&ip(s,t)}}}function ac(e,t,r,n=!1){const s=e;for(const i in t){const o=t[i].condition;n||r.ledger.count(i,o);const a=r.ledger.value(i)*(n?-1:1);if(e){do e.ledger.count(i,o,a),e=e.parent;while(e);e=s}}}var va=new Map,gs=new Map,ba=rp();function tw(e){e.props.id&&(va.set(e.props.id,e),gs.set(e,e.props.id),ba(e,{payload:e,name:e.props.id,bubble:!1,origin:e}))}function rw(e){if(gs.has(e)){const t=gs.get(e);gs.delete(e),va.delete(t),ba(e,{payload:null,name:t,bubble:!1,origin:e})}}function zn(e){return va.get(e)}function nw(e,t){return ba.on(e,t)}function Eo(e,t,r){let n=!0;return t in e.config._t?n=!1:e.emit(`config:${t}`,r,!1),t in e.props||(e.emit("prop",{prop:t,value:r}),e.emit(`prop:${t}`,r)),n}function sw(e={}){const t=new Set,r={...e,_add:s=>t.add(s),_rm:s=>t.delete(s)};return new Proxy(r,{set(s,i,o,a){return typeof i=="string"&&t.forEach(l=>Eo(l,i,o)),Reflect.set(s,i,o,a)}})}function op(e,t){const r=(t||document).getElementById(e);if(r instanceof HTMLFormElement){const n=new Event("submit",{cancelable:!0,bubbles:!0});r.dispatchEvent(n);return}Cr(151,e)}function iw(e){const t=r=>{for(const n in r.store){const s=r.store[n];s.type==="error"||s.type==="ui"&&n==="incomplete"?r.store.remove(n):s.type==="state"&&r.store.set({...s,value:!1})}};t(e),e.walk(t)}function ap(e,t){const r=typeof e=="string"?zn(e):e;if(r){const n=o=>ut(o.props.initial)||(o.type==="group"?{}:o.type==="list"?[]:void 0);r._e.pause(r);const s=ut(t);return t&&!st(t)&&(r.props.initial=kn(s)?sn(s):s,r.props._init=r.props.initial),r.input(n(r),!1),r.walk(o=>{o.type==="list"&&o.sync||o.input(n(o),!1)}),r.input(st(s)&&s?s:n(r),!1),r.type!=="input"&&t&&!st(t)&&kn(t)&&r.walk(o=>{o.props.initial=kn(o.value)?sn(o.value):o.value,o.props._init=o.props.initial}),r._e.play(r),iw(r),r.emit("reset",r),r}Cr(152,e)}var ow={delimiter:".",delay:0,locale:"en",rootClasses:e=>({[`formkit-${tp(e)}`]:!0})},lp=Symbol("index"),Ro=Symbol("removed"),Po=Symbol("moved"),cp=Symbol("inserted");function aw(e){return e.type==="list"&&Array.isArray(e._value)}function Wn(e){return e&&typeof e=="object"&&e.__FKNode__===!0}var ys=(e,t,r)=>{Qe(102,[e,r])},lw={_c:ce(Aw,ys,!1),add:ce(ww),addProps:ce(bw),address:ce(xw,ys,!1),at:ce(Ow),bubble:ce(F0),clearErrors:ce(Vw),calm:ce(yw),config:ce(!1),define:ce(vw),disturb:ce(gw),destroy:ce(_w),extend:ce(Uw),hydrate:ce(hw),index:ce(kw,Sw,!1),input:ce(pp),each:ce(Rw),emit:ce(j0),find:ce(Iw),on:ce(V0),off:ce(B0),parent:ce(!1,$w),plugins:ce(!1),remove:ce(Ew),root:ce(Dw,ys,!1),reset:ce(jw),resetConfig:ce(Cw),setErrors:ce(Fw),submit:ce(Hw),t:ce(Nw),use:ce($a),name:ce(Tw,!1,!1),walk:ce(Pw)};function cw(){return new Map(Object.entries(lw))}function ce(e,t,r=!0){return{get:e?(n,s)=>r?(...i)=>e(n,s,...i):e(n,s):!1,set:t!==void 0?t:ys.bind(null)}}function uw(){const e=new Map;return new Proxy(e,{get(t,r){return e.has(r)||e.set(r,ga()),e.get(r)}})}var wa=0,up=0;function fw(){wa=0,up=0}function pw(e){var t,r;return((t=e.parent)==null?void 0:t.type)==="list"?lp:e.name||`${((r=e.props)==null?void 0:r.type)||"input"}_${++wa}`}function fp(e){return e.type==="group"?sn(e.value&&typeof e.value=="object"&&!Array.isArray(e.value)?e.value:{}):e.type==="list"?sn(Array.isArray(e.value)?e.value:[]):e.value}function pp(e,t,r,n=!0){return t._value=dw(e,e.hook.input.dispatch(r)),e.emit("input",t._value),e.isCreated&&e.type==="input"&&Fe(t._value,t.value)?(e.emit("commitRaw",t.value),t.settled):(t.isSettled&&e.disturb(),n?(t._tmo&&clearTimeout(t._tmo),t._tmo=setTimeout(Hs,e.props.delay,e,t)):Hs(e,t),t.settled)}function dw(e,t){switch(e.type){case"input":break;case"group":(!t||typeof t!="object")&&Qe(107,[e,t]);break;case"list":Array.isArray(t)||Qe(108,[e,t]);break}return t}function Hs(e,t,r=!0,n=!0){t._value=t.value=e.hook.commit.dispatch(t._value),e.type!=="input"&&n&&e.hydrate(),e.emit("commitRaw",t.value),e.emit("commit",t.value),r&&e.calm()}function dp(e,{name:t,value:r,from:n}){if(!Object.isFrozen(e._value)){if(aw(e)){const s=r===Ro?[]:r===Po&&typeof n=="number"?e._value.splice(n,1):[r];e._value.splice(t,r===Po||n===cp?0:1,...s);return}r!==Ro?e._value[t]=r:delete e._value[t]}}function hw(e,t){const r=t._value;return e.type==="list"&&e.sync&&mw(e,t),t.children.forEach(n=>{if(typeof r=="object")if(n.name in r){const s=n.type!=="input"||r[n.name]&&typeof r[n.name]=="object"?sn(r[n.name]):r[n.name];if(!n.isSettled||!kn(s)&&Fe(s,n._value))return;n.input(s,!1)}else(e.type!=="list"||typeof n.name=="number")&&dp(t,{name:n.name,value:n.value}),r.__init||(n.type==="group"?n.input({},!1):n.type==="list"?n.input([],!1):n.input(void 0,!1))}),e}function mw(e,t){const r=e._value;if(!Array.isArray(r))return;const n=[],s=new Set(t.children),i=new Map;r.forEach((a,l)=>{if(t.children[l]&&t.children[l]._value===a)n.push(t.children[l]),s.delete(t.children[l]);else{n.push(null);const c=i.get(a)||[];c.push(l),i.set(a,c)}}),s.size&&i.size&&s.forEach(a=>{if(i.has(a._value)){const l=i.get(a._value),c=l.shift();n[c]=a,s.delete(a),l.length||i.delete(a._value)}});const o=[];for(i.forEach(a=>{o.push(...a)});s.size&&o.length;){const a=s.values().next().value,l=o.shift();if(l===void 0)break;n[l]=a,s.delete(a)}o.forEach((a,l)=>{n[a]=qw({value:l})}),s.size&&s.forEach(a=>{if(!("__FKP"in a)){const l=a._c.parent;if(!l||Gw(l))return;l.ledger.unmerge(a),a._c.parent=null,a.destroy()}}),t.children=n}function gw(e,t){var r;return t._d<=0&&(t.isSettled=!1,e.emit("settled",!1,!1),t.settled=new Promise(n=>{t._resolve=n}),e.parent&&((r=e.parent)==null||r.disturb())),t._d++,e}function yw(e,t,r){var n;if(r!==void 0&&e.type!=="input")return dp(t,r),Hs(e,t,!0,!1);t._d>0&&t._d--,t._d===0&&(t.isSettled=!0,e.emit("settled",!0,!1),e.parent&&((n=e.parent)==null||n.calm({name:e.name,value:t.value})),t._resolve&&t._resolve(t.value))}function _w(e,t){e.emit("destroying",e),e.store.filter(()=>!1),e.parent&&e.parent.remove(e),rw(e),e.emit("destroyed",e),t._e.flush(),t._value=t.value=void 0;for(const r in t.context)delete t.context[r];t.plugins.clear(),t.context=null}function vw(e,t,r){t.type=r.type;const n=nn(r);e.props.__propDefs=hp(e.props.__propDefs??[],(n==null?void 0:n.props)||[]),n.props=e.props.__propDefs,t.props.definition=n,t.value=t._value=fp({type:e.type,value:t.value}),r.forceTypeProp&&(e.props.type&&(e.props.originalType=e.props.type),t.props.type=r.forceTypeProp),r.family&&(t.props.family=r.family),r.features&&r.features.forEach(s=>s(e)),r.props&&e.addProps(r.props),e.emit("defined",r)}function bw(e,t,r){const n=Array.isArray(r)?r:Object.keys(r),s=Array.isArray(r)?{}:n.reduce((o,a)=>("default"in r[a]&&(o[a]=r[a].default),o),{});if(e.props.attrs){const o={...e.props.attrs};e.props._emit=!1;for(const l in o){const c=Wr(l);n.includes(c)&&(e.props[c]=o[l],delete o[l])}Array.isArray(r)||n.forEach(l=>{"default"in r[l]&&e.props[l]===void 0&&(e.props[l]=s[l])});const a=ut(t._value);e.props.initial=e.type!=="input"?sn(a):a,e.props._emit=!0,e.props.attrs=o}const i=hp(e.props.__propDefs??[],r);return e.props.definition&&(e.props.definition.props=i),e.props.__propDefs=i,e.emit("added-props",r),e}function Co(e){return Array.isArray(e)?e.reduce((t,r)=>(t[r]={},t),{}):e}function hp(e,t){return Array.isArray(e)&&Array.isArray(t)?e.concat(t):Zt(Co(e),Co(t))}function ww(e,t,r,n){if(e.type==="input"&&Qe(100,e),r.parent&&r.parent!==e&&r.parent.remove(r),!t.children.includes(r)){if(n!==void 0&&e.type==="list"){const s=t.children[n];s&&"__FKP"in s?(r._c.uid=s.uid,t.children.splice(n,1,r)):t.children.splice(n,0,r),Array.isArray(e.value)&&e.value.length<t.children.length&&e.disturb().calm({name:n,value:r.value,from:cp})}else t.children.push(r);r.isSettled||e.disturb()}if(r.parent!==e){if(r.parent=e,r.parent!==e)return e.remove(r),r.parent.add(r),e}else r.use(e.plugins);return Hs(e,t,!1),e.ledger.merge(r),e.emit("child",r),e}function $w(e,t,r,n){return Wn(n)?(e.parent&&e.parent!==n&&e.parent.remove(e),t.parent=n,e.resetConfig(),n.children.includes(e)?e.use(n.plugins):n.add(e),!0):n===null?(t.parent=null,!0):!1}function Ew(e,t,r){const n=t.children.indexOf(r);if(n!==-1){r.isSettled&&e.disturb(),t.children.splice(n,1);let s=ft(r.props.preserve),i=r.parent;for(;s===void 0&&i;)s=ft(i.props.preserve),i=i.parent;s?e.calm():e.calm({name:e.type==="list"?n:r.name,value:Ro}),r.parent=null,r.config._rmn=r}return e.ledger.unmerge(r),e.emit("childRemoved",r),e}function Rw(e,t,r){t.children.forEach(n=>!("__FKP"in n)&&r(n))}function Pw(e,t,r,n=!1,s=!1){t.children.some(i=>{if("__FKP"in i)return!1;const o=r(i);return n&&o===!1?!0:s&&o===!1?!1:i.walk(r,n,s)})}function Cw(e,t){const r=e.parent||void 0;t.config=mp(e.config._t,r),e.walk(n=>n.resetConfig())}function $a(e,t,r,n=!0,s=!0){return Array.isArray(r)||r instanceof Set?(r.forEach(i=>$a(e,t,i)),e):(t.plugins.has(r)||(s&&typeof r.library=="function"&&r.library(e),n&&r(e)!==!1&&(t.plugins.add(r),e.children.forEach(i=>i.use(r)))),e)}function Sw(e,t,r,n){if(Wn(e.parent)){const s=e.parent.children,i=n>=s.length?s.length-1:n<0?0:n,o=s.indexOf(e);return o===-1?!1:(s.splice(o,1),s.splice(i,0,e),e.parent.children=s,e.parent.type==="list"&&e.parent.disturb().calm({name:i,value:Po,from:o}),!0)}return!1}function kw(e){if(e.parent){const t=[...e.parent.children].indexOf(e);return t===-1?e.parent.children.length:t}return-1}function Aw(e,t){return t}function Tw(e,t){var r;return((r=e.parent)==null?void 0:r.type)==="list"?e.index:t.name!==lp?t.name:e.index}function xw(e,t){return t.parent?t.parent.address.concat([e.name]):[e.name]}function Ow(e,t,r){const n=typeof r=="string"?r.split(e.config.delimiter):r;if(!n.length)return;const s=n[0];let i=e.parent;for(i||(String(n[0])===String(e.name)&&n.shift(),i=e),s==="$parent"&&n.shift();i&&n.length;){const o=n.shift();switch(o){case"$root":i=e.root;break;case"$parent":i=i.parent;break;case"$self":i=e;break;default:i=i.children.find(a=>!("__FKP"in a)&&String(a.name)===String(o))||Lw(i,o)}}return i||void 0}function Lw(e,t){const r=String(t).match(/^(find)\((.*)\)$/);if(r){const[,n,s]=r,i=s.split(",").map(o=>o.trim());switch(n){case"find":return e.find(i[0],i[1]);default:return}}}function Iw(e,t,r,n){return Mw(e,r,n)}function Mw(e,t,r="name"){const n=typeof r=="string"?i=>i[r]==t:r,s=[e];for(;s.length;){const i=s.shift();if(!("__FKP"in i)){if(n(i,t))return i;s.push(...i.children)}}}function Dw(e){let t=e;for(;t.parent;)t=t.parent;return t}function mp(e={},t){let r;return new Proxy(e,{get(...n){const s=n[1];if(s==="_t")return e;const i=Reflect.get(...n);if(i!==void 0)return i;if(t){const o=t.config[s];if(o!==void 0)return o}if(e.rootConfig&&typeof s=="string"){const o=e.rootConfig[s];if(o!==void 0)return o}return s==="delay"&&(r==null?void 0:r.type)==="input"?20:ow[s]},set(...n){const s=n[1],i=n[2];if(s==="_n")return r=i,e.rootConfig&&e.rootConfig._add(r),!0;if(s==="_rmn")return e.rootConfig&&e.rootConfig._rm(r),r=void 0,!0;if(!Fe(e[s],i,!1)){const o=Reflect.set(...n);return r&&(r.emit(`config:${s}`,i,!1),Eo(r,s,i),r.walk(a=>Eo(a,s,i),!1,!0)),o}return!0}})}function Nw(e,t,r,n="ui"){const s=typeof r=="string"?{key:r,value:r,type:n}:r,i=e.hook.text.dispatch(s);return e.emit("text",i,!1),i.value}function Hw(e){const t=e.name;do{if(e.props.isForm===!0)break;e.parent||Qe(106,t),e=e.parent}while(e);e.props.id&&op(e.props.id,e.props.__root)}function jw(e,t,r){return ap(e,r)}function Fw(e,t,r,n){const s=`${e.name}-set`,i=e.hook.setErrors.dispatch({localErrors:r,childErrors:n});return J0(e,i.localErrors,i.childErrors).forEach(o=>{e.store.apply(o,a=>a.meta.source===s)}),e}function Vw(e,t,r=!0,n){return e.store.filter(s=>!(n===void 0||s.meta.source===n),"error"),r&&(n=n||`${e.name}-set`,e.walk(s=>{s.store.filter(i=>!(i.type==="error"&&i.meta&&i.meta.source===n))})),e}function Bw(e){const t={initial:typeof e=="object"?ut(e):e};let r,n=!0,s={};return new Proxy(t,{get(...i){var u,f,p,d;const[o,a]=i;let l;re(t,a)?(l=Reflect.get(...i),(u=s[a])!=null&&u.boolean&&(l=H0(l))):r&&typeof a=="string"&&r.config[a]!==void 0?l=r.config[a]:l=(f=s[a])==null?void 0:f.default;const c=(p=s[a])==null?void 0:p.getter;return(d=s[a])!=null&&d.boolean&&(l=!!l),c?c(l,r):l},set(i,o,a,l){var p;if(o==="_n")return r=a,!0;if(o==="_emit")return n=a,!0;let{prop:c,value:u}=r.hook.prop.dispatch({prop:o,value:a});const f=(p=s[c])==null?void 0:p.setter;if(u=f?f(u,r):u,!Fe(t[c],u,!1)||typeof u=="object"){const d=Reflect.set(i,c,u,l);return c==="__propDefs"&&(s=Co(u)),n&&(r.emit("prop",{prop:c,value:u}),typeof c=="string"&&r.emit(`prop:${c}`,u)),d}return!0}})}function Uw(e,t,r,n){return t.traps.set(r,n),e}function Kw(e,t){if(e.props.definition)return e.define(e.props.definition);for(const r of t){if(e.props.definition)return;typeof r.library=="function"&&r.library(e)}}function zw(e){const t=fp(e),r=mp(e.config||{},e.parent);return{_d:0,_e:rp(),uid:Symbol(),_resolve:!1,_tmo:!1,_value:t,children:k0(e.children||[]),config:r,hook:uw(),isCreated:!1,isSettled:!0,ledger:X0(),name:pw(e),parent:e.parent||null,plugins:new Set,props:Bw(t),settled:Promise.resolve(t),store:U0(!0),sync:e.sync||!1,traps:cw(),type:e.type||"input",value:t}}function Ww(e,t){var n,s;const r=(n=t.props)==null?void 0:n.id;if(r||(s=t.props)==null||delete s.id,e.ledger.init(e.store._n=e.props._n=e.config._n=e),e.props._emit=!1,Object.assign(e.props,r?{}:{id:`input_${up++}`},t.props??{}),e.props._emit=!0,Kw(e,new Set([...t.plugins||[],...e.parent?e.parent.plugins:[]])),t.plugins)for(const i of t.plugins)$a(e,e._c,i,!0,!1);return e.each(i=>e.add(i)),e.parent&&e.parent.add(e,t.index),e.type==="input"&&e.children.length&&Qe(100,e),pp(e,e._c,e._value,!1),e.store.release(),r&&tw(e),e.emit("created",e),e.isCreated=!0,e}function qw(e){return{__FKP:!0,uid:Symbol(),name:(e==null?void 0:e.name)??`p_${wa++}`,value:(e==null?void 0:e.value)??null,_value:(e==null?void 0:e.value)??null,type:(e==null?void 0:e.type)??"input",use:()=>{},input(t){return this._value=t,this.value=t,Promise.resolve()},isSettled:!0}}function Gw(e){return"__FKP"in e}function Jw(e){const t=e||{},r=zw(t),n=new Proxy(r,{get(...s){const[,i]=s;if(i==="__FKNode__")return!0;const o=r.traps.get(i);return o&&o.get?o.get(n,r):Reflect.get(...s)},set(...s){const[,i,o]=s,a=r.traps.get(i);return a&&a.set?a.set(n,r,i,o):Reflect.set(...s)}});return Ww(n,t)}function So(e){return typeof e!="string"&&re(e,"$el")}function ko(e){return typeof e!="string"&&re(e,"$cmp")}function Mr(e){return!e||typeof e=="string"?!1:re(e,"if")&&re(e,"then")}function Qw(e){return typeof e!="string"&&"$formkit"in e}function Yw(e){if(typeof e=="string")return{$el:"text",children:e};if(Qw(e)){const{$formkit:t,for:r,if:n,children:s,bind:i,...o}=e;return Object.assign({$cmp:"FormKit",props:{...o,type:t}},n?{if:n}:{},r?{for:r}:{},s?{children:s}:{},i?{bind:i}:{})}return e}function at(e){let t;const r=new Set,n=function(R,w){return typeof R=="function"?R(w):R},s=[{"&&":(_,R,w)=>n(_,w)&&n(R,w),"||":(_,R,w)=>n(_,w)||n(R,w)},{"===":(_,R,w)=>n(_,w)===n(R,w),"!==":(_,R,w)=>n(_,w)!==n(R,w),"==":(_,R,w)=>n(_,w)==n(R,w),"!=":(_,R,w)=>n(_,w)!=n(R,w),">=":(_,R,w)=>n(_,w)>=n(R,w),"<=":(_,R,w)=>n(_,w)<=n(R,w),">":(_,R,w)=>n(_,w)>n(R,w),"<":(_,R,w)=>n(_,w)<n(R,w)},{"+":(_,R,w)=>n(_,w)+n(R,w),"-":(_,R,w)=>n(_,w)-n(R,w)},{"*":(_,R,w)=>n(_,w)*n(R,w),"/":(_,R,w)=>n(_,w)/n(R,w),"%":(_,R,w)=>n(_,w)%n(R,w)}],i=s.reduce((_,R)=>_.concat(Object.keys(R)),[]),o=new Set(i.map(_=>_.charAt(0)));function a(_,R,w,b){const h=_.filter(g=>g.startsWith(R));return h.length?h.find(g=>b.length>=w+g.length&&b.substring(w,w+g.length)===g?g:!1):!1}function l(_,R,w=1){let b=w?R.substring(_+1).trim():R.substring(0,_).trim();if(!b.length)return-1;if(!w){const g=b.split("").reverse(),$=g.findIndex(m=>o.has(m));b=g.slice($).join("")}const h=b[0];return s.findIndex(g=>{const $=Object.keys(g);return!!a($,h,0,b)})}function c(_,R){let w="";const b=R.length;let h=0;for(let g=_;g<b;g++){const $=R.charAt(g);if($==="(")h++;else if($===")")h--;else if(h===0&&$===" ")continue;if(h===0&&a(i,$,g,R))return[w,g-1];w+=$}return[w,R.length-1]}function u(_,R=0){const w=s[R],b=_.length,h=Object.keys(w);let g=0,$=!1,m=null,C="",A=null,x,E="",T="",S="",j="",ie=0;const X=(D,G)=>{D?S+=G:C+=G};for(let D=0;D<b;D++)if(E=T,T=_.charAt(D),(T==="'"||T==='"')&&E!=="\\"&&(g===0&&!$||g&&!j)){g?j=T:$=T,X(g,T);continue}else if($&&(T!==$||E==="\\")||j&&(T!==j||E==="\\")){X(g,T);continue}else if($===T){$=!1,X(g,T);continue}else if(j===T){j=!1,X(g,T);continue}else{if(T===" ")continue;if(T==="(")g===0?ie=D:S+=T,g++;else if(T===")")if(g--,g===0){const G=typeof C=="string"&&C.startsWith("$")?C:void 0,q=G&&_.charAt(D+1)===".";let be="";q&&([be,D]=c(D+2,_));const Ye=m?R:l(ie,_,0),Le=l(D,_);Ye===-1&&Le===-1?(C=f(S,-1,G,be),typeof C=="string"&&(C=S)):m&&(Ye>=Le||Le===-1)&&R===Ye?(A=m.bind(null,f(S,-1,G,be)),m=null,C=""):Le>Ye&&R===Le?C=f(S,-1,G,be):C+=`(${S})${q?`.${be}`:""}`,S=""}else S+=T;else if(g===0&&(x=a(h,T,D,_))){D===0&&Qe(103,[x,_]),D+=x.length-1,D===_.length-1&&Qe(104,[x,_]),m?C&&(A=m.bind(null,f(C,R)),m=w[x].bind(null,A),C=""):A?(m=w[x].bind(null,f(A,R)),A=null):(m=w[x].bind(null,f(C,R)),C="");continue}else X(g,T)}return C&&m&&(m=m.bind(null,f(C,R))),m=!m&&A?A:m,!m&&C&&(m=(D,G)=>typeof D=="function"?D(G):D,m=m.bind(null,f(C,R))),!m&&!C&&Qe(105,_),m}function f(_,R,w,b){if(w){const h=f(w,s.length);let g,$=b?at(`$${b}`):!1;if(typeof h=="function"){const m=I0(String(_)).map(C=>f(C,-1));return C=>{const A=h(C);return typeof A!="function"?(Cr(150,w),A):(g=A(...m.map(x=>typeof x=="function"?x(C):x)),$&&($=$.provide(x=>{const E=t(x);return x.reduce((S,j)=>{if(j===b||(b==null?void 0:b.startsWith(`${j}(`))){const X=M0(g,j);S[j]=()=>X}else S[j]=E[j];return S},{})})),$?$():g)}}}else if(typeof _=="string"){if(_==="true")return!0;if(_==="false")return!1;if(_==="undefined")return;if(O0(_))return L0(_.substring(1,_.length-1));if(!isNaN(+_))return Number(_);if(R<s.length-1)return u(_,R+1);if(_.startsWith("$")){const h=_.substring(1);return r.add(h),function($){return h in $?$[h]():void 0}}return _}return _}const p=u(e.startsWith("$:")?e.substring(2):e),d=Array.from(r);function v(_){return t=_,Object.assign(p.bind(null,_(d)),{provide:v})}return Object.assign(p,{provide:v})}function _s(e,t,r){return r?typeof r=="string"?r.split(" ").reduce((s,i)=>Object.assign(s,{[i]:!0}),{}):typeof r=="function"?_s(e,t,r(t,e)):r:{}}function Xw(e,t,...r){const n=r.reduce((s,i)=>{if(!i)return Ii(s);const{$reset:o,...a}=i;return Ii(o?a:Object.assign(s,a))},{});return Object.keys(e.hook.classes.dispatch({property:t,classes:n}).classes).filter(s=>n[s]).join(" ")||null}function Ii(e){const t="$remove:";let r=!1;const n=Object.keys(e).filter(s=>(e[s]&&s.startsWith(t)&&(r=!0),e[s]));return n.length>1&&r&&n.filter(i=>i.startsWith(t)).map(i=>{const o=i.substring(t.length);e[o]=!1,e[i]=!1}),e}function Zw(e,t,r){const n=zn(e);n?n.setErrors(t,r):Cr(651,e)}function e$(e,t=!0){const r=zn(e);r?r.clearErrors(t):Cr(652,e)}var js="1.6.0",gp=new WeakSet;function Hn(e,t){const r=t||Object.assign(new Map,{active:!1}),n=new Map,s=function(u){var f;r.active&&(r.has(e)||r.set(e,new Set),(f=r.get(e))==null||f.add(u))},i=function(u){return new Proxy(u,{get(...f){return typeof f[1]=="string"&&s(`prop:${f[1]}`),Reflect.get(...f)}})},o=function(u){return new Proxy(u,{get(...f){return f[1]==="value"?p=>(s(`count:${p}`),u.value(p)):Reflect.get(...f)}})},a=function(u,f){return Wn(u)?Hn(u,r):(f==="value"&&s("commit"),f==="_value"&&s("input"),f==="props"?i(u):f==="ledger"?o(u):(f==="children"&&(s("child"),s("childRemoved")),u))},{proxy:l,revoke:c}=Proxy.revocable(e,{get(...u){switch(u[1]){case"_node":return e;case"deps":return r;case"watch":return(p,d,v)=>vp(l,p,d,v);case"observe":return()=>{const p=new Map(r);return r.clear(),r.active=!0,p};case"stopObserve":return()=>{const p=new Map(r);return r.active=!1,p};case"receipts":return n;case"kill":return()=>{_p(n),gp.add(u[2]),c()}}const f=Reflect.get(...u);return typeof f=="function"?(...p)=>{const d=f(...p);return a(d,u[1])}:a(f,u[1])}});return l}function yp(e,[t,r],n,s){t.forEach((i,o)=>{i.forEach(a=>{e.receipts.has(o)||e.receipts.set(o,{});const l=e.receipts.get(o)??{};l[a]=l[a]??[],l[a].push(o.on(a,n,s)),e.receipts.set(o,l)})}),r.forEach((i,o)=>{i.forEach(a=>{if(e.receipts.has(o)){const l=e.receipts.get(o);l&&re(l,a)&&(l[a].map(o.off),delete l[a],e.receipts.set(o,l))}})})}function _p(e){e.forEach((t,r)=>{for(const n in t)t[n].map(r.off)}),e.clear()}function vp(e,t,r,n){const s=a=>{const l=e.stopObserve();yp(e,bp(i,l),()=>vp(e,t,r,n),n),r&&r(a)},i=new Map(e.deps);e.observe();const o=t(e);o instanceof Promise?o.then(a=>s(a)):s(o)}function bp(e,t){const r=new Map,n=new Map;return t.forEach((s,i)=>{if(!e.has(i))r.set(i,s);else{const o=new Set,a=e.get(i);s.forEach(l=>!(a!=null&&a.has(l))&&o.add(l)),r.set(i,o)}}),e.forEach((s,i)=>{if(!t.has(i))n.set(i,s);else{const o=new Set,a=t.get(i);s.forEach(l=>!(a!=null&&a.has(l))&&o.add(l)),n.set(i,o)}}),[r,n]}function wp(e){return gp.has(e)}var $p=function({value:t}){return["yes","on","1",1,!0,"true"].includes(t)};$p.skipEmpty=!1;var t$=$p,r$=function({value:e},t=!1){const r=Date.parse(t||new Date),n=Date.parse(String(e));return isNaN(n)?!1:n>r},n$=r$,s$=function({value:e},t="default"){const r={default:new RegExp("^\\p{L}+$","u"),latin:/^[a-z]+$/i},n=re(r,t)?t:"default";return r[n].test(String(e))},i$=s$,o$=function({value:e},t="default"){const r={default:/^[\p{L} ]+$/u,latin:/^[a-z ]+$/i},n=re(r,t)?t:"default";return r[n].test(String(e))},a$=o$,l$=function({value:e},t="default"){const r={default:/^[0-9\p{L}]+$/u,latin:/^[0-9a-z]+$/i},n=re(r,t)?t:"default";return r[n].test(String(e))},c$=l$,u$=function({value:e},t=!1){const r=Date.parse(t||new Date),n=Date.parse(String(e));return isNaN(n)?!1:n<r},f$=u$,p$=function({value:t},r,n){if(!isNaN(t)&&!isNaN(r)&&!isNaN(n)){const s=1*t;r=Number(r),n=Number(n);const[i,o]=r<=n?[r,n]:[n,r];return s>=1*i&&s<=1*o}return!1},d$=p$,lc=/(_confirm(?:ed)?)$/,h$=function(t,r,n="loose"){var i;r||(r=lc.test(t.name)?t.name.replace(lc,""):`${t.name}_confirm`);const s=(i=t.at(r))==null?void 0:i.value;return n==="strict"?t.value===s:t.value==s},m$=h$,g$=function({value:e},t="default"){const r={default:new RegExp("\\p{L}","u"),latin:/[a-z]/i},n=re(r,t)?t:"default";return r[n].test(String(e))},y$=g$,_$=function({value:e},t="default"){const r={default:/[\p{L} ]/u,latin:/[a-z ]/i},n=re(r,t)?t:"default";return r[n].test(String(e))},v$=_$,b$=function({value:e},t="default"){const r={default:/[0-9\p{L}]/u,latin:/[0-9a-z]/i},n=re(r,t)?t:"default";return r[n].test(String(e))},w$=b$,$$=function({value:e},t="default"){const r={default:new RegExp("\\p{Ll}","u"),latin:/[a-z]/},n=re(r,t)?t:"default";return r[n].test(String(e))},E$=$$,R$=function({value:t}){return/[0-9]/.test(String(t))},P$=R$,C$=function({value:e}){return/[!-/:-@[-`{-~]/.test(String(e))},S$=C$,k$=function({value:e},t="default"){const r={default:new RegExp("\\p{Lu}","u"),latin:/[A-Z]/},n=re(r,t)?t:"default";return r[n].test(String(e))},A$=k$,T$=function({value:t},r,n){r=r instanceof Date?r.getTime():Date.parse(r),n=n instanceof Date?n.getTime():Date.parse(n);const s=t instanceof Date?t.getTime():Date.parse(String(t));if(r&&!n)n=r,r=Date.now();else if(!r||!s)return!1;return s>=r&&s<=n},x$=T$,O$=function({value:t},r){return r&&typeof r=="string"?x0(r).test(String(t)):!isNaN(Date.parse(String(t)))},L$=O$,I$=function({value:t}){return/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i.test(String(t))},M$=I$,D$=function({value:t},...r){return typeof t=="string"&&r.length?r.some(n=>t.endsWith(n)):typeof t=="string"&&r.length===0},N$=D$,H$=function({value:t},...r){return r.some(n=>typeof n=="object"?Fe(n,t):n==t)},j$=H$,F$=function({value:t},r=0,n=1/0){r=parseInt(r),n=isNaN(parseInt(n))?1/0:parseInt(n);const s=r<=n?r:n,i=n>=r?n:r;if(typeof t=="string"||Array.isArray(t))return t.length>=s&&t.length<=i;if(t&&typeof t=="object"){const o=Object.keys(t).length;return o>=s&&o<=i}return!1},V$=F$,B$=function({value:e},t="default"){const r={default:new RegExp("^\\p{Ll}+$","u"),allow_non_alpha:/^[0-9\p{Ll}!-/:-@[-`{-~]+$/u,allow_numeric:/^[0-9\p{Ll}]+$/u,allow_numeric_dashes:/^[0-9\p{Ll}-]+$/u,latin:/^[a-z]+$/},n=re(r,t)?t:"default";return r[n].test(String(e))},U$=B$,K$=function({value:t},...r){return r.some(n=>(typeof n=="string"&&n.substr(0,1)==="/"&&n.substr(-1)==="/"&&(n=new RegExp(n.substr(1,n.length-2))),n instanceof RegExp?n.test(String(t)):n===t))},z$=K$,W$=function({value:t},r=10){return Array.isArray(t)?t.length<=r:Number(t)<=Number(r)},q$=W$,G$=function({value:t},r=1){return Array.isArray(t)?t.length>=r:Number(t)>=Number(r)},J$=G$,Q$=function({value:t},...r){return!r.some(n=>typeof n=="object"?Fe(n,t):n===t)},Y$=Q$,X$=function({value:t}){return!isNaN(t)},Z$=X$,Ep=function(e,...t){return st(e.value)?t.map(n=>{var s;return(s=e.at(n))==null?void 0:s.value}).some(n=>!st(n)):!0};Ep.skipEmpty=!1;var eE=Ep,Rp=function({value:t},r="default"){return r==="trim"&&typeof t=="string"?!st(t.trim()):!st(t)};Rp.skipEmpty=!1;var tE=Rp,rE=function({value:t},...r){return typeof t=="string"&&r.length?r.some(n=>t.startsWith(n)):typeof t=="string"&&r.length===0},nE=rE,sE=function({value:e}){return/^[!-/:-@[-`{-~]+$/.test(String(e))},iE=sE,oE=function({value:e},t="default"){const r={default:new RegExp("^\\p{Lu}+$","u"),latin:/^[A-Z]+$/},n=re(r,t)?t:"default";return r[n].test(String(e))},aE=oE,lE=function({value:t},...r){try{const n=r.length?r:["http:","https:"],s=new URL(String(t));return n.includes(s.protocol)}catch{return!1}},cE=lE;const uE=Object.freeze(Object.defineProperty({__proto__:null,accepted:t$,alpha:i$,alpha_spaces:a$,alphanumeric:c$,between:d$,confirm:m$,contains_alpha:y$,contains_alpha_spaces:v$,contains_alphanumeric:w$,contains_lowercase:E$,contains_numeric:P$,contains_symbol:S$,contains_uppercase:A$,date_after:n$,date_before:f$,date_between:x$,date_format:L$,email:M$,ends_with:N$,is:j$,length:V$,lowercase:U$,matches:z$,max:q$,min:J$,not:Y$,number:Z$,require_one:eE,required:tE,starts_with:nE,symbol:iE,uppercase:aE,url:cE},Symbol.toStringTag,{value:"Module"}));var Ao=mt({type:"state",blocking:!0,visible:!1,value:!0,key:"validating"});function fE(e={}){return function(r){let n=ut(r.props.validationRules||{}),s={...e,...n},i=Hn(r);const o={input:cn(),rerun:null,isPassing:!0};let a=ut(r.props.validation);r.on("prop:validation",({payload:c})=>l(c,n)),r.on("prop:validationRules",({payload:c})=>l(a,c));function l(c,u){var f;Fe(Object.keys(n||{}),Object.keys(u||{}))&&Fe(a,c)||(n=ut(u),a=ut(c),s={...e,...n},_p(i.receipts),(f=r.props.parsedRules)==null||f.forEach(p=>{var d;p.messageObserver=(d=p.messageObserver)==null?void 0:d.kill()}),r.store.filter(()=>!1,"validation"),r.props.parsedRules=uc(c,s),i.kill(),i=Hn(r),To(i,r.props.parsedRules,o))}r.props.parsedRules=uc(a,s),To(i,r.props.parsedRules,o)}}function To(e,t,r){wp(e)||(r.input=cn(),r.isPassing=!0,e.store.filter(n=>!n.meta.removeImmediately,"validation"),t.forEach(n=>n.debounce&&clearTimeout(n.timer)),t.length&&(e.store.set(Ao),xo(0,t,e,r,!1,()=>{e.store.remove(Ao.key)})))}function xo(e,t,r,n,s,i){const o=t[e];if(!o)return i();const a=n.input;o.state=null;function l(c,u){n.isPassing=n.isPassing&&!!u,o.queued=!1;const f=r.stopObserve();yp(r,bp(o.deps,f),function(){try{r.store.set(Ao)}catch{}o.queued=!0,n.rerun&&clearTimeout(n.rerun),n.rerun=setTimeout(To,0,r,t,n)},"unshift"),o.deps=f,n.input===a&&(o.state=u,u===!1?hE(r,o,s||c):dE(r,o),t.length>e+1?xo(e+1,t,r,n,s||c,i):i())}(!st(r.value)||!o.skipEmpty)&&(n.isPassing||o.force)?o.queued?pE(o,r,c=>{c instanceof Promise?c.then(u=>l(!0,u)):l(!1,c)}):xo(e+1,t,r,n,s,i):st(r.value)&&o.skipEmpty&&n.isPassing?(r.observe(),r.value,l(!1,n.isPassing)):l(!1,null)}function pE(e,t,r){e.debounce?e.timer=setTimeout(()=>{t.observe(),r(e.rule(t,...e.args))},e.debounce):(t.observe(),r(e.rule(t,...e.args)))}function dE(e,t){const r=`rule_${t.name}`;t.messageObserver&&(t.messageObserver=t.messageObserver.kill()),re(e.store,r)&&e.store.remove(r)}function hE(e,t,r){wp(e)||(t.messageObserver||(t.messageObserver=Hn(e._node)),t.messageObserver.watch(n=>gE(n,t),n=>{const s=mE(e,t,n),i=mt({blocking:t.blocking,key:`rule_${t.name}`,meta:{messageKey:t.name,removeImmediately:r,localize:!s,i18nArgs:n},type:"validation",value:s||"This field is not valid."});e.store.set(i)}))}function mE(e,t,r){const n=e.props.validationMessages&&re(e.props.validationMessages,t.name)?e.props.validationMessages[t.name]:void 0;return typeof n=="function"?n(...r):n}function gE(e,t){return[{node:e,name:Pp(e),args:t.args}]}function Pp(e){return typeof e.props.validationLabel=="function"?e.props.validationLabel(e):e.props.validationLabel||e.props.label||e.props.name||String(e.name)}var Cp="(?:[\\*+?()0-9]+)",Sp="[a-zA-Z][a-zA-Z0-9_]+",yE=new RegExp(`^(${Cp}?${Sp})(?:\\:(.*)+)?$`,"i"),_E=new RegExp(`^(${Cp})(${Sp})$`,"i"),vE=/([\*+?]+)?(\(\d+\))([\*+?]+)?/,cc=/\(\d+\)/,bE={blocking:!0,debounce:0,force:!1,skipEmpty:!0,name:""};function uc(e,t){return e?(typeof e=="string"?wE(e):nn(e)).reduce((n,s)=>{let i=s.shift();const o={};if(typeof i=="string"){const[a,l]=EE(i);re(t,a)&&(i=t[a],Object.assign(o,l))}return typeof i=="function"&&n.push({rule:i,args:s,timer:0,state:null,queued:!0,deps:new Map,...bE,...RE(o,i)}),n},[]):[]}function wE(e){return e.split("|").reduce((t,r)=>{const n=$E(r);return n&&t.push(n),t},[])}function $E(e){const t=e.trim();if(t){const r=t.match(yE);if(r&&typeof r[1]=="string"){const n=r[1].trim(),s=r[2]&&typeof r[2]=="string"?r[2].split(",").map(i=>i.trim()):[];return[n,...s]}}return!1}function EE(e){const t=e.match(_E);if(!t)return[e,{name:e}];const r={"*":{force:!0},"+":{skipEmpty:!1},"?":{blocking:!1}},[,n,s]=t,i=cc.test(n)?n.match(vE)||[]:[,n];return[s,[i[1],i[2],i[3]].reduce((o,a)=>(a&&(cc.test(a)?o.debounce=parseInt(a.substr(1,a.length-1)):a.split("").forEach(l=>re(r,l)&&Object.assign(o,r[l]))),o),{name:s})]}function RE(e,t){return e.name||(e.name=t.ruleName||t.name),["skipEmpty","force","debounce","blocking"].reduce((r,n)=>(re(t,n)&&!re(r,n)&&Object.assign(r,{[n]:t[n]}),r),e)}function le(e){return e[0].toUpperCase()+e.substr(1)}function fc(e,t="or"){return e.reduce((r,n,s)=>(r+=n,s<=e.length-2&&e.length>2&&(r+=", "),s===e.length-2&&(r+=`${e.length===2?" ":""}${t} `),r),"")}function ls(e){const t=typeof e=="string"?new Date(Date.parse(e)):e;return t instanceof Date?new Intl.DateTimeFormat(void 0,{dateStyle:"medium",timeZone:"UTC"}).format(t):"(unknown)"}function PE(e,t){return Number(e)>=Number(t)?[t,e]:[e,t]}var CE={add:"Add",remove:"Remove",removeAll:"Remove all",incomplete:"Sorry, not all fields are filled out correctly.",submit:"Submit",noFiles:"No file chosen",moveUp:"Move up",moveDown:"Move down",isLoading:"Loading...",loadMore:"Load more",next:"Next",prev:"Previous",addAllValues:"Add all values",addSelectedValues:"Add selected values",removeAllValues:"Remove all values",removeSelectedValues:"Remove selected values",chooseDate:"Choose date",changeDate:"Change date",summaryHeader:"There were errors in your form.",close:"Close",open:"Open"},SE={accepted({name:e}){return`Please accept the ${e}.`},date_after({name:e,args:t}){return Array.isArray(t)&&t.length?`${le(e)} must be after ${ls(t[0])}.`:`${le(e)} must be in the future.`},alpha({name:e}){return`${le(e)} can only contain alphabetical characters.`},alphanumeric({name:e}){return`${le(e)} can only contain letters and numbers.`},alpha_spaces({name:e}){return`${le(e)} can only contain letters and spaces.`},contains_alpha({name:e}){return`${le(e)} must contain alphabetical characters.`},contains_alphanumeric({name:e}){return`${le(e)} must contain letters or numbers.`},contains_alpha_spaces({name:e}){return`${le(e)} must contain letters or spaces.`},contains_symbol({name:e}){return`${le(e)} must contain a symbol.`},contains_uppercase({name:e}){return`${le(e)} must contain an uppercase letter.`},contains_lowercase({name:e}){return`${le(e)} must contain a lowercase letter.`},contains_numeric({name:e}){return`${le(e)} must contain numbers.`},symbol({name:e}){return`${le(e)} must be a symbol.`},uppercase({name:e}){return`${le(e)} can only contain uppercase letters.`},lowercase({name:e,args:t}){let r="";return Array.isArray(t)&&t.length&&(t[0]==="allow_non_alpha"&&(r=", numbers and symbols"),t[0]==="allow_numeric"&&(r=" and numbers"),t[0]==="allow_numeric_dashes"&&(r=", numbers and dashes")),`${le(e)} can only contain lowercase letters${r}.`},date_before({name:e,args:t}){return Array.isArray(t)&&t.length?`${le(e)} must be before ${ls(t[0])}.`:`${le(e)} must be in the past.`},between({name:e,args:t}){if(isNaN(t[0])||isNaN(t[1]))return"This field was configured incorrectly and can’t be submitted.";const[r,n]=PE(t[0],t[1]);return`${le(e)} must be between ${r} and ${n}.`},confirm({name:e}){return`${le(e)} does not match.`},date_format({name:e,args:t}){return Array.isArray(t)&&t.length?`${le(e)} is not a valid date, please use the format ${t[0]}`:"This field was configured incorrectly and can’t be submitted"},date_between({name:e,args:t}){return`${le(e)} must be between ${ls(t[0])} and ${ls(t[1])}`},email:"Please enter a valid email address.",ends_with({name:e,args:t}){return`${le(e)} doesn’t end with ${fc(t)}.`},is({name:e}){return`${le(e)} is not an allowed value.`},length({name:e,args:[t=0,r=1/0]}){const n=Number(t)<=Number(r)?t:r,s=Number(r)>=Number(t)?r:t;return n==1&&s===1/0?`${le(e)} must be at least one character.`:n==0&&s?`${le(e)} must be less than or equal to ${s} characters.`:n===s?`${le(e)} should be ${s} characters long.`:n&&s===1/0?`${le(e)} must be greater than or equal to ${n} characters.`:`${le(e)} must be between ${n} and ${s} characters.`},matches({name:e}){return`${le(e)} is not an allowed value.`},max({name:e,node:{value:t},args:r}){return Array.isArray(t)?`Cannot have more than ${r[0]} ${e}.`:`${le(e)} must be no more than ${r[0]}.`},mime({name:e,args:t}){return t[0]?`${le(e)} must be of the type: ${t[0]}`:"No file formats allowed."},min({name:e,node:{value:t},args:r}){return Array.isArray(t)?`Cannot have fewer than ${r[0]} ${e}.`:`${le(e)} must be at least ${r[0]}.`},not({name:e,node:{value:t}}){return`“${t}” is not an allowed ${e}.`},number({name:e}){return`${le(e)} must be a number.`},require_one:({name:e,node:t,args:r})=>{const n=r.map(s=>{const i=t.at(s);return i?Pp(i):!1}).filter(s=>!!s);return n.unshift(e),`${n.join(" or ")} is required.`},required({name:e}){return`${le(e)} is required.`},starts_with({name:e,args:t}){return`${le(e)} doesn’t start with ${fc(t)}.`},url(){return"Please enter a valid URL."},invalidDate:"The selected date is invalid."},kE={ui:CE,validation:SE},pc=new Set;function AE(e){return function(r){pc.add(r),r.on("destroying",()=>pc.delete(r));let n=dc(r.config.locale,e),s=n?e[n]:{};r.on("prop:locale",({payload:i})=>{n=dc(i,e),s=n?e[n]:{},r.store.touch()}),r.on("prop:label",()=>r.store.touch()),r.on("prop:validationLabel",()=>r.store.touch()),r.hook.text((i,o)=>{var l,c;const a=((l=i.meta)==null?void 0:l.messageKey)||i.key;if(re(s,i.type)&&re(s[i.type],a)){const u=s[i.type][a];typeof u=="function"?i.value=Array.isArray((c=i.meta)==null?void 0:c.i18nArgs)?u(...i.meta.i18nArgs):u(i):i.value=u}return o(i)})}}function dc(e,t){if(re(t,e))return e;const[r]=e.split("-");if(re(t,r))return r;for(const n in t)return n;return!1}function TE(...e){const t=e.reduce((n,s)=>Zt(n,s),{}),r=()=>{};return r.library=function(n){const s=Wr(n.props.type);re(t,s)&&n.define(t[s])},r}var xE=["classes","config","delay","errors","id","index","inputErrors","library","modelValue","onUpdate:modelValue","name","number","parent","plugins","sectionsSchema","type","validation","validationLabel","validationMessages","validationRules","onInput","onInputRaw","onUpdate:modelValue","onNode","onSubmit","onSubmitInvalid","onSubmitRaw"];function ui(e){return e&&typeof e=="object"&&"group"in e&&Array.isArray(e.options)}function kp(e,t={count:1}){return Array.isArray(e)?e.map(r=>{if(typeof r=="string"||typeof r=="number")return{label:String(r),value:String(r)};if(typeof r=="object"){if("group"in r)return r.options=kp(r.options||[],t),r;"value"in r&&typeof r.value!="string"&&Object.assign(r,{value:`__mask_${t.count++}`,__original:r.value})}return r}):Object.keys(e).map(r=>({label:e[r],value:r}))}function Er(e,t,r=!1){if(Array.isArray(e)){for(const n of e)if(!(typeof n!="object"&&n)){if(ui(n)){const s=Er(n.options,t,!0);if(s!==void 0)return s}else if(t==n.value)return"__original"in n?n.__original:n.value}}return r?void 0:t}function on(e,t){return e===null&&t===void 0||e===void 0&&t===null?!1:e==t?!0:rn(e)&&rn(t)?Fe(e,t):!1}function Ea(e){e.hook.prop((t,r)=>{var n;return t.prop==="options"&&(typeof t.value=="function"?(e.props.optionsLoader=t.value,t.value=[]):((n=e.props)._normalizeCounter??(n._normalizeCounter={count:1}),t.value=kp(t.value,e.props._normalizeCounter))),r(t)})}function te(e,t,r=!1){return(...n)=>{const s=i=>{const o=!t||typeof t=="string"?{$el:t}:t();return(So(o)||ko(o))&&(o.meta||(o.meta={section:e}),n.length&&!o.children&&(o.children=[...n.map(a=>typeof a=="function"?a(i):a)]),So(o)&&(o.attrs={class:`$classes.${e}`,...o.attrs||{}})),{if:`$slots.${e}`,then:`$slots.${e}`,else:e in i?_n(o,i[e]):o}};return s._s=e,r?OE(s):s}}function OE(e){return t=>[e(t)]}function Fs(e){return!!(e&&typeof e=="object"&&("$el"in e||"$cmp"in e||"$formkit"in e))}function _n(e,t={}){return typeof e=="string"?Fs(t)||typeof t=="string"?t:e:Array.isArray(e)?Fs(t)?t:e:Zt(e,t)}var LE=te("actions",()=>({$el:"div",if:"$actions"})),Vs=te("input",()=>({$el:"input",bind:"$attrs",attrs:{type:"$type",name:"$node.props.altName || $node.name",disabled:"$option.attrs.disabled || $disabled",onInput:"$handlers.toggleChecked",checked:"$fns.eq($_value, $onValue)",onBlur:"$handlers.blur",value:"$: true",id:"$id","aria-describedby":{if:"$options.length",then:{if:"$option.help",then:'$: "help-" + $option.attrs.id',else:void 0},else:{if:"$help",then:'$: "help-" + $id',else:void 0}}}})),Ap=te("optionHelp",()=>({$el:"div",if:"$option.help",attrs:{id:'$: "help-" + $option.attrs.id'}})),Bs=te("inner","span"),Us=te("label","span"),Tp=te("option",()=>({$el:"li",for:["option","$options"],attrs:{"data-disabled":"$option.attrs.disabled || $disabled || undefined"}})),xp=te("options","ul"),Ks=te("wrapper",()=>({$el:"label",attrs:{"data-disabled":{if:"$options.length",then:void 0,else:"$disabled || undefined"},"data-checked":{if:"$options == undefined",then:"$fns.eq($_value, $onValue) || undefined",else:"$fns.isChecked($option.value) || undefined"}}})),IE=te("input",()=>({$el:"button",bind:"$attrs",attrs:{type:"$type",disabled:"$disabled",name:"$node.name",id:"$id"}})),ME=te("default",null),zs=te("decorator",()=>({$el:"span",attrs:{"aria-hidden":"true"}})),Op=te("fieldset",()=>({$el:"fieldset",attrs:{id:"$id","aria-describedby":{if:"$help",then:'$: "help-" + $id',else:void 0}}})),DE=te("input",()=>({$el:"input",bind:"$attrs",attrs:{type:"file",disabled:"$disabled",name:"$node.name",onChange:"$handlers.files",onBlur:"$handlers.blur",id:"$id","aria-describedby":"$describedBy","aria-required":"$state.required || undefined"}})),NE=te("fileItem",()=>({$el:"li",for:["file","$value"]})),HE=te("fileList",()=>({$el:"ul",if:"$value.length",attrs:{"data-has-multiple":"$_hasMultipleFiles"}})),jE=te("fileName",()=>({$el:"span",attrs:{class:"$classes.fileName"}})),hc=te("fileRemove",()=>({$el:"button",attrs:{type:"button",onClick:"$handlers.resetFiles"}})),FE=te("form",()=>({$el:"form",bind:"$attrs",attrs:{id:"$id",name:"$node.name",onSubmit:"$handlers.submit","data-loading":"$state.loading || undefined"}})),Ra=te("wrapper",null,!0),Lt=te("help",()=>({$el:"div",if:"$help",attrs:{id:'$: "help-" + $id'}})),xe=(e,t)=>te(`${e}Icon`,()=>{const r=`_raw${e.charAt(0).toUpperCase()}${e.slice(1)}Icon`;return{if:`$${e}Icon && $${r}`,$el:`${t||"span"}`,attrs:{class:`$classes.${e}Icon + " " + $classes.icon`,innerHTML:`$${r}`,onClick:`$handlers.iconClick(${e})`,role:`$fns.iconRole(${e})`,tabindex:`$fns.iconRole(${e}) === "button" && "0" || undefined`,for:{if:`${t==="label"}`,then:"$id"}}}})(),fi=te("inner","div"),pi=te("label",()=>({$el:"label",if:"$label",attrs:{for:"$id"}})),Lp=te("legend",()=>({$el:"legend",if:"$label"})),sr=te("message",()=>({$el:"li",for:["message","$messages"],attrs:{key:"$message.key",id:"$id + '-' + $message.key","data-message-type":"$message.type"}})),ir=te("messages",()=>({$el:"ul",if:"$defaultMessagePlacement && $fns.length($messages)"})),VE=te("noFiles",()=>({$el:"span",if:"$value.length == 0"})),BE=te("optGroup",()=>({$el:"optgroup",bind:"$option.attrs",attrs:{label:"$option.group"}})),mc=te("option",()=>({$el:"option",bind:"$option.attrs",attrs:{class:"$classes.option",value:"$option.value",selected:"$fns.isSelected($option)"}})),gc=te("options",()=>({$el:null,if:"$options.length",for:["option","$option.options || $options"]})),Sr=te("outer",()=>({$el:"div",attrs:{key:"$id","data-family":"$family || undefined","data-type":"$type","data-multiple":'$attrs.multiple || ($type != "select" && $options != undefined) || undefined',"data-has-multiple":"$_hasMultipleFiles","data-disabled":'$: ($disabled !== "false" && $disabled) || undefined',"data-empty":"$state.empty || undefined","data-complete":"$state.complete || undefined","data-invalid":"$state.valid === false && $state.validationVisible || undefined","data-errors":"$state.errors || undefined","data-submitted":"$state.submitted || undefined","data-prefix-icon":"$_rawPrefixIcon !== undefined || undefined","data-suffix-icon":"$_rawSuffixIcon !== undefined || undefined","data-prefix-icon-click":"$onPrefixIconClick !== undefined || undefined","data-suffix-icon-click":"$onSuffixIconClick !== undefined || undefined"}})),It=te("prefix",null),UE=te("input",()=>({$el:"select",bind:"$attrs",attrs:{id:"$id","data-placeholder":"$fns.showPlaceholder($_value, $placeholder)",disabled:"$disabled",class:"$classes.input",name:"$node.name",onChange:"$handlers.onChange",onInput:"$handlers.selectInput",onBlur:"$handlers.blur","aria-describedby":"$describedBy","aria-required":"$state.required || undefined"}})),KE=te("submit",()=>({$cmp:"FormKit",bind:"$submitAttrs",props:{type:"submit",label:"$submitLabel"}})),Mt=te("suffix",null),Ip=te("input",()=>({$el:"input",bind:"$attrs",attrs:{type:"$type",disabled:"$disabled",name:"$node.name",onInput:"$handlers.DOMInput",onBlur:"$handlers.blur",value:"$_value",id:"$id","aria-describedby":"$describedBy","aria-required":"$state.required || undefined"}})),zE=te("input",()=>({$el:"textarea",bind:"$attrs",attrs:{disabled:"$disabled",name:"$node.name",onInput:"$handlers.DOMInput",onBlur:"$handlers.blur",value:"$_value",id:"$id","aria-describedby":"$describedBy","aria-required":"$state.required || undefined"},children:"$initialValue"})),qn=te("wrapper","div");function Mp(e){return function(t,r){return t.prop==="options"&&Array.isArray(t.value)&&(t.value=t.value.map(n=>{var s;return(s=n.attrs)!=null&&s.id?n:Zt(n,{attrs:{id:`${e.props.id}-option-${ma(String(n.value))}`}})}),e.props.type==="checkbox"&&!Array.isArray(e.value)&&(e.isCreated?e.input([],!1):e.on("created",()=>{Array.isArray(e.value)||e.input([],!1)}))),r(t)}}function WE(e,t){const r=t.target;if(r instanceof HTMLInputElement){const n=Array.isArray(e.props.options)?Er(e.props.options,r.value):r.value;Array.isArray(e.props.options)&&e.props.options.length?Array.isArray(e._value)?e._value.some(s=>on(n,s))?e.input(e._value.filter(s=>!on(n,s))):e.input([...e._value,n]):e.input([n]):r.checked?e.input(e.props.onValue):e.input(e.props.offValue)}}function qE(e,t){var r,n;return(r=e.context)==null||r.value,(n=e.context)==null||n._value,Array.isArray(e._value)?e._value.some(s=>on(Er(e.props.options,t),s)):!1}function GE(e){e.on("created",()=>{var t,r;(t=e.context)!=null&&t.handlers&&(e.context.handlers.toggleChecked=WE.bind(null,e)),(r=e.context)!=null&&r.fns&&(e.context.fns.isChecked=qE.bind(null,e)),re(e.props,"onValue")||(e.props.onValue=!0),re(e.props,"offValue")||(e.props.offValue=!1)}),e.hook.prop(Mp(e))}function qr(e,t){return r=>{r.props[`${e}Icon`]===void 0&&(r.props[`${e}Icon`]=t.startsWith("<svg")?t:`default:${t}`)}}function Pa(e){e.on("created",()=>{"disabled"in e.props&&(e.props.disabled=ft(e.props.disabled),e.config.disabled=ft(e.props.disabled))}),e.hook.prop(({prop:t,value:r},n)=>(r=t==="disabled"?ft(r):r,n({prop:t,value:r}))),e.on("prop:disabled",({payload:t})=>{e.config.disabled=ft(t)})}function vs(e,t){return r=>{r.store.set(mt({key:e,type:"ui",value:t||e,meta:{localize:!0,i18nArgs:[r]}}))}}var Mi=typeof window<"u";function Dp(e){e.target instanceof HTMLElement&&e.target.hasAttribute("data-file-hover")&&e.target.removeAttribute("data-file-hover")}function yc(e,t){t.target instanceof HTMLInputElement?e==="dragover"&&t.target.setAttribute("data-file-hover","true"):t.preventDefault(),e==="drop"&&Dp(t)}function JE(e){vs("noFiles","Select file")(e),vs("removeAll","Remove all")(e),vs("remove")(e),e.addProps(["_hasMultipleFiles"]),Mi&&(window._FormKit_File_Drop||(window.addEventListener("dragover",yc.bind(null,"dragover")),window.addEventListener("drop",yc.bind(null,"drop")),window.addEventListener("dragleave",Dp),window._FormKit_File_Drop=!0)),e.hook.input((t,r)=>r(Array.isArray(t)?t:[])),e.on("input",({payload:t})=>{e.props._hasMultipleFiles=Array.isArray(t)&&t.length>1?!0:void 0}),e.on("reset",()=>{if(e.props.id&&Mi){const t=document.getElementById(e.props.id);t&&(t.value="")}}),e.on("created",()=>{Array.isArray(e.value)||e.input([],!1),e.context&&(e.context.handlers.resetFiles=t=>{if(t.preventDefault(),e.input([]),e.props.id&&Mi){const r=document.getElementById(e.props.id);r&&(r.value=""),r==null||r.focus()}},e.context.handlers.files=t=>{var n,s;const r=[];if(t.target instanceof HTMLInputElement&&t.target.files){for(let i=0;i<t.target.files.length;i++){let o;(o=t.target.files.item(i))&&r.push({name:o.name,file:o})}e.input(r)}e.context&&(e.context.files=r),typeof((n=e.props.attrs)==null?void 0:n.onChange)=="function"&&((s=e.props.attrs)==null||s.onChange(t))})})}var _c=mt({key:"loading",value:!0,visible:!1});async function QE(e,t){const r=Math.random();if(e.props._submitNonce=r,t.preventDefault(),await e.settled,e.ledger.value("validating")&&(e.store.set(_c),await e.ledger.settled("validating"),e.store.remove("loading"),e.props._submitNonce!==r))return;const n=s=>s.store.set(mt({key:"submitted",value:!0,visible:!1}));if(e.walk(n),n(e),e.emit("submit-raw"),typeof e.props.onSubmitRaw=="function"&&e.props.onSubmitRaw(t,e),e.ledger.value("blocking"))typeof e.props.onSubmitInvalid=="function"&&e.props.onSubmitInvalid(e),e.props.incompleteMessage!==!1&&Np(e);else if(typeof e.props.onSubmit=="function"){const s=e.props.onSubmit(e.hook.submit.dispatch(nn(e.value)),e);if(s instanceof Promise){const i=e.props.disabled===void 0&&e.props.submitBehavior!=="live";i&&(e.props.disabled=!0),e.store.set(_c),await s,i&&(e.props.disabled=!1),e.store.remove("loading")}}else t.target instanceof HTMLFormElement&&t.target.submit()}function Np(e){e.store.set(mt({blocking:!1,key:"incomplete",meta:{localize:e.props.incompleteMessage===void 0,i18nArgs:[{node:e}],showAsMessage:!0},type:"ui",value:e.props.incompleteMessage||"Form incomplete."}))}function YE(e){var t;e.props.isForm=!0,e.ledger.count("validating",r=>r.key==="validating"),(t=e.props).submitAttrs??(t.submitAttrs={disabled:e.props.disabled}),e.on("prop:disabled",({payload:r})=>{e.props.submitAttrs={...e.props.submitAttrs,disabled:r}}),e.on("created",()=>{var r;(r=e.context)!=null&&r.handlers&&(e.context.handlers.submit=QE.bind(null,e)),re(e.props,"actions")||(e.props.actions=!0)}),e.on("prop:incompleteMessage",()=>{e.store.incomplete&&Np(e)}),e.on("settled:blocking",()=>e.store.remove("incomplete"))}function XE(e){e.props.ignore===void 0&&(e.props.ignore=!0,e.parent=null)}function ZE(e){e.on("created",()=>{e.context&&(e.context.initialValue=e.value||"")})}function Hp(e){if(typeof e.props.number>"u")return;const t=["number","range","hidden"].includes(e.props.type);e.hook.input((r,n)=>{if(r==="")return n(void 0);const s=e.props.number==="integer"?parseInt(r):parseFloat(r);return Number.isFinite(s)?n(s):n(t?void 0:r)})}function eR(e,t){t.target instanceof HTMLInputElement&&e.input(Er(e.props.options,t.target.value))}function tR(e,t){var r,n;return(r=e.context)==null||r.value,(n=e.context)==null||n._value,on(Er(e.props.options,t),e._value)}function rR(e){e.on("created",()=>{var t,r;Array.isArray(e.props.options)||Cr(350,{node:e,inputType:"radio"}),(t=e.context)!=null&&t.handlers&&(e.context.handlers.toggleChecked=eR.bind(null,e)),(r=e.context)!=null&&r.fns&&(e.context.fns.isChecked=tR.bind(null,e))}),e.hook.prop(Mp(e))}var nR=0;function jp(e){(e.type==="group"||e.type==="list")&&e.plugins.add(sR)}function sR(e){e.props.type==="radio"&&(e.addProps(["altName"]),e.props.altName=`${e.name}_${nR++}`)}function iR(e,t){if(ui(t))return!1;e.context&&e.context.value;const r="__original"in t?t.__original:t.value;return Array.isArray(e._value)?e._value.some(n=>on(n,r)):(e._value===void 0||e._value===null&&!Fp(e.props.options,null))&&t.attrs&&t.attrs["data-is-placeholder"]?!0:on(r,e._value)}function Fp(e,t){return e.some(r=>ui(r)?Fp(r.options,t):("__original"in r?r.__original:r.value)===t)}async function oR(e,t){var r;typeof((r=e.props.attrs)==null?void 0:r.onChange)=="function"&&(await new Promise(n=>setTimeout(n,0)),await e.settled,e.props.attrs.onChange(t))}function aR(e,t){const r=t.target,n=r.hasAttribute("multiple")?Array.from(r.selectedOptions).map(s=>Er(e.props.options,s.value)):Er(e.props.options,r.value);e.input(n)}function vc(e,t){return e.some(r=>r.attrs&&r.attrs["data-is-placeholder"])?e:[{label:t,value:"",attrs:{hidden:!0,disabled:!0,"data-is-placeholder":"true"}},...e]}function Vp(e){const t=e.length>0?e[0]:void 0;if(t)return ui(t)?Vp(t.options):"__original"in t?t.__original:t.value}function lR(e){e.on("created",()=>{var r,n,s;const t=ft((r=e.props.attrs)==null?void 0:r.multiple);!t&&e.props.placeholder&&Array.isArray(e.props.options)&&(e.hook.prop(({prop:i,value:o},a)=>(i==="options"&&(o=vc(o,e.props.placeholder)),a({prop:i,value:o}))),e.props.options=vc(e.props.options,e.props.placeholder)),t?e.value===void 0&&e.input([],!1):e.context&&!e.context.options&&(e.props.attrs=Object.assign({},e.props.attrs,{value:e._value}),e.on("input",({payload:i})=>{e.props.attrs=Object.assign({},e.props.attrs,{value:i})})),(n=e.context)!=null&&n.handlers&&(e.context.handlers.selectInput=aR.bind(null,e),e.context.handlers.onChange=oR.bind(null,e)),(s=e.context)!=null&&s.fns&&(e.context.fns.isSelected=iR.bind(null,e),e.context.fns.showPlaceholder=(i,o)=>{if(!Array.isArray(e.props.options))return!1;const a=e.props.options.some(l=>{if(l.attrs&&"data-is-placeholder"in l.attrs)return!1;const c="__original"in l?l.__original:l.value;return Fe(i,c)});return o&&!a?!0:void 0})}),e.hook.input((t,r)=>{var n,s,i;return!e.props.placeholder&&t===void 0&&Array.isArray((n=e.props)==null?void 0:n.options)&&e.props.options.length&&!ft((i=(s=e.props)==null?void 0:s.attrs)==null?void 0:i.multiple)&&(t=Vp(e.props.options)),r(t)})}function Oo(e){return!!(Mr(e)&&e.if&&e.if.startsWith("$slots.")&&typeof e.then=="string"&&e.then.startsWith("$slots.")&&"else"in e)}function At(e,t,r){const n=s=>{const i=t(s);if(r||Fs(i)&&"if"in i||Oo(i)){const o={if:e,then:i};return r&&(o.else=r(s)),o}else Oo(i)?Object.assign(i.else,{if:e}):Fs(i)&&Object.assign(i,{if:e});return i};return n._s=cn(),n}function Gr(e,t){const r=n=>{const s=e({});return Oo(s)?(Array.isArray(s.else)||(s.else=_n(_n(s.else,t),e._s?n[e._s]:{})),s):_n(_n(s,t),e._s?n[e._s]:{})};return r._s=e._s,r}var bc={schema:Sr(ir(sr("$message.value")),qn(IE(xe("prefix"),It(),ME("$label || $ui.submit.value"),Mt(),xe("suffix"))),Lt("$help")),type:"input",family:"button",props:[],features:[vs("submit"),XE],schemaMemoKey:"h6st4epl3j8"},cR={schema:Sr(At("$options == undefined",Ks(Bs(It(),Vs(),zs(xe("decorator")),Mt()),Gr(Us("$label"),{if:"$label"})),Op(Lp("$label"),Lt("$help"),xp(Tp(Ks(Bs(It(),Gr(Vs(),{bind:"$option.attrs",attrs:{id:"$option.attrs.id",value:"$option.value",checked:"$fns.isChecked($option.value)"}}),zs(xe("decorator")),Mt()),Gr(Us("$option.label"),{if:"$option.label"})),Ap("$option.help"))))),At("$options == undefined && $help",Lt("$help")),ir(sr("$message.value"))),type:"input",family:"box",props:["options","onValue","offValue","optionsLoader"],features:[Ea,GE,qr("decorator","checkboxDecorator")],schemaMemoKey:"qje02tb3gu8"},uR={schema:Sr(qn(pi("$label"),fi(xe("prefix","label"),It(),DE(),HE(NE(xe("fileItem"),jE("$file.name"),At("$value.length === 1",hc(xe("fileRemove"),'$ui.remove.value + " " + $file.name')))),At("$value.length > 1",hc("$ui.removeAll.value")),VE(xe("noFiles"),"$ui.noFiles.value"),Mt(),xe("suffix"))),Lt("$help"),ir(sr("$message.value"))),type:"input",family:"text",props:[],features:[JE,qr("fileItem","fileItem"),qr("fileRemove","fileRemove"),qr("noFiles","noFiles")],schemaMemoKey:"9kqc4852fv8"},fR={schema:FE("$slots.default",ir(sr("$message.value")),LE(KE())),type:"group",props:["actions","submit","submitLabel","submitAttrs","submitBehavior","incompleteMessage"],features:[YE,Pa],schemaMemoKey:"5bg016redjo"},pR={schema:Ra("$slots.default"),type:"group",props:[],features:[Pa,jp]},dR={schema:Ip(),type:"input",props:[],features:[Hp]},hR={schema:Ra("$slots.default"),type:"list",props:["sync","dynamic"],features:[Pa,jp]},mR={schema:Ra(),type:"input",props:[],features:[]},gR={schema:Sr(At("$options == undefined",Ks(Bs(It(),Vs(),zs(xe("decorator")),Mt()),Gr(Us("$label"),{if:"$label"})),Op(Lp("$label"),Lt("$help"),xp(Tp(Ks(Bs(It(),Gr(Vs(),{bind:"$option.attrs",attrs:{id:"$option.attrs.id",value:"$option.value",checked:"$fns.isChecked($option.value)"}}),zs(xe("decorator")),Mt()),Gr(Us("$option.label"),{if:"$option.label"})),Ap("$option.help"))))),At("$options == undefined && $help",Lt("$help")),ir(sr("$message.value"))),type:"input",family:"box",props:["options","onValue","offValue","optionsLoader"],features:[Ea,rR,qr("decorator","radioDecorator")],schemaMemoKey:"qje02tb3gu8"},yR={schema:Sr(qn(pi("$label"),fi(xe("prefix"),It(),UE(At("$slots.default",()=>"$slots.default",gc(At("$option.group",BE(gc(mc("$option.label"))),mc("$option.label"))))),At("$attrs.multiple !== undefined",()=>"",xe("select")),Mt(),xe("suffix"))),Lt("$help"),ir(sr("$message.value"))),type:"input",props:["options","placeholder","optionsLoader"],features:[Ea,lR,qr("select","select")],schemaMemoKey:"cb119h43krg"},_R={schema:Sr(qn(pi("$label"),fi(xe("prefix","label"),It(),zE(),Mt(),xe("suffix"))),Lt("$help"),ir(sr("$message.value"))),type:"input",props:[],features:[ZE],schemaMemoKey:"b1n0td79m9g"},Be={schema:Sr(qn(pi("$label"),fi(xe("prefix","label"),It(),Ip(),Mt(),xe("suffix"))),Lt("$help"),ir(sr("$message.value"))),type:"input",family:"text",props:[],features:[Hp],schemaMemoKey:"c3cc4kflsg"},vR={button:bc,submit:bc,checkbox:cR,file:uR,form:fR,group:pR,hidden:dR,list:hR,meta:mR,radio:gR,select:yR,textarea:_R,text:Be,color:Be,date:Be,datetimeLocal:Be,email:Be,month:Be,number:Be,password:Be,search:Be,tel:Be,time:Be,url:Be,week:Be,range:Be},pt=void 0,_t=null,Ws,Bp=!1,vn=!1,bR=new Promise(e=>{Ws=()=>{Bp=!0,e()}}),Tt=typeof window<"u"&&typeof fetch<"u";pt=Tt?getComputedStyle(document.documentElement):void 0;var Nr={},Di={};function wR(e,t,r,n){t&&Object.assign(Nr,t),Tt&&!vn&&(pt!=null&&pt.getPropertyValue("--formkit-theme"))?(Ws(),vn=!0):e&&!vn&&Tt?$R(e):!vn&&Tt&&Ws();const s=function(o){var a,l;o.addProps(["iconLoader","iconLoaderUrl"]),o.props.iconHandler=wc((a=o.props)!=null&&a.iconLoader?o.props.iconLoader:n,(l=o.props)!=null&&l.iconLoaderUrl?o.props.iconLoaderUrl:r),PR(o,o.props.iconHandler),o.on("created",()=>{var c,u;(c=o==null?void 0:o.context)!=null&&c.handlers&&(o.context.handlers.iconClick=f=>{const p=`on${f.charAt(0).toUpperCase()}${f.slice(1)}IconClick`,d=o.props[p];if(d&&typeof d=="function")return v=>d(o,v)}),(u=o==null?void 0:o.context)!=null&&u.fns&&(o.context.fns.iconRole=f=>{const p=`on${f.charAt(0).toUpperCase()}${f.slice(1)}IconClick`;return typeof o.props[p]=="function"?"button":null})})};return s.iconHandler=wc(n,r),s}function $R(e){if(!(!e||!Tt||typeof getComputedStyle!="function")&&(vn=!0,_t=document.getElementById("formkit-theme"),e&&Tt&&(!(pt!=null&&pt.getPropertyValue("--formkit-theme"))&&!_t||_t!=null&&_t.getAttribute("data-theme")&&(_t==null?void 0:_t.getAttribute("data-theme"))!==e))){const r=`https://cdn.jsdelivr.net/npm/@formkit/themes@${js.startsWith("__")?"latest":js}/dist/${e}/theme.css`,n=document.createElement("link");n.type="text/css",n.rel="stylesheet",n.id="formkit-theme",n.setAttribute("data-theme",e),n.onload=()=>{pt=getComputedStyle(document.documentElement),Ws()},document.head.appendChild(n),n.href=r,_t&&_t.remove()}}function wc(e,t){return r=>{if(typeof r!="string")return;if(r.startsWith("<svg"))return r;const n=r.startsWith("default:");r=n?r.split(":")[1]:r;const s=r in Nr;let i;if(s)return Nr[r];if(!Di[r]){if(i=ER(r),i=Tt&&typeof i>"u"?Promise.resolve(i):i,i instanceof Promise)Di[r]=i.then(o=>!o&&typeof r=="string"&&!n?i=typeof e=="function"?e(r):RR(r,t):o).then(o=>(typeof r=="string"&&(Nr[n?`default:${r}`:r]=o),o));else if(typeof i=="string")return Nr[n?`default:${r}`:r]=i,i}return Di[r]}}function ER(e){if(Tt)return Bp?$c(e):bR.then(()=>$c(e))}function $c(e){const t=pt==null?void 0:pt.getPropertyValue(`--fk-icon-${e}`);if(t){const r=atob(t);if(r.startsWith("<svg"))return Nr[e]=r,r}}function RR(e,t){const r=js.startsWith("__")?"latest":js,n=typeof t=="function"?t(e):`https://cdn.jsdelivr.net/npm/@formkit/icons@${r}/dist/icons/${e}.svg`;if(Tt)return fetch(`${n}`).then(async s=>{const i=await s.text();if(i.startsWith("<svg"))return i}).catch(s=>{console.error(s)})}function PR(e,t){const r=/^[a-zA-Z-]+(?:-icon|Icon)$/;Object.keys(e.props).filter(s=>r.test(s)).forEach(s=>CR(e,t,s))}function CR(e,t,r){const n=e.props[r],s=t(n),i=`_raw${r.charAt(0).toUpperCase()}${r.slice(1)}`,o=`on${r.charAt(0).toUpperCase()}${r.slice(1)}Click`;if(e.addProps([i,o]),e.on(`prop:${r}`,SR),s instanceof Promise)return s.then(a=>{e.props[i]=a});e.props[i]=s}function SR(e){var o;const t=e.origin,r=e.payload,n=(o=t==null?void 0:t.props)==null?void 0:o.iconHandler,s=e.name.split(":")[1],i=`_raw${s.charAt(0).toUpperCase()}${s.slice(1)}`;if(n&&typeof n=="function"){const a=n(r);if(a instanceof Promise)return a.then(l=>{t.props[i]=l});t.props[i]=a}}var Ec={100:({data:e})=>`Only groups, lists, and forms can have children (${e.name}).`,101:({data:e})=>`You cannot directly modify the store (${e.name}). See: https://formkit.com/advanced/core#message-store`,102:({data:[e,t]})=>`You cannot directly assign node.${t} (${e.name})`,103:({data:[e]})=>`Schema expressions cannot start with an operator (${e})`,104:({data:[e,t]})=>`Schema expressions cannot end with an operator (${e} in "${t}")`,105:({data:e})=>`Invalid schema expression: ${e}`,106:({data:e})=>`Cannot submit because (${e}) is not in a form.`,107:({data:[e,t]})=>`Cannot set ${e.name} to non object value: ${t}`,108:({data:[e,t]})=>`Cannot set ${e.name} to non array value: ${t}`,300:({data:[e]})=>`Cannot set behavior prop to overscroll (on ${e.name} input) when options prop is a function.`,600:({data:e})=>`Unknown input type${typeof e.props.type=="string"?' "'+e.props.type+'"':""} ("${e.name}")`,601:({data:e})=>`Input definition${typeof e.props.type=="string"?' "'+e.props.type+'"':""} is missing a schema or component property (${e.name}).`},Rc={150:({data:e})=>`Schema function "${e}()" is not a valid function.`,151:({data:e})=>`No form element with id: ${e}`,152:({data:e})=>`No input element with id: ${e}`,350:({data:{node:e,inputType:t}})=>`Invalid options prop for ${e.name} input (${t}). See https://formkit.com/inputs/${t}`,650:'Schema "$get()" must use the id of an input to access.',651:({data:e})=>`Cannot setErrors() on "${e}" because no such id exists.`,652:({data:e})=>`Cannot clearErrors() on "${e}" because no such id exists.`,800:({data:e})=>`${e} is deprecated.`},kR=(e,t)=>{if(e.code in Ec){const r=Ec[e.code];e.message=typeof r=="function"?r(e):r}return t(e)},Pc=!1;function AR(){Pc||(ya(kR),_a(TR),Pc=!0)}var TR=(e,t)=>{if(e.code in Rc){const r=Rc[e.code];e.message=typeof r=="function"?r(e):r}return t(e)},xR=Object.defineProperty,OR=Object.getOwnPropertyNames,Up=(e,t)=>function(){return e&&(t=(0,e[OR(e)[0]])(e=0)),t},LR=(e,t)=>{for(var r in t)xR(e,r,{get:t[r],enumerable:!0})},Cc,Kp,zp=Up({"packages/vue/src/bindings.ts"(){Cc=function(t){t.ledger.count("blocking",E=>E.blocking);const r=_e(!t.ledger.value("blocking"));t.ledger.count("errors",E=>E.type==="error");const n=_e(!!t.ledger.value("errors"));let s=!1;rr(()=>{s=!0});const i=He(t.store.reduce((E,T)=>(T.visible&&(E[T.key]=T),E),{})),o=_e(t.props.validationVisibility||(t.props.type==="checkbox"?"dirty":"blur"));t.on("prop:validationVisibility",({payload:E})=>{o.value=E});const a=_e(o.value==="live"),l=_e(!1),c=E=>{l.value=(E??[]).some(T=>T.name==="required")};c(t.props.parsedRules),t.on("prop:parsedRules",({payload:E})=>c(E));const u=_e(t.children.map(E=>E.uid)),f=ge(()=>{if(!$.state)return!1;if($.state.submitted)return!0;if(!a.value&&!$.state.settled)return!1;switch(o.value){case"live":return!0;case"blur":return $.state.blurred;case"dirty":return $.state.dirty;default:return!1}}),p=ge(()=>$&&d.value?r.value&&!n.value:$.state.dirty&&!st($.value)),d=_e(Array.isArray(t.props.parsedRules)&&t.props.parsedRules.length>0);t.on("prop:parsedRules",({payload:E})=>{d.value=Array.isArray(E)&&E.length>0});const v=ge(()=>{const E={};for(const T in i){const S=i[T];(S.type!=="validation"||f.value)&&(E[T]=S)}return E}),_=He(t.store.reduce((E,T)=>(T.type==="ui"&&T.visible&&(E[T.key]=T),E),{})),R=He({}),w=new Proxy(R,{get(...E){const[T,S]=E;let j=Reflect.get(...E);return!j&&typeof S=="string"&&!re(T,S)&&!S.startsWith("__v")&&Hn(t).watch(X=>{const D=typeof X.config.rootClasses=="function"?X.config.rootClasses(S,X):{},G=X.config.classes?_s(S,X,X.config.classes[S]):{},q=_s(S,X,X.props[`_${S}Class`]),be=_s(S,X,X.props[`${S}Class`]);j=Xw(X,S,D,G,q,be),T[S]=j??""}),j}});t.on("prop:rootClasses",()=>{const E=Object.keys(R);for(const T of E)delete R[T]});const b=ge(()=>{const E=[];$.help&&E.push(`help-${t.props.id}`);for(const T in v.value)E.push(`${t.props.id}-${T}`);return E.length?E.join(" "):void 0}),h=_e(t.value),g=_e(t.value),$=He({_value:g,attrs:t.props.attrs,disabled:t.props.disabled,describedBy:b,fns:{length:E=>Object.keys(E).length,number:E=>Number(E),string:E=>String(E),json:E=>JSON.stringify(E),eq:Fe},handlers:{blur:E=>{t&&(t.store.set(mt({key:"blurred",visible:!1,value:!0})),typeof t.props.attrs.onBlur=="function"&&t.props.attrs.onBlur(E))},touch:()=>{var S;const E=$.dirtyBehavior==="compare";if((S=t.store.dirty)!=null&&S.value&&!E)return;const T=!Fe(t.props._init,t._value);!T&&!E||t.store.set(mt({key:"dirty",visible:!1,value:T}))},DOMInput:E=>{t.input(E.target.value),t.emit("dom-input-event",E)}},help:t.props.help,id:t.props.id,items:u,label:t.props.label,messages:v,didMount:!1,node:Xs(t),options:t.props.options,defaultMessagePlacement:!0,slots:t.props.__slots,state:{blurred:!1,complete:p,dirty:!1,empty:st(h),submitted:!1,settled:t.isSettled,valid:r,errors:n,rules:d,validationVisible:f,required:l},type:t.props.type,family:t.props.family,ui:_,value:h,classes:w});t.on("created",()=>{Fe($.value,t.value)||(g.value=t.value,h.value=t.value,es(h),es(g)),(async()=>(await t.settled,t&&(t.props._init=ut(t.value))))()}),t.on("mounted",()=>{$.didMount=!0}),t.on("settled",({payload:E})=>{$.state.settled=E});function m(E){(Array.isArray(E)?E:Object.keys(E)).forEach(S=>{S=Wr(S),re($,S)||($[S]=t.props[S]),t.on(`prop:${S}`,({payload:j})=>{$[S]=j})})}m((()=>{const E=["__root","help","label","disabled","options","type","attrs","preserve","preserveErrors","id","dirtyBehavior"],T=/^[a-zA-Z-]+(?:-icon|Icon)$/,S=Object.keys(t.props).filter(j=>T.test(j));return E.concat(S)})());function A(E){E.props&&m(E.props)}t.props.definition&&A(t.props.definition),t.on("added-props",({payload:E})=>m(E)),t.on("input",({payload:E})=>{t.type!=="input"&&!Se(E)&&!gr(E)?g.value=$o(E):(g.value=E,es(g))}),t.on("commitRaw",({payload:E})=>{t.type!=="input"&&!Se(E)&&!gr(E)?h.value=g.value=$o(E):(h.value=g.value=E,es(h)),t.emit("modelUpdated")}),t.on("commit",({payload:E})=>{var T;if((!$.state.dirty||$.dirtyBehavior==="compare")&&t.isCreated&&s)if(!((T=t.store.validating)!=null&&T.value))$.handlers.touch();else{const S=t.on("message-removed",({payload:j})=>{j.key==="validating"&&($.handlers.touch(),t.off(S))})}p&&t.type==="input"&&n.value&&!ft(t.props.preserveErrors)&&t.store.filter(S=>{var j;return!(S.type==="error"&&((j=S.meta)==null?void 0:j.autoClear)===!0)}),t.type==="list"&&t.sync&&(u.value=t.children.map(S=>S.uid)),$.state.empty=st(E)});const x=async E=>{E.type==="ui"&&E.visible&&!E.meta.showAsMessage?_[E.key]=E:E.visible?i[E.key]=E:E.type==="state"&&($.state[E.key]=!!E.value)};t.on("message-added",E=>x(E.payload)),t.on("message-updated",E=>x(E.payload)),t.on("message-removed",({payload:E})=>{delete _[E.key],delete i[E.key],delete $.state[E.key]}),t.on("settled:blocking",()=>{r.value=!0}),t.on("unsettled:blocking",()=>{r.value=!1}),t.on("settled:errors",()=>{n.value=!1}),t.on("unsettled:errors",()=>{n.value=!0}),Je(f,E=>{E&&(a.value=!0)}),t.context=$,t.emit("context",t,!1),t.on("destroyed",()=>{t.context=void 0,t=null})},Kp=Cc}}),IR={};LR(IR,{defaultConfig:()=>Ca});var Ca,MR=Up({"packages/vue/src/defaultConfig.ts"(){zp(),Ca=(e={})=>{AR();const{rules:t={},locales:r={},inputs:n={},messages:s={},locale:i=void 0,theme:o=void 0,iconLoaderUrl:a=void 0,iconLoader:l=void 0,icons:c={},...u}=e,f=fE({...uE,...t||{}}),p=AE(Zt({en:kE,...r||{}},s)),d=TE(vR,n),v=wR(o,c,a,l);return Zt({plugins:[d,v,Kp,p,f],...i?{config:{locale:i}}:{}},u||{},!0)}}}),Wp=typeof window>"u",An=new Map;function DR(e){if(!Wp)return;const t=An.get(e);if(t){for(const r of t)r();t.clear(),An.delete(e)}}function NR(e,t){var r;!Wp||!e||(An.has(e)||An.set(e,new Set),(r=An.get(e))==null||r.add(t))}var qp=typeof window>"u",Tn={},Jr={},Ne,St=new WeakMap,HR="__raw__",jR=/[a-zA-Z0-9\-][cC]lass$/;function FR(e,t){const r=_e(null);if(e==="get"){const s={};return r.value=VR.bind(null,s),r}const n=e.split(".");return bt(()=>{r.value=Sa(Se(t)?t.value:t,n)}),r}function Sa(e,t){if(Array.isArray(e)){for(const s of e){const i=s!==!1&&Sa(s,t);if(i!==void 0)return i}return}let r,n=e;for(const s in t){const i=t[s];if(typeof n!="object"||n===null){r=void 0;break}const o=n[i];if(Number(s)===t.length-1&&o!==void 0){r=typeof o=="function"?o.bind(n):o;break}n=o}return r}function VR(e,t){if(typeof t!="string")return Cr(650);if(t in e||(e[t]=_e(void 0)),e[t].value===void 0){e[t].value=null;const r=zn(t);r&&(e[t].value=r.context),nw(t,({payload:n})=>{e[t].value=Wn(n)?n.context:n})}return e[t].value}function Sc(e,t,r){function n(d,v){const _=f(at(v.if),{if:!0}),R=c(d,v.then),w=v.else?c(d,v.else):null;return[_,R,w]}function s(d,v){var b,h;const _=f(at(d.if));let R=()=>v,w=()=>v;return typeof d.then=="object"?w=i(d.then,void 0):typeof d.then=="string"&&((b=d.then)!=null&&b.startsWith("$"))?w=f(at(d.then)):w=()=>d.then,re(d,"else")&&(typeof d.else=="object"?R=i(d.else):typeof d.else=="string"&&((h=d.else)!=null&&h.startsWith("$"))?R=f(at(d.else)):R=()=>d.else),()=>_()?w():R()}function i(d,v,_={}){const R=new Set(Object.keys(d||{})),w=v?f(at(v)):()=>({}),b=[h=>{const g=w();for(const $ in g)R.has($)||(h[$]=g[$])}];if(d){if(Mr(d))return s(d,_);for(let h in d){const g=d[h];let $;const m=typeof g=="string";h.startsWith(HR)?(h=h.substring(7),$=()=>g):m&&g.startsWith("$")&&g.length>1&&!(g.startsWith("$reset")&&jR.test(h))?$=f(at(g)):typeof g=="object"&&Mr(g)?$=s(g,void 0):typeof g=="object"&&rn(g)?$=i(g):$=()=>g,b.push(C=>{C[h]=$()})}}return()=>{const h=Array.isArray(d)?[]:{};return b.forEach(g=>g(h)),h}}function o(d,v){let _=null,R=()=>null,w=!1,b=null,h=null,g=null,$=!1;const m=Yw(v);if(So(m)?(_=m.$el,R=m.$el!=="text"?i(m.attrs,m.bind):()=>null):ko(m)?(typeof m.$cmp=="string"?re(d,m.$cmp)?_=d[m.$cmp]:(_=m.$cmp,$=!0):_=m.$cmp,R=i(m.props,m.bind)):Mr(m)&&([w,b,h]=n(d,m)),!Mr(m)&&"if"in m?w=f(at(m.if)):!Mr(m)&&_===null&&(w=()=>!0),"children"in m&&m.children)if(typeof m.children=="string")if(m.children.startsWith("$slots."))_=_==="text"?"slot":_,b=f(at(m.children));else if(m.children.startsWith("$")&&m.children.length>1){const C=f(at(m.children));b=()=>String(C())}else b=()=>String(m.children);else if(Array.isArray(m.children))b=c(d,m.children);else{const[C,A,x]=n(d,m.children);b=E=>C&&C()?A&&A(E):x&&x(E)}if(ko(m))if(b){const C=b;b=A=>({default(x,E){var j,ie,X,D;const T=Ne;E&&(Ne=E),x&&((j=St.get(Ne))==null||j.unshift(x)),A&&((ie=St.get(Ne))==null||ie.unshift(A));const S=C(A);return x&&((X=St.get(Ne))==null||X.shift()),A&&((D=St.get(Ne))==null||D.shift()),Ne=T,S}}),b.slot=!0}else b=()=>({});if("for"in m&&m.for){const C=m.for.length===3?m.for[2]:m.for[1];g=[typeof C=="string"&&C.startsWith("$")?f(at(C)):()=>C,m.for[0],m.for.length===3?String(m.for[1]):null]}return[w,_,R,b,h,g,$]}function a(d,v){const _=d(v),R=Ne;return Object.keys(_).reduce((w,b)=>{const h=_&&_[b];return w[b]=g=>h&&h(g,R)||null,w},{})}function l(d,v){const[_,R,w,b,h,g,$]=o(d,v);let m=C=>{if(_&&R===null&&b)return _()?b(C):h&&h(C);if(R&&(!_||_())){if(R==="text"&&b)return ra(String(b()));if(R==="slot"&&b)return b(C);const A=$?Yd(R):R,x=b!=null&&b.slot?a(b,C):null;return nt(A,w(),x||(b?b(C):[]))}return typeof h=="function"?h(C):h};if(g){const C=m,[A,x,E]=g;m=()=>{const T=A(),S=Number.isFinite(T)?Array(Number(T)).fill(0).map((D,G)=>G):T,j=[];if(typeof S!="object")return null;const ie=St.get(Ne)||[],X=Array.isArray(S);for(const D in S){if(X&&D in Array.prototype)continue;const G=Object.defineProperty({...ie.reduce((q,be)=>q.__idata?{...q,...be}:be,{}),[x]:S[D],...E!==null?{[E]:X?Number(D):D}:{}},"__idata",{enumerable:!1,value:!0});ie.unshift(G),j.push(C.bind(null,G)()),ie.shift()}return j}}return m}function c(d,v){if(Array.isArray(v)){const R=v.map(l.bind(null,d));return w=>R.map(b=>b(w))}const _=l(d,v);return R=>_(R)}const u=[];function f(d,v={}){const _=new WeakMap;return u.push((R,w)=>{_.set(w,d.provide(b=>R(b,v)))}),()=>_.get(Ne)()}function p(d,v){r??(r=Jp(t));const[_,R]=re(Tn,r)?Tn[r]:[c(e,t),u];return qp||(Jr[r]??(Jr[r]=0),Jr[r]++,Tn[r]=[_,R]),R.forEach(w=>{w(d,v)}),()=>(Ne=v,_())}return p}function Gp(e,t){const r=St.get(Ne)||[];let n;return r.length&&(n=Sa(r,e.split("."))),n===void 0?t:n}function BR(e,t){return new Proxy(e,{get(...r){let n;const s=r[1];if(typeof s=="string"){const i=Ne;Ne=t,n=Gp(s,void 0),Ne=i}return n!==void 0?n:Reflect.get(...r)}})}function kc(e,t,r){return e((n,s={})=>n.reduce((i,o)=>{if(o.startsWith("slots.")){const a=o.substring(6),l=()=>t.slots&&re(t.slots,a)&&typeof t.slots[a]=="function";if(s.if)i[o]=l;else if(t.slots){const c=BR(t,r);i[o]=()=>l()?t.slots[a](c):null}}else{const a=FR(o,t);i[o]=()=>Gp(o,a.value)}return i},{}),r)}function Ac(e,t,r){if(t??(t=Jp(e)),Jr[t]--,Jr[t]===0){delete Jr[t];const[,n]=Tn[t];delete Tn[t],n.length=0}St.delete(r)}function Jp(e){return JSON.stringify(e,(t,r)=>typeof r=="function"?r.toString():r)}var Qp=nr({name:"FormKitSchema",props:{schema:{type:[Array,Object],required:!0},data:{type:Object,default:()=>({})},library:{type:Object,default:()=>({})},memoKey:{type:String,required:!1}},emits:["mounted"],setup(e,t){var c;const r=Ot();let n={};St.set(n,[]);const s={FormKit:Xs(Xp),...e.library};let i=Sc(s,e.schema,e.memoKey),o,a;qp||Je(()=>e.schema,(u,f)=>{var d;const p=n;n={},St.set(n,[]),i=Sc(s,e.schema,e.memoKey),o=kc(i,a,n),u===f&&((d=r==null?void 0:r.proxy)==null?void 0:d.$forceUpdate).call(d),Ac(e.schema,e.memoKey,p)},{deep:!0}),bt(()=>{a=Object.assign(He(e.data??{}),{slots:t.slots}),t.slots,o=kc(i,a,n)});function l(){Ac(e.schema,e.memoKey,n),a.node&&a.node.destroy(),a.slots=null,a=null,o=null}return Bn(()=>t.emit("mounted")),Zo(l),NR((c=Ot())==null?void 0:c.appContext.app,l),()=>o?o():null}}),UR=Qp,KR=typeof window>"u",Tc=Symbol("FormKitParent"),zR=Symbol("FormKitComponentCallback");function WR(e,t){const r=eP(e,t);if(r.props.definition||Qe(600,r),r.props.definition.component)return()=>{var c;return nt((c=r.props.definition)==null?void 0:c.component,{context:r.context},{...t.slots})};const n=_e([]);let s=r.props.definition.schemaMemoKey;const i=()=>{var u,f;const c=(f=(u=r.props)==null?void 0:u.definition)==null?void 0:f.schema;c||Qe(601,r),typeof c=="function"?(n.value=c({...e.sectionsSchema||{}}),(s&&e.sectionsSchema||"memoKey"in c&&typeof c.memoKey=="string")&&(s=(s??(c==null?void 0:c.memoKey))+JSON.stringify(e.sectionsSchema))):n.value=c};i(),KR||r.on("schema",()=>{s+="♻️",i()}),t.emit("node",r);const o=r.props.definition.library,a={FormKit:Xs(Yp),...o,...e.library??{}};function l(){r.emit("mounted")}return t.expose({node:r}),()=>nt(Qp,{schema:n.value,data:r.context,onMounted:l,library:a,memoKey:s},{...t.slots})}var Yp=nr(WR,{props:xE,inheritAttrs:!1}),Xp=Yp,qR=Symbol();function GR(e,t){return e.component(t.alias||"FormKit",Xp).component(t.schemaAlias||"FormKitSchema",UR),{get:zn,setLocale:r=>{var n;(n=t.config)!=null&&n.rootConfig&&(t.config.rootConfig.locale=r)},clearErrors:e$,setErrors:Zw,submit:op,reset:ap}}var Zp=Symbol.for("FormKitOptions"),JR=Symbol.for("FormKitConfig"),QR={install(e,t){const r=Object.assign({alias:"FormKit",schemaAlias:"FormKitSchema"},typeof t=="function"?t():t),n=sw(r.config||{});r.config={rootConfig:n},e.config.globalProperties.$formkit=GR(e,r),e.provide(Zp,r),e.provide(JR,n),typeof window<"u"&&(globalThis.__FORMKIT_CONFIGS__=(globalThis.__FORMKIT_CONFIGS__||[]).concat([n]))}},YR=typeof window<"u",Ni=["ignore","disabled","preserve","help","label",/^preserve(-e|E)rrors/,/^[a-z]+(?:-visibility|Visibility|-behavior|Behavior)$/,/^[a-zA-Z-]+(?:-class|Class)$/,"prefixIcon","suffixIcon",/^[a-zA-Z-]+(?:-icon|Icon)$/],XR=["disabled","ignore","preserve"];function xc(e,t){t.classes&&Object.keys(t.classes).forEach(r=>{typeof r=="string"&&(e.props[`_${r}Class`]=t.classes[r],kn(t.classes[r])&&r==="inner"&&Object.values(t.classes[r]))})}function ZR(e){return e?["Submit","SubmitRaw","SubmitInvalid"].reduce((r,n)=>{const s=`on${n}`;return s in e&&typeof e[s]=="function"&&(r[s]=e[s]),r},{}):{}}function eP(e,t,r={}){const n=Object.assign({},Oe(Zp)||{},r),s=Oe(qR,_e(YR?document:void 0)),i=Oe(zR,()=>{}),o=Ot(),a=ZR(o==null?void 0:o.vnode.props),l=["modelValue","model-value"].some(m=>m in((o==null?void 0:o.vnode.props)??{}));let c=!1;Bn(()=>{c=!0});const u=e.modelValue!==void 0?e.modelValue:ut(t.attrs.value);function f(){const m={...xr(e),...a,type:e.type??"text",__root:s.value,__slots:t.slots},C=nc(xr(t.attrs),Ni);C.key||(C.key=cn()),m.attrs=C;const A=sc(xr(t.attrs),Ni);for(const E in A)XR.includes(E)&&A[E]===""&&(A[E]=!0),m[Wr(E)]=A[E];const x={props:{}};return xc(x,e),Object.assign(m,x.props),typeof m.type!="string"&&(m.definition=m.type,delete m.type),m}const p=f(),d=p.ignore?null:e.parent||Oe(Tc,null),v=Jw(Zt(n||{},{name:e.name||void 0,value:u,parent:d,plugins:(n.plugins||[]).concat(e.plugins??[]),config:e.config||{},props:p,index:e.index,sync:!!ft(t.attrs.sync||t.attrs.dynamic)},!1,!0));i(v),v.props.definition||Qe(600,v);const _=_e(new Set(Array.isArray(v.props.__propDefs)?v.props.__propDefs:Object.keys(v.props.__propDefs??{})));v.on("added-props",({payload:m})=>{(Array.isArray(m)?m:Object.keys(m??{})).forEach(A=>_.value.add(A))});const R=ge(()=>Ni.concat([..._.value]).reduce((m,C)=>(typeof C=="string"?(m.push(Wr(C)),m.push(tp(C))):m.push(C),m),[]));bt(()=>xc(v,e));const w=xr(e);for(const m in w)Je(()=>e[m],()=>{e[m]!==void 0&&(v.props[m]=e[m])});bt(()=>{v.props.__root=s.value});const b=new Set,h=xr(t.attrs);bt(()=>{g(sc(h,R.value))});function g(m){b.forEach(C=>{C(),b.delete(C)});for(const C in m){const A=Wr(C);b.add(Je(()=>t.attrs[C],()=>{v.props[A]=t.attrs[C]}))}}if(bt(()=>{const m=nc(xr(t.attrs),R.value);"multiple"in m&&(m.multiple=ft(m.multiple)),typeof m.onBlur=="function"&&(m.onBlur=N0(m.onBlur)),v.props.attrs=Object.assign({},v.props.attrs||{},m)}),bt(()=>{const m=(e.errors??[]).map(C=>mt({key:ma(C),type:"error",value:C,meta:{source:"prop"}}));v.store.apply(m,C=>C.type==="error"&&C.meta.source==="prop")}),v.type!=="input"){const m=`${v.name}-prop`;bt(()=>{const C=e.inputErrors??{},A=Object.keys(C);A.length||v.clearErrors(!0,m);const x=A.reduce((E,T)=>{let S=C[T];return typeof S=="string"&&(S=[S]),Array.isArray(S)&&(E[T]=S.map(j=>mt({key:j,type:"error",value:j,meta:{source:m}}))),E},{});v.store.apply(x,E=>E.type==="error"&&E.meta.source===m)})}bt(()=>Object.assign(v.config,e.config)),v.type!=="input"&&_r(Tc,v);let $;return v.on("modelUpdated",()=>{var m,C;t.emit("inputRaw",(m=v.context)==null?void 0:m.value,v),c&&t.emit("input",(C=v.context)==null?void 0:C.value,v),l&&v.context&&($=ut(v.value),t.emit("update:modelValue",$o(v.value)))}),l&&(Je(qo(e,"modelValue"),m=>{Fe($,m)||v.input(m,!1)},{deep:!0}),v.value!==u&&v.emit("modelUpdated")),Un(()=>v.destroy()),v}var tP=te("messages",()=>({$el:"ul",if:"$fns.length($messages)"})),rP=te("message",()=>({$el:"li",for:["message","$messages"],attrs:{key:"$message.key",id:"$id + '-' + $message.key","data-message-type":"$message.type"}}));tP(rP("$message.value"));var nP=te("summary",()=>({$el:"div",attrs:{"aria-live":"polite"}})),sP=te("summaryInner",()=>({$el:"div",if:"$summaries.length && $showSummaries"})),iP=te("messages",()=>({$el:"ul",if:"$summaries.length && $showSummaries"})),oP=te("message",()=>({$el:"li",for:["summary","$summaries"],attrs:{key:"$summary.key","data-message-type":"$summary.type"}})),aP=te("summaryHeader",()=>({$el:"h2",attrs:{id:"$id"}})),lP=te("messageLink",()=>({$el:"a",attrs:{id:"$summary.key",href:'$: "#" + $summary.id',onClick:"$jumpLink"}}));nP(sP(aP("$summaryHeader"),iP(oP(lP("$summary.message")))));MR();zp();const cP=it(e=>{const t=Ca;e.hook("app:rendered",r=>{fw(),DR(e.vueApp)}),e.vueApp.use(QR,t)});function uP(e){return{all:e=e||new Map,on:function(t,r){var n=e.get(t);n?n.push(r):e.set(t,[r])},off:function(t,r){var n=e.get(t);n&&(r?n.splice(n.indexOf(r)>>>0,1):e.set(t,[]))},emit:function(t,r){var n=e.get(t);n&&n.slice().map(function(s){s(r)}),(n=e.get("*"))&&n.slice().map(function(s){s(t,r)})}}}const bn={...uP(),eventList:new Set([]),register:e=>{bn.eventList.add(e)},find:e=>{if(bn.eventList.has(e))return Array.from(bn.eventList).find(t=>t===e)},list:()=>Array.from(bn.eventList)},fP={},pP=it(e=>{e.vueApp.use({install:t=>{t.provide("rplIcons",fP),t.provide("$rplEvent",bn)}})});function dP(e={}){const t=e.path||window.location.pathname;let r={};try{r=Ls(sessionStorage.getItem("nuxt:reload")||"{}")}catch{}if(e.force||(r==null?void 0:r.path)!==t||(r==null?void 0:r.expires)<Date.now()){try{sessionStorage.setItem("nuxt:reload",JSON.stringify({path:t,expires:Date.now()+(e.ttl??1e4)}))}catch{}if(e.persistState)try{sessionStorage.setItem("nuxt:reload:state",JSON.stringify({state:$e().payload.state}))}catch{}window.location.pathname!==t?window.location.href=t:window.location.reload()}}const hP=it({name:"nuxt:chunk-reload",setup(e){const t=gt(),r=dt(),n=new Set;t.beforeEach(()=>{n.clear()}),e.hook("app:chunkError",({error:i})=>{n.add(i)});function s(i){const a="href"in i&&i.href[0]==="#"?r.app.baseURL+i.href:ln(r.app.baseURL,i.fullPath);dP({path:a,persistState:!0})}e.hook("app:manifest:update",()=>{t.beforeResolve(s)}),t.onError((i,o)=>{n.has(i)&&s(o)})}}),mP=[k_,T_,Uv,Kv,zv,t0,r0,c0,S0,cP,pP,hP],gP=nr({props:{vnode:{type:Object,required:!0},route:{type:Object,required:!0},vnodeRef:Object,renderKey:String,trackRootNodes:Boolean},setup(e){const t=e.renderKey,r=e.route,n={};for(const s in e.route)Object.defineProperty(n,s,{get:()=>t===e.renderKey?e.route[s]:r[s]});return _r(ii,mr(n)),()=>nt(e.vnode,{ref:e.vnodeRef})}}),yP=nr({name:"NuxtPage",inheritAttrs:!1,props:{name:{type:String},transition:{type:[Boolean,Object],default:void 0},keepalive:{type:[Boolean,Object],default:void 0},route:{type:Object},pageKey:{type:[Function,String],default:null}},setup(e,{attrs:t,expose:r}){const n=$e(),s=_e(),i=Oe(ii,null);let o;r({pageRef:s});const a=Oe(ly,null);let l;const c=n.deferHydration();if(n.isHydrating){const u=n.hooks.hookOnce("app:error",c);gt().beforeEach(u)}return e.pageKey&&Je(()=>e.pageKey,(u,f)=>{u!==f&&n.callHook("page:loading:start")}),()=>nt(Kf,{name:e.name,route:e.route,...t},{default:u=>{const f=vP(i,u.route,u.Component),p=i&&i.matched.length===u.route.matched.length;if(!u.Component){if(l&&!p)return l;c();return}if(l&&a&&!a.isCurrent(u.route))return l;if(f&&i&&(!a||a!=null&&a.isCurrent(i)))return p?l:null;const d=bo(u,e.pageKey);!n.isHydrating&&!bP(i,u.route,u.Component)&&o===d&&n.callHook("page:loading:end"),o=d;const v=!!(e.transition??u.route.meta.pageTransition??go),_=v&&_P([e.transition,u.route.meta.pageTransition,go,{onAfterLeave:()=>{n.callHook("page:transition:finish",u.Component)}}].filter(Boolean)),R=e.keepalive??u.route.meta.keepalive??w_;return l=Mv(sa,v&&_,Iv(R,nt(mu,{suspensible:!0,onPending:()=>n.callHook("page:start",u.Component),onResolve:()=>{rr(()=>n.callHook("page:finish",u.Component).then(()=>n.callHook("page:loading:end")).finally(c))}},{default:()=>{const w=nt(gP,{key:d||void 0,vnode:u.Component,route:u.route,renderKey:d||void 0,trackRootNodes:v,vnodeRef:s});return R&&(w.type.name=u.Component.type.name||u.Component.type.__name||"RouteProvider"),w}}))).default(),l}})}});function _P(e){const t=e.map(r=>({...r,onAfterLeave:r.onAfterLeave?fa(r.onAfterLeave):void 0}));return _f(...t)}function vP(e,t,r){if(!e)return!1;const n=t.matched.findIndex(s=>{var i;return((i=s.components)==null?void 0:i.default)===(r==null?void 0:r.type)});return!n||n===-1?!1:t.matched.slice(0,n).some((s,i)=>{var o,a,l;return((o=s.components)==null?void 0:o.default)!==((l=(a=e.matched[i])==null?void 0:a.components)==null?void 0:l.default)})||r&&bo({route:t,Component:r})!==bo({route:e,Component:r})}function bP(e,t,r){return e?t.matched.findIndex(s=>{var i;return((i=s.components)==null?void 0:i.default)===(r==null?void 0:r.type)})<t.matched.length-1:!1}const wP=nr({__name:"app",setup(e){return a_({script:[{tagPosition:"bodyClose",src:"https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0",async:!0},{tagPosition:"bodyClose",innerHTML:`window.dataLayer = window.dataLayer || [];
+  */const Lr=typeof window<"u";function x_(e){return e.__esModule||e[Symbol.toStringTag]==="Module"}const de=Object.assign;function Ti(e,t){const r={};for(const n in t){const s=t[n];r[n]=ht(s)?s.map(e):e(s)}return r}const Pn=()=>{},ht=Array.isArray,O_=/\/$/,L_=e=>e.replace(O_,"");function xi(e,t,r="/"){let n,s={},i="",o="";const a=t.indexOf("#");let l=t.indexOf("?");return a<l&&a>=0&&(l=-1),l>-1&&(n=t.slice(0,l),i=t.slice(l+1,a>-1?a:t.length),s=e(i)),a>-1&&(n=n||t.slice(0,a),o=t.slice(a,t.length)),n=N_(n??t,r),{fullPath:n+(i&&"?")+i+o,path:n,query:s,hash:o}}function I_(e,t){const r=t.query?e(t.query):"";return t.path+(r&&"?")+r+(t.hash||"")}function Il(e,t){return!t||!e.toLowerCase().startsWith(t.toLowerCase())?e:e.slice(t.length)||"/"}function M_(e,t,r){const n=t.matched.length-1,s=r.matched.length-1;return n>-1&&n===s&&en(t.matched[n],r.matched[s])&&Lf(t.params,r.params)&&e(t.query)===e(r.query)&&t.hash===r.hash}function en(e,t){return(e.aliasOf||e)===(t.aliasOf||t)}function Lf(e,t){if(Object.keys(e).length!==Object.keys(t).length)return!1;for(const r in e)if(!D_(e[r],t[r]))return!1;return!0}function D_(e,t){return ht(e)?Ml(e,t):ht(t)?Ml(t,e):e===t}function Ml(e,t){return ht(t)?e.length===t.length&&e.every((r,n)=>r===t[n]):e.length===1&&e[0]===t}function N_(e,t){if(e.startsWith("/"))return e;if(!e)return t;const r=t.split("/"),n=e.split("/");let s=r.length-1,i,o;for(i=0;i<n.length;i++)if(o=n[i],o!==".")if(o==="..")s>1&&s--;else break;return r.slice(0,s).join("/")+"/"+n.slice(i-(i===n.length?1:0)).join("/")}var Nn;(function(e){e.pop="pop",e.push="push"})(Nn||(Nn={}));var Cn;(function(e){e.back="back",e.forward="forward",e.unknown=""})(Cn||(Cn={}));function H_(e){if(!e)if(Lr){const t=document.querySelector("base");e=t&&t.getAttribute("href")||"/",e=e.replace(/^\w+:\/\/[^\/]+/,"")}else e="/";return e[0]!=="/"&&e[0]!=="#"&&(e="/"+e),L_(e)}const j_=/^[^#]+#/;function F_(e,t){return e.replace(j_,"#")+t}function V_(e,t){const r=document.documentElement.getBoundingClientRect(),n=e.getBoundingClientRect();return{behavior:t.behavior,left:n.left-r.left-(t.left||0),top:n.top-r.top-(t.top||0)}}const ci=()=>({left:window.pageXOffset,top:window.pageYOffset});function B_(e){let t;if("el"in e){const r=e.el,n=typeof r=="string"&&r.startsWith("#"),s=typeof r=="string"?n?document.getElementById(r.slice(1)):document.querySelector(r):r;if(!s)return;t=V_(s,e)}else t=e;"scrollBehavior"in document.documentElement.style?window.scrollTo(t):window.scrollTo(t.left!=null?t.left:window.pageXOffset,t.top!=null?t.top:window.pageYOffset)}function Dl(e,t){return(history.state?history.state.position-t:-1)+e}const yo=new Map;function U_(e,t){yo.set(e,t)}function K_(e){const t=yo.get(e);return yo.delete(e),t}let z_=()=>location.protocol+"//"+location.host;function If(e,t){const{pathname:r,search:n,hash:s}=t,i=e.indexOf("#");if(i>-1){let a=s.includes(e.slice(i))?e.slice(i).length:1,l=s.slice(a);return l[0]!=="/"&&(l="/"+l),Il(l,"")}return Il(r,e)+n+s}function W_(e,t,r,n){let s=[],i=[],o=null;const a=({state:p})=>{const d=If(e,location),v=r.value,_=t.value;let R=0;if(p){if(r.value=d,t.value=p,o&&o===v){o=null;return}R=_?p.position-_.position:0}else n(d);s.forEach(w=>{w(r.value,v,{delta:R,type:Nn.pop,direction:R?R>0?Cn.forward:Cn.back:Cn.unknown})})};function l(){o=r.value}function c(p){s.push(p);const d=()=>{const v=s.indexOf(p);v>-1&&s.splice(v,1)};return i.push(d),d}function u(){const{history:p}=window;p.state&&p.replaceState(de({},p.state,{scroll:ci()}),"")}function f(){for(const p of i)p();i=[],window.removeEventListener("popstate",a),window.removeEventListener("beforeunload",u)}return window.addEventListener("popstate",a),window.addEventListener("beforeunload",u),{pauseListeners:l,listen:c,destroy:f}}function Nl(e,t,r,n=!1,s=!1){return{back:e,current:t,forward:r,replaced:n,position:window.history.length,scroll:s?ci():null}}function q_(e){const{history:t,location:r}=window,n={value:If(e,r)},s={value:t.state};s.value||i(n.value,{back:null,current:n.value,forward:null,position:t.length-1,replaced:!0,scroll:null},!0);function i(l,c,u){const f=e.indexOf("#"),p=f>-1?(r.host&&document.querySelector("base")?e:e.slice(f))+l:z_()+e+l;try{t[u?"replaceState":"pushState"](c,"",p),s.value=c}catch(d){console.error(d),r[u?"replace":"assign"](p)}}function o(l,c){const u=de({},t.state,Nl(s.value.back,l,s.value.forward,!0),c,{position:s.value.position});i(l,u,!0),n.value=l}function a(l,c){const u=de({},s.value,t.state,{forward:l,scroll:ci()});i(u.current,u,!0);const f=de({},Nl(n.value,l,null),{position:u.position+1},c);i(l,f,!1),n.value=l}return{location:n,state:s,push:a,replace:o}}function Mf(e){e=H_(e);const t=q_(e),r=W_(e,t.state,t.location,t.replace);function n(i,o=!0){o||r.pauseListeners(),history.go(i)}const s=de({location:"",base:e,go:n,createHref:F_.bind(null,e)},t,r);return Object.defineProperty(s,"location",{enumerable:!0,get:()=>t.location.value}),Object.defineProperty(s,"state",{enumerable:!0,get:()=>t.state.value}),s}function G_(e){return e=location.host?e||location.pathname+location.search:"",e.includes("#")||(e+="#"),Mf(e)}function J_(e){return typeof e=="string"||e&&typeof e=="object"}function Df(e){return typeof e=="string"||typeof e=="symbol"}const lt={path:"/",name:void 0,params:{},query:{},hash:"",fullPath:"/",matched:[],meta:{},redirectedFrom:void 0},Nf=Symbol("");var Hl;(function(e){e[e.aborted=4]="aborted",e[e.cancelled=8]="cancelled",e[e.duplicated=16]="duplicated"})(Hl||(Hl={}));function tn(e,t){return de(new Error,{type:e,[Nf]:!0},t)}function Pt(e,t){return e instanceof Error&&Nf in e&&(t==null||!!(e.type&t))}const jl="[^/]+?",Q_={sensitive:!1,strict:!1,start:!0,end:!0},Y_=/[.+*?^${}()[\]/\\]/g;function X_(e,t){const r=de({},Q_,t),n=[];let s=r.start?"^":"";const i=[];for(const c of e){const u=c.length?[]:[90];r.strict&&!c.length&&(s+="/");for(let f=0;f<c.length;f++){const p=c[f];let d=40+(r.sensitive?.25:0);if(p.type===0)f||(s+="/"),s+=p.value.replace(Y_,"\\$&"),d+=40;else if(p.type===1){const{value:v,repeatable:_,optional:R,regexp:w}=p;i.push({name:v,repeatable:_,optional:R});const b=w||jl;if(b!==jl){d+=10;try{new RegExp(`(${b})`)}catch(g){throw new Error(`Invalid custom RegExp for param "${v}" (${b}): `+g.message)}}let h=_?`((?:${b})(?:/(?:${b}))*)`:`(${b})`;f||(h=R&&c.length<2?`(?:/${h})`:"/"+h),R&&(h+="?"),s+=h,d+=20,R&&(d+=-8),_&&(d+=-20),b===".*"&&(d+=-50)}u.push(d)}n.push(u)}if(r.strict&&r.end){const c=n.length-1;n[c][n[c].length-1]+=.7000000000000001}r.strict||(s+="/?"),r.end?s+="$":r.strict&&(s+="(?:/|$)");const o=new RegExp(s,r.sensitive?"":"i");function a(c){const u=c.match(o),f={};if(!u)return null;for(let p=1;p<u.length;p++){const d=u[p]||"",v=i[p-1];f[v.name]=d&&v.repeatable?d.split("/"):d}return f}function l(c){let u="",f=!1;for(const p of e){(!f||!u.endsWith("/"))&&(u+="/"),f=!1;for(const d of p)if(d.type===0)u+=d.value;else if(d.type===1){const{value:v,repeatable:_,optional:R}=d,w=v in c?c[v]:"";if(ht(w)&&!_)throw new Error(`Provided param "${v}" is an array but it is not repeatable (* or + modifiers)`);const b=ht(w)?w.join("/"):w;if(!b)if(R)p.length<2&&(u.endsWith("/")?u=u.slice(0,-1):f=!0);else throw new Error(`Missing required param "${v}"`);u+=b}}return u||"/"}return{re:o,score:n,keys:i,parse:a,stringify:l}}function Z_(e,t){let r=0;for(;r<e.length&&r<t.length;){const n=t[r]-e[r];if(n)return n;r++}return e.length<t.length?e.length===1&&e[0]===80?-1:1:e.length>t.length?t.length===1&&t[0]===80?1:-1:0}function ev(e,t){let r=0;const n=e.score,s=t.score;for(;r<n.length&&r<s.length;){const i=Z_(n[r],s[r]);if(i)return i;r++}if(Math.abs(s.length-n.length)===1){if(Fl(n))return 1;if(Fl(s))return-1}return s.length-n.length}function Fl(e){const t=e[e.length-1];return e.length>0&&t[t.length-1]<0}const tv={type:0,value:""},rv=/[a-zA-Z0-9_]/;function nv(e){if(!e)return[[]];if(e==="/")return[[tv]];if(!e.startsWith("/"))throw new Error(`Invalid path "${e}"`);function t(d){throw new Error(`ERR (${r})/"${c}": ${d}`)}let r=0,n=r;const s=[];let i;function o(){i&&s.push(i),i=[]}let a=0,l,c="",u="";function f(){c&&(r===0?i.push({type:0,value:c}):r===1||r===2||r===3?(i.length>1&&(l==="*"||l==="+")&&t(`A repeatable param (${c}) must be alone in its segment. eg: '/:ids+.`),i.push({type:1,value:c,regexp:u,repeatable:l==="*"||l==="+",optional:l==="*"||l==="?"})):t("Invalid state to consume buffer"),c="")}function p(){c+=l}for(;a<e.length;){if(l=e[a++],l==="\\"&&r!==2){n=r,r=4;continue}switch(r){case 0:l==="/"?(c&&f(),o()):l===":"?(f(),r=1):p();break;case 4:p(),r=n;break;case 1:l==="("?r=2:rv.test(l)?p():(f(),r=0,l!=="*"&&l!=="?"&&l!=="+"&&a--);break;case 2:l===")"?u[u.length-1]=="\\"?u=u.slice(0,-1)+l:r=3:u+=l;break;case 3:f(),r=0,l!=="*"&&l!=="?"&&l!=="+"&&a--,u="";break;default:t("Unknown state");break}}return r===2&&t(`Unfinished custom RegExp for param "${c}"`),f(),o(),s}function sv(e,t,r){const n=X_(nv(e.path),r),s=de(n,{record:e,parent:t,children:[],alias:[]});return t&&!s.record.aliasOf==!t.record.aliasOf&&t.children.push(s),s}function iv(e,t){const r=[],n=new Map;t=Ul({strict:!1,end:!0,sensitive:!1},t);function s(u){return n.get(u)}function i(u,f,p){const d=!p,v=ov(u);v.aliasOf=p&&p.record;const _=Ul(t,u),R=[v];if("alias"in u){const h=typeof u.alias=="string"?[u.alias]:u.alias;for(const g of h)R.push(de({},v,{components:p?p.record.components:v.components,path:g,aliasOf:p?p.record:v}))}let w,b;for(const h of R){const{path:g}=h;if(f&&g[0]!=="/"){const $=f.record.path,m=$[$.length-1]==="/"?"":"/";h.path=f.record.path+(g&&m+g)}if(w=sv(h,f,_),p?p.alias.push(w):(b=b||w,b!==w&&b.alias.push(w),d&&u.name&&!Bl(w)&&o(u.name)),v.children){const $=v.children;for(let m=0;m<$.length;m++)i($[m],w,p&&p.children[m])}p=p||w,(w.record.components&&Object.keys(w.record.components).length||w.record.name||w.record.redirect)&&l(w)}return b?()=>{o(b)}:Pn}function o(u){if(Df(u)){const f=n.get(u);f&&(n.delete(u),r.splice(r.indexOf(f),1),f.children.forEach(o),f.alias.forEach(o))}else{const f=r.indexOf(u);f>-1&&(r.splice(f,1),u.record.name&&n.delete(u.record.name),u.children.forEach(o),u.alias.forEach(o))}}function a(){return r}function l(u){let f=0;for(;f<r.length&&ev(u,r[f])>=0&&(u.record.path!==r[f].record.path||!Hf(u,r[f]));)f++;r.splice(f,0,u),u.record.name&&!Bl(u)&&n.set(u.record.name,u)}function c(u,f){let p,d={},v,_;if("name"in u&&u.name){if(p=n.get(u.name),!p)throw tn(1,{location:u});_=p.record.name,d=de(Vl(f.params,p.keys.filter(b=>!b.optional).map(b=>b.name)),u.params&&Vl(u.params,p.keys.map(b=>b.name))),v=p.stringify(d)}else if("path"in u)v=u.path,p=r.find(b=>b.re.test(v)),p&&(d=p.parse(v),_=p.record.name);else{if(p=f.name?n.get(f.name):r.find(b=>b.re.test(f.path)),!p)throw tn(1,{location:u,currentLocation:f});_=p.record.name,d=de({},f.params,u.params),v=p.stringify(d)}const R=[];let w=p;for(;w;)R.unshift(w.record),w=w.parent;return{name:_,path:v,params:d,matched:R,meta:lv(R)}}return e.forEach(u=>i(u)),{addRoute:i,resolve:c,removeRoute:o,getRoutes:a,getRecordMatcher:s}}function Vl(e,t){const r={};for(const n of t)n in e&&(r[n]=e[n]);return r}function ov(e){return{path:e.path,redirect:e.redirect,name:e.name,meta:e.meta||{},aliasOf:void 0,beforeEnter:e.beforeEnter,props:av(e),children:e.children||[],instances:{},leaveGuards:new Set,updateGuards:new Set,enterCallbacks:{},components:"components"in e?e.components||null:e.component&&{default:e.component}}}function av(e){const t={},r=e.props||!1;if("component"in e)t.default=r;else for(const n in e.components)t[n]=typeof r=="boolean"?r:r[n];return t}function Bl(e){for(;e;){if(e.record.aliasOf)return!0;e=e.parent}return!1}function lv(e){return e.reduce((t,r)=>de(t,r.meta),{})}function Ul(e,t){const r={};for(const n in e)r[n]=n in t?t[n]:e[n];return r}function Hf(e,t){return t.children.some(r=>r===e||Hf(e,r))}const jf=/#/g,cv=/&/g,uv=/\//g,fv=/=/g,pv=/\?/g,Ff=/\+/g,dv=/%5B/g,hv=/%5D/g,Vf=/%5E/g,mv=/%60/g,Bf=/%7B/g,gv=/%7C/g,Uf=/%7D/g,yv=/%20/g;function la(e){return encodeURI(""+e).replace(gv,"|").replace(dv,"[").replace(hv,"]")}function _v(e){return la(e).replace(Bf,"{").replace(Uf,"}").replace(Vf,"^")}function _o(e){return la(e).replace(Ff,"%2B").replace(yv,"+").replace(jf,"%23").replace(cv,"%26").replace(mv,"`").replace(Bf,"{").replace(Uf,"}").replace(Vf,"^")}function vv(e){return _o(e).replace(fv,"%3D")}function bv(e){return la(e).replace(jf,"%23").replace(pv,"%3F")}function wv(e){return e==null?"":bv(e).replace(uv,"%2F")}function Ds(e){try{return decodeURIComponent(""+e)}catch{}return""+e}function $v(e){const t={};if(e===""||e==="?")return t;const n=(e[0]==="?"?e.slice(1):e).split("&");for(let s=0;s<n.length;++s){const i=n[s].replace(Ff," "),o=i.indexOf("="),a=Ds(o<0?i:i.slice(0,o)),l=o<0?null:Ds(i.slice(o+1));if(a in t){let c=t[a];ht(c)||(c=t[a]=[c]),c.push(l)}else t[a]=l}return t}function Kl(e){let t="";for(let r in e){const n=e[r];if(r=vv(r),n==null){n!==void 0&&(t+=(t.length?"&":"")+r);continue}(ht(n)?n.map(i=>i&&_o(i)):[n&&_o(n)]).forEach(i=>{i!==void 0&&(t+=(t.length?"&":"")+r,i!=null&&(t+="="+i))})}return t}function Ev(e){const t={};for(const r in e){const n=e[r];n!==void 0&&(t[r]=ht(n)?n.map(s=>s==null?null:""+s):n==null?n:""+n)}return t}const Rv=Symbol(""),zl=Symbol(""),ca=Symbol(""),ua=Symbol(""),vo=Symbol("");function dn(){let e=[];function t(n){return e.push(n),()=>{const s=e.indexOf(n);s>-1&&e.splice(s,1)}}function r(){e=[]}return{add:t,list:()=>e,reset:r}}function Wt(e,t,r,n,s){const i=n&&(n.enterCallbacks[s]=n.enterCallbacks[s]||[]);return()=>new Promise((o,a)=>{const l=f=>{f===!1?a(tn(4,{from:r,to:t})):f instanceof Error?a(f):J_(f)?a(tn(2,{from:t,to:f})):(i&&n.enterCallbacks[s]===i&&typeof f=="function"&&i.push(f),o())},c=e.call(n&&n.instances[s],t,r,l);let u=Promise.resolve(c);e.length<3&&(u=u.then(l)),u.catch(f=>a(f))})}function Oi(e,t,r,n){const s=[];for(const i of e)for(const o in i.components){let a=i.components[o];if(!(t!=="beforeRouteEnter"&&!i.instances[o]))if(Pv(a)){const c=(a.__vccOpts||a)[t];c&&s.push(Wt(c,r,n,i,o))}else{let l=a();s.push(()=>l.then(c=>{if(!c)return Promise.reject(new Error(`Couldn't resolve component "${o}" at "${i.path}"`));const u=x_(c)?c.default:c;i.components[o]=u;const p=(u.__vccOpts||u)[t];return p&&Wt(p,r,n,i,o)()}))}}return s}function Pv(e){return typeof e=="object"||"displayName"in e||"props"in e||"__vccOpts"in e}function Wl(e){const t=Oe(ca),r=Oe(ua),n=ge(()=>t.resolve(Ee(e.to))),s=ge(()=>{const{matched:l}=n.value,{length:c}=l,u=l[c-1],f=r.matched;if(!u||!f.length)return-1;const p=f.findIndex(en.bind(null,u));if(p>-1)return p;const d=ql(l[c-2]);return c>1&&ql(u)===d&&f[f.length-1].path!==d?f.findIndex(en.bind(null,l[c-2])):p}),i=ge(()=>s.value>-1&&Av(r.params,n.value.params)),o=ge(()=>s.value>-1&&s.value===r.matched.length-1&&Lf(r.params,n.value.params));function a(l={}){return kv(l)?t[Ee(e.replace)?"replace":"push"](Ee(e.to)).catch(Pn):Promise.resolve()}return{route:n,href:ge(()=>n.value.href),isActive:i,isExactActive:o,navigate:a}}const Cv=nr({name:"RouterLink",compatConfig:{MODE:3},props:{to:{type:[String,Object],required:!0},replace:Boolean,activeClass:String,exactActiveClass:String,custom:Boolean,ariaCurrentValue:{type:String,default:"page"}},useLink:Wl,setup(e,{slots:t}){const r=He(Wl(e)),{options:n}=Oe(ca),s=ge(()=>({[Gl(e.activeClass,n.linkActiveClass,"router-link-active")]:r.isActive,[Gl(e.exactActiveClass,n.linkExactActiveClass,"router-link-exact-active")]:r.isExactActive}));return()=>{const i=t.default&&t.default(r);return e.custom?i:nt("a",{"aria-current":r.isExactActive?e.ariaCurrentValue:null,href:r.href,onClick:r.navigate,class:s.value},i)}}}),Sv=Cv;function kv(e){if(!(e.metaKey||e.altKey||e.ctrlKey||e.shiftKey)&&!e.defaultPrevented&&!(e.button!==void 0&&e.button!==0)){if(e.currentTarget&&e.currentTarget.getAttribute){const t=e.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(t))return}return e.preventDefault&&e.preventDefault(),!0}}function Av(e,t){for(const r in t){const n=t[r],s=e[r];if(typeof n=="string"){if(n!==s)return!1}else if(!ht(s)||s.length!==n.length||n.some((i,o)=>i!==s[o]))return!1}return!0}function ql(e){return e?e.aliasOf?e.aliasOf.path:e.path:""}const Gl=(e,t,r)=>e??t??r,Tv=nr({name:"RouterView",inheritAttrs:!1,props:{name:{type:String,default:"default"},route:Object},compatConfig:{MODE:3},setup(e,{attrs:t,slots:r}){const n=Oe(vo),s=ge(()=>e.route||n.value),i=Oe(zl,0),o=ge(()=>{let c=Ee(i);const{matched:u}=s.value;let f;for(;(f=u[c])&&!f.components;)c++;return c}),a=ge(()=>s.value.matched[o.value]);_r(zl,ge(()=>o.value+1)),_r(Rv,a),_r(vo,s);const l=_e();return Je(()=>[l.value,a.value,e.name],([c,u,f],[p,d,v])=>{u&&(u.instances[f]=c,d&&d!==u&&c&&c===p&&(u.leaveGuards.size||(u.leaveGuards=d.leaveGuards),u.updateGuards.size||(u.updateGuards=d.updateGuards))),c&&u&&(!d||!en(u,d)||!p)&&(u.enterCallbacks[f]||[]).forEach(_=>_(c))},{flush:"post"}),()=>{const c=s.value,u=e.name,f=a.value,p=f&&f.components[u];if(!p)return Jl(r.default,{Component:p,route:c});const d=f.props[u],v=d?d===!0?c.params:typeof d=="function"?d(c):d:null,R=nt(p,de({},v,t,{onVnodeUnmounted:w=>{w.component.isUnmounted&&(f.instances[u]=null)},ref:l}));return Jl(r.default,{Component:R,route:c})||R}}});function Jl(e,t){if(!e)return null;const r=e(t);return r.length===1?r[0]:r}const Kf=Tv;function xv(e){const t=iv(e.routes,e),r=e.parseQuery||$v,n=e.stringifyQuery||Kl,s=e.history,i=dn(),o=dn(),a=dn(),l=Jt(lt);let c=lt;Lr&&e.scrollBehavior&&"scrollRestoration"in history&&(history.scrollRestoration="manual");const u=Ti.bind(null,O=>""+O),f=Ti.bind(null,wv),p=Ti.bind(null,Ds);function d(O,K){let V,J;return Df(O)?(V=t.getRecordMatcher(O),J=K):J=O,t.addRoute(J,V)}function v(O){const K=t.getRecordMatcher(O);K&&t.removeRoute(K)}function _(){return t.getRoutes().map(O=>O.record)}function R(O){return!!t.getRecordMatcher(O)}function w(O,K){if(K=de({},K||l.value),typeof O=="string"){const se=xi(r,O,K.path),y=t.resolve({path:se.path},K),P=s.createHref(se.fullPath);return de(se,y,{params:p(y.params),hash:Ds(se.hash),redirectedFrom:void 0,href:P})}let V;if("path"in O)V=de({},O,{path:xi(r,O.path,K.path).path});else{const se=de({},O.params);for(const y in se)se[y]==null&&delete se[y];V=de({},O,{params:f(O.params)}),K.params=f(K.params)}const J=t.resolve(V,K),pe=O.hash||"";J.params=u(p(J.params));const me=I_(n,de({},O,{hash:_v(pe),path:J.path})),oe=s.createHref(me);return de({fullPath:me,hash:pe,query:n===Kl?Ev(O.query):O.query||{}},J,{redirectedFrom:void 0,href:oe})}function b(O){return typeof O=="string"?xi(r,O,l.value.path):de({},O)}function h(O,K){if(c!==O)return tn(8,{from:K,to:O})}function g(O){return C(O)}function $(O){return g(de(b(O),{replace:!0}))}function m(O){const K=O.matched[O.matched.length-1];if(K&&K.redirect){const{redirect:V}=K;let J=typeof V=="function"?V(O):V;return typeof J=="string"&&(J=J.includes("?")||J.includes("#")?J=b(J):{path:J},J.params={}),de({query:O.query,hash:O.hash,params:"path"in J?{}:O.params},J)}}function C(O,K){const V=c=w(O),J=l.value,pe=O.state,me=O.force,oe=O.replace===!0,se=m(V);if(se)return C(de(b(se),{state:typeof se=="object"?de({},pe,se.state):pe,force:me,replace:oe}),K||V);const y=V;y.redirectedFrom=K;let P;return!me&&M_(n,J,V)&&(P=tn(16,{to:y,from:J}),Ye(J,J,!0,!1)),(P?Promise.resolve(P):x(y,J)).catch(k=>Pt(k)?Pt(k,2)?k:be(k):G(k,y,J)).then(k=>{if(k){if(Pt(k,2))return C(de({replace:oe},b(k.to),{state:typeof k.to=="object"?de({},pe,k.to.state):pe,force:me}),K||y)}else k=T(y,J,!0,oe,pe);return E(y,J,k),k})}function A(O,K){const V=h(O,K);return V?Promise.reject(V):Promise.resolve()}function x(O,K){let V;const[J,pe,me]=Ov(O,K);V=Oi(J.reverse(),"beforeRouteLeave",O,K);for(const se of J)se.leaveGuards.forEach(y=>{V.push(Wt(y,O,K))});const oe=A.bind(null,O,K);return V.push(oe),Tr(V).then(()=>{V=[];for(const se of i.list())V.push(Wt(se,O,K));return V.push(oe),Tr(V)}).then(()=>{V=Oi(pe,"beforeRouteUpdate",O,K);for(const se of pe)se.updateGuards.forEach(y=>{V.push(Wt(y,O,K))});return V.push(oe),Tr(V)}).then(()=>{V=[];for(const se of O.matched)if(se.beforeEnter&&!K.matched.includes(se))if(ht(se.beforeEnter))for(const y of se.beforeEnter)V.push(Wt(y,O,K));else V.push(Wt(se.beforeEnter,O,K));return V.push(oe),Tr(V)}).then(()=>(O.matched.forEach(se=>se.enterCallbacks={}),V=Oi(me,"beforeRouteEnter",O,K),V.push(oe),Tr(V))).then(()=>{V=[];for(const se of o.list())V.push(Wt(se,O,K));return V.push(oe),Tr(V)}).catch(se=>Pt(se,8)?se:Promise.reject(se))}function E(O,K,V){for(const J of a.list())J(O,K,V)}function T(O,K,V,J,pe){const me=h(O,K);if(me)return me;const oe=K===lt,se=Lr?history.state:{};V&&(J||oe?s.replace(O.fullPath,de({scroll:oe&&se&&se.scroll},pe)):s.push(O.fullPath,pe)),l.value=O,Ye(O,K,V,oe),be()}let S;function j(){S||(S=s.listen((O,K,V)=>{if(!Gn.listening)return;const J=w(O),pe=m(J);if(pe){C(de(pe,{replace:!0}),J).catch(Pn);return}c=J;const me=l.value;Lr&&U_(Dl(me.fullPath,V.delta),ci()),x(J,me).catch(oe=>Pt(oe,12)?oe:Pt(oe,2)?(C(oe.to,J).then(se=>{Pt(se,20)&&!V.delta&&V.type===Nn.pop&&s.go(-1,!1)}).catch(Pn),Promise.reject()):(V.delta&&s.go(-V.delta,!1),G(oe,J,me))).then(oe=>{oe=oe||T(J,me,!1),oe&&(V.delta&&!Pt(oe,8)?s.go(-V.delta,!1):V.type===Nn.pop&&Pt(oe,20)&&s.go(-1,!1)),E(J,me,oe)}).catch(Pn)}))}let ie=dn(),X=dn(),D;function G(O,K,V){be(O);const J=X.list();return J.length?J.forEach(pe=>pe(O,K,V)):console.error(O),Promise.reject(O)}function q(){return D&&l.value!==lt?Promise.resolve():new Promise((O,K)=>{ie.add([O,K])})}function be(O){return D||(D=!O,j(),ie.list().forEach(([K,V])=>O?V(O):K()),ie.reset()),O}function Ye(O,K,V,J){const{scrollBehavior:pe}=e;if(!Lr||!pe)return Promise.resolve();const me=!V&&K_(Dl(O.fullPath,0))||(J||!V)&&history.state&&history.state.scroll||null;return rr().then(()=>pe(O,K,me)).then(oe=>oe&&B_(oe)).catch(oe=>G(oe,O,K))}const Le=O=>s.go(O);let Ve;const kr=new Set,Gn={currentRoute:l,listening:!0,addRoute:d,removeRoute:v,hasRoute:R,getRoutes:_,resolve:w,options:e,push:g,replace:$,go:Le,back:()=>Le(-1),forward:()=>Le(1),beforeEach:i.add,beforeResolve:o.add,afterEach:a.add,onError:X.add,isReady:q,install(O){const K=this;O.component("RouterLink",Sv),O.component("RouterView",Kf),O.config.globalProperties.$router=K,Object.defineProperty(O.config.globalProperties,"$route",{enumerable:!0,get:()=>Ee(l)}),Lr&&!Ve&&l.value===lt&&(Ve=!0,g(s.location).catch(pe=>{}));const V={};for(const pe in lt)V[pe]=ge(()=>l.value[pe]);O.provide(ca,K),O.provide(ua,He(V)),O.provide(vo,l);const J=O.unmount;kr.add(O),O.unmount=function(){kr.delete(O),kr.size<1&&(c=lt,S&&S(),S=null,l.value=lt,Ve=!1,D=!1),J()}}};return Gn}function Tr(e){return e.reduce((t,r)=>t.then(()=>r()),Promise.resolve())}function Ov(e,t){const r=[],n=[],s=[],i=Math.max(t.matched.length,e.matched.length);for(let o=0;o<i;o++){const a=t.matched[o];a&&(e.matched.find(c=>en(c,a))?n.push(a):r.push(a));const l=e.matched[o];l&&(t.matched.find(c=>en(c,l))||s.push(l))}return[r,n,s]}function WP(){return Oe(ua)}const Lv=(e,t)=>t.path.replace(/(:\w+)\([^)]+\)/g,"$1").replace(/(:\w+)[?+*]/g,"$1").replace(/:\w+/g,r=>{var n;return((n=e.params[r.slice(1)])==null?void 0:n.toString())||""}),bo=(e,t)=>{const r=e.route.matched.find(s=>{var i;return((i=s.components)==null?void 0:i.default)===e.Component.type}),n=t??(r==null?void 0:r.meta.key)??(r&&Lv(e.route,r));return typeof n=="function"?n(e.route):n},Iv=(e,t)=>({default:()=>e?nt(ph,e===!0?{}:e,t):t});function fa(e){return Array.isArray(e)?e:[e]}const Li=null,Ql=[{name:"slug",path:"/:slug(.*)*",meta:{},alias:[],redirect:Li==null?void 0:Li.redirect,component:()=>U(()=>import("./document-driven.R0qWc0WJ.js"),__vite__mapDeps([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]),import.meta.url).then(e=>e.default||e)}],Mv=(e,t,r)=>(t=t===!0?{}:t,{default:()=>{var n;return t?nt(e,t,r):(n=r.default)==null?void 0:n.call(r)}});function Yl(e){const t=(e==null?void 0:e.meta.key)??e.path.replace(/(:\w+)\([^)]+\)/g,"$1").replace(/(:\w+)[?+*]/g,"$1").replace(/:\w+/g,r=>{var n;return((n=e.params[r.slice(1)])==null?void 0:n.toString())||""});return typeof t=="function"?t(e):t}function Dv(e,t){return e===t||t===lt?!1:Yl(e)!==Yl(t)?!0:!e.matched.every((n,s)=>{var i,o;return n.components&&n.components.default===((o=(i=t.matched[s])==null?void 0:i.components)==null?void 0:o.default)})}const Nv={scrollBehavior(e,t,r){var c;const n=$e(),s=((c=gt().options)==null?void 0:c.scrollBehaviorType)??"auto";let i=r||void 0;const o=typeof e.meta.scrollToTop=="function"?e.meta.scrollToTop(e,t):e.meta.scrollToTop;if(!i&&t&&e&&o!==!1&&Dv(e,t)&&(i={left:0,top:0}),e.path===t.path){if(t.hash&&!e.hash)return{left:0,top:0};if(e.hash)return{el:e.hash,top:Xl(e.hash),behavior:s}}const a=u=>!!(u.meta.pageTransition??go),l=a(t)&&a(e)?"page:transition:finish":"page:finish";return new Promise(u=>{n.hooks.hookOnce(l,async()=>{await rr(),e.hash&&(i={el:e.hash,top:Xl(e.hash),behavior:s}),u(i)})})}};function Xl(e){try{const t=document.querySelector(e);if(t)return parseFloat(getComputedStyle(t).scrollMarginTop)}catch{}return 0}const Hv={hashMode:!1,scrollBehaviorType:"auto"},qe={...Hv,...Nv},jv=async e=>{var l;let t,r;if(!((l=e.meta)!=null&&l.validate))return;const n=$e(),s=gt();if(([t,r]=Dn(()=>Promise.resolve(e.meta.validate(e))),t=await t,r(),t)===!0)return;const o=ai({statusCode:404,statusMessage:`Page Not Found: ${e.fullPath}`,data:{path:e.fullPath}}),a=s.beforeResolve(c=>{if(a(),c===e){const u=s.afterEach(async()=>{u(),await n.runWithContext(()=>Dr(o)),window.history.pushState({},"",e.fullPath)});return!1}})},Fv=async e=>{let t,r;const n=([t,r]=Dn(()=>Tf(e.path)),t=await t,r(),t);if(n.redirect)return n.redirect},Vv=[jv,Fv],Sn={};function Bv(e,t,r){const{pathname:n,search:s,hash:i}=t,o=e.indexOf("#");if(o>-1){const c=i.includes(e.slice(o))?e.slice(o).length:1;let u=i.slice(c);return u[0]!=="/"&&(u="/"+u),ml(u,"")}const a=ml(n,e),l=!r||Qm(a,r,{trailingSlash:!0})?a:r;return l+(l.includes("?")?"":s)+i}const Uv=it({name:"nuxt:router",enforce:"pre",async setup(e){var _,R;let t,r,n=dt().app.baseURL;qe.hashMode&&!n.includes("#")&&(n+="#");const s=((_=qe.history)==null?void 0:_.call(qe,n))??(qe.hashMode?G_(n):Mf(n)),i=((R=qe.routes)==null?void 0:R.call(qe,Ql))??Ql;let o;const a=Bv(n,window.location,e.payload.path),l=xv({...qe,scrollBehavior:(w,b,h)=>{if(b===lt){o=h;return}if(qe.scrollBehavior){if(l.options.scrollBehavior=qe.scrollBehavior,"scrollRestoration"in window.history){const g=l.beforeEach(()=>{g(),window.history.scrollRestoration="manual"})}return qe.scrollBehavior(w,lt,o||h)}},history:s,routes:i});"scrollRestoration"in window.history&&(window.history.scrollRestoration="auto"),e.vueApp.use(l);const c=Jt(l.currentRoute.value);l.afterEach((w,b)=>{c.value=b}),Object.defineProperty(e.vueApp.config.globalProperties,"previousRoute",{get:()=>c.value});const u=Jt(l.resolve(a)),f=()=>{u.value=l.currentRoute.value};e.hook("page:finish",f),l.afterEach((w,b)=>{var h,g,$,m;((g=(h=w.matched[0])==null?void 0:h.components)==null?void 0:g.default)===((m=($=b.matched[0])==null?void 0:$.components)==null?void 0:m.default)&&f()});const p={};for(const w in u.value)Object.defineProperty(p,w,{get:()=>u.value[w]});e._route=mr(p),e._middleware=e._middleware||{global:[],named:{}};const d=oi();try{[t,r]=Dn(()=>l.isReady()),await t,r()}catch(w){[t,r]=Dn(()=>e.runWithContext(()=>Dr(w))),await t,r()}const v=e.payload.state._layout;return l.beforeEach(async(w,b)=>{var h;await e.callHook("page:loading:start"),w.meta=He(w.meta),e.isHydrating&&v&&!Qr(w.meta.layout)&&(w.meta.layout=v),e._processingMiddleware=!0;{const g=new Set([...Vv,...e._middleware.global]);for(const $ of w.matched){const m=$.meta.middleware;if(m)for(const C of fa(m))g.add(C)}for(const $ of g){const m=typeof $=="string"?e._middleware.named[$]||await((h=Sn[$])==null?void 0:h.call(Sn).then(A=>A.default||A)):$;if(!m)throw new Error(`Unknown route middleware: '${$}'.`);const C=await e.runWithContext(()=>m(w,b));if(!e.payload.serverRendered&&e.isHydrating&&(C===!1||C instanceof Error)){const A=C||uo({statusCode:404,statusMessage:`Page Not Found: ${a}`});return await e.runWithContext(()=>Dr(A)),!1}if(C!==!0&&(C||C===!1))return C}}}),l.onError(async()=>{delete e._processingMiddleware,await e.callHook("page:loading:end")}),l.afterEach(async(w,b,h)=>{delete e._processingMiddleware,!e.isHydrating&&d.value&&await e.runWithContext(py),h&&await e.callHook("page:loading:end"),w.matched.length===0&&await e.runWithContext(()=>Dr(uo({statusCode:404,fatal:!1,statusMessage:`Page not found: ${w.fullPath}`,data:{path:w.fullPath}})))}),e.hooks.hookOnce("app:created",async()=>{try{await l.replace({...l.resolve(a),name:void 0,force:!0}),l.options.scrollBehavior=qe.scrollBehavior}catch(w){await e.runWithContext(()=>Dr(w))}}),{provide:{router:l}}}}),Zl=globalThis.requestIdleCallback||(e=>{const t=Date.now(),r={didTimeout:!1,timeRemaining:()=>Math.max(0,50-(Date.now()-t))};return setTimeout(()=>{e(r)},1)}),qP=globalThis.cancelIdleCallback||(e=>{clearTimeout(e)}),zf=e=>{const t=$e();t.isHydrating?t.hooks.hookOnce("app:suspense:resolve",()=>{Zl(e)}):Zl(e)},Kv=it({name:"nuxt:payload",setup(e){gt().beforeResolve(async(t,r)=>{if(t.path===r.path)return;const n=await xl(t.path);n&&Object.assign(e.static.data,n.data)}),zf(()=>{var t;e.hooks.hook("link:prefetch",async r=>{si(r).protocol||await xl(r)}),((t=navigator.connection)==null?void 0:t.effectiveType)!=="slow-2g"&&setTimeout(li,1e3)})}}),zv=it(e=>{let t;async function r(){const n=await li();t&&clearTimeout(t),t=setTimeout(r,1e3*60*60);const s=await $fetch(oa("builds/latest.json"));s.id!==n.id&&e.hooks.callHook("app:manifest:update",s)}zf(()=>{t=setTimeout(r,1e3*60*60)})}),Wv=W(()=>U(()=>import("./DocsAlert.NYyBoUgq.js"),__vite__mapDeps([25,14]),import.meta.url).then(e=>e.default)),qv=W(()=>U(()=>import("./DocsCard.BHyI6viP.js"),__vite__mapDeps([26,27,12,13,15,16,17,19,28,14]),import.meta.url).then(e=>e.default)),Gv=W(()=>U(()=>import("./DocsCardGrid.PUHkyZXK.js"),__vite__mapDeps([29,14,30]),import.meta.url).then(e=>e.default)),Jv=W(()=>U(()=>import("./DocsColourTable.LKiaprrs.js"),__vite__mapDeps([31,32,14,33,34,35]),import.meta.url).then(e=>e.default)),Qv=W(()=>U(()=>import("./DocsContent.SQZjpxgh.js"),__vite__mapDeps([36,4,5,14]),import.meta.url).then(e=>e.default)),Yv=W(()=>U(()=>import("./DocsContentNavigation.sYXaW9Re.js"),__vite__mapDeps([37,38,16,19,39,7,8,20,21,40,11,14,41,42]),import.meta.url).then(e=>e.default)),Xv=W(()=>U(()=>import("./DocsExample.TYtIaycF.js"),__vite__mapDeps([43,44,7,8,15,16,17,14,45,46,47]),import.meta.url).then(e=>e.default)),Zv=W(()=>U(()=>import("./DocsGradientTable.eMExAp1K.js"),__vite__mapDeps([48,32,14,33,34,49]),import.meta.url).then(e=>e.default)),eb=W(()=>U(()=>import("./DocsGrid.CLT9yKLT.js"),__vite__mapDeps([50,14]),import.meta.url).then(e=>e.default)),tb=W(()=>U(()=>import("./DocsHeroHeader.VJrQvyc0.js"),__vite__mapDeps([51,14,52]),import.meta.url).then(e=>e.default)),rb=W(()=>U(()=>import("./DocsHomeSection.-8CtU5yK.js"),__vite__mapDeps([53,14,54]),import.meta.url).then(e=>e.default)),nb=W(()=>U(()=>import("./DocsIcon.T-QbG3WZ.js"),__vite__mapDeps([55,7,8]),import.meta.url).then(e=>e.default)),sb=W(()=>U(()=>import("./DocsIconSizingTable.5KObi_vr.js"),__vite__mapDeps([56,7,8]),import.meta.url).then(e=>e.default)),ib=W(()=>U(()=>import("./DocsIconTable.SNmL3ofA.js"),__vite__mapDeps([57,7,8,58,14,59]),import.meta.url).then(e=>e.default)),ob=W(()=>U(()=>import("./DocsImageExample.8UN1-6g4.js"),__vite__mapDeps([60,61,14,62]),import.meta.url).then(e=>e.default)),ab=W(()=>U(()=>import("./DocsLayerStyleTable.eVkhneyr.js"),__vite__mapDeps([63,14,64]),import.meta.url).then(e=>e.default)),lb=W(()=>U(()=>import("./DocsLink._8mcEyeM.js"),__vite__mapDeps([44,7,8,15,16,17,14,45]),import.meta.url).then(e=>e.default)),cb=W(()=>U(()=>import("./DocsModuleCard.2ZwiOzRg.js"),__vite__mapDeps([65,27,12,13,15,16,17,19,28,39]),import.meta.url).then(e=>e.default)),ub=W(()=>U(()=>import("./DocsModuleInfo.dxnzvO_K.js"),__vite__mapDeps([66,44,7,8,15,16,17,14,45,67]),import.meta.url).then(e=>e.default)),fb=W(()=>U(()=>import("./DocsModuleNavigation.N74iA2Tc.js"),__vite__mapDeps([68,40,7,8,11,14,41,38,16,19,39,69]),import.meta.url).then(e=>e.default)),pb=W(()=>U(()=>import("./DocsNavLink.k4ZwJ1d1.js"),__vite__mapDeps([40,7,8,11,14,41]),import.meta.url).then(e=>e.default)),db=W(()=>U(()=>import("./DocsPageHeader.J1YDFRG1.js"),__vite__mapDeps([70,44,7,8,15,16,17,14,45,71]),import.meta.url).then(e=>e.default)),hb=W(()=>U(()=>import("./DocsThemeChooser.xp0uGfRQ.js"),__vite__mapDeps([72,58,14,73]),import.meta.url).then(e=>e.default)),mb=W(()=>U(()=>import("./DocsTypeClassTable.c5edmzGt.js"),__vite__mapDeps([74,14,75]),import.meta.url).then(e=>e.default)),gb=W(()=>U(()=>import("./DocsTypeTable.S30MUh9q.js"),__vite__mapDeps([76,14,77]),import.meta.url).then(e=>e.default)),yb=W(()=>U(()=>import("./DocsWhatsNew.iLgRC7ZK.js"),__vite__mapDeps([78,7,8,18,15,16,17,19,6,9,14,79]),import.meta.url).then(e=>e.default)),_b=W(()=>U(()=>import("./ProseA.2rbo7RTC.js"),__vite__mapDeps([80,15,16,17]),import.meta.url).then(e=>e.default)),vb=W(()=>U(()=>import("./ProseBlockquote.Czpq-HHw.js"),__vite__mapDeps([81,14]),import.meta.url).then(e=>e.default)),bb=W(()=>U(()=>import("./ProseCode.Xz7xMLuq.js"),__vite__mapDeps([82,14,83]),import.meta.url).then(e=>e.default)),wb=W(()=>U(()=>import("./ProseCodeInline.iJ9KJvnk.js"),__vite__mapDeps([84,14,85]),import.meta.url).then(e=>e.default)),$b=W(()=>U(()=>import("./ProseH2.G8mCS4ry.js"),__vite__mapDeps([86,14,87]),import.meta.url).then(e=>e.default)),Eb=W(()=>U(()=>import("./ProseH3.WHOIDSwD.js"),__vite__mapDeps([88,14,89]),import.meta.url).then(e=>e.default)),Rb=W(()=>U(()=>import("./ProseH4.gK7ORMEc.js"),__vite__mapDeps([]),import.meta.url).then(e=>e.default)),Pb=W(()=>U(()=>import("./ProseHr.uASz6lXf.js"),__vite__mapDeps([90,14,91]),import.meta.url).then(e=>e.default)),Cb=W(()=>U(()=>import("./ProseTable.d8cdIzif.js"),__vite__mapDeps([92,14,93]),import.meta.url).then(e=>e.default)),Sb=W(()=>U(()=>import("./Swatch.FPuuW78y.js"),__vite__mapDeps([32,14,33]),import.meta.url).then(e=>e.default)),kb=W(()=>U(()=>import("./ContentDoc.zyRxlzIB.js"),__vite__mapDeps([94,23,2,3,95,39]),import.meta.url).then(e=>e.default)),Ab=W(()=>U(()=>import("./ContentList.ux5QQJBH.js"),__vite__mapDeps([96,95,39]),import.meta.url).then(e=>e.default)),Tb=W(()=>U(()=>import("./ContentNavigation.CfUahY4n.js"),__vite__mapDeps([97,39,11]),import.meta.url).then(e=>e.default)),xb=W(()=>U(()=>import("./ContentQuery.OgHSivmp.js"),__vite__mapDeps([95,39]),import.meta.url).then(e=>e.default)),Ob=W(()=>U(()=>import("./ContentRenderer.CHEOl3j3.js"),__vite__mapDeps([2,3]),import.meta.url).then(e=>e.default)),Lb=W(()=>U(()=>import("./ContentRendererMarkdown.zskQ2UNQ.js"),__vite__mapDeps([98,3]),import.meta.url).then(e=>e.default)),Ib=W(()=>U(()=>import("./ContentSlot.uUI9CND_.js"),__vite__mapDeps([99,61]),import.meta.url).then(e=>e.default)),Mb=W(()=>U(()=>import("./DocumentDrivenEmpty.-Bd5tvR3.js"),__vite__mapDeps([]),import.meta.url).then(e=>e.default)),Db=W(()=>U(()=>import("./Markdown.vjX68Z-B.js"),__vite__mapDeps([100,99,61]),import.meta.url).then(e=>e.default)),Nb=W(()=>U(()=>import("./ProsePre.928ctTB_.js"),__vite__mapDeps([101,82,14,83,102]),import.meta.url).then(e=>e.default)),Hb=W(()=>U(()=>import("./ProseEm.jWeQl8xp.js"),__vite__mapDeps([103,14]),import.meta.url).then(e=>e.default)),jb=W(()=>U(()=>import("./ProseH1.50NQSnzl.js"),__vite__mapDeps([]),import.meta.url).then(e=>e.default)),Fb=W(()=>U(()=>import("./ProseH5.ViebVa2Y.js"),__vite__mapDeps([]),import.meta.url).then(e=>e.default)),Vb=W(()=>U(()=>import("./ProseH6.lit-WfaG.js"),__vite__mapDeps([]),import.meta.url).then(e=>e.default)),Bb=W(()=>U(()=>import("./ProseImg.Wu9xgcX7.js"),__vite__mapDeps([]),import.meta.url).then(e=>e.default)),Ub=W(()=>U(()=>import("./ProseLi.kWofYoPt.js"),__vite__mapDeps([104,14]),import.meta.url).then(e=>e.default)),Kb=W(()=>U(()=>import("./ProseOl.f55gcGCc.js"),__vite__mapDeps([105,14]),import.meta.url).then(e=>e.default)),zb=W(()=>U(()=>import("./ProseP.xOmAEUok.js"),__vite__mapDeps([106,14]),import.meta.url).then(e=>e.default)),Wb=W(()=>U(()=>import("./ProseScript.YD2iA94j.js"),__vite__mapDeps([]),import.meta.url).then(e=>e.default)),qb=W(()=>U(()=>import("./ProseStrong.GmB4B_NE.js"),__vite__mapDeps([107,14]),import.meta.url).then(e=>e.default)),Gb=W(()=>U(()=>import("./ProseTbody.FPzd5AuU.js"),__vite__mapDeps([108,14]),import.meta.url).then(e=>e.default)),Jb=W(()=>U(()=>import("./ProseTd.ydAecYY-.js"),__vite__mapDeps([109,14]),import.meta.url).then(e=>e.default)),Qb=W(()=>U(()=>import("./ProseTh.GnFrmIgb.js"),__vite__mapDeps([110,14]),import.meta.url).then(e=>e.default)),Yb=W(()=>U(()=>import("./ProseThead.alimbSyj.js"),__vite__mapDeps([111,14]),import.meta.url).then(e=>e.default)),Xb=W(()=>U(()=>import("./ProseTr.rCUlpnCA.js"),__vite__mapDeps([112,14]),import.meta.url).then(e=>e.default)),Zb=W(()=>U(()=>import("./ProseUl.ajqmVD2y.js"),__vite__mapDeps([113,14]),import.meta.url).then(e=>e.default)),e0=[["DocsAlert",Wv],["DocsCard",qv],["DocsCardGrid",Gv],["DocsColourTable",Jv],["DocsContent",Qv],["DocsContentNavigation",Yv],["DocsExample",Xv],["DocsGradientTable",Zv],["DocsGrid",eb],["DocsHeroHeader",tb],["DocsHomeSection",rb],["DocsIcon",nb],["DocsIconSizingTable",sb],["DocsIconTable",ib],["DocsImageExample",ob],["DocsLayerStyleTable",ab],["DocsLink",lb],["DocsModuleCard",cb],["DocsModuleInfo",ub],["DocsModuleNavigation",fb],["DocsNavLink",pb],["DocsPageHeader",db],["DocsThemeChooser",hb],["DocsTypeClassTable",mb],["DocsTypeTable",gb],["DocsWhatsNew",yb],["ProseA",_b],["ProseBlockquote",vb],["ProseCode",bb],["ProseCodeInline",wb],["ProseH2",$b],["ProseH3",Eb],["ProseH4",Rb],["ProseHr",Pb],["ProseTable",Cb],["Swatch",Sb],["ContentDoc",kb],["ContentList",Ab],["ContentNavigation",Tb],["ContentQuery",xb],["ContentRenderer",Ob],["ContentRendererMarkdown",Lb],["MDCSlot",Ib],["DocumentDrivenEmpty",Mb],["Markdown",Db],["ProsePre",Nb],["ProseEm",Hb],["ProseH1",jb],["ProseH5",Fb],["ProseH6",Vb],["ProseImg",Bb],["ProseLi",Ub],["ProseOl",Kb],["ProseP",zb],["ProseScript",Wb],["ProseStrong",qb],["ProseTbody",Gb],["ProseTd",Jb],["ProseTh",Qb],["ProseThead",Yb],["ProseTr",Xb],["ProseUl",Zb]],t0=it({name:"nuxt:global-components",setup(e){for(const[t,r]of e0)e.vueApp.component(t,r),e.vueApp.component("Lazy"+t,r)}}),gn={home:()=>U(()=>import("./home.f8bXHl7K.js"),__vite__mapDeps([114,7,8,15,16,17,19,14,51,52,27,12,13,28,53,54,2,3,4,5,78,18,6,9,79,10,11,20,21,22,23,115]),import.meta.url).then(e=>e.default||e),"module-listing":()=>U(()=>import("./module-listing.zWMX5a25.js"),__vite__mapDeps([116,37,38,16,19,39,7,8,20,21,40,11,14,41,42,70,44,15,17,45,71,12,13,27,28,29,30,117,118,10,18,22,23,119]),import.meta.url).then(e=>e.default||e),module:()=>U(()=>import("./module.ZEpf0cR7.js"),__vite__mapDeps([120,68,40,7,8,11,14,41,38,16,19,39,69,66,44,15,17,45,67,70,71,2,3,117,118,10,12,13,18,20,21,22,23,121]),import.meta.url).then(e=>e.default||e),page:()=>U(()=>import("./page.dJj1_Sl3.js"),__vite__mapDeps([122,37,38,16,19,39,7,8,20,21,40,11,14,41,42,70,44,15,17,45,71,2,3,117,118,10,12,13,18,22,23]),import.meta.url).then(e=>e.default||e)},r0=it({name:"nuxt:prefetch",setup(e){const t=gt();e.hooks.hook("app:mounted",()=>{t.beforeEach(async r=>{var s;const n=(s=r==null?void 0:r.meta)==null?void 0:s.layout;n&&typeof gn[n]=="function"&&await gn[n]()})}),e.hooks.hook("link:prefetch",r=>{if(br(r))return;const n=t.resolve(r);if(!n)return;const s=n.meta.layout;let i=fa(n.meta.middleware);i=i.filter(o=>typeof o=="string");for(const o of i)typeof Sn[o]=="function"&&Sn[o]();s&&typeof gn[s]=="function"&&gn[s]()})}});function n0(e){return Array.isArray(e)?e:[e]}const s0={path:"/",watch:!0,decode:e=>Ls(decodeURIComponent(e)),encode:e=>encodeURIComponent(typeof e=="string"?e:JSON.stringify(e))};function hs(e,t){var l;const r={...s0,...t},n=ec(r)||{};let s;r.maxAge!==void 0?s=r.maxAge*1e3:r.expires&&(s=r.expires.getTime()-Date.now());const i=s!==void 0&&s<=0,o=vt(i?void 0:n[e]??((l=r.default)==null?void 0:l.call(r))),a=s&&!i?a0(o,s):_e(o);{const c=typeof BroadcastChannel>"u"?null:new BroadcastChannel(`nuxt:cookies:${e}`),u=()=>{r.readonly||Gg(a.value,n[e])||(o0(e,a.value,r),n[e]=vt(a.value),c==null||c.postMessage({value:r.encode(a.value)}))},f=d=>{var _;const v=d.refresh?(_=ec(r))==null?void 0:_[e]:r.decode(d.value);p=!0,n[e]=a.value=v,rr(()=>{p=!1})};let p=!1;Ho()&&Uc(()=>{p=!0,u(),c==null||c.close()}),c&&(c.onmessage=({data:d})=>f(d)),r.watch?Je(a,()=>{p||u()},{deep:r.watch!=="shallow"}):u()}return a}function ec(e={}){return Og(document.cookie,e)}function i0(e,t,r={}){return t==null?bl(e,t,{...r,maxAge:-1}):bl(e,t,r)}function o0(e,t,r={}){document.cookie=i0(e,t,r)}const tc=2147483647;function a0(e,t){let r,n=0;return Ho()&&Uc(()=>{clearTimeout(r)}),jd((s,i)=>{function o(){clearTimeout(r);const a=t-n,l=a<tc?a:tc;r=setTimeout(()=>{if(n+=l,n<t)return o();e=void 0,i()},l)}return{get(){return s(),e},set(a){o(),e=a,i()}}})}const l0="$s";function yn(...e){const t=typeof e[e.length-1]=="string"?e.pop():void 0;typeof e[0]!="string"&&e.unshift(t);const[r,n]=e;if(!r||typeof r!="string")throw new TypeError("[nuxt] [useState] key must be a string: "+r);if(n!==void 0&&typeof n!="function")throw new Error("[nuxt] [useState] init must be a function: "+n);const s=l0+r,i=$e(),o=qo(i.payload.state,s);if(o.value===void 0&&n){const a=n();if(Se(a))return i.payload.state[s]=a,a;o.value=a}return o}const c0=it(e=>{const t=dt().public.studio||{},r=$r(),n=hs("previewToken",{sameSite:"none",secure:!0}),s=yn("studio-client-db",()=>null);async function i(){const o=await U(()=>import("./useStudio.1zk0psWL.js"),__vite__mapDeps([123,39,14,124]),import.meta.url).then(c=>c.useStudio),{mountPreviewUI:a,initiateIframeCommunication:l}=o();a(),l()}if(t.apiURL){if(Object.prototype.hasOwnProperty.call(r.query,"preview")&&!r.query.preview||!r.query.preview&&!n.value)return;r.query.preview&&(n.value=String(r.query.preview)),window.sessionStorage.setItem("previewToken",String(n.value)),e.hook("content:storage",o=>{s.value=o}),e.hook("app:mounted",async()=>{await i()})}}),u0=async e=>{const t=$e();e=n0(e),await Promise.all(e.map(r=>p0(t.vueApp._context.components[r])))},f0=e=>u0(e);function p0(e){if(e!=null&&e.__asyncLoader&&!e.__asyncResolved)return e.__asyncLoader()}async function d0(e,t=gt()){const{path:r,matched:n}=t.resolve(e);if(!n.length||(t._routePreloaded||(t._routePreloaded=new Set),t._routePreloaded.has(r)))return;const s=t._preloadPromises=t._preloadPromises||[];if(s.length>4)return Promise.all(s).then(()=>d0(e,t));t._routePreloaded.add(r);const i=n.map(o=>{var a;return(a=o.components)==null?void 0:a.default}).filter(o=>typeof o=="function");for(const o of i){const a=Promise.resolve(o()).catch(()=>{}).finally(()=>s.splice(s.indexOf(a)));s.push(a)}await Promise.all(s)}const h0=["DocsAlert","DocsCard","DocsCardGrid","DocsColourTable","DocsContent","DocsContentNavigation","DocsExample","DocsGradientTable","DocsGrid","DocsHeroHeader","DocsHomeSection","DocsIcon","DocsIconSizingTable","DocsIconTable","DocsImageExample","DocsLayerStyleTable","DocsLink","DocsModuleCard","DocsModuleInfo","DocsModuleNavigation","DocsNavLink","DocsPageHeader","DocsThemeChooser","DocsTypeClassTable","DocsTypeTable","DocsWhatsNew","ProseA","ProseBlockquote","ProseCode","ProseCodeInline","ProseH2","ProseH3","ProseH4","ProseHr","ProseTable","Swatch","DocumentDrivenNotFound","AppFooter","AppLayout","AppLoadingBar","AppNavbar","AppSidebarLayout","RplAccordion","RplAcknowledgement","RplAlert","RplAlertsContainer","RplBreadcrumbs","RplButton","RplCampaignBanner","RplPrimaryCampaign","RplSecondaryCampaign","RplCardCarousel","RplAvatarCard","RplCallToActionCard","RplCard","RplCategoryGridCard","RplKeyDatesCard","RplNavCard","RplPromoCard","RplChip","RplContactUs","RplContent","RplDataTable","RplDataTableRow","RplDescriptionList","RplDescriptionListItem","RplDocument","RplErrorMessage","RplExpandable","RplFile","RplFooter","RplNavSection","RplHeader","RplHeaderActions","RplHeaderGraphic","RplHeaderLinks","RplHeroHeader","RplIntroHeader","RplIcon","RplIconSprite","RplImage","RplImg","RplInPageNavigation","RplCardGrid","RplLayout","RplLayoutBackToTop","RplLayoutSkipLink","RplPageComponent","RplSidebarComponent","RplLink","RplList","RplListContent","RplMediaEmbed","RplMediaGallery","RplMediaGalleryContent","RplModal","RplPageAction","RplPageLinks","RplPageLinksItem","RplPagination","RplPaginationLink","RplPrimaryNav","RplPrimaryNavMegaMenu","RplPrimaryNavMegaMenuAction","RplPrimaryNavMegaMenuBackButton","RplPrimaryNavMegaMenuHomeButton","RplPrimaryNavMegaMenuList","RplPrimaryNavBar","RplPrimaryNavBarAction","RplPrimaryNavQuickExit","RplPrimaryNavSearchForm","RplProfile","RplRelatedLinks","RplResultListing","RplResultListingItem","RplSearchResult","RplSearchBar","RplSearchBarRefine","RplSitemap","RplSlider","RplSocialShare","RplSocialShareEmail","RplSocialShareLink","RplSpinner","RplStatsGrid","RplStatsGridItem","RplTabs","RplTag","RplTextLink","RplTimeline","RplVerticalNav","RplVerticalNavChildList","RplVerticalNavLink","RplVerticalNavToggle","RplFormkitInputError","RplFormkitOuter","RplForm","RplFormActions","RplFormAlert","RplFormContent","RplFormCounter","RplFormDate","RplFormDivider","RplMultiValueLabel","RplFormDropdown","RplFormElement","RplFormFieldset","RplFormHelpText","RplFormHidden","RplFormInput","RplFormInputGrid","RplFormLabel","RplFormNumber","RplFormOptionButtons","RplFormCheckboxGroup","RplFormOption","RplFormRadioGroup","RplFormTextarea","RplFormValidationError","RplStorybookInputFixture","ContentDoc","ContentList","ContentNavigation","ContentQuery","ContentRenderer","ContentRendererMarkdown","MDCSlot","DocumentDrivenEmpty","Markdown","ProsePre","ProseEm","ProseH1","ProseH5","ProseH6","ProseImg","ProseLi","ProseOl","ProseP","ProseScript","ProseStrong","ProseTbody","ProseTd","ProseTh","ProseThead","ProseTr","ProseUl","ContentPreviewMode","NuxtWelcome","NuxtLayout","NuxtErrorBoundary","ClientOnly","DevOnly","ServerPlaceholder","NuxtLink","NuxtLoadingIndicator","NuxtImg","NuxtPicture","MDC","MDCRenderer","MDCSlot","NuxtPage","NoScript","Link","Base","Title","Meta","Style","Head","Html","Body"],m0=/\d/,g0=["-","_","/","."];function y0(e=""){if(!m0.test(e))return e!==e.toLowerCase()}function Wf(e,t){const r=t??g0,n=[];if(!e||typeof e!="string")return n;let s="",i,o;for(const a of e){const l=r.includes(a);if(l===!0){n.push(s),s="",i=void 0;continue}const c=y0(a);if(o===!1){if(i===!1&&c===!0){n.push(s),s=a,i=c;continue}if(i===!0&&c===!1&&s.length>1){const u=s.at(-1);n.push(s.slice(0,Math.max(0,s.length-1))),s=u+a,i=c;continue}}s+=a,i=c,o=l}return n.push(s),n}function _0(e){return e?e[0].toUpperCase()+e.slice(1):""}function v0(e,t){return e?(Array.isArray(e)?e:Wf(e)).map(r=>_0(t!=null&&t.normalize?r.toLowerCase():r)).join(""):""}function GP(e,t){return e?(Array.isArray(e)?e:Wf(e)).map(r=>r.toLowerCase()).join(t??"-"):""}const Ir=()=>{const e=yn("dd-pages",()=>Jt(mr({}))),t=yn("dd-surrounds",()=>Jt(mr({}))),r=yn("dd-navigation"),n=yn("dd-globals",()=>Jt(mr({})));return{pages:e,surrounds:t,navigation:r,globals:n}},JP=()=>{const{navigation:e,pages:t,surrounds:r,globals:n}=Ir(),s=ge(()=>wr($r().path)),i=ge(()=>t.value[s.value]),o=ge(()=>r.value[s.value]),a=ge(()=>{var d,v;return(v=(d=i==null?void 0:i.value)==null?void 0:d.body)==null?void 0:v.toc}),l=ge(()=>{var d;return(d=i.value)==null?void 0:d._type}),c=ge(()=>{var d;return(d=i.value)==null?void 0:d.excerpt}),u=ge(()=>{var d;return(d=i.value)==null?void 0:d.layout}),f=ge(()=>{var d;return(d=o.value)==null?void 0:d[1]}),p=ge(()=>{var d;return(d=o.value)==null?void 0:d[0]});return{globals:n,navigation:e,surround:o,page:i,excerpt:c,toc:a,type:l,layout:u,next:f,prev:p}},qf=e=>{if(!e.children)return e._path;for(const t of(e==null?void 0:e.children)||[]){const r=qf(t);if(r)return r}},Gf=(e,t)=>{for(const r of t){if(r._path===e&&!r._id)return r.children;if(r.children){const n=Gf(e,r.children);if(n)return n}}},Jf=(e,t)=>{for(const r of t){if(r._path===e)return r;if(r.children){const n=Jf(e,r.children);if(n)return n}}},b0=(e,t,r)=>{let n;const s=(i,o)=>{for(const a of o)if(!(i!=="/"&&a._path==="/")){if(i!=null&&i.startsWith(a._path)&&a[t]&&(n=a[t]),a._path===i)return;a.children&&s(i,a.children)}};return s(e,r),n},w0=()=>({navBottomLink:qf,navDirFromPath:Gf,navPageFromPath:Jf,navKeyFromPath:b0});function pa(e){return JSON.stringify(e,$0)}function $0(e,t){return t instanceof RegExp?`--REGEX ${t.toString()}`:t}const Qf=e=>{let t=pa(e);return t=typeof Buffer<"u"?Buffer.from(t).toString("base64"):btoa(t),t=t.replace(/\+/g,"-").replace(/\//g,"_").replace(/=/g,""),(t.match(/.{1,100}/g)||[]).join("/")},da=()=>({isEnabled:()=>{const n=$r().query;return Object.prototype.hasOwnProperty.call(n,"preview")&&!n.preview?!1:!!(n.preview||hs("previewToken").value||sessionStorage.getItem("previewToken"))},getPreviewToken:()=>hs("previewToken").value||sessionStorage.getItem("previewToken")||void 0,setPreviewToken:n=>{hs("previewToken").value=n,$r().query.preview=n||"",n?sessionStorage.setItem("previewToken",n):sessionStorage.removeItem("previewToken"),window.location.reload()}}),Ns=e=>rf(e,dt().public.content.api.baseURL),Yf=()=>{const{experimental:e}=dt().public.content;return e.clientDB?!0:da().isEnabled()},rc=(e,t)=>t.split(".").reduce((r,n)=>r&&r[n],e),ha=(e,t)=>Object.keys(e).filter(t).reduce((r,n)=>Object.assign(r,{[n]:e[n]}),{}),QP=e=>t=>e&&e.length?ha(t,r=>!e.includes(r)):t,YP=e=>t=>Array.isArray(t)?t.map(r=>e(r)):e(t),Xf=e=>{const t=[],r=[];for(const n of e)["$","_"].includes(n)?t.push(n):r.push(n);return{prefixes:t,properties:r}},XP=(e=[])=>t=>{if(e.length===0||!t)return t;const{prefixes:r,properties:n}=Xf(e);return ha(t,s=>!n.includes(s)&&!r.includes(s[0]))},ZP=(e=[])=>t=>{if(e.length===0||!t)return t;const{prefixes:r,properties:n}=Xf(e);return ha(t,s=>n.includes(s)||r.includes(s[0]))},eC=(e,t)=>{const r=new Intl.Collator(t.$locale,{numeric:t.$numeric,caseFirst:t.$caseFirst,sensitivity:t.$sensitivity}),n=Object.keys(t).filter(s=>!s.startsWith("$"));for(const s of n)e=e.sort((i,o)=>{const a=[rc(i,s),rc(o,s)].map(l=>{if(l!==null)return l instanceof Date?l.toISOString():l});return t[s]===-1&&a.reverse(),r.compare(a[0],a[1])});return e},tC=(e,t="Expected an array")=>{if(!Array.isArray(e))throw new TypeError(t)},Ct=e=>Array.isArray(e)?e:[void 0,null].includes(e)?[]:[e],E0=["sort","where","only","without"];function R0(e,t={}){const r={};for(const o of Object.keys(t.initialParams||{}))r[o]=E0.includes(o)?Ct(t.initialParams[o]):t.initialParams[o];const n=(o,a=l=>l)=>(...l)=>(r[o]=a(...l),i),s=o=>{var a;return t.legacy?o!=null&&o.surround?o.surround:o&&(o!=null&&o.dirConfig&&(o.result={_path:(a=o.dirConfig)==null?void 0:a._path,...o.result,_dir:o.dirConfig}),o!=null&&o._path||Array.isArray(o)||!Object.prototype.hasOwnProperty.call(o,"result")?o:o==null?void 0:o.result):o},i={params:()=>({...r,...r.where?{where:[...Ct(r.where)]}:{},...r.sort?{sort:[...Ct(r.sort)]}:{}}),only:n("only",Ct),without:n("without",Ct),where:n("where",o=>[...Ct(r.where),...Ct(o)]),sort:n("sort",o=>[...Ct(r.sort),...Ct(o)]),limit:n("limit",o=>parseInt(String(o),10)),skip:n("skip",o=>parseInt(String(o),10)),find:()=>e(i).then(s),findOne:()=>e(n("first")(!0)).then(s),count:()=>e(n("count")(!0)).then(s),locale:o=>i.where({_locale:o}),withSurround:n("surround",(o,a)=>({query:o,...a})),withDirConfig:()=>n("dirConfig")(!0)};return t.legacy&&(i.findSurround=(o,a)=>i.withSurround(o,a).find().then(s)),i}const P0=()=>async e=>{const{content:t}=dt().public,r=e.params(),n=t.experimental.stripQueryParameters?Ns(`/query/${`${Os(r)}.${t.integrity}`}/${Qf(r)}.json`):Ns(`/query/${Os(r)}.${t.integrity}.json`);if(Yf())return(await U(()=>import("./client-db.lwmN9NLn.js"),__vite__mapDeps([125,46]),import.meta.url).then(o=>o.useContentDatabase())).fetch(e);const s=await $fetch(n,{method:"GET",responseType:"json",params:t.experimental.stripQueryParameters?void 0:{_params:pa(r),previewToken:da().getPreviewToken()}});if(typeof s=="string"&&s.startsWith("<!DOCTYPE html>"))throw new Error("Not found");return s};function ms(e,...t){const{content:r}=dt().public,n=R0(P0(),{initialParams:typeof e!="string"?e:{},legacy:!0});let s;typeof e=="string"&&(s=so(ln(e,...t)));const i=n.params;return n.params=()=>{var a,l,c;const o=i();return s&&(o.where=o.where||[],o.first&&(o.where||[]).length===0?o.where.push({_path:wr(s)}):o.where.push({_path:new RegExp(`^${s.replace(/[-[\]{}()*+.,^$\s/]/g,"\\$&")}`)})),(a=o.sort)!=null&&a.length||(o.sort=[{_file:1,$numeric:!0}]),r.locales.length&&((c=(l=o.where)==null?void 0:l.find(f=>f._locale))!=null&&c._locale||(o.where=o.where||[],o.where.push({_locale:r.defaultLocale}))),o},n}const C0=async e=>{const{content:t}=dt().public;typeof(e==null?void 0:e.params)!="function"&&(e=ms(e));const r=e.params(),n=t.experimental.stripQueryParameters?Ns(`/navigation/${`${Os(r)}.${t.integrity}`}/${Qf(r)}.json`):Ns(`/navigation/${Os(r)}.${t.integrity}.json`);if(Yf())return(await U(()=>import("./client-db.lwmN9NLn.js"),__vite__mapDeps([125,46]),import.meta.url).then(o=>o.generateNavigation))(r);const s=await $fetch(n,{method:"GET",responseType:"json",params:t.experimental.stripQueryParameters?void 0:{_params:pa(r),previewToken:da().getPreviewToken()}});if(typeof s=="string"&&s.startsWith("<!DOCTYPE html>"))throw new Error("Not found");return s},S0=it(e=>{var c,u,f,p;const t=(u=(c=dt())==null?void 0:c.public)==null?void 0:u.content.documentDriven,r=(p=(f=dt())==null?void 0:f.public)==null?void 0:p.content.experimental.clientDB,{navigation:n,pages:s,globals:i,surrounds:o}=Ir(),a=(d,v,_,R)=>{var w;if(v&&(v!=null&&v.layout))return v.layout;if(d.matched.length&&((w=d.matched[0].meta)!=null&&w.layout))return d.matched[0].meta.layout;if(_&&v){const{navKeyFromPath:b}=w0(),h=b(v._path,"layout",_);if(h)return h}if(t.layoutFallbacks&&R){let b;for(const h of t.layoutFallbacks)if(R[h]&&R[h].layout){b=R[h].layout;break}if(b)return b}return"default"},l=async(d,v=!1)=>{e.callHook("content:document-driven:start",{route:d,dedup:v});const _=d.meta.documentDriven||{};if(d.meta.documentDriven===!1)return;const R=wr(d.path),w=[];if(t.navigation&&_.navigation!==!1){const b=()=>{const{navigation:h}=Ir();return h.value&&!v?h.value:C0().then(g=>(h.value=g,g)).catch(()=>null)};w.push(b)}else w.push(()=>Promise.resolve(null));if(t.globals){const b=()=>{const{globals:h}=Ir();if(typeof t.globals=="object"&&Array.isArray(t.globals)){console.log("Globals must be a list of keys with QueryBuilderParams as a value.");return}return Promise.all(Object.entries(t.globals).map(([g,$])=>{if(!v&&h.value[g])return h.value[g];let m="findOne";return $!=null&&$.type&&(m=$.type),ms($)[m]().catch(()=>null)})).then(g=>g.reduce(($,m,C)=>{const A=Object.keys(t.globals)[C];return $[A]=m,$},{}))};w.push(b)}else w.push(()=>Promise.resolve(null));if(t.page&&_.page!==!1){let b={_path:R};typeof _.page=="string"&&(b={_path:_.page}),typeof _.page=="object"&&(b=_.page);const h=()=>{const{pages:g}=Ir();return!v&&g.value[R]&&g.value[R]._path===R?g.value[R]:ms().where(b).findOne().catch(()=>null)};w.push(h)}else w.push(()=>Promise.resolve(null));if(t.surround&&_.surround!==!1){let b=R;["string","object"].includes(typeof _.page)&&(b=_.page),["string","object"].includes(typeof _.surround)&&(b=_.surround);const h=()=>{const{surrounds:g}=Ir();return!v&&g.value[R]?g.value[R]:ms().where({_partial:{$not:!0},navigation:{$not:!1}}).without(["body"]).findSurround(b).catch(()=>null)};w.push(h)}else w.push(()=>Promise.resolve(null));return await Promise.all(w.map(b=>b())).then(async([b,h,g,$])=>{var C,A;b&&(n.value=b),h&&(i.value=h),$&&(o.value[R]=$);const m=(g==null?void 0:g.redirect)||((A=(C=g==null?void 0:g._dir)==null?void 0:C.navigation)==null?void 0:A.redirect);if(m)return s.value[R]=g,m;if(g){const x=a(d,g,b,h),E=gn[x];E&&typeof E=="function"&&await E(),d.meta.layout=x,g.layout=x}s.value[R]=g,await e.callHook("content:document-driven:finish",{route:d,dedup:v,page:g,navigation:b,globals:h,surround:$})})};{const d=gt();e.hook("link:prefetch",v=>{if(!(v in s.value)&&!br(v)){const _=d.resolve(v);_.matched.length>0&&l(_)}}),e.hooks.hook("content:document-driven:finish",({page:v})=>{var _;(_=v==null?void 0:v.body)!=null&&_.children&&Zf(v.body.children)})}cy(async(d,v)=>{if(!r&&d.path===v.path){if(!d.meta.layout){const R=wr(d.path);s.value[R]&&(d.meta.layout=s.value[R].layout)}return}const _=await l(d,!1);if(_)return br(_)?df(e,fy,[_,{external:!0}]):_}),e.hook("app:data:refresh",async()=>await l($r(),!0))});function Zf(e){for(const t of e)if(t.children&&Zf(t.children),t.type==="element"&&t.tag){const r=v0(t.tag);for(const n of["Prose"+r,r])h0.includes(n)&&f0(n)}}var ep=["__key","__init","__shim","__original","__index","__prevKey"];function cn(){return Math.random().toString(36).substring(2,15)}function k0(e,t){const r=e instanceof Set?e:new Set(e);return t&&t.forEach(n=>r.add(n)),[...r]}function re(e,t){return Object.prototype.hasOwnProperty.call(e,t)}function Fe(e,t,r=!0,n=["__key"]){if(e===t)return!0;if(typeof t=="object"&&typeof e=="object"){if(e instanceof Map||e instanceof Set)return!1;if(e instanceof Date&&t instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp&&t instanceof RegExp)return A0(e,t);if(e===null||t===null||Object.keys(e).length!==Object.keys(t).length)return!1;for(const s of n)if((s in e||s in t)&&e[s]!==t[s])return!1;for(const s in e)if(!(s in t)||e[s]!==t[s]&&!r||r&&!Fe(e[s],t[s],r,n))return!1;return!0}return!1}function A0(e,t){return e.source===t.source&&e.flags.split("").sort().join("")===t.flags.split("").sort().join("")}function st(e){const t=typeof e;if(t==="number")return!1;if(e===void 0)return!0;if(t==="string")return e==="";if(t==="object"){if(e===null)return!0;for(const r in e)return!1;return!(e instanceof RegExp||e instanceof Date)}return!1}function T0(e){return e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function x0(e){const t=`^${T0(e)}$`,r={MM:"(0[1-9]|1[012])",M:"([1-9]|1[012])",DD:"([012][0-9]|3[01])",D:"([012]?[0-9]|3[01])",YYYY:"\\d{4}",YY:"\\d{2}"},n=Object.keys(r);return new RegExp(n.reduce((s,i)=>s.replace(i,r[i]),t))}function wo(e){return Object.prototype.toString.call(e)==="[object Object]"}function kn(e){return wo(e)||Array.isArray(e)}function rn(e){if(wo(e)===!1||e.__FKNode__||e.__POJO__===!1)return!1;const t=e.constructor;if(t===void 0)return!0;const r=t.prototype;return!(wo(r)===!1||r.hasOwnProperty("isPrototypeOf")===!1)}var Zt=(e,t,r=!1,n=!1)=>{if(t===null)return null;const s={};if(typeof t=="string")return t;for(const i in e)if(re(t,i)&&(t[i]!==void 0||!n)){if(r&&Array.isArray(e[i])&&Array.isArray(t[i])){s[i]=e[i].concat(t[i]);continue}if(t[i]===void 0)continue;rn(e[i])&&rn(t[i])?s[i]=Zt(e[i],t[i],r,n):s[i]=t[i]}else s[i]=e[i];for(const i in t)!re(s,i)&&t[i]!==void 0&&(s[i]=t[i]);return s};function O0(e){if(e[0]!=='"'&&e[0]!=="'"||e[0]!==e[e.length-1])return!1;const t=e[0];for(let r=1;r<e.length;r++)if(e[r]===t&&(r===1||e[r-1]!=="\\")&&r!==e.length-1)return!1;return!0}function L0(e){if(!e.length)return"";let t="",r="";for(let n=0;n<e.length;n++){const s=e.charAt(n);(s!=="\\"||r==="\\")&&(t+=s),r=s}return t}function xr(...e){return e.reduce((t,r)=>{const{value:n,name:s,modelValue:i,config:o,plugins:a,...l}=r;return Object.assign(t,l)},{})}function I0(e){const t=[];let r="",n=0,s="",i="";for(let o=0;o<e.length;o++){const a=e.charAt(o);a===s&&i!=="\\"?s="":(a==="'"||a==='"')&&!s&&i!=="\\"?s=a:a==="("&&!s?n++:a===")"&&!s&&n--,a===","&&!s&&n===0?(t.push(r),r=""):(a!==" "||s)&&(r+=a),i=a}return r&&t.push(r),t}function nc(e,t){const r={},n=t.filter(i=>i instanceof RegExp),s=new Set(t);for(const i in e)!s.has(i)&&!n.some(o=>o.test(i))&&(r[i]=e[i]);return r}function sc(e,t){const r={},n=t.filter(s=>s instanceof RegExp);return t.forEach(s=>{s instanceof RegExp||(r[s]=e[s])}),Object.keys(e).forEach(s=>{n.some(i=>i.test(s))&&(r[s]=e[s])}),r}function Wr(e){return e.replace(/-([a-z0-9])/gi,(t,r)=>r.toUpperCase())}function tp(e){return e.replace(/([a-z0-9])([A-Z])/g,(t,r,n)=>r+"-"+n.toLowerCase()).replace(" ","-").toLowerCase()}function $o(e,t=ep){if(e!==null&&typeof e=="object"){let r;if(Array.isArray(e)?r=[...e]:rn(e)&&(r={...e}),r)return D0(e,r,t),r}return e}function nn(e,t=ep){if(e===null||e instanceof RegExp||e instanceof Date||e instanceof Map||e instanceof Set||typeof File=="function"&&e instanceof File)return e;let r;Array.isArray(e)?r=e.map(n=>typeof n=="object"?nn(n,t):n):r=Object.keys(e).reduce((n,s)=>(n[s]=typeof e[s]=="object"?nn(e[s],t):e[s],n),{});for(const n of t)n in e&&Object.defineProperty(r,n,{enumerable:!1,value:e[n]});return r}function ut(e){return typeof e=="object"?nn(e):e}function M0(e,t){if(!e||typeof e!="object")return null;const r=t.split(".");let n=e;for(const s in r){const i=r[s];if(re(n,i)&&(n=n[i]),+s===r.length-1)return n;if(!n||typeof n!="object")return null}return null}function ft(e){return e!==void 0&&e!=="false"&&e!==!1?!0:void 0}function sn(e){return Object.isFrozen(e)?e:Object.defineProperty(e,"__init",{enumerable:!1,value:!0})}function ma(e){return e.normalize("NFD").replace(/[\u0300-\u036f]/g,"").toLowerCase().replace(/[^a-z0-9]/g," ").trim().replace(/\s+/g,"-")}function D0(e,t,r){for(const n of r)n in e&&Object.defineProperty(t,n,{enumerable:!1,value:e[n]});return t}function N0(e){let t=!1;return(...r)=>{if(!t)return t=!0,queueMicrotask(()=>t=!1),e(...r)}}function H0(e){if(!(e==="false"||e===!1))return!0}function ga(){const e=[];let t=0;const r=s=>e.push(s),n=s=>{const i=e[t];return typeof i=="function"?i(s,o=>(t++,n(o))):(t=0,s)};return r.dispatch=n,r.unshift=s=>e.unshift(s),r.remove=s=>{const i=e.indexOf(s);i>-1&&e.splice(i,1)},r}function rp(){const e=new Map,t=new Map;let r;const n=(s,i)=>{if(r){r.set(i.name,[s,i]);return}e.has(i.name)&&e.get(i.name).forEach(o=>{(i.origin===s||o.modifiers.includes("deep"))&&o.listener(i)}),i.bubble&&s.bubble(i)};return n.flush=()=>{e.clear(),t.clear(),r==null||r.clear()},n.on=(s,i,o="push")=>{const[a,...l]=s.split("."),c=i.receipt||cn(),u={modifiers:l,event:a,listener:i,receipt:c};return e.has(a)?e.get(a)[o](u):e.set(a,[u]),t.has(c)?t.get(c)[o](a):t.set(c,[a]),c},n.off=s=>{var i;t.has(s)&&((i=t.get(s))==null||i.forEach(o=>{const a=e.get(o);Array.isArray(a)&&e.set(o,a.filter(l=>l.receipt!==s))}),t.delete(s))},n.pause=s=>{r||(r=new Map),s&&s.walk(i=>i._e.pause())},n.play=s=>{if(!r)return;const i=r;r=void 0,i.forEach(([o,a])=>n(o,a)),s&&s.walk(o=>o._e.play())},n}function j0(e,t,r,n,s=!0,i){return t._e(e,{payload:n,name:r,bubble:s,origin:e,meta:i}),e}function F0(e,t,r){return Wn(e.parent)&&e.parent._e(e.parent,r),e}function V0(e,t,r,n,s){return t._e.on(r,n,s)}function B0(e,t,r){return t._e.off(r),e}var ya=ga();ya((e,t)=>(e.message||(e.message=`E${e.code}`),t(e)));var _a=ga();_a((e,t)=>{e.message||(e.message=`W${e.code}`);const r=t(e);return console&&typeof console.warn=="function"&&console.warn(r.message),r});function Cr(e,t={}){_a.dispatch({code:e,data:t})}function Qe(e,t={}){throw Error(ya.dispatch({code:e,data:t}).message)}function mt(e,t){const r={blocking:!1,key:cn(),meta:{},type:"state",visible:!0,...e};return t&&r.value&&r.meta.localize!==!1&&(r.value=t.t(r),r.meta.locale=t.config.locale),r}var ic={apply:G0,set:K0,remove:np,filter:W0,reduce:q0,release:Y0,touch:z0};function U0(e=!1){const t={};let r,n=e,s=[];const i=new Map;let o;const a=new Proxy(t,{get(...l){const[c,u]=l;return u==="buffer"?n:u==="_b"?s:u==="_m"?i:u==="_r"?o:re(ic,u)?ic[u].bind(null,t,a,r):Reflect.get(...l)},set(l,c,u){return c==="_n"?(r=u,o==="__n"&&sp(r,a),!0):c==="_b"?(s=u,!0):c==="buffer"?(n=u,!0):c==="_r"?(o=u,!0):(Qe(101,r),!1)}});return a}function K0(e,t,r,n){if(t.buffer)return t._b.push([[n]]),t;if(e[n.key]!==n){if(typeof n.value=="string"&&n.meta.localize!==!1){const i=n.value;n.value=r.t(n),n.value!==i&&(n.meta.locale=r.props.locale)}const s=`message-${re(e,n.key)?"updated":"added"}`;e[n.key]=Object.freeze(r.hook.message.dispatch(n)),r.emit(s,n)}return t}function z0(e,t){for(const r in e){const n={...e[r]};t.set(n)}}function np(e,t,r,n){if(re(e,n)){const s=e[n];delete e[n],r.emit("message-removed",s)}return t.buffer===!0&&(t._b=t._b.filter(s=>(s[0]=s[0].filter(i=>i.key!==n),s[1]||s[0].length))),t}function W0(e,t,r,n,s){for(const i in e){const o=e[i];(!s||o.type===s)&&!n(o)&&np(e,t,r,i)}}function q0(e,t,r,n,s){for(const i in e){const o=e[i];s=n(s,o)}return s}function G0(e,t,r,n,s){if(Array.isArray(n)){if(t.buffer){t._b.push([n,s]);return}const i=new Set(n.map(o=>(t.set(o),o.key)));typeof s=="string"?t.filter(o=>o.type!==s||i.has(o.key)):typeof s=="function"&&t.filter(o=>!s(o)||i.has(o.key))}else for(const i in n){const o=r.at(i);o?o.store.apply(n[i],s):Q0(r,t,i,n[i],s)}}function J0(e,...t){const r=`${e.name}-set`,n=s=>mt({key:ma(s),type:"error",value:s,meta:{source:r,autoClear:!0}});return t.filter(s=>!!s).map(s=>{if(typeof s=="string"&&(s=[s]),Array.isArray(s))return s.map(i=>n(i));{const i={};for(const o in s)Array.isArray(s[o])?i[o]=s[o].map(a=>n(a)):i[o]=[n(s[o])];return i}})}function Q0(e,t,r,n,s){var o;const i=t._m;i.has(r)||i.set(r,[]),t._r||(t._r=sp(e,t)),(o=i.get(r))==null||o.push([n,s])}function sp(e,t){return e.on("child.deep",({payload:r})=>{t._m.forEach((n,s)=>{e.at(s)===r&&(n.forEach(([i,o])=>{r.store.apply(i,o)}),t._m.delete(s))}),t._m.size===0&&t._r&&(e.off(t._r),t._r=void 0)})}function Y0(e,t){t.buffer=!1,t._b.forEach(([r,n])=>t.apply(r,n)),t._b=[]}function X0(){const e={};let t;return{count:(...r)=>Z0(t,e,...r),init(r){t=r,r.on("message-added.deep",oc(e,1)),r.on("message-removed.deep",oc(e,-1))},merge:r=>ac(t,e,r),settled(r){return re(e,r)?e[r].promise:Promise.resolve()},unmerge:r=>ac(t,e,r,!0),value(r){return re(e,r)?e[r].count:0}}}function Z0(e,t,r,n,s=0){if(n=ew(n||r),!re(t,r)){const i={condition:n,count:0,name:r,node:e,promise:Promise.resolve(),resolve:()=>{}};t[r]=i,s=e.store.reduce((o,a)=>o+i.condition(a)*1,s),e.each(o=>{o.ledger.count(i.name,i.condition),s+=o.ledger.value(i.name)})}return ip(t[r],s).promise}function ew(e){return typeof e=="function"?e:t=>t.type===e}function ip(e,t){const r=e.count,n=e.count+t;return e.count=n,r===0&&n!==0?(e.node.emit(`unsettled:${e.name}`,e.count,!1),e.promise=new Promise(s=>e.resolve=s)):r!==0&&n===0&&(e.node.emit(`settled:${e.name}`,e.count,!1),e.resolve()),e.node.emit(`count:${e.name}`,e.count,!1),e}function oc(e,t){return r=>{for(const n in e){const s=e[n];s.condition(r.payload)&&ip(s,t)}}}function ac(e,t,r,n=!1){const s=e;for(const i in t){const o=t[i].condition;n||r.ledger.count(i,o);const a=r.ledger.value(i)*(n?-1:1);if(e){do e.ledger.count(i,o,a),e=e.parent;while(e);e=s}}}var va=new Map,gs=new Map,ba=rp();function tw(e){e.props.id&&(va.set(e.props.id,e),gs.set(e,e.props.id),ba(e,{payload:e,name:e.props.id,bubble:!1,origin:e}))}function rw(e){if(gs.has(e)){const t=gs.get(e);gs.delete(e),va.delete(t),ba(e,{payload:null,name:t,bubble:!1,origin:e})}}function zn(e){return va.get(e)}function nw(e,t){return ba.on(e,t)}function Eo(e,t,r){let n=!0;return t in e.config._t?n=!1:e.emit(`config:${t}`,r,!1),t in e.props||(e.emit("prop",{prop:t,value:r}),e.emit(`prop:${t}`,r)),n}function sw(e={}){const t=new Set,r={...e,_add:s=>t.add(s),_rm:s=>t.delete(s)};return new Proxy(r,{set(s,i,o,a){return typeof i=="string"&&t.forEach(l=>Eo(l,i,o)),Reflect.set(s,i,o,a)}})}function op(e,t){const r=(t||document).getElementById(e);if(r instanceof HTMLFormElement){const n=new Event("submit",{cancelable:!0,bubbles:!0});r.dispatchEvent(n);return}Cr(151,e)}function iw(e){const t=r=>{for(const n in r.store){const s=r.store[n];s.type==="error"||s.type==="ui"&&n==="incomplete"?r.store.remove(n):s.type==="state"&&r.store.set({...s,value:!1})}};t(e),e.walk(t)}function ap(e,t){const r=typeof e=="string"?zn(e):e;if(r){const n=o=>ut(o.props.initial)||(o.type==="group"?{}:o.type==="list"?[]:void 0);r._e.pause(r);const s=ut(t);return t&&!st(t)&&(r.props.initial=kn(s)?sn(s):s,r.props._init=r.props.initial),r.input(n(r),!1),r.walk(o=>{o.type==="list"&&o.sync||o.input(n(o),!1)}),r.input(st(s)&&s?s:n(r),!1),r.type!=="input"&&t&&!st(t)&&kn(t)&&r.walk(o=>{o.props.initial=kn(o.value)?sn(o.value):o.value,o.props._init=o.props.initial}),r._e.play(r),iw(r),r.emit("reset",r),r}Cr(152,e)}var ow={delimiter:".",delay:0,locale:"en",rootClasses:e=>({[`formkit-${tp(e)}`]:!0})},lp=Symbol("index"),Ro=Symbol("removed"),Po=Symbol("moved"),cp=Symbol("inserted");function aw(e){return e.type==="list"&&Array.isArray(e._value)}function Wn(e){return e&&typeof e=="object"&&e.__FKNode__===!0}var ys=(e,t,r)=>{Qe(102,[e,r])},lw={_c:ce(Aw,ys,!1),add:ce(ww),addProps:ce(bw),address:ce(xw,ys,!1),at:ce(Ow),bubble:ce(F0),clearErrors:ce(Vw),calm:ce(yw),config:ce(!1),define:ce(vw),disturb:ce(gw),destroy:ce(_w),extend:ce(Uw),hydrate:ce(hw),index:ce(kw,Sw,!1),input:ce(pp),each:ce(Rw),emit:ce(j0),find:ce(Iw),on:ce(V0),off:ce(B0),parent:ce(!1,$w),plugins:ce(!1),remove:ce(Ew),root:ce(Dw,ys,!1),reset:ce(jw),resetConfig:ce(Cw),setErrors:ce(Fw),submit:ce(Hw),t:ce(Nw),use:ce($a),name:ce(Tw,!1,!1),walk:ce(Pw)};function cw(){return new Map(Object.entries(lw))}function ce(e,t,r=!0){return{get:e?(n,s)=>r?(...i)=>e(n,s,...i):e(n,s):!1,set:t!==void 0?t:ys.bind(null)}}function uw(){const e=new Map;return new Proxy(e,{get(t,r){return e.has(r)||e.set(r,ga()),e.get(r)}})}var wa=0,up=0;function fw(){wa=0,up=0}function pw(e){var t,r;return((t=e.parent)==null?void 0:t.type)==="list"?lp:e.name||`${((r=e.props)==null?void 0:r.type)||"input"}_${++wa}`}function fp(e){return e.type==="group"?sn(e.value&&typeof e.value=="object"&&!Array.isArray(e.value)?e.value:{}):e.type==="list"?sn(Array.isArray(e.value)?e.value:[]):e.value}function pp(e,t,r,n=!0){return t._value=dw(e,e.hook.input.dispatch(r)),e.emit("input",t._value),e.isCreated&&e.type==="input"&&Fe(t._value,t.value)?(e.emit("commitRaw",t.value),t.settled):(t.isSettled&&e.disturb(),n?(t._tmo&&clearTimeout(t._tmo),t._tmo=setTimeout(Hs,e.props.delay,e,t)):Hs(e,t),t.settled)}function dw(e,t){switch(e.type){case"input":break;case"group":(!t||typeof t!="object")&&Qe(107,[e,t]);break;case"list":Array.isArray(t)||Qe(108,[e,t]);break}return t}function Hs(e,t,r=!0,n=!0){t._value=t.value=e.hook.commit.dispatch(t._value),e.type!=="input"&&n&&e.hydrate(),e.emit("commitRaw",t.value),e.emit("commit",t.value),r&&e.calm()}function dp(e,{name:t,value:r,from:n}){if(!Object.isFrozen(e._value)){if(aw(e)){const s=r===Ro?[]:r===Po&&typeof n=="number"?e._value.splice(n,1):[r];e._value.splice(t,r===Po||n===cp?0:1,...s);return}r!==Ro?e._value[t]=r:delete e._value[t]}}function hw(e,t){const r=t._value;return e.type==="list"&&e.sync&&mw(e,t),t.children.forEach(n=>{if(typeof r=="object")if(n.name in r){const s=n.type!=="input"||r[n.name]&&typeof r[n.name]=="object"?sn(r[n.name]):r[n.name];if(!n.isSettled||!kn(s)&&Fe(s,n._value))return;n.input(s,!1)}else(e.type!=="list"||typeof n.name=="number")&&dp(t,{name:n.name,value:n.value}),r.__init||(n.type==="group"?n.input({},!1):n.type==="list"?n.input([],!1):n.input(void 0,!1))}),e}function mw(e,t){const r=e._value;if(!Array.isArray(r))return;const n=[],s=new Set(t.children),i=new Map;r.forEach((a,l)=>{if(t.children[l]&&t.children[l]._value===a)n.push(t.children[l]),s.delete(t.children[l]);else{n.push(null);const c=i.get(a)||[];c.push(l),i.set(a,c)}}),s.size&&i.size&&s.forEach(a=>{if(i.has(a._value)){const l=i.get(a._value),c=l.shift();n[c]=a,s.delete(a),l.length||i.delete(a._value)}});const o=[];for(i.forEach(a=>{o.push(...a)});s.size&&o.length;){const a=s.values().next().value,l=o.shift();if(l===void 0)break;n[l]=a,s.delete(a)}o.forEach((a,l)=>{n[a]=qw({value:l})}),s.size&&s.forEach(a=>{if(!("__FKP"in a)){const l=a._c.parent;if(!l||Gw(l))return;l.ledger.unmerge(a),a._c.parent=null,a.destroy()}}),t.children=n}function gw(e,t){var r;return t._d<=0&&(t.isSettled=!1,e.emit("settled",!1,!1),t.settled=new Promise(n=>{t._resolve=n}),e.parent&&((r=e.parent)==null||r.disturb())),t._d++,e}function yw(e,t,r){var n;if(r!==void 0&&e.type!=="input")return dp(t,r),Hs(e,t,!0,!1);t._d>0&&t._d--,t._d===0&&(t.isSettled=!0,e.emit("settled",!0,!1),e.parent&&((n=e.parent)==null||n.calm({name:e.name,value:t.value})),t._resolve&&t._resolve(t.value))}function _w(e,t){e.emit("destroying",e),e.store.filter(()=>!1),e.parent&&e.parent.remove(e),rw(e),e.emit("destroyed",e),t._e.flush(),t._value=t.value=void 0;for(const r in t.context)delete t.context[r];t.plugins.clear(),t.context=null}function vw(e,t,r){t.type=r.type;const n=nn(r);e.props.__propDefs=hp(e.props.__propDefs??[],(n==null?void 0:n.props)||[]),n.props=e.props.__propDefs,t.props.definition=n,t.value=t._value=fp({type:e.type,value:t.value}),r.forceTypeProp&&(e.props.type&&(e.props.originalType=e.props.type),t.props.type=r.forceTypeProp),r.family&&(t.props.family=r.family),r.features&&r.features.forEach(s=>s(e)),r.props&&e.addProps(r.props),e.emit("defined",r)}function bw(e,t,r){const n=Array.isArray(r)?r:Object.keys(r),s=Array.isArray(r)?{}:n.reduce((o,a)=>("default"in r[a]&&(o[a]=r[a].default),o),{});if(e.props.attrs){const o={...e.props.attrs};e.props._emit=!1;for(const l in o){const c=Wr(l);n.includes(c)&&(e.props[c]=o[l],delete o[l])}Array.isArray(r)||n.forEach(l=>{"default"in r[l]&&e.props[l]===void 0&&(e.props[l]=s[l])});const a=ut(t._value);e.props.initial=e.type!=="input"?sn(a):a,e.props._emit=!0,e.props.attrs=o}const i=hp(e.props.__propDefs??[],r);return e.props.definition&&(e.props.definition.props=i),e.props.__propDefs=i,e.emit("added-props",r),e}function Co(e){return Array.isArray(e)?e.reduce((t,r)=>(t[r]={},t),{}):e}function hp(e,t){return Array.isArray(e)&&Array.isArray(t)?e.concat(t):Zt(Co(e),Co(t))}function ww(e,t,r,n){if(e.type==="input"&&Qe(100,e),r.parent&&r.parent!==e&&r.parent.remove(r),!t.children.includes(r)){if(n!==void 0&&e.type==="list"){const s=t.children[n];s&&"__FKP"in s?(r._c.uid=s.uid,t.children.splice(n,1,r)):t.children.splice(n,0,r),Array.isArray(e.value)&&e.value.length<t.children.length&&e.disturb().calm({name:n,value:r.value,from:cp})}else t.children.push(r);r.isSettled||e.disturb()}if(r.parent!==e){if(r.parent=e,r.parent!==e)return e.remove(r),r.parent.add(r),e}else r.use(e.plugins);return Hs(e,t,!1),e.ledger.merge(r),e.emit("child",r),e}function $w(e,t,r,n){return Wn(n)?(e.parent&&e.parent!==n&&e.parent.remove(e),t.parent=n,e.resetConfig(),n.children.includes(e)?e.use(n.plugins):n.add(e),!0):n===null?(t.parent=null,!0):!1}function Ew(e,t,r){const n=t.children.indexOf(r);if(n!==-1){r.isSettled&&e.disturb(),t.children.splice(n,1);let s=ft(r.props.preserve),i=r.parent;for(;s===void 0&&i;)s=ft(i.props.preserve),i=i.parent;s?e.calm():e.calm({name:e.type==="list"?n:r.name,value:Ro}),r.parent=null,r.config._rmn=r}return e.ledger.unmerge(r),e.emit("childRemoved",r),e}function Rw(e,t,r){t.children.forEach(n=>!("__FKP"in n)&&r(n))}function Pw(e,t,r,n=!1,s=!1){t.children.some(i=>{if("__FKP"in i)return!1;const o=r(i);return n&&o===!1?!0:s&&o===!1?!1:i.walk(r,n,s)})}function Cw(e,t){const r=e.parent||void 0;t.config=mp(e.config._t,r),e.walk(n=>n.resetConfig())}function $a(e,t,r,n=!0,s=!0){return Array.isArray(r)||r instanceof Set?(r.forEach(i=>$a(e,t,i)),e):(t.plugins.has(r)||(s&&typeof r.library=="function"&&r.library(e),n&&r(e)!==!1&&(t.plugins.add(r),e.children.forEach(i=>i.use(r)))),e)}function Sw(e,t,r,n){if(Wn(e.parent)){const s=e.parent.children,i=n>=s.length?s.length-1:n<0?0:n,o=s.indexOf(e);return o===-1?!1:(s.splice(o,1),s.splice(i,0,e),e.parent.children=s,e.parent.type==="list"&&e.parent.disturb().calm({name:i,value:Po,from:o}),!0)}return!1}function kw(e){if(e.parent){const t=[...e.parent.children].indexOf(e);return t===-1?e.parent.children.length:t}return-1}function Aw(e,t){return t}function Tw(e,t){var r;return((r=e.parent)==null?void 0:r.type)==="list"?e.index:t.name!==lp?t.name:e.index}function xw(e,t){return t.parent?t.parent.address.concat([e.name]):[e.name]}function Ow(e,t,r){const n=typeof r=="string"?r.split(e.config.delimiter):r;if(!n.length)return;const s=n[0];let i=e.parent;for(i||(String(n[0])===String(e.name)&&n.shift(),i=e),s==="$parent"&&n.shift();i&&n.length;){const o=n.shift();switch(o){case"$root":i=e.root;break;case"$parent":i=i.parent;break;case"$self":i=e;break;default:i=i.children.find(a=>!("__FKP"in a)&&String(a.name)===String(o))||Lw(i,o)}}return i||void 0}function Lw(e,t){const r=String(t).match(/^(find)\((.*)\)$/);if(r){const[,n,s]=r,i=s.split(",").map(o=>o.trim());switch(n){case"find":return e.find(i[0],i[1]);default:return}}}function Iw(e,t,r,n){return Mw(e,r,n)}function Mw(e,t,r="name"){const n=typeof r=="string"?i=>i[r]==t:r,s=[e];for(;s.length;){const i=s.shift();if(!("__FKP"in i)){if(n(i,t))return i;s.push(...i.children)}}}function Dw(e){let t=e;for(;t.parent;)t=t.parent;return t}function mp(e={},t){let r;return new Proxy(e,{get(...n){const s=n[1];if(s==="_t")return e;const i=Reflect.get(...n);if(i!==void 0)return i;if(t){const o=t.config[s];if(o!==void 0)return o}if(e.rootConfig&&typeof s=="string"){const o=e.rootConfig[s];if(o!==void 0)return o}return s==="delay"&&(r==null?void 0:r.type)==="input"?20:ow[s]},set(...n){const s=n[1],i=n[2];if(s==="_n")return r=i,e.rootConfig&&e.rootConfig._add(r),!0;if(s==="_rmn")return e.rootConfig&&e.rootConfig._rm(r),r=void 0,!0;if(!Fe(e[s],i,!1)){const o=Reflect.set(...n);return r&&(r.emit(`config:${s}`,i,!1),Eo(r,s,i),r.walk(a=>Eo(a,s,i),!1,!0)),o}return!0}})}function Nw(e,t,r,n="ui"){const s=typeof r=="string"?{key:r,value:r,type:n}:r,i=e.hook.text.dispatch(s);return e.emit("text",i,!1),i.value}function Hw(e){const t=e.name;do{if(e.props.isForm===!0)break;e.parent||Qe(106,t),e=e.parent}while(e);e.props.id&&op(e.props.id,e.props.__root)}function jw(e,t,r){return ap(e,r)}function Fw(e,t,r,n){const s=`${e.name}-set`,i=e.hook.setErrors.dispatch({localErrors:r,childErrors:n});return J0(e,i.localErrors,i.childErrors).forEach(o=>{e.store.apply(o,a=>a.meta.source===s)}),e}function Vw(e,t,r=!0,n){return e.store.filter(s=>!(n===void 0||s.meta.source===n),"error"),r&&(n=n||`${e.name}-set`,e.walk(s=>{s.store.filter(i=>!(i.type==="error"&&i.meta&&i.meta.source===n))})),e}function Bw(e){const t={initial:typeof e=="object"?ut(e):e};let r,n=!0,s={};return new Proxy(t,{get(...i){var u,f,p,d;const[o,a]=i;let l;re(t,a)?(l=Reflect.get(...i),(u=s[a])!=null&&u.boolean&&(l=H0(l))):r&&typeof a=="string"&&r.config[a]!==void 0?l=r.config[a]:l=(f=s[a])==null?void 0:f.default;const c=(p=s[a])==null?void 0:p.getter;return(d=s[a])!=null&&d.boolean&&(l=!!l),c?c(l,r):l},set(i,o,a,l){var p;if(o==="_n")return r=a,!0;if(o==="_emit")return n=a,!0;let{prop:c,value:u}=r.hook.prop.dispatch({prop:o,value:a});const f=(p=s[c])==null?void 0:p.setter;if(u=f?f(u,r):u,!Fe(t[c],u,!1)||typeof u=="object"){const d=Reflect.set(i,c,u,l);return c==="__propDefs"&&(s=Co(u)),n&&(r.emit("prop",{prop:c,value:u}),typeof c=="string"&&r.emit(`prop:${c}`,u)),d}return!0}})}function Uw(e,t,r,n){return t.traps.set(r,n),e}function Kw(e,t){if(e.props.definition)return e.define(e.props.definition);for(const r of t){if(e.props.definition)return;typeof r.library=="function"&&r.library(e)}}function zw(e){const t=fp(e),r=mp(e.config||{},e.parent);return{_d:0,_e:rp(),uid:Symbol(),_resolve:!1,_tmo:!1,_value:t,children:k0(e.children||[]),config:r,hook:uw(),isCreated:!1,isSettled:!0,ledger:X0(),name:pw(e),parent:e.parent||null,plugins:new Set,props:Bw(t),settled:Promise.resolve(t),store:U0(!0),sync:e.sync||!1,traps:cw(),type:e.type||"input",value:t}}function Ww(e,t){var n,s;const r=(n=t.props)==null?void 0:n.id;if(r||(s=t.props)==null||delete s.id,e.ledger.init(e.store._n=e.props._n=e.config._n=e),e.props._emit=!1,Object.assign(e.props,r?{}:{id:`input_${up++}`},t.props??{}),e.props._emit=!0,Kw(e,new Set([...t.plugins||[],...e.parent?e.parent.plugins:[]])),t.plugins)for(const i of t.plugins)$a(e,e._c,i,!0,!1);return e.each(i=>e.add(i)),e.parent&&e.parent.add(e,t.index),e.type==="input"&&e.children.length&&Qe(100,e),pp(e,e._c,e._value,!1),e.store.release(),r&&tw(e),e.emit("created",e),e.isCreated=!0,e}function qw(e){return{__FKP:!0,uid:Symbol(),name:(e==null?void 0:e.name)??`p_${wa++}`,value:(e==null?void 0:e.value)??null,_value:(e==null?void 0:e.value)??null,type:(e==null?void 0:e.type)??"input",use:()=>{},input(t){return this._value=t,this.value=t,Promise.resolve()},isSettled:!0}}function Gw(e){return"__FKP"in e}function Jw(e){const t=e||{},r=zw(t),n=new Proxy(r,{get(...s){const[,i]=s;if(i==="__FKNode__")return!0;const o=r.traps.get(i);return o&&o.get?o.get(n,r):Reflect.get(...s)},set(...s){const[,i,o]=s,a=r.traps.get(i);return a&&a.set?a.set(n,r,i,o):Reflect.set(...s)}});return Ww(n,t)}function So(e){return typeof e!="string"&&re(e,"$el")}function ko(e){return typeof e!="string"&&re(e,"$cmp")}function Mr(e){return!e||typeof e=="string"?!1:re(e,"if")&&re(e,"then")}function Qw(e){return typeof e!="string"&&"$formkit"in e}function Yw(e){if(typeof e=="string")return{$el:"text",children:e};if(Qw(e)){const{$formkit:t,for:r,if:n,children:s,bind:i,...o}=e;return Object.assign({$cmp:"FormKit",props:{...o,type:t}},n?{if:n}:{},r?{for:r}:{},s?{children:s}:{},i?{bind:i}:{})}return e}function at(e){let t;const r=new Set,n=function(R,w){return typeof R=="function"?R(w):R},s=[{"&&":(_,R,w)=>n(_,w)&&n(R,w),"||":(_,R,w)=>n(_,w)||n(R,w)},{"===":(_,R,w)=>n(_,w)===n(R,w),"!==":(_,R,w)=>n(_,w)!==n(R,w),"==":(_,R,w)=>n(_,w)==n(R,w),"!=":(_,R,w)=>n(_,w)!=n(R,w),">=":(_,R,w)=>n(_,w)>=n(R,w),"<=":(_,R,w)=>n(_,w)<=n(R,w),">":(_,R,w)=>n(_,w)>n(R,w),"<":(_,R,w)=>n(_,w)<n(R,w)},{"+":(_,R,w)=>n(_,w)+n(R,w),"-":(_,R,w)=>n(_,w)-n(R,w)},{"*":(_,R,w)=>n(_,w)*n(R,w),"/":(_,R,w)=>n(_,w)/n(R,w),"%":(_,R,w)=>n(_,w)%n(R,w)}],i=s.reduce((_,R)=>_.concat(Object.keys(R)),[]),o=new Set(i.map(_=>_.charAt(0)));function a(_,R,w,b){const h=_.filter(g=>g.startsWith(R));return h.length?h.find(g=>b.length>=w+g.length&&b.substring(w,w+g.length)===g?g:!1):!1}function l(_,R,w=1){let b=w?R.substring(_+1).trim():R.substring(0,_).trim();if(!b.length)return-1;if(!w){const g=b.split("").reverse(),$=g.findIndex(m=>o.has(m));b=g.slice($).join("")}const h=b[0];return s.findIndex(g=>{const $=Object.keys(g);return!!a($,h,0,b)})}function c(_,R){let w="";const b=R.length;let h=0;for(let g=_;g<b;g++){const $=R.charAt(g);if($==="(")h++;else if($===")")h--;else if(h===0&&$===" ")continue;if(h===0&&a(i,$,g,R))return[w,g-1];w+=$}return[w,R.length-1]}function u(_,R=0){const w=s[R],b=_.length,h=Object.keys(w);let g=0,$=!1,m=null,C="",A=null,x,E="",T="",S="",j="",ie=0;const X=(D,G)=>{D?S+=G:C+=G};for(let D=0;D<b;D++)if(E=T,T=_.charAt(D),(T==="'"||T==='"')&&E!=="\\"&&(g===0&&!$||g&&!j)){g?j=T:$=T,X(g,T);continue}else if($&&(T!==$||E==="\\")||j&&(T!==j||E==="\\")){X(g,T);continue}else if($===T){$=!1,X(g,T);continue}else if(j===T){j=!1,X(g,T);continue}else{if(T===" ")continue;if(T==="(")g===0?ie=D:S+=T,g++;else if(T===")")if(g--,g===0){const G=typeof C=="string"&&C.startsWith("$")?C:void 0,q=G&&_.charAt(D+1)===".";let be="";q&&([be,D]=c(D+2,_));const Ye=m?R:l(ie,_,0),Le=l(D,_);Ye===-1&&Le===-1?(C=f(S,-1,G,be),typeof C=="string"&&(C=S)):m&&(Ye>=Le||Le===-1)&&R===Ye?(A=m.bind(null,f(S,-1,G,be)),m=null,C=""):Le>Ye&&R===Le?C=f(S,-1,G,be):C+=`(${S})${q?`.${be}`:""}`,S=""}else S+=T;else if(g===0&&(x=a(h,T,D,_))){D===0&&Qe(103,[x,_]),D+=x.length-1,D===_.length-1&&Qe(104,[x,_]),m?C&&(A=m.bind(null,f(C,R)),m=w[x].bind(null,A),C=""):A?(m=w[x].bind(null,f(A,R)),A=null):(m=w[x].bind(null,f(C,R)),C="");continue}else X(g,T)}return C&&m&&(m=m.bind(null,f(C,R))),m=!m&&A?A:m,!m&&C&&(m=(D,G)=>typeof D=="function"?D(G):D,m=m.bind(null,f(C,R))),!m&&!C&&Qe(105,_),m}function f(_,R,w,b){if(w){const h=f(w,s.length);let g,$=b?at(`$${b}`):!1;if(typeof h=="function"){const m=I0(String(_)).map(C=>f(C,-1));return C=>{const A=h(C);return typeof A!="function"?(Cr(150,w),A):(g=A(...m.map(x=>typeof x=="function"?x(C):x)),$&&($=$.provide(x=>{const E=t(x);return x.reduce((S,j)=>{if(j===b||(b==null?void 0:b.startsWith(`${j}(`))){const X=M0(g,j);S[j]=()=>X}else S[j]=E[j];return S},{})})),$?$():g)}}}else if(typeof _=="string"){if(_==="true")return!0;if(_==="false")return!1;if(_==="undefined")return;if(O0(_))return L0(_.substring(1,_.length-1));if(!isNaN(+_))return Number(_);if(R<s.length-1)return u(_,R+1);if(_.startsWith("$")){const h=_.substring(1);return r.add(h),function($){return h in $?$[h]():void 0}}return _}return _}const p=u(e.startsWith("$:")?e.substring(2):e),d=Array.from(r);function v(_){return t=_,Object.assign(p.bind(null,_(d)),{provide:v})}return Object.assign(p,{provide:v})}function _s(e,t,r){return r?typeof r=="string"?r.split(" ").reduce((s,i)=>Object.assign(s,{[i]:!0}),{}):typeof r=="function"?_s(e,t,r(t,e)):r:{}}function Xw(e,t,...r){const n=r.reduce((s,i)=>{if(!i)return Ii(s);const{$reset:o,...a}=i;return Ii(o?a:Object.assign(s,a))},{});return Object.keys(e.hook.classes.dispatch({property:t,classes:n}).classes).filter(s=>n[s]).join(" ")||null}function Ii(e){const t="$remove:";let r=!1;const n=Object.keys(e).filter(s=>(e[s]&&s.startsWith(t)&&(r=!0),e[s]));return n.length>1&&r&&n.filter(i=>i.startsWith(t)).map(i=>{const o=i.substring(t.length);e[o]=!1,e[i]=!1}),e}function Zw(e,t,r){const n=zn(e);n?n.setErrors(t,r):Cr(651,e)}function e$(e,t=!0){const r=zn(e);r?r.clearErrors(t):Cr(652,e)}var js="1.6.0",gp=new WeakSet;function Hn(e,t){const r=t||Object.assign(new Map,{active:!1}),n=new Map,s=function(u){var f;r.active&&(r.has(e)||r.set(e,new Set),(f=r.get(e))==null||f.add(u))},i=function(u){return new Proxy(u,{get(...f){return typeof f[1]=="string"&&s(`prop:${f[1]}`),Reflect.get(...f)}})},o=function(u){return new Proxy(u,{get(...f){return f[1]==="value"?p=>(s(`count:${p}`),u.value(p)):Reflect.get(...f)}})},a=function(u,f){return Wn(u)?Hn(u,r):(f==="value"&&s("commit"),f==="_value"&&s("input"),f==="props"?i(u):f==="ledger"?o(u):(f==="children"&&(s("child"),s("childRemoved")),u))},{proxy:l,revoke:c}=Proxy.revocable(e,{get(...u){switch(u[1]){case"_node":return e;case"deps":return r;case"watch":return(p,d,v)=>vp(l,p,d,v);case"observe":return()=>{const p=new Map(r);return r.clear(),r.active=!0,p};case"stopObserve":return()=>{const p=new Map(r);return r.active=!1,p};case"receipts":return n;case"kill":return()=>{_p(n),gp.add(u[2]),c()}}const f=Reflect.get(...u);return typeof f=="function"?(...p)=>{const d=f(...p);return a(d,u[1])}:a(f,u[1])}});return l}function yp(e,[t,r],n,s){t.forEach((i,o)=>{i.forEach(a=>{e.receipts.has(o)||e.receipts.set(o,{});const l=e.receipts.get(o)??{};l[a]=l[a]??[],l[a].push(o.on(a,n,s)),e.receipts.set(o,l)})}),r.forEach((i,o)=>{i.forEach(a=>{if(e.receipts.has(o)){const l=e.receipts.get(o);l&&re(l,a)&&(l[a].map(o.off),delete l[a],e.receipts.set(o,l))}})})}function _p(e){e.forEach((t,r)=>{for(const n in t)t[n].map(r.off)}),e.clear()}function vp(e,t,r,n){const s=a=>{const l=e.stopObserve();yp(e,bp(i,l),()=>vp(e,t,r,n),n),r&&r(a)},i=new Map(e.deps);e.observe();const o=t(e);o instanceof Promise?o.then(a=>s(a)):s(o)}function bp(e,t){const r=new Map,n=new Map;return t.forEach((s,i)=>{if(!e.has(i))r.set(i,s);else{const o=new Set,a=e.get(i);s.forEach(l=>!(a!=null&&a.has(l))&&o.add(l)),r.set(i,o)}}),e.forEach((s,i)=>{if(!t.has(i))n.set(i,s);else{const o=new Set,a=t.get(i);s.forEach(l=>!(a!=null&&a.has(l))&&o.add(l)),n.set(i,o)}}),[r,n]}function wp(e){return gp.has(e)}var $p=function({value:t}){return["yes","on","1",1,!0,"true"].includes(t)};$p.skipEmpty=!1;var t$=$p,r$=function({value:e},t=!1){const r=Date.parse(t||new Date),n=Date.parse(String(e));return isNaN(n)?!1:n>r},n$=r$,s$=function({value:e},t="default"){const r={default:new RegExp("^\\p{L}+$","u"),latin:/^[a-z]+$/i},n=re(r,t)?t:"default";return r[n].test(String(e))},i$=s$,o$=function({value:e},t="default"){const r={default:/^[\p{L} ]+$/u,latin:/^[a-z ]+$/i},n=re(r,t)?t:"default";return r[n].test(String(e))},a$=o$,l$=function({value:e},t="default"){const r={default:/^[0-9\p{L}]+$/u,latin:/^[0-9a-z]+$/i},n=re(r,t)?t:"default";return r[n].test(String(e))},c$=l$,u$=function({value:e},t=!1){const r=Date.parse(t||new Date),n=Date.parse(String(e));return isNaN(n)?!1:n<r},f$=u$,p$=function({value:t},r,n){if(!isNaN(t)&&!isNaN(r)&&!isNaN(n)){const s=1*t;r=Number(r),n=Number(n);const[i,o]=r<=n?[r,n]:[n,r];return s>=1*i&&s<=1*o}return!1},d$=p$,lc=/(_confirm(?:ed)?)$/,h$=function(t,r,n="loose"){var i;r||(r=lc.test(t.name)?t.name.replace(lc,""):`${t.name}_confirm`);const s=(i=t.at(r))==null?void 0:i.value;return n==="strict"?t.value===s:t.value==s},m$=h$,g$=function({value:e},t="default"){const r={default:new RegExp("\\p{L}","u"),latin:/[a-z]/i},n=re(r,t)?t:"default";return r[n].test(String(e))},y$=g$,_$=function({value:e},t="default"){const r={default:/[\p{L} ]/u,latin:/[a-z ]/i},n=re(r,t)?t:"default";return r[n].test(String(e))},v$=_$,b$=function({value:e},t="default"){const r={default:/[0-9\p{L}]/u,latin:/[0-9a-z]/i},n=re(r,t)?t:"default";return r[n].test(String(e))},w$=b$,$$=function({value:e},t="default"){const r={default:new RegExp("\\p{Ll}","u"),latin:/[a-z]/},n=re(r,t)?t:"default";return r[n].test(String(e))},E$=$$,R$=function({value:t}){return/[0-9]/.test(String(t))},P$=R$,C$=function({value:e}){return/[!-/:-@[-`{-~]/.test(String(e))},S$=C$,k$=function({value:e},t="default"){const r={default:new RegExp("\\p{Lu}","u"),latin:/[A-Z]/},n=re(r,t)?t:"default";return r[n].test(String(e))},A$=k$,T$=function({value:t},r,n){r=r instanceof Date?r.getTime():Date.parse(r),n=n instanceof Date?n.getTime():Date.parse(n);const s=t instanceof Date?t.getTime():Date.parse(String(t));if(r&&!n)n=r,r=Date.now();else if(!r||!s)return!1;return s>=r&&s<=n},x$=T$,O$=function({value:t},r){return r&&typeof r=="string"?x0(r).test(String(t)):!isNaN(Date.parse(String(t)))},L$=O$,I$=function({value:t}){return/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i.test(String(t))},M$=I$,D$=function({value:t},...r){return typeof t=="string"&&r.length?r.some(n=>t.endsWith(n)):typeof t=="string"&&r.length===0},N$=D$,H$=function({value:t},...r){return r.some(n=>typeof n=="object"?Fe(n,t):n==t)},j$=H$,F$=function({value:t},r=0,n=1/0){r=parseInt(r),n=isNaN(parseInt(n))?1/0:parseInt(n);const s=r<=n?r:n,i=n>=r?n:r;if(typeof t=="string"||Array.isArray(t))return t.length>=s&&t.length<=i;if(t&&typeof t=="object"){const o=Object.keys(t).length;return o>=s&&o<=i}return!1},V$=F$,B$=function({value:e},t="default"){const r={default:new RegExp("^\\p{Ll}+$","u"),allow_non_alpha:/^[0-9\p{Ll}!-/:-@[-`{-~]+$/u,allow_numeric:/^[0-9\p{Ll}]+$/u,allow_numeric_dashes:/^[0-9\p{Ll}-]+$/u,latin:/^[a-z]+$/},n=re(r,t)?t:"default";return r[n].test(String(e))},U$=B$,K$=function({value:t},...r){return r.some(n=>(typeof n=="string"&&n.substr(0,1)==="/"&&n.substr(-1)==="/"&&(n=new RegExp(n.substr(1,n.length-2))),n instanceof RegExp?n.test(String(t)):n===t))},z$=K$,W$=function({value:t},r=10){return Array.isArray(t)?t.length<=r:Number(t)<=Number(r)},q$=W$,G$=function({value:t},r=1){return Array.isArray(t)?t.length>=r:Number(t)>=Number(r)},J$=G$,Q$=function({value:t},...r){return!r.some(n=>typeof n=="object"?Fe(n,t):n===t)},Y$=Q$,X$=function({value:t}){return!isNaN(t)},Z$=X$,Ep=function(e,...t){return st(e.value)?t.map(n=>{var s;return(s=e.at(n))==null?void 0:s.value}).some(n=>!st(n)):!0};Ep.skipEmpty=!1;var eE=Ep,Rp=function({value:t},r="default"){return r==="trim"&&typeof t=="string"?!st(t.trim()):!st(t)};Rp.skipEmpty=!1;var tE=Rp,rE=function({value:t},...r){return typeof t=="string"&&r.length?r.some(n=>t.startsWith(n)):typeof t=="string"&&r.length===0},nE=rE,sE=function({value:e}){return/^[!-/:-@[-`{-~]+$/.test(String(e))},iE=sE,oE=function({value:e},t="default"){const r={default:new RegExp("^\\p{Lu}+$","u"),latin:/^[A-Z]+$/},n=re(r,t)?t:"default";return r[n].test(String(e))},aE=oE,lE=function({value:t},...r){try{const n=r.length?r:["http:","https:"],s=new URL(String(t));return n.includes(s.protocol)}catch{return!1}},cE=lE;const uE=Object.freeze(Object.defineProperty({__proto__:null,accepted:t$,alpha:i$,alpha_spaces:a$,alphanumeric:c$,between:d$,confirm:m$,contains_alpha:y$,contains_alpha_spaces:v$,contains_alphanumeric:w$,contains_lowercase:E$,contains_numeric:P$,contains_symbol:S$,contains_uppercase:A$,date_after:n$,date_before:f$,date_between:x$,date_format:L$,email:M$,ends_with:N$,is:j$,length:V$,lowercase:U$,matches:z$,max:q$,min:J$,not:Y$,number:Z$,require_one:eE,required:tE,starts_with:nE,symbol:iE,uppercase:aE,url:cE},Symbol.toStringTag,{value:"Module"}));var Ao=mt({type:"state",blocking:!0,visible:!1,value:!0,key:"validating"});function fE(e={}){return function(r){let n=ut(r.props.validationRules||{}),s={...e,...n},i=Hn(r);const o={input:cn(),rerun:null,isPassing:!0};let a=ut(r.props.validation);r.on("prop:validation",({payload:c})=>l(c,n)),r.on("prop:validationRules",({payload:c})=>l(a,c));function l(c,u){var f;Fe(Object.keys(n||{}),Object.keys(u||{}))&&Fe(a,c)||(n=ut(u),a=ut(c),s={...e,...n},_p(i.receipts),(f=r.props.parsedRules)==null||f.forEach(p=>{var d;p.messageObserver=(d=p.messageObserver)==null?void 0:d.kill()}),r.store.filter(()=>!1,"validation"),r.props.parsedRules=uc(c,s),i.kill(),i=Hn(r),To(i,r.props.parsedRules,o))}r.props.parsedRules=uc(a,s),To(i,r.props.parsedRules,o)}}function To(e,t,r){wp(e)||(r.input=cn(),r.isPassing=!0,e.store.filter(n=>!n.meta.removeImmediately,"validation"),t.forEach(n=>n.debounce&&clearTimeout(n.timer)),t.length&&(e.store.set(Ao),xo(0,t,e,r,!1,()=>{e.store.remove(Ao.key)})))}function xo(e,t,r,n,s,i){const o=t[e];if(!o)return i();const a=n.input;o.state=null;function l(c,u){n.isPassing=n.isPassing&&!!u,o.queued=!1;const f=r.stopObserve();yp(r,bp(o.deps,f),function(){try{r.store.set(Ao)}catch{}o.queued=!0,n.rerun&&clearTimeout(n.rerun),n.rerun=setTimeout(To,0,r,t,n)},"unshift"),o.deps=f,n.input===a&&(o.state=u,u===!1?hE(r,o,s||c):dE(r,o),t.length>e+1?xo(e+1,t,r,n,s||c,i):i())}(!st(r.value)||!o.skipEmpty)&&(n.isPassing||o.force)?o.queued?pE(o,r,c=>{c instanceof Promise?c.then(u=>l(!0,u)):l(!1,c)}):xo(e+1,t,r,n,s,i):st(r.value)&&o.skipEmpty&&n.isPassing?(r.observe(),r.value,l(!1,n.isPassing)):l(!1,null)}function pE(e,t,r){e.debounce?e.timer=setTimeout(()=>{t.observe(),r(e.rule(t,...e.args))},e.debounce):(t.observe(),r(e.rule(t,...e.args)))}function dE(e,t){const r=`rule_${t.name}`;t.messageObserver&&(t.messageObserver=t.messageObserver.kill()),re(e.store,r)&&e.store.remove(r)}function hE(e,t,r){wp(e)||(t.messageObserver||(t.messageObserver=Hn(e._node)),t.messageObserver.watch(n=>gE(n,t),n=>{const s=mE(e,t,n),i=mt({blocking:t.blocking,key:`rule_${t.name}`,meta:{messageKey:t.name,removeImmediately:r,localize:!s,i18nArgs:n},type:"validation",value:s||"This field is not valid."});e.store.set(i)}))}function mE(e,t,r){const n=e.props.validationMessages&&re(e.props.validationMessages,t.name)?e.props.validationMessages[t.name]:void 0;return typeof n=="function"?n(...r):n}function gE(e,t){return[{node:e,name:Pp(e),args:t.args}]}function Pp(e){return typeof e.props.validationLabel=="function"?e.props.validationLabel(e):e.props.validationLabel||e.props.label||e.props.name||String(e.name)}var Cp="(?:[\\*+?()0-9]+)",Sp="[a-zA-Z][a-zA-Z0-9_]+",yE=new RegExp(`^(${Cp}?${Sp})(?:\\:(.*)+)?$`,"i"),_E=new RegExp(`^(${Cp})(${Sp})$`,"i"),vE=/([\*+?]+)?(\(\d+\))([\*+?]+)?/,cc=/\(\d+\)/,bE={blocking:!0,debounce:0,force:!1,skipEmpty:!0,name:""};function uc(e,t){return e?(typeof e=="string"?wE(e):nn(e)).reduce((n,s)=>{let i=s.shift();const o={};if(typeof i=="string"){const[a,l]=EE(i);re(t,a)&&(i=t[a],Object.assign(o,l))}return typeof i=="function"&&n.push({rule:i,args:s,timer:0,state:null,queued:!0,deps:new Map,...bE,...RE(o,i)}),n},[]):[]}function wE(e){return e.split("|").reduce((t,r)=>{const n=$E(r);return n&&t.push(n),t},[])}function $E(e){const t=e.trim();if(t){const r=t.match(yE);if(r&&typeof r[1]=="string"){const n=r[1].trim(),s=r[2]&&typeof r[2]=="string"?r[2].split(",").map(i=>i.trim()):[];return[n,...s]}}return!1}function EE(e){const t=e.match(_E);if(!t)return[e,{name:e}];const r={"*":{force:!0},"+":{skipEmpty:!1},"?":{blocking:!1}},[,n,s]=t,i=cc.test(n)?n.match(vE)||[]:[,n];return[s,[i[1],i[2],i[3]].reduce((o,a)=>(a&&(cc.test(a)?o.debounce=parseInt(a.substr(1,a.length-1)):a.split("").forEach(l=>re(r,l)&&Object.assign(o,r[l]))),o),{name:s})]}function RE(e,t){return e.name||(e.name=t.ruleName||t.name),["skipEmpty","force","debounce","blocking"].reduce((r,n)=>(re(t,n)&&!re(r,n)&&Object.assign(r,{[n]:t[n]}),r),e)}function le(e){return e[0].toUpperCase()+e.substr(1)}function fc(e,t="or"){return e.reduce((r,n,s)=>(r+=n,s<=e.length-2&&e.length>2&&(r+=", "),s===e.length-2&&(r+=`${e.length===2?" ":""}${t} `),r),"")}function ls(e){const t=typeof e=="string"?new Date(Date.parse(e)):e;return t instanceof Date?new Intl.DateTimeFormat(void 0,{dateStyle:"medium",timeZone:"UTC"}).format(t):"(unknown)"}function PE(e,t){return Number(e)>=Number(t)?[t,e]:[e,t]}var CE={add:"Add",remove:"Remove",removeAll:"Remove all",incomplete:"Sorry, not all fields are filled out correctly.",submit:"Submit",noFiles:"No file chosen",moveUp:"Move up",moveDown:"Move down",isLoading:"Loading...",loadMore:"Load more",next:"Next",prev:"Previous",addAllValues:"Add all values",addSelectedValues:"Add selected values",removeAllValues:"Remove all values",removeSelectedValues:"Remove selected values",chooseDate:"Choose date",changeDate:"Change date",summaryHeader:"There were errors in your form.",close:"Close",open:"Open"},SE={accepted({name:e}){return`Please accept the ${e}.`},date_after({name:e,args:t}){return Array.isArray(t)&&t.length?`${le(e)} must be after ${ls(t[0])}.`:`${le(e)} must be in the future.`},alpha({name:e}){return`${le(e)} can only contain alphabetical characters.`},alphanumeric({name:e}){return`${le(e)} can only contain letters and numbers.`},alpha_spaces({name:e}){return`${le(e)} can only contain letters and spaces.`},contains_alpha({name:e}){return`${le(e)} must contain alphabetical characters.`},contains_alphanumeric({name:e}){return`${le(e)} must contain letters or numbers.`},contains_alpha_spaces({name:e}){return`${le(e)} must contain letters or spaces.`},contains_symbol({name:e}){return`${le(e)} must contain a symbol.`},contains_uppercase({name:e}){return`${le(e)} must contain an uppercase letter.`},contains_lowercase({name:e}){return`${le(e)} must contain a lowercase letter.`},contains_numeric({name:e}){return`${le(e)} must contain numbers.`},symbol({name:e}){return`${le(e)} must be a symbol.`},uppercase({name:e}){return`${le(e)} can only contain uppercase letters.`},lowercase({name:e,args:t}){let r="";return Array.isArray(t)&&t.length&&(t[0]==="allow_non_alpha"&&(r=", numbers and symbols"),t[0]==="allow_numeric"&&(r=" and numbers"),t[0]==="allow_numeric_dashes"&&(r=", numbers and dashes")),`${le(e)} can only contain lowercase letters${r}.`},date_before({name:e,args:t}){return Array.isArray(t)&&t.length?`${le(e)} must be before ${ls(t[0])}.`:`${le(e)} must be in the past.`},between({name:e,args:t}){if(isNaN(t[0])||isNaN(t[1]))return"This field was configured incorrectly and can’t be submitted.";const[r,n]=PE(t[0],t[1]);return`${le(e)} must be between ${r} and ${n}.`},confirm({name:e}){return`${le(e)} does not match.`},date_format({name:e,args:t}){return Array.isArray(t)&&t.length?`${le(e)} is not a valid date, please use the format ${t[0]}`:"This field was configured incorrectly and can’t be submitted"},date_between({name:e,args:t}){return`${le(e)} must be between ${ls(t[0])} and ${ls(t[1])}`},email:"Please enter a valid email address.",ends_with({name:e,args:t}){return`${le(e)} doesn’t end with ${fc(t)}.`},is({name:e}){return`${le(e)} is not an allowed value.`},length({name:e,args:[t=0,r=1/0]}){const n=Number(t)<=Number(r)?t:r,s=Number(r)>=Number(t)?r:t;return n==1&&s===1/0?`${le(e)} must be at least one character.`:n==0&&s?`${le(e)} must be less than or equal to ${s} characters.`:n===s?`${le(e)} should be ${s} characters long.`:n&&s===1/0?`${le(e)} must be greater than or equal to ${n} characters.`:`${le(e)} must be between ${n} and ${s} characters.`},matches({name:e}){return`${le(e)} is not an allowed value.`},max({name:e,node:{value:t},args:r}){return Array.isArray(t)?`Cannot have more than ${r[0]} ${e}.`:`${le(e)} must be no more than ${r[0]}.`},mime({name:e,args:t}){return t[0]?`${le(e)} must be of the type: ${t[0]}`:"No file formats allowed."},min({name:e,node:{value:t},args:r}){return Array.isArray(t)?`Cannot have fewer than ${r[0]} ${e}.`:`${le(e)} must be at least ${r[0]}.`},not({name:e,node:{value:t}}){return`“${t}” is not an allowed ${e}.`},number({name:e}){return`${le(e)} must be a number.`},require_one:({name:e,node:t,args:r})=>{const n=r.map(s=>{const i=t.at(s);return i?Pp(i):!1}).filter(s=>!!s);return n.unshift(e),`${n.join(" or ")} is required.`},required({name:e}){return`${le(e)} is required.`},starts_with({name:e,args:t}){return`${le(e)} doesn’t start with ${fc(t)}.`},url(){return"Please enter a valid URL."},invalidDate:"The selected date is invalid."},kE={ui:CE,validation:SE},pc=new Set;function AE(e){return function(r){pc.add(r),r.on("destroying",()=>pc.delete(r));let n=dc(r.config.locale,e),s=n?e[n]:{};r.on("prop:locale",({payload:i})=>{n=dc(i,e),s=n?e[n]:{},r.store.touch()}),r.on("prop:label",()=>r.store.touch()),r.on("prop:validationLabel",()=>r.store.touch()),r.hook.text((i,o)=>{var l,c;const a=((l=i.meta)==null?void 0:l.messageKey)||i.key;if(re(s,i.type)&&re(s[i.type],a)){const u=s[i.type][a];typeof u=="function"?i.value=Array.isArray((c=i.meta)==null?void 0:c.i18nArgs)?u(...i.meta.i18nArgs):u(i):i.value=u}return o(i)})}}function dc(e,t){if(re(t,e))return e;const[r]=e.split("-");if(re(t,r))return r;for(const n in t)return n;return!1}function TE(...e){const t=e.reduce((n,s)=>Zt(n,s),{}),r=()=>{};return r.library=function(n){const s=Wr(n.props.type);re(t,s)&&n.define(t[s])},r}var xE=["classes","config","delay","errors","id","index","inputErrors","library","modelValue","onUpdate:modelValue","name","number","parent","plugins","sectionsSchema","type","validation","validationLabel","validationMessages","validationRules","onInput","onInputRaw","onUpdate:modelValue","onNode","onSubmit","onSubmitInvalid","onSubmitRaw"];function ui(e){return e&&typeof e=="object"&&"group"in e&&Array.isArray(e.options)}function kp(e,t={count:1}){return Array.isArray(e)?e.map(r=>{if(typeof r=="string"||typeof r=="number")return{label:String(r),value:String(r)};if(typeof r=="object"){if("group"in r)return r.options=kp(r.options||[],t),r;"value"in r&&typeof r.value!="string"&&Object.assign(r,{value:`__mask_${t.count++}`,__original:r.value})}return r}):Object.keys(e).map(r=>({label:e[r],value:r}))}function Er(e,t,r=!1){if(Array.isArray(e)){for(const n of e)if(!(typeof n!="object"&&n)){if(ui(n)){const s=Er(n.options,t,!0);if(s!==void 0)return s}else if(t==n.value)return"__original"in n?n.__original:n.value}}return r?void 0:t}function on(e,t){return e===null&&t===void 0||e===void 0&&t===null?!1:e==t?!0:rn(e)&&rn(t)?Fe(e,t):!1}function Ea(e){e.hook.prop((t,r)=>{var n;return t.prop==="options"&&(typeof t.value=="function"?(e.props.optionsLoader=t.value,t.value=[]):((n=e.props)._normalizeCounter??(n._normalizeCounter={count:1}),t.value=kp(t.value,e.props._normalizeCounter))),r(t)})}function te(e,t,r=!1){return(...n)=>{const s=i=>{const o=!t||typeof t=="string"?{$el:t}:t();return(So(o)||ko(o))&&(o.meta||(o.meta={section:e}),n.length&&!o.children&&(o.children=[...n.map(a=>typeof a=="function"?a(i):a)]),So(o)&&(o.attrs={class:`$classes.${e}`,...o.attrs||{}})),{if:`$slots.${e}`,then:`$slots.${e}`,else:e in i?_n(o,i[e]):o}};return s._s=e,r?OE(s):s}}function OE(e){return t=>[e(t)]}function Fs(e){return!!(e&&typeof e=="object"&&("$el"in e||"$cmp"in e||"$formkit"in e))}function _n(e,t={}){return typeof e=="string"?Fs(t)||typeof t=="string"?t:e:Array.isArray(e)?Fs(t)?t:e:Zt(e,t)}var LE=te("actions",()=>({$el:"div",if:"$actions"})),Vs=te("input",()=>({$el:"input",bind:"$attrs",attrs:{type:"$type",name:"$node.props.altName || $node.name",disabled:"$option.attrs.disabled || $disabled",onInput:"$handlers.toggleChecked",checked:"$fns.eq($_value, $onValue)",onBlur:"$handlers.blur",value:"$: true",id:"$id","aria-describedby":{if:"$options.length",then:{if:"$option.help",then:'$: "help-" + $option.attrs.id',else:void 0},else:{if:"$help",then:'$: "help-" + $id',else:void 0}}}})),Ap=te("optionHelp",()=>({$el:"div",if:"$option.help",attrs:{id:'$: "help-" + $option.attrs.id'}})),Bs=te("inner","span"),Us=te("label","span"),Tp=te("option",()=>({$el:"li",for:["option","$options"],attrs:{"data-disabled":"$option.attrs.disabled || $disabled || undefined"}})),xp=te("options","ul"),Ks=te("wrapper",()=>({$el:"label",attrs:{"data-disabled":{if:"$options.length",then:void 0,else:"$disabled || undefined"},"data-checked":{if:"$options == undefined",then:"$fns.eq($_value, $onValue) || undefined",else:"$fns.isChecked($option.value) || undefined"}}})),IE=te("input",()=>({$el:"button",bind:"$attrs",attrs:{type:"$type",disabled:"$disabled",name:"$node.name",id:"$id"}})),ME=te("default",null),zs=te("decorator",()=>({$el:"span",attrs:{"aria-hidden":"true"}})),Op=te("fieldset",()=>({$el:"fieldset",attrs:{id:"$id","aria-describedby":{if:"$help",then:'$: "help-" + $id',else:void 0}}})),DE=te("input",()=>({$el:"input",bind:"$attrs",attrs:{type:"file",disabled:"$disabled",name:"$node.name",onChange:"$handlers.files",onBlur:"$handlers.blur",id:"$id","aria-describedby":"$describedBy","aria-required":"$state.required || undefined"}})),NE=te("fileItem",()=>({$el:"li",for:["file","$value"]})),HE=te("fileList",()=>({$el:"ul",if:"$value.length",attrs:{"data-has-multiple":"$_hasMultipleFiles"}})),jE=te("fileName",()=>({$el:"span",attrs:{class:"$classes.fileName"}})),hc=te("fileRemove",()=>({$el:"button",attrs:{type:"button",onClick:"$handlers.resetFiles"}})),FE=te("form",()=>({$el:"form",bind:"$attrs",attrs:{id:"$id",name:"$node.name",onSubmit:"$handlers.submit","data-loading":"$state.loading || undefined"}})),Ra=te("wrapper",null,!0),Lt=te("help",()=>({$el:"div",if:"$help",attrs:{id:'$: "help-" + $id'}})),xe=(e,t)=>te(`${e}Icon`,()=>{const r=`_raw${e.charAt(0).toUpperCase()}${e.slice(1)}Icon`;return{if:`$${e}Icon && $${r}`,$el:`${t||"span"}`,attrs:{class:`$classes.${e}Icon + " " + $classes.icon`,innerHTML:`$${r}`,onClick:`$handlers.iconClick(${e})`,role:`$fns.iconRole(${e})`,tabindex:`$fns.iconRole(${e}) === "button" && "0" || undefined`,for:{if:`${t==="label"}`,then:"$id"}}}})(),fi=te("inner","div"),pi=te("label",()=>({$el:"label",if:"$label",attrs:{for:"$id"}})),Lp=te("legend",()=>({$el:"legend",if:"$label"})),sr=te("message",()=>({$el:"li",for:["message","$messages"],attrs:{key:"$message.key",id:"$id + '-' + $message.key","data-message-type":"$message.type"}})),ir=te("messages",()=>({$el:"ul",if:"$defaultMessagePlacement && $fns.length($messages)"})),VE=te("noFiles",()=>({$el:"span",if:"$value.length == 0"})),BE=te("optGroup",()=>({$el:"optgroup",bind:"$option.attrs",attrs:{label:"$option.group"}})),mc=te("option",()=>({$el:"option",bind:"$option.attrs",attrs:{class:"$classes.option",value:"$option.value",selected:"$fns.isSelected($option)"}})),gc=te("options",()=>({$el:null,if:"$options.length",for:["option","$option.options || $options"]})),Sr=te("outer",()=>({$el:"div",attrs:{key:"$id","data-family":"$family || undefined","data-type":"$type","data-multiple":'$attrs.multiple || ($type != "select" && $options != undefined) || undefined',"data-has-multiple":"$_hasMultipleFiles","data-disabled":'$: ($disabled !== "false" && $disabled) || undefined',"data-empty":"$state.empty || undefined","data-complete":"$state.complete || undefined","data-invalid":"$state.valid === false && $state.validationVisible || undefined","data-errors":"$state.errors || undefined","data-submitted":"$state.submitted || undefined","data-prefix-icon":"$_rawPrefixIcon !== undefined || undefined","data-suffix-icon":"$_rawSuffixIcon !== undefined || undefined","data-prefix-icon-click":"$onPrefixIconClick !== undefined || undefined","data-suffix-icon-click":"$onSuffixIconClick !== undefined || undefined"}})),It=te("prefix",null),UE=te("input",()=>({$el:"select",bind:"$attrs",attrs:{id:"$id","data-placeholder":"$fns.showPlaceholder($_value, $placeholder)",disabled:"$disabled",class:"$classes.input",name:"$node.name",onChange:"$handlers.onChange",onInput:"$handlers.selectInput",onBlur:"$handlers.blur","aria-describedby":"$describedBy","aria-required":"$state.required || undefined"}})),KE=te("submit",()=>({$cmp:"FormKit",bind:"$submitAttrs",props:{type:"submit",label:"$submitLabel"}})),Mt=te("suffix",null),Ip=te("input",()=>({$el:"input",bind:"$attrs",attrs:{type:"$type",disabled:"$disabled",name:"$node.name",onInput:"$handlers.DOMInput",onBlur:"$handlers.blur",value:"$_value",id:"$id","aria-describedby":"$describedBy","aria-required":"$state.required || undefined"}})),zE=te("input",()=>({$el:"textarea",bind:"$attrs",attrs:{disabled:"$disabled",name:"$node.name",onInput:"$handlers.DOMInput",onBlur:"$handlers.blur",value:"$_value",id:"$id","aria-describedby":"$describedBy","aria-required":"$state.required || undefined"},children:"$initialValue"})),qn=te("wrapper","div");function Mp(e){return function(t,r){return t.prop==="options"&&Array.isArray(t.value)&&(t.value=t.value.map(n=>{var s;return(s=n.attrs)!=null&&s.id?n:Zt(n,{attrs:{id:`${e.props.id}-option-${ma(String(n.value))}`}})}),e.props.type==="checkbox"&&!Array.isArray(e.value)&&(e.isCreated?e.input([],!1):e.on("created",()=>{Array.isArray(e.value)||e.input([],!1)}))),r(t)}}function WE(e,t){const r=t.target;if(r instanceof HTMLInputElement){const n=Array.isArray(e.props.options)?Er(e.props.options,r.value):r.value;Array.isArray(e.props.options)&&e.props.options.length?Array.isArray(e._value)?e._value.some(s=>on(n,s))?e.input(e._value.filter(s=>!on(n,s))):e.input([...e._value,n]):e.input([n]):r.checked?e.input(e.props.onValue):e.input(e.props.offValue)}}function qE(e,t){var r,n;return(r=e.context)==null||r.value,(n=e.context)==null||n._value,Array.isArray(e._value)?e._value.some(s=>on(Er(e.props.options,t),s)):!1}function GE(e){e.on("created",()=>{var t,r;(t=e.context)!=null&&t.handlers&&(e.context.handlers.toggleChecked=WE.bind(null,e)),(r=e.context)!=null&&r.fns&&(e.context.fns.isChecked=qE.bind(null,e)),re(e.props,"onValue")||(e.props.onValue=!0),re(e.props,"offValue")||(e.props.offValue=!1)}),e.hook.prop(Mp(e))}function qr(e,t){return r=>{r.props[`${e}Icon`]===void 0&&(r.props[`${e}Icon`]=t.startsWith("<svg")?t:`default:${t}`)}}function Pa(e){e.on("created",()=>{"disabled"in e.props&&(e.props.disabled=ft(e.props.disabled),e.config.disabled=ft(e.props.disabled))}),e.hook.prop(({prop:t,value:r},n)=>(r=t==="disabled"?ft(r):r,n({prop:t,value:r}))),e.on("prop:disabled",({payload:t})=>{e.config.disabled=ft(t)})}function vs(e,t){return r=>{r.store.set(mt({key:e,type:"ui",value:t||e,meta:{localize:!0,i18nArgs:[r]}}))}}var Mi=typeof window<"u";function Dp(e){e.target instanceof HTMLElement&&e.target.hasAttribute("data-file-hover")&&e.target.removeAttribute("data-file-hover")}function yc(e,t){t.target instanceof HTMLInputElement?e==="dragover"&&t.target.setAttribute("data-file-hover","true"):t.preventDefault(),e==="drop"&&Dp(t)}function JE(e){vs("noFiles","Select file")(e),vs("removeAll","Remove all")(e),vs("remove")(e),e.addProps(["_hasMultipleFiles"]),Mi&&(window._FormKit_File_Drop||(window.addEventListener("dragover",yc.bind(null,"dragover")),window.addEventListener("drop",yc.bind(null,"drop")),window.addEventListener("dragleave",Dp),window._FormKit_File_Drop=!0)),e.hook.input((t,r)=>r(Array.isArray(t)?t:[])),e.on("input",({payload:t})=>{e.props._hasMultipleFiles=Array.isArray(t)&&t.length>1?!0:void 0}),e.on("reset",()=>{if(e.props.id&&Mi){const t=document.getElementById(e.props.id);t&&(t.value="")}}),e.on("created",()=>{Array.isArray(e.value)||e.input([],!1),e.context&&(e.context.handlers.resetFiles=t=>{if(t.preventDefault(),e.input([]),e.props.id&&Mi){const r=document.getElementById(e.props.id);r&&(r.value=""),r==null||r.focus()}},e.context.handlers.files=t=>{var n,s;const r=[];if(t.target instanceof HTMLInputElement&&t.target.files){for(let i=0;i<t.target.files.length;i++){let o;(o=t.target.files.item(i))&&r.push({name:o.name,file:o})}e.input(r)}e.context&&(e.context.files=r),typeof((n=e.props.attrs)==null?void 0:n.onChange)=="function"&&((s=e.props.attrs)==null||s.onChange(t))})})}var _c=mt({key:"loading",value:!0,visible:!1});async function QE(e,t){const r=Math.random();if(e.props._submitNonce=r,t.preventDefault(),await e.settled,e.ledger.value("validating")&&(e.store.set(_c),await e.ledger.settled("validating"),e.store.remove("loading"),e.props._submitNonce!==r))return;const n=s=>s.store.set(mt({key:"submitted",value:!0,visible:!1}));if(e.walk(n),n(e),e.emit("submit-raw"),typeof e.props.onSubmitRaw=="function"&&e.props.onSubmitRaw(t,e),e.ledger.value("blocking"))typeof e.props.onSubmitInvalid=="function"&&e.props.onSubmitInvalid(e),e.props.incompleteMessage!==!1&&Np(e);else if(typeof e.props.onSubmit=="function"){const s=e.props.onSubmit(e.hook.submit.dispatch(nn(e.value)),e);if(s instanceof Promise){const i=e.props.disabled===void 0&&e.props.submitBehavior!=="live";i&&(e.props.disabled=!0),e.store.set(_c),await s,i&&(e.props.disabled=!1),e.store.remove("loading")}}else t.target instanceof HTMLFormElement&&t.target.submit()}function Np(e){e.store.set(mt({blocking:!1,key:"incomplete",meta:{localize:e.props.incompleteMessage===void 0,i18nArgs:[{node:e}],showAsMessage:!0},type:"ui",value:e.props.incompleteMessage||"Form incomplete."}))}function YE(e){var t;e.props.isForm=!0,e.ledger.count("validating",r=>r.key==="validating"),(t=e.props).submitAttrs??(t.submitAttrs={disabled:e.props.disabled}),e.on("prop:disabled",({payload:r})=>{e.props.submitAttrs={...e.props.submitAttrs,disabled:r}}),e.on("created",()=>{var r;(r=e.context)!=null&&r.handlers&&(e.context.handlers.submit=QE.bind(null,e)),re(e.props,"actions")||(e.props.actions=!0)}),e.on("prop:incompleteMessage",()=>{e.store.incomplete&&Np(e)}),e.on("settled:blocking",()=>e.store.remove("incomplete"))}function XE(e){e.props.ignore===void 0&&(e.props.ignore=!0,e.parent=null)}function ZE(e){e.on("created",()=>{e.context&&(e.context.initialValue=e.value||"")})}function Hp(e){if(typeof e.props.number>"u")return;const t=["number","range","hidden"].includes(e.props.type);e.hook.input((r,n)=>{if(r==="")return n(void 0);const s=e.props.number==="integer"?parseInt(r):parseFloat(r);return Number.isFinite(s)?n(s):n(t?void 0:r)})}function eR(e,t){t.target instanceof HTMLInputElement&&e.input(Er(e.props.options,t.target.value))}function tR(e,t){var r,n;return(r=e.context)==null||r.value,(n=e.context)==null||n._value,on(Er(e.props.options,t),e._value)}function rR(e){e.on("created",()=>{var t,r;Array.isArray(e.props.options)||Cr(350,{node:e,inputType:"radio"}),(t=e.context)!=null&&t.handlers&&(e.context.handlers.toggleChecked=eR.bind(null,e)),(r=e.context)!=null&&r.fns&&(e.context.fns.isChecked=tR.bind(null,e))}),e.hook.prop(Mp(e))}var nR=0;function jp(e){(e.type==="group"||e.type==="list")&&e.plugins.add(sR)}function sR(e){e.props.type==="radio"&&(e.addProps(["altName"]),e.props.altName=`${e.name}_${nR++}`)}function iR(e,t){if(ui(t))return!1;e.context&&e.context.value;const r="__original"in t?t.__original:t.value;return Array.isArray(e._value)?e._value.some(n=>on(n,r)):(e._value===void 0||e._value===null&&!Fp(e.props.options,null))&&t.attrs&&t.attrs["data-is-placeholder"]?!0:on(r,e._value)}function Fp(e,t){return e.some(r=>ui(r)?Fp(r.options,t):("__original"in r?r.__original:r.value)===t)}async function oR(e,t){var r;typeof((r=e.props.attrs)==null?void 0:r.onChange)=="function"&&(await new Promise(n=>setTimeout(n,0)),await e.settled,e.props.attrs.onChange(t))}function aR(e,t){const r=t.target,n=r.hasAttribute("multiple")?Array.from(r.selectedOptions).map(s=>Er(e.props.options,s.value)):Er(e.props.options,r.value);e.input(n)}function vc(e,t){return e.some(r=>r.attrs&&r.attrs["data-is-placeholder"])?e:[{label:t,value:"",attrs:{hidden:!0,disabled:!0,"data-is-placeholder":"true"}},...e]}function Vp(e){const t=e.length>0?e[0]:void 0;if(t)return ui(t)?Vp(t.options):"__original"in t?t.__original:t.value}function lR(e){e.on("created",()=>{var r,n,s;const t=ft((r=e.props.attrs)==null?void 0:r.multiple);!t&&e.props.placeholder&&Array.isArray(e.props.options)&&(e.hook.prop(({prop:i,value:o},a)=>(i==="options"&&(o=vc(o,e.props.placeholder)),a({prop:i,value:o}))),e.props.options=vc(e.props.options,e.props.placeholder)),t?e.value===void 0&&e.input([],!1):e.context&&!e.context.options&&(e.props.attrs=Object.assign({},e.props.attrs,{value:e._value}),e.on("input",({payload:i})=>{e.props.attrs=Object.assign({},e.props.attrs,{value:i})})),(n=e.context)!=null&&n.handlers&&(e.context.handlers.selectInput=aR.bind(null,e),e.context.handlers.onChange=oR.bind(null,e)),(s=e.context)!=null&&s.fns&&(e.context.fns.isSelected=iR.bind(null,e),e.context.fns.showPlaceholder=(i,o)=>{if(!Array.isArray(e.props.options))return!1;const a=e.props.options.some(l=>{if(l.attrs&&"data-is-placeholder"in l.attrs)return!1;const c="__original"in l?l.__original:l.value;return Fe(i,c)});return o&&!a?!0:void 0})}),e.hook.input((t,r)=>{var n,s,i;return!e.props.placeholder&&t===void 0&&Array.isArray((n=e.props)==null?void 0:n.options)&&e.props.options.length&&!ft((i=(s=e.props)==null?void 0:s.attrs)==null?void 0:i.multiple)&&(t=Vp(e.props.options)),r(t)})}function Oo(e){return!!(Mr(e)&&e.if&&e.if.startsWith("$slots.")&&typeof e.then=="string"&&e.then.startsWith("$slots.")&&"else"in e)}function At(e,t,r){const n=s=>{const i=t(s);if(r||Fs(i)&&"if"in i||Oo(i)){const o={if:e,then:i};return r&&(o.else=r(s)),o}else Oo(i)?Object.assign(i.else,{if:e}):Fs(i)&&Object.assign(i,{if:e});return i};return n._s=cn(),n}function Gr(e,t){const r=n=>{const s=e({});return Oo(s)?(Array.isArray(s.else)||(s.else=_n(_n(s.else,t),e._s?n[e._s]:{})),s):_n(_n(s,t),e._s?n[e._s]:{})};return r._s=e._s,r}var bc={schema:Sr(ir(sr("$message.value")),qn(IE(xe("prefix"),It(),ME("$label || $ui.submit.value"),Mt(),xe("suffix"))),Lt("$help")),type:"input",family:"button",props:[],features:[vs("submit"),XE],schemaMemoKey:"h6st4epl3j8"},cR={schema:Sr(At("$options == undefined",Ks(Bs(It(),Vs(),zs(xe("decorator")),Mt()),Gr(Us("$label"),{if:"$label"})),Op(Lp("$label"),Lt("$help"),xp(Tp(Ks(Bs(It(),Gr(Vs(),{bind:"$option.attrs",attrs:{id:"$option.attrs.id",value:"$option.value",checked:"$fns.isChecked($option.value)"}}),zs(xe("decorator")),Mt()),Gr(Us("$option.label"),{if:"$option.label"})),Ap("$option.help"))))),At("$options == undefined && $help",Lt("$help")),ir(sr("$message.value"))),type:"input",family:"box",props:["options","onValue","offValue","optionsLoader"],features:[Ea,GE,qr("decorator","checkboxDecorator")],schemaMemoKey:"qje02tb3gu8"},uR={schema:Sr(qn(pi("$label"),fi(xe("prefix","label"),It(),DE(),HE(NE(xe("fileItem"),jE("$file.name"),At("$value.length === 1",hc(xe("fileRemove"),'$ui.remove.value + " " + $file.name')))),At("$value.length > 1",hc("$ui.removeAll.value")),VE(xe("noFiles"),"$ui.noFiles.value"),Mt(),xe("suffix"))),Lt("$help"),ir(sr("$message.value"))),type:"input",family:"text",props:[],features:[JE,qr("fileItem","fileItem"),qr("fileRemove","fileRemove"),qr("noFiles","noFiles")],schemaMemoKey:"9kqc4852fv8"},fR={schema:FE("$slots.default",ir(sr("$message.value")),LE(KE())),type:"group",props:["actions","submit","submitLabel","submitAttrs","submitBehavior","incompleteMessage"],features:[YE,Pa],schemaMemoKey:"5bg016redjo"},pR={schema:Ra("$slots.default"),type:"group",props:[],features:[Pa,jp]},dR={schema:Ip(),type:"input",props:[],features:[Hp]},hR={schema:Ra("$slots.default"),type:"list",props:["sync","dynamic"],features:[Pa,jp]},mR={schema:Ra(),type:"input",props:[],features:[]},gR={schema:Sr(At("$options == undefined",Ks(Bs(It(),Vs(),zs(xe("decorator")),Mt()),Gr(Us("$label"),{if:"$label"})),Op(Lp("$label"),Lt("$help"),xp(Tp(Ks(Bs(It(),Gr(Vs(),{bind:"$option.attrs",attrs:{id:"$option.attrs.id",value:"$option.value",checked:"$fns.isChecked($option.value)"}}),zs(xe("decorator")),Mt()),Gr(Us("$option.label"),{if:"$option.label"})),Ap("$option.help"))))),At("$options == undefined && $help",Lt("$help")),ir(sr("$message.value"))),type:"input",family:"box",props:["options","onValue","offValue","optionsLoader"],features:[Ea,rR,qr("decorator","radioDecorator")],schemaMemoKey:"qje02tb3gu8"},yR={schema:Sr(qn(pi("$label"),fi(xe("prefix"),It(),UE(At("$slots.default",()=>"$slots.default",gc(At("$option.group",BE(gc(mc("$option.label"))),mc("$option.label"))))),At("$attrs.multiple !== undefined",()=>"",xe("select")),Mt(),xe("suffix"))),Lt("$help"),ir(sr("$message.value"))),type:"input",props:["options","placeholder","optionsLoader"],features:[Ea,lR,qr("select","select")],schemaMemoKey:"cb119h43krg"},_R={schema:Sr(qn(pi("$label"),fi(xe("prefix","label"),It(),zE(),Mt(),xe("suffix"))),Lt("$help"),ir(sr("$message.value"))),type:"input",props:[],features:[ZE],schemaMemoKey:"b1n0td79m9g"},Be={schema:Sr(qn(pi("$label"),fi(xe("prefix","label"),It(),Ip(),Mt(),xe("suffix"))),Lt("$help"),ir(sr("$message.value"))),type:"input",family:"text",props:[],features:[Hp],schemaMemoKey:"c3cc4kflsg"},vR={button:bc,submit:bc,checkbox:cR,file:uR,form:fR,group:pR,hidden:dR,list:hR,meta:mR,radio:gR,select:yR,textarea:_R,text:Be,color:Be,date:Be,datetimeLocal:Be,email:Be,month:Be,number:Be,password:Be,search:Be,tel:Be,time:Be,url:Be,week:Be,range:Be},pt=void 0,_t=null,Ws,Bp=!1,vn=!1,bR=new Promise(e=>{Ws=()=>{Bp=!0,e()}}),Tt=typeof window<"u"&&typeof fetch<"u";pt=Tt?getComputedStyle(document.documentElement):void 0;var Nr={},Di={};function wR(e,t,r,n){t&&Object.assign(Nr,t),Tt&&!vn&&(pt!=null&&pt.getPropertyValue("--formkit-theme"))?(Ws(),vn=!0):e&&!vn&&Tt?$R(e):!vn&&Tt&&Ws();const s=function(o){var a,l;o.addProps(["iconLoader","iconLoaderUrl"]),o.props.iconHandler=wc((a=o.props)!=null&&a.iconLoader?o.props.iconLoader:n,(l=o.props)!=null&&l.iconLoaderUrl?o.props.iconLoaderUrl:r),PR(o,o.props.iconHandler),o.on("created",()=>{var c,u;(c=o==null?void 0:o.context)!=null&&c.handlers&&(o.context.handlers.iconClick=f=>{const p=`on${f.charAt(0).toUpperCase()}${f.slice(1)}IconClick`,d=o.props[p];if(d&&typeof d=="function")return v=>d(o,v)}),(u=o==null?void 0:o.context)!=null&&u.fns&&(o.context.fns.iconRole=f=>{const p=`on${f.charAt(0).toUpperCase()}${f.slice(1)}IconClick`;return typeof o.props[p]=="function"?"button":null})})};return s.iconHandler=wc(n,r),s}function $R(e){if(!(!e||!Tt||typeof getComputedStyle!="function")&&(vn=!0,_t=document.getElementById("formkit-theme"),e&&Tt&&(!(pt!=null&&pt.getPropertyValue("--formkit-theme"))&&!_t||_t!=null&&_t.getAttribute("data-theme")&&(_t==null?void 0:_t.getAttribute("data-theme"))!==e))){const r=`https://cdn.jsdelivr.net/npm/@formkit/themes@${js.startsWith("__")?"latest":js}/dist/${e}/theme.css`,n=document.createElement("link");n.type="text/css",n.rel="stylesheet",n.id="formkit-theme",n.setAttribute("data-theme",e),n.onload=()=>{pt=getComputedStyle(document.documentElement),Ws()},document.head.appendChild(n),n.href=r,_t&&_t.remove()}}function wc(e,t){return r=>{if(typeof r!="string")return;if(r.startsWith("<svg"))return r;const n=r.startsWith("default:");r=n?r.split(":")[1]:r;const s=r in Nr;let i;if(s)return Nr[r];if(!Di[r]){if(i=ER(r),i=Tt&&typeof i>"u"?Promise.resolve(i):i,i instanceof Promise)Di[r]=i.then(o=>!o&&typeof r=="string"&&!n?i=typeof e=="function"?e(r):RR(r,t):o).then(o=>(typeof r=="string"&&(Nr[n?`default:${r}`:r]=o),o));else if(typeof i=="string")return Nr[n?`default:${r}`:r]=i,i}return Di[r]}}function ER(e){if(Tt)return Bp?$c(e):bR.then(()=>$c(e))}function $c(e){const t=pt==null?void 0:pt.getPropertyValue(`--fk-icon-${e}`);if(t){const r=atob(t);if(r.startsWith("<svg"))return Nr[e]=r,r}}function RR(e,t){const r=js.startsWith("__")?"latest":js,n=typeof t=="function"?t(e):`https://cdn.jsdelivr.net/npm/@formkit/icons@${r}/dist/icons/${e}.svg`;if(Tt)return fetch(`${n}`).then(async s=>{const i=await s.text();if(i.startsWith("<svg"))return i}).catch(s=>{console.error(s)})}function PR(e,t){const r=/^[a-zA-Z-]+(?:-icon|Icon)$/;Object.keys(e.props).filter(s=>r.test(s)).forEach(s=>CR(e,t,s))}function CR(e,t,r){const n=e.props[r],s=t(n),i=`_raw${r.charAt(0).toUpperCase()}${r.slice(1)}`,o=`on${r.charAt(0).toUpperCase()}${r.slice(1)}Click`;if(e.addProps([i,o]),e.on(`prop:${r}`,SR),s instanceof Promise)return s.then(a=>{e.props[i]=a});e.props[i]=s}function SR(e){var o;const t=e.origin,r=e.payload,n=(o=t==null?void 0:t.props)==null?void 0:o.iconHandler,s=e.name.split(":")[1],i=`_raw${s.charAt(0).toUpperCase()}${s.slice(1)}`;if(n&&typeof n=="function"){const a=n(r);if(a instanceof Promise)return a.then(l=>{t.props[i]=l});t.props[i]=a}}var Ec={100:({data:e})=>`Only groups, lists, and forms can have children (${e.name}).`,101:({data:e})=>`You cannot directly modify the store (${e.name}). See: https://formkit.com/advanced/core#message-store`,102:({data:[e,t]})=>`You cannot directly assign node.${t} (${e.name})`,103:({data:[e]})=>`Schema expressions cannot start with an operator (${e})`,104:({data:[e,t]})=>`Schema expressions cannot end with an operator (${e} in "${t}")`,105:({data:e})=>`Invalid schema expression: ${e}`,106:({data:e})=>`Cannot submit because (${e}) is not in a form.`,107:({data:[e,t]})=>`Cannot set ${e.name} to non object value: ${t}`,108:({data:[e,t]})=>`Cannot set ${e.name} to non array value: ${t}`,300:({data:[e]})=>`Cannot set behavior prop to overscroll (on ${e.name} input) when options prop is a function.`,600:({data:e})=>`Unknown input type${typeof e.props.type=="string"?' "'+e.props.type+'"':""} ("${e.name}")`,601:({data:e})=>`Input definition${typeof e.props.type=="string"?' "'+e.props.type+'"':""} is missing a schema or component property (${e.name}).`},Rc={150:({data:e})=>`Schema function "${e}()" is not a valid function.`,151:({data:e})=>`No form element with id: ${e}`,152:({data:e})=>`No input element with id: ${e}`,350:({data:{node:e,inputType:t}})=>`Invalid options prop for ${e.name} input (${t}). See https://formkit.com/inputs/${t}`,650:'Schema "$get()" must use the id of an input to access.',651:({data:e})=>`Cannot setErrors() on "${e}" because no such id exists.`,652:({data:e})=>`Cannot clearErrors() on "${e}" because no such id exists.`,800:({data:e})=>`${e} is deprecated.`},kR=(e,t)=>{if(e.code in Ec){const r=Ec[e.code];e.message=typeof r=="function"?r(e):r}return t(e)},Pc=!1;function AR(){Pc||(ya(kR),_a(TR),Pc=!0)}var TR=(e,t)=>{if(e.code in Rc){const r=Rc[e.code];e.message=typeof r=="function"?r(e):r}return t(e)},xR=Object.defineProperty,OR=Object.getOwnPropertyNames,Up=(e,t)=>function(){return e&&(t=(0,e[OR(e)[0]])(e=0)),t},LR=(e,t)=>{for(var r in t)xR(e,r,{get:t[r],enumerable:!0})},Cc,Kp,zp=Up({"packages/vue/src/bindings.ts"(){Cc=function(t){t.ledger.count("blocking",E=>E.blocking);const r=_e(!t.ledger.value("blocking"));t.ledger.count("errors",E=>E.type==="error");const n=_e(!!t.ledger.value("errors"));let s=!1;rr(()=>{s=!0});const i=He(t.store.reduce((E,T)=>(T.visible&&(E[T.key]=T),E),{})),o=_e(t.props.validationVisibility||(t.props.type==="checkbox"?"dirty":"blur"));t.on("prop:validationVisibility",({payload:E})=>{o.value=E});const a=_e(o.value==="live"),l=_e(!1),c=E=>{l.value=(E??[]).some(T=>T.name==="required")};c(t.props.parsedRules),t.on("prop:parsedRules",({payload:E})=>c(E));const u=_e(t.children.map(E=>E.uid)),f=ge(()=>{if(!$.state)return!1;if($.state.submitted)return!0;if(!a.value&&!$.state.settled)return!1;switch(o.value){case"live":return!0;case"blur":return $.state.blurred;case"dirty":return $.state.dirty;default:return!1}}),p=ge(()=>$&&d.value?r.value&&!n.value:$.state.dirty&&!st($.value)),d=_e(Array.isArray(t.props.parsedRules)&&t.props.parsedRules.length>0);t.on("prop:parsedRules",({payload:E})=>{d.value=Array.isArray(E)&&E.length>0});const v=ge(()=>{const E={};for(const T in i){const S=i[T];(S.type!=="validation"||f.value)&&(E[T]=S)}return E}),_=He(t.store.reduce((E,T)=>(T.type==="ui"&&T.visible&&(E[T.key]=T),E),{})),R=He({}),w=new Proxy(R,{get(...E){const[T,S]=E;let j=Reflect.get(...E);return!j&&typeof S=="string"&&!re(T,S)&&!S.startsWith("__v")&&Hn(t).watch(X=>{const D=typeof X.config.rootClasses=="function"?X.config.rootClasses(S,X):{},G=X.config.classes?_s(S,X,X.config.classes[S]):{},q=_s(S,X,X.props[`_${S}Class`]),be=_s(S,X,X.props[`${S}Class`]);j=Xw(X,S,D,G,q,be),T[S]=j??""}),j}});t.on("prop:rootClasses",()=>{const E=Object.keys(R);for(const T of E)delete R[T]});const b=ge(()=>{const E=[];$.help&&E.push(`help-${t.props.id}`);for(const T in v.value)E.push(`${t.props.id}-${T}`);return E.length?E.join(" "):void 0}),h=_e(t.value),g=_e(t.value),$=He({_value:g,attrs:t.props.attrs,disabled:t.props.disabled,describedBy:b,fns:{length:E=>Object.keys(E).length,number:E=>Number(E),string:E=>String(E),json:E=>JSON.stringify(E),eq:Fe},handlers:{blur:E=>{t&&(t.store.set(mt({key:"blurred",visible:!1,value:!0})),typeof t.props.attrs.onBlur=="function"&&t.props.attrs.onBlur(E))},touch:()=>{var S;const E=$.dirtyBehavior==="compare";if((S=t.store.dirty)!=null&&S.value&&!E)return;const T=!Fe(t.props._init,t._value);!T&&!E||t.store.set(mt({key:"dirty",visible:!1,value:T}))},DOMInput:E=>{t.input(E.target.value),t.emit("dom-input-event",E)}},help:t.props.help,id:t.props.id,items:u,label:t.props.label,messages:v,didMount:!1,node:Xs(t),options:t.props.options,defaultMessagePlacement:!0,slots:t.props.__slots,state:{blurred:!1,complete:p,dirty:!1,empty:st(h),submitted:!1,settled:t.isSettled,valid:r,errors:n,rules:d,validationVisible:f,required:l},type:t.props.type,family:t.props.family,ui:_,value:h,classes:w});t.on("created",()=>{Fe($.value,t.value)||(g.value=t.value,h.value=t.value,es(h),es(g)),(async()=>(await t.settled,t&&(t.props._init=ut(t.value))))()}),t.on("mounted",()=>{$.didMount=!0}),t.on("settled",({payload:E})=>{$.state.settled=E});function m(E){(Array.isArray(E)?E:Object.keys(E)).forEach(S=>{S=Wr(S),re($,S)||($[S]=t.props[S]),t.on(`prop:${S}`,({payload:j})=>{$[S]=j})})}m((()=>{const E=["__root","help","label","disabled","options","type","attrs","preserve","preserveErrors","id","dirtyBehavior"],T=/^[a-zA-Z-]+(?:-icon|Icon)$/,S=Object.keys(t.props).filter(j=>T.test(j));return E.concat(S)})());function A(E){E.props&&m(E.props)}t.props.definition&&A(t.props.definition),t.on("added-props",({payload:E})=>m(E)),t.on("input",({payload:E})=>{t.type!=="input"&&!Se(E)&&!gr(E)?g.value=$o(E):(g.value=E,es(g))}),t.on("commitRaw",({payload:E})=>{t.type!=="input"&&!Se(E)&&!gr(E)?h.value=g.value=$o(E):(h.value=g.value=E,es(h)),t.emit("modelUpdated")}),t.on("commit",({payload:E})=>{var T;if((!$.state.dirty||$.dirtyBehavior==="compare")&&t.isCreated&&s)if(!((T=t.store.validating)!=null&&T.value))$.handlers.touch();else{const S=t.on("message-removed",({payload:j})=>{j.key==="validating"&&($.handlers.touch(),t.off(S))})}p&&t.type==="input"&&n.value&&!ft(t.props.preserveErrors)&&t.store.filter(S=>{var j;return!(S.type==="error"&&((j=S.meta)==null?void 0:j.autoClear)===!0)}),t.type==="list"&&t.sync&&(u.value=t.children.map(S=>S.uid)),$.state.empty=st(E)});const x=async E=>{E.type==="ui"&&E.visible&&!E.meta.showAsMessage?_[E.key]=E:E.visible?i[E.key]=E:E.type==="state"&&($.state[E.key]=!!E.value)};t.on("message-added",E=>x(E.payload)),t.on("message-updated",E=>x(E.payload)),t.on("message-removed",({payload:E})=>{delete _[E.key],delete i[E.key],delete $.state[E.key]}),t.on("settled:blocking",()=>{r.value=!0}),t.on("unsettled:blocking",()=>{r.value=!1}),t.on("settled:errors",()=>{n.value=!1}),t.on("unsettled:errors",()=>{n.value=!0}),Je(f,E=>{E&&(a.value=!0)}),t.context=$,t.emit("context",t,!1),t.on("destroyed",()=>{t.context=void 0,t=null})},Kp=Cc}}),IR={};LR(IR,{defaultConfig:()=>Ca});var Ca,MR=Up({"packages/vue/src/defaultConfig.ts"(){zp(),Ca=(e={})=>{AR();const{rules:t={},locales:r={},inputs:n={},messages:s={},locale:i=void 0,theme:o=void 0,iconLoaderUrl:a=void 0,iconLoader:l=void 0,icons:c={},...u}=e,f=fE({...uE,...t||{}}),p=AE(Zt({en:kE,...r||{}},s)),d=TE(vR,n),v=wR(o,c,a,l);return Zt({plugins:[d,v,Kp,p,f],...i?{config:{locale:i}}:{}},u||{},!0)}}}),Wp=typeof window>"u",An=new Map;function DR(e){if(!Wp)return;const t=An.get(e);if(t){for(const r of t)r();t.clear(),An.delete(e)}}function NR(e,t){var r;!Wp||!e||(An.has(e)||An.set(e,new Set),(r=An.get(e))==null||r.add(t))}var qp=typeof window>"u",Tn={},Jr={},Ne,St=new WeakMap,HR="__raw__",jR=/[a-zA-Z0-9\-][cC]lass$/;function FR(e,t){const r=_e(null);if(e==="get"){const s={};return r.value=VR.bind(null,s),r}const n=e.split(".");return bt(()=>{r.value=Sa(Se(t)?t.value:t,n)}),r}function Sa(e,t){if(Array.isArray(e)){for(const s of e){const i=s!==!1&&Sa(s,t);if(i!==void 0)return i}return}let r,n=e;for(const s in t){const i=t[s];if(typeof n!="object"||n===null){r=void 0;break}const o=n[i];if(Number(s)===t.length-1&&o!==void 0){r=typeof o=="function"?o.bind(n):o;break}n=o}return r}function VR(e,t){if(typeof t!="string")return Cr(650);if(t in e||(e[t]=_e(void 0)),e[t].value===void 0){e[t].value=null;const r=zn(t);r&&(e[t].value=r.context),nw(t,({payload:n})=>{e[t].value=Wn(n)?n.context:n})}return e[t].value}function Sc(e,t,r){function n(d,v){const _=f(at(v.if),{if:!0}),R=c(d,v.then),w=v.else?c(d,v.else):null;return[_,R,w]}function s(d,v){var b,h;const _=f(at(d.if));let R=()=>v,w=()=>v;return typeof d.then=="object"?w=i(d.then,void 0):typeof d.then=="string"&&((b=d.then)!=null&&b.startsWith("$"))?w=f(at(d.then)):w=()=>d.then,re(d,"else")&&(typeof d.else=="object"?R=i(d.else):typeof d.else=="string"&&((h=d.else)!=null&&h.startsWith("$"))?R=f(at(d.else)):R=()=>d.else),()=>_()?w():R()}function i(d,v,_={}){const R=new Set(Object.keys(d||{})),w=v?f(at(v)):()=>({}),b=[h=>{const g=w();for(const $ in g)R.has($)||(h[$]=g[$])}];if(d){if(Mr(d))return s(d,_);for(let h in d){const g=d[h];let $;const m=typeof g=="string";h.startsWith(HR)?(h=h.substring(7),$=()=>g):m&&g.startsWith("$")&&g.length>1&&!(g.startsWith("$reset")&&jR.test(h))?$=f(at(g)):typeof g=="object"&&Mr(g)?$=s(g,void 0):typeof g=="object"&&rn(g)?$=i(g):$=()=>g,b.push(C=>{C[h]=$()})}}return()=>{const h=Array.isArray(d)?[]:{};return b.forEach(g=>g(h)),h}}function o(d,v){let _=null,R=()=>null,w=!1,b=null,h=null,g=null,$=!1;const m=Yw(v);if(So(m)?(_=m.$el,R=m.$el!=="text"?i(m.attrs,m.bind):()=>null):ko(m)?(typeof m.$cmp=="string"?re(d,m.$cmp)?_=d[m.$cmp]:(_=m.$cmp,$=!0):_=m.$cmp,R=i(m.props,m.bind)):Mr(m)&&([w,b,h]=n(d,m)),!Mr(m)&&"if"in m?w=f(at(m.if)):!Mr(m)&&_===null&&(w=()=>!0),"children"in m&&m.children)if(typeof m.children=="string")if(m.children.startsWith("$slots."))_=_==="text"?"slot":_,b=f(at(m.children));else if(m.children.startsWith("$")&&m.children.length>1){const C=f(at(m.children));b=()=>String(C())}else b=()=>String(m.children);else if(Array.isArray(m.children))b=c(d,m.children);else{const[C,A,x]=n(d,m.children);b=E=>C&&C()?A&&A(E):x&&x(E)}if(ko(m))if(b){const C=b;b=A=>({default(x,E){var j,ie,X,D;const T=Ne;E&&(Ne=E),x&&((j=St.get(Ne))==null||j.unshift(x)),A&&((ie=St.get(Ne))==null||ie.unshift(A));const S=C(A);return x&&((X=St.get(Ne))==null||X.shift()),A&&((D=St.get(Ne))==null||D.shift()),Ne=T,S}}),b.slot=!0}else b=()=>({});if("for"in m&&m.for){const C=m.for.length===3?m.for[2]:m.for[1];g=[typeof C=="string"&&C.startsWith("$")?f(at(C)):()=>C,m.for[0],m.for.length===3?String(m.for[1]):null]}return[w,_,R,b,h,g,$]}function a(d,v){const _=d(v),R=Ne;return Object.keys(_).reduce((w,b)=>{const h=_&&_[b];return w[b]=g=>h&&h(g,R)||null,w},{})}function l(d,v){const[_,R,w,b,h,g,$]=o(d,v);let m=C=>{if(_&&R===null&&b)return _()?b(C):h&&h(C);if(R&&(!_||_())){if(R==="text"&&b)return ra(String(b()));if(R==="slot"&&b)return b(C);const A=$?Yd(R):R,x=b!=null&&b.slot?a(b,C):null;return nt(A,w(),x||(b?b(C):[]))}return typeof h=="function"?h(C):h};if(g){const C=m,[A,x,E]=g;m=()=>{const T=A(),S=Number.isFinite(T)?Array(Number(T)).fill(0).map((D,G)=>G):T,j=[];if(typeof S!="object")return null;const ie=St.get(Ne)||[],X=Array.isArray(S);for(const D in S){if(X&&D in Array.prototype)continue;const G=Object.defineProperty({...ie.reduce((q,be)=>q.__idata?{...q,...be}:be,{}),[x]:S[D],...E!==null?{[E]:X?Number(D):D}:{}},"__idata",{enumerable:!1,value:!0});ie.unshift(G),j.push(C.bind(null,G)()),ie.shift()}return j}}return m}function c(d,v){if(Array.isArray(v)){const R=v.map(l.bind(null,d));return w=>R.map(b=>b(w))}const _=l(d,v);return R=>_(R)}const u=[];function f(d,v={}){const _=new WeakMap;return u.push((R,w)=>{_.set(w,d.provide(b=>R(b,v)))}),()=>_.get(Ne)()}function p(d,v){r??(r=Jp(t));const[_,R]=re(Tn,r)?Tn[r]:[c(e,t),u];return qp||(Jr[r]??(Jr[r]=0),Jr[r]++,Tn[r]=[_,R]),R.forEach(w=>{w(d,v)}),()=>(Ne=v,_())}return p}function Gp(e,t){const r=St.get(Ne)||[];let n;return r.length&&(n=Sa(r,e.split("."))),n===void 0?t:n}function BR(e,t){return new Proxy(e,{get(...r){let n;const s=r[1];if(typeof s=="string"){const i=Ne;Ne=t,n=Gp(s,void 0),Ne=i}return n!==void 0?n:Reflect.get(...r)}})}function kc(e,t,r){return e((n,s={})=>n.reduce((i,o)=>{if(o.startsWith("slots.")){const a=o.substring(6),l=()=>t.slots&&re(t.slots,a)&&typeof t.slots[a]=="function";if(s.if)i[o]=l;else if(t.slots){const c=BR(t,r);i[o]=()=>l()?t.slots[a](c):null}}else{const a=FR(o,t);i[o]=()=>Gp(o,a.value)}return i},{}),r)}function Ac(e,t,r){if(t??(t=Jp(e)),Jr[t]--,Jr[t]===0){delete Jr[t];const[,n]=Tn[t];delete Tn[t],n.length=0}St.delete(r)}function Jp(e){return JSON.stringify(e,(t,r)=>typeof r=="function"?r.toString():r)}var Qp=nr({name:"FormKitSchema",props:{schema:{type:[Array,Object],required:!0},data:{type:Object,default:()=>({})},library:{type:Object,default:()=>({})},memoKey:{type:String,required:!1}},emits:["mounted"],setup(e,t){var c;const r=Ot();let n={};St.set(n,[]);const s={FormKit:Xs(Xp),...e.library};let i=Sc(s,e.schema,e.memoKey),o,a;qp||Je(()=>e.schema,(u,f)=>{var d;const p=n;n={},St.set(n,[]),i=Sc(s,e.schema,e.memoKey),o=kc(i,a,n),u===f&&((d=r==null?void 0:r.proxy)==null?void 0:d.$forceUpdate).call(d),Ac(e.schema,e.memoKey,p)},{deep:!0}),bt(()=>{a=Object.assign(He(e.data??{}),{slots:t.slots}),t.slots,o=kc(i,a,n)});function l(){Ac(e.schema,e.memoKey,n),a.node&&a.node.destroy(),a.slots=null,a=null,o=null}return Bn(()=>t.emit("mounted")),Zo(l),NR((c=Ot())==null?void 0:c.appContext.app,l),()=>o?o():null}}),UR=Qp,KR=typeof window>"u",Tc=Symbol("FormKitParent"),zR=Symbol("FormKitComponentCallback");function WR(e,t){const r=eP(e,t);if(r.props.definition||Qe(600,r),r.props.definition.component)return()=>{var c;return nt((c=r.props.definition)==null?void 0:c.component,{context:r.context},{...t.slots})};const n=_e([]);let s=r.props.definition.schemaMemoKey;const i=()=>{var u,f;const c=(f=(u=r.props)==null?void 0:u.definition)==null?void 0:f.schema;c||Qe(601,r),typeof c=="function"?(n.value=c({...e.sectionsSchema||{}}),(s&&e.sectionsSchema||"memoKey"in c&&typeof c.memoKey=="string")&&(s=(s??(c==null?void 0:c.memoKey))+JSON.stringify(e.sectionsSchema))):n.value=c};i(),KR||r.on("schema",()=>{s+="♻️",i()}),t.emit("node",r);const o=r.props.definition.library,a={FormKit:Xs(Yp),...o,...e.library??{}};function l(){r.emit("mounted")}return t.expose({node:r}),()=>nt(Qp,{schema:n.value,data:r.context,onMounted:l,library:a,memoKey:s},{...t.slots})}var Yp=nr(WR,{props:xE,inheritAttrs:!1}),Xp=Yp,qR=Symbol();function GR(e,t){return e.component(t.alias||"FormKit",Xp).component(t.schemaAlias||"FormKitSchema",UR),{get:zn,setLocale:r=>{var n;(n=t.config)!=null&&n.rootConfig&&(t.config.rootConfig.locale=r)},clearErrors:e$,setErrors:Zw,submit:op,reset:ap}}var Zp=Symbol.for("FormKitOptions"),JR=Symbol.for("FormKitConfig"),QR={install(e,t){const r=Object.assign({alias:"FormKit",schemaAlias:"FormKitSchema"},typeof t=="function"?t():t),n=sw(r.config||{});r.config={rootConfig:n},e.config.globalProperties.$formkit=GR(e,r),e.provide(Zp,r),e.provide(JR,n),typeof window<"u"&&(globalThis.__FORMKIT_CONFIGS__=(globalThis.__FORMKIT_CONFIGS__||[]).concat([n]))}},YR=typeof window<"u",Ni=["ignore","disabled","preserve","help","label",/^preserve(-e|E)rrors/,/^[a-z]+(?:-visibility|Visibility|-behavior|Behavior)$/,/^[a-zA-Z-]+(?:-class|Class)$/,"prefixIcon","suffixIcon",/^[a-zA-Z-]+(?:-icon|Icon)$/],XR=["disabled","ignore","preserve"];function xc(e,t){t.classes&&Object.keys(t.classes).forEach(r=>{typeof r=="string"&&(e.props[`_${r}Class`]=t.classes[r],kn(t.classes[r])&&r==="inner"&&Object.values(t.classes[r]))})}function ZR(e){return e?["Submit","SubmitRaw","SubmitInvalid"].reduce((r,n)=>{const s=`on${n}`;return s in e&&typeof e[s]=="function"&&(r[s]=e[s]),r},{}):{}}function eP(e,t,r={}){const n=Object.assign({},Oe(Zp)||{},r),s=Oe(qR,_e(YR?document:void 0)),i=Oe(zR,()=>{}),o=Ot(),a=ZR(o==null?void 0:o.vnode.props),l=["modelValue","model-value"].some(m=>m in((o==null?void 0:o.vnode.props)??{}));let c=!1;Bn(()=>{c=!0});const u=e.modelValue!==void 0?e.modelValue:ut(t.attrs.value);function f(){const m={...xr(e),...a,type:e.type??"text",__root:s.value,__slots:t.slots},C=nc(xr(t.attrs),Ni);C.key||(C.key=cn()),m.attrs=C;const A=sc(xr(t.attrs),Ni);for(const E in A)XR.includes(E)&&A[E]===""&&(A[E]=!0),m[Wr(E)]=A[E];const x={props:{}};return xc(x,e),Object.assign(m,x.props),typeof m.type!="string"&&(m.definition=m.type,delete m.type),m}const p=f(),d=p.ignore?null:e.parent||Oe(Tc,null),v=Jw(Zt(n||{},{name:e.name||void 0,value:u,parent:d,plugins:(n.plugins||[]).concat(e.plugins??[]),config:e.config||{},props:p,index:e.index,sync:!!ft(t.attrs.sync||t.attrs.dynamic)},!1,!0));i(v),v.props.definition||Qe(600,v);const _=_e(new Set(Array.isArray(v.props.__propDefs)?v.props.__propDefs:Object.keys(v.props.__propDefs??{})));v.on("added-props",({payload:m})=>{(Array.isArray(m)?m:Object.keys(m??{})).forEach(A=>_.value.add(A))});const R=ge(()=>Ni.concat([..._.value]).reduce((m,C)=>(typeof C=="string"?(m.push(Wr(C)),m.push(tp(C))):m.push(C),m),[]));bt(()=>xc(v,e));const w=xr(e);for(const m in w)Je(()=>e[m],()=>{e[m]!==void 0&&(v.props[m]=e[m])});bt(()=>{v.props.__root=s.value});const b=new Set,h=xr(t.attrs);bt(()=>{g(sc(h,R.value))});function g(m){b.forEach(C=>{C(),b.delete(C)});for(const C in m){const A=Wr(C);b.add(Je(()=>t.attrs[C],()=>{v.props[A]=t.attrs[C]}))}}if(bt(()=>{const m=nc(xr(t.attrs),R.value);"multiple"in m&&(m.multiple=ft(m.multiple)),typeof m.onBlur=="function"&&(m.onBlur=N0(m.onBlur)),v.props.attrs=Object.assign({},v.props.attrs||{},m)}),bt(()=>{const m=(e.errors??[]).map(C=>mt({key:ma(C),type:"error",value:C,meta:{source:"prop"}}));v.store.apply(m,C=>C.type==="error"&&C.meta.source==="prop")}),v.type!=="input"){const m=`${v.name}-prop`;bt(()=>{const C=e.inputErrors??{},A=Object.keys(C);A.length||v.clearErrors(!0,m);const x=A.reduce((E,T)=>{let S=C[T];return typeof S=="string"&&(S=[S]),Array.isArray(S)&&(E[T]=S.map(j=>mt({key:j,type:"error",value:j,meta:{source:m}}))),E},{});v.store.apply(x,E=>E.type==="error"&&E.meta.source===m)})}bt(()=>Object.assign(v.config,e.config)),v.type!=="input"&&_r(Tc,v);let $;return v.on("modelUpdated",()=>{var m,C;t.emit("inputRaw",(m=v.context)==null?void 0:m.value,v),c&&t.emit("input",(C=v.context)==null?void 0:C.value,v),l&&v.context&&($=ut(v.value),t.emit("update:modelValue",$o(v.value)))}),l&&(Je(qo(e,"modelValue"),m=>{Fe($,m)||v.input(m,!1)},{deep:!0}),v.value!==u&&v.emit("modelUpdated")),Un(()=>v.destroy()),v}var tP=te("messages",()=>({$el:"ul",if:"$fns.length($messages)"})),rP=te("message",()=>({$el:"li",for:["message","$messages"],attrs:{key:"$message.key",id:"$id + '-' + $message.key","data-message-type":"$message.type"}}));tP(rP("$message.value"));var nP=te("summary",()=>({$el:"div",attrs:{"aria-live":"polite"}})),sP=te("summaryInner",()=>({$el:"div",if:"$summaries.length && $showSummaries"})),iP=te("messages",()=>({$el:"ul",if:"$summaries.length && $showSummaries"})),oP=te("message",()=>({$el:"li",for:["summary","$summaries"],attrs:{key:"$summary.key","data-message-type":"$summary.type"}})),aP=te("summaryHeader",()=>({$el:"h2",attrs:{id:"$id"}})),lP=te("messageLink",()=>({$el:"a",attrs:{id:"$summary.key",href:'$: "#" + $summary.id',onClick:"$jumpLink"}}));nP(sP(aP("$summaryHeader"),iP(oP(lP("$summary.message")))));MR();zp();const cP=it(e=>{const t=Ca;e.hook("app:rendered",r=>{fw(),DR(e.vueApp)}),e.vueApp.use(QR,t)});function uP(e){return{all:e=e||new Map,on:function(t,r){var n=e.get(t);n?n.push(r):e.set(t,[r])},off:function(t,r){var n=e.get(t);n&&(r?n.splice(n.indexOf(r)>>>0,1):e.set(t,[]))},emit:function(t,r){var n=e.get(t);n&&n.slice().map(function(s){s(r)}),(n=e.get("*"))&&n.slice().map(function(s){s(t,r)})}}}const bn={...uP(),eventList:new Set([]),register:e=>{bn.eventList.add(e)},find:e=>{if(bn.eventList.has(e))return Array.from(bn.eventList).find(t=>t===e)},list:()=>Array.from(bn.eventList)},fP={},pP=it(e=>{e.vueApp.use({install:t=>{t.provide("rplIcons",fP),t.provide("$rplEvent",bn)}})});function dP(e={}){const t=e.path||window.location.pathname;let r={};try{r=Ls(sessionStorage.getItem("nuxt:reload")||"{}")}catch{}if(e.force||(r==null?void 0:r.path)!==t||(r==null?void 0:r.expires)<Date.now()){try{sessionStorage.setItem("nuxt:reload",JSON.stringify({path:t,expires:Date.now()+(e.ttl??1e4)}))}catch{}if(e.persistState)try{sessionStorage.setItem("nuxt:reload:state",JSON.stringify({state:$e().payload.state}))}catch{}window.location.pathname!==t?window.location.href=t:window.location.reload()}}const hP=it({name:"nuxt:chunk-reload",setup(e){const t=gt(),r=dt(),n=new Set;t.beforeEach(()=>{n.clear()}),e.hook("app:chunkError",({error:i})=>{n.add(i)});function s(i){const a="href"in i&&i.href[0]==="#"?r.app.baseURL+i.href:ln(r.app.baseURL,i.fullPath);dP({path:a,persistState:!0})}e.hook("app:manifest:update",()=>{t.beforeResolve(s)}),t.onError((i,o)=>{n.has(i)&&s(o)})}}),mP=[k_,T_,Uv,Kv,zv,t0,r0,c0,S0,cP,pP,hP],gP=nr({props:{vnode:{type:Object,required:!0},route:{type:Object,required:!0},vnodeRef:Object,renderKey:String,trackRootNodes:Boolean},setup(e){const t=e.renderKey,r=e.route,n={};for(const s in e.route)Object.defineProperty(n,s,{get:()=>t===e.renderKey?e.route[s]:r[s]});return _r(ii,mr(n)),()=>nt(e.vnode,{ref:e.vnodeRef})}}),yP=nr({name:"NuxtPage",inheritAttrs:!1,props:{name:{type:String},transition:{type:[Boolean,Object],default:void 0},keepalive:{type:[Boolean,Object],default:void 0},route:{type:Object},pageKey:{type:[Function,String],default:null}},setup(e,{attrs:t,expose:r}){const n=$e(),s=_e(),i=Oe(ii,null);let o;r({pageRef:s});const a=Oe(ly,null);let l;const c=n.deferHydration();if(n.isHydrating){const u=n.hooks.hookOnce("app:error",c);gt().beforeEach(u)}return e.pageKey&&Je(()=>e.pageKey,(u,f)=>{u!==f&&n.callHook("page:loading:start")}),()=>nt(Kf,{name:e.name,route:e.route,...t},{default:u=>{const f=vP(i,u.route,u.Component),p=i&&i.matched.length===u.route.matched.length;if(!u.Component){if(l&&!p)return l;c();return}if(l&&a&&!a.isCurrent(u.route))return l;if(f&&i&&(!a||a!=null&&a.isCurrent(i)))return p?l:null;const d=bo(u,e.pageKey);!n.isHydrating&&!bP(i,u.route,u.Component)&&o===d&&n.callHook("page:loading:end"),o=d;const v=!!(e.transition??u.route.meta.pageTransition??go),_=v&&_P([e.transition,u.route.meta.pageTransition,go,{onAfterLeave:()=>{n.callHook("page:transition:finish",u.Component)}}].filter(Boolean)),R=e.keepalive??u.route.meta.keepalive??w_;return l=Mv(sa,v&&_,Iv(R,nt(mu,{suspensible:!0,onPending:()=>n.callHook("page:start",u.Component),onResolve:()=>{rr(()=>n.callHook("page:finish",u.Component).then(()=>n.callHook("page:loading:end")).finally(c))}},{default:()=>{const w=nt(gP,{key:d||void 0,vnode:u.Component,route:u.route,renderKey:d||void 0,trackRootNodes:v,vnodeRef:s});return R&&(w.type.name=u.Component.type.name||u.Component.type.__name||"RouteProvider"),w}}))).default(),l}})}});function _P(e){const t=e.map(r=>({...r,onAfterLeave:r.onAfterLeave?fa(r.onAfterLeave):void 0}));return _f(...t)}function vP(e,t,r){if(!e)return!1;const n=t.matched.findIndex(s=>{var i;return((i=s.components)==null?void 0:i.default)===(r==null?void 0:r.type)});return!n||n===-1?!1:t.matched.slice(0,n).some((s,i)=>{var o,a,l;return((o=s.components)==null?void 0:o.default)!==((l=(a=e.matched[i])==null?void 0:a.components)==null?void 0:l.default)})||r&&bo({route:t,Component:r})!==bo({route:e,Component:r})}function bP(e,t,r){return e?t.matched.findIndex(s=>{var i;return((i=s.components)==null?void 0:i.default)===(r==null?void 0:r.type)})<t.matched.length-1:!1}const wP=nr({__name:"app",setup(e){return a_({script:[{tagPosition:"bodyClose",src:"https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0",async:!0},{tagPosition:"bodyClose",innerHTML:`window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
 
   gtag('config', 'G-JHL6XDTXK0');`}]}),(t,r)=>{const n=yP;return Et(),jh("div",null,[Re(n)])}}}),$P={__name:"nuxt-error-page",props:{error:Object},setup(e){const r=e.error;(r.stack||"").split(`
 `).splice(1).map(f=>({text:f.replace("webpack:/","").replace(".vue",".js").trim(),internal:f.includes("node_modules")&&!f.includes(".cache")||f.includes("internal")||f.includes("new Promise")})).map(f=>`<span class="stack${f.internal?" internal":""}">${f.text}</span>`).join(`
-`);const n=Number(r.statusCode||500),s=n===404,i=r.statusMessage??(s?"Page Not Found":"Internal Server Error"),o=r.message||r.toString(),a=void 0,u=s?W(()=>U(()=>import("./error-404.T0EgPV7K.js"),__vite__mapDeps([126,11,14,127]),import.meta.url).then(f=>f.default||f)):W(()=>U(()=>import("./error-500.YI21l9fK.js"),__vite__mapDeps([128,14,129]),import.meta.url).then(f=>f.default||f));return(f,p)=>(Et(),qt(Ee(u),ud(Wu({statusCode:Ee(n),statusMessage:Ee(i),description:Ee(o),stack:Ee(a)})),null,16))}},EP=$P,RP={__name:"nuxt-root",setup(e){const t=()=>null,r=$e(),n=r.deferHydration();if(r.isHydrating){const a=r.hooks.hookOnce("app:error",n);gt().beforeEach(a)}const s=!1;_r(ii,$r()),r.hooks.callHookWith(a=>a.map(l=>l()),"vue:setup");const i=oi();Pu((a,l,c)=>{if(r.hooks.callHook("vue:error",a,l,c).catch(u=>console.error("[nuxt] Error in `vue:error` hook",u)),dy(a)&&(a.fatal||a.unhandled))return r.runWithContext(()=>Dr(a)),!1});const o=!1;return(a,l)=>(Et(),qt(mu,{onResolve:Ee(n)},{default:fu(()=>[Ee(i)?(Et(),qt(Ee(EP),{key:0,error:Ee(i)},null,8,["error"])):Ee(o)?(Et(),qt(Ee(t),{key:1,context:Ee(o)},null,8,["context"])):Ee(s)?(Et(),qt(Xd(Ee(s)),{key:2})):(Et(),qt(Ee(wP),{key:3}))]),_:1},8,["onResolve"]))}},Oc=RP;let Lc;{let e;Lc=async function(){var o,a;if(e)return e;const n=!!((o=window.__NUXT__)!=null&&o.serverRendered||((a=document.getElementById("__NUXT_DATA__"))==null?void 0:a.dataset.ssr)==="true")?Cm(Oc):Pm(Oc),s=kg({vueApp:n});async function i(l){await s.callHook("app:error",l),s.payload.error=s.payload.error||ai(l)}n.config.errorHandler=i;try{await Tg(s,mP)}catch(l){i(l)}try{await s.hooks.callHook("app:created",n),await s.hooks.callHook("app:beforeMount",n),n.mount($_),await s.hooks.callHook("app:mounted",n),await rr()}catch(l){i(l)}return n.config.errorHandler===i&&(n.config.errorHandler=void 0),n},e=Lc().catch(t=>{throw console.error("Error while mounting app:",t),t})}export{AP as $,rr as A,fe as B,a_ as C,ra as D,OP as E,Ke as F,qt as G,Oe as H,WP as I,ge as J,gn as K,UP as L,Mv as M,Ee as N,nt as O,ii as P,Vh as Q,_r as R,mu as S,sa as T,ly as U,JP as V,TP as W,Ho as X,Uc as Y,Je as Z,U as _,Zo as a,Js as a0,MP as a1,Xd as a2,Se as a3,DP as a4,zP as a5,Jt as a6,qo as a7,hh as a8,zf as a9,Wu as aA,HP as aB,xP as aC,C0 as aD,CP as aE,Os as aF,so as aG,VP as aH,FP as aI,jP as aJ,rc as aK,tC as aL,Ct as aM,QP as aN,eC as aO,YP as aP,XP as aQ,ZP as aR,R0 as aS,rf as aT,ai as aa,Ot as ab,n0 as ac,br as ad,Zl as ae,d0 as af,Un as ag,qP as ah,Yd as ai,ln as aj,si as ak,Hm as al,KP as am,fy as an,no as ao,wr as ap,LP as aq,v0 as ar,Yr as as,GP as at,Ls as au,da as av,bt as aw,W as ax,IP as ay,ud as az,Et as b,jh as c,nr as d,zu as e,NP as f,Re as g,hs as h,kP as i,$e as j,dt as k,yn as l,$r as m,Qs as n,Bn as o,SP as p,ms as q,_e as r,df as s,PP as t,gt as u,b_ as v,fu as w,BP as x,Pm as y,Ir as z};
+`);const n=Number(r.statusCode||500),s=n===404,i=r.statusMessage??(s?"Page Not Found":"Internal Server Error"),o=r.message||r.toString(),a=void 0,u=s?W(()=>U(()=>import("./error-404.7ZxJfF8q.js"),__vite__mapDeps([126,11,14,127]),import.meta.url).then(f=>f.default||f)):W(()=>U(()=>import("./error-500.zxG8rMw4.js"),__vite__mapDeps([128,14,129]),import.meta.url).then(f=>f.default||f));return(f,p)=>(Et(),qt(Ee(u),ud(Wu({statusCode:Ee(n),statusMessage:Ee(i),description:Ee(o),stack:Ee(a)})),null,16))}},EP=$P,RP={__name:"nuxt-root",setup(e){const t=()=>null,r=$e(),n=r.deferHydration();if(r.isHydrating){const a=r.hooks.hookOnce("app:error",n);gt().beforeEach(a)}const s=!1;_r(ii,$r()),r.hooks.callHookWith(a=>a.map(l=>l()),"vue:setup");const i=oi();Pu((a,l,c)=>{if(r.hooks.callHook("vue:error",a,l,c).catch(u=>console.error("[nuxt] Error in `vue:error` hook",u)),dy(a)&&(a.fatal||a.unhandled))return r.runWithContext(()=>Dr(a)),!1});const o=!1;return(a,l)=>(Et(),qt(mu,{onResolve:Ee(n)},{default:fu(()=>[Ee(i)?(Et(),qt(Ee(EP),{key:0,error:Ee(i)},null,8,["error"])):Ee(o)?(Et(),qt(Ee(t),{key:1,context:Ee(o)},null,8,["context"])):Ee(s)?(Et(),qt(Xd(Ee(s)),{key:2})):(Et(),qt(Ee(wP),{key:3}))]),_:1},8,["onResolve"]))}},Oc=RP;let Lc;{let e;Lc=async function(){var o,a;if(e)return e;const n=!!((o=window.__NUXT__)!=null&&o.serverRendered||((a=document.getElementById("__NUXT_DATA__"))==null?void 0:a.dataset.ssr)==="true")?Cm(Oc):Pm(Oc),s=kg({vueApp:n});async function i(l){await s.callHook("app:error",l),s.payload.error=s.payload.error||ai(l)}n.config.errorHandler=i;try{await Tg(s,mP)}catch(l){i(l)}try{await s.hooks.callHook("app:created",n),await s.hooks.callHook("app:beforeMount",n),n.mount($_),await s.hooks.callHook("app:mounted",n),await rr()}catch(l){i(l)}return n.config.errorHandler===i&&(n.config.errorHandler=void 0),n},e=Lc().catch(t=>{throw console.error("Error while mounting app:",t),t})}export{AP as $,rr as A,fe as B,a_ as C,ra as D,OP as E,Ke as F,qt as G,Oe as H,WP as I,ge as J,gn as K,UP as L,Mv as M,Ee as N,nt as O,ii as P,Vh as Q,_r as R,mu as S,sa as T,ly as U,JP as V,TP as W,Ho as X,Uc as Y,Je as Z,U as _,Zo as a,Js as a0,MP as a1,Xd as a2,Se as a3,DP as a4,zP as a5,Jt as a6,qo as a7,hh as a8,zf as a9,Wu as aA,HP as aB,xP as aC,C0 as aD,CP as aE,Os as aF,so as aG,VP as aH,FP as aI,jP as aJ,rc as aK,tC as aL,Ct as aM,QP as aN,eC as aO,YP as aP,XP as aQ,ZP as aR,R0 as aS,rf as aT,ai as aa,Ot as ab,n0 as ac,br as ad,Zl as ae,d0 as af,Un as ag,qP as ah,Yd as ai,ln as aj,si as ak,Hm as al,KP as am,fy as an,no as ao,wr as ap,LP as aq,v0 as ar,Yr as as,GP as at,Ls as au,da as av,bt as aw,W as ax,IP as ay,ud as az,Et as b,jh as c,nr as d,zu as e,NP as f,Re as g,hs as h,kP as i,$e as j,dt as k,yn as l,$r as m,Qs as n,Bn as o,SP as p,ms as q,_e as r,df as s,PP as t,gt as u,b_ as v,fu as w,BP as x,Pm as y,Ir as z};
 function __vite__mapDeps(indexes) {
   if (!__vite__mapDeps.viteFileDeps) {
-    __vite__mapDeps.viteFileDeps = ["./document-driven.BWdn4QDn.js","./DocumentDrivenEmpty.3DI1wYHv.js","./ContentRenderer.CgXd06ZK.js","./ContentRendererMarkdown.vue.cUVXlmIq.js","./RplContent.css.cfrovusU.js","./RplContent.nQDl_WWI.css","./RplButton.css.kobVpNhn.js","./RplIcon.vue.NIDikUS0.js","./RplIcon.27IBR2Sj.css","./RplButton.jSZllYZL.css","./AppLayout.vue.nby97MTz.js","./nuxt-link.jgZZZkZ5.js","./RplImage.css.o2mWVvok.js","./RplImage.fa48rDPa.css","./_plugin-vue_export-helper.x3n3nnut.js","./RplTextLink.css.ll_eQGN0.js","./RplLink.vue.TWUjSovo.js","./RplTextLink.7g1ZSSiY.css","./RplList.vue.4pRwhR7E.js","./useRippleEvent.DMJaxZxB.js","./RplExpandable.vue.3-aUufTF.js","./RplExpandable.G47K6rAy.css","./AppLayout.1jyXqt-K.css","./head.UNWUUq-8.js","./document-driven.fnsCO1CX.css","./DocsAlert.qUx9DhKf.js","./DocsCard.NvucPPsI.js","./RplPromoCard.vue.btg01fDe.js","./RplPromoCard.U7lb3VqC.css","./DocsCardGrid.CGE8nz0H.js","./DocsCardGrid.sCrMEARD.css","./DocsColourTable.N8n5f2_3.js","./Swatch.pCyR0PCQ.js","./Swatch.dfSTi7L3.css","./colour.GNNGiHzW.js","./DocsColourTable.mWxxI0pJ.css","./DocsContent.L9iJVoxE.js","./DocsContentNavigation.UDfK-BX9.js","./useDocsNavigation.w75JuMbu.js","./asyncData.6xpne1x0.js","./DocsNavLink.5k-bni1U.js","./DocsNavLink.iBkK3yel.css","./DocsContentNavigation.lN85TjrM.css","./DocsExample.o_g87j4m.js","./DocsLink.5OmhIBHZ.js","./DocsLink.YOCfnOf9.css","./_commonjsHelpers.5-cIlDoe.js","./DocsExample._yJMeD7n.css","./DocsGradientTable.j5XMaAB_.js","./DocsGradientTable.czqdNAJf.css","./DocsGrid.4LuoD9Zu.js","./DocsHeroHeader.PVXBo8Q-.js","./DocsHeroHeader.JdfB6xk5.css","./DocsHomeSection.gUJpqPBN.js","./DocsHomeSection.45GWWSDt.css","./DocsIcon.7thEtIhB.js","./DocsIconSizingTable.xZUIYxKF.js","./DocsIconTable.9o2Ol26d.js","./rpl-lib.es.r8Pb5jxA.js","./DocsIconTable.lACIFBYo.css","./DocsImageExample.gzBXNxRI.js","./node.uMQX-T_c.js","./DocsImageExample.etDyawVJ.css","./DocsLayerStyleTable.OEKkkJyE.js","./DocsLayerStyleTable.gYAP3fnr.css","./DocsModuleCard.hpjmQYW8.js","./DocsModuleInfo.1q5O7tu6.js","./DocsModuleInfo.m6W5ZbkQ.css","./DocsModuleNavigation.1X1oFgOt.js","./DocsModuleNavigation.mdpy6kK5.css","./DocsPageHeader.vbDi0R7z.js","./DocsPageHeader.BGUjycMQ.css","./DocsThemeChooser.MC6JDrOF.js","./DocsThemeChooser.Oj87ew1C.css","./DocsTypeClassTable.JeAjrHD9.js","./DocsTypeClassTable.KfeJInaz.css","./DocsTypeTable.Iq8SBPIK.js","./DocsTypeTable.N1fgbwrY.css","./DocsWhatsNew.3ELaYX2l.js","./DocsWhatsNew.pK_b0kt6.css","./ProseA.gmWvIO0I.js","./ProseBlockquote.lp_k9Hpd.js","./ProseCode.ggTmuEB2.js","./ProseCode.bnW6rBZs.css","./ProseCodeInline.uDpSgjM7.js","./ProseCodeInline.bhuFmOPN.css","./ProseH2.ugZKdBSy.js","./ProseH2.ZSms1WZ_.css","./ProseH3.zV8FfIjw.js","./ProseH3.LwI1hdXI.css","./ProseHr.NdB0-p6G.js","./ProseHr.QhjhBC28.css","./ProseTable.Nr-94ppo.js","./ProseTable._QgQAhQr.css","./ContentDoc.SXcfJrUW.js","./ContentQuery.EOcFbojz.js","./ContentList.UlDpyDEh.js","./ContentNavigation.hJs7QjUE.js","./ContentRendererMarkdown.jF369Aie.js","./ContentSlot.lsaDai_l.js","./Markdown.4yrCw_l0.js","./ProsePre.1p0bzX0t.js","./ProsePre.nIRUQbb-.css","./ProseEm.D-92YCoe.js","./ProseLi.MnotWTMg.js","./ProseOl.jzxVYZcz.js","./ProseP.cG_oeGiJ.js","./ProseStrong.F9NVvvm4.js","./ProseTbody.pO4HZmMb.js","./ProseTd.KWvY0UVz.js","./ProseTh.15m2hyNr.js","./ProseThead.x0xD32yi.js","./ProseTr.NjbdsN4h.js","./ProseUl.GyfBzrRs.js","./home.p0dB_qIA.js","./home.Oi-4-j-2.css","./module-listing.hP89siY4.js","./AppSidebarLayout.vue.aU-pbmdL.js","./AppSidebarLayout.qeUuUiMI.css","./module-listing.CELlW3XU.css","./module.HmGyaUlR.js","./module.owzU6ZXh.css","./page.ciD6J5zn.js","./useStudio.ur6OYxmR.js","./useStudio.6uasHhcj.css","./client-db.W4pfov87.js","./error-404.T0EgPV7K.js","./error-404.6utWGfIQ.css","./error-500.YI21l9fK.js","./error-500.AQosZ7L_.css"]
+    __vite__mapDeps.viteFileDeps = ["./document-driven.R0qWc0WJ.js","./DocumentDrivenEmpty.-Bd5tvR3.js","./ContentRenderer.CHEOl3j3.js","./ContentRendererMarkdown.vue.sDq3Jws6.js","./RplContent.css.7ezTJ87f.js","./RplContent.nQDl_WWI.css","./RplButton.css.bGBZW0Bs.js","./RplIcon.vue.PZ-X7Qhh.js","./RplIcon.27IBR2Sj.css","./RplButton.jSZllYZL.css","./AppLayout.vue.hqX4UWMQ.js","./nuxt-link.sM27-MT7.js","./RplImage.css.ouJWHfa9.js","./RplImage.fa48rDPa.css","./_plugin-vue_export-helper.x3n3nnut.js","./RplTextLink.css.vnmpcBOe.js","./RplLink.vue.3IdzOFUB.js","./RplTextLink.7g1ZSSiY.css","./RplList.vue.i5RvVHLA.js","./useRippleEvent.Eg1owuZM.js","./RplExpandable.vue.ErcNtea4.js","./RplExpandable.G47K6rAy.css","./AppLayout.1jyXqt-K.css","./head.i1ysHgjT.js","./document-driven.fnsCO1CX.css","./DocsAlert.NYyBoUgq.js","./DocsCard.BHyI6viP.js","./RplPromoCard.vue.pyq2iKcr.js","./RplPromoCard.U7lb3VqC.css","./DocsCardGrid.PUHkyZXK.js","./DocsCardGrid.sCrMEARD.css","./DocsColourTable.LKiaprrs.js","./Swatch.FPuuW78y.js","./Swatch.dfSTi7L3.css","./colour.GNNGiHzW.js","./DocsColourTable.mWxxI0pJ.css","./DocsContent.SQZjpxgh.js","./DocsContentNavigation.sYXaW9Re.js","./useDocsNavigation.a2cLzZKV.js","./asyncData.mgwg8A3s.js","./DocsNavLink.k4ZwJ1d1.js","./DocsNavLink.iBkK3yel.css","./DocsContentNavigation.lN85TjrM.css","./DocsExample.TYtIaycF.js","./DocsLink._8mcEyeM.js","./DocsLink.YOCfnOf9.css","./_commonjsHelpers.5-cIlDoe.js","./DocsExample._yJMeD7n.css","./DocsGradientTable.eMExAp1K.js","./DocsGradientTable.czqdNAJf.css","./DocsGrid.CLT9yKLT.js","./DocsHeroHeader.VJrQvyc0.js","./DocsHeroHeader.JdfB6xk5.css","./DocsHomeSection.-8CtU5yK.js","./DocsHomeSection.45GWWSDt.css","./DocsIcon.T-QbG3WZ.js","./DocsIconSizingTable.5KObi_vr.js","./DocsIconTable.SNmL3ofA.js","./rpl-lib.es.b8udu3ko.js","./DocsIconTable.lACIFBYo.css","./DocsImageExample.8UN1-6g4.js","./node.uMQX-T_c.js","./DocsImageExample.etDyawVJ.css","./DocsLayerStyleTable.eVkhneyr.js","./DocsLayerStyleTable.gYAP3fnr.css","./DocsModuleCard.2ZwiOzRg.js","./DocsModuleInfo.dxnzvO_K.js","./DocsModuleInfo.m6W5ZbkQ.css","./DocsModuleNavigation.N74iA2Tc.js","./DocsModuleNavigation.mdpy6kK5.css","./DocsPageHeader.J1YDFRG1.js","./DocsPageHeader.BGUjycMQ.css","./DocsThemeChooser.xp0uGfRQ.js","./DocsThemeChooser.Oj87ew1C.css","./DocsTypeClassTable.c5edmzGt.js","./DocsTypeClassTable.KfeJInaz.css","./DocsTypeTable.S30MUh9q.js","./DocsTypeTable.N1fgbwrY.css","./DocsWhatsNew.iLgRC7ZK.js","./DocsWhatsNew.pK_b0kt6.css","./ProseA.2rbo7RTC.js","./ProseBlockquote.Czpq-HHw.js","./ProseCode.Xz7xMLuq.js","./ProseCode.bnW6rBZs.css","./ProseCodeInline.iJ9KJvnk.js","./ProseCodeInline.bhuFmOPN.css","./ProseH2.G8mCS4ry.js","./ProseH2.ZSms1WZ_.css","./ProseH3.WHOIDSwD.js","./ProseH3.LwI1hdXI.css","./ProseHr.uASz6lXf.js","./ProseHr.QhjhBC28.css","./ProseTable.d8cdIzif.js","./ProseTable._QgQAhQr.css","./ContentDoc.zyRxlzIB.js","./ContentQuery.OgHSivmp.js","./ContentList.ux5QQJBH.js","./ContentNavigation.CfUahY4n.js","./ContentRendererMarkdown.zskQ2UNQ.js","./ContentSlot.uUI9CND_.js","./Markdown.vjX68Z-B.js","./ProsePre.928ctTB_.js","./ProsePre.nIRUQbb-.css","./ProseEm.jWeQl8xp.js","./ProseLi.kWofYoPt.js","./ProseOl.f55gcGCc.js","./ProseP.xOmAEUok.js","./ProseStrong.GmB4B_NE.js","./ProseTbody.FPzd5AuU.js","./ProseTd.ydAecYY-.js","./ProseTh.GnFrmIgb.js","./ProseThead.alimbSyj.js","./ProseTr.rCUlpnCA.js","./ProseUl.ajqmVD2y.js","./home.f8bXHl7K.js","./home.Oi-4-j-2.css","./module-listing.zWMX5a25.js","./AppSidebarLayout.vue.6sfT1On1.js","./AppSidebarLayout.qeUuUiMI.css","./module-listing.CELlW3XU.css","./module.ZEpf0cR7.js","./module.owzU6ZXh.css","./page.dJj1_Sl3.js","./useStudio.1zk0psWL.js","./useStudio.6uasHhcj.css","./client-db.lwmN9NLn.js","./error-404.7ZxJfF8q.js","./error-404.6utWGfIQ.css","./error-500.zxG8rMw4.js","./error-500.AQosZ7L_.css"]
   }
   return indexes.map((i) => __vite__mapDeps.viteFileDeps[i])
 }
diff --git a/_nuxt/error-404.T0EgPV7K.js b/_nuxt/error-404.7ZxJfF8q.js
similarity index 94%
rename from _nuxt/error-404.T0EgPV7K.js
rename to _nuxt/error-404.7ZxJfF8q.js
index e763b96a08..ceb120639c 100644
--- a/_nuxt/error-404.T0EgPV7K.js
+++ b/_nuxt/error-404.7ZxJfF8q.js
@@ -1 +1 @@
-import{_ as a}from"./nuxt-link.jgZZZkZ5.js";import{C as n,b as r,c as l,e,t as s,g as d,w as c,D as p,p as m,i as f}from"./entry.49ZHHvLB.js";import{_ as h}from"./_plugin-vue_export-helper.x3n3nnut.js";const x=t=>(m("data-v-05a2b8a3"),t=t(),f(),t),g={class:"font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden"},u=x(()=>e("div",{class:"fixed left-0 right-0 spotlight z-10"},null,-1)),b={class:"max-w-520px text-center z-20"},_=["textContent"],w=["textContent"],y={class:"w-full flex items-center justify-center"},S={__name:"error-404",props:{appName:{type:String,default:"Nuxt"},version:{type:String,default:""},statusCode:{type:Number,default:404},statusMessage:{type:String,default:"Not Found"},description:{type:String,default:"Sorry, the page you are looking for could not be found."},backHome:{type:String,default:"Go back home"}},setup(t){const o=t;return n({title:`${o.statusCode} - ${o.statusMessage} | ${o.appName}`,script:[],style:[{children:'*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}'}]}),(k,N)=>{const i=a;return r(),l("div",g,[u,e("div",b,[e("h1",{class:"text-8xl sm:text-10xl font-medium mb-8",textContent:s(t.statusCode)},null,8,_),e("p",{class:"text-xl px-8 sm:px-0 sm:text-4xl font-light mb-16 leading-tight",textContent:s(t.description)},null,8,w),e("div",y,[d(i,{to:"/",class:"gradient-border text-md sm:text-xl py-2 px-4 sm:py-3 sm:px-6 cursor-pointer"},{default:c(()=>[p(s(t.backHome),1)]),_:1})])])])}}},I=h(S,[["__scopeId","data-v-05a2b8a3"]]);export{I as default};
+import{_ as a}from"./nuxt-link.sM27-MT7.js";import{C as n,b as r,c as l,e,t as s,g as d,w as c,D as p,p as m,i as f}from"./entry.Do8xnxHS.js";import{_ as h}from"./_plugin-vue_export-helper.x3n3nnut.js";const x=t=>(m("data-v-05a2b8a3"),t=t(),f(),t),g={class:"font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden"},u=x(()=>e("div",{class:"fixed left-0 right-0 spotlight z-10"},null,-1)),b={class:"max-w-520px text-center z-20"},_=["textContent"],w=["textContent"],y={class:"w-full flex items-center justify-center"},S={__name:"error-404",props:{appName:{type:String,default:"Nuxt"},version:{type:String,default:""},statusCode:{type:Number,default:404},statusMessage:{type:String,default:"Not Found"},description:{type:String,default:"Sorry, the page you are looking for could not be found."},backHome:{type:String,default:"Go back home"}},setup(t){const o=t;return n({title:`${o.statusCode} - ${o.statusMessage} | ${o.appName}`,script:[],style:[{children:'*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}a{color:inherit;text-decoration:inherit}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}'}]}),(k,N)=>{const i=a;return r(),l("div",g,[u,e("div",b,[e("h1",{class:"text-8xl sm:text-10xl font-medium mb-8",textContent:s(t.statusCode)},null,8,_),e("p",{class:"text-xl px-8 sm:px-0 sm:text-4xl font-light mb-16 leading-tight",textContent:s(t.description)},null,8,w),e("div",y,[d(i,{to:"/",class:"gradient-border text-md sm:text-xl py-2 px-4 sm:py-3 sm:px-6 cursor-pointer"},{default:c(()=>[p(s(t.backHome),1)]),_:1})])])])}}},I=h(S,[["__scopeId","data-v-05a2b8a3"]]);export{I as default};
diff --git a/_nuxt/error-500.YI21l9fK.js b/_nuxt/error-500.zxG8rMw4.js
similarity index 96%
rename from _nuxt/error-500.YI21l9fK.js
rename to _nuxt/error-500.zxG8rMw4.js
index 115e5befea..cf0358206b 100644
--- a/_nuxt/error-500.YI21l9fK.js
+++ b/_nuxt/error-500.zxG8rMw4.js
@@ -1 +1 @@
-import{C as i,b as a,c as r,e,t as s,p as n,i as l}from"./entry.49ZHHvLB.js";import{_ as d}from"./_plugin-vue_export-helper.x3n3nnut.js";const c=t=>(n("data-v-c967d9a9"),t=t(),l(),t),p={class:"font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden"},h=c(()=>e("div",{class:"fixed -bottom-1/2 left-0 right-0 h-1/2 spotlight"},null,-1)),f={class:"max-w-520px text-center"},m=["textContent"],g=["textContent"],x={__name:"error-500",props:{appName:{type:String,default:"Nuxt"},version:{type:String,default:""},statusCode:{type:Number,default:500},statusMessage:{type:String,default:"Server error"},description:{type:String,default:"This page is temporarily unavailable."}},setup(t){const o=t;return i({title:`${o.statusCode} - ${o.statusMessage} | ${o.appName}`,script:[],style:[{children:'*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}'}]}),(b,u)=>(a(),r("div",p,[h,e("div",f,[e("h1",{class:"text-8xl sm:text-10xl font-medium mb-8",textContent:s(t.statusCode)},null,8,m),e("p",{class:"text-xl px-8 sm:px-0 sm:text-4xl font-light mb-16 leading-tight",textContent:s(t.description)},null,8,g)])]))}},y=d(x,[["__scopeId","data-v-c967d9a9"]]);export{y as default};
+import{C as i,b as a,c as r,e,t as s,p as n,i as l}from"./entry.Do8xnxHS.js";import{_ as d}from"./_plugin-vue_export-helper.x3n3nnut.js";const c=t=>(n("data-v-c967d9a9"),t=t(),l(),t),p={class:"font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden"},h=c(()=>e("div",{class:"fixed -bottom-1/2 left-0 right-0 h-1/2 spotlight"},null,-1)),f={class:"max-w-520px text-center"},m=["textContent"],g=["textContent"],x={__name:"error-500",props:{appName:{type:String,default:"Nuxt"},version:{type:String,default:""},statusCode:{type:Number,default:500},statusMessage:{type:String,default:"Server error"},description:{type:String,default:"This page is temporarily unavailable."}},setup(t){const o=t;return i({title:`${o.statusCode} - ${o.statusMessage} | ${o.appName}`,script:[],style:[{children:'*,:before,:after{-webkit-box-sizing:border-box;box-sizing:border-box;border-width:0;border-style:solid;border-color:#e0e0e0}*{--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(14, 165, 233, .5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}:root{-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{margin:0;font-family:inherit;line-height:inherit}html{-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}h1,p{margin:0}h1{font-size:inherit;font-weight:inherit}'}]}),(b,u)=>(a(),r("div",p,[h,e("div",f,[e("h1",{class:"text-8xl sm:text-10xl font-medium mb-8",textContent:s(t.statusCode)},null,8,m),e("p",{class:"text-xl px-8 sm:px-0 sm:text-4xl font-light mb-16 leading-tight",textContent:s(t.description)},null,8,g)])]))}},y=d(x,[["__scopeId","data-v-c967d9a9"]]);export{y as default};
diff --git a/_nuxt/head.UNWUUq-8.js b/_nuxt/head.i1ysHgjT.js
similarity index 78%
rename from _nuxt/head.UNWUUq-8.js
rename to _nuxt/head.i1ysHgjT.js
index a14abe0ebe..4c86c3713a 100644
--- a/_nuxt/head.UNWUUq-8.js
+++ b/_nuxt/head.i1ysHgjT.js
@@ -1 +1 @@
-import{N as o,Z as f,m as p,A as l,C as g,k as h}from"./entry.49ZHHvLB.js";const C=(n,c=p())=>{const r=o(n),m=h();f(()=>o(n),(i=r)=>{if(!c.path||!i)return;const e=Object.assign({},(i==null?void 0:i.head)||{});e.meta=[...e.meta||[]],e.link=[...e.link||[]];const s=e.title||(i==null?void 0:i.title);s&&(e.title=s),m.public.content.host;const t=(e==null?void 0:e.description)||(i==null?void 0:i.description);t&&e.meta.filter(u=>u.name==="description").length===0&&e.meta.push({name:"description",content:t}),e!=null&&e.image||(i==null||i.image),l(()=>g(e))},{immediate:!0})};export{C as u};
+import{N as o,Z as f,m as p,A as l,C as g,k as h}from"./entry.Do8xnxHS.js";const C=(n,c=p())=>{const r=o(n),m=h();f(()=>o(n),(i=r)=>{if(!c.path||!i)return;const e=Object.assign({},(i==null?void 0:i.head)||{});e.meta=[...e.meta||[]],e.link=[...e.link||[]];const s=e.title||(i==null?void 0:i.title);s&&(e.title=s),m.public.content.host;const t=(e==null?void 0:e.description)||(i==null?void 0:i.description);t&&e.meta.filter(u=>u.name==="description").length===0&&e.meta.push({name:"description",content:t}),e!=null&&e.image||(i==null||i.image),l(()=>g(e))},{immediate:!0})};export{C as u};
diff --git a/_nuxt/home.p0dB_qIA.js b/_nuxt/home.f8bXHl7K.js
similarity index 83%
rename from _nuxt/home.p0dB_qIA.js
rename to _nuxt/home.f8bXHl7K.js
index f3a48e2c72..e38d60677d 100644
--- a/_nuxt/home.p0dB_qIA.js
+++ b/_nuxt/home.f8bXHl7K.js
@@ -1 +1 @@
-import{o as B,a as S,d as $,J as q,r as E,b as a,c as v,g as l,e as o,t as i,G as h,w as s,D as H,f as _,n as P,E as U,V,v as I,N as t,az as u,aA as f,Q as G,a0 as M}from"./entry.49ZHHvLB.js";import{_ as b}from"./RplIcon.vue.NIDikUS0.js";import{_ as O}from"./RplTextLink.css.ll_eQGN0.js";import{u as F}from"./useRippleEvent.DMJaxZxB.js";import{_ as D}from"./_plugin-vue_export-helper.x3n3nnut.js";import J from"./DocsHeroHeader.PVXBo8Q-.js";import{_ as Q}from"./RplPromoCard.vue.btg01fDe.js";import W from"./DocsHomeSection.gUJpqPBN.js";import j from"./ContentRenderer.CgXd06ZK.js";import{_ as K}from"./RplContent.css.cfrovusU.js";import X from"./DocsWhatsNew.3ELaYX2l.js";import{_ as Y}from"./AppLayout.vue.nby97MTz.js";import{u as Z}from"./head.UNWUUq-8.js";import"./RplLink.vue.TWUjSovo.js";import"./RplImage.css.o2mWVvok.js";import"./ContentRendererMarkdown.vue.cUVXlmIq.js";import"./RplList.vue.4pRwhR7E.js";import"./RplButton.css.kobVpNhn.js";import"./nuxt-link.jgZZZkZ5.js";import"./RplExpandable.vue.3-aUufTF.js";const ee=(c,e)=>{if(typeof window<"u"){const r=new ResizeObserver(m=>{e(m[0].contentRect.height)});B(()=>{c.value&&(r.observe(c.value),window.addEventListener("resize",e))}),S(()=>{r.disconnect(),window.removeEventListener("resize",e)})}},te=["aria-labelledby"],oe={class:"rpl-alert__message-wrap"},se=["id"],R="Dismiss alert",le=$({__name:"RplAlert",props:{variant:{default:"information"},iconName:{default:"icon-information-circle-filled"},message:{default:""},linkText:{default:""},linkUrl:{default:""},dismissed:{type:Boolean,default:!1},alertId:{},isDismissible:{type:Boolean,default:!0}},emits:["dismiss"],setup(c,{emit:e}){const r=c,m=e,{emitRplEvent:y}=F("rpl-alert",m),w=()=>{y("dismiss",{id:r.alertId,action:"close",label:r.message,text:R},{global:!0})},g=q(()=>({"rpl-alert":!0,[`rpl-alert--${r.variant}`]:r.variant,"rpl-alert--closed":r.dismissed,"rpl-u-screen-only":!0})),p=E(null);return ee(p,n=>{p.value&&p.value.style.display!=="none"&&p.value.style.setProperty("--local-container-height",`${n}px`)}),(n,C)=>(a(),v("div",{ref_key:"alertRef",ref:p,class:P(g.value)},[n.dismissed?_("",!0):(a(),v("div",{key:0,class:"rpl-alert__inner",role:"region","aria-labelledby":`alert-message-${r.alertId}`},[l(b,{class:"rpl-alert__icon-info",size:"m",nopad:"",name:n.iconName},null,8,["name"]),o("div",oe,[o("div",{id:`alert-message-${r.alertId}`,class:"rpl-alert__message rpl-type-label rpl-type-weight-bold"},i(n.message),9,se),n.linkText&&n.linkUrl?(a(),h(O,{key:0,class:"rpl-alert__link rpl-type-p rpl-u-focusable--alt-colour",url:n.linkUrl},{default:s(()=>[H(i(n.linkText),1),l(b,{name:"icon-arrow-right"})]),_:1},8,["url"])):_("",!0)]),n.isDismissible?(a(),v("button",{key:0,class:"rpl-alert__btn-close rpl-u-focusable-inline rpl-u-focusable--alt-colour","data-cy":"dismiss",onClick:w},[l(b,{title:R,name:"icon-cancel"})])):_("",!0)],8,te))],2))}}),re={},ne={class:"rpl-alert-container"};function ie(c,e){return a(),v("div",ne,[U(c.$slots,"default")])}const ae=D(re,[["render",ie]]),ce={class:"docs-home-getting-started"},pe={class:"rpl-container"},de={class:"rpl-grid"},_e={class:"rpl-col-12 rpl-col-6-m"},me={class:"rpl-col-12 rpl-col-6-m"},ue={class:"rpl-grid"},fe={class:"rpl-col-12 rpl-col-6-m rpl-col-4-l"},he={class:"rpl-col-12 rpl-col-6-m rpl-col-4-l"},ke={class:"rpl-col-12 rpl-col-12-m rpl-col-4-l"},ve={class:"rpl-col-12"},ye=$({__name:"home",setup(c){const{page:e,toc:r}=V(),{title:m,subheader:y,description:w,hideModulesSection:g}=I();return Z(e),(p,n)=>{const C=le,N=ae,z=J,d=Q,k=W,A=j,T=K,L=X,x=Y;return a(),h(x,{background:"alt"},{aboveHeader:s(()=>[l(N,null,{default:s(()=>[l(C,{message:"These Docs are for Ripple version 2.0. If you are looking for the original Ripple Storybook please click below",linkText:"View Ripple 1 storybook",linkUrl:"https://master--5e736ff82649250022dd830c.chromatic.com/","alert-id":"storybook-alert",isDismissible:!1})]),_:1})]),aboveBody:s(()=>[l(z,{title:t(m),description:t(y)},null,8,["title","description"]),o("div",ce,[o("div",pe,[l(k,{title:"Getting Started"},{default:s(()=>[o("div",de,[o("div",_e,[l(d,u(f(t(e).primaryCTA)),{default:s(()=>[o("p",null,i(t(e).primaryCTA.description),1)]),_:1},16)]),o("div",me,[l(d,u(f(t(e).secondaryCTA)),{default:s(()=>[o("p",null,i(t(e).secondaryCTA.description),1)]),_:1},16)])])]),_:1})])])]),belowBody:s(()=>[t(e).whatsNew?(a(),h(L,{key:0,title:t(e).whatsNew.title,links:t(e).whatsNew.links},{default:s(()=>[l(T,null,{default:s(()=>[o("p",null,i(t(e).whatsNew.description),1)]),_:1})]),_:1},8,["title","links"])):_("",!0)]),default:s(()=>[l(k,{title:"Find out more"},{default:s(()=>[o("div",ue,[o("div",fe,[l(d,u(f(t(e).quickLink1)),{default:s(()=>[o("p",null,i(t(e).quickLink1.description),1)]),_:1},16)]),o("div",he,[l(d,u(f(t(e).quickLink2)),{default:s(()=>[o("p",null,i(t(e).quickLink2.description),1)]),_:1},16)]),o("div",ke,[l(d,u(f(t(e).quickLink3)),{default:s(()=>[o("p",null,i(t(e).quickLink3.description),1)]),_:1},16)])])]),_:1}),!t(g)&&t(e).modulesCTA?(a(),h(k,{key:0,title:"Using Ripple in SDP sites"},{default:s(()=>[o("div",{class:"rpl-grid",style:M({"--rpl-clr-gradient-horizontal":"var(--rpl-clr-dark)"})},[o("div",ve,[l(d,G(t(e).framework,{highlight:""}),{default:s(()=>[o("p",null,i(t(e).framework.description),1)]),_:1},16)])],4)]),_:1})):_("",!0),l(k,null,{default:s(()=>[t(e)&&!t(e)._empty?(a(),h(A,{tag:"DocsContent",class:"content-full",key:t(e)._id,value:t(e)},null,8,["value"])):_("",!0)]),_:1})]),_:1})}}}),Ve=D(ye,[["__scopeId","data-v-a9424485"]]);export{Ve as default};
+import{o as B,a as S,d as $,J as q,r as E,b as a,c as v,g as l,e as o,t as i,G as h,w as s,D as H,f as _,n as P,E as U,V,v as I,N as t,az as u,aA as f,Q as G,a0 as M}from"./entry.Do8xnxHS.js";import{_ as b}from"./RplIcon.vue.PZ-X7Qhh.js";import{_ as O}from"./RplTextLink.css.vnmpcBOe.js";import{u as F}from"./useRippleEvent.Eg1owuZM.js";import{_ as D}from"./_plugin-vue_export-helper.x3n3nnut.js";import J from"./DocsHeroHeader.VJrQvyc0.js";import{_ as Q}from"./RplPromoCard.vue.pyq2iKcr.js";import W from"./DocsHomeSection.-8CtU5yK.js";import j from"./ContentRenderer.CHEOl3j3.js";import{_ as K}from"./RplContent.css.7ezTJ87f.js";import X from"./DocsWhatsNew.iLgRC7ZK.js";import{_ as Y}from"./AppLayout.vue.hqX4UWMQ.js";import{u as Z}from"./head.i1ysHgjT.js";import"./RplLink.vue.3IdzOFUB.js";import"./RplImage.css.ouJWHfa9.js";import"./ContentRendererMarkdown.vue.sDq3Jws6.js";import"./RplList.vue.i5RvVHLA.js";import"./RplButton.css.bGBZW0Bs.js";import"./nuxt-link.sM27-MT7.js";import"./RplExpandable.vue.ErcNtea4.js";const ee=(c,e)=>{if(typeof window<"u"){const r=new ResizeObserver(m=>{e(m[0].contentRect.height)});B(()=>{c.value&&(r.observe(c.value),window.addEventListener("resize",e))}),S(()=>{r.disconnect(),window.removeEventListener("resize",e)})}},te=["aria-labelledby"],oe={class:"rpl-alert__message-wrap"},se=["id"],R="Dismiss alert",le=$({__name:"RplAlert",props:{variant:{default:"information"},iconName:{default:"icon-information-circle-filled"},message:{default:""},linkText:{default:""},linkUrl:{default:""},dismissed:{type:Boolean,default:!1},alertId:{},isDismissible:{type:Boolean,default:!0}},emits:["dismiss"],setup(c,{emit:e}){const r=c,m=e,{emitRplEvent:y}=F("rpl-alert",m),w=()=>{y("dismiss",{id:r.alertId,action:"close",label:r.message,text:R},{global:!0})},g=q(()=>({"rpl-alert":!0,[`rpl-alert--${r.variant}`]:r.variant,"rpl-alert--closed":r.dismissed,"rpl-u-screen-only":!0})),p=E(null);return ee(p,n=>{p.value&&p.value.style.display!=="none"&&p.value.style.setProperty("--local-container-height",`${n}px`)}),(n,C)=>(a(),v("div",{ref_key:"alertRef",ref:p,class:P(g.value)},[n.dismissed?_("",!0):(a(),v("div",{key:0,class:"rpl-alert__inner",role:"region","aria-labelledby":`alert-message-${r.alertId}`},[l(b,{class:"rpl-alert__icon-info",size:"m",nopad:"",name:n.iconName},null,8,["name"]),o("div",oe,[o("div",{id:`alert-message-${r.alertId}`,class:"rpl-alert__message rpl-type-label rpl-type-weight-bold"},i(n.message),9,se),n.linkText&&n.linkUrl?(a(),h(O,{key:0,class:"rpl-alert__link rpl-type-p rpl-u-focusable--alt-colour",url:n.linkUrl},{default:s(()=>[H(i(n.linkText),1),l(b,{name:"icon-arrow-right"})]),_:1},8,["url"])):_("",!0)]),n.isDismissible?(a(),v("button",{key:0,class:"rpl-alert__btn-close rpl-u-focusable-inline rpl-u-focusable--alt-colour","data-cy":"dismiss",onClick:w},[l(b,{title:R,name:"icon-cancel"})])):_("",!0)],8,te))],2))}}),re={},ne={class:"rpl-alert-container"};function ie(c,e){return a(),v("div",ne,[U(c.$slots,"default")])}const ae=D(re,[["render",ie]]),ce={class:"docs-home-getting-started"},pe={class:"rpl-container"},de={class:"rpl-grid"},_e={class:"rpl-col-12 rpl-col-6-m"},me={class:"rpl-col-12 rpl-col-6-m"},ue={class:"rpl-grid"},fe={class:"rpl-col-12 rpl-col-6-m rpl-col-4-l"},he={class:"rpl-col-12 rpl-col-6-m rpl-col-4-l"},ke={class:"rpl-col-12 rpl-col-12-m rpl-col-4-l"},ve={class:"rpl-col-12"},ye=$({__name:"home",setup(c){const{page:e,toc:r}=V(),{title:m,subheader:y,description:w,hideModulesSection:g}=I();return Z(e),(p,n)=>{const C=le,N=ae,z=J,d=Q,k=W,A=j,T=K,L=X,x=Y;return a(),h(x,{background:"alt"},{aboveHeader:s(()=>[l(N,null,{default:s(()=>[l(C,{message:"These Docs are for Ripple version 2.0. If you are looking for the original Ripple Storybook please click below",linkText:"View Ripple 1 storybook",linkUrl:"https://master--5e736ff82649250022dd830c.chromatic.com/","alert-id":"storybook-alert",isDismissible:!1})]),_:1})]),aboveBody:s(()=>[l(z,{title:t(m),description:t(y)},null,8,["title","description"]),o("div",ce,[o("div",pe,[l(k,{title:"Getting Started"},{default:s(()=>[o("div",de,[o("div",_e,[l(d,u(f(t(e).primaryCTA)),{default:s(()=>[o("p",null,i(t(e).primaryCTA.description),1)]),_:1},16)]),o("div",me,[l(d,u(f(t(e).secondaryCTA)),{default:s(()=>[o("p",null,i(t(e).secondaryCTA.description),1)]),_:1},16)])])]),_:1})])])]),belowBody:s(()=>[t(e).whatsNew?(a(),h(L,{key:0,title:t(e).whatsNew.title,links:t(e).whatsNew.links},{default:s(()=>[l(T,null,{default:s(()=>[o("p",null,i(t(e).whatsNew.description),1)]),_:1})]),_:1},8,["title","links"])):_("",!0)]),default:s(()=>[l(k,{title:"Find out more"},{default:s(()=>[o("div",ue,[o("div",fe,[l(d,u(f(t(e).quickLink1)),{default:s(()=>[o("p",null,i(t(e).quickLink1.description),1)]),_:1},16)]),o("div",he,[l(d,u(f(t(e).quickLink2)),{default:s(()=>[o("p",null,i(t(e).quickLink2.description),1)]),_:1},16)]),o("div",ke,[l(d,u(f(t(e).quickLink3)),{default:s(()=>[o("p",null,i(t(e).quickLink3.description),1)]),_:1},16)])])]),_:1}),!t(g)&&t(e).modulesCTA?(a(),h(k,{key:0,title:"Using Ripple in SDP sites"},{default:s(()=>[o("div",{class:"rpl-grid",style:M({"--rpl-clr-gradient-horizontal":"var(--rpl-clr-dark)"})},[o("div",ve,[l(d,G(t(e).framework,{highlight:""}),{default:s(()=>[o("p",null,i(t(e).framework.description),1)]),_:1},16)])],4)]),_:1})):_("",!0),l(k,null,{default:s(()=>[t(e)&&!t(e)._empty?(a(),h(A,{tag:"DocsContent",class:"content-full",key:t(e)._id,value:t(e)},null,8,["value"])):_("",!0)]),_:1})]),_:1})}}}),Ve=D(ye,[["__scopeId","data-v-a9424485"]]);export{Ve as default};
diff --git a/_nuxt/icon-accessible.IgfNK4Jg.js b/_nuxt/icon-accessible.JERWHslr.js
similarity index 90%
rename from _nuxt/icon-accessible.IgfNK4Jg.js
rename to _nuxt/icon-accessible.JERWHslr.js
index f845e4a506..6293356597 100644
--- a/_nuxt/icon-accessible.IgfNK4Jg.js
+++ b/_nuxt/icon-accessible.JERWHslr.js
@@ -1 +1 @@
-import{b as e,c as t,e as c}from"./entry.49ZHHvLB.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=c("circle",{cx:"9",cy:"3",r:"3"},null,-1),l=c("path",{d:"m23.9 19.4-.7-1.3c-.2-.4-.6-.5-1-.3l-1.7.9-2.7-5.7c-.2-.5-.8-.9-1.4-.9h-6.2l-.2-1.5h5.7c.4 0 .8-.3.8-.7V8.3c0-.4-.3-.8-.8-.8H6.6l.9 6.2c.1.8.8 1.3 1.5 1.3h6.5l2.9 6.3c.4.8 1.3 1.1 2 .7l3.1-1.5c.5-.3.6-.7.4-1.1z"},null,-1),n=c("path",{d:"M13.4 16.5C13.1 19 10.9 21 8.2 21 5.4 21 3 18.6 3 15.8c0-1.9 1.1-3.6 2.6-4.6-.1-1.2-.3-2.2-.4-3.1-3 1.2-5.2 4.2-5.2 7.7C0 20.3 3.7 24 8.2 24c3.4 0 6.3-2 7.6-4.9l-1.2-2.6h-1.2z"},null,-1),r=[s,l,n];function h(_,a){return e(),t("svg",o,r)}const i={render:h};export{i as default,h as render};
+import{b as e,c as t,e as c}from"./entry.Do8xnxHS.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=c("circle",{cx:"9",cy:"3",r:"3"},null,-1),l=c("path",{d:"m23.9 19.4-.7-1.3c-.2-.4-.6-.5-1-.3l-1.7.9-2.7-5.7c-.2-.5-.8-.9-1.4-.9h-6.2l-.2-1.5h5.7c.4 0 .8-.3.8-.7V8.3c0-.4-.3-.8-.8-.8H6.6l.9 6.2c.1.8.8 1.3 1.5 1.3h6.5l2.9 6.3c.4.8 1.3 1.1 2 .7l3.1-1.5c.5-.3.6-.7.4-1.1z"},null,-1),n=c("path",{d:"M13.4 16.5C13.1 19 10.9 21 8.2 21 5.4 21 3 18.6 3 15.8c0-1.9 1.1-3.6 2.6-4.6-.1-1.2-.3-2.2-.4-3.1-3 1.2-5.2 4.2-5.2 7.7C0 20.3 3.7 24 8.2 24c3.4 0 6.3-2 7.6-4.9l-1.2-2.6h-1.2z"},null,-1),r=[s,l,n];function h(_,a){return e(),t("svg",o,r)}const i={render:h};export{i as default,h as render};
diff --git a/_nuxt/icon-add.kzXPKrGl.js b/_nuxt/icon-add.hkhs5vZ-.js
similarity index 82%
rename from _nuxt/icon-add.kzXPKrGl.js
rename to _nuxt/icon-add.hkhs5vZ-.js
index faed5b4993..29376edf92 100644
--- a/_nuxt/icon-add.kzXPKrGl.js
+++ b/_nuxt/icon-add.hkhs5vZ-.js
@@ -1 +1 @@
-import{b as e,c as s,e as t}from"./entry.49ZHHvLB.js";const c={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},o=t("path",{d:"M22 10h-8V2c0-1.1-.9-2-2-2s-2 .9-2 2v8H2c-1.1 0-2 .9-2 2s.9 2 2 2h8v8c0 1.1.9 2 2 2s2-.9 2-2v-8h8c1.1 0 2-.9 2-2s-.9-2-2-2z"},null,-1),n=[o];function r(a,d){return e(),s("svg",c,n)}const _={render:r};export{_ as default,r as render};
+import{b as e,c as s,e as t}from"./entry.Do8xnxHS.js";const c={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},o=t("path",{d:"M22 10h-8V2c0-1.1-.9-2-2-2s-2 .9-2 2v8H2c-1.1 0-2 .9-2 2s.9 2 2 2h8v8c0 1.1.9 2 2 2s2-.9 2-2v-8h8c1.1 0 2-.9 2-2s-.9-2-2-2z"},null,-1),n=[o];function r(a,d){return e(),s("svg",c,n)}const _={render:r};export{_ as default,r as render};
diff --git a/_nuxt/icon-arrow-down.2v2hp4Xt.js b/_nuxt/icon-arrow-down.SQ1bOEHB.js
similarity index 85%
rename from _nuxt/icon-arrow-down.2v2hp4Xt.js
rename to _nuxt/icon-arrow-down.SQ1bOEHB.js
index 61639810b3..8c2e91946e 100644
--- a/_nuxt/icon-arrow-down.2v2hp4Xt.js
+++ b/_nuxt/icon-arrow-down.SQ1bOEHB.js
@@ -1 +1 @@
-import{b as e,c,e as o}from"./entry.49ZHHvLB.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},n=o("path",{d:"m23.6 11.4-1.2-1.2c-.5-.5-1.4-.5-1.9 0l-6.3 6.5V1.3c0-.7-.6-1.3-1.3-1.3h-1.8c-.7 0-1.3.6-1.3 1.3v15.4l-6.3-6.5c-.5-.5-1.4-.5-1.9 0L.4 11.4c-.5.5-.5 1.3 0 1.8l10.7 10.4c.5.5 1.3.5 1.9 0l10.7-10.4c.4-.5.4-1.3-.1-1.8z"},null,-1),s=[n];function r(l,a){return e(),c("svg",t,s)}const _={render:r};export{_ as default,r as render};
+import{b as e,c,e as o}from"./entry.Do8xnxHS.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},n=o("path",{d:"m23.6 11.4-1.2-1.2c-.5-.5-1.4-.5-1.9 0l-6.3 6.5V1.3c0-.7-.6-1.3-1.3-1.3h-1.8c-.7 0-1.3.6-1.3 1.3v15.4l-6.3-6.5c-.5-.5-1.4-.5-1.9 0L.4 11.4c-.5.5-.5 1.3 0 1.8l10.7 10.4c.5.5 1.3.5 1.9 0l10.7-10.4c.4-.5.4-1.3-.1-1.8z"},null,-1),s=[n];function r(l,a){return e(),c("svg",t,s)}const _={render:r};export{_ as default,r as render};
diff --git a/_nuxt/icon-arrow-left.0NIGiU1P.js b/_nuxt/icon-arrow-left.HVFcOuPq.js
similarity index 85%
rename from _nuxt/icon-arrow-left.0NIGiU1P.js
rename to _nuxt/icon-arrow-left.HVFcOuPq.js
index b2d772d501..26a4497206 100644
--- a/_nuxt/icon-arrow-left.0NIGiU1P.js
+++ b/_nuxt/icon-arrow-left.HVFcOuPq.js
@@ -1 +1 @@
-import{b as e,c,e as t}from"./entry.49ZHHvLB.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=t("path",{d:"M22.7 9.8H7.3l6.5-6.3c.5-.5.5-1.4 0-1.9L12.6.4c-.5-.5-1.3-.5-1.8 0L.4 11.1c-.5.5-.5 1.3 0 1.9l10.4 10.7c.5.5 1.3.5 1.8 0l1.2-1.2c.5-.5.5-1.4 0-1.9l-6.5-6.3h15.4c.7 0 1.3-.6 1.3-1.3v-1.8c0-.8-.6-1.4-1.3-1.4z"},null,-1),n=[s];function r(l,a){return e(),c("svg",o,n)}const _={render:r};export{_ as default,r as render};
+import{b as e,c,e as t}from"./entry.Do8xnxHS.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=t("path",{d:"M22.7 9.8H7.3l6.5-6.3c.5-.5.5-1.4 0-1.9L12.6.4c-.5-.5-1.3-.5-1.8 0L.4 11.1c-.5.5-.5 1.3 0 1.9l10.4 10.7c.5.5 1.3.5 1.8 0l1.2-1.2c.5-.5.5-1.4 0-1.9l-6.5-6.3h15.4c.7 0 1.3-.6 1.3-1.3v-1.8c0-.8-.6-1.4-1.3-1.4z"},null,-1),n=[s];function r(l,a){return e(),c("svg",o,n)}const _={render:r};export{_ as default,r as render};
diff --git a/_nuxt/icon-arrow-right.G4JTPGc2.js b/_nuxt/icon-arrow-right.Z7s6RWiM.js
similarity index 85%
rename from _nuxt/icon-arrow-right.G4JTPGc2.js
rename to _nuxt/icon-arrow-right.Z7s6RWiM.js
index 9676ea36ec..239cc76f57 100644
--- a/_nuxt/icon-arrow-right.G4JTPGc2.js
+++ b/_nuxt/icon-arrow-right.Z7s6RWiM.js
@@ -1 +1 @@
-import{b as e,c,e as t}from"./entry.49ZHHvLB.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=t("path",{d:"M23.6 11.1 13.2.4c-.5-.5-1.3-.5-1.8 0l-1.2 1.2c-.5.5-.5 1.4 0 1.9l6.5 6.3H1.3c-.7 0-1.3.6-1.3 1.3v1.8c0 .7.6 1.3 1.3 1.3h15.4l-6.5 6.3c-.5.5-.5 1.4 0 1.9l1.2 1.2c.5.5 1.3.5 1.8 0l10.4-10.7c.5-.5.5-1.3 0-1.8z"},null,-1),n=[s];function r(l,a){return e(),c("svg",o,n)}const h={render:r};export{h as default,r as render};
+import{b as e,c,e as t}from"./entry.Do8xnxHS.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=t("path",{d:"M23.6 11.1 13.2.4c-.5-.5-1.3-.5-1.8 0l-1.2 1.2c-.5.5-.5 1.4 0 1.9l6.5 6.3H1.3c-.7 0-1.3.6-1.3 1.3v1.8c0 .7.6 1.3 1.3 1.3h15.4l-6.5 6.3c-.5.5-.5 1.4 0 1.9l1.2 1.2c.5.5 1.3.5 1.8 0l10.4-10.7c.5-.5.5-1.3 0-1.8z"},null,-1),n=[s];function r(l,a){return e(),c("svg",o,n)}const h={render:r};export{h as default,r as render};
diff --git a/_nuxt/icon-arrow-up.PSS8jaD7.js b/_nuxt/icon-arrow-up.5ibpXQnN.js
similarity index 85%
rename from _nuxt/icon-arrow-up.PSS8jaD7.js
rename to _nuxt/icon-arrow-up.5ibpXQnN.js
index bde289ec31..c4debe4e1e 100644
--- a/_nuxt/icon-arrow-up.PSS8jaD7.js
+++ b/_nuxt/icon-arrow-up.5ibpXQnN.js
@@ -1 +1 @@
-import{b as e,c,e as o}from"./entry.49ZHHvLB.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=o("path",{d:"M23.6 10.8 12.9.4c-.5-.5-1.3-.5-1.9 0L.4 10.8c-.5.5-.5 1.3 0 1.8l1.2 1.2c.5.5 1.4.5 1.9 0l6.3-6.5v15.4c0 .7.6 1.3 1.3 1.3h1.8c.7 0 1.3-.6 1.3-1.3V7.3l6.3 6.4c.5.5 1.4.5 1.9 0l1.2-1.2c.5-.4.5-1.2 0-1.7z"},null,-1),n=[s];function r(l,a){return e(),c("svg",t,n)}const _={render:r};export{_ as default,r as render};
+import{b as e,c,e as o}from"./entry.Do8xnxHS.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=o("path",{d:"M23.6 10.8 12.9.4c-.5-.5-1.3-.5-1.9 0L.4 10.8c-.5.5-.5 1.3 0 1.8l1.2 1.2c.5.5 1.4.5 1.9 0l6.3-6.5v15.4c0 .7.6 1.3 1.3 1.3h1.8c.7 0 1.3-.6 1.3-1.3V7.3l6.3 6.4c.5.5 1.4.5 1.9 0l1.2-1.2c.5-.4.5-1.2 0-1.7z"},null,-1),n=[s];function r(l,a){return e(),c("svg",t,n)}const _={render:r};export{_ as default,r as render};
diff --git a/_nuxt/icon-attach.Fwk4Uxw0.js b/_nuxt/icon-attach.KaZHqyGD.js
similarity index 89%
rename from _nuxt/icon-attach.Fwk4Uxw0.js
rename to _nuxt/icon-attach.KaZHqyGD.js
index ed7e031f64..e05f89e840 100644
--- a/_nuxt/icon-attach.Fwk4Uxw0.js
+++ b/_nuxt/icon-attach.KaZHqyGD.js
@@ -1 +1 @@
-import{b as c,c as e,e as t}from"./entry.49ZHHvLB.js";const s={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},o=t("path",{d:"M18.6 4.6C18.5 2 16.3 0 13.7 0c-2.7 0-4.9 2-5 4.6v12.7c.1 1.7 1.5 3.1 3.3 3.1s3.2-1.4 3.3-3.1v-10c0-.7-.5-1.2-1.1-1.2-.6 0-1.1.5-1.1 1.2v9.9c0 .4-.5.8-1.1.8s-1.1-.4-1.1-.8V4.8c0-1.3 1.2-2.4 2.8-2.4 1.5 0 2.8 1.1 2.8 2.4v12c0 2.6-2 4.8-4.4 4.8s-4.4-2.2-4.4-4.8V12c0-.7-.5-1.2-1.1-1.2-.6 0-1.1.5-1.1 1.2v4.8c0 4 3 7.2 6.6 7.2s6.6-3.2 6.6-7.2l-.1-12.2z"},null,-1),n=[o];function r(a,d){return c(),e("svg",s,n)}const v={render:r};export{v as default,r as render};
+import{b as c,c as e,e as t}from"./entry.Do8xnxHS.js";const s={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},o=t("path",{d:"M18.6 4.6C18.5 2 16.3 0 13.7 0c-2.7 0-4.9 2-5 4.6v12.7c.1 1.7 1.5 3.1 3.3 3.1s3.2-1.4 3.3-3.1v-10c0-.7-.5-1.2-1.1-1.2-.6 0-1.1.5-1.1 1.2v9.9c0 .4-.5.8-1.1.8s-1.1-.4-1.1-.8V4.8c0-1.3 1.2-2.4 2.8-2.4 1.5 0 2.8 1.1 2.8 2.4v12c0 2.6-2 4.8-4.4 4.8s-4.4-2.2-4.4-4.8V12c0-.7-.5-1.2-1.1-1.2-.6 0-1.1.5-1.1 1.2v4.8c0 4 3 7.2 6.6 7.2s6.6-3.2 6.6-7.2l-.1-12.2z"},null,-1),n=[o];function r(a,d){return c(),e("svg",s,n)}const v={render:r};export{v as default,r as render};
diff --git a/_nuxt/icon-browser.UxDB2PIC.js b/_nuxt/icon-browser.i77M2uFf.js
similarity index 90%
rename from _nuxt/icon-browser.UxDB2PIC.js
rename to _nuxt/icon-browser.i77M2uFf.js
index eaba1425ad..c0875c8aa7 100644
--- a/_nuxt/icon-browser.UxDB2PIC.js
+++ b/_nuxt/icon-browser.i77M2uFf.js
@@ -1 +1 @@
-import{b as c,c as e,e as o}from"./entry.49ZHHvLB.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=o("path",{d:"M21.8 1.5H2.2C1 1.5 0 2.5 0 3.8v16.5c0 1.2 1 2.2 2.2 2.2h19.5c1.2 0 2.2-1 2.2-2.2V3.8c.1-1.3-.9-2.3-2.1-2.3zM6 6.9c0 .3-.3.6-.6.6H3.6c-.3 0-.6-.3-.6-.6V5.1c0-.3.3-.6.6-.6h1.9c.2 0 .5.3.5.6v1.8zm2.2 0V5.1c0-.3.3-.6.6-.6h11.6c.3 0 .6.3.6.6V7c0 .3-.3.6-.6.6H8.8c-.3-.1-.6-.4-.6-.7zm13.2 10.2h-3.2l1.3 3c0 .1 0 .2-.1.2l-1 .4c-.1 0-.2 0-.2-.1l-1.3-3-2.2 2.4c-.1.1-.3 0-.3-.1v-9.8c0-.1.2-.2.3-.1l6.9 6.8c.1.1 0 .3-.2.3z"},null,-1),n=[s];function r(l,a){return c(),e("svg",t,n)}const d={render:r};export{d as default,r as render};
+import{b as c,c as e,e as o}from"./entry.Do8xnxHS.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=o("path",{d:"M21.8 1.5H2.2C1 1.5 0 2.5 0 3.8v16.5c0 1.2 1 2.2 2.2 2.2h19.5c1.2 0 2.2-1 2.2-2.2V3.8c.1-1.3-.9-2.3-2.1-2.3zM6 6.9c0 .3-.3.6-.6.6H3.6c-.3 0-.6-.3-.6-.6V5.1c0-.3.3-.6.6-.6h1.9c.2 0 .5.3.5.6v1.8zm2.2 0V5.1c0-.3.3-.6.6-.6h11.6c.3 0 .6.3.6.6V7c0 .3-.3.6-.6.6H8.8c-.3-.1-.6-.4-.6-.7zm13.2 10.2h-3.2l1.3 3c0 .1 0 .2-.1.2l-1 .4c-.1 0-.2 0-.2-.1l-1.3-3-2.2 2.4c-.1.1-.3 0-.3-.1v-9.8c0-.1.2-.2.3-.1l6.9 6.8c.1.1 0 .3-.2.3z"},null,-1),n=[s];function r(l,a){return c(),e("svg",t,n)}const d={render:r};export{d as default,r as render};
diff --git a/_nuxt/icon-calendar-lined.uqOA-YSW.js b/_nuxt/icon-calendar-lined.YF7sg5n3.js
similarity index 87%
rename from _nuxt/icon-calendar-lined.uqOA-YSW.js
rename to _nuxt/icon-calendar-lined.YF7sg5n3.js
index 890edfa03c..e3f4922c6e 100644
--- a/_nuxt/icon-calendar-lined.uqOA-YSW.js
+++ b/_nuxt/icon-calendar-lined.YF7sg5n3.js
@@ -1 +1 @@
-import{b as t,c as o,e}from"./entry.49ZHHvLB.js";const c={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},n=e("path",{d:"M22.7 2.7H20V1.3c0-.7-.6-1.3-1.3-1.3-.7 0-1.3.6-1.3 1.3v1.3H6.7V1.3C6.7.6 6.1 0 5.3 0 4.6 0 4 .6 4 1.3v1.3H1.3C.6 2.7 0 3.3 0 4v18.7c0 .7.6 1.3 1.3 1.3h21.3c.7 0 1.3-.6 1.3-1.3V4c.1-.7-.5-1.3-1.2-1.3zm-1.4 18.6H2.7V6.7h18.7v14.6z"},null,-1),s=e("path",{d:"M13.3 13.4h5.3v5.3h-5.3z"},null,-1),a=[n,s];function r(d,h){return t(),o("svg",c,a)}const _={render:r};export{_ as default,r as render};
+import{b as t,c as o,e}from"./entry.Do8xnxHS.js";const c={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},n=e("path",{d:"M22.7 2.7H20V1.3c0-.7-.6-1.3-1.3-1.3-.7 0-1.3.6-1.3 1.3v1.3H6.7V1.3C6.7.6 6.1 0 5.3 0 4.6 0 4 .6 4 1.3v1.3H1.3C.6 2.7 0 3.3 0 4v18.7c0 .7.6 1.3 1.3 1.3h21.3c.7 0 1.3-.6 1.3-1.3V4c.1-.7-.5-1.3-1.2-1.3zm-1.4 18.6H2.7V6.7h18.7v14.6z"},null,-1),s=e("path",{d:"M13.3 13.4h5.3v5.3h-5.3z"},null,-1),a=[n,s];function r(d,h){return t(),o("svg",c,a)}const _={render:r};export{_ as default,r as render};
diff --git a/_nuxt/icon-cancel-circle-filled.-GlE6Jtl.js b/_nuxt/icon-cancel-circle-filled.CURkLpAF.js
similarity index 88%
rename from _nuxt/icon-cancel-circle-filled.-GlE6Jtl.js
rename to _nuxt/icon-cancel-circle-filled.CURkLpAF.js
index e54a879845..d6e9d7d549 100644
--- a/_nuxt/icon-cancel-circle-filled.-GlE6Jtl.js
+++ b/_nuxt/icon-cancel-circle-filled.CURkLpAF.js
@@ -1 +1 @@
-import{b as e,c,e as t}from"./entry.49ZHHvLB.js";const l={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},o=t("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.7 15.4c.4.4.4 1.1 0 1.5l-.8.8c-.4.4-1.1.4-1.5 0L12 14.3l-3.4 3.4c-.4.4-1.1.4-1.5 0l-.8-.8c-.4-.4-.4-1.1 0-1.5L9.7 12 6.3 8.6c-.4-.4-.4-1.1 0-1.5l.8-.8c.4-.4 1.1-.4 1.5 0L12 9.7l3.4-3.4c.4-.4 1.1-.4 1.5 0l.8.8c.4.4.4 1.1 0 1.5L14.3 12l3.4 3.4z"},null,-1),s=[o];function n(r,a){return e(),c("svg",l,s)}const i={render:n};export{i as default,n as render};
+import{b as e,c,e as t}from"./entry.Do8xnxHS.js";const l={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},o=t("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.7 15.4c.4.4.4 1.1 0 1.5l-.8.8c-.4.4-1.1.4-1.5 0L12 14.3l-3.4 3.4c-.4.4-1.1.4-1.5 0l-.8-.8c-.4-.4-.4-1.1 0-1.5L9.7 12 6.3 8.6c-.4-.4-.4-1.1 0-1.5l.8-.8c.4-.4 1.1-.4 1.5 0L12 9.7l3.4-3.4c.4-.4 1.1-.4 1.5 0l.8.8c.4.4.4 1.1 0 1.5L14.3 12l3.4 3.4z"},null,-1),s=[o];function n(r,a){return e(),c("svg",l,s)}const i={render:n};export{i as default,n as render};
diff --git a/_nuxt/icon-car.u_vczvd4.js b/_nuxt/icon-car.PxyroN-0.js
similarity index 94%
rename from _nuxt/icon-car.u_vczvd4.js
rename to _nuxt/icon-car.PxyroN-0.js
index e043a3e7c5..8478e06ced 100644
--- a/_nuxt/icon-car.u_vczvd4.js
+++ b/_nuxt/icon-car.PxyroN-0.js
@@ -1 +1 @@
-import{b as c,c as e,e as t}from"./entry.49ZHHvLB.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},h=t("path",{d:"M22.714 8.799h-1.563l-1.008-2.586C19.613 4.89 18.126 4 16.437 4H7.513c-1.69 0-3.202.89-3.706 2.213L2.798 8.8H1.235C.555 8.799 0 9.254 0 9.812v.58c0 .558.555 1.013 1.235 1.013h.429a10.83 10.83 0 0 0-.378 2.834v4.86c0 .56.554 1.014 1.235 1.014h2.067c.68 0 1.236-.455 1.236-1.013v-1.552h12.353V19.1c0 .558.554 1.013 1.235 1.013h2.067c.68 0 1.235-.455 1.235-1.013v-4.882c0-.951-.126-1.903-.378-2.834h.429c.68 0 1.235-.455 1.235-1.013v-.58c-.05-.537-.605-.992-1.286-.992ZM4.966 9.833l1.185-3.02c.202-.496.757-.827 1.362-.827h8.924c.63 0 1.185.33 1.361.827l1.185 3.02c.05.145-.075.269-.252.269H5.218c-.176.02-.302-.124-.252-.269Zm2.572 4.944H5.042c-.429 0-.756-.27-.756-.62v-.973c0-.372.428-.683.882-.62l2.32.31c.302.041.554.227.63.475l.176.662c.101.393-.252.766-.756.766Zm12.1-.62c0 .35-.327.62-.756.62h-2.495c-.48 0-.832-.373-.732-.745l.177-.662c.076-.248.302-.434.63-.476l2.32-.31c.453-.062.882.228.882.62v.952h-.025Z"},null,-1),s=[h];function l(n,r){return c(),e("svg",o,s)}const v={render:l};export{v as default,l as render};
+import{b as c,c as e,e as t}from"./entry.Do8xnxHS.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},h=t("path",{d:"M22.714 8.799h-1.563l-1.008-2.586C19.613 4.89 18.126 4 16.437 4H7.513c-1.69 0-3.202.89-3.706 2.213L2.798 8.8H1.235C.555 8.799 0 9.254 0 9.812v.58c0 .558.555 1.013 1.235 1.013h.429a10.83 10.83 0 0 0-.378 2.834v4.86c0 .56.554 1.014 1.235 1.014h2.067c.68 0 1.236-.455 1.236-1.013v-1.552h12.353V19.1c0 .558.554 1.013 1.235 1.013h2.067c.68 0 1.235-.455 1.235-1.013v-4.882c0-.951-.126-1.903-.378-2.834h.429c.68 0 1.235-.455 1.235-1.013v-.58c-.05-.537-.605-.992-1.286-.992ZM4.966 9.833l1.185-3.02c.202-.496.757-.827 1.362-.827h8.924c.63 0 1.185.33 1.361.827l1.185 3.02c.05.145-.075.269-.252.269H5.218c-.176.02-.302-.124-.252-.269Zm2.572 4.944H5.042c-.429 0-.756-.27-.756-.62v-.973c0-.372.428-.683.882-.62l2.32.31c.302.041.554.227.63.475l.176.662c.101.393-.252.766-.756.766Zm12.1-.62c0 .35-.327.62-.756.62h-2.495c-.48 0-.832-.373-.732-.745l.177-.662c.076-.248.302-.434.63-.476l2.32-.31c.453-.062.882.228.882.62v.952h-.025Z"},null,-1),s=[h];function l(n,r){return c(),e("svg",o,s)}const v={render:l};export{v as default,l as render};
diff --git a/_nuxt/icon-check.2p4Xc53D.js b/_nuxt/icon-check.X6iFJ1nM.js
similarity index 83%
rename from _nuxt/icon-check.2p4Xc53D.js
rename to _nuxt/icon-check.X6iFJ1nM.js
index 440f3e86f4..526479b3ec 100644
--- a/_nuxt/icon-check.2p4Xc53D.js
+++ b/_nuxt/icon-check.X6iFJ1nM.js
@@ -1 +1 @@
-import{b as e,c,e as t}from"./entry.49ZHHvLB.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=t("path",{d:"M22.9.4c-1.1-.7-2.6-.4-3.3.8L9.2 17.8l-5.1-5.1c-.9-.9-2.5-.9-3.4 0s-.9 2.5 0 3.4l7.2 7.2c1.1 1.1 2.9.9 3.7-.4l12-19.2c.7-1.2.4-2.6-.7-3.3z"},null,-1),n=[s];function r(a,l){return e(),c("svg",o,n)}const _={render:r};export{_ as default,r as render};
+import{b as e,c,e as t}from"./entry.Do8xnxHS.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=t("path",{d:"M22.9.4c-1.1-.7-2.6-.4-3.3.8L9.2 17.8l-5.1-5.1c-.9-.9-2.5-.9-3.4 0s-.9 2.5 0 3.4l7.2 7.2c1.1 1.1 2.9.9 3.7-.4l12-19.2c.7-1.2.4-2.6-.7-3.3z"},null,-1),n=[s];function r(a,l){return e(),c("svg",o,n)}const _={render:r};export{_ as default,r as render};
diff --git a/_nuxt/icon-child-lined.CxoBoObp.js b/_nuxt/icon-child-lined.cl3qOp4j.js
similarity index 91%
rename from _nuxt/icon-child-lined.CxoBoObp.js
rename to _nuxt/icon-child-lined.cl3qOp4j.js
index d6f788a294..0addd18666 100644
--- a/_nuxt/icon-child-lined.CxoBoObp.js
+++ b/_nuxt/icon-child-lined.cl3qOp4j.js
@@ -1 +1 @@
-import{b as c,c as e,e as t}from"./entry.49ZHHvLB.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=t("path",{d:"M20.8 4.7C19.7 3.6 18.2 3.5 17 4c-.5-2.2-2.5-4-5-4S7.5 1.8 7 4.1c-1.2-.6-2.7-.4-3.8.6-1.3 1.3-1.3 3.5 0 4.8L6 12.3v8.4C6 22.5 7.5 24 9.4 24h.4c.9 0 1.7-.3 2.2-.9.6.5 1.4.9 2.2.9h.4c1.9 0 3.4-1.5 3.4-3.4v-8.4l2.8-2.8c1.3-1.2 1.3-3.3 0-4.7zM12 2.2c1.6 0 2.8 1.3 2.8 2.8S13.6 7.9 12 7.9c-1.6 0-2.8-1.3-2.8-2.8s1.2-2.9 2.8-2.9zm7.2 5.7-3.4 3.4v9.3c0 .6-.5 1.1-1.1 1.1h-.4c-.6 0-1.1-.5-1.1-1.1v-4.5H11v4.5c0 .6-.5 1.1-1.1 1.1h-.5c-.6 0-1.1-.5-1.1-1.1v-9.3L4.8 7.9c-.4-.4-.4-1.2 0-1.6s1.2-.4 1.6 0l3.4 3.4h4.3l3.4-3.4c.4-.4 1.2-.4 1.6 0 .5.5.5 1.2.1 1.6z"},null,-1),n=[s];function h(r,l){return c(),e("svg",o,n)}const d={render:h};export{d as default,h as render};
+import{b as c,c as e,e as t}from"./entry.Do8xnxHS.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=t("path",{d:"M20.8 4.7C19.7 3.6 18.2 3.5 17 4c-.5-2.2-2.5-4-5-4S7.5 1.8 7 4.1c-1.2-.6-2.7-.4-3.8.6-1.3 1.3-1.3 3.5 0 4.8L6 12.3v8.4C6 22.5 7.5 24 9.4 24h.4c.9 0 1.7-.3 2.2-.9.6.5 1.4.9 2.2.9h.4c1.9 0 3.4-1.5 3.4-3.4v-8.4l2.8-2.8c1.3-1.2 1.3-3.3 0-4.7zM12 2.2c1.6 0 2.8 1.3 2.8 2.8S13.6 7.9 12 7.9c-1.6 0-2.8-1.3-2.8-2.8s1.2-2.9 2.8-2.9zm7.2 5.7-3.4 3.4v9.3c0 .6-.5 1.1-1.1 1.1h-.4c-.6 0-1.1-.5-1.1-1.1v-4.5H11v4.5c0 .6-.5 1.1-1.1 1.1h-.5c-.6 0-1.1-.5-1.1-1.1v-9.3L4.8 7.9c-.4-.4-.4-1.2 0-1.6s1.2-.4 1.6 0l3.4 3.4h4.3l3.4-3.4c.4-.4 1.2-.4 1.6 0 .5.5.5 1.2.1 1.6z"},null,-1),n=[s];function h(r,l){return c(),e("svg",o,n)}const d={render:h};export{d as default,h as render};
diff --git a/_nuxt/icon-dollar-circle-filled.pXobvUhs.js b/_nuxt/icon-dollar-circle-filled.OfCa0qKU.js
similarity index 90%
rename from _nuxt/icon-dollar-circle-filled.pXobvUhs.js
rename to _nuxt/icon-dollar-circle-filled.OfCa0qKU.js
index d4fbfc2891..d81d8fc7dc 100644
--- a/_nuxt/icon-dollar-circle-filled.pXobvUhs.js
+++ b/_nuxt/icon-dollar-circle-filled.OfCa0qKU.js
@@ -1 +1 @@
-import{b as c,c as e,e as o}from"./entry.49ZHHvLB.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},l=o("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm1.3 17.9v1.2c0 .5-.2.9-.8.9h-1c-.7 0-.9-.6-.9-.9v-1.2C8.9 17.6 7.4 16.5 7 15l2.8-.9c.3 1.1 1.2 1.5 2.2 1.5 1.1 0 1.7-.5 1.7-1.2 0-.5-.2-.9-1.1-1l-2.3-.5c-1.6-.4-3.1-1.3-3.1-3.4 0-1.9 1.3-3.2 3.3-3.5V4.9c0-.5.3-.9.9-.9h1c.5 0 .8.4.8.9v1.3c1.5.4 2.7 1.3 3.1 2.7l-2.7.7c-.4-.9-1.2-1.2-1.9-1.2-.9 0-1.5.5-1.5 1.2 0 .5.2.8.9 1l2.3.5c2 .5 3.1 1.5 3.1 3.4.1 1.8-1.3 3-3.2 3.4z"},null,-1),s=[l];function n(r,a){return c(),e("svg",t,s)}const i={render:n};export{i as default,n as render};
+import{b as c,c as e,e as o}from"./entry.Do8xnxHS.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},l=o("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm1.3 17.9v1.2c0 .5-.2.9-.8.9h-1c-.7 0-.9-.6-.9-.9v-1.2C8.9 17.6 7.4 16.5 7 15l2.8-.9c.3 1.1 1.2 1.5 2.2 1.5 1.1 0 1.7-.5 1.7-1.2 0-.5-.2-.9-1.1-1l-2.3-.5c-1.6-.4-3.1-1.3-3.1-3.4 0-1.9 1.3-3.2 3.3-3.5V4.9c0-.5.3-.9.9-.9h1c.5 0 .8.4.8.9v1.3c1.5.4 2.7 1.3 3.1 2.7l-2.7.7c-.4-.9-1.2-1.2-1.9-1.2-.9 0-1.5.5-1.5 1.2 0 .5.2.8.9 1l2.3.5c2 .5 3.1 1.5 3.1 3.4.1 1.8-1.3 3-3.2 3.4z"},null,-1),s=[l];function n(r,a){return c(),e("svg",t,s)}const i={render:n};export{i as default,n as render};
diff --git a/_nuxt/icon-enlarge.1Br3L23I.js b/_nuxt/icon-enlarge.fM1MVPt3.js
similarity index 91%
rename from _nuxt/icon-enlarge.1Br3L23I.js
rename to _nuxt/icon-enlarge.fM1MVPt3.js
index f6ea053cdc..323dbac2e6 100644
--- a/_nuxt/icon-enlarge.1Br3L23I.js
+++ b/_nuxt/icon-enlarge.fM1MVPt3.js
@@ -1 +1 @@
-import{b as a,c as e,e as t}from"./entry.49ZHHvLB.js";const l={xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24"},o=t("path",{d:"m11.999 5.146-.01-.796a.587.587 0 0 1 .598-.6l6.959.088c.337.004.612.28.615.615l.089 6.969a.587.587 0 0 1-.6.6l-.794-.01a.628.628 0 0 1-.615-.63l.048-4.216-3.626 3.63a.606.606 0 0 1-.86-.01l-.58-.582a.608.608 0 0 1-.01-.86l3.626-3.63-4.211.047a.623.623 0 0 1-.63-.615Zm.002 13.708.01.796a.587.587 0 0 1-.598.6l-6.959-.088a.625.625 0 0 1-.615-.615l-.089-6.969a.587.587 0 0 1 .6-.6l.794.01c.34.005.618.29.615.63l-.048 4.216 3.626-3.63a.606.606 0 0 1 .86.01l.58.582a.608.608 0 0 1 .01.86l-3.626 3.63 4.211-.047a.623.623 0 0 1 .63.615Z"},null,-1),c=[o];function n(s,r){return a(),e("svg",l,c)}const h={render:n};export{h as default,n as render};
+import{b as a,c as e,e as t}from"./entry.Do8xnxHS.js";const l={xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24"},o=t("path",{d:"m11.999 5.146-.01-.796a.587.587 0 0 1 .598-.6l6.959.088c.337.004.612.28.615.615l.089 6.969a.587.587 0 0 1-.6.6l-.794-.01a.628.628 0 0 1-.615-.63l.048-4.216-3.626 3.63a.606.606 0 0 1-.86-.01l-.58-.582a.608.608 0 0 1-.01-.86l3.626-3.63-4.211.047a.623.623 0 0 1-.63-.615Zm.002 13.708.01.796a.587.587 0 0 1-.598.6l-6.959-.088a.625.625 0 0 1-.615-.615l-.089-6.969a.587.587 0 0 1 .6-.6l.794.01c.34.005.618.29.615.63l-.048 4.216 3.626-3.63a.606.606 0 0 1 .86.01l.58.582a.608.608 0 0 1 .01.86l-3.626 3.63 4.211-.047a.623.623 0 0 1 .63.615Z"},null,-1),c=[o];function n(s,r){return a(),e("svg",l,c)}const h={render:n};export{h as default,n as render};
diff --git a/_nuxt/icon-fire.6Q6oR_Fn.js b/_nuxt/icon-fire.H8m70NW7.js
similarity index 89%
rename from _nuxt/icon-fire.6Q6oR_Fn.js
rename to _nuxt/icon-fire.H8m70NW7.js
index 9a652f829c..e20003f763 100644
--- a/_nuxt/icon-fire.6Q6oR_Fn.js
+++ b/_nuxt/icon-fire.H8m70NW7.js
@@ -1 +1 @@
-import{b as e,c as t,e as o}from"./entry.49ZHHvLB.js";const c={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=o("path",{d:"M12 0C5.4 0 0 5.3 0 11.7c0 4.9 3.1 9.1 7.4 10.8-.7-.7-1.3-1.9-1.3-3.5 0-2.4 1-4.1 1.8-5.6.7-1.3 1.5-2.5 1.5-4.1 0-1-1-2.1-1.4-2.4-.2-.1-.2-.4-.1-.6s.2-.3.5-.3c1.3 0 4 .7 4.8 3.4.2.8.2 1.8.2 2.8 0 1-.1 2.3.3 2.6 0 0 .1.1.3.1.1 0 .4-.2.6-.8.5-1.4.5-3.2.1-3.6-.2-.2-.2-.5-.1-.7s.4-.3.7-.2c.1.1 3.5 1.3 3.3 6.7-.1 3.2-1.3 5.4-2.9 6.6C20.5 21.4 24 17 24 11.7 24 5.3 18.6 0 12 0z"},null,-1),n=[s];function r(a,d){return e(),t("svg",c,n)}const _={render:r};export{_ as default,r as render};
+import{b as e,c as t,e as o}from"./entry.Do8xnxHS.js";const c={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=o("path",{d:"M12 0C5.4 0 0 5.3 0 11.7c0 4.9 3.1 9.1 7.4 10.8-.7-.7-1.3-1.9-1.3-3.5 0-2.4 1-4.1 1.8-5.6.7-1.3 1.5-2.5 1.5-4.1 0-1-1-2.1-1.4-2.4-.2-.1-.2-.4-.1-.6s.2-.3.5-.3c1.3 0 4 .7 4.8 3.4.2.8.2 1.8.2 2.8 0 1-.1 2.3.3 2.6 0 0 .1.1.3.1.1 0 .4-.2.6-.8.5-1.4.5-3.2.1-3.6-.2-.2-.2-.5-.1-.7s.4-.3.7-.2c.1.1 3.5 1.3 3.3 6.7-.1 3.2-1.3 5.4-2.9 6.6C20.5 21.4 24 17 24 11.7 24 5.3 18.6 0 12 0z"},null,-1),n=[s];function r(a,d){return e(),t("svg",c,n)}const _={render:r};export{_ as default,r as render};
diff --git a/_nuxt/icon-flood.0HEgTeD9.js b/_nuxt/icon-flood.Ibpk1X0p.js
similarity index 94%
rename from _nuxt/icon-flood.0HEgTeD9.js
rename to _nuxt/icon-flood.Ibpk1X0p.js
index 9d20d2d97c..8f3e4d8df9 100644
--- a/_nuxt/icon-flood.0HEgTeD9.js
+++ b/_nuxt/icon-flood.Ibpk1X0p.js
@@ -1 +1 @@
-import{b as c,c as e,e as o}from"./entry.49ZHHvLB.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=o("path",{d:"M14.8 19.5c-1.6 1-3.9 1-5.5 0h-.1c-.1.1-.2.1-.3.2-.1.1-.3.1-.4.2-.2.1-.3.1-.4.1-.2.1-.4.1-.6.1h-.2c-.3 0-.6.1-.8.1-1 0-2-.3-2.8-.8-.2.1-.5.3-.7.4 2.2 2.5 5.4 4.1 9 4.1 3.6 0 6.8-1.6 9-4.1-.2-.1-.5-.2-.7-.4-1.6 1.1-3.9 1.1-5.5.1zM12 0C5.4 0 0 5.4 0 12c0 2.2.6 4.2 1.6 6 .5-.1 1-.3 1.3-.7.4-.4 1.1-.4 1.5 0 .8.8 2.3.9 3.4.5.1 0 .1-.1.2-.1s.1-.1.2-.1c.1-.1.2-.2.3-.2.4-.4 1.1-.4 1.5 0 1 1 3 1 4 0 .4-.4 1.1-.4 1.5 0 1 1 3 1 4 0 .4-.4 1.1-.4 1.5 0 .3.3.8.5 1.3.7 1-1.8 1.6-3.8 1.6-6C24 5.4 18.6 0 12 0zm8 12.6-1.5-1.2v4c-.9.2-1.9.1-2.8-.2-.1 0-.1 0-.2-.1-.3-.1-.5-.2-.7-.4-.2.1-.5.3-.7.4-.1 0-.2.1-.3.1-1.1.4-2.4.4-3.5 0-.1 0-.2-.1-.3-.1-.3-.1-.5-.2-.7-.4h-.1c-.1.1-.2.1-.3.2-.1 0-.2.1-.3.1h-.1c-.1 0-.2.1-.3.1-.2.1-.4.1-.6.2h-.2c-.3 0-.6.1-.8.1-.4 0-.7 0-1-.1v-4L4 12.6 2.6 11l3.9-3.3V5.5h2.2l2.6-1.8c.4-.3 1-.3 1.4 0l8.7 7.3-1.4 1.6z"},null,-1),n=[s];function h(r,l){return c(),e("svg",t,n)}const d={render:h};export{d as default,h as render};
+import{b as c,c as e,e as o}from"./entry.Do8xnxHS.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=o("path",{d:"M14.8 19.5c-1.6 1-3.9 1-5.5 0h-.1c-.1.1-.2.1-.3.2-.1.1-.3.1-.4.2-.2.1-.3.1-.4.1-.2.1-.4.1-.6.1h-.2c-.3 0-.6.1-.8.1-1 0-2-.3-2.8-.8-.2.1-.5.3-.7.4 2.2 2.5 5.4 4.1 9 4.1 3.6 0 6.8-1.6 9-4.1-.2-.1-.5-.2-.7-.4-1.6 1.1-3.9 1.1-5.5.1zM12 0C5.4 0 0 5.4 0 12c0 2.2.6 4.2 1.6 6 .5-.1 1-.3 1.3-.7.4-.4 1.1-.4 1.5 0 .8.8 2.3.9 3.4.5.1 0 .1-.1.2-.1s.1-.1.2-.1c.1-.1.2-.2.3-.2.4-.4 1.1-.4 1.5 0 1 1 3 1 4 0 .4-.4 1.1-.4 1.5 0 1 1 3 1 4 0 .4-.4 1.1-.4 1.5 0 .3.3.8.5 1.3.7 1-1.8 1.6-3.8 1.6-6C24 5.4 18.6 0 12 0zm8 12.6-1.5-1.2v4c-.9.2-1.9.1-2.8-.2-.1 0-.1 0-.2-.1-.3-.1-.5-.2-.7-.4-.2.1-.5.3-.7.4-.1 0-.2.1-.3.1-1.1.4-2.4.4-3.5 0-.1 0-.2-.1-.3-.1-.3-.1-.5-.2-.7-.4h-.1c-.1.1-.2.1-.3.2-.1 0-.2.1-.3.1h-.1c-.1 0-.2.1-.3.1-.2.1-.4.1-.6.2h-.2c-.3 0-.6.1-.8.1-.4 0-.7 0-1-.1v-4L4 12.6 2.6 11l3.9-3.3V5.5h2.2l2.6-1.8c.4-.3 1-.3 1.4 0l8.7 7.3-1.4 1.6z"},null,-1),n=[s];function h(r,l){return c(),e("svg",t,n)}const d={render:h};export{d as default,h as render};
diff --git a/_nuxt/icon-free.OVf1QOdo.js b/_nuxt/icon-free.Rd0LPl8f.js
similarity index 92%
rename from _nuxt/icon-free.OVf1QOdo.js
rename to _nuxt/icon-free.Rd0LPl8f.js
index 1d816aa71f..86ab727968 100644
--- a/_nuxt/icon-free.OVf1QOdo.js
+++ b/_nuxt/icon-free.Rd0LPl8f.js
@@ -1 +1 @@
-import{b as c,c as e,e as t}from"./entry.49ZHHvLB.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},l=t("path",{d:"m20.3 13 3.4-3.4c.4-.4.4-1.1 0-1.5l-.8-.8c-.4-.4-1.1-.4-1.5 0L18 10.7l-3.4-3.4c-.4-.4-1.1-.4-1.5 0l-.8.8c-.4.4-.4 1.1 0 1.5l3.4 3.4-3.4 3.4c-.4.4-.4 1.1 0 1.5l.8.8c.4.4 1.1.4 1.5 0l3.4-3.4 3.4 3.4c.4.4 1.1.4 1.5 0l.8-.8c.4-.4.4-1.1 0-1.5L20.3 13zm-13-2.2-2.6-.6c-.8-.2-1-.6-1-1.1 0-.7.7-1.3 1.7-1.3.8 0 1.8.4 2.2 1.4l3-.8c-.5-1.5-1.8-2.6-3.5-3V4c0-.6-.4-1-.9-1H5.1c-.6 0-1 .4-1 1v1.4C1.8 5.8.4 7.2.4 9.4c0 2.4 1.6 3.3 3.5 3.8l2.6.6c.9.2 1.2.6 1.2 1.2 0 .7-.7 1.3-1.9 1.3s-2.1-.5-2.5-1.7l-3.2 1c.5 1.7 2.1 2.9 4.1 3.3v1.3c0 .4.2 1.1 1 1.1h1.1c.7 0 .9-.5.9-1.1v-1.3c2.1-.4 3.7-1.8 3.7-4-.1-2.4-1.4-3.6-3.6-4.1z"},null,-1),s=[l];function n(r,a){return c(),e("svg",o,s)}const _={render:n};export{_ as default,n as render};
+import{b as c,c as e,e as t}from"./entry.Do8xnxHS.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},l=t("path",{d:"m20.3 13 3.4-3.4c.4-.4.4-1.1 0-1.5l-.8-.8c-.4-.4-1.1-.4-1.5 0L18 10.7l-3.4-3.4c-.4-.4-1.1-.4-1.5 0l-.8.8c-.4.4-.4 1.1 0 1.5l3.4 3.4-3.4 3.4c-.4.4-.4 1.1 0 1.5l.8.8c.4.4 1.1.4 1.5 0l3.4-3.4 3.4 3.4c.4.4 1.1.4 1.5 0l.8-.8c.4-.4.4-1.1 0-1.5L20.3 13zm-13-2.2-2.6-.6c-.8-.2-1-.6-1-1.1 0-.7.7-1.3 1.7-1.3.8 0 1.8.4 2.2 1.4l3-.8c-.5-1.5-1.8-2.6-3.5-3V4c0-.6-.4-1-.9-1H5.1c-.6 0-1 .4-1 1v1.4C1.8 5.8.4 7.2.4 9.4c0 2.4 1.6 3.3 3.5 3.8l2.6.6c.9.2 1.2.6 1.2 1.2 0 .7-.7 1.3-1.9 1.3s-2.1-.5-2.5-1.7l-3.2 1c.5 1.7 2.1 2.9 4.1 3.3v1.3c0 .4.2 1.1 1 1.1h1.1c.7 0 .9-.5.9-1.1v-1.3c2.1-.4 3.7-1.8 3.7-4-.1-2.4-1.4-3.6-3.6-4.1z"},null,-1),s=[l];function n(r,a){return c(),e("svg",o,s)}const _={render:n};export{_ as default,n as render};
diff --git a/_nuxt/icon-home.QZ-FrcoD.js b/_nuxt/icon-home.MT_Aun8G.js
similarity index 89%
rename from _nuxt/icon-home.QZ-FrcoD.js
rename to _nuxt/icon-home.MT_Aun8G.js
index 4558ebbef4..ea796e8e44 100644
--- a/_nuxt/icon-home.QZ-FrcoD.js
+++ b/_nuxt/icon-home.MT_Aun8G.js
@@ -1 +1 @@
-import{b as e,c,e as t}from"./entry.49ZHHvLB.js";const o={xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16"},n=t("path",{"fill-rule":"evenodd",d:"M9.985 16c-.584 0-.992-.461-.992-1.143L9 11H7.015l-.008 3.857c-.004.676-.41 1.143-.992 1.143H3.037c-.582 0-.988-.467-.993-1.143V9.778l-.926-.04c-.437 0-.902-.123-1.06-.595C-.1 8.668.082 7.94.404 7.597L7.255.322c.404-.43 1.022-.43 1.427-.001l6.912 7.317c.326.343.507 1.03.347 1.505-.16.472-.557.635-.993.635h-.992v5.08c0 .68-.408 1.142-.993 1.142","clip-rule":"evenodd"},null,-1),l=[n];function s(r,d){return e(),c("svg",o,l)}const h={render:s};export{h as default,s as render};
+import{b as e,c,e as t}from"./entry.Do8xnxHS.js";const o={xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16"},n=t("path",{"fill-rule":"evenodd",d:"M9.985 16c-.584 0-.992-.461-.992-1.143L9 11H7.015l-.008 3.857c-.004.676-.41 1.143-.992 1.143H3.037c-.582 0-.988-.467-.993-1.143V9.778l-.926-.04c-.437 0-.902-.123-1.06-.595C-.1 8.668.082 7.94.404 7.597L7.255.322c.404-.43 1.022-.43 1.427-.001l6.912 7.317c.326.343.507 1.03.347 1.505-.16.472-.557.635-.993.635h-.992v5.08c0 .68-.408 1.142-.993 1.142","clip-rule":"evenodd"},null,-1),l=[n];function s(r,d){return e(),c("svg",o,l)}const h={render:s};export{h as default,s as render};
diff --git a/_nuxt/icon-instagram.NFdPBf9w.js b/_nuxt/icon-instagram.t6FQ8jrY.js
similarity index 88%
rename from _nuxt/icon-instagram.NFdPBf9w.js
rename to _nuxt/icon-instagram.t6FQ8jrY.js
index 45a6ee9aa5..ff42c9b4ca 100644
--- a/_nuxt/icon-instagram.NFdPBf9w.js
+++ b/_nuxt/icon-instagram.t6FQ8jrY.js
@@ -1 +1 @@
-import{b as c,c as t,e}from"./entry.49ZHHvLB.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=e("circle",{cx:"11.6",cy:"12.8",r:"4.7"},null,-1),n=e("path",{d:"M17.4 0H6.6C3 0 0 3.1 0 6.8v10.4C0 20.9 3 24 6.6 24h10.7c3.7 0 6.6-3.1 6.6-6.8V6.8C24 3.1 21 0 17.4 0zm-5.8 19.9c-3.9 0-7.1-3.2-7.1-7.1 0-3.9 3.2-7.1 7.1-7.1 3.9 0 7.1 3.2 7.1 7.1.1 4-3.1 7.1-7.1 7.1zm7.2-13.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5z"},null,-1),r=[s,n];function a(l,_){return c(),t("svg",o,r)}const i={render:a};export{i as default,a as render};
+import{b as c,c as t,e}from"./entry.Do8xnxHS.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=e("circle",{cx:"11.6",cy:"12.8",r:"4.7"},null,-1),n=e("path",{d:"M17.4 0H6.6C3 0 0 3.1 0 6.8v10.4C0 20.9 3 24 6.6 24h10.7c3.7 0 6.6-3.1 6.6-6.8V6.8C24 3.1 21 0 17.4 0zm-5.8 19.9c-3.9 0-7.1-3.2-7.1-7.1 0-3.9 3.2-7.1 7.1-7.1 3.9 0 7.1 3.2 7.1 7.1.1 4-3.1 7.1-7.1 7.1zm7.2-13.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5z"},null,-1),r=[s,n];function a(l,_){return c(),t("svg",o,r)}const i={render:a};export{i as default,a as render};
diff --git a/_nuxt/icon-lightning.lldfgtzu.js b/_nuxt/icon-lightning.yIdZoiWx.js
similarity index 87%
rename from _nuxt/icon-lightning.lldfgtzu.js
rename to _nuxt/icon-lightning.yIdZoiWx.js
index 61e608b09f..6ac59d0c7f 100644
--- a/_nuxt/icon-lightning.lldfgtzu.js
+++ b/_nuxt/icon-lightning.yIdZoiWx.js
@@ -1 +1 @@
-import{b as e,c as t,e as c}from"./entry.49ZHHvLB.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},n=c("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm4.8 13.5-6.6 7.3c-.2.2-.4.3-.7.3-.2 0-.4-.1-.5-.2-.4-.3-.5-.8-.4-1.2l2-5.7-3-2.2c-.2-.2-.4-.4-.4-.7 0-.3.1-.6.3-.8L14.1 3c.3-.4.8-.4 1.2-.2.4.2.5.7.4 1.2l-2 5.7 3 2.2c.2.2.4.4.4.7 0 .4-.1.7-.3.9z"},null,-1),s=[n];function r(a,i){return e(),t("svg",o,s)}const d={render:r};export{d as default,r as render};
+import{b as e,c as t,e as c}from"./entry.Do8xnxHS.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},n=c("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm4.8 13.5-6.6 7.3c-.2.2-.4.3-.7.3-.2 0-.4-.1-.5-.2-.4-.3-.5-.8-.4-1.2l2-5.7-3-2.2c-.2-.2-.4-.4-.4-.7 0-.3.1-.6.3-.8L14.1 3c.3-.4.8-.4 1.2-.2.4.2.5.7.4 1.2l-2 5.7 3 2.2c.2.2.4.4.4.7 0 .4-.1.7-.3.9z"},null,-1),s=[n];function r(a,i){return e(),t("svg",o,s)}const d={render:r};export{d as default,r as render};
diff --git a/_nuxt/icon-link.JWvdqMbJ.js b/_nuxt/icon-link.POGwWQkT.js
similarity index 88%
rename from _nuxt/icon-link.JWvdqMbJ.js
rename to _nuxt/icon-link.POGwWQkT.js
index aa6fa7cfe5..a871579f49 100644
--- a/_nuxt/icon-link.JWvdqMbJ.js
+++ b/_nuxt/icon-link.POGwWQkT.js
@@ -1 +1 @@
-import{b as c,c as t,e}from"./entry.49ZHHvLB.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=e("path",{d:"M12 18H4V6h8c1.1 0 2-.9 2-2s-.9-2-2-2H2C.9 2 0 2.9 0 4v16c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2s-.9-2-2-2z"},null,-1),n=e("path",{d:"m23.3 10.4-4.9-4c-.9-.7-2.1-.6-2.8.3-.7.9-.6 2.1.3 2.8l.6.4H8c-1.1 0-2 .9-2 2s.9 2 2 2h8.4l-.6.4c-.9.7-1 2-.3 2.8.4.5 1 .7 1.6.7.4 0 .9-.1 1.3-.4l4.9-4c.5-.4.7-1 .7-1.6 0-.4-.3-1-.7-1.4z"},null,-1),l=[s,n];function r(a,h){return c(),t("svg",o,l)}const _={render:r};export{_ as default,r as render};
+import{b as c,c as t,e}from"./entry.Do8xnxHS.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=e("path",{d:"M12 18H4V6h8c1.1 0 2-.9 2-2s-.9-2-2-2H2C.9 2 0 2.9 0 4v16c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2s-.9-2-2-2z"},null,-1),n=e("path",{d:"m23.3 10.4-4.9-4c-.9-.7-2.1-.6-2.8.3-.7.9-.6 2.1.3 2.8l.6.4H8c-1.1 0-2 .9-2 2s.9 2 2 2h8.4l-.6.4c-.9.7-1 2-.3 2.8.4.5 1 .7 1.6.7.4 0 .9-.1 1.3-.4l4.9-4c.5-.4.7-1 .7-1.6 0-.4-.3-1-.7-1.4z"},null,-1),l=[s,n];function r(a,h){return c(),t("svg",o,l)}const _={render:r};export{_ as default,r as render};
diff --git a/_nuxt/icon-list.ypbt8G6o.js b/_nuxt/icon-list.XfZbIWbX.js
similarity index 90%
rename from _nuxt/icon-list.ypbt8G6o.js
rename to _nuxt/icon-list.XfZbIWbX.js
index aa5570720b..f54578d74c 100644
--- a/_nuxt/icon-list.ypbt8G6o.js
+++ b/_nuxt/icon-list.XfZbIWbX.js
@@ -1 +1 @@
-import{b as c,c as t,a4 as e}from"./entry.49ZHHvLB.js";const r={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=e('<circle cx="2.2" cy="3" r="2.2"></circle><path d="M9.8 5.2h12C23 5.2 24 4.2 24 3S23 .8 21.8.8h-12C8.6.8 7.6 1.8 7.6 3s.9 2.2 2.2 2.2z"></path><circle cx="2.2" cy="12" r="2.2"></circle><path d="M21.8 9.8h-12c-1.2 0-2.2 1-2.2 2.2s1 2.2 2.2 2.2h12c1.2 0 2.2-1 2.2-2.2s-1-2.2-2.2-2.2z"></path><circle cx="2.2" cy="21" r="2.2"></circle><path d="M21.8 18.8h-12c-1.2 0-2.2 1-2.2 2.2s1 2.2 2.2 2.2h12c1.2 0 2.2-1 2.2-2.2s-1-2.2-2.2-2.2z"></path>',6),o=[s];function h(a,i){return c(),t("svg",r,o)}const l={render:h};export{l as default,h as render};
+import{b as c,c as t,a4 as e}from"./entry.Do8xnxHS.js";const r={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=e('<circle cx="2.2" cy="3" r="2.2"></circle><path d="M9.8 5.2h12C23 5.2 24 4.2 24 3S23 .8 21.8.8h-12C8.6.8 7.6 1.8 7.6 3s.9 2.2 2.2 2.2z"></path><circle cx="2.2" cy="12" r="2.2"></circle><path d="M21.8 9.8h-12c-1.2 0-2.2 1-2.2 2.2s1 2.2 2.2 2.2h12c1.2 0 2.2-1 2.2-2.2s-1-2.2-2.2-2.2z"></path><circle cx="2.2" cy="21" r="2.2"></circle><path d="M21.8 18.8h-12c-1.2 0-2.2 1-2.2 2.2s1 2.2 2.2 2.2h12c1.2 0 2.2-1 2.2-2.2s-1-2.2-2.2-2.2z"></path>',6),o=[s];function h(a,i){return c(),t("svg",r,o)}const l={render:h};export{l as default,h as render};
diff --git a/_nuxt/icon-loading.RshIDrCh.js b/_nuxt/icon-loading.eTABF85R.js
similarity index 93%
rename from _nuxt/icon-loading.RshIDrCh.js
rename to _nuxt/icon-loading.eTABF85R.js
index 6a46033ac2..6fde9b9f18 100644
--- a/_nuxt/icon-loading.RshIDrCh.js
+++ b/_nuxt/icon-loading.eTABF85R.js
@@ -1 +1 @@
-import{b as c,c as s,e}from"./entry.49ZHHvLB.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},t=e("path",{d:"M8.4 12c0-.7-.5-1.2-1.2-1.2h-6c-.7 0-1.2.5-1.2 1.2s.5 1.2 1.2 1.2h6c.7 0 1.2-.5 1.2-1.2zm14.4-1.2h-6c-.7 0-1.2.5-1.2 1.2s.5 1.2 1.2 1.2h6c.7 0 1.2-.5 1.2-1.2s-.5-1.2-1.2-1.2zM12 0c-.7 0-1.2.5-1.2 1.2v6c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2v-6C13.2.5 12.7 0 12 0zm0 15.6c-.7 0-1.2.5-1.2 1.2v6c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2v-6c0-.7-.5-1.2-1.2-1.2zm-4.2-1.1-4.2 4.2c-.6.6-.6 1.3-.1 1.8s1.2.5 1.7 0l4.2-4.2c.5-.5.5-1.2 0-1.7-.4-.5-1.2-.5-1.6-.1zm8.4-5 4.2-4.2c.6-.6.6-1.3.1-1.8s-1.2-.5-1.7 0l-4.2 4.2c-.5.5-.5 1.2 0 1.7.4.5 1.2.5 1.6.1zm-11-6C4.7 3 4 3 3.5 3.5s-.5 1.2 0 1.7l4.2 4.2c.5.5 1.2.5 1.7 0s.5-1.2 0-1.7L5.2 3.5zm11 11c-.5-.5-1.2-.5-1.7 0s-.5 1.2 0 1.7l4.2 4.2c.5.5 1.2.5 1.7 0s.5-1.2 0-1.7l-4.2-4.2z"},null,-1),n=[t];function l(r,a){return c(),s("svg",o,n)}const m={render:l};export{m as default,l as render};
+import{b as c,c as s,e}from"./entry.Do8xnxHS.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},t=e("path",{d:"M8.4 12c0-.7-.5-1.2-1.2-1.2h-6c-.7 0-1.2.5-1.2 1.2s.5 1.2 1.2 1.2h6c.7 0 1.2-.5 1.2-1.2zm14.4-1.2h-6c-.7 0-1.2.5-1.2 1.2s.5 1.2 1.2 1.2h6c.7 0 1.2-.5 1.2-1.2s-.5-1.2-1.2-1.2zM12 0c-.7 0-1.2.5-1.2 1.2v6c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2v-6C13.2.5 12.7 0 12 0zm0 15.6c-.7 0-1.2.5-1.2 1.2v6c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2v-6c0-.7-.5-1.2-1.2-1.2zm-4.2-1.1-4.2 4.2c-.6.6-.6 1.3-.1 1.8s1.2.5 1.7 0l4.2-4.2c.5-.5.5-1.2 0-1.7-.4-.5-1.2-.5-1.6-.1zm8.4-5 4.2-4.2c.6-.6.6-1.3.1-1.8s-1.2-.5-1.7 0l-4.2 4.2c-.5.5-.5 1.2 0 1.7.4.5 1.2.5 1.6.1zm-11-6C4.7 3 4 3 3.5 3.5s-.5 1.2 0 1.7l4.2 4.2c.5.5 1.2.5 1.7 0s.5-1.2 0-1.7L5.2 3.5zm11 11c-.5-.5-1.2-.5-1.7 0s-.5 1.2 0 1.7l4.2 4.2c.5.5 1.2.5 1.7 0s.5-1.2 0-1.7l-4.2-4.2z"},null,-1),n=[t];function l(r,a){return c(),s("svg",o,n)}const m={render:l};export{m as default,l as render};
diff --git a/_nuxt/icon-log-in-lined.suOMu9M0.js b/_nuxt/icon-log-in-lined.4lvxCkYN.js
similarity index 88%
rename from _nuxt/icon-log-in-lined.suOMu9M0.js
rename to _nuxt/icon-log-in-lined.4lvxCkYN.js
index 3d06cdffaa..81a35be6fe 100644
--- a/_nuxt/icon-log-in-lined.suOMu9M0.js
+++ b/_nuxt/icon-log-in-lined.4lvxCkYN.js
@@ -1 +1 @@
-import{b as c,c as o,e}from"./entry.49ZHHvLB.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},n=e("path",{d:"M22.5 7.5H18V6c0-1.2-.4-2.4-1-3.4C15.9 1 14 0 12 0 8.7 0 6 2.7 6 6v1.5H1.5C.7 7.5 0 8.2 0 9v13.5c0 .8.7 1.5 1.5 1.5h21c.8 0 1.5-.7 1.5-1.5V9c0-.8-.7-1.5-1.5-1.5zM9 6c0-1.7 1.3-3 3-3 1 0 1.9.5 2.5 1.3.3.5.5 1.1.5 1.7v1.5H9V6zm12 15H3V10.5h18V21z"},null,-1),s=e("circle",{cx:"12",cy:"15",r:"1.5"},null,-1),r=[n,s];function a(d,i){return c(),o("svg",t,r)}const _={render:a};export{_ as default,a as render};
+import{b as c,c as o,e}from"./entry.Do8xnxHS.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},n=e("path",{d:"M22.5 7.5H18V6c0-1.2-.4-2.4-1-3.4C15.9 1 14 0 12 0 8.7 0 6 2.7 6 6v1.5H1.5C.7 7.5 0 8.2 0 9v13.5c0 .8.7 1.5 1.5 1.5h21c.8 0 1.5-.7 1.5-1.5V9c0-.8-.7-1.5-1.5-1.5zM9 6c0-1.7 1.3-3 3-3 1 0 1.9.5 2.5 1.3.3.5.5 1.1.5 1.7v1.5H9V6zm12 15H3V10.5h18V21z"},null,-1),s=e("circle",{cx:"12",cy:"15",r:"1.5"},null,-1),r=[n,s];function a(d,i){return c(),o("svg",t,r)}const _={render:a};export{_ as default,a as render};
diff --git a/_nuxt/icon-mail-lined.Ip5JdcEl.js b/_nuxt/icon-mail-lined.u9eIXaUH.js
similarity index 85%
rename from _nuxt/icon-mail-lined.Ip5JdcEl.js
rename to _nuxt/icon-mail-lined.u9eIXaUH.js
index c9662a7af0..383f841e83 100644
--- a/_nuxt/icon-mail-lined.Ip5JdcEl.js
+++ b/_nuxt/icon-mail-lined.u9eIXaUH.js
@@ -1 +1 @@
-import{b as t,c as o,e}from"./entry.49ZHHvLB.js";const c={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},n=e("path",{d:"M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-1.2 15.6H2.4V5.4h19.2v13.2z"},null,-1),s=e("path",{d:"M20.4 9V6.6L12 10.2 3.6 6.6V9l8.4 3.6z"},null,-1),a=[n,s];function r(d,l){return t(),o("svg",c,a)}const i={render:r};export{i as default,r as render};
+import{b as t,c as o,e}from"./entry.Do8xnxHS.js";const c={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},n=e("path",{d:"M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-1.2 15.6H2.4V5.4h19.2v13.2z"},null,-1),s=e("path",{d:"M20.4 9V6.6L12 10.2 3.6 6.6V9l8.4 3.6z"},null,-1),a=[n,s];function r(d,l){return t(),o("svg",c,a)}const i={render:r};export{i as default,r as render};
diff --git a/_nuxt/icon-map-zoom-in.RoeBztCA.js b/_nuxt/icon-map-zoom-in.bXAuyjx5.js
similarity index 86%
rename from _nuxt/icon-map-zoom-in.RoeBztCA.js
rename to _nuxt/icon-map-zoom-in.bXAuyjx5.js
index 517b2ae32c..3612725a5d 100644
--- a/_nuxt/icon-map-zoom-in.RoeBztCA.js
+++ b/_nuxt/icon-map-zoom-in.bXAuyjx5.js
@@ -1 +1 @@
-import{b as e,c as o,e as c}from"./entry.49ZHHvLB.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},n=c("path",{"fill-rule":"evenodd",d:"M14 10V2c0-1.106-.894-2-2-2-1.106 0-2 .894-2 2v8H2c-1.106 0-2 .894-2 2 0 1.106.894 2 2 2h8v8c0 1.106.894 2 2 2 1.106 0 2-.894 2-2v-8h8c1.106 0 2-.894 2-2 0-1.106-.894-2-2-2h-8Z","clip-rule":"evenodd"},null,-1),s=[n];function r(d,l){return e(),o("svg",t,s)}const h={render:r};export{h as default,r as render};
+import{b as e,c as o,e as c}from"./entry.Do8xnxHS.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},n=c("path",{"fill-rule":"evenodd",d:"M14 10V2c0-1.106-.894-2-2-2-1.106 0-2 .894-2 2v8H2c-1.106 0-2 .894-2 2 0 1.106.894 2 2 2h8v8c0 1.106.894 2 2 2 1.106 0 2-.894 2-2v-8h8c1.106 0 2-.894 2-2 0-1.106-.894-2-2-2h-8Z","clip-rule":"evenodd"},null,-1),s=[n];function r(d,l){return e(),o("svg",t,s)}const h={render:r};export{h as default,r as render};
diff --git a/_nuxt/icon-map-zoom-out.V8461QeS.js b/_nuxt/icon-map-zoom-out.pdO56m1U.js
similarity index 80%
rename from _nuxt/icon-map-zoom-out.V8461QeS.js
rename to _nuxt/icon-map-zoom-out.pdO56m1U.js
index 4e532c8a69..3dac56d9f0 100644
--- a/_nuxt/icon-map-zoom-out.V8461QeS.js
+++ b/_nuxt/icon-map-zoom-out.pdO56m1U.js
@@ -1 +1 @@
-import{b as e,c as o,e as t}from"./entry.49ZHHvLB.js";const c={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=t("path",{d:"M2 10h20c1.106 0 2 .894 2 2 0 1.106-.894 2-2 2H2c-1.106 0-2-.894-2-2 0-1.106.894-2 2-2Z"},null,-1),n=[s];function r(a,d){return e(),o("svg",c,n)}const h={render:r};export{h as default,r as render};
+import{b as e,c as o,e as t}from"./entry.Do8xnxHS.js";const c={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=t("path",{d:"M2 10h20c1.106 0 2 .894 2 2 0 1.106-.894 2-2 2H2c-1.106 0-2-.894-2-2 0-1.106.894-2 2-2Z"},null,-1),n=[s];function r(a,d){return e(),o("svg",c,n)}const h={render:r};export{h as default,r as render};
diff --git a/_nuxt/icon-medical.QtoyQ8xF.js b/_nuxt/icon-medical.62S53NR4.js
similarity index 94%
rename from _nuxt/icon-medical.QtoyQ8xF.js
rename to _nuxt/icon-medical.62S53NR4.js
index 4e6313ab4c..c9c63289c8 100644
--- a/_nuxt/icon-medical.QtoyQ8xF.js
+++ b/_nuxt/icon-medical.62S53NR4.js
@@ -1 +1 @@
-import{b as c,c as s,e}from"./entry.49ZHHvLB.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},o=e("path",{d:"M23.4 15.6h-.6v-4.1c0-.5-.2-.9-.5-1.3l-3.7-3.7c-.2-.2-.4-.3-.6-.4-.3-.1-.5-.1-.7-.1h-1.7V4.2c0-.5-.2-.9-.5-1.3-.3-.3-.8-.5-1.3-.5h-12c-.5 0-.9.2-1.3.5-.3.4-.5.8-.5 1.3v12c0 .5.2.9.5 1.3.4.3.8.5 1.3.5h.6c0 1 .4 1.9 1.1 2.5.6.7 1.5 1.1 2.5 1.1s1.9-.4 2.5-1.1c.7-.6 1.1-1.5 1.1-2.5h4.8c0 1 .4 1.9 1.1 2.5.7.7 1.6 1.1 2.5 1.1s1.9-.4 2.5-1.1c.7-.7 1.1-1.6 1.1-2.5h1.8c.3 0 .6-.3.6-.6v-1.2c0-.3-.3-.6-.6-.6zM7.3 19.3c-.3.3-.8.5-1.3.5s-.9-.2-1.3-.5c-.3-.3-.5-.8-.5-1.3s.2-.9.5-1.3c.3-.3.8-.5 1.3-.5s.9.2 1.3.5c.3.3.5.8.5 1.3s-.2.9-.5 1.3zm4.1-8.8c0 .1 0 .2-.1.2-.1.1-.1.1-.2.1H9v2.1c0 .1 0 .2-.1.2-.1.1-.1.1-.2.1H6.9c-.1 0-.2 0-.2-.1-.1-.1-.1-.1-.1-.2v-2.1H4.5c-.1 0-.2 0-.2-.1-.1-.1-.1-.1-.1-.2V8.7c0-.1 0-.2.1-.2.1-.1.1-.1.2-.1h2.1V6.3c0-.1 0-.2.1-.2s.1-.1.2-.1h1.8c.1 0 .2 0 .2.1.1 0 .1.1.1.2v2.1h2.1c.1 0 .2 0 .2.1.1.1.1.1.1.2v1.8zm7.9 8.8c-.3.3-.8.5-1.3.5s-.9-.2-1.3-.5c-.3-.3-.5-.8-.5-1.3s.2-.9.5-1.3c.3-.3.8-.5 1.3-.5s.9.2 1.3.5c.3.3.5.8.5 1.3s-.2.9-.5 1.3zM21 12h-5.4V7.8h1.7l3.7 3.7v.5z"},null,-1),h=[o];function n(r,a){return c(),s("svg",t,h)}const l={render:n};export{l as default,n as render};
+import{b as c,c as s,e}from"./entry.Do8xnxHS.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},o=e("path",{d:"M23.4 15.6h-.6v-4.1c0-.5-.2-.9-.5-1.3l-3.7-3.7c-.2-.2-.4-.3-.6-.4-.3-.1-.5-.1-.7-.1h-1.7V4.2c0-.5-.2-.9-.5-1.3-.3-.3-.8-.5-1.3-.5h-12c-.5 0-.9.2-1.3.5-.3.4-.5.8-.5 1.3v12c0 .5.2.9.5 1.3.4.3.8.5 1.3.5h.6c0 1 .4 1.9 1.1 2.5.6.7 1.5 1.1 2.5 1.1s1.9-.4 2.5-1.1c.7-.6 1.1-1.5 1.1-2.5h4.8c0 1 .4 1.9 1.1 2.5.7.7 1.6 1.1 2.5 1.1s1.9-.4 2.5-1.1c.7-.7 1.1-1.6 1.1-2.5h1.8c.3 0 .6-.3.6-.6v-1.2c0-.3-.3-.6-.6-.6zM7.3 19.3c-.3.3-.8.5-1.3.5s-.9-.2-1.3-.5c-.3-.3-.5-.8-.5-1.3s.2-.9.5-1.3c.3-.3.8-.5 1.3-.5s.9.2 1.3.5c.3.3.5.8.5 1.3s-.2.9-.5 1.3zm4.1-8.8c0 .1 0 .2-.1.2-.1.1-.1.1-.2.1H9v2.1c0 .1 0 .2-.1.2-.1.1-.1.1-.2.1H6.9c-.1 0-.2 0-.2-.1-.1-.1-.1-.1-.1-.2v-2.1H4.5c-.1 0-.2 0-.2-.1-.1-.1-.1-.1-.1-.2V8.7c0-.1 0-.2.1-.2.1-.1.1-.1.2-.1h2.1V6.3c0-.1 0-.2.1-.2s.1-.1.2-.1h1.8c.1 0 .2 0 .2.1.1 0 .1.1.1.2v2.1h2.1c.1 0 .2 0 .2.1.1.1.1.1.1.2v1.8zm7.9 8.8c-.3.3-.8.5-1.3.5s-.9-.2-1.3-.5c-.3-.3-.5-.8-.5-1.3s.2-.9.5-1.3c.3-.3.8-.5 1.3-.5s.9.2 1.3.5c.3.3.5.8.5 1.3s-.2.9-.5 1.3zM21 12h-5.4V7.8h1.7l3.7 3.7v.5z"},null,-1),h=[o];function n(r,a){return c(),s("svg",t,h)}const l={render:n};export{l as default,n as render};
diff --git a/_nuxt/icon-menu.cXqcWbsn.js b/_nuxt/icon-menu.xKbIhOeq.js
similarity index 89%
rename from _nuxt/icon-menu.cXqcWbsn.js
rename to _nuxt/icon-menu.xKbIhOeq.js
index 64ffe9a052..effd3a353b 100644
--- a/_nuxt/icon-menu.cXqcWbsn.js
+++ b/_nuxt/icon-menu.xKbIhOeq.js
@@ -1 +1 @@
-import{b as e,c,e as s}from"./entry.49ZHHvLB.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},o=s("path",{d:"M1.3 5.3H12c.7 0 1.3-.6 1.3-1.3s-.6-1.3-1.3-1.3H1.3C.6 2.7 0 3.3 0 4s.6 1.3 1.3 1.3zm0 5.4h21.3c.7 0 1.3-.6 1.3-1.3S23.4 8 22.7 8H1.3C.6 8 0 8.6 0 9.3s.6 1.4 1.3 1.4zm0 5.3h16c.7 0 1.3-.6 1.3-1.3s-.6-1.3-1.3-1.3h-16c-.7 0-1.3.6-1.3 1.3S.6 16 1.3 16zm21.4 2.7H1.3c-.7 0-1.3.6-1.3 1.3 0 .7.6 1.3 1.3 1.3h21.3c.7 0 1.3-.6 1.3-1.3.1-.7-.5-1.3-1.2-1.3z"},null,-1),n=[o];function r(a,h){return e(),c("svg",t,n)}const _={render:r};export{_ as default,r as render};
+import{b as e,c,e as s}from"./entry.Do8xnxHS.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},o=s("path",{d:"M1.3 5.3H12c.7 0 1.3-.6 1.3-1.3s-.6-1.3-1.3-1.3H1.3C.6 2.7 0 3.3 0 4s.6 1.3 1.3 1.3zm0 5.4h21.3c.7 0 1.3-.6 1.3-1.3S23.4 8 22.7 8H1.3C.6 8 0 8.6 0 9.3s.6 1.4 1.3 1.4zm0 5.3h16c.7 0 1.3-.6 1.3-1.3s-.6-1.3-1.3-1.3h-16c-.7 0-1.3.6-1.3 1.3S.6 16 1.3 16zm21.4 2.7H1.3c-.7 0-1.3.6-1.3 1.3 0 .7.6 1.3 1.3 1.3h21.3c.7 0 1.3-.6 1.3-1.3.1-.7-.5-1.3-1.2-1.3z"},null,-1),n=[o];function r(a,h){return e(),c("svg",t,n)}const _={render:r};export{_ as default,r as render};
diff --git a/_nuxt/icon-microphone._cRYpUs_.js b/_nuxt/icon-microphone.n9nS1r9k.js
similarity index 89%
rename from _nuxt/icon-microphone._cRYpUs_.js
rename to _nuxt/icon-microphone.n9nS1r9k.js
index 7d6e35f23f..42272ab294 100644
--- a/_nuxt/icon-microphone._cRYpUs_.js
+++ b/_nuxt/icon-microphone.n9nS1r9k.js
@@ -1 +1 @@
-import{b as e,c as o,e as c}from"./entry.49ZHHvLB.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=c("path",{d:"M17 9.4c-.7 0-1.3.6-1.3 1.3v2.6c0 2.2-1.8 4-4 4s-4-1.8-4-4v-2.6c0-.7-.6-1.3-1.3-1.3-.8 0-1.4.6-1.4 1.3v2.9c.1 3.6 3.1 6.5 6.7 6.5s6.6-2.9 6.7-6.5v-2.9c-.1-.7-.6-1.3-1.4-1.3z"},null,-1),n=c("path",{d:"M11.7 16c1.5 0 2.7-1.2 2.7-2.7V2.7c0-1.5-1.2-2.7-2.7-2.7C10.2 0 9 1.2 9 2.7v10.7c0 1.4 1.2 2.6 2.7 2.6zm0 5.3c-.7 0-1.3.6-1.3 1.3 0 .7.6 1.3 1.3 1.3.7 0 1.3-.6 1.3-1.3 0-.7-.6-1.3-1.3-1.3z"},null,-1),r=[s,n];function a(d,_){return e(),o("svg",t,r)}const i={render:a};export{i as default,a as render};
+import{b as e,c as o,e as c}from"./entry.Do8xnxHS.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=c("path",{d:"M17 9.4c-.7 0-1.3.6-1.3 1.3v2.6c0 2.2-1.8 4-4 4s-4-1.8-4-4v-2.6c0-.7-.6-1.3-1.3-1.3-.8 0-1.4.6-1.4 1.3v2.9c.1 3.6 3.1 6.5 6.7 6.5s6.6-2.9 6.7-6.5v-2.9c-.1-.7-.6-1.3-1.4-1.3z"},null,-1),n=c("path",{d:"M11.7 16c1.5 0 2.7-1.2 2.7-2.7V2.7c0-1.5-1.2-2.7-2.7-2.7C10.2 0 9 1.2 9 2.7v10.7c0 1.4 1.2 2.6 2.7 2.6zm0 5.3c-.7 0-1.3.6-1.3 1.3 0 .7.6 1.3 1.3 1.3.7 0 1.3-.6 1.3-1.3 0-.7-.6-1.3-1.3-1.3z"},null,-1),r=[s,n];function a(d,_){return e(),o("svg",t,r)}const i={render:a};export{i as default,a as render};
diff --git a/_nuxt/icon-pause-circle-lined.gG4gButR.js b/_nuxt/icon-pause-circle-lined.l6dNNUco.js
similarity index 89%
rename from _nuxt/icon-pause-circle-lined.gG4gButR.js
rename to _nuxt/icon-pause-circle-lined.l6dNNUco.js
index af68da8580..efc952831d 100644
--- a/_nuxt/icon-pause-circle-lined.gG4gButR.js
+++ b/_nuxt/icon-pause-circle-lined.l6dNNUco.js
@@ -1 +1 @@
-import{b as c,c as s,e}from"./entry.49ZHHvLB.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},o=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"},null,-1),n=e("path",{d:"M9.6 8.4c-.7 0-1.2.5-1.2 1.2v4.8c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2V9.6c0-.7-.5-1.2-1.2-1.2zm4.8 0c-.7 0-1.2.5-1.2 1.2v4.8c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2V9.6c0-.7-.5-1.2-1.2-1.2z"},null,-1),r=[o,n];function a(d,i){return c(),s("svg",t,r)}const _={render:a};export{_ as default,a as render};
+import{b as c,c as s,e}from"./entry.Do8xnxHS.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},o=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"},null,-1),n=e("path",{d:"M9.6 8.4c-.7 0-1.2.5-1.2 1.2v4.8c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2V9.6c0-.7-.5-1.2-1.2-1.2zm4.8 0c-.7 0-1.2.5-1.2 1.2v4.8c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2V9.6c0-.7-.5-1.2-1.2-1.2z"},null,-1),r=[o,n];function a(d,i){return c(),s("svg",t,r)}const _={render:a};export{_ as default,a as render};
diff --git a/_nuxt/icon-person.GUGJMKmj.js b/_nuxt/icon-person.dbcwd-53.js
similarity index 94%
rename from _nuxt/icon-person.GUGJMKmj.js
rename to _nuxt/icon-person.dbcwd-53.js
index ee1fadbc0b..4c6304e3e6 100644
--- a/_nuxt/icon-person.GUGJMKmj.js
+++ b/_nuxt/icon-person.dbcwd-53.js
@@ -1 +1 @@
-import{b as e,c as a,e as c}from"./entry.49ZHHvLB.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},o=c("path",{d:"m5.069 10.711 1.243-2.383a3.97 3.97 0 0 1 1.425-1.502c2.875-1.71 3.238-1.684 3.6-1.658l1.943.13c.596.025 1.01.18 3.005 3.108a.507.507 0 0 0 .337.207l2.383.363c.647.103 1.088.7.984 1.347a1.174 1.174 0 0 1-1.347.984l-2.383-.363c-.777-.129-1.476-.544-1.917-1.191-.104-.156-.181-.285-.285-.415l-.947 4.658 1.543 2.31c.31.311.57.726.725 1.14l1.632 4.767c.26.699-.13 1.476-.829 1.71a1.316 1.316 0 0 1-.44.077c-.57 0-1.088-.363-1.295-.907l-1.632-4.766c-.026-.052-.052-.078-.078-.13L8.954 14.39a2.184 2.184 0 0 1-.596-2.02l.83-3.68a2.277 2.277 0 0 1-.26.156 1.44 1.44 0 0 0-.544.57L7.141 11.8a1.189 1.189 0 0 1-1.036.622c-.182 0-.363-.052-.544-.13a1.19 1.19 0 0 1-.492-1.58Zm7.638-6.126a2.292 2.292 0 1 0 0-4.585 2.292 2.292 0 0 0 0 4.585Z"},null,-1),l=c("path",{d:"m8.375 16.799-3.893 3.196a1.396 1.396 0 0 0-.396 1.531c.054.145.124.26.228.386a1.33 1.33 0 0 0 1.89.18l3.894-3.197c.334-.29.632-.68.813-1.078l.097-.59-1.968-1.972-.571 1.427c-.04.042-.052.076-.094.117Z"},null,-1),s=[o,l];function n(r,d){return e(),a("svg",t,s)}const h={render:n};export{h as default,n as render};
+import{b as e,c as a,e as c}from"./entry.Do8xnxHS.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},o=c("path",{d:"m5.069 10.711 1.243-2.383a3.97 3.97 0 0 1 1.425-1.502c2.875-1.71 3.238-1.684 3.6-1.658l1.943.13c.596.025 1.01.18 3.005 3.108a.507.507 0 0 0 .337.207l2.383.363c.647.103 1.088.7.984 1.347a1.174 1.174 0 0 1-1.347.984l-2.383-.363c-.777-.129-1.476-.544-1.917-1.191-.104-.156-.181-.285-.285-.415l-.947 4.658 1.543 2.31c.31.311.57.726.725 1.14l1.632 4.767c.26.699-.13 1.476-.829 1.71a1.316 1.316 0 0 1-.44.077c-.57 0-1.088-.363-1.295-.907l-1.632-4.766c-.026-.052-.052-.078-.078-.13L8.954 14.39a2.184 2.184 0 0 1-.596-2.02l.83-3.68a2.277 2.277 0 0 1-.26.156 1.44 1.44 0 0 0-.544.57L7.141 11.8a1.189 1.189 0 0 1-1.036.622c-.182 0-.363-.052-.544-.13a1.19 1.19 0 0 1-.492-1.58Zm7.638-6.126a2.292 2.292 0 1 0 0-4.585 2.292 2.292 0 0 0 0 4.585Z"},null,-1),l=c("path",{d:"m8.375 16.799-3.893 3.196a1.396 1.396 0 0 0-.396 1.531c.054.145.124.26.228.386a1.33 1.33 0 0 0 1.89.18l3.894-3.197c.334-.29.632-.68.813-1.078l.097-.59-1.968-1.972-.571 1.427c-.04.042-.052.076-.094.117Z"},null,-1),s=[o,l];function n(r,d){return e(),a("svg",t,s)}const h={render:n};export{h as default,n as render};
diff --git a/_nuxt/icon-play-circle-lined.cJRQaA2O.js b/_nuxt/icon-play-circle-lined.hK5OXOAl.js
similarity index 85%
rename from _nuxt/icon-play-circle-lined.cJRQaA2O.js
rename to _nuxt/icon-play-circle-lined.hK5OXOAl.js
index 6cee2d803c..ad1e028d5e 100644
--- a/_nuxt/icon-play-circle-lined.cJRQaA2O.js
+++ b/_nuxt/icon-play-circle-lined.hK5OXOAl.js
@@ -1 +1 @@
-import{b as t,c as o,e}from"./entry.49ZHHvLB.js";const s={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},c=e("path",{d:"m9.6 16.8 6-4.8-6-4.8z"},null,-1),n=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"},null,-1),r=[c,n];function a(d,l){return t(),o("svg",s,r)}const _={render:a};export{_ as default,a as render};
+import{b as t,c as o,e}from"./entry.Do8xnxHS.js";const s={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},c=e("path",{d:"m9.6 16.8 6-4.8-6-4.8z"},null,-1),n=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"},null,-1),r=[c,n];function a(d,l){return t(),o("svg",s,r)}const _={render:a};export{_ as default,a as render};
diff --git a/_nuxt/icon-print-lined.W6h-olC3.js b/_nuxt/icon-print-lined.LSjSkGV0.js
similarity index 92%
rename from _nuxt/icon-print-lined.W6h-olC3.js
rename to _nuxt/icon-print-lined.LSjSkGV0.js
index fd4f9816a5..4040858fd4 100644
--- a/_nuxt/icon-print-lined.W6h-olC3.js
+++ b/_nuxt/icon-print-lined.LSjSkGV0.js
@@ -1 +1 @@
-import{b as e,c as t,e as c}from"./entry.49ZHHvLB.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=c("path",{d:"M22.9 9.4c-.7-.7-1.6-1.1-2.6-1.1V4.7c0-.6-.2-1.2-.7-1.6L17.2.7c-.4-.4-1-.7-1.6-.7H5.2c-.4 0-.7.1-1 .4s-.4.7-.4 1.1v6.8c-1 0-1.9.4-2.6 1.1C.4 10.1 0 11 0 12v6c0 .2.1.4.2.5.1.1.3.2.5.2h3v4.5c0 .2.1.4.2.5.2.2.4.3.6.3h15c.2 0 .4-.1.5-.2.1-.1.2-.3.2-.5v-4.5h3c.2 0 .4-.1.5-.2.1-.1.2-.3.2-.5v-6c.1-1.1-.3-2-1-2.7zM6 2.2h9v2.2c0 .2.1.4.2.5.1.1.3.2.5.2H18v3H6V2.2zm12 19.6H6v-3h12v3zm3.8-5.3H2.2V12c0-.4.1-.8.4-1.1.3-.3.6-.4 1.1-.4h16.5c.4 0 .8.1 1.1.4.3.3.4.6.4 1.1v4.5z"},null,-1),n=c("path",{d:"M18.8 12.4c-.3 0-.6.1-.8.3s-.3.5-.3.8.1.6.3.8.5.3.8.3.6-.1.8-.3.3-.5.3-.8-.1-.6-.3-.8-.5-.3-.8-.3z"},null,-1),h=[s,n];function r(v,a){return e(),t("svg",o,h)}const i={render:r};export{i as default,r as render};
+import{b as e,c as t,e as c}from"./entry.Do8xnxHS.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=c("path",{d:"M22.9 9.4c-.7-.7-1.6-1.1-2.6-1.1V4.7c0-.6-.2-1.2-.7-1.6L17.2.7c-.4-.4-1-.7-1.6-.7H5.2c-.4 0-.7.1-1 .4s-.4.7-.4 1.1v6.8c-1 0-1.9.4-2.6 1.1C.4 10.1 0 11 0 12v6c0 .2.1.4.2.5.1.1.3.2.5.2h3v4.5c0 .2.1.4.2.5.2.2.4.3.6.3h15c.2 0 .4-.1.5-.2.1-.1.2-.3.2-.5v-4.5h3c.2 0 .4-.1.5-.2.1-.1.2-.3.2-.5v-6c.1-1.1-.3-2-1-2.7zM6 2.2h9v2.2c0 .2.1.4.2.5.1.1.3.2.5.2H18v3H6V2.2zm12 19.6H6v-3h12v3zm3.8-5.3H2.2V12c0-.4.1-.8.4-1.1.3-.3.6-.4 1.1-.4h16.5c.4 0 .8.1 1.1.4.3.3.4.6.4 1.1v4.5z"},null,-1),n=c("path",{d:"M18.8 12.4c-.3 0-.6.1-.8.3s-.3.5-.3.8.1.6.3.8.5.3.8.3.6-.1.8-.3.3-.5.3-.8-.1-.6-.3-.8-.5-.3-.8-.3z"},null,-1),h=[s,n];function r(v,a){return e(),t("svg",o,h)}const i={render:r};export{i as default,r as render};
diff --git a/_nuxt/icon-question-circle-lined.fDPrhu5z.js b/_nuxt/icon-question-circle-lined.BuyJvFG0.js
similarity index 89%
rename from _nuxt/icon-question-circle-lined.fDPrhu5z.js
rename to _nuxt/icon-question-circle-lined.BuyJvFG0.js
index 18da1f05c4..dde791199f 100644
--- a/_nuxt/icon-question-circle-lined.fDPrhu5z.js
+++ b/_nuxt/icon-question-circle-lined.BuyJvFG0.js
@@ -1 +1 @@
-import{b as t,c,e}from"./entry.49ZHHvLB.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"},null,-1),n=e("path",{d:"M10.8 16.8h2.4v-2.4h-2.4zm1-10.8C10 6 8.4 7.6 8.4 9.6h2.4c-.1-.7.3-1.4 1-1.4.6 0 .9.4.9.9 0 .2-.2.6-.4.8l-1.1 1.2c-.3.4-.4.6-.4.8v1.2h2.4v-.3c0-.3 0-.4.2-.6l1-1.2c.4-.5.8-1.1.8-1.9-.1-2-1.7-3.1-3.4-3.1z"},null,-1),r=[s,n];function h(l,a){return t(),c("svg",o,r)}const i={render:h};export{i as default,h as render};
+import{b as t,c,e}from"./entry.Do8xnxHS.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"},null,-1),n=e("path",{d:"M10.8 16.8h2.4v-2.4h-2.4zm1-10.8C10 6 8.4 7.6 8.4 9.6h2.4c-.1-.7.3-1.4 1-1.4.6 0 .9.4.9.9 0 .2-.2.6-.4.8l-1.1 1.2c-.3.4-.4.6-.4.8v1.2h2.4v-.3c0-.3 0-.4.2-.6l1-1.2c.4-.5.8-1.1.8-1.9-.1-2-1.7-3.1-3.4-3.1z"},null,-1),r=[s,n];function h(l,a){return t(),c("svg",o,r)}const i={render:h};export{i as default,h as render};
diff --git a/_nuxt/icon-search.GqYFHFIf.js b/_nuxt/icon-search.jXi_AnkC.js
similarity index 87%
rename from _nuxt/icon-search.GqYFHFIf.js
rename to _nuxt/icon-search.jXi_AnkC.js
index a33ba5ce0d..8d1074395f 100644
--- a/_nuxt/icon-search.GqYFHFIf.js
+++ b/_nuxt/icon-search.jXi_AnkC.js
@@ -1 +1 @@
-import{b as e,c,e as t}from"./entry.49ZHHvLB.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=t("path",{d:"m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"},null,-1),n=[s];function r(a,d){return e(),c("svg",o,n)}const _={render:r};export{_ as default,r as render};
+import{b as e,c,e as t}from"./entry.Do8xnxHS.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=t("path",{d:"m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"},null,-1),n=[s];function r(a,d){return e(),c("svg",o,n)}const _={render:r};export{_ as default,r as render};
diff --git a/_nuxt/icon-senior.neBCSItu.js b/_nuxt/icon-senior.Gz8LbPO1.js
similarity index 90%
rename from _nuxt/icon-senior.neBCSItu.js
rename to _nuxt/icon-senior.Gz8LbPO1.js
index 6b800fea87..1934e3e707 100644
--- a/_nuxt/icon-senior.neBCSItu.js
+++ b/_nuxt/icon-senior.Gz8LbPO1.js
@@ -1 +1 @@
-import{b as c,c as e,e as l}from"./entry.49ZHHvLB.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},t=l("path",{d:"m16.9 9.5-5.8-5.4S9.3 6.2 6.8 9.2c-.4.6-.3 1.3.2 1.8l1.1 1-4.5 7.5c-.1.4 0 .8.4.9l1.1.6c.4.1.8 0 .9-.4l4-6.6 1.3 1.3-4.1 7.1c-.1.4 0 .8.4.9l1.2.6c.4.1.8 0 .9-.4l4.5-8.2c.2-.5.1-1.1-.3-1.5l-4.2-4L11.2 8l3.8 3.4c.3.3.7.3 1 0l1-1c.2-.2.2-.6-.1-.9zm.4-4.9c1.1-1.1 1.1-2.8 0-3.8-1.1-1.1-2.8-1.1-3.8 0-1.1 1.1-1.1 2.8 0 3.8 1 1.1 2.8 1.1 3.8 0zm2.3 12.2-.5-3.1c-.1-.4-.4-.6-.8-.6l-1.3.2c-.4.1-.6.4-.6.8l1.4 9.4c.1.4.4.6.8.6l1.4-.2c.4-.1.6-.4.6-.8l-1-6.3z"},null,-1),n=[t];function s(r,a){return c(),e("svg",o,n)}const i={render:s};export{i as default,s as render};
+import{b as c,c as e,e as l}from"./entry.Do8xnxHS.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},t=l("path",{d:"m16.9 9.5-5.8-5.4S9.3 6.2 6.8 9.2c-.4.6-.3 1.3.2 1.8l1.1 1-4.5 7.5c-.1.4 0 .8.4.9l1.1.6c.4.1.8 0 .9-.4l4-6.6 1.3 1.3-4.1 7.1c-.1.4 0 .8.4.9l1.2.6c.4.1.8 0 .9-.4l4.5-8.2c.2-.5.1-1.1-.3-1.5l-4.2-4L11.2 8l3.8 3.4c.3.3.7.3 1 0l1-1c.2-.2.2-.6-.1-.9zm.4-4.9c1.1-1.1 1.1-2.8 0-3.8-1.1-1.1-2.8-1.1-3.8 0-1.1 1.1-1.1 2.8 0 3.8 1 1.1 2.8 1.1 3.8 0zm2.3 12.2-.5-3.1c-.1-.4-.4-.6-.8-.6l-1.3.2c-.4.1-.6.4-.6.8l1.4 9.4c.1.4.4.6.8.6l1.4-.2c.4-.1.6-.4.6-.8l-1-6.3z"},null,-1),n=[t];function s(r,a){return c(),e("svg",o,n)}const i={render:s};export{i as default,s as render};
diff --git a/_nuxt/icon-share.yAJ7fkkO.js b/_nuxt/icon-share.Mrcz1U3u.js
similarity index 86%
rename from _nuxt/icon-share.yAJ7fkkO.js
rename to _nuxt/icon-share.Mrcz1U3u.js
index 945ef21caa..0406a033c8 100644
--- a/_nuxt/icon-share.yAJ7fkkO.js
+++ b/_nuxt/icon-share.Mrcz1U3u.js
@@ -1 +1 @@
-import{b as e,c,e as t}from"./entry.49ZHHvLB.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=t("path",{d:"M20 15.2c-1.1 0-2.1.5-2.8 1.2L8 11.7v-.8l8.9-3.6c.7.9 1.9 1.5 3.1 1.5 2.2 0 4-1.8 4-4s-1.8-4-4-4c-2 0-3.6 1.4-3.9 3.3L6.5 8c-.7-.5-1.6-.8-2.5-.8-2.2 0-4 1.8-4 4s1.8 4 4 4c.8 0 1.6-.3 2.3-.7l9.8 5c.1 2.1 1.9 3.7 4 3.7 2.2 0 4-1.8 4-4-.1-2.2-1.9-4-4.1-4z"},null,-1),n=[s];function r(a,l){return e(),c("svg",o,n)}const _={render:r};export{_ as default,r as render};
+import{b as e,c,e as t}from"./entry.Do8xnxHS.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=t("path",{d:"M20 15.2c-1.1 0-2.1.5-2.8 1.2L8 11.7v-.8l8.9-3.6c.7.9 1.9 1.5 3.1 1.5 2.2 0 4-1.8 4-4s-1.8-4-4-4c-2 0-3.6 1.4-3.9 3.3L6.5 8c-.7-.5-1.6-.8-2.5-.8-2.2 0-4 1.8-4 4s1.8 4 4 4c.8 0 1.6-.3 2.3-.7l9.8 5c.1 2.1 1.9 3.7 4 3.7 2.2 0 4-1.8 4-4-.1-2.2-1.9-4-4.1-4z"},null,-1),n=[s];function r(a,l){return e(),c("svg",o,n)}const _={render:r};export{_ as default,r as render};
diff --git a/_nuxt/icon-smoke.iFg4JVG9.js b/_nuxt/icon-smoke.ogLcEKzS.js
similarity index 91%
rename from _nuxt/icon-smoke.iFg4JVG9.js
rename to _nuxt/icon-smoke.ogLcEKzS.js
index 243aff6369..24bd3ec061 100644
--- a/_nuxt/icon-smoke.iFg4JVG9.js
+++ b/_nuxt/icon-smoke.ogLcEKzS.js
@@ -1 +1 @@
-import{b as t,c as o,e}from"./entry.49ZHHvLB.js";const c={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=e("path",{d:"M6.9 10.4c.4-.1.9-.1 1.3-.1.7-2.6 2.8-4.7 5.4-5.3 3.8-.8 7.5 1.6 8.4 5.4.8.3 1.4.8 2 1.4C23.9 5.3 18.6 0 12 0S0 5.4 0 12c0 1.9.5 3.7 1.2 5.3.4-.4.9-.7 1.5-1-.3-2.7 1.5-5.3 4.2-5.9z"},null,-1),n=e("path",{d:"M20.8 12.4c-.4-.1-.7-.5-.8-.9 0-.1 0-.3-.1-.4-.6-2.7-3.2-4.4-5.8-3.9-2.1.4-3.7 2.3-3.8 4.5 0 .3-.2.6-.5.8-.3.2-.6.2-.9.2-.5-.1-1-.1-1.5 0-1.7.4-2.8 2.1-2.4 3.9 0 .1 0 .2.1.3.1.3.1.6-.1.9-.2.3-.4.5-.7.5-.8.2-1.7.5-1.7 1.2C4.7 22.2 8.2 24 12 24c5.4 0 10-3.6 11.5-8.6 0-.1-.1-.2-.1-.3-.3-1.4-1.3-2.4-2.6-2.7z"},null,-1),r=[s,n];function a(d,_){return t(),o("svg",c,r)}const h={render:a};export{h as default,a as render};
+import{b as t,c as o,e}from"./entry.Do8xnxHS.js";const c={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=e("path",{d:"M6.9 10.4c.4-.1.9-.1 1.3-.1.7-2.6 2.8-4.7 5.4-5.3 3.8-.8 7.5 1.6 8.4 5.4.8.3 1.4.8 2 1.4C23.9 5.3 18.6 0 12 0S0 5.4 0 12c0 1.9.5 3.7 1.2 5.3.4-.4.9-.7 1.5-1-.3-2.7 1.5-5.3 4.2-5.9z"},null,-1),n=e("path",{d:"M20.8 12.4c-.4-.1-.7-.5-.8-.9 0-.1 0-.3-.1-.4-.6-2.7-3.2-4.4-5.8-3.9-2.1.4-3.7 2.3-3.8 4.5 0 .3-.2.6-.5.8-.3.2-.6.2-.9.2-.5-.1-1-.1-1.5 0-1.7.4-2.8 2.1-2.4 3.9 0 .1 0 .2.1.3.1.3.1.6-.1.9-.2.3-.4.5-.7.5-.8.2-1.7.5-1.7 1.2C4.7 22.2 8.2 24 12 24c5.4 0 10-3.6 11.5-8.6 0-.1-.1-.2-.1-.3-.3-1.4-1.3-2.4-2.6-2.7z"},null,-1),r=[s,n];function a(d,_){return t(),o("svg",c,r)}const h={render:a};export{h as default,a as render};
diff --git a/_nuxt/icon-spotify.mOg-s27z.js b/_nuxt/icon-spotify.Fqdu0Rmr.js
similarity index 90%
rename from _nuxt/icon-spotify.mOg-s27z.js
rename to _nuxt/icon-spotify.Fqdu0Rmr.js
index 9424106ea2..c943ab8473 100644
--- a/_nuxt/icon-spotify.mOg-s27z.js
+++ b/_nuxt/icon-spotify.Fqdu0Rmr.js
@@ -1 +1 @@
-import{b as e,c as t,e as o}from"./entry.49ZHHvLB.js";const c={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=o("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.5 17.3c-.2.4-.7.5-1 .2-2.8-1.7-6.4-2.1-10.5-1.2-.4.1-.8-.2-.9-.6-.1-.4.2-.8.6-.9 4.6-1 8.5-.6 11.7 1.3.2.4.3.9.1 1.2zM19 14c-.3.4-.8.6-1.3.3-3.2-2-8.1-2.6-12-1.4-.5.1-1-.1-1.2-.6-.1-.5.1-1 .6-1.2 4.4-1.3 9.8-.7 13.5 1.6.5.3.6.9.4 1.3zm.1-3.4C15.2 8.3 8.8 8.1 5.2 9.3c-.6.1-1.3-.2-1.4-.8-.2-.6.1-1.2.7-1.4 4.2-1.3 11.3-1 15.7 1.6.5.3.7 1 .4 1.5-.3.6-1 .8-1.5.4z"},null,-1),n=[s];function r(a,d){return e(),t("svg",c,n)}const _={render:r};export{_ as default,r as render};
+import{b as e,c as t,e as o}from"./entry.Do8xnxHS.js";const c={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=o("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.5 17.3c-.2.4-.7.5-1 .2-2.8-1.7-6.4-2.1-10.5-1.2-.4.1-.8-.2-.9-.6-.1-.4.2-.8.6-.9 4.6-1 8.5-.6 11.7 1.3.2.4.3.9.1 1.2zM19 14c-.3.4-.8.6-1.3.3-3.2-2-8.1-2.6-12-1.4-.5.1-1-.1-1.2-.6-.1-.5.1-1 .6-1.2 4.4-1.3 9.8-.7 13.5 1.6.5.3.6.9.4 1.3zm.1-3.4C15.2 8.3 8.8 8.1 5.2 9.3c-.6.1-1.3-.2-1.4-.8-.2-.6.1-1.2.7-1.4 4.2-1.3 11.3-1 15.7 1.6.5.3.7 1 .4 1.5-.3.6-1 .8-1.5.4z"},null,-1),n=[s];function r(a,d){return e(),t("svg",c,n)}const _={render:r};export{_ as default,r as render};
diff --git a/_nuxt/icon-star.5-Hz87KX.js b/_nuxt/icon-star._n_01cGJ.js
similarity index 87%
rename from _nuxt/icon-star.5-Hz87KX.js
rename to _nuxt/icon-star._n_01cGJ.js
index 685f306e83..02ad36cbd5 100644
--- a/_nuxt/icon-star.5-Hz87KX.js
+++ b/_nuxt/icon-star._n_01cGJ.js
@@ -1 +1 @@
-import{b as e,c as t,e as c}from"./entry.49ZHHvLB.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=c("path",{d:"m23.4 12.5-4.1-3.8 1.1-6.4c.1-.7-.2-1.5-.8-1.9-.6-.4-1.4-.5-2.1-.1L12 3.1 6.5.2C5.8-.1 5-.1 4.4.4c-.6.4-.9 1.2-.8 1.9l1 6.4-4.1 3.8c-.5.5-.7 1.3-.5 2 .2.7.9 1.2 1.6 1.3l5.8 1.4 2.8 5.6c.3.7 1 1.1 1.8 1.1s1.4-.4 1.8-1.1l2.8-5.6 5.8-1.4c.7-.1 1.4-.6 1.6-1.3.1-.7-.1-1.5-.6-2z"},null,-1),n=[s];function r(a,l){return e(),t("svg",o,n)}const _={render:r};export{_ as default,r as render};
+import{b as e,c as t,e as c}from"./entry.Do8xnxHS.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=c("path",{d:"m23.4 12.5-4.1-3.8 1.1-6.4c.1-.7-.2-1.5-.8-1.9-.6-.4-1.4-.5-2.1-.1L12 3.1 6.5.2C5.8-.1 5-.1 4.4.4c-.6.4-.9 1.2-.8 1.9l1 6.4-4.1 3.8c-.5.5-.7 1.3-.5 2 .2.7.9 1.2 1.6 1.3l5.8 1.4 2.8 5.6c.3.7 1 1.1 1.8 1.1s1.4-.4 1.8-1.1l2.8-5.6 5.8-1.4c.7-.1 1.4-.6 1.6-1.3.1-.7-.1-1.5-.6-2z"},null,-1),n=[s];function r(a,l){return e(),t("svg",o,n)}const _={render:r};export{_ as default,r as render};
diff --git a/_nuxt/icon-stop-circle-lined.3l3IR3Om.js b/_nuxt/icon-stop-circle-lined.MCDwAMkC.js
similarity index 85%
rename from _nuxt/icon-stop-circle-lined.3l3IR3Om.js
rename to _nuxt/icon-stop-circle-lined.MCDwAMkC.js
index a45bce229d..1aa9697bd5 100644
--- a/_nuxt/icon-stop-circle-lined.3l3IR3Om.js
+++ b/_nuxt/icon-stop-circle-lined.MCDwAMkC.js
@@ -1 +1 @@
-import{b as t,c as o,e}from"./entry.49ZHHvLB.js";const s={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},c=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"},null,-1),n=e("path",{d:"M8.4 8.4h7.2v7.2H8.4z"},null,-1),r=[c,n];function a(d,i){return t(),o("svg",s,r)}const _={render:a};export{_ as default,a as render};
+import{b as t,c as o,e}from"./entry.Do8xnxHS.js";const s={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},c=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"},null,-1),n=e("path",{d:"M8.4 8.4h7.2v7.2H8.4z"},null,-1),r=[c,n];function a(d,i){return t(),o("svg",s,r)}const _={render:a};export{_ as default,a as render};
diff --git a/_nuxt/icon-table-lined.i31Cdm75.js b/_nuxt/icon-table-lined.Obc807ds.js
similarity index 90%
rename from _nuxt/icon-table-lined.i31Cdm75.js
rename to _nuxt/icon-table-lined.Obc807ds.js
index 1aadd53ec9..d04814cd98 100644
--- a/_nuxt/icon-table-lined.i31Cdm75.js
+++ b/_nuxt/icon-table-lined.Obc807ds.js
@@ -1 +1 @@
-import{b as e,c,e as t}from"./entry.49ZHHvLB.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=t("path",{d:"M23.3 2.2c-.4-.4-1-.7-1.6-.7H2.2c-.6 0-1.2.2-1.6.7S0 3.1 0 3.8v16.5c0 .6.2 1.2.7 1.6.4.4 1 .7 1.6.7h19.5c.6 0 1.2-.2 1.6-.7.4-.4.7-1 .7-1.6V3.8c-.1-.7-.3-1.2-.8-1.6zM7.4 20.6h-5c-.2 0-.3-.1-.4-.2-.1-.1-.2-.2-.2-.4v-3.9h5.5v4.5zm0-6.4H1.9V9.8h5.5v4.4zm0-6.3H1.9v-4c0-.2.1-.3.2-.4s.2-.2.4-.2h4.9v4.6zm14.7 12.2c0 .2-.1.3-.2.4-.1.1-.2.2-.4.2H9.2v-4.5h12.9v3.9zm0-5.9H9.2V9.8h12.9v4.4zm0-6.3H9.2V3.4h12.3c.2 0 .3.1.4.2.1.1.2.2.2.4v3.9z"},null,-1),n=[s];function h(v,r){return e(),c("svg",o,n)}const d={render:h};export{d as default,h as render};
+import{b as e,c,e as t}from"./entry.Do8xnxHS.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=t("path",{d:"M23.3 2.2c-.4-.4-1-.7-1.6-.7H2.2c-.6 0-1.2.2-1.6.7S0 3.1 0 3.8v16.5c0 .6.2 1.2.7 1.6.4.4 1 .7 1.6.7h19.5c.6 0 1.2-.2 1.6-.7.4-.4.7-1 .7-1.6V3.8c-.1-.7-.3-1.2-.8-1.6zM7.4 20.6h-5c-.2 0-.3-.1-.4-.2-.1-.1-.2-.2-.2-.4v-3.9h5.5v4.5zm0-6.4H1.9V9.8h5.5v4.4zm0-6.3H1.9v-4c0-.2.1-.3.2-.4s.2-.2.4-.2h4.9v4.6zm14.7 12.2c0 .2-.1.3-.2.4-.1.1-.2.2-.4.2H9.2v-4.5h12.9v3.9zm0-5.9H9.2V9.8h12.9v4.4zm0-6.3H9.2V3.4h12.3c.2 0 .3.1.4.2.1.1.2.2.2.4v3.9z"},null,-1),n=[s];function h(v,r){return e(),c("svg",o,n)}const d={render:h};export{d as default,h as render};
diff --git a/_nuxt/icon-temperature.CD6gMo8Q.js b/_nuxt/icon-temperature.iYeUUXBf.js
similarity index 86%
rename from _nuxt/icon-temperature.CD6gMo8Q.js
rename to _nuxt/icon-temperature.iYeUUXBf.js
index a741669ebb..be4479031c 100644
--- a/_nuxt/icon-temperature.CD6gMo8Q.js
+++ b/_nuxt/icon-temperature.iYeUUXBf.js
@@ -1 +1 @@
-import{b as c,c as t,e}from"./entry.49ZHHvLB.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20.7c-3 0-5.5-2.4-5.5-5.5 0-2.2 1.4-4.2 3.3-5V3.9c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.4c1.9.8 3.3 2.8 3.3 5 0 3-2.5 5.4-5.5 5.4z"},null,-1),n=e("circle",{cx:"12",cy:"15.3",r:"2.2"},null,-1),r=[s,n];function a(l,_){return c(),t("svg",o,r)}const i={render:a};export{i as default,a as render};
+import{b as c,c as t,e}from"./entry.Do8xnxHS.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20.7c-3 0-5.5-2.4-5.5-5.5 0-2.2 1.4-4.2 3.3-5V3.9c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.4c1.9.8 3.3 2.8 3.3 5 0 3-2.5 5.4-5.5 5.4z"},null,-1),n=e("circle",{cx:"12",cy:"15.3",r:"2.2"},null,-1),r=[s,n];function a(l,_){return c(),t("svg",o,r)}const i={render:a};export{i as default,a as render};
diff --git a/_nuxt/icon-traffic.0NDlUvBB.js b/_nuxt/icon-traffic.iZKtggIi.js
similarity index 88%
rename from _nuxt/icon-traffic.0NDlUvBB.js
rename to _nuxt/icon-traffic.iZKtggIi.js
index 376415db27..72da8dc07f 100644
--- a/_nuxt/icon-traffic.0NDlUvBB.js
+++ b/_nuxt/icon-traffic.iZKtggIi.js
@@ -1 +1 @@
-import{b as c,c as e,e as t}from"./entry.49ZHHvLB.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=t("path",{d:"M12 4.4c-.6 0-1.1.5-1.1 1.1v3.3c0 .6.5 1.1 1.1 1.1s1.1-.5 1.1-1.1V5.5c0-.6-.5-1.1-1.1-1.1zm0 9.8c-.6 0-1.1.5-1.1 1.1v4.4c0 .6.5 1.1 1.1 1.1s1.1-.5 1.1-1.1v-4.4c0-.6-.5-1.1-1.1-1.1zM0 12.7c0 4.2 2.2 8 5.5 10.2L8.8 1.1C3.8 2.6 0 7.2 0 12.7zM15.3 1.1l3.3 21.8c3.3-2.2 5.5-6 5.5-10.2-.1-5.5-3.9-10.1-8.8-11.6z"},null,-1),n=[s];function r(a,d){return c(),e("svg",o,n)}const l={render:r};export{l as default,r as render};
+import{b as c,c as e,e as t}from"./entry.Do8xnxHS.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=t("path",{d:"M12 4.4c-.6 0-1.1.5-1.1 1.1v3.3c0 .6.5 1.1 1.1 1.1s1.1-.5 1.1-1.1V5.5c0-.6-.5-1.1-1.1-1.1zm0 9.8c-.6 0-1.1.5-1.1 1.1v4.4c0 .6.5 1.1 1.1 1.1s1.1-.5 1.1-1.1v-4.4c0-.6-.5-1.1-1.1-1.1zM0 12.7c0 4.2 2.2 8 5.5 10.2L8.8 1.1C3.8 2.6 0 7.2 0 12.7zM15.3 1.1l3.3 21.8c3.3-2.2 5.5-6 5.5-10.2-.1-5.5-3.9-10.1-8.8-11.6z"},null,-1),n=[s];function r(a,d){return c(),e("svg",o,n)}const l={render:r};export{l as default,r as render};
diff --git a/_nuxt/icon-trash-lined.lcKiB1PC.js b/_nuxt/icon-trash-lined.LyLUP7op.js
similarity index 87%
rename from _nuxt/icon-trash-lined.lcKiB1PC.js
rename to _nuxt/icon-trash-lined.LyLUP7op.js
index dca3422b8e..e4fb89036a 100644
--- a/_nuxt/icon-trash-lined.lcKiB1PC.js
+++ b/_nuxt/icon-trash-lined.LyLUP7op.js
@@ -1 +1 @@
-import{b as e,c,e as s}from"./entry.49ZHHvLB.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},o=s("path",{d:"M18.7 6.7H5.3c-.8 0-1.4.6-1.3 1.4l1.5 14.7c.1.7.6 1.2 1.3 1.2h10.4c.7 0 1.3-.5 1.3-1.2L20 8.1c.1-.8-.5-1.4-1.3-1.4zM16 21.3H8l-1.2-12h10.4l-1.2 12zM5.3 5.3h13.3c.8 0 1.4-.6 1.4-1.3s-.6-1.3-1.3-1.3h-5.3V1.3C13.3.6 12.7 0 12 0s-1.3.6-1.3 1.3v1.3H5.3C4.6 2.7 4 3.3 4 4s.6 1.3 1.3 1.3z"},null,-1),n=[o];function r(a,h){return e(),c("svg",t,n)}const d={render:r};export{d as default,r as render};
+import{b as e,c,e as s}from"./entry.Do8xnxHS.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},o=s("path",{d:"M18.7 6.7H5.3c-.8 0-1.4.6-1.3 1.4l1.5 14.7c.1.7.6 1.2 1.3 1.2h10.4c.7 0 1.3-.5 1.3-1.2L20 8.1c.1-.8-.5-1.4-1.3-1.4zM16 21.3H8l-1.2-12h10.4l-1.2 12zM5.3 5.3h13.3c.8 0 1.4-.6 1.4-1.3s-.6-1.3-1.3-1.3h-5.3V1.3C13.3.6 12.7 0 12 0s-1.3.6-1.3 1.3v1.3H5.3C4.6 2.7 4 3.3 4 4s.6 1.3 1.3 1.3z"},null,-1),n=[o];function r(a,h){return e(),c("svg",t,n)}const d={render:r};export{d as default,r as render};
diff --git a/_nuxt/icon-upload.Z4PaOLf-.js b/_nuxt/icon-upload.kUVI-ycm.js
similarity index 87%
rename from _nuxt/icon-upload.Z4PaOLf-.js
rename to _nuxt/icon-upload.kUVI-ycm.js
index 2ba957d800..0b6edee6a8 100644
--- a/_nuxt/icon-upload.Z4PaOLf-.js
+++ b/_nuxt/icon-upload.kUVI-ycm.js
@@ -1 +1 @@
-import{b as e,c,e as o}from"./entry.49ZHHvLB.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=o("path",{d:"M11 .4 3.5 7.2c-.6.6-.7 1.5-.1 2.1.5.6 1.5.7 2.1.1l5-4.5v11.6c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V4.9l5 4.5c.6.6 1.6.5 2.1-.1.3-.3.4-.6.4-1s-.2-.8-.5-1.1L13 .4c-.6-.5-1.4-.5-2 0zM4.5 24c-.8 0-1.5-.7-1.5-1.5S3.7 21 4.5 21h15c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-15z"},null,-1),n=[s];function r(a,l){return e(),c("svg",t,n)}const h={render:r};export{h as default,r as render};
+import{b as e,c,e as o}from"./entry.Do8xnxHS.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=o("path",{d:"M11 .4 3.5 7.2c-.6.6-.7 1.5-.1 2.1.5.6 1.5.7 2.1.1l5-4.5v11.6c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V4.9l5 4.5c.6.6 1.6.5 2.1-.1.3-.3.4-.6.4-1s-.2-.8-.5-1.1L13 .4c-.6-.5-1.4-.5-2 0zM4.5 24c-.8 0-1.5-.7-1.5-1.5S3.7 21 4.5 21h15c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-15z"},null,-1),n=[s];function r(a,l){return e(),c("svg",t,n)}const h={render:r};export{h as default,r as render};
diff --git a/_nuxt/icon-user-circle-filled.Cmq3FUmD.js b/_nuxt/icon-user-circle-filled.IJIxudQc.js
similarity index 87%
rename from _nuxt/icon-user-circle-filled.Cmq3FUmD.js
rename to _nuxt/icon-user-circle-filled.IJIxudQc.js
index 39c991c969..7b825211bf 100644
--- a/_nuxt/icon-user-circle-filled.Cmq3FUmD.js
+++ b/_nuxt/icon-user-circle-filled.IJIxudQc.js
@@ -1 +1 @@
-import{b as e,c,e as t}from"./entry.49ZHHvLB.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=t("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 4c1.9 0 3.5 1.6 3.5 3.5S13.9 11 12 11 8.5 9.4 8.5 7.5 10.1 4 12 4zm6 12.7c0 .7-.6 1.3-1.3 1.3H7.3c-.7 0-1.3-.6-1.3-1.3v-1.1c0-2 1.6-3.6 3.6-3.6h.4c.6.3 1.3.4 2 .4s1.4-.2 2-.4h.4c2 0 3.6 1.6 3.6 3.6v1.1z"},null,-1),n=[s];function r(a,l){return e(),c("svg",o,n)}const i={render:r};export{i as default,r as render};
+import{b as e,c,e as t}from"./entry.Do8xnxHS.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=t("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 4c1.9 0 3.5 1.6 3.5 3.5S13.9 11 12 11 8.5 9.4 8.5 7.5 10.1 4 12 4zm6 12.7c0 .7-.6 1.3-1.3 1.3H7.3c-.7 0-1.3-.6-1.3-1.3v-1.1c0-2 1.6-3.6 3.6-3.6h.4c.6.3 1.3.4 2 .4s1.4-.2 2-.4h.4c2 0 3.6 1.6 3.6 3.6v1.1z"},null,-1),n=[s];function r(a,l){return e(),c("svg",o,n)}const i={render:r};export{i as default,r as render};
diff --git a/_nuxt/icon-video.kiPGaQ6i.js b/_nuxt/icon-video.7VDPpbWR.js
similarity index 83%
rename from _nuxt/icon-video.kiPGaQ6i.js
rename to _nuxt/icon-video.7VDPpbWR.js
index 0d34d80615..d3a557cfa0 100644
--- a/_nuxt/icon-video.kiPGaQ6i.js
+++ b/_nuxt/icon-video.7VDPpbWR.js
@@ -1 +1 @@
-import{b as e,c,e as o}from"./entry.49ZHHvLB.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=o("path",{d:"m21.9 5.6-4.6 3.2v6.6l4.6 3.1c.9.6 2.1 0 2.1-1.1V6.6c0-1-1.2-1.6-2.1-1zM14 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2z"},null,-1),n=[s];function r(a,d){return e(),c("svg",t,n)}const l={render:r};export{l as default,r as render};
+import{b as e,c,e as o}from"./entry.Do8xnxHS.js";const t={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=o("path",{d:"m21.9 5.6-4.6 3.2v6.6l4.6 3.1c.9.6 2.1 0 2.1-1.1V6.6c0-1-1.2-1.6-2.1-1zM14 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2z"},null,-1),n=[s];function r(a,d){return e(),c("svg",t,n)}const l={render:r};export{l as default,r as render};
diff --git a/_nuxt/icon-wechat.C9k7L3B4.js b/_nuxt/icon-wechat.Z6k04rEx.js
similarity index 92%
rename from _nuxt/icon-wechat.C9k7L3B4.js
rename to _nuxt/icon-wechat.Z6k04rEx.js
index 5833c1855c..ec9c3c1d84 100644
--- a/_nuxt/icon-wechat.C9k7L3B4.js
+++ b/_nuxt/icon-wechat.Z6k04rEx.js
@@ -1 +1 @@
-import{b as e,c as t,e as c}from"./entry.49ZHHvLB.js";const s={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},o=c("path",{d:"M16.6 8.3c-4.4 0-7.9 2.9-7.9 6.5 0 .6.1 1.1.2 1.6h-.3c-1 0-1.9-.1-2.8-.4-2.5 1.5-3 1.3-3 1.3.3-.6.4-1.7.4-2.5C1.3 13.6 0 11.6 0 9.4c0-3.9 3.9-7 8.6-7 4.3 0 7.9 2.6 8.5 5.9h-.5zm-3.9-1.1c0-.7-.6-1.3-1.3-1.3s-1.3.6-1.3 1.3c0 .7.6 1.3 1.3 1.3s1.3-.6 1.3-1.3zm-8.2 0c0 .7.6 1.3 1.3 1.3S7 7.9 7 7.2 6.4 6 5.7 6s-1.2.5-1.2 1.2z"},null,-1),n=c("path",{d:"M16.7 8.9c4 0 7.3 2.6 7.3 5.9 0 1.9-1.1 3.5-2.7 4.6 0 .6.1 1.6.4 2.1 0 0-.4.2-2.5-1.1-.7.2-1.5.3-2.4.3-4 0-7.3-2.6-7.3-5.9 0-3.3 3.2-5.9 7.2-5.9zM13.2 13c0 .6.5 1 1 1 .6 0 1-.5 1-1 0-.6-.5-1-1-1-.6-.1-1 .4-1 1zm4.7 0c0 .6.5 1 1 1 .6 0 1-.5 1-1 0-.6-.5-1-1-1s-1 .4-1 1z"},null,-1),a=[o,n];function r(h,d){return e(),t("svg",s,a)}const l={render:r};export{l as default,r as render};
+import{b as e,c as t,e as c}from"./entry.Do8xnxHS.js";const s={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},o=c("path",{d:"M16.6 8.3c-4.4 0-7.9 2.9-7.9 6.5 0 .6.1 1.1.2 1.6h-.3c-1 0-1.9-.1-2.8-.4-2.5 1.5-3 1.3-3 1.3.3-.6.4-1.7.4-2.5C1.3 13.6 0 11.6 0 9.4c0-3.9 3.9-7 8.6-7 4.3 0 7.9 2.6 8.5 5.9h-.5zm-3.9-1.1c0-.7-.6-1.3-1.3-1.3s-1.3.6-1.3 1.3c0 .7.6 1.3 1.3 1.3s1.3-.6 1.3-1.3zm-8.2 0c0 .7.6 1.3 1.3 1.3S7 7.9 7 7.2 6.4 6 5.7 6s-1.2.5-1.2 1.2z"},null,-1),n=c("path",{d:"M16.7 8.9c4 0 7.3 2.6 7.3 5.9 0 1.9-1.1 3.5-2.7 4.6 0 .6.1 1.6.4 2.1 0 0-.4.2-2.5-1.1-.7.2-1.5.3-2.4.3-4 0-7.3-2.6-7.3-5.9 0-3.3 3.2-5.9 7.2-5.9zM13.2 13c0 .6.5 1 1 1 .6 0 1-.5 1-1 0-.6-.5-1-1-1-.6-.1-1 .4-1 1zm4.7 0c0 .6.5 1 1 1 .6 0 1-.5 1-1 0-.6-.5-1-1-1s-1 .4-1 1z"},null,-1),a=[o,n];function r(h,d){return e(),t("svg",s,a)}const l={render:r};export{l as default,r as render};
diff --git a/_nuxt/icon-youtube.ogRB3-Fq.js b/_nuxt/icon-youtube.pz58cf0I.js
similarity index 86%
rename from _nuxt/icon-youtube.ogRB3-Fq.js
rename to _nuxt/icon-youtube.pz58cf0I.js
index 1ae83bd83b..54f167ec71 100644
--- a/_nuxt/icon-youtube.ogRB3-Fq.js
+++ b/_nuxt/icon-youtube.pz58cf0I.js
@@ -1 +1 @@
-import{b as e,c as t,e as o}from"./entry.49ZHHvLB.js";const s={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},c=o("path",{d:"M23.5 6.2c-.3-1-1.1-1.9-2.1-2.1-1.9-.5-9.4-.5-9.4-.5s-7.5 0-9.4.5C1.6 4.4.8 5.2.5 6.2 0 8.1 0 12 0 12s0 3.9.5 5.8c.3 1 1.1 1.8 2.1 2.1 1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5c1-.3 1.8-1.1 2.1-2.1.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zm-14 9.4V8.5l6.3 3.6-6.3 3.5z"},null,-1),n=[c];function r(a,d){return e(),t("svg",s,n)}const _={render:r};export{_ as default,r as render};
+import{b as e,c as t,e as o}from"./entry.Do8xnxHS.js";const s={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},c=o("path",{d:"M23.5 6.2c-.3-1-1.1-1.9-2.1-2.1-1.9-.5-9.4-.5-9.4-.5s-7.5 0-9.4.5C1.6 4.4.8 5.2.5 6.2 0 8.1 0 12 0 12s0 3.9.5 5.8c.3 1 1.1 1.8 2.1 2.1 1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5c1-.3 1.8-1.1 2.1-2.1.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zm-14 9.4V8.5l6.3 3.6-6.3 3.5z"},null,-1),n=[c];function r(a,d){return e(),t("svg",s,n)}const _={render:r};export{_ as default,r as render};
diff --git a/_nuxt/icon-zoom-in.6p_hWNaT.js b/_nuxt/icon-zoom-in.3g5qbP_U.js
similarity index 91%
rename from _nuxt/icon-zoom-in.6p_hWNaT.js
rename to _nuxt/icon-zoom-in.3g5qbP_U.js
index 5d08430124..6d5b8c08e2 100644
--- a/_nuxt/icon-zoom-in.6p_hWNaT.js
+++ b/_nuxt/icon-zoom-in.3g5qbP_U.js
@@ -1 +1 @@
-import{b as e,c as s,e as c}from"./entry.49ZHHvLB.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},t=c("path",{d:"m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"},null,-1),n=c("path",{d:"M10.5 7.5V6c0-.8-.7-1.5-1.5-1.5S7.5 5.2 7.5 6v1.5H6c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h1.5V12c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5v-1.5H12c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5h-1.5z"},null,-1),r=[t,n];function a(d,h){return e(),s("svg",o,r)}const _={render:a};export{_ as default,a as render};
+import{b as e,c as s,e as c}from"./entry.Do8xnxHS.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},t=c("path",{d:"m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"},null,-1),n=c("path",{d:"M10.5 7.5V6c0-.8-.7-1.5-1.5-1.5S7.5 5.2 7.5 6v1.5H6c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h1.5V12c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5v-1.5H12c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5h-1.5z"},null,-1),r=[t,n];function a(d,h){return e(),s("svg",o,r)}const _={render:a};export{_ as default,a as render};
diff --git a/_nuxt/icon-zoom-out.AmH-vH4L.js b/_nuxt/icon-zoom-out.GK2jSbWk.js
similarity index 89%
rename from _nuxt/icon-zoom-out.AmH-vH4L.js
rename to _nuxt/icon-zoom-out.GK2jSbWk.js
index 998e1a67a1..904006289d 100644
--- a/_nuxt/icon-zoom-out.AmH-vH4L.js
+++ b/_nuxt/icon-zoom-out.GK2jSbWk.js
@@ -1 +1 @@
-import{b as e,c as t,e as c}from"./entry.49ZHHvLB.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=c("path",{d:"m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"},null,-1),n=c("path",{d:"M6 7.5c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h6c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5H6z"},null,-1),r=[s,n];function a(d,l){return e(),t("svg",o,r)}const h={render:a};export{h as default,a as render};
+import{b as e,c as t,e as c}from"./entry.Do8xnxHS.js";const o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s=c("path",{d:"m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"},null,-1),n=c("path",{d:"M6 7.5c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h6c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5H6z"},null,-1),r=[s,n];function a(d,l){return e(),t("svg",o,r)}const h={render:a};export{h as default,a as render};
diff --git a/_nuxt/module-listing.hP89siY4.js b/_nuxt/module-listing.zWMX5a25.js
similarity index 89%
rename from _nuxt/module-listing.hP89siY4.js
rename to _nuxt/module-listing.zWMX5a25.js
index 2127fc7966..a6159b1617 100644
--- a/_nuxt/module-listing.hP89siY4.js
+++ b/_nuxt/module-listing.zWMX5a25.js
@@ -1 +1 @@
-import le from"./DocsContentNavigation.UDfK-BX9.js";import se from"./DocsPageHeader.vbDi0R7z.js";import{d as G,r as i,J,o as oe,a as ue,Z as P,A as E,b as u,c as b,e as p,t as R,n as A,aH as v,aI as m,E as H,D as U,$ as re,aJ as ie,Q as pe,f as D,F as Q,W,g as h,a0 as ce,V as de,m as fe,a1 as me,G as q,w as $,N as B,a3 as be,q as ge}from"./entry.49ZHHvLB.js";import{o as ve}from"./RplImage.css.o2mWVvok.js";import{_ as z}from"./RplIcon.vue.NIDikUS0.js";import{u as he}from"./useRippleEvent.DMJaxZxB.js";import{_ as _e}from"./RplPromoCard.vue.btg01fDe.js";import ye from"./DocsCardGrid.CGE8nz0H.js";import{_ as we}from"./AppSidebarLayout.vue.aU-pbmdL.js";import{_ as $e}from"./AppLayout.vue.nby97MTz.js";import{u as Oe}from"./asyncData.6xpne1x0.js";import{u as Se}from"./head.UNWUUq-8.js";import"./useDocsNavigation.w75JuMbu.js";import"./RplLink.vue.TWUjSovo.js";import"./RplExpandable.vue.3-aUufTF.js";import"./DocsNavLink.5k-bni1U.js";import"./nuxt-link.jgZZZkZ5.js";import"./_plugin-vue_export-helper.x3n3nnut.js";import"./DocsLink.5OmhIBHZ.js";import"./RplTextLink.css.ll_eQGN0.js";import"./RplList.vue.4pRwhR7E.js";const Ie=["for"],Le={class:"rpl-search-bar__inner"},Ve=["onKeydown"],Be=["id","aria-owns","aria-expanded","placeholder"],Re=p("div",{class:"rpl-search-bar__menu"},[p("span",{class:"rpl-search-bar__menu-noresults"}," No results ")],-1),Ce=["id"],Te=["id","data-option-id","role","onKeydown","onClick"],ke={class:"rpl-search-bar__right"},Fe={type:"submit","aria-label":"search",class:"rpl-search-bar-submit rpl-u-focusable-inline"},Ae={key:0,class:"rpl-search-bar-submit__label rpl-type-label rpl-type-weight-bold"},De={class:"rpl-search-bar-submit__icon"},Ne={inheritAttrs:!1},Ee=G({...Ne,__name:"RplSearchBar",props:{variant:{default:"default"},id:{},autoFocus:{type:Boolean,default:!1},inputLabel:{default:"Search"},inputValue:{default:""},submitLabel:{type:[String,Boolean],default:"Search"},suggestions:{default:()=>[]},maxSuggestionsDisplayed:{default:10},placeholder:{default:""},globalEvents:{type:Boolean,default:!0},showNoResults:{type:Boolean,default:!1},getSuggestionVal:{type:Function,default:c=>c},getOptionLabel:{type:Function,default:c=>c},getOptionId:{type:Function,default:c=>c},isOptionSelectable:{type:Function,default:c=>!0},showLabel:{type:Boolean,default:!1},isFreeText:{type:Boolean,default:!0},submitOnClear:{type:Boolean,default:!1}},emits:["update:inputValue","submit"],setup(c,{emit:O}){const n=c,d=O,{emitRplEvent:C}=he("rpl-search-bar",d),o=i(""),T=i(null),f=i(null),_=i(null),k=i([]),S=i(null),y=J(()=>`${n.id}__menu`),l=i(!1),s=i(null),I=i(!1);oe(()=>{n.autoFocus&&(S.value=setTimeout(()=>{var e;return(e=f.value)==null?void 0:e.focus()},100))}),ue(()=>{S.value&&clearTimeout(S.value)}),ve(T,()=>{w(!1)});const F=e=>{C("submit",{action:"search",id:n.id,name:n.inputLabel,value:o.value,text:e==="button"?n.submitLabel:null,type:e},{global:n.globalEvents})},N=e=>{o.value=e.target.value,d("update:inputValue",e.target.value),l.value=!0},L=(e,t)=>{var r;const a=n.getOptionLabel(e);t&&((r=f.value)==null||r.focus()),o.value=n.getSuggestionVal(e),d("update:inputValue",e),l.value=!1,C("submit",{action:"search",id:n.id,text:n.getSuggestionVal(e),name:n.inputLabel,value:a,payload:e,type:"suggestion"},{global:n.globalEvents})},V=()=>n.getOptionId(n.suggestions[0]),g=(e=!1)=>{var t;l.value=!0,e&&((t=n.suggestions)!=null&&t.length)&&(s.value=V())},w=(e=!1)=>{var t;l.value=!1,s.value=null,e&&((t=f.value)==null||t.focus())},Z=async()=>{var e;I.value=!0,await E(),(e=f.value)==null||e.focus()},j=()=>{I.value=!1},X=async()=>{var e;d("update:inputValue",null),o.value="",n.submitOnClear&&C("submit",{action:"search",id:n.id,text:"",name:n.inputLabel,value:"",payload:null,type:"suggestion"},{global:n.globalEvents}),await E(),(e=f.value)==null||e.focus()},Y=()=>{const e=n.suggestions.findIndex(t=>n.getOptionId(t)===s.value);e<0?s.value=V():e<n.suggestions.length-1&&(s.value=n.getOptionId(n.suggestions[e+1]))},x=()=>{const e=n.suggestions.findIndex(t=>n.getOptionId(t)===s.value);e<0?s.value=V():e>0&&(s.value=n.getOptionId(n.suggestions[e-1]))},ee=e=>e>47&&e<58||e===32||e===8||e>64&&e<91||e>95&&e<112||e>185&&e<193||e>218&&e<223,te=e=>{var t;ee(e.keyCode)&&((t=f.value)==null||t.focus())},ae=e=>s.value===e,ne=e=>{const t=k.value.find(r=>r.dataset.optionId===e),a=_.value;if(a.scrollHeight>a.clientHeight){let r=a.clientHeight+a.scrollTop,M=t.offsetTop+t.offsetHeight;M>r?a.scrollTop=M-a.clientHeight:t.offsetTop<a.scrollTop&&(a.scrollTop=t.offsetTop)}t&&t.focus()};P(()=>n.inputValue,e=>{o.value=n.getSuggestionVal(e)},{immediate:!0}),P(s,async e=>{e!==null&&(await E(),ne(e))});const K=e=>e.toLowerCase().replace(/[^\w-]+/g,"-");return(e,t)=>(u(),b("form",{class:A({"rpl-search-bar":!0,[`rpl-search-bar--${e.variant}`]:!!e.variant,"rpl-search-bar--with-label":!!e.submitLabel,"rpl-search-bar--with-clear-btn":!!e.inputValue||!!o.value}),style:ce({"--local-max-items":e.maxSuggestionsDisplayed}),onSubmit:t[9]||(t[9]=m(a=>F("button"),["prevent"]))},[p("label",{class:A({"rpl-search-bar__label":!0,"rpl-u-visually-hidden":!e.showLabel,"rpl-type-h4-fixed":!0}),for:e.id},R(e.inputLabel),11,Ie),p("div",Le,[p("div",{ref_key:"containerRef",ref:T,class:"rpl-search-bar__input-wrap",onKeydown:[v(m(x,["prevent"]),["up"]),v(m(Y,["prevent"]),["down"]),t[5]||(t[5]=v(m(a=>w(!0),["prevent"]),["esc"])),t[6]||(t[6]=v(m(a=>w(!1),["exact"]),["tab"])),t[7]||(t[7]=v(m(a=>w(!1),["shift"]),["tab"]))]},[!e.isFreeText&&e.inputValue&&!I.value&&!l.value?(u(),b("div",{key:0,tabindex:"0",class:A({"rpl-search-bar__input":!0,"rpl-u-focusable-outline":!0,"rpl-u-focusable-outline--no-border":!0,"rpl-u-focusable--force-on":l.value}),onFocus:t[0]||(t[0]=a=>Z())},[H(e.$slots,"suggestion",{option:{option:e.inputValue}},()=>[U(R(e.getOptionLabel(e.inputValue)),1)])],34)):re((u(),b("input",pe({key:1},e.$attrs,{id:e.id,ref_key:"inputRef",ref:f,"onUpdate:modelValue":t[1]||(t[1]=a=>o.value=a),"aria-owns":y.value,autocomplete:"off","aria-autocomplete":"list","aria-expanded":l.value,placeholder:e.placeholder,role:"combobox",class:{"rpl-search-bar__input":!0,"rpl-u-focusable-outline":!0,"rpl-u-focusable-outline--no-border":!0,"rpl-u-focusable--force-on":l.value},type:"search",onInput:N,onFocus:t[2]||(t[2]=a=>g(!1)),onBlur:t[3]||(t[3]=a=>j()),onKeydown:t[4]||(t[4]=v(m(a=>F("enter"),["prevent"]),["enter"]))}),null,16,Be)),[[ie,o.value]]),e.showNoResults&&e.suggestions.length===0&&o.value&&l.value?H(e.$slots,"noresults",{key:2},()=>[Re]):D("",!0),e.suggestions.length&&l.value?(u(),b("div",{key:3,id:y.value,ref_key:"menuRef",ref:_,class:"rpl-search-bar__menu",role:"listbox",tabindex:"-1"},[(u(!0),b(Q,null,W(e.suggestions,a=>(u(),b("div",{id:K(e.getOptionId(a)),key:`opt-${K(e.getOptionId(a))}`,ref_for:!0,ref_key:"optionRefs",ref:k,"data-option-id":e.getOptionId(a),role:e.isOptionSelectable(a)?"option":null,class:A({"rpl-search-bar__menu-option":!0,"rpl-u-focusable-block":!0,"rpl-u-focusable--force-on":ae(e.getOptionId(a))}),tabindex:"-1",onKeydown:[v(m(r=>e.isOptionSelectable(a)&&L(a,!0),["prevent"]),["space"]),v(m(r=>e.isOptionSelectable(a)&&L(a,!0),["prevent"]),["enter"]),r=>e.isOptionSelectable(a)&&te],onClick:r=>e.isOptionSelectable(a)&&L(a,!1)},[H(e.$slots,"suggestion",{option:{option:a}},()=>[U(R(e.getOptionLabel(a)),1)])],42,Te))),128))],8,Ce)):D("",!0)],40,Ve),p("div",ke,[o.value||e.inputValue?(u(),b("button",{key:0,type:"button","aria-label":"Clear search",class:"rpl-search-bar__clear rpl-u-focusable-inline",onClick:t[8]||(t[8]=a=>X())},[h(z,{name:"icon-cancel-circle-filled"})])):D("",!0),p("button",Fe,[e.submitLabel?(u(),b("span",Ae,R(e.submitLabel),1)):D("",!0),p("span",De,[h(z,{name:"icon-search",size:"m"})])])])])],38))}}),He={class:"rpl-u-margin-b-8"},ot=G({__name:"module-listing",async setup(c){let O,n;const{page:d}=de();Se(d);const T=fe().params.slug[0]==="framework",{data:f}=([O,n]=me(async()=>Oe("module-listing",async()=>await ge().where({isModuleInfo:{$eq:!0}}).find())),O=await O,n(),O),_=i(""),k=J(()=>(f.value||[]).filter(S=>{const y=S.name.toLowerCase(),l=_.value.toLowerCase();return y.includes(l)}));return(S,y)=>{const l=le,s=se,I=Ee,F=_e,N=ye,L=we,V=$e;return u(),q(V,{theme:T?"module":"default"},{menuContents:$(()=>[h(l)]),default:$(()=>[h(L,{hideMobileSidebar:""},{aside:$(()=>[h(l)]),pageHeader:$(()=>[h(s,{title:B(d).title,description:B(d).description,links:B(d).links},null,8,["title","description","links"]),p("div",He,[h(I,{id:"listing-search",inputValue:B(_),"onUpdate:inputValue":y[0]||(y[0]=g=>be(_)?_.value=g:null)},null,8,["inputValue"])])]),default:$(()=>[h(N,null,{default:$(()=>[(u(!0),b(Q,null,W(B(k),g=>{var w;return u(),q(F,{key:g._path,title:g.name,url:`${(w=g._path)==null?void 0:w.replace(/\/_module$/,"")}`},{default:$(()=>[p("p",null,R(g.description),1)]),_:2},1032,["title","url"])}),128))]),_:1})]),_:1})]),_:1},8,["theme"])}}});export{ot as default};
+import le from"./DocsContentNavigation.sYXaW9Re.js";import se from"./DocsPageHeader.J1YDFRG1.js";import{d as G,r as i,J,o as oe,a as ue,Z as P,A as E,b as u,c as b,e as p,t as R,n as A,aH as v,aI as m,E as H,D as U,$ as re,aJ as ie,Q as pe,f as D,F as Q,W,g as h,a0 as ce,V as de,m as fe,a1 as me,G as q,w as $,N as B,a3 as be,q as ge}from"./entry.Do8xnxHS.js";import{o as ve}from"./RplImage.css.ouJWHfa9.js";import{_ as z}from"./RplIcon.vue.PZ-X7Qhh.js";import{u as he}from"./useRippleEvent.Eg1owuZM.js";import{_ as _e}from"./RplPromoCard.vue.pyq2iKcr.js";import ye from"./DocsCardGrid.PUHkyZXK.js";import{_ as we}from"./AppSidebarLayout.vue.6sfT1On1.js";import{_ as $e}from"./AppLayout.vue.hqX4UWMQ.js";import{u as Oe}from"./asyncData.mgwg8A3s.js";import{u as Se}from"./head.i1ysHgjT.js";import"./useDocsNavigation.a2cLzZKV.js";import"./RplLink.vue.3IdzOFUB.js";import"./RplExpandable.vue.ErcNtea4.js";import"./DocsNavLink.k4ZwJ1d1.js";import"./nuxt-link.sM27-MT7.js";import"./_plugin-vue_export-helper.x3n3nnut.js";import"./DocsLink._8mcEyeM.js";import"./RplTextLink.css.vnmpcBOe.js";import"./RplList.vue.i5RvVHLA.js";const Ie=["for"],Le={class:"rpl-search-bar__inner"},Ve=["onKeydown"],Be=["id","aria-owns","aria-expanded","placeholder"],Re=p("div",{class:"rpl-search-bar__menu"},[p("span",{class:"rpl-search-bar__menu-noresults"}," No results ")],-1),Ce=["id"],Te=["id","data-option-id","role","onKeydown","onClick"],ke={class:"rpl-search-bar__right"},Fe={type:"submit","aria-label":"search",class:"rpl-search-bar-submit rpl-u-focusable-inline"},Ae={key:0,class:"rpl-search-bar-submit__label rpl-type-label rpl-type-weight-bold"},De={class:"rpl-search-bar-submit__icon"},Ne={inheritAttrs:!1},Ee=G({...Ne,__name:"RplSearchBar",props:{variant:{default:"default"},id:{},autoFocus:{type:Boolean,default:!1},inputLabel:{default:"Search"},inputValue:{default:""},submitLabel:{type:[String,Boolean],default:"Search"},suggestions:{default:()=>[]},maxSuggestionsDisplayed:{default:10},placeholder:{default:""},globalEvents:{type:Boolean,default:!0},showNoResults:{type:Boolean,default:!1},getSuggestionVal:{type:Function,default:c=>c},getOptionLabel:{type:Function,default:c=>c},getOptionId:{type:Function,default:c=>c},isOptionSelectable:{type:Function,default:c=>!0},showLabel:{type:Boolean,default:!1},isFreeText:{type:Boolean,default:!0},submitOnClear:{type:Boolean,default:!1}},emits:["update:inputValue","submit"],setup(c,{emit:O}){const n=c,d=O,{emitRplEvent:C}=he("rpl-search-bar",d),o=i(""),T=i(null),f=i(null),_=i(null),k=i([]),S=i(null),y=J(()=>`${n.id}__menu`),l=i(!1),s=i(null),I=i(!1);oe(()=>{n.autoFocus&&(S.value=setTimeout(()=>{var e;return(e=f.value)==null?void 0:e.focus()},100))}),ue(()=>{S.value&&clearTimeout(S.value)}),ve(T,()=>{w(!1)});const F=e=>{C("submit",{action:"search",id:n.id,name:n.inputLabel,value:o.value,text:e==="button"?n.submitLabel:null,type:e},{global:n.globalEvents})},N=e=>{o.value=e.target.value,d("update:inputValue",e.target.value),l.value=!0},L=(e,t)=>{var r;const a=n.getOptionLabel(e);t&&((r=f.value)==null||r.focus()),o.value=n.getSuggestionVal(e),d("update:inputValue",e),l.value=!1,C("submit",{action:"search",id:n.id,text:n.getSuggestionVal(e),name:n.inputLabel,value:a,payload:e,type:"suggestion"},{global:n.globalEvents})},V=()=>n.getOptionId(n.suggestions[0]),g=(e=!1)=>{var t;l.value=!0,e&&((t=n.suggestions)!=null&&t.length)&&(s.value=V())},w=(e=!1)=>{var t;l.value=!1,s.value=null,e&&((t=f.value)==null||t.focus())},Z=async()=>{var e;I.value=!0,await E(),(e=f.value)==null||e.focus()},j=()=>{I.value=!1},X=async()=>{var e;d("update:inputValue",null),o.value="",n.submitOnClear&&C("submit",{action:"search",id:n.id,text:"",name:n.inputLabel,value:"",payload:null,type:"suggestion"},{global:n.globalEvents}),await E(),(e=f.value)==null||e.focus()},Y=()=>{const e=n.suggestions.findIndex(t=>n.getOptionId(t)===s.value);e<0?s.value=V():e<n.suggestions.length-1&&(s.value=n.getOptionId(n.suggestions[e+1]))},x=()=>{const e=n.suggestions.findIndex(t=>n.getOptionId(t)===s.value);e<0?s.value=V():e>0&&(s.value=n.getOptionId(n.suggestions[e-1]))},ee=e=>e>47&&e<58||e===32||e===8||e>64&&e<91||e>95&&e<112||e>185&&e<193||e>218&&e<223,te=e=>{var t;ee(e.keyCode)&&((t=f.value)==null||t.focus())},ae=e=>s.value===e,ne=e=>{const t=k.value.find(r=>r.dataset.optionId===e),a=_.value;if(a.scrollHeight>a.clientHeight){let r=a.clientHeight+a.scrollTop,M=t.offsetTop+t.offsetHeight;M>r?a.scrollTop=M-a.clientHeight:t.offsetTop<a.scrollTop&&(a.scrollTop=t.offsetTop)}t&&t.focus()};P(()=>n.inputValue,e=>{o.value=n.getSuggestionVal(e)},{immediate:!0}),P(s,async e=>{e!==null&&(await E(),ne(e))});const K=e=>e.toLowerCase().replace(/[^\w-]+/g,"-");return(e,t)=>(u(),b("form",{class:A({"rpl-search-bar":!0,[`rpl-search-bar--${e.variant}`]:!!e.variant,"rpl-search-bar--with-label":!!e.submitLabel,"rpl-search-bar--with-clear-btn":!!e.inputValue||!!o.value}),style:ce({"--local-max-items":e.maxSuggestionsDisplayed}),onSubmit:t[9]||(t[9]=m(a=>F("button"),["prevent"]))},[p("label",{class:A({"rpl-search-bar__label":!0,"rpl-u-visually-hidden":!e.showLabel,"rpl-type-h4-fixed":!0}),for:e.id},R(e.inputLabel),11,Ie),p("div",Le,[p("div",{ref_key:"containerRef",ref:T,class:"rpl-search-bar__input-wrap",onKeydown:[v(m(x,["prevent"]),["up"]),v(m(Y,["prevent"]),["down"]),t[5]||(t[5]=v(m(a=>w(!0),["prevent"]),["esc"])),t[6]||(t[6]=v(m(a=>w(!1),["exact"]),["tab"])),t[7]||(t[7]=v(m(a=>w(!1),["shift"]),["tab"]))]},[!e.isFreeText&&e.inputValue&&!I.value&&!l.value?(u(),b("div",{key:0,tabindex:"0",class:A({"rpl-search-bar__input":!0,"rpl-u-focusable-outline":!0,"rpl-u-focusable-outline--no-border":!0,"rpl-u-focusable--force-on":l.value}),onFocus:t[0]||(t[0]=a=>Z())},[H(e.$slots,"suggestion",{option:{option:e.inputValue}},()=>[U(R(e.getOptionLabel(e.inputValue)),1)])],34)):re((u(),b("input",pe({key:1},e.$attrs,{id:e.id,ref_key:"inputRef",ref:f,"onUpdate:modelValue":t[1]||(t[1]=a=>o.value=a),"aria-owns":y.value,autocomplete:"off","aria-autocomplete":"list","aria-expanded":l.value,placeholder:e.placeholder,role:"combobox",class:{"rpl-search-bar__input":!0,"rpl-u-focusable-outline":!0,"rpl-u-focusable-outline--no-border":!0,"rpl-u-focusable--force-on":l.value},type:"search",onInput:N,onFocus:t[2]||(t[2]=a=>g(!1)),onBlur:t[3]||(t[3]=a=>j()),onKeydown:t[4]||(t[4]=v(m(a=>F("enter"),["prevent"]),["enter"]))}),null,16,Be)),[[ie,o.value]]),e.showNoResults&&e.suggestions.length===0&&o.value&&l.value?H(e.$slots,"noresults",{key:2},()=>[Re]):D("",!0),e.suggestions.length&&l.value?(u(),b("div",{key:3,id:y.value,ref_key:"menuRef",ref:_,class:"rpl-search-bar__menu",role:"listbox",tabindex:"-1"},[(u(!0),b(Q,null,W(e.suggestions,a=>(u(),b("div",{id:K(e.getOptionId(a)),key:`opt-${K(e.getOptionId(a))}`,ref_for:!0,ref_key:"optionRefs",ref:k,"data-option-id":e.getOptionId(a),role:e.isOptionSelectable(a)?"option":null,class:A({"rpl-search-bar__menu-option":!0,"rpl-u-focusable-block":!0,"rpl-u-focusable--force-on":ae(e.getOptionId(a))}),tabindex:"-1",onKeydown:[v(m(r=>e.isOptionSelectable(a)&&L(a,!0),["prevent"]),["space"]),v(m(r=>e.isOptionSelectable(a)&&L(a,!0),["prevent"]),["enter"]),r=>e.isOptionSelectable(a)&&te],onClick:r=>e.isOptionSelectable(a)&&L(a,!1)},[H(e.$slots,"suggestion",{option:{option:a}},()=>[U(R(e.getOptionLabel(a)),1)])],42,Te))),128))],8,Ce)):D("",!0)],40,Ve),p("div",ke,[o.value||e.inputValue?(u(),b("button",{key:0,type:"button","aria-label":"Clear search",class:"rpl-search-bar__clear rpl-u-focusable-inline",onClick:t[8]||(t[8]=a=>X())},[h(z,{name:"icon-cancel-circle-filled"})])):D("",!0),p("button",Fe,[e.submitLabel?(u(),b("span",Ae,R(e.submitLabel),1)):D("",!0),p("span",De,[h(z,{name:"icon-search",size:"m"})])])])])],38))}}),He={class:"rpl-u-margin-b-8"},ot=G({__name:"module-listing",async setup(c){let O,n;const{page:d}=de();Se(d);const T=fe().params.slug[0]==="framework",{data:f}=([O,n]=me(async()=>Oe("module-listing",async()=>await ge().where({isModuleInfo:{$eq:!0}}).find())),O=await O,n(),O),_=i(""),k=J(()=>(f.value||[]).filter(S=>{const y=S.name.toLowerCase(),l=_.value.toLowerCase();return y.includes(l)}));return(S,y)=>{const l=le,s=se,I=Ee,F=_e,N=ye,L=we,V=$e;return u(),q(V,{theme:T?"module":"default"},{menuContents:$(()=>[h(l)]),default:$(()=>[h(L,{hideMobileSidebar:""},{aside:$(()=>[h(l)]),pageHeader:$(()=>[h(s,{title:B(d).title,description:B(d).description,links:B(d).links},null,8,["title","description","links"]),p("div",He,[h(I,{id:"listing-search",inputValue:B(_),"onUpdate:inputValue":y[0]||(y[0]=g=>be(_)?_.value=g:null)},null,8,["inputValue"])])]),default:$(()=>[h(N,null,{default:$(()=>[(u(!0),b(Q,null,W(B(k),g=>{var w;return u(),q(F,{key:g._path,title:g.name,url:`${(w=g._path)==null?void 0:w.replace(/\/_module$/,"")}`},{default:$(()=>[p("p",null,R(g.description),1)]),_:2},1032,["title","url"])}),128))]),_:1})]),_:1})]),_:1},8,["theme"])}}});export{ot as default};
diff --git a/_nuxt/module.HmGyaUlR.js b/_nuxt/module.HmGyaUlR.js
deleted file mode 100644
index db43bb0b37..0000000000
--- a/_nuxt/module.HmGyaUlR.js
+++ /dev/null
@@ -1 +0,0 @@
-import k from"./DocsModuleNavigation.1X1oFgOt.js";import y from"./DocsNavLink.5k-bni1U.js";import h from"./DocsModuleInfo.1q5O7tu6.js";import v from"./DocsPageHeader.vbDi0R7z.js";import $ from"./ContentRenderer.CgXd06ZK.js";import{_ as w}from"./AppSidebarLayout.vue.aU-pbmdL.js";import{_ as D}from"./AppLayout.vue.nby97MTz.js";import{d as N,V as b,m as A,a1 as S,G as i,w as e,b as c,g as n,D as V,N as t,e as I,f as M,q as B}from"./entry.49ZHHvLB.js";import{u as H}from"./asyncData.6xpne1x0.js";import{u as L}from"./head.UNWUUq-8.js";import{_ as q}from"./_plugin-vue_export-helper.x3n3nnut.js";import"./useDocsNavigation.w75JuMbu.js";import"./RplLink.vue.TWUjSovo.js";import"./useRippleEvent.DMJaxZxB.js";import"./RplIcon.vue.NIDikUS0.js";import"./nuxt-link.jgZZZkZ5.js";import"./DocsLink.5OmhIBHZ.js";import"./RplTextLink.css.ll_eQGN0.js";import"./ContentRendererMarkdown.vue.cUVXlmIq.js";import"./RplImage.css.o2mWVvok.js";import"./RplList.vue.4pRwhR7E.js";import"./RplExpandable.vue.3-aUufTF.js";const P={class:"docs-sidebar-nav"},R=N({__name:"module",async setup(G){let a,m;const{page:o}=b();L(o);const s=A(),_=s.params.slug[0]==="framework",{data:u}=([a,m]=S(async()=>H(`module-info-${s.params.slug[2]}`,async()=>await B(`${s.params.slug[0]}/${s.params.slug[1]}/${s.params.slug[2]}/_module`).findOne()||null)),a=await a,m(),a);return(l,T)=>{const r=k,p=y,d=h,f=v,g=$,x=w,C=D;return c(),i(C,{theme:_?"module":"default"},{menuContents:e(()=>[n(r)]),default:e(()=>[n(x,{hideMobileSidebar:!1},{aside:e(()=>[n(p,{url:"/framework/modules/all-modules",icon:"icon-chevron-left",iconPosition:"start"},{default:e(()=>[V("All modules")]),_:1}),n(d,{module:t(u)},null,8,["module"]),I("div",P,[n(r)])]),pageHeader:e(()=>[n(f,{title:t(o).title,description:t(o).description,links:t(o).links},null,8,["title","description","links"])]),default:e(()=>[t(o)?(c(),i(g,{tag:t(o).tag||"DocsContent",key:t(o)._id,value:t(o)},null,8,["tag","value"])):M("",!0)]),_:1})]),_:1},8,["theme"])}}}),_o=q(R,[["__scopeId","data-v-2a19721d"]]);export{_o as default};
diff --git a/_nuxt/module.ZEpf0cR7.js b/_nuxt/module.ZEpf0cR7.js
new file mode 100644
index 0000000000..2a27c087ea
--- /dev/null
+++ b/_nuxt/module.ZEpf0cR7.js
@@ -0,0 +1 @@
+import k from"./DocsModuleNavigation.N74iA2Tc.js";import y from"./DocsNavLink.k4ZwJ1d1.js";import h from"./DocsModuleInfo.dxnzvO_K.js";import v from"./DocsPageHeader.J1YDFRG1.js";import $ from"./ContentRenderer.CHEOl3j3.js";import{_ as w}from"./AppSidebarLayout.vue.6sfT1On1.js";import{_ as D}from"./AppLayout.vue.hqX4UWMQ.js";import{d as N,V as b,m as A,a1 as S,G as i,w as e,b as c,g as n,D as V,N as t,e as I,f as M,q as B}from"./entry.Do8xnxHS.js";import{u as H}from"./asyncData.mgwg8A3s.js";import{u as L}from"./head.i1ysHgjT.js";import{_ as q}from"./_plugin-vue_export-helper.x3n3nnut.js";import"./useDocsNavigation.a2cLzZKV.js";import"./RplLink.vue.3IdzOFUB.js";import"./useRippleEvent.Eg1owuZM.js";import"./RplIcon.vue.PZ-X7Qhh.js";import"./nuxt-link.sM27-MT7.js";import"./DocsLink._8mcEyeM.js";import"./RplTextLink.css.vnmpcBOe.js";import"./ContentRendererMarkdown.vue.sDq3Jws6.js";import"./RplImage.css.ouJWHfa9.js";import"./RplList.vue.i5RvVHLA.js";import"./RplExpandable.vue.ErcNtea4.js";const P={class:"docs-sidebar-nav"},R=N({__name:"module",async setup(G){let a,m;const{page:o}=b();L(o);const s=A(),_=s.params.slug[0]==="framework",{data:u}=([a,m]=S(async()=>H(`module-info-${s.params.slug[2]}`,async()=>await B(`${s.params.slug[0]}/${s.params.slug[1]}/${s.params.slug[2]}/_module`).findOne()||null)),a=await a,m(),a);return(l,T)=>{const r=k,p=y,d=h,f=v,g=$,x=w,C=D;return c(),i(C,{theme:_?"module":"default"},{menuContents:e(()=>[n(r)]),default:e(()=>[n(x,{hideMobileSidebar:!1},{aside:e(()=>[n(p,{url:"/framework/modules/all-modules",icon:"icon-chevron-left",iconPosition:"start"},{default:e(()=>[V("All modules")]),_:1}),n(d,{module:t(u)},null,8,["module"]),I("div",P,[n(r)])]),pageHeader:e(()=>[n(f,{title:t(o).title,description:t(o).description,links:t(o).links},null,8,["title","description","links"])]),default:e(()=>[t(o)?(c(),i(g,{tag:t(o).tag||"DocsContent",key:t(o)._id,value:t(o)},null,8,["tag","value"])):M("",!0)]),_:1})]),_:1},8,["theme"])}}}),_o=q(R,[["__scopeId","data-v-2a19721d"]]);export{_o as default};
diff --git a/_nuxt/nuxt-link.jgZZZkZ5.js b/_nuxt/nuxt-link.sM27-MT7.js
similarity index 96%
rename from _nuxt/nuxt-link.jgZZZkZ5.js
rename to _nuxt/nuxt-link.sM27-MT7.js
index 4dd4f47994..388bc6ae21 100644
--- a/_nuxt/nuxt-link.jgZZZkZ5.js
+++ b/_nuxt/nuxt-link.sM27-MT7.js
@@ -1 +1 @@
-import{d as A,u as P,J as y,ad as k,r as C,o as B,a9 as L,ae as N,af as j,ag as T,ah as w,O as S,ai as U,aj as I,ak as O,al as V,am as D,k as E,j as R,an as F,ao as H,ap as z}from"./entry.49ZHHvLB.js";const M=(...t)=>t.find(l=>l!==void 0);function $(t){const l=t.componentName||"NuxtLink";function s(e,o){if(!e||t.trailingSlash!=="append"&&t.trailingSlash!=="remove")return e;if(typeof e=="string")return q(e,t.trailingSlash);const n="path"in e?e.path:o(e).path;return{...e,name:void 0,path:q(n,t.trailingSlash)}}return A({name:l,props:{to:{type:[String,Object],default:void 0,required:!1},href:{type:[String,Object],default:void 0,required:!1},target:{type:String,default:void 0,required:!1},rel:{type:String,default:void 0,required:!1},noRel:{type:Boolean,default:void 0,required:!1},prefetch:{type:Boolean,default:void 0,required:!1},noPrefetch:{type:Boolean,default:void 0,required:!1},activeClass:{type:String,default:void 0,required:!1},exactActiveClass:{type:String,default:void 0,required:!1},prefetchedClass:{type:String,default:void 0,required:!1},replace:{type:Boolean,default:void 0,required:!1},ariaCurrentValue:{type:String,default:void 0,required:!1},external:{type:Boolean,default:void 0,required:!1},custom:{type:Boolean,default:void 0,required:!1}},setup(e,{slots:o}){const n=P(),b=E(),a=y(()=>{const r=e.to||e.href||"";return s(r,n.resolve)}),c=y(()=>typeof a.value=="string"&&k(a.value,{acceptRelative:!0})),h=y(()=>e.target&&e.target!=="_self"),m=y(()=>e.external||h.value?!0:typeof a.value=="object"?!1:a.value===""||c.value),x=C(!1),v=C(null),_=r=>{var f;v.value=e.custom?(f=r==null?void 0:r.$el)==null?void 0:f.nextElementSibling:r==null?void 0:r.$el};if(e.prefetch!==!1&&e.noPrefetch!==!0&&e.target!=="_blank"&&!Q()){const f=R();let d,u=null;B(()=>{const p=J();L(()=>{d=N(()=>{var g;(g=v==null?void 0:v.value)!=null&&g.tagName&&(u=p.observe(v.value,async()=>{u==null||u(),u=null;const i=typeof a.value=="string"?a.value:n.resolve(a.value).fullPath;await Promise.all([f.hooks.callHook("link:prefetch",i).catch(()=>{}),!m.value&&j(a.value,n).catch(()=>{})]),x.value=!0}))})})}),T(()=>{d&&w(d),u==null||u(),u=null})}return()=>{var p,g;if(!m.value){const i={ref:_,to:a.value,activeClass:e.activeClass||t.activeClass,exactActiveClass:e.exactActiveClass||t.exactActiveClass,replace:e.replace,ariaCurrentValue:e.ariaCurrentValue,custom:e.custom};return e.custom||(x.value&&(i.class=e.prefetchedClass||t.prefetchedClass),i.rel=e.rel||void 0),S(U("RouterLink"),i,o.default)}const r=typeof a.value=="object"?((p=n.resolve(a.value))==null?void 0:p.href)??null:a.value&&!e.external&&!c.value?s(I(b.app.baseURL,a.value),n.resolve):a.value||null,f=e.target||null,d=M(e.noRel?"":e.rel,t.externalRelAttribute,c.value||h.value?"noopener noreferrer":"")||null,u=()=>F(r,{replace:e.replace});return e.custom?o.default?o.default({href:r,navigate:u,get route(){if(!r)return;const i=O(r);return{path:i.pathname,fullPath:i.pathname,get query(){return V(i.search)},hash:i.hash,params:{},name:void 0,matched:[],redirectedFrom:void 0,meta:{},href:r}},rel:d,target:f,isExternal:m.value,isActive:!1,isExactActive:!1}):null:S("a",{ref:v,href:r,rel:d,target:f},(g=o.default)==null?void 0:g.call(o))}}})}const G=$(D);function q(t,l){const s=l==="append"?H:z;return k(t)&&!t.startsWith("http")?t:s(t,!0)}function J(){const t=R();if(t._observer)return t._observer;let l=null;const s=new Map,e=(n,b)=>(l||(l=new IntersectionObserver(a=>{for(const c of a){const h=s.get(c.target);(c.isIntersecting||c.intersectionRatio>0)&&h&&h()}})),s.set(n,b),l.observe(n),()=>{s.delete(n),l.unobserve(n),s.size===0&&(l.disconnect(),l=null)});return t._observer={observe:e}}function Q(){const t=navigator.connection;return!!(t&&(t.saveData||/2g/.test(t.effectiveType)))}export{G as _};
+import{d as A,u as P,J as y,ad as k,r as C,o as B,a9 as L,ae as N,af as j,ag as T,ah as w,O as S,ai as U,aj as I,ak as O,al as V,am as D,k as E,j as R,an as F,ao as H,ap as z}from"./entry.Do8xnxHS.js";const M=(...t)=>t.find(l=>l!==void 0);function $(t){const l=t.componentName||"NuxtLink";function s(e,o){if(!e||t.trailingSlash!=="append"&&t.trailingSlash!=="remove")return e;if(typeof e=="string")return q(e,t.trailingSlash);const n="path"in e?e.path:o(e).path;return{...e,name:void 0,path:q(n,t.trailingSlash)}}return A({name:l,props:{to:{type:[String,Object],default:void 0,required:!1},href:{type:[String,Object],default:void 0,required:!1},target:{type:String,default:void 0,required:!1},rel:{type:String,default:void 0,required:!1},noRel:{type:Boolean,default:void 0,required:!1},prefetch:{type:Boolean,default:void 0,required:!1},noPrefetch:{type:Boolean,default:void 0,required:!1},activeClass:{type:String,default:void 0,required:!1},exactActiveClass:{type:String,default:void 0,required:!1},prefetchedClass:{type:String,default:void 0,required:!1},replace:{type:Boolean,default:void 0,required:!1},ariaCurrentValue:{type:String,default:void 0,required:!1},external:{type:Boolean,default:void 0,required:!1},custom:{type:Boolean,default:void 0,required:!1}},setup(e,{slots:o}){const n=P(),b=E(),a=y(()=>{const r=e.to||e.href||"";return s(r,n.resolve)}),c=y(()=>typeof a.value=="string"&&k(a.value,{acceptRelative:!0})),h=y(()=>e.target&&e.target!=="_self"),m=y(()=>e.external||h.value?!0:typeof a.value=="object"?!1:a.value===""||c.value),x=C(!1),v=C(null),_=r=>{var f;v.value=e.custom?(f=r==null?void 0:r.$el)==null?void 0:f.nextElementSibling:r==null?void 0:r.$el};if(e.prefetch!==!1&&e.noPrefetch!==!0&&e.target!=="_blank"&&!Q()){const f=R();let d,u=null;B(()=>{const p=J();L(()=>{d=N(()=>{var g;(g=v==null?void 0:v.value)!=null&&g.tagName&&(u=p.observe(v.value,async()=>{u==null||u(),u=null;const i=typeof a.value=="string"?a.value:n.resolve(a.value).fullPath;await Promise.all([f.hooks.callHook("link:prefetch",i).catch(()=>{}),!m.value&&j(a.value,n).catch(()=>{})]),x.value=!0}))})})}),T(()=>{d&&w(d),u==null||u(),u=null})}return()=>{var p,g;if(!m.value){const i={ref:_,to:a.value,activeClass:e.activeClass||t.activeClass,exactActiveClass:e.exactActiveClass||t.exactActiveClass,replace:e.replace,ariaCurrentValue:e.ariaCurrentValue,custom:e.custom};return e.custom||(x.value&&(i.class=e.prefetchedClass||t.prefetchedClass),i.rel=e.rel||void 0),S(U("RouterLink"),i,o.default)}const r=typeof a.value=="object"?((p=n.resolve(a.value))==null?void 0:p.href)??null:a.value&&!e.external&&!c.value?s(I(b.app.baseURL,a.value),n.resolve):a.value||null,f=e.target||null,d=M(e.noRel?"":e.rel,t.externalRelAttribute,c.value||h.value?"noopener noreferrer":"")||null,u=()=>F(r,{replace:e.replace});return e.custom?o.default?o.default({href:r,navigate:u,get route(){if(!r)return;const i=O(r);return{path:i.pathname,fullPath:i.pathname,get query(){return V(i.search)},hash:i.hash,params:{},name:void 0,matched:[],redirectedFrom:void 0,meta:{},href:r}},rel:d,target:f,isExternal:m.value,isActive:!1,isExactActive:!1}):null:S("a",{ref:v,href:r,rel:d,target:f},(g=o.default)==null?void 0:g.call(o))}}})}const G=$(D);function q(t,l){const s=l==="append"?H:z;return k(t)&&!t.startsWith("http")?t:s(t,!0)}function J(){const t=R();if(t._observer)return t._observer;let l=null;const s=new Map,e=(n,b)=>(l||(l=new IntersectionObserver(a=>{for(const c of a){const h=s.get(c.target);(c.isIntersecting||c.intersectionRatio>0)&&h&&h()}})),s.set(n,b),l.observe(n),()=>{s.delete(n),l.unobserve(n),s.size===0&&(l.disconnect(),l=null)});return t._observer={observe:e}}function Q(){const t=navigator.connection;return!!(t&&(t.saveData||/2g/.test(t.effectiveType)))}export{G as _};
diff --git a/_nuxt/page.ciD6J5zn.js b/_nuxt/page.dJj1_Sl3.js
similarity index 62%
rename from _nuxt/page.ciD6J5zn.js
rename to _nuxt/page.dJj1_Sl3.js
index 38ea008772..8148a8d4ac 100644
--- a/_nuxt/page.ciD6J5zn.js
+++ b/_nuxt/page.dJj1_Sl3.js
@@ -1 +1 @@
-import f from"./DocsContentNavigation.UDfK-BX9.js";import g from"./DocsPageHeader.vbDi0R7z.js";import h from"./ContentRenderer.CgXd06ZK.js";import{_ as v}from"./RplTextLink.css.ll_eQGN0.js";import{_ as w}from"./AppSidebarLayout.vue.aU-pbmdL.js";import{_ as x}from"./AppLayout.vue.nby97MTz.js";import{d as C,V as k,m as b,G as i,w as o,b as s,g as n,N as e,f as H,D as p,e as a}from"./entry.49ZHHvLB.js";import{u as V}from"./head.UNWUUq-8.js";import"./useDocsNavigation.w75JuMbu.js";import"./RplLink.vue.TWUjSovo.js";import"./useRippleEvent.DMJaxZxB.js";import"./asyncData.6xpne1x0.js";import"./RplIcon.vue.NIDikUS0.js";import"./RplExpandable.vue.3-aUufTF.js";import"./DocsNavLink.5k-bni1U.js";import"./nuxt-link.jgZZZkZ5.js";import"./_plugin-vue_export-helper.x3n3nnut.js";import"./DocsLink.5OmhIBHZ.js";import"./ContentRendererMarkdown.vue.cUVXlmIq.js";import"./RplImage.css.o2mWVvok.js";import"./RplList.vue.4pRwhR7E.js";const y=a("br",null,null,-1),N=a("svg",{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"presentation",class:"rpl-u-margin-r-1",width:"1em",height:"1em",viewBox:"0 0 24 24"},[a("path",{fill:"currentColor",d:"M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"})],-1),tt=C({__name:"page",setup(L){const{page:t}=k();V(t);const m=b().params.slug[0]==="framework";return(B,D)=>{const r=f,l=g,c=h,_=v,u=w,d=x;return s(),i(d,{theme:m?"module":"default"},{menuContents:o(()=>[n(r)]),default:o(()=>[n(u,{hideMobileSidebar:""},{aside:o(()=>[n(r)]),pageHeader:o(()=>[n(l,{title:e(t).title,description:e(t).description,links:e(t).links},null,8,["title","description","links"])]),default:o(()=>[e(t)?(s(),i(c,{tag:e(t).tag||"DocsContent",key:e(t)._id,value:e(t)},null,8,["tag","value"])):H("",!0),y,n(_,{class:"rpl-u-margin-t-12 rpl-type-p",style:{display:"inline-flex","align-items":"center"},url:`https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/${e(t)._file}`},{default:o(()=>[N,p(" Propose a change to this page on GitHub")]),_:1},8,["url"]),p(". ")]),_:1})]),_:1},8,["theme"])}}});export{tt as default};
+import f from"./DocsContentNavigation.sYXaW9Re.js";import g from"./DocsPageHeader.J1YDFRG1.js";import h from"./ContentRenderer.CHEOl3j3.js";import{_ as v}from"./RplTextLink.css.vnmpcBOe.js";import{_ as w}from"./AppSidebarLayout.vue.6sfT1On1.js";import{_ as x}from"./AppLayout.vue.hqX4UWMQ.js";import{d as C,V as k,m as b,G as i,w as o,b as s,g as n,N as e,f as H,D as p,e as a}from"./entry.Do8xnxHS.js";import{u as V}from"./head.i1ysHgjT.js";import"./useDocsNavigation.a2cLzZKV.js";import"./RplLink.vue.3IdzOFUB.js";import"./useRippleEvent.Eg1owuZM.js";import"./asyncData.mgwg8A3s.js";import"./RplIcon.vue.PZ-X7Qhh.js";import"./RplExpandable.vue.ErcNtea4.js";import"./DocsNavLink.k4ZwJ1d1.js";import"./nuxt-link.sM27-MT7.js";import"./_plugin-vue_export-helper.x3n3nnut.js";import"./DocsLink._8mcEyeM.js";import"./ContentRendererMarkdown.vue.sDq3Jws6.js";import"./RplImage.css.ouJWHfa9.js";import"./RplList.vue.i5RvVHLA.js";const y=a("br",null,null,-1),N=a("svg",{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"presentation",class:"rpl-u-margin-r-1",width:"1em",height:"1em",viewBox:"0 0 24 24"},[a("path",{fill:"currentColor",d:"M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"})],-1),tt=C({__name:"page",setup(L){const{page:t}=k();V(t);const m=b().params.slug[0]==="framework";return(B,D)=>{const r=f,l=g,c=h,_=v,u=w,d=x;return s(),i(d,{theme:m?"module":"default"},{menuContents:o(()=>[n(r)]),default:o(()=>[n(u,{hideMobileSidebar:""},{aside:o(()=>[n(r)]),pageHeader:o(()=>[n(l,{title:e(t).title,description:e(t).description,links:e(t).links},null,8,["title","description","links"])]),default:o(()=>[e(t)?(s(),i(c,{tag:e(t).tag||"DocsContent",key:e(t)._id,value:e(t)},null,8,["tag","value"])):H("",!0),y,n(_,{class:"rpl-u-margin-t-12 rpl-type-p",style:{display:"inline-flex","align-items":"center"},url:`https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/${e(t)._file}`},{default:o(()=>[N,p(" Propose a change to this page on GitHub")]),_:1},8,["url"]),p(". ")]),_:1})]),_:1},8,["theme"])}}});export{tt as default};
diff --git a/_nuxt/rpl-lib.es.r8Pb5jxA.js b/_nuxt/rpl-lib.es.b8udu3ko.js
similarity index 99%
rename from _nuxt/rpl-lib.es.r8Pb5jxA.js
rename to _nuxt/rpl-lib.es.b8udu3ko.js
index 24a704df8c..1c219d130f 100644
--- a/_nuxt/rpl-lib.es.r8Pb5jxA.js
+++ b/_nuxt/rpl-lib.es.b8udu3ko.js
@@ -1 +1 @@
-import{H as _,b as n,c as t,e,a4 as h1}from"./entry.49ZHHvLB.js";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const a1=["icon-cancel","icon-check-circle-filled","icon-chevron-down","icon-chevron-left","icon-chevron-right","icon-chevron-up","icon-current-location","icon-document-lined","icon-document","icon-download","icon-enlarge-square-filled","icon-enlarge","icon-exclamation-circle-filled","icon-facebook","icon-home","icon-information-circle-filled","icon-link-external-square-filled","icon-linkedin","icon-mail","icon-phone","icon-pin","icon-twitter","icon-view","icon-whatsapp","icon-x"],u1={"icon-accessible":()=>Promise.resolve().then(()=>b1),"icon-add":()=>Promise.resolve().then(()=>O1),"icon-arrow-down":()=>Promise.resolve().then(()=>H1),"icon-arrow-left":()=>Promise.resolve().then(()=>Z1),"icon-arrow-right":()=>Promise.resolve().then(()=>q1),"icon-arrow-up":()=>Promise.resolve().then(()=>Q1),"icon-attach":()=>Promise.resolve().then(()=>Y1),"icon-browser":()=>Promise.resolve().then(()=>ne),"icon-calendar-lined":()=>Promise.resolve().then(()=>de),"icon-cancel-circle-filled":()=>Promise.resolve().then(()=>ve),"icon-car":()=>Promise.resolve().then(()=>$e),"icon-check":()=>Promise.resolve().then(()=>Se),"icon-child-lined":()=>Promise.resolve().then(()=>je),"icon-dollar-circle-filled":()=>Promise.resolve().then(()=>Be),"icon-fire":()=>Promise.resolve().then(()=>Ie),"icon-flood":()=>Promise.resolve().then(()=>De),"icon-free":()=>Promise.resolve().then(()=>Ke),"icon-instagram":()=>Promise.resolve().then(()=>o2),"icon-lightning":()=>Promise.resolve().then(()=>i2),"icon-link":()=>Promise.resolve().then(()=>a2),"icon-list":()=>Promise.resolve().then(()=>m2),"icon-loading":()=>Promise.resolve().then(()=>b2),"icon-log-in-lined":()=>Promise.resolve().then(()=>P2),"icon-mail-lined":()=>Promise.resolve().then(()=>B2),"icon-medical":()=>Promise.resolve().then(()=>I2),"icon-menu":()=>Promise.resolve().then(()=>D2),"icon-microphone":()=>Promise.resolve().then(()=>J2),"icon-pause-circle-lined":()=>Promise.resolve().then(()=>co),"icon-person":()=>Promise.resolve().then(()=>so),"icon-play-circle-lined":()=>Promise.resolve().then(()=>go),"icon-print-lined":()=>Promise.resolve().then(()=>zo),"icon-question-circle-lined":()=>Promise.resolve().then(()=>Oo),"icon-search":()=>Promise.resolve().then(()=>Ho),"icon-senior":()=>Promise.resolve().then(()=>Zo),"icon-share":()=>Promise.resolve().then(()=>qo),"icon-smoke":()=>Promise.resolve().then(()=>Uo),"icon-spotify":()=>Promise.resolve().then(()=>Xo),"icon-star":()=>Promise.resolve().then(()=>tc),"icon-stop-circle-lined":()=>Promise.resolve().then(()=>_c),"icon-table-lined":()=>Promise.resolve().then(()=>gc),"icon-temperature":()=>Promise.resolve().then(()=>zc),"icon-traffic":()=>Promise.resolve().then(()=>yc),"icon-trash-lined":()=>Promise.resolve().then(()=>Lc),"icon-upload":()=>Promise.resolve().then(()=>kc),"icon-user-circle-filled":()=>Promise.resolve().then(()=>Rc),"icon-video":()=>Promise.resolve().then(()=>Gc),"icon-wechat":()=>Promise.resolve().then(()=>Yc),"icon-youtube":()=>Promise.resolve().then(()=>nn),"icon-zoom-in":()=>Promise.resolve().then(()=>_n),"icon-zoom-out":()=>Promise.resolve().then(()=>wn),"icon-map-zoom-in":()=>Promise.resolve().then(()=>zn),"icon-map-zoom-out":()=>Promise.resolve().then(()=>yn),"icon-enlarge":()=>Promise.resolve().then(()=>Ln),"icon-home":()=>Promise.resolve().then(()=>kn)},v1=a1,g1=Object.keys(u1);[...v1,...g1];const Fn={alert:["icon-fire","icon-flood","icon-lightning","icon-medical","icon-smoke","icon-temperature","icon-traffic"],social:["icon-facebook","icon-instagram","icon-linkedin","icon-spotify","icon-wechat","icon-whatsapp","icon-youtube","icon-x"],standard:["icon-accessible","icon-add","icon-arrow-up","icon-arrow-right","icon-arrow-down","icon-arrow-left","icon-attach","icon-browser","icon-calendar-lined","icon-cancel","icon-cancel-circle-filled","icon-car","icon-check","icon-check-circle-filled","icon-chevron-up","icon-chevron-right","icon-chevron-down","icon-chevron-left","icon-child-lined","icon-current-location","icon-document","icon-document-lined","icon-dollar-circle-filled","icon-download","icon-enlarge","icon-enlarge-square-filled","icon-exclamation-circle-filled","icon-free","icon-home","icon-information-circle-filled","icon-link","icon-link-external-square-filled","icon-list","icon-loading","icon-log-in-lined","icon-mail","icon-mail-lined","icon-menu","icon-microphone","icon-pause-circle-lined","icon-person","icon-phone","icon-pin","icon-play-circle-lined","icon-print-lined","icon-question-circle-lined","icon-search","icon-senior","icon-share","icon-star","icon-stop-circle-lined","icon-table-lined","icon-trash-lined","icon-upload","icon-user-circle-filled","icon-video","icon-view","icon-zoom-in","icon-zoom-out"],map:["icon-enlarge","icon-map-zoom-in","icon-map-zoom-out","icon-home"]};function Rn(c,o){const s=_("$rplEvent"),d=_("eventContext",{});return{emitRplEvent:(l,r={},i={})=>{d&&(r={...d,...r}),o&&o(l,r),i!=null&&i.global&&(s==null||s.emit(`${c}/${l}`,r))},withOptions:(l,r)=>Object.keys(l).filter(i=>r.includes(i)&&l[i])}}const w1={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},m1=e("circle",{cx:"9",cy:"3",r:"3"},null,-1),p1=e("path",{d:"m23.9 19.4-.7-1.3c-.2-.4-.6-.5-1-.3l-1.7.9-2.7-5.7c-.2-.5-.8-.9-1.4-.9h-6.2l-.2-1.5h5.7c.4 0 .8-.3.8-.7V8.3c0-.4-.3-.8-.8-.8H6.6l.9 6.2c.1.8.8 1.3 1.5 1.3h6.5l2.9 6.3c.4.8 1.3 1.1 2 .7l3.1-1.5c.5-.3.6-.7.4-1.1z"},null,-1),$1=e("path",{d:"M13.4 16.5C13.1 19 10.9 21 8.2 21 5.4 21 3 18.6 3 15.8c0-1.9 1.1-3.6 2.6-4.6-.1-1.2-.3-2.2-.4-3.1-3 1.2-5.2 4.2-5.2 7.7C0 20.3 3.7 24 8.2 24c3.4 0 6.3-2 7.6-4.9l-1.2-2.6h-1.2z"},null,-1),f1=[m1,p1,$1];function h(c,o){return n(),t("svg",w1,f1)}const z1={render:h},b1=Object.freeze(Object.defineProperty({__proto__:null,default:z1,render:h},Symbol.toStringTag,{value:"Module"})),x1={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},S1=e("path",{d:"M22 10h-8V2c0-1.1-.9-2-2-2s-2 .9-2 2v8H2c-1.1 0-2 .9-2 2s.9 2 2 2h8v8c0 1.1.9 2 2 2s2-.9 2-2v-8h8c1.1 0 2-.9 2-2s-.9-2-2-2z"},null,-1),M1=[S1];function a(c,o){return n(),t("svg",x1,M1)}const y1={render:a},O1=Object.freeze(Object.defineProperty({__proto__:null,default:y1,render:a},Symbol.toStringTag,{value:"Module"})),P1={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},j1=e("path",{d:"m23.6 11.4-1.2-1.2c-.5-.5-1.4-.5-1.9 0l-6.3 6.5V1.3c0-.7-.6-1.3-1.3-1.3h-1.8c-.7 0-1.3.6-1.3 1.3v15.4l-6.3-6.5c-.5-.5-1.4-.5-1.9 0L.4 11.4c-.5.5-.5 1.3 0 1.8l10.7 10.4c.5.5 1.3.5 1.9 0l10.7-10.4c.4-.5.4-1.3-.1-1.8z"},null,-1),C1=[j1];function u(c,o){return n(),t("svg",P1,C1)}const L1={render:u},H1=Object.freeze(Object.defineProperty({__proto__:null,default:L1,render:u},Symbol.toStringTag,{value:"Module"})),T1={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},B1=e("path",{d:"M22.7 9.8H7.3l6.5-6.3c.5-.5.5-1.4 0-1.9L12.6.4c-.5-.5-1.3-.5-1.8 0L.4 11.1c-.5.5-.5 1.3 0 1.9l10.4 10.7c.5.5 1.3.5 1.8 0l1.2-1.2c.5-.5.5-1.4 0-1.9l-6.5-6.3h15.4c.7 0 1.3-.6 1.3-1.3v-1.8c0-.8-.6-1.4-1.3-1.4z"},null,-1),V1=[B1];function v(c,o){return n(),t("svg",T1,V1)}const k1={render:v},Z1=Object.freeze(Object.defineProperty({__proto__:null,default:k1,render:v},Symbol.toStringTag,{value:"Module"})),A1={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},I1=e("path",{d:"M23.6 11.1 13.2.4c-.5-.5-1.3-.5-1.8 0l-1.2 1.2c-.5.5-.5 1.4 0 1.9l6.5 6.3H1.3c-.7 0-1.3.6-1.3 1.3v1.8c0 .7.6 1.3 1.3 1.3h15.4l-6.5 6.3c-.5.5-.5 1.4 0 1.9l1.2 1.2c.5.5 1.3.5 1.8 0l10.4-10.7c.5-.5.5-1.3 0-1.8z"},null,-1),F1=[I1];function g(c,o){return n(),t("svg",A1,F1)}const R1={render:g},q1=Object.freeze(Object.defineProperty({__proto__:null,default:R1,render:g},Symbol.toStringTag,{value:"Module"})),E1={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},D1=e("path",{d:"M23.6 10.8 12.9.4c-.5-.5-1.3-.5-1.9 0L.4 10.8c-.5.5-.5 1.3 0 1.8l1.2 1.2c.5.5 1.4.5 1.9 0l6.3-6.5v15.4c0 .7.6 1.3 1.3 1.3h1.8c.7 0 1.3-.6 1.3-1.3V7.3l6.3 6.4c.5.5 1.4.5 1.9 0l1.2-1.2c.5-.4.5-1.2 0-1.7z"},null,-1),N1=[D1];function w(c,o){return n(),t("svg",E1,N1)}const G1={render:w},Q1=Object.freeze(Object.defineProperty({__proto__:null,default:G1,render:w},Symbol.toStringTag,{value:"Module"})),U1={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},K1=e("path",{d:"M18.6 4.6C18.5 2 16.3 0 13.7 0c-2.7 0-4.9 2-5 4.6v12.7c.1 1.7 1.5 3.1 3.3 3.1s3.2-1.4 3.3-3.1v-10c0-.7-.5-1.2-1.1-1.2-.6 0-1.1.5-1.1 1.2v9.9c0 .4-.5.8-1.1.8s-1.1-.4-1.1-.8V4.8c0-1.3 1.2-2.4 2.8-2.4 1.5 0 2.8 1.1 2.8 2.4v12c0 2.6-2 4.8-4.4 4.8s-4.4-2.2-4.4-4.8V12c0-.7-.5-1.2-1.1-1.2-.6 0-1.1.5-1.1 1.2v4.8c0 4 3 7.2 6.6 7.2s6.6-3.2 6.6-7.2l-.1-12.2z"},null,-1),J1=[K1];function m(c,o){return n(),t("svg",U1,J1)}const W1={render:m},Y1=Object.freeze(Object.defineProperty({__proto__:null,default:W1,render:m},Symbol.toStringTag,{value:"Module"})),X1={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},ee=e("path",{d:"M21.8 1.5H2.2C1 1.5 0 2.5 0 3.8v16.5c0 1.2 1 2.2 2.2 2.2h19.5c1.2 0 2.2-1 2.2-2.2V3.8c.1-1.3-.9-2.3-2.1-2.3zM6 6.9c0 .3-.3.6-.6.6H3.6c-.3 0-.6-.3-.6-.6V5.1c0-.3.3-.6.6-.6h1.9c.2 0 .5.3.5.6v1.8zm2.2 0V5.1c0-.3.3-.6.6-.6h11.6c.3 0 .6.3.6.6V7c0 .3-.3.6-.6.6H8.8c-.3-.1-.6-.4-.6-.7zm13.2 10.2h-3.2l1.3 3c0 .1 0 .2-.1.2l-1 .4c-.1 0-.2 0-.2-.1l-1.3-3-2.2 2.4c-.1.1-.3 0-.3-.1v-9.8c0-.1.2-.2.3-.1l6.9 6.8c.1.1 0 .3-.2.3z"},null,-1),oe=[ee];function p(c,o){return n(),t("svg",X1,oe)}const ce={render:p},ne=Object.freeze(Object.defineProperty({__proto__:null,default:ce,render:p},Symbol.toStringTag,{value:"Module"})),te={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},re=e("path",{d:"M22.7 2.7H20V1.3c0-.7-.6-1.3-1.3-1.3-.7 0-1.3.6-1.3 1.3v1.3H6.7V1.3C6.7.6 6.1 0 5.3 0 4.6 0 4 .6 4 1.3v1.3H1.3C.6 2.7 0 3.3 0 4v18.7c0 .7.6 1.3 1.3 1.3h21.3c.7 0 1.3-.6 1.3-1.3V4c.1-.7-.5-1.3-1.2-1.3zm-1.4 18.6H2.7V6.7h18.7v14.6z"},null,-1),ie=e("path",{d:"M13.3 13.4h5.3v5.3h-5.3z"},null,-1),le=[re,ie];function $(c,o){return n(),t("svg",te,le)}const se={render:$},de=Object.freeze(Object.defineProperty({__proto__:null,default:se,render:$},Symbol.toStringTag,{value:"Module"})),_e={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},he=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.7 15.4c.4.4.4 1.1 0 1.5l-.8.8c-.4.4-1.1.4-1.5 0L12 14.3l-3.4 3.4c-.4.4-1.1.4-1.5 0l-.8-.8c-.4-.4-.4-1.1 0-1.5L9.7 12 6.3 8.6c-.4-.4-.4-1.1 0-1.5l.8-.8c.4-.4 1.1-.4 1.5 0L12 9.7l3.4-3.4c.4-.4 1.1-.4 1.5 0l.8.8c.4.4.4 1.1 0 1.5L14.3 12l3.4 3.4z"},null,-1),ae=[he];function f(c,o){return n(),t("svg",_e,ae)}const ue={render:f},ve=Object.freeze(Object.defineProperty({__proto__:null,default:ue,render:f},Symbol.toStringTag,{value:"Module"})),ge={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},we=e("path",{d:"M22.714 8.799h-1.563l-1.008-2.586C19.613 4.89 18.126 4 16.437 4H7.513c-1.69 0-3.202.89-3.706 2.213L2.798 8.8H1.235C.555 8.799 0 9.254 0 9.812v.58c0 .558.555 1.013 1.235 1.013h.429a10.83 10.83 0 0 0-.378 2.834v4.86c0 .56.554 1.014 1.235 1.014h2.067c.68 0 1.236-.455 1.236-1.013v-1.552h12.353V19.1c0 .558.554 1.013 1.235 1.013h2.067c.68 0 1.235-.455 1.235-1.013v-4.882c0-.951-.126-1.903-.378-2.834h.429c.68 0 1.235-.455 1.235-1.013v-.58c-.05-.537-.605-.992-1.286-.992ZM4.966 9.833l1.185-3.02c.202-.496.757-.827 1.362-.827h8.924c.63 0 1.185.33 1.361.827l1.185 3.02c.05.145-.075.269-.252.269H5.218c-.176.02-.302-.124-.252-.269Zm2.572 4.944H5.042c-.429 0-.756-.27-.756-.62v-.973c0-.372.428-.683.882-.62l2.32.31c.302.041.554.227.63.475l.176.662c.101.393-.252.766-.756.766Zm12.1-.62c0 .35-.327.62-.756.62h-2.495c-.48 0-.832-.373-.732-.745l.177-.662c.076-.248.302-.434.63-.476l2.32-.31c.453-.062.882.228.882.62v.952h-.025Z"},null,-1),me=[we];function z(c,o){return n(),t("svg",ge,me)}const pe={render:z},$e=Object.freeze(Object.defineProperty({__proto__:null,default:pe,render:z},Symbol.toStringTag,{value:"Module"})),fe={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},ze=e("path",{d:"M22.9.4c-1.1-.7-2.6-.4-3.3.8L9.2 17.8l-5.1-5.1c-.9-.9-2.5-.9-3.4 0s-.9 2.5 0 3.4l7.2 7.2c1.1 1.1 2.9.9 3.7-.4l12-19.2c.7-1.2.4-2.6-.7-3.3z"},null,-1),be=[ze];function b(c,o){return n(),t("svg",fe,be)}const xe={render:b},Se=Object.freeze(Object.defineProperty({__proto__:null,default:xe,render:b},Symbol.toStringTag,{value:"Module"})),Me={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},ye=e("path",{d:"M20.8 4.7C19.7 3.6 18.2 3.5 17 4c-.5-2.2-2.5-4-5-4S7.5 1.8 7 4.1c-1.2-.6-2.7-.4-3.8.6-1.3 1.3-1.3 3.5 0 4.8L6 12.3v8.4C6 22.5 7.5 24 9.4 24h.4c.9 0 1.7-.3 2.2-.9.6.5 1.4.9 2.2.9h.4c1.9 0 3.4-1.5 3.4-3.4v-8.4l2.8-2.8c1.3-1.2 1.3-3.3 0-4.7zM12 2.2c1.6 0 2.8 1.3 2.8 2.8S13.6 7.9 12 7.9c-1.6 0-2.8-1.3-2.8-2.8s1.2-2.9 2.8-2.9zm7.2 5.7-3.4 3.4v9.3c0 .6-.5 1.1-1.1 1.1h-.4c-.6 0-1.1-.5-1.1-1.1v-4.5H11v4.5c0 .6-.5 1.1-1.1 1.1h-.5c-.6 0-1.1-.5-1.1-1.1v-9.3L4.8 7.9c-.4-.4-.4-1.2 0-1.6s1.2-.4 1.6 0l3.4 3.4h4.3l3.4-3.4c.4-.4 1.2-.4 1.6 0 .5.5.5 1.2.1 1.6z"},null,-1),Oe=[ye];function x(c,o){return n(),t("svg",Me,Oe)}const Pe={render:x},je=Object.freeze(Object.defineProperty({__proto__:null,default:Pe,render:x},Symbol.toStringTag,{value:"Module"})),Ce={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Le=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm1.3 17.9v1.2c0 .5-.2.9-.8.9h-1c-.7 0-.9-.6-.9-.9v-1.2C8.9 17.6 7.4 16.5 7 15l2.8-.9c.3 1.1 1.2 1.5 2.2 1.5 1.1 0 1.7-.5 1.7-1.2 0-.5-.2-.9-1.1-1l-2.3-.5c-1.6-.4-3.1-1.3-3.1-3.4 0-1.9 1.3-3.2 3.3-3.5V4.9c0-.5.3-.9.9-.9h1c.5 0 .8.4.8.9v1.3c1.5.4 2.7 1.3 3.1 2.7l-2.7.7c-.4-.9-1.2-1.2-1.9-1.2-.9 0-1.5.5-1.5 1.2 0 .5.2.8.9 1l2.3.5c2 .5 3.1 1.5 3.1 3.4.1 1.8-1.3 3-3.2 3.4z"},null,-1),He=[Le];function S(c,o){return n(),t("svg",Ce,He)}const Te={render:S},Be=Object.freeze(Object.defineProperty({__proto__:null,default:Te,render:S},Symbol.toStringTag,{value:"Module"})),Ve={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},ke=e("path",{d:"M12 0C5.4 0 0 5.3 0 11.7c0 4.9 3.1 9.1 7.4 10.8-.7-.7-1.3-1.9-1.3-3.5 0-2.4 1-4.1 1.8-5.6.7-1.3 1.5-2.5 1.5-4.1 0-1-1-2.1-1.4-2.4-.2-.1-.2-.4-.1-.6s.2-.3.5-.3c1.3 0 4 .7 4.8 3.4.2.8.2 1.8.2 2.8 0 1-.1 2.3.3 2.6 0 0 .1.1.3.1.1 0 .4-.2.6-.8.5-1.4.5-3.2.1-3.6-.2-.2-.2-.5-.1-.7s.4-.3.7-.2c.1.1 3.5 1.3 3.3 6.7-.1 3.2-1.3 5.4-2.9 6.6C20.5 21.4 24 17 24 11.7 24 5.3 18.6 0 12 0z"},null,-1),Ze=[ke];function M(c,o){return n(),t("svg",Ve,Ze)}const Ae={render:M},Ie=Object.freeze(Object.defineProperty({__proto__:null,default:Ae,render:M},Symbol.toStringTag,{value:"Module"})),Fe={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Re=e("path",{d:"M14.8 19.5c-1.6 1-3.9 1-5.5 0h-.1c-.1.1-.2.1-.3.2-.1.1-.3.1-.4.2-.2.1-.3.1-.4.1-.2.1-.4.1-.6.1h-.2c-.3 0-.6.1-.8.1-1 0-2-.3-2.8-.8-.2.1-.5.3-.7.4 2.2 2.5 5.4 4.1 9 4.1 3.6 0 6.8-1.6 9-4.1-.2-.1-.5-.2-.7-.4-1.6 1.1-3.9 1.1-5.5.1zM12 0C5.4 0 0 5.4 0 12c0 2.2.6 4.2 1.6 6 .5-.1 1-.3 1.3-.7.4-.4 1.1-.4 1.5 0 .8.8 2.3.9 3.4.5.1 0 .1-.1.2-.1s.1-.1.2-.1c.1-.1.2-.2.3-.2.4-.4 1.1-.4 1.5 0 1 1 3 1 4 0 .4-.4 1.1-.4 1.5 0 1 1 3 1 4 0 .4-.4 1.1-.4 1.5 0 .3.3.8.5 1.3.7 1-1.8 1.6-3.8 1.6-6C24 5.4 18.6 0 12 0zm8 12.6-1.5-1.2v4c-.9.2-1.9.1-2.8-.2-.1 0-.1 0-.2-.1-.3-.1-.5-.2-.7-.4-.2.1-.5.3-.7.4-.1 0-.2.1-.3.1-1.1.4-2.4.4-3.5 0-.1 0-.2-.1-.3-.1-.3-.1-.5-.2-.7-.4h-.1c-.1.1-.2.1-.3.2-.1 0-.2.1-.3.1h-.1c-.1 0-.2.1-.3.1-.2.1-.4.1-.6.2h-.2c-.3 0-.6.1-.8.1-.4 0-.7 0-1-.1v-4L4 12.6 2.6 11l3.9-3.3V5.5h2.2l2.6-1.8c.4-.3 1-.3 1.4 0l8.7 7.3-1.4 1.6z"},null,-1),qe=[Re];function y(c,o){return n(),t("svg",Fe,qe)}const Ee={render:y},De=Object.freeze(Object.defineProperty({__proto__:null,default:Ee,render:y},Symbol.toStringTag,{value:"Module"})),Ne={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Ge=e("path",{d:"m20.3 13 3.4-3.4c.4-.4.4-1.1 0-1.5l-.8-.8c-.4-.4-1.1-.4-1.5 0L18 10.7l-3.4-3.4c-.4-.4-1.1-.4-1.5 0l-.8.8c-.4.4-.4 1.1 0 1.5l3.4 3.4-3.4 3.4c-.4.4-.4 1.1 0 1.5l.8.8c.4.4 1.1.4 1.5 0l3.4-3.4 3.4 3.4c.4.4 1.1.4 1.5 0l.8-.8c.4-.4.4-1.1 0-1.5L20.3 13zm-13-2.2-2.6-.6c-.8-.2-1-.6-1-1.1 0-.7.7-1.3 1.7-1.3.8 0 1.8.4 2.2 1.4l3-.8c-.5-1.5-1.8-2.6-3.5-3V4c0-.6-.4-1-.9-1H5.1c-.6 0-1 .4-1 1v1.4C1.8 5.8.4 7.2.4 9.4c0 2.4 1.6 3.3 3.5 3.8l2.6.6c.9.2 1.2.6 1.2 1.2 0 .7-.7 1.3-1.9 1.3s-2.1-.5-2.5-1.7l-3.2 1c.5 1.7 2.1 2.9 4.1 3.3v1.3c0 .4.2 1.1 1 1.1h1.1c.7 0 .9-.5.9-1.1v-1.3c2.1-.4 3.7-1.8 3.7-4-.1-2.4-1.4-3.6-3.6-4.1z"},null,-1),Qe=[Ge];function O(c,o){return n(),t("svg",Ne,Qe)}const Ue={render:O},Ke=Object.freeze(Object.defineProperty({__proto__:null,default:Ue,render:O},Symbol.toStringTag,{value:"Module"})),Je={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},We=e("circle",{cx:"11.6",cy:"12.8",r:"4.7"},null,-1),Ye=e("path",{d:"M17.4 0H6.6C3 0 0 3.1 0 6.8v10.4C0 20.9 3 24 6.6 24h10.7c3.7 0 6.6-3.1 6.6-6.8V6.8C24 3.1 21 0 17.4 0zm-5.8 19.9c-3.9 0-7.1-3.2-7.1-7.1 0-3.9 3.2-7.1 7.1-7.1 3.9 0 7.1 3.2 7.1 7.1.1 4-3.1 7.1-7.1 7.1zm7.2-13.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5z"},null,-1),Xe=[We,Ye];function P(c,o){return n(),t("svg",Je,Xe)}const e2={render:P},o2=Object.freeze(Object.defineProperty({__proto__:null,default:e2,render:P},Symbol.toStringTag,{value:"Module"})),c2={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},n2=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm4.8 13.5-6.6 7.3c-.2.2-.4.3-.7.3-.2 0-.4-.1-.5-.2-.4-.3-.5-.8-.4-1.2l2-5.7-3-2.2c-.2-.2-.4-.4-.4-.7 0-.3.1-.6.3-.8L14.1 3c.3-.4.8-.4 1.2-.2.4.2.5.7.4 1.2l-2 5.7 3 2.2c.2.2.4.4.4.7 0 .4-.1.7-.3.9z"},null,-1),t2=[n2];function j(c,o){return n(),t("svg",c2,t2)}const r2={render:j},i2=Object.freeze(Object.defineProperty({__proto__:null,default:r2,render:j},Symbol.toStringTag,{value:"Module"})),l2={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s2=e("path",{d:"M12 18H4V6h8c1.1 0 2-.9 2-2s-.9-2-2-2H2C.9 2 0 2.9 0 4v16c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2s-.9-2-2-2z"},null,-1),d2=e("path",{d:"m23.3 10.4-4.9-4c-.9-.7-2.1-.6-2.8.3-.7.9-.6 2.1.3 2.8l.6.4H8c-1.1 0-2 .9-2 2s.9 2 2 2h8.4l-.6.4c-.9.7-1 2-.3 2.8.4.5 1 .7 1.6.7.4 0 .9-.1 1.3-.4l4.9-4c.5-.4.7-1 .7-1.6 0-.4-.3-1-.7-1.4z"},null,-1),_2=[s2,d2];function C(c,o){return n(),t("svg",l2,_2)}const h2={render:C},a2=Object.freeze(Object.defineProperty({__proto__:null,default:h2,render:C},Symbol.toStringTag,{value:"Module"})),u2={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},v2=h1('<circle cx="2.2" cy="3" r="2.2"></circle><path d="M9.8 5.2h12C23 5.2 24 4.2 24 3S23 .8 21.8.8h-12C8.6.8 7.6 1.8 7.6 3s.9 2.2 2.2 2.2z"></path><circle cx="2.2" cy="12" r="2.2"></circle><path d="M21.8 9.8h-12c-1.2 0-2.2 1-2.2 2.2s1 2.2 2.2 2.2h12c1.2 0 2.2-1 2.2-2.2s-1-2.2-2.2-2.2z"></path><circle cx="2.2" cy="21" r="2.2"></circle><path d="M21.8 18.8h-12c-1.2 0-2.2 1-2.2 2.2s1 2.2 2.2 2.2h12c1.2 0 2.2-1 2.2-2.2s-1-2.2-2.2-2.2z"></path>',6),g2=[v2];function L(c,o){return n(),t("svg",u2,g2)}const w2={render:L},m2=Object.freeze(Object.defineProperty({__proto__:null,default:w2,render:L},Symbol.toStringTag,{value:"Module"})),p2={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},$2=e("path",{d:"M8.4 12c0-.7-.5-1.2-1.2-1.2h-6c-.7 0-1.2.5-1.2 1.2s.5 1.2 1.2 1.2h6c.7 0 1.2-.5 1.2-1.2zm14.4-1.2h-6c-.7 0-1.2.5-1.2 1.2s.5 1.2 1.2 1.2h6c.7 0 1.2-.5 1.2-1.2s-.5-1.2-1.2-1.2zM12 0c-.7 0-1.2.5-1.2 1.2v6c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2v-6C13.2.5 12.7 0 12 0zm0 15.6c-.7 0-1.2.5-1.2 1.2v6c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2v-6c0-.7-.5-1.2-1.2-1.2zm-4.2-1.1-4.2 4.2c-.6.6-.6 1.3-.1 1.8s1.2.5 1.7 0l4.2-4.2c.5-.5.5-1.2 0-1.7-.4-.5-1.2-.5-1.6-.1zm8.4-5 4.2-4.2c.6-.6.6-1.3.1-1.8s-1.2-.5-1.7 0l-4.2 4.2c-.5.5-.5 1.2 0 1.7.4.5 1.2.5 1.6.1zm-11-6C4.7 3 4 3 3.5 3.5s-.5 1.2 0 1.7l4.2 4.2c.5.5 1.2.5 1.7 0s.5-1.2 0-1.7L5.2 3.5zm11 11c-.5-.5-1.2-.5-1.7 0s-.5 1.2 0 1.7l4.2 4.2c.5.5 1.2.5 1.7 0s.5-1.2 0-1.7l-4.2-4.2z"},null,-1),f2=[$2];function H(c,o){return n(),t("svg",p2,f2)}const z2={render:H},b2=Object.freeze(Object.defineProperty({__proto__:null,default:z2,render:H},Symbol.toStringTag,{value:"Module"})),x2={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},S2=e("path",{d:"M22.5 7.5H18V6c0-1.2-.4-2.4-1-3.4C15.9 1 14 0 12 0 8.7 0 6 2.7 6 6v1.5H1.5C.7 7.5 0 8.2 0 9v13.5c0 .8.7 1.5 1.5 1.5h21c.8 0 1.5-.7 1.5-1.5V9c0-.8-.7-1.5-1.5-1.5zM9 6c0-1.7 1.3-3 3-3 1 0 1.9.5 2.5 1.3.3.5.5 1.1.5 1.7v1.5H9V6zm12 15H3V10.5h18V21z"},null,-1),M2=e("circle",{cx:"12",cy:"15",r:"1.5"},null,-1),y2=[S2,M2];function T(c,o){return n(),t("svg",x2,y2)}const O2={render:T},P2=Object.freeze(Object.defineProperty({__proto__:null,default:O2,render:T},Symbol.toStringTag,{value:"Module"})),j2={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},C2=e("path",{d:"M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-1.2 15.6H2.4V5.4h19.2v13.2z"},null,-1),L2=e("path",{d:"M20.4 9V6.6L12 10.2 3.6 6.6V9l8.4 3.6z"},null,-1),H2=[C2,L2];function B(c,o){return n(),t("svg",j2,H2)}const T2={render:B},B2=Object.freeze(Object.defineProperty({__proto__:null,default:T2,render:B},Symbol.toStringTag,{value:"Module"})),V2={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},k2=e("path",{d:"M23.4 15.6h-.6v-4.1c0-.5-.2-.9-.5-1.3l-3.7-3.7c-.2-.2-.4-.3-.6-.4-.3-.1-.5-.1-.7-.1h-1.7V4.2c0-.5-.2-.9-.5-1.3-.3-.3-.8-.5-1.3-.5h-12c-.5 0-.9.2-1.3.5-.3.4-.5.8-.5 1.3v12c0 .5.2.9.5 1.3.4.3.8.5 1.3.5h.6c0 1 .4 1.9 1.1 2.5.6.7 1.5 1.1 2.5 1.1s1.9-.4 2.5-1.1c.7-.6 1.1-1.5 1.1-2.5h4.8c0 1 .4 1.9 1.1 2.5.7.7 1.6 1.1 2.5 1.1s1.9-.4 2.5-1.1c.7-.7 1.1-1.6 1.1-2.5h1.8c.3 0 .6-.3.6-.6v-1.2c0-.3-.3-.6-.6-.6zM7.3 19.3c-.3.3-.8.5-1.3.5s-.9-.2-1.3-.5c-.3-.3-.5-.8-.5-1.3s.2-.9.5-1.3c.3-.3.8-.5 1.3-.5s.9.2 1.3.5c.3.3.5.8.5 1.3s-.2.9-.5 1.3zm4.1-8.8c0 .1 0 .2-.1.2-.1.1-.1.1-.2.1H9v2.1c0 .1 0 .2-.1.2-.1.1-.1.1-.2.1H6.9c-.1 0-.2 0-.2-.1-.1-.1-.1-.1-.1-.2v-2.1H4.5c-.1 0-.2 0-.2-.1-.1-.1-.1-.1-.1-.2V8.7c0-.1 0-.2.1-.2.1-.1.1-.1.2-.1h2.1V6.3c0-.1 0-.2.1-.2s.1-.1.2-.1h1.8c.1 0 .2 0 .2.1.1 0 .1.1.1.2v2.1h2.1c.1 0 .2 0 .2.1.1.1.1.1.1.2v1.8zm7.9 8.8c-.3.3-.8.5-1.3.5s-.9-.2-1.3-.5c-.3-.3-.5-.8-.5-1.3s.2-.9.5-1.3c.3-.3.8-.5 1.3-.5s.9.2 1.3.5c.3.3.5.8.5 1.3s-.2.9-.5 1.3zM21 12h-5.4V7.8h1.7l3.7 3.7v.5z"},null,-1),Z2=[k2];function V(c,o){return n(),t("svg",V2,Z2)}const A2={render:V},I2=Object.freeze(Object.defineProperty({__proto__:null,default:A2,render:V},Symbol.toStringTag,{value:"Module"})),F2={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},R2=e("path",{d:"M1.3 5.3H12c.7 0 1.3-.6 1.3-1.3s-.6-1.3-1.3-1.3H1.3C.6 2.7 0 3.3 0 4s.6 1.3 1.3 1.3zm0 5.4h21.3c.7 0 1.3-.6 1.3-1.3S23.4 8 22.7 8H1.3C.6 8 0 8.6 0 9.3s.6 1.4 1.3 1.4zm0 5.3h16c.7 0 1.3-.6 1.3-1.3s-.6-1.3-1.3-1.3h-16c-.7 0-1.3.6-1.3 1.3S.6 16 1.3 16zm21.4 2.7H1.3c-.7 0-1.3.6-1.3 1.3 0 .7.6 1.3 1.3 1.3h21.3c.7 0 1.3-.6 1.3-1.3.1-.7-.5-1.3-1.2-1.3z"},null,-1),q2=[R2];function k(c,o){return n(),t("svg",F2,q2)}const E2={render:k},D2=Object.freeze(Object.defineProperty({__proto__:null,default:E2,render:k},Symbol.toStringTag,{value:"Module"})),N2={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},G2=e("path",{d:"M17 9.4c-.7 0-1.3.6-1.3 1.3v2.6c0 2.2-1.8 4-4 4s-4-1.8-4-4v-2.6c0-.7-.6-1.3-1.3-1.3-.8 0-1.4.6-1.4 1.3v2.9c.1 3.6 3.1 6.5 6.7 6.5s6.6-2.9 6.7-6.5v-2.9c-.1-.7-.6-1.3-1.4-1.3z"},null,-1),Q2=e("path",{d:"M11.7 16c1.5 0 2.7-1.2 2.7-2.7V2.7c0-1.5-1.2-2.7-2.7-2.7C10.2 0 9 1.2 9 2.7v10.7c0 1.4 1.2 2.6 2.7 2.6zm0 5.3c-.7 0-1.3.6-1.3 1.3 0 .7.6 1.3 1.3 1.3.7 0 1.3-.6 1.3-1.3 0-.7-.6-1.3-1.3-1.3z"},null,-1),U2=[G2,Q2];function Z(c,o){return n(),t("svg",N2,U2)}const K2={render:Z},J2=Object.freeze(Object.defineProperty({__proto__:null,default:K2,render:Z},Symbol.toStringTag,{value:"Module"})),W2={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Y2=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"},null,-1),X2=e("path",{d:"M9.6 8.4c-.7 0-1.2.5-1.2 1.2v4.8c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2V9.6c0-.7-.5-1.2-1.2-1.2zm4.8 0c-.7 0-1.2.5-1.2 1.2v4.8c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2V9.6c0-.7-.5-1.2-1.2-1.2z"},null,-1),eo=[Y2,X2];function A(c,o){return n(),t("svg",W2,eo)}const oo={render:A},co=Object.freeze(Object.defineProperty({__proto__:null,default:oo,render:A},Symbol.toStringTag,{value:"Module"})),no={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},to=e("path",{d:"m5.069 10.711 1.243-2.383a3.97 3.97 0 0 1 1.425-1.502c2.875-1.71 3.238-1.684 3.6-1.658l1.943.13c.596.025 1.01.18 3.005 3.108a.507.507 0 0 0 .337.207l2.383.363c.647.103 1.088.7.984 1.347a1.174 1.174 0 0 1-1.347.984l-2.383-.363c-.777-.129-1.476-.544-1.917-1.191-.104-.156-.181-.285-.285-.415l-.947 4.658 1.543 2.31c.31.311.57.726.725 1.14l1.632 4.767c.26.699-.13 1.476-.829 1.71a1.316 1.316 0 0 1-.44.077c-.57 0-1.088-.363-1.295-.907l-1.632-4.766c-.026-.052-.052-.078-.078-.13L8.954 14.39a2.184 2.184 0 0 1-.596-2.02l.83-3.68a2.277 2.277 0 0 1-.26.156 1.44 1.44 0 0 0-.544.57L7.141 11.8a1.189 1.189 0 0 1-1.036.622c-.182 0-.363-.052-.544-.13a1.19 1.19 0 0 1-.492-1.58Zm7.638-6.126a2.292 2.292 0 1 0 0-4.585 2.292 2.292 0 0 0 0 4.585Z"},null,-1),ro=e("path",{d:"m8.375 16.799-3.893 3.196a1.396 1.396 0 0 0-.396 1.531c.054.145.124.26.228.386a1.33 1.33 0 0 0 1.89.18l3.894-3.197c.334-.29.632-.68.813-1.078l.097-.59-1.968-1.972-.571 1.427c-.04.042-.052.076-.094.117Z"},null,-1),io=[to,ro];function I(c,o){return n(),t("svg",no,io)}const lo={render:I},so=Object.freeze(Object.defineProperty({__proto__:null,default:lo,render:I},Symbol.toStringTag,{value:"Module"})),_o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},ho=e("path",{d:"m9.6 16.8 6-4.8-6-4.8z"},null,-1),ao=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"},null,-1),uo=[ho,ao];function F(c,o){return n(),t("svg",_o,uo)}const vo={render:F},go=Object.freeze(Object.defineProperty({__proto__:null,default:vo,render:F},Symbol.toStringTag,{value:"Module"})),wo={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},mo=e("path",{d:"M22.9 9.4c-.7-.7-1.6-1.1-2.6-1.1V4.7c0-.6-.2-1.2-.7-1.6L17.2.7c-.4-.4-1-.7-1.6-.7H5.2c-.4 0-.7.1-1 .4s-.4.7-.4 1.1v6.8c-1 0-1.9.4-2.6 1.1C.4 10.1 0 11 0 12v6c0 .2.1.4.2.5.1.1.3.2.5.2h3v4.5c0 .2.1.4.2.5.2.2.4.3.6.3h15c.2 0 .4-.1.5-.2.1-.1.2-.3.2-.5v-4.5h3c.2 0 .4-.1.5-.2.1-.1.2-.3.2-.5v-6c.1-1.1-.3-2-1-2.7zM6 2.2h9v2.2c0 .2.1.4.2.5.1.1.3.2.5.2H18v3H6V2.2zm12 19.6H6v-3h12v3zm3.8-5.3H2.2V12c0-.4.1-.8.4-1.1.3-.3.6-.4 1.1-.4h16.5c.4 0 .8.1 1.1.4.3.3.4.6.4 1.1v4.5z"},null,-1),po=e("path",{d:"M18.8 12.4c-.3 0-.6.1-.8.3s-.3.5-.3.8.1.6.3.8.5.3.8.3.6-.1.8-.3.3-.5.3-.8-.1-.6-.3-.8-.5-.3-.8-.3z"},null,-1),$o=[mo,po];function R(c,o){return n(),t("svg",wo,$o)}const fo={render:R},zo=Object.freeze(Object.defineProperty({__proto__:null,default:fo,render:R},Symbol.toStringTag,{value:"Module"})),bo={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},xo=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"},null,-1),So=e("path",{d:"M10.8 16.8h2.4v-2.4h-2.4zm1-10.8C10 6 8.4 7.6 8.4 9.6h2.4c-.1-.7.3-1.4 1-1.4.6 0 .9.4.9.9 0 .2-.2.6-.4.8l-1.1 1.2c-.3.4-.4.6-.4.8v1.2h2.4v-.3c0-.3 0-.4.2-.6l1-1.2c.4-.5.8-1.1.8-1.9-.1-2-1.7-3.1-3.4-3.1z"},null,-1),Mo=[xo,So];function q(c,o){return n(),t("svg",bo,Mo)}const yo={render:q},Oo=Object.freeze(Object.defineProperty({__proto__:null,default:yo,render:q},Symbol.toStringTag,{value:"Module"})),Po={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},jo=e("path",{d:"m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"},null,-1),Co=[jo];function E(c,o){return n(),t("svg",Po,Co)}const Lo={render:E},Ho=Object.freeze(Object.defineProperty({__proto__:null,default:Lo,render:E},Symbol.toStringTag,{value:"Module"})),To={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Bo=e("path",{d:"m16.9 9.5-5.8-5.4S9.3 6.2 6.8 9.2c-.4.6-.3 1.3.2 1.8l1.1 1-4.5 7.5c-.1.4 0 .8.4.9l1.1.6c.4.1.8 0 .9-.4l4-6.6 1.3 1.3-4.1 7.1c-.1.4 0 .8.4.9l1.2.6c.4.1.8 0 .9-.4l4.5-8.2c.2-.5.1-1.1-.3-1.5l-4.2-4L11.2 8l3.8 3.4c.3.3.7.3 1 0l1-1c.2-.2.2-.6-.1-.9zm.4-4.9c1.1-1.1 1.1-2.8 0-3.8-1.1-1.1-2.8-1.1-3.8 0-1.1 1.1-1.1 2.8 0 3.8 1 1.1 2.8 1.1 3.8 0zm2.3 12.2-.5-3.1c-.1-.4-.4-.6-.8-.6l-1.3.2c-.4.1-.6.4-.6.8l1.4 9.4c.1.4.4.6.8.6l1.4-.2c.4-.1.6-.4.6-.8l-1-6.3z"},null,-1),Vo=[Bo];function D(c,o){return n(),t("svg",To,Vo)}const ko={render:D},Zo=Object.freeze(Object.defineProperty({__proto__:null,default:ko,render:D},Symbol.toStringTag,{value:"Module"})),Ao={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Io=e("path",{d:"M20 15.2c-1.1 0-2.1.5-2.8 1.2L8 11.7v-.8l8.9-3.6c.7.9 1.9 1.5 3.1 1.5 2.2 0 4-1.8 4-4s-1.8-4-4-4c-2 0-3.6 1.4-3.9 3.3L6.5 8c-.7-.5-1.6-.8-2.5-.8-2.2 0-4 1.8-4 4s1.8 4 4 4c.8 0 1.6-.3 2.3-.7l9.8 5c.1 2.1 1.9 3.7 4 3.7 2.2 0 4-1.8 4-4-.1-2.2-1.9-4-4.1-4z"},null,-1),Fo=[Io];function N(c,o){return n(),t("svg",Ao,Fo)}const Ro={render:N},qo=Object.freeze(Object.defineProperty({__proto__:null,default:Ro,render:N},Symbol.toStringTag,{value:"Module"})),Eo={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Do=e("path",{d:"M6.9 10.4c.4-.1.9-.1 1.3-.1.7-2.6 2.8-4.7 5.4-5.3 3.8-.8 7.5 1.6 8.4 5.4.8.3 1.4.8 2 1.4C23.9 5.3 18.6 0 12 0S0 5.4 0 12c0 1.9.5 3.7 1.2 5.3.4-.4.9-.7 1.5-1-.3-2.7 1.5-5.3 4.2-5.9z"},null,-1),No=e("path",{d:"M20.8 12.4c-.4-.1-.7-.5-.8-.9 0-.1 0-.3-.1-.4-.6-2.7-3.2-4.4-5.8-3.9-2.1.4-3.7 2.3-3.8 4.5 0 .3-.2.6-.5.8-.3.2-.6.2-.9.2-.5-.1-1-.1-1.5 0-1.7.4-2.8 2.1-2.4 3.9 0 .1 0 .2.1.3.1.3.1.6-.1.9-.2.3-.4.5-.7.5-.8.2-1.7.5-1.7 1.2C4.7 22.2 8.2 24 12 24c5.4 0 10-3.6 11.5-8.6 0-.1-.1-.2-.1-.3-.3-1.4-1.3-2.4-2.6-2.7z"},null,-1),Go=[Do,No];function G(c,o){return n(),t("svg",Eo,Go)}const Qo={render:G},Uo=Object.freeze(Object.defineProperty({__proto__:null,default:Qo,render:G},Symbol.toStringTag,{value:"Module"})),Ko={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Jo=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.5 17.3c-.2.4-.7.5-1 .2-2.8-1.7-6.4-2.1-10.5-1.2-.4.1-.8-.2-.9-.6-.1-.4.2-.8.6-.9 4.6-1 8.5-.6 11.7 1.3.2.4.3.9.1 1.2zM19 14c-.3.4-.8.6-1.3.3-3.2-2-8.1-2.6-12-1.4-.5.1-1-.1-1.2-.6-.1-.5.1-1 .6-1.2 4.4-1.3 9.8-.7 13.5 1.6.5.3.6.9.4 1.3zm.1-3.4C15.2 8.3 8.8 8.1 5.2 9.3c-.6.1-1.3-.2-1.4-.8-.2-.6.1-1.2.7-1.4 4.2-1.3 11.3-1 15.7 1.6.5.3.7 1 .4 1.5-.3.6-1 .8-1.5.4z"},null,-1),Wo=[Jo];function Q(c,o){return n(),t("svg",Ko,Wo)}const Yo={render:Q},Xo=Object.freeze(Object.defineProperty({__proto__:null,default:Yo,render:Q},Symbol.toStringTag,{value:"Module"})),ec={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},oc=e("path",{d:"m23.4 12.5-4.1-3.8 1.1-6.4c.1-.7-.2-1.5-.8-1.9-.6-.4-1.4-.5-2.1-.1L12 3.1 6.5.2C5.8-.1 5-.1 4.4.4c-.6.4-.9 1.2-.8 1.9l1 6.4-4.1 3.8c-.5.5-.7 1.3-.5 2 .2.7.9 1.2 1.6 1.3l5.8 1.4 2.8 5.6c.3.7 1 1.1 1.8 1.1s1.4-.4 1.8-1.1l2.8-5.6 5.8-1.4c.7-.1 1.4-.6 1.6-1.3.1-.7-.1-1.5-.6-2z"},null,-1),cc=[oc];function U(c,o){return n(),t("svg",ec,cc)}const nc={render:U},tc=Object.freeze(Object.defineProperty({__proto__:null,default:nc,render:U},Symbol.toStringTag,{value:"Module"})),rc={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},ic=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"},null,-1),lc=e("path",{d:"M8.4 8.4h7.2v7.2H8.4z"},null,-1),sc=[ic,lc];function K(c,o){return n(),t("svg",rc,sc)}const dc={render:K},_c=Object.freeze(Object.defineProperty({__proto__:null,default:dc,render:K},Symbol.toStringTag,{value:"Module"})),hc={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},ac=e("path",{d:"M23.3 2.2c-.4-.4-1-.7-1.6-.7H2.2c-.6 0-1.2.2-1.6.7S0 3.1 0 3.8v16.5c0 .6.2 1.2.7 1.6.4.4 1 .7 1.6.7h19.5c.6 0 1.2-.2 1.6-.7.4-.4.7-1 .7-1.6V3.8c-.1-.7-.3-1.2-.8-1.6zM7.4 20.6h-5c-.2 0-.3-.1-.4-.2-.1-.1-.2-.2-.2-.4v-3.9h5.5v4.5zm0-6.4H1.9V9.8h5.5v4.4zm0-6.3H1.9v-4c0-.2.1-.3.2-.4s.2-.2.4-.2h4.9v4.6zm14.7 12.2c0 .2-.1.3-.2.4-.1.1-.2.2-.4.2H9.2v-4.5h12.9v3.9zm0-5.9H9.2V9.8h12.9v4.4zm0-6.3H9.2V3.4h12.3c.2 0 .3.1.4.2.1.1.2.2.2.4v3.9z"},null,-1),uc=[ac];function J(c,o){return n(),t("svg",hc,uc)}const vc={render:J},gc=Object.freeze(Object.defineProperty({__proto__:null,default:vc,render:J},Symbol.toStringTag,{value:"Module"})),wc={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},mc=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20.7c-3 0-5.5-2.4-5.5-5.5 0-2.2 1.4-4.2 3.3-5V3.9c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.4c1.9.8 3.3 2.8 3.3 5 0 3-2.5 5.4-5.5 5.4z"},null,-1),pc=e("circle",{cx:"12",cy:"15.3",r:"2.2"},null,-1),$c=[mc,pc];function W(c,o){return n(),t("svg",wc,$c)}const fc={render:W},zc=Object.freeze(Object.defineProperty({__proto__:null,default:fc,render:W},Symbol.toStringTag,{value:"Module"})),bc={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},xc=e("path",{d:"M12 4.4c-.6 0-1.1.5-1.1 1.1v3.3c0 .6.5 1.1 1.1 1.1s1.1-.5 1.1-1.1V5.5c0-.6-.5-1.1-1.1-1.1zm0 9.8c-.6 0-1.1.5-1.1 1.1v4.4c0 .6.5 1.1 1.1 1.1s1.1-.5 1.1-1.1v-4.4c0-.6-.5-1.1-1.1-1.1zM0 12.7c0 4.2 2.2 8 5.5 10.2L8.8 1.1C3.8 2.6 0 7.2 0 12.7zM15.3 1.1l3.3 21.8c3.3-2.2 5.5-6 5.5-10.2-.1-5.5-3.9-10.1-8.8-11.6z"},null,-1),Sc=[xc];function Y(c,o){return n(),t("svg",bc,Sc)}const Mc={render:Y},yc=Object.freeze(Object.defineProperty({__proto__:null,default:Mc,render:Y},Symbol.toStringTag,{value:"Module"})),Oc={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Pc=e("path",{d:"M18.7 6.7H5.3c-.8 0-1.4.6-1.3 1.4l1.5 14.7c.1.7.6 1.2 1.3 1.2h10.4c.7 0 1.3-.5 1.3-1.2L20 8.1c.1-.8-.5-1.4-1.3-1.4zM16 21.3H8l-1.2-12h10.4l-1.2 12zM5.3 5.3h13.3c.8 0 1.4-.6 1.4-1.3s-.6-1.3-1.3-1.3h-5.3V1.3C13.3.6 12.7 0 12 0s-1.3.6-1.3 1.3v1.3H5.3C4.6 2.7 4 3.3 4 4s.6 1.3 1.3 1.3z"},null,-1),jc=[Pc];function X(c,o){return n(),t("svg",Oc,jc)}const Cc={render:X},Lc=Object.freeze(Object.defineProperty({__proto__:null,default:Cc,render:X},Symbol.toStringTag,{value:"Module"})),Hc={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Tc=e("path",{d:"M11 .4 3.5 7.2c-.6.6-.7 1.5-.1 2.1.5.6 1.5.7 2.1.1l5-4.5v11.6c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V4.9l5 4.5c.6.6 1.6.5 2.1-.1.3-.3.4-.6.4-1s-.2-.8-.5-1.1L13 .4c-.6-.5-1.4-.5-2 0zM4.5 24c-.8 0-1.5-.7-1.5-1.5S3.7 21 4.5 21h15c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-15z"},null,-1),Bc=[Tc];function e1(c,o){return n(),t("svg",Hc,Bc)}const Vc={render:e1},kc=Object.freeze(Object.defineProperty({__proto__:null,default:Vc,render:e1},Symbol.toStringTag,{value:"Module"})),Zc={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Ac=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 4c1.9 0 3.5 1.6 3.5 3.5S13.9 11 12 11 8.5 9.4 8.5 7.5 10.1 4 12 4zm6 12.7c0 .7-.6 1.3-1.3 1.3H7.3c-.7 0-1.3-.6-1.3-1.3v-1.1c0-2 1.6-3.6 3.6-3.6h.4c.6.3 1.3.4 2 .4s1.4-.2 2-.4h.4c2 0 3.6 1.6 3.6 3.6v1.1z"},null,-1),Ic=[Ac];function o1(c,o){return n(),t("svg",Zc,Ic)}const Fc={render:o1},Rc=Object.freeze(Object.defineProperty({__proto__:null,default:Fc,render:o1},Symbol.toStringTag,{value:"Module"})),qc={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Ec=e("path",{d:"m21.9 5.6-4.6 3.2v6.6l4.6 3.1c.9.6 2.1 0 2.1-1.1V6.6c0-1-1.2-1.6-2.1-1zM14 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2z"},null,-1),Dc=[Ec];function c1(c,o){return n(),t("svg",qc,Dc)}const Nc={render:c1},Gc=Object.freeze(Object.defineProperty({__proto__:null,default:Nc,render:c1},Symbol.toStringTag,{value:"Module"})),Qc={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Uc=e("path",{d:"M16.6 8.3c-4.4 0-7.9 2.9-7.9 6.5 0 .6.1 1.1.2 1.6h-.3c-1 0-1.9-.1-2.8-.4-2.5 1.5-3 1.3-3 1.3.3-.6.4-1.7.4-2.5C1.3 13.6 0 11.6 0 9.4c0-3.9 3.9-7 8.6-7 4.3 0 7.9 2.6 8.5 5.9h-.5zm-3.9-1.1c0-.7-.6-1.3-1.3-1.3s-1.3.6-1.3 1.3c0 .7.6 1.3 1.3 1.3s1.3-.6 1.3-1.3zm-8.2 0c0 .7.6 1.3 1.3 1.3S7 7.9 7 7.2 6.4 6 5.7 6s-1.2.5-1.2 1.2z"},null,-1),Kc=e("path",{d:"M16.7 8.9c4 0 7.3 2.6 7.3 5.9 0 1.9-1.1 3.5-2.7 4.6 0 .6.1 1.6.4 2.1 0 0-.4.2-2.5-1.1-.7.2-1.5.3-2.4.3-4 0-7.3-2.6-7.3-5.9 0-3.3 3.2-5.9 7.2-5.9zM13.2 13c0 .6.5 1 1 1 .6 0 1-.5 1-1 0-.6-.5-1-1-1-.6-.1-1 .4-1 1zm4.7 0c0 .6.5 1 1 1 .6 0 1-.5 1-1 0-.6-.5-1-1-1s-1 .4-1 1z"},null,-1),Jc=[Uc,Kc];function n1(c,o){return n(),t("svg",Qc,Jc)}const Wc={render:n1},Yc=Object.freeze(Object.defineProperty({__proto__:null,default:Wc,render:n1},Symbol.toStringTag,{value:"Module"})),Xc={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},en=e("path",{d:"M23.5 6.2c-.3-1-1.1-1.9-2.1-2.1-1.9-.5-9.4-.5-9.4-.5s-7.5 0-9.4.5C1.6 4.4.8 5.2.5 6.2 0 8.1 0 12 0 12s0 3.9.5 5.8c.3 1 1.1 1.8 2.1 2.1 1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5c1-.3 1.8-1.1 2.1-2.1.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zm-14 9.4V8.5l6.3 3.6-6.3 3.5z"},null,-1),on=[en];function t1(c,o){return n(),t("svg",Xc,on)}const cn={render:t1},nn=Object.freeze(Object.defineProperty({__proto__:null,default:cn,render:t1},Symbol.toStringTag,{value:"Module"})),tn={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},rn=e("path",{d:"m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"},null,-1),ln=e("path",{d:"M10.5 7.5V6c0-.8-.7-1.5-1.5-1.5S7.5 5.2 7.5 6v1.5H6c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h1.5V12c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5v-1.5H12c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5h-1.5z"},null,-1),sn=[rn,ln];function r1(c,o){return n(),t("svg",tn,sn)}const dn={render:r1},_n=Object.freeze(Object.defineProperty({__proto__:null,default:dn,render:r1},Symbol.toStringTag,{value:"Module"})),hn={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},an=e("path",{d:"m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"},null,-1),un=e("path",{d:"M6 7.5c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h6c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5H6z"},null,-1),vn=[an,un];function i1(c,o){return n(),t("svg",hn,vn)}const gn={render:i1},wn=Object.freeze(Object.defineProperty({__proto__:null,default:gn,render:i1},Symbol.toStringTag,{value:"Module"})),mn={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},pn=e("path",{"fill-rule":"evenodd",d:"M14 10V2c0-1.106-.894-2-2-2-1.106 0-2 .894-2 2v8H2c-1.106 0-2 .894-2 2 0 1.106.894 2 2 2h8v8c0 1.106.894 2 2 2 1.106 0 2-.894 2-2v-8h8c1.106 0 2-.894 2-2 0-1.106-.894-2-2-2h-8Z","clip-rule":"evenodd"},null,-1),$n=[pn];function l1(c,o){return n(),t("svg",mn,$n)}const fn={render:l1},zn=Object.freeze(Object.defineProperty({__proto__:null,default:fn,render:l1},Symbol.toStringTag,{value:"Module"})),bn={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},xn=e("path",{d:"M2 10h20c1.106 0 2 .894 2 2 0 1.106-.894 2-2 2H2c-1.106 0-2-.894-2-2 0-1.106.894-2 2-2Z"},null,-1),Sn=[xn];function s1(c,o){return n(),t("svg",bn,Sn)}const Mn={render:s1},yn=Object.freeze(Object.defineProperty({__proto__:null,default:Mn,render:s1},Symbol.toStringTag,{value:"Module"})),On={xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24"},Pn=e("path",{d:"m11.999 5.146-.01-.796a.587.587 0 0 1 .598-.6l6.959.088c.337.004.612.28.615.615l.089 6.969a.587.587 0 0 1-.6.6l-.794-.01a.628.628 0 0 1-.615-.63l.048-4.216-3.626 3.63a.606.606 0 0 1-.86-.01l-.58-.582a.608.608 0 0 1-.01-.86l3.626-3.63-4.211.047a.623.623 0 0 1-.63-.615Zm.002 13.708.01.796a.587.587 0 0 1-.598.6l-6.959-.088a.625.625 0 0 1-.615-.615l-.089-6.969a.587.587 0 0 1 .6-.6l.794.01c.34.005.618.29.615.63l-.048 4.216 3.626-3.63a.606.606 0 0 1 .86.01l.58.582a.608.608 0 0 1 .01.86l-3.626 3.63 4.211-.047a.623.623 0 0 1 .63.615Z"},null,-1),jn=[Pn];function d1(c,o){return n(),t("svg",On,jn)}const Cn={render:d1},Ln=Object.freeze(Object.defineProperty({__proto__:null,default:Cn,render:d1},Symbol.toStringTag,{value:"Module"})),Hn={xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16"},Tn=e("path",{"fill-rule":"evenodd",d:"M9.985 16c-.584 0-.992-.461-.992-1.143L9 11H7.015l-.008 3.857c-.004.676-.41 1.143-.992 1.143H3.037c-.582 0-.988-.467-.993-1.143V9.778l-.926-.04c-.437 0-.902-.123-1.06-.595C-.1 8.668.082 7.94.404 7.597L7.255.322c.404-.43 1.022-.43 1.427-.001l6.912 7.317c.326.343.507 1.03.347 1.505-.16.472-.557.635-.993.635h-.992v5.08c0 .68-.408 1.142-.993 1.142","clip-rule":"evenodd"},null,-1),Bn=[Tn];function _1(c,o){return n(),t("svg",Hn,Bn)}const Vn={render:_1},kn=Object.freeze(Object.defineProperty({__proto__:null,default:Vn,render:_1},Symbol.toStringTag,{value:"Module"}));export{Fn as R,Rn as u};
+import{H as _,b as n,c as t,e,a4 as h1}from"./entry.Do8xnxHS.js";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const a1=["icon-cancel","icon-check-circle-filled","icon-chevron-down","icon-chevron-left","icon-chevron-right","icon-chevron-up","icon-current-location","icon-document-lined","icon-document","icon-download","icon-enlarge-square-filled","icon-enlarge","icon-exclamation-circle-filled","icon-facebook","icon-home","icon-information-circle-filled","icon-link-external-square-filled","icon-linkedin","icon-mail","icon-phone","icon-pin","icon-twitter","icon-view","icon-whatsapp","icon-x"],u1={"icon-accessible":()=>Promise.resolve().then(()=>b1),"icon-add":()=>Promise.resolve().then(()=>O1),"icon-arrow-down":()=>Promise.resolve().then(()=>H1),"icon-arrow-left":()=>Promise.resolve().then(()=>Z1),"icon-arrow-right":()=>Promise.resolve().then(()=>q1),"icon-arrow-up":()=>Promise.resolve().then(()=>Q1),"icon-attach":()=>Promise.resolve().then(()=>Y1),"icon-browser":()=>Promise.resolve().then(()=>ne),"icon-calendar-lined":()=>Promise.resolve().then(()=>de),"icon-cancel-circle-filled":()=>Promise.resolve().then(()=>ve),"icon-car":()=>Promise.resolve().then(()=>$e),"icon-check":()=>Promise.resolve().then(()=>Se),"icon-child-lined":()=>Promise.resolve().then(()=>je),"icon-dollar-circle-filled":()=>Promise.resolve().then(()=>Be),"icon-fire":()=>Promise.resolve().then(()=>Ie),"icon-flood":()=>Promise.resolve().then(()=>De),"icon-free":()=>Promise.resolve().then(()=>Ke),"icon-instagram":()=>Promise.resolve().then(()=>o2),"icon-lightning":()=>Promise.resolve().then(()=>i2),"icon-link":()=>Promise.resolve().then(()=>a2),"icon-list":()=>Promise.resolve().then(()=>m2),"icon-loading":()=>Promise.resolve().then(()=>b2),"icon-log-in-lined":()=>Promise.resolve().then(()=>P2),"icon-mail-lined":()=>Promise.resolve().then(()=>B2),"icon-medical":()=>Promise.resolve().then(()=>I2),"icon-menu":()=>Promise.resolve().then(()=>D2),"icon-microphone":()=>Promise.resolve().then(()=>J2),"icon-pause-circle-lined":()=>Promise.resolve().then(()=>co),"icon-person":()=>Promise.resolve().then(()=>so),"icon-play-circle-lined":()=>Promise.resolve().then(()=>go),"icon-print-lined":()=>Promise.resolve().then(()=>zo),"icon-question-circle-lined":()=>Promise.resolve().then(()=>Oo),"icon-search":()=>Promise.resolve().then(()=>Ho),"icon-senior":()=>Promise.resolve().then(()=>Zo),"icon-share":()=>Promise.resolve().then(()=>qo),"icon-smoke":()=>Promise.resolve().then(()=>Uo),"icon-spotify":()=>Promise.resolve().then(()=>Xo),"icon-star":()=>Promise.resolve().then(()=>tc),"icon-stop-circle-lined":()=>Promise.resolve().then(()=>_c),"icon-table-lined":()=>Promise.resolve().then(()=>gc),"icon-temperature":()=>Promise.resolve().then(()=>zc),"icon-traffic":()=>Promise.resolve().then(()=>yc),"icon-trash-lined":()=>Promise.resolve().then(()=>Lc),"icon-upload":()=>Promise.resolve().then(()=>kc),"icon-user-circle-filled":()=>Promise.resolve().then(()=>Rc),"icon-video":()=>Promise.resolve().then(()=>Gc),"icon-wechat":()=>Promise.resolve().then(()=>Yc),"icon-youtube":()=>Promise.resolve().then(()=>nn),"icon-zoom-in":()=>Promise.resolve().then(()=>_n),"icon-zoom-out":()=>Promise.resolve().then(()=>wn),"icon-map-zoom-in":()=>Promise.resolve().then(()=>zn),"icon-map-zoom-out":()=>Promise.resolve().then(()=>yn),"icon-enlarge":()=>Promise.resolve().then(()=>Ln),"icon-home":()=>Promise.resolve().then(()=>kn)},v1=a1,g1=Object.keys(u1);[...v1,...g1];const Fn={alert:["icon-fire","icon-flood","icon-lightning","icon-medical","icon-smoke","icon-temperature","icon-traffic"],social:["icon-facebook","icon-instagram","icon-linkedin","icon-spotify","icon-wechat","icon-whatsapp","icon-youtube","icon-x"],standard:["icon-accessible","icon-add","icon-arrow-up","icon-arrow-right","icon-arrow-down","icon-arrow-left","icon-attach","icon-browser","icon-calendar-lined","icon-cancel","icon-cancel-circle-filled","icon-car","icon-check","icon-check-circle-filled","icon-chevron-up","icon-chevron-right","icon-chevron-down","icon-chevron-left","icon-child-lined","icon-current-location","icon-document","icon-document-lined","icon-dollar-circle-filled","icon-download","icon-enlarge","icon-enlarge-square-filled","icon-exclamation-circle-filled","icon-free","icon-home","icon-information-circle-filled","icon-link","icon-link-external-square-filled","icon-list","icon-loading","icon-log-in-lined","icon-mail","icon-mail-lined","icon-menu","icon-microphone","icon-pause-circle-lined","icon-person","icon-phone","icon-pin","icon-play-circle-lined","icon-print-lined","icon-question-circle-lined","icon-search","icon-senior","icon-share","icon-star","icon-stop-circle-lined","icon-table-lined","icon-trash-lined","icon-upload","icon-user-circle-filled","icon-video","icon-view","icon-zoom-in","icon-zoom-out"],map:["icon-enlarge","icon-map-zoom-in","icon-map-zoom-out","icon-home"]};function Rn(c,o){const s=_("$rplEvent"),d=_("eventContext",{});return{emitRplEvent:(l,r={},i={})=>{d&&(r={...d,...r}),o&&o(l,r),i!=null&&i.global&&(s==null||s.emit(`${c}/${l}`,r))},withOptions:(l,r)=>Object.keys(l).filter(i=>r.includes(i)&&l[i])}}const w1={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},m1=e("circle",{cx:"9",cy:"3",r:"3"},null,-1),p1=e("path",{d:"m23.9 19.4-.7-1.3c-.2-.4-.6-.5-1-.3l-1.7.9-2.7-5.7c-.2-.5-.8-.9-1.4-.9h-6.2l-.2-1.5h5.7c.4 0 .8-.3.8-.7V8.3c0-.4-.3-.8-.8-.8H6.6l.9 6.2c.1.8.8 1.3 1.5 1.3h6.5l2.9 6.3c.4.8 1.3 1.1 2 .7l3.1-1.5c.5-.3.6-.7.4-1.1z"},null,-1),$1=e("path",{d:"M13.4 16.5C13.1 19 10.9 21 8.2 21 5.4 21 3 18.6 3 15.8c0-1.9 1.1-3.6 2.6-4.6-.1-1.2-.3-2.2-.4-3.1-3 1.2-5.2 4.2-5.2 7.7C0 20.3 3.7 24 8.2 24c3.4 0 6.3-2 7.6-4.9l-1.2-2.6h-1.2z"},null,-1),f1=[m1,p1,$1];function h(c,o){return n(),t("svg",w1,f1)}const z1={render:h},b1=Object.freeze(Object.defineProperty({__proto__:null,default:z1,render:h},Symbol.toStringTag,{value:"Module"})),x1={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},S1=e("path",{d:"M22 10h-8V2c0-1.1-.9-2-2-2s-2 .9-2 2v8H2c-1.1 0-2 .9-2 2s.9 2 2 2h8v8c0 1.1.9 2 2 2s2-.9 2-2v-8h8c1.1 0 2-.9 2-2s-.9-2-2-2z"},null,-1),M1=[S1];function a(c,o){return n(),t("svg",x1,M1)}const y1={render:a},O1=Object.freeze(Object.defineProperty({__proto__:null,default:y1,render:a},Symbol.toStringTag,{value:"Module"})),P1={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},j1=e("path",{d:"m23.6 11.4-1.2-1.2c-.5-.5-1.4-.5-1.9 0l-6.3 6.5V1.3c0-.7-.6-1.3-1.3-1.3h-1.8c-.7 0-1.3.6-1.3 1.3v15.4l-6.3-6.5c-.5-.5-1.4-.5-1.9 0L.4 11.4c-.5.5-.5 1.3 0 1.8l10.7 10.4c.5.5 1.3.5 1.9 0l10.7-10.4c.4-.5.4-1.3-.1-1.8z"},null,-1),C1=[j1];function u(c,o){return n(),t("svg",P1,C1)}const L1={render:u},H1=Object.freeze(Object.defineProperty({__proto__:null,default:L1,render:u},Symbol.toStringTag,{value:"Module"})),T1={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},B1=e("path",{d:"M22.7 9.8H7.3l6.5-6.3c.5-.5.5-1.4 0-1.9L12.6.4c-.5-.5-1.3-.5-1.8 0L.4 11.1c-.5.5-.5 1.3 0 1.9l10.4 10.7c.5.5 1.3.5 1.8 0l1.2-1.2c.5-.5.5-1.4 0-1.9l-6.5-6.3h15.4c.7 0 1.3-.6 1.3-1.3v-1.8c0-.8-.6-1.4-1.3-1.4z"},null,-1),V1=[B1];function v(c,o){return n(),t("svg",T1,V1)}const k1={render:v},Z1=Object.freeze(Object.defineProperty({__proto__:null,default:k1,render:v},Symbol.toStringTag,{value:"Module"})),A1={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},I1=e("path",{d:"M23.6 11.1 13.2.4c-.5-.5-1.3-.5-1.8 0l-1.2 1.2c-.5.5-.5 1.4 0 1.9l6.5 6.3H1.3c-.7 0-1.3.6-1.3 1.3v1.8c0 .7.6 1.3 1.3 1.3h15.4l-6.5 6.3c-.5.5-.5 1.4 0 1.9l1.2 1.2c.5.5 1.3.5 1.8 0l10.4-10.7c.5-.5.5-1.3 0-1.8z"},null,-1),F1=[I1];function g(c,o){return n(),t("svg",A1,F1)}const R1={render:g},q1=Object.freeze(Object.defineProperty({__proto__:null,default:R1,render:g},Symbol.toStringTag,{value:"Module"})),E1={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},D1=e("path",{d:"M23.6 10.8 12.9.4c-.5-.5-1.3-.5-1.9 0L.4 10.8c-.5.5-.5 1.3 0 1.8l1.2 1.2c.5.5 1.4.5 1.9 0l6.3-6.5v15.4c0 .7.6 1.3 1.3 1.3h1.8c.7 0 1.3-.6 1.3-1.3V7.3l6.3 6.4c.5.5 1.4.5 1.9 0l1.2-1.2c.5-.4.5-1.2 0-1.7z"},null,-1),N1=[D1];function w(c,o){return n(),t("svg",E1,N1)}const G1={render:w},Q1=Object.freeze(Object.defineProperty({__proto__:null,default:G1,render:w},Symbol.toStringTag,{value:"Module"})),U1={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},K1=e("path",{d:"M18.6 4.6C18.5 2 16.3 0 13.7 0c-2.7 0-4.9 2-5 4.6v12.7c.1 1.7 1.5 3.1 3.3 3.1s3.2-1.4 3.3-3.1v-10c0-.7-.5-1.2-1.1-1.2-.6 0-1.1.5-1.1 1.2v9.9c0 .4-.5.8-1.1.8s-1.1-.4-1.1-.8V4.8c0-1.3 1.2-2.4 2.8-2.4 1.5 0 2.8 1.1 2.8 2.4v12c0 2.6-2 4.8-4.4 4.8s-4.4-2.2-4.4-4.8V12c0-.7-.5-1.2-1.1-1.2-.6 0-1.1.5-1.1 1.2v4.8c0 4 3 7.2 6.6 7.2s6.6-3.2 6.6-7.2l-.1-12.2z"},null,-1),J1=[K1];function m(c,o){return n(),t("svg",U1,J1)}const W1={render:m},Y1=Object.freeze(Object.defineProperty({__proto__:null,default:W1,render:m},Symbol.toStringTag,{value:"Module"})),X1={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},ee=e("path",{d:"M21.8 1.5H2.2C1 1.5 0 2.5 0 3.8v16.5c0 1.2 1 2.2 2.2 2.2h19.5c1.2 0 2.2-1 2.2-2.2V3.8c.1-1.3-.9-2.3-2.1-2.3zM6 6.9c0 .3-.3.6-.6.6H3.6c-.3 0-.6-.3-.6-.6V5.1c0-.3.3-.6.6-.6h1.9c.2 0 .5.3.5.6v1.8zm2.2 0V5.1c0-.3.3-.6.6-.6h11.6c.3 0 .6.3.6.6V7c0 .3-.3.6-.6.6H8.8c-.3-.1-.6-.4-.6-.7zm13.2 10.2h-3.2l1.3 3c0 .1 0 .2-.1.2l-1 .4c-.1 0-.2 0-.2-.1l-1.3-3-2.2 2.4c-.1.1-.3 0-.3-.1v-9.8c0-.1.2-.2.3-.1l6.9 6.8c.1.1 0 .3-.2.3z"},null,-1),oe=[ee];function p(c,o){return n(),t("svg",X1,oe)}const ce={render:p},ne=Object.freeze(Object.defineProperty({__proto__:null,default:ce,render:p},Symbol.toStringTag,{value:"Module"})),te={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},re=e("path",{d:"M22.7 2.7H20V1.3c0-.7-.6-1.3-1.3-1.3-.7 0-1.3.6-1.3 1.3v1.3H6.7V1.3C6.7.6 6.1 0 5.3 0 4.6 0 4 .6 4 1.3v1.3H1.3C.6 2.7 0 3.3 0 4v18.7c0 .7.6 1.3 1.3 1.3h21.3c.7 0 1.3-.6 1.3-1.3V4c.1-.7-.5-1.3-1.2-1.3zm-1.4 18.6H2.7V6.7h18.7v14.6z"},null,-1),ie=e("path",{d:"M13.3 13.4h5.3v5.3h-5.3z"},null,-1),le=[re,ie];function $(c,o){return n(),t("svg",te,le)}const se={render:$},de=Object.freeze(Object.defineProperty({__proto__:null,default:se,render:$},Symbol.toStringTag,{value:"Module"})),_e={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},he=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.7 15.4c.4.4.4 1.1 0 1.5l-.8.8c-.4.4-1.1.4-1.5 0L12 14.3l-3.4 3.4c-.4.4-1.1.4-1.5 0l-.8-.8c-.4-.4-.4-1.1 0-1.5L9.7 12 6.3 8.6c-.4-.4-.4-1.1 0-1.5l.8-.8c.4-.4 1.1-.4 1.5 0L12 9.7l3.4-3.4c.4-.4 1.1-.4 1.5 0l.8.8c.4.4.4 1.1 0 1.5L14.3 12l3.4 3.4z"},null,-1),ae=[he];function f(c,o){return n(),t("svg",_e,ae)}const ue={render:f},ve=Object.freeze(Object.defineProperty({__proto__:null,default:ue,render:f},Symbol.toStringTag,{value:"Module"})),ge={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},we=e("path",{d:"M22.714 8.799h-1.563l-1.008-2.586C19.613 4.89 18.126 4 16.437 4H7.513c-1.69 0-3.202.89-3.706 2.213L2.798 8.8H1.235C.555 8.799 0 9.254 0 9.812v.58c0 .558.555 1.013 1.235 1.013h.429a10.83 10.83 0 0 0-.378 2.834v4.86c0 .56.554 1.014 1.235 1.014h2.067c.68 0 1.236-.455 1.236-1.013v-1.552h12.353V19.1c0 .558.554 1.013 1.235 1.013h2.067c.68 0 1.235-.455 1.235-1.013v-4.882c0-.951-.126-1.903-.378-2.834h.429c.68 0 1.235-.455 1.235-1.013v-.58c-.05-.537-.605-.992-1.286-.992ZM4.966 9.833l1.185-3.02c.202-.496.757-.827 1.362-.827h8.924c.63 0 1.185.33 1.361.827l1.185 3.02c.05.145-.075.269-.252.269H5.218c-.176.02-.302-.124-.252-.269Zm2.572 4.944H5.042c-.429 0-.756-.27-.756-.62v-.973c0-.372.428-.683.882-.62l2.32.31c.302.041.554.227.63.475l.176.662c.101.393-.252.766-.756.766Zm12.1-.62c0 .35-.327.62-.756.62h-2.495c-.48 0-.832-.373-.732-.745l.177-.662c.076-.248.302-.434.63-.476l2.32-.31c.453-.062.882.228.882.62v.952h-.025Z"},null,-1),me=[we];function z(c,o){return n(),t("svg",ge,me)}const pe={render:z},$e=Object.freeze(Object.defineProperty({__proto__:null,default:pe,render:z},Symbol.toStringTag,{value:"Module"})),fe={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},ze=e("path",{d:"M22.9.4c-1.1-.7-2.6-.4-3.3.8L9.2 17.8l-5.1-5.1c-.9-.9-2.5-.9-3.4 0s-.9 2.5 0 3.4l7.2 7.2c1.1 1.1 2.9.9 3.7-.4l12-19.2c.7-1.2.4-2.6-.7-3.3z"},null,-1),be=[ze];function b(c,o){return n(),t("svg",fe,be)}const xe={render:b},Se=Object.freeze(Object.defineProperty({__proto__:null,default:xe,render:b},Symbol.toStringTag,{value:"Module"})),Me={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},ye=e("path",{d:"M20.8 4.7C19.7 3.6 18.2 3.5 17 4c-.5-2.2-2.5-4-5-4S7.5 1.8 7 4.1c-1.2-.6-2.7-.4-3.8.6-1.3 1.3-1.3 3.5 0 4.8L6 12.3v8.4C6 22.5 7.5 24 9.4 24h.4c.9 0 1.7-.3 2.2-.9.6.5 1.4.9 2.2.9h.4c1.9 0 3.4-1.5 3.4-3.4v-8.4l2.8-2.8c1.3-1.2 1.3-3.3 0-4.7zM12 2.2c1.6 0 2.8 1.3 2.8 2.8S13.6 7.9 12 7.9c-1.6 0-2.8-1.3-2.8-2.8s1.2-2.9 2.8-2.9zm7.2 5.7-3.4 3.4v9.3c0 .6-.5 1.1-1.1 1.1h-.4c-.6 0-1.1-.5-1.1-1.1v-4.5H11v4.5c0 .6-.5 1.1-1.1 1.1h-.5c-.6 0-1.1-.5-1.1-1.1v-9.3L4.8 7.9c-.4-.4-.4-1.2 0-1.6s1.2-.4 1.6 0l3.4 3.4h4.3l3.4-3.4c.4-.4 1.2-.4 1.6 0 .5.5.5 1.2.1 1.6z"},null,-1),Oe=[ye];function x(c,o){return n(),t("svg",Me,Oe)}const Pe={render:x},je=Object.freeze(Object.defineProperty({__proto__:null,default:Pe,render:x},Symbol.toStringTag,{value:"Module"})),Ce={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Le=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm1.3 17.9v1.2c0 .5-.2.9-.8.9h-1c-.7 0-.9-.6-.9-.9v-1.2C8.9 17.6 7.4 16.5 7 15l2.8-.9c.3 1.1 1.2 1.5 2.2 1.5 1.1 0 1.7-.5 1.7-1.2 0-.5-.2-.9-1.1-1l-2.3-.5c-1.6-.4-3.1-1.3-3.1-3.4 0-1.9 1.3-3.2 3.3-3.5V4.9c0-.5.3-.9.9-.9h1c.5 0 .8.4.8.9v1.3c1.5.4 2.7 1.3 3.1 2.7l-2.7.7c-.4-.9-1.2-1.2-1.9-1.2-.9 0-1.5.5-1.5 1.2 0 .5.2.8.9 1l2.3.5c2 .5 3.1 1.5 3.1 3.4.1 1.8-1.3 3-3.2 3.4z"},null,-1),He=[Le];function S(c,o){return n(),t("svg",Ce,He)}const Te={render:S},Be=Object.freeze(Object.defineProperty({__proto__:null,default:Te,render:S},Symbol.toStringTag,{value:"Module"})),Ve={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},ke=e("path",{d:"M12 0C5.4 0 0 5.3 0 11.7c0 4.9 3.1 9.1 7.4 10.8-.7-.7-1.3-1.9-1.3-3.5 0-2.4 1-4.1 1.8-5.6.7-1.3 1.5-2.5 1.5-4.1 0-1-1-2.1-1.4-2.4-.2-.1-.2-.4-.1-.6s.2-.3.5-.3c1.3 0 4 .7 4.8 3.4.2.8.2 1.8.2 2.8 0 1-.1 2.3.3 2.6 0 0 .1.1.3.1.1 0 .4-.2.6-.8.5-1.4.5-3.2.1-3.6-.2-.2-.2-.5-.1-.7s.4-.3.7-.2c.1.1 3.5 1.3 3.3 6.7-.1 3.2-1.3 5.4-2.9 6.6C20.5 21.4 24 17 24 11.7 24 5.3 18.6 0 12 0z"},null,-1),Ze=[ke];function M(c,o){return n(),t("svg",Ve,Ze)}const Ae={render:M},Ie=Object.freeze(Object.defineProperty({__proto__:null,default:Ae,render:M},Symbol.toStringTag,{value:"Module"})),Fe={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Re=e("path",{d:"M14.8 19.5c-1.6 1-3.9 1-5.5 0h-.1c-.1.1-.2.1-.3.2-.1.1-.3.1-.4.2-.2.1-.3.1-.4.1-.2.1-.4.1-.6.1h-.2c-.3 0-.6.1-.8.1-1 0-2-.3-2.8-.8-.2.1-.5.3-.7.4 2.2 2.5 5.4 4.1 9 4.1 3.6 0 6.8-1.6 9-4.1-.2-.1-.5-.2-.7-.4-1.6 1.1-3.9 1.1-5.5.1zM12 0C5.4 0 0 5.4 0 12c0 2.2.6 4.2 1.6 6 .5-.1 1-.3 1.3-.7.4-.4 1.1-.4 1.5 0 .8.8 2.3.9 3.4.5.1 0 .1-.1.2-.1s.1-.1.2-.1c.1-.1.2-.2.3-.2.4-.4 1.1-.4 1.5 0 1 1 3 1 4 0 .4-.4 1.1-.4 1.5 0 1 1 3 1 4 0 .4-.4 1.1-.4 1.5 0 .3.3.8.5 1.3.7 1-1.8 1.6-3.8 1.6-6C24 5.4 18.6 0 12 0zm8 12.6-1.5-1.2v4c-.9.2-1.9.1-2.8-.2-.1 0-.1 0-.2-.1-.3-.1-.5-.2-.7-.4-.2.1-.5.3-.7.4-.1 0-.2.1-.3.1-1.1.4-2.4.4-3.5 0-.1 0-.2-.1-.3-.1-.3-.1-.5-.2-.7-.4h-.1c-.1.1-.2.1-.3.2-.1 0-.2.1-.3.1h-.1c-.1 0-.2.1-.3.1-.2.1-.4.1-.6.2h-.2c-.3 0-.6.1-.8.1-.4 0-.7 0-1-.1v-4L4 12.6 2.6 11l3.9-3.3V5.5h2.2l2.6-1.8c.4-.3 1-.3 1.4 0l8.7 7.3-1.4 1.6z"},null,-1),qe=[Re];function y(c,o){return n(),t("svg",Fe,qe)}const Ee={render:y},De=Object.freeze(Object.defineProperty({__proto__:null,default:Ee,render:y},Symbol.toStringTag,{value:"Module"})),Ne={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Ge=e("path",{d:"m20.3 13 3.4-3.4c.4-.4.4-1.1 0-1.5l-.8-.8c-.4-.4-1.1-.4-1.5 0L18 10.7l-3.4-3.4c-.4-.4-1.1-.4-1.5 0l-.8.8c-.4.4-.4 1.1 0 1.5l3.4 3.4-3.4 3.4c-.4.4-.4 1.1 0 1.5l.8.8c.4.4 1.1.4 1.5 0l3.4-3.4 3.4 3.4c.4.4 1.1.4 1.5 0l.8-.8c.4-.4.4-1.1 0-1.5L20.3 13zm-13-2.2-2.6-.6c-.8-.2-1-.6-1-1.1 0-.7.7-1.3 1.7-1.3.8 0 1.8.4 2.2 1.4l3-.8c-.5-1.5-1.8-2.6-3.5-3V4c0-.6-.4-1-.9-1H5.1c-.6 0-1 .4-1 1v1.4C1.8 5.8.4 7.2.4 9.4c0 2.4 1.6 3.3 3.5 3.8l2.6.6c.9.2 1.2.6 1.2 1.2 0 .7-.7 1.3-1.9 1.3s-2.1-.5-2.5-1.7l-3.2 1c.5 1.7 2.1 2.9 4.1 3.3v1.3c0 .4.2 1.1 1 1.1h1.1c.7 0 .9-.5.9-1.1v-1.3c2.1-.4 3.7-1.8 3.7-4-.1-2.4-1.4-3.6-3.6-4.1z"},null,-1),Qe=[Ge];function O(c,o){return n(),t("svg",Ne,Qe)}const Ue={render:O},Ke=Object.freeze(Object.defineProperty({__proto__:null,default:Ue,render:O},Symbol.toStringTag,{value:"Module"})),Je={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},We=e("circle",{cx:"11.6",cy:"12.8",r:"4.7"},null,-1),Ye=e("path",{d:"M17.4 0H6.6C3 0 0 3.1 0 6.8v10.4C0 20.9 3 24 6.6 24h10.7c3.7 0 6.6-3.1 6.6-6.8V6.8C24 3.1 21 0 17.4 0zm-5.8 19.9c-3.9 0-7.1-3.2-7.1-7.1 0-3.9 3.2-7.1 7.1-7.1 3.9 0 7.1 3.2 7.1 7.1.1 4-3.1 7.1-7.1 7.1zm7.2-13.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5z"},null,-1),Xe=[We,Ye];function P(c,o){return n(),t("svg",Je,Xe)}const e2={render:P},o2=Object.freeze(Object.defineProperty({__proto__:null,default:e2,render:P},Symbol.toStringTag,{value:"Module"})),c2={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},n2=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm4.8 13.5-6.6 7.3c-.2.2-.4.3-.7.3-.2 0-.4-.1-.5-.2-.4-.3-.5-.8-.4-1.2l2-5.7-3-2.2c-.2-.2-.4-.4-.4-.7 0-.3.1-.6.3-.8L14.1 3c.3-.4.8-.4 1.2-.2.4.2.5.7.4 1.2l-2 5.7 3 2.2c.2.2.4.4.4.7 0 .4-.1.7-.3.9z"},null,-1),t2=[n2];function j(c,o){return n(),t("svg",c2,t2)}const r2={render:j},i2=Object.freeze(Object.defineProperty({__proto__:null,default:r2,render:j},Symbol.toStringTag,{value:"Module"})),l2={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},s2=e("path",{d:"M12 18H4V6h8c1.1 0 2-.9 2-2s-.9-2-2-2H2C.9 2 0 2.9 0 4v16c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2s-.9-2-2-2z"},null,-1),d2=e("path",{d:"m23.3 10.4-4.9-4c-.9-.7-2.1-.6-2.8.3-.7.9-.6 2.1.3 2.8l.6.4H8c-1.1 0-2 .9-2 2s.9 2 2 2h8.4l-.6.4c-.9.7-1 2-.3 2.8.4.5 1 .7 1.6.7.4 0 .9-.1 1.3-.4l4.9-4c.5-.4.7-1 .7-1.6 0-.4-.3-1-.7-1.4z"},null,-1),_2=[s2,d2];function C(c,o){return n(),t("svg",l2,_2)}const h2={render:C},a2=Object.freeze(Object.defineProperty({__proto__:null,default:h2,render:C},Symbol.toStringTag,{value:"Module"})),u2={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},v2=h1('<circle cx="2.2" cy="3" r="2.2"></circle><path d="M9.8 5.2h12C23 5.2 24 4.2 24 3S23 .8 21.8.8h-12C8.6.8 7.6 1.8 7.6 3s.9 2.2 2.2 2.2z"></path><circle cx="2.2" cy="12" r="2.2"></circle><path d="M21.8 9.8h-12c-1.2 0-2.2 1-2.2 2.2s1 2.2 2.2 2.2h12c1.2 0 2.2-1 2.2-2.2s-1-2.2-2.2-2.2z"></path><circle cx="2.2" cy="21" r="2.2"></circle><path d="M21.8 18.8h-12c-1.2 0-2.2 1-2.2 2.2s1 2.2 2.2 2.2h12c1.2 0 2.2-1 2.2-2.2s-1-2.2-2.2-2.2z"></path>',6),g2=[v2];function L(c,o){return n(),t("svg",u2,g2)}const w2={render:L},m2=Object.freeze(Object.defineProperty({__proto__:null,default:w2,render:L},Symbol.toStringTag,{value:"Module"})),p2={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},$2=e("path",{d:"M8.4 12c0-.7-.5-1.2-1.2-1.2h-6c-.7 0-1.2.5-1.2 1.2s.5 1.2 1.2 1.2h6c.7 0 1.2-.5 1.2-1.2zm14.4-1.2h-6c-.7 0-1.2.5-1.2 1.2s.5 1.2 1.2 1.2h6c.7 0 1.2-.5 1.2-1.2s-.5-1.2-1.2-1.2zM12 0c-.7 0-1.2.5-1.2 1.2v6c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2v-6C13.2.5 12.7 0 12 0zm0 15.6c-.7 0-1.2.5-1.2 1.2v6c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2v-6c0-.7-.5-1.2-1.2-1.2zm-4.2-1.1-4.2 4.2c-.6.6-.6 1.3-.1 1.8s1.2.5 1.7 0l4.2-4.2c.5-.5.5-1.2 0-1.7-.4-.5-1.2-.5-1.6-.1zm8.4-5 4.2-4.2c.6-.6.6-1.3.1-1.8s-1.2-.5-1.7 0l-4.2 4.2c-.5.5-.5 1.2 0 1.7.4.5 1.2.5 1.6.1zm-11-6C4.7 3 4 3 3.5 3.5s-.5 1.2 0 1.7l4.2 4.2c.5.5 1.2.5 1.7 0s.5-1.2 0-1.7L5.2 3.5zm11 11c-.5-.5-1.2-.5-1.7 0s-.5 1.2 0 1.7l4.2 4.2c.5.5 1.2.5 1.7 0s.5-1.2 0-1.7l-4.2-4.2z"},null,-1),f2=[$2];function H(c,o){return n(),t("svg",p2,f2)}const z2={render:H},b2=Object.freeze(Object.defineProperty({__proto__:null,default:z2,render:H},Symbol.toStringTag,{value:"Module"})),x2={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},S2=e("path",{d:"M22.5 7.5H18V6c0-1.2-.4-2.4-1-3.4C15.9 1 14 0 12 0 8.7 0 6 2.7 6 6v1.5H1.5C.7 7.5 0 8.2 0 9v13.5c0 .8.7 1.5 1.5 1.5h21c.8 0 1.5-.7 1.5-1.5V9c0-.8-.7-1.5-1.5-1.5zM9 6c0-1.7 1.3-3 3-3 1 0 1.9.5 2.5 1.3.3.5.5 1.1.5 1.7v1.5H9V6zm12 15H3V10.5h18V21z"},null,-1),M2=e("circle",{cx:"12",cy:"15",r:"1.5"},null,-1),y2=[S2,M2];function T(c,o){return n(),t("svg",x2,y2)}const O2={render:T},P2=Object.freeze(Object.defineProperty({__proto__:null,default:O2,render:T},Symbol.toStringTag,{value:"Module"})),j2={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},C2=e("path",{d:"M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-1.2 15.6H2.4V5.4h19.2v13.2z"},null,-1),L2=e("path",{d:"M20.4 9V6.6L12 10.2 3.6 6.6V9l8.4 3.6z"},null,-1),H2=[C2,L2];function B(c,o){return n(),t("svg",j2,H2)}const T2={render:B},B2=Object.freeze(Object.defineProperty({__proto__:null,default:T2,render:B},Symbol.toStringTag,{value:"Module"})),V2={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},k2=e("path",{d:"M23.4 15.6h-.6v-4.1c0-.5-.2-.9-.5-1.3l-3.7-3.7c-.2-.2-.4-.3-.6-.4-.3-.1-.5-.1-.7-.1h-1.7V4.2c0-.5-.2-.9-.5-1.3-.3-.3-.8-.5-1.3-.5h-12c-.5 0-.9.2-1.3.5-.3.4-.5.8-.5 1.3v12c0 .5.2.9.5 1.3.4.3.8.5 1.3.5h.6c0 1 .4 1.9 1.1 2.5.6.7 1.5 1.1 2.5 1.1s1.9-.4 2.5-1.1c.7-.6 1.1-1.5 1.1-2.5h4.8c0 1 .4 1.9 1.1 2.5.7.7 1.6 1.1 2.5 1.1s1.9-.4 2.5-1.1c.7-.7 1.1-1.6 1.1-2.5h1.8c.3 0 .6-.3.6-.6v-1.2c0-.3-.3-.6-.6-.6zM7.3 19.3c-.3.3-.8.5-1.3.5s-.9-.2-1.3-.5c-.3-.3-.5-.8-.5-1.3s.2-.9.5-1.3c.3-.3.8-.5 1.3-.5s.9.2 1.3.5c.3.3.5.8.5 1.3s-.2.9-.5 1.3zm4.1-8.8c0 .1 0 .2-.1.2-.1.1-.1.1-.2.1H9v2.1c0 .1 0 .2-.1.2-.1.1-.1.1-.2.1H6.9c-.1 0-.2 0-.2-.1-.1-.1-.1-.1-.1-.2v-2.1H4.5c-.1 0-.2 0-.2-.1-.1-.1-.1-.1-.1-.2V8.7c0-.1 0-.2.1-.2.1-.1.1-.1.2-.1h2.1V6.3c0-.1 0-.2.1-.2s.1-.1.2-.1h1.8c.1 0 .2 0 .2.1.1 0 .1.1.1.2v2.1h2.1c.1 0 .2 0 .2.1.1.1.1.1.1.2v1.8zm7.9 8.8c-.3.3-.8.5-1.3.5s-.9-.2-1.3-.5c-.3-.3-.5-.8-.5-1.3s.2-.9.5-1.3c.3-.3.8-.5 1.3-.5s.9.2 1.3.5c.3.3.5.8.5 1.3s-.2.9-.5 1.3zM21 12h-5.4V7.8h1.7l3.7 3.7v.5z"},null,-1),Z2=[k2];function V(c,o){return n(),t("svg",V2,Z2)}const A2={render:V},I2=Object.freeze(Object.defineProperty({__proto__:null,default:A2,render:V},Symbol.toStringTag,{value:"Module"})),F2={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},R2=e("path",{d:"M1.3 5.3H12c.7 0 1.3-.6 1.3-1.3s-.6-1.3-1.3-1.3H1.3C.6 2.7 0 3.3 0 4s.6 1.3 1.3 1.3zm0 5.4h21.3c.7 0 1.3-.6 1.3-1.3S23.4 8 22.7 8H1.3C.6 8 0 8.6 0 9.3s.6 1.4 1.3 1.4zm0 5.3h16c.7 0 1.3-.6 1.3-1.3s-.6-1.3-1.3-1.3h-16c-.7 0-1.3.6-1.3 1.3S.6 16 1.3 16zm21.4 2.7H1.3c-.7 0-1.3.6-1.3 1.3 0 .7.6 1.3 1.3 1.3h21.3c.7 0 1.3-.6 1.3-1.3.1-.7-.5-1.3-1.2-1.3z"},null,-1),q2=[R2];function k(c,o){return n(),t("svg",F2,q2)}const E2={render:k},D2=Object.freeze(Object.defineProperty({__proto__:null,default:E2,render:k},Symbol.toStringTag,{value:"Module"})),N2={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},G2=e("path",{d:"M17 9.4c-.7 0-1.3.6-1.3 1.3v2.6c0 2.2-1.8 4-4 4s-4-1.8-4-4v-2.6c0-.7-.6-1.3-1.3-1.3-.8 0-1.4.6-1.4 1.3v2.9c.1 3.6 3.1 6.5 6.7 6.5s6.6-2.9 6.7-6.5v-2.9c-.1-.7-.6-1.3-1.4-1.3z"},null,-1),Q2=e("path",{d:"M11.7 16c1.5 0 2.7-1.2 2.7-2.7V2.7c0-1.5-1.2-2.7-2.7-2.7C10.2 0 9 1.2 9 2.7v10.7c0 1.4 1.2 2.6 2.7 2.6zm0 5.3c-.7 0-1.3.6-1.3 1.3 0 .7.6 1.3 1.3 1.3.7 0 1.3-.6 1.3-1.3 0-.7-.6-1.3-1.3-1.3z"},null,-1),U2=[G2,Q2];function Z(c,o){return n(),t("svg",N2,U2)}const K2={render:Z},J2=Object.freeze(Object.defineProperty({__proto__:null,default:K2,render:Z},Symbol.toStringTag,{value:"Module"})),W2={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Y2=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"},null,-1),X2=e("path",{d:"M9.6 8.4c-.7 0-1.2.5-1.2 1.2v4.8c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2V9.6c0-.7-.5-1.2-1.2-1.2zm4.8 0c-.7 0-1.2.5-1.2 1.2v4.8c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2V9.6c0-.7-.5-1.2-1.2-1.2z"},null,-1),eo=[Y2,X2];function A(c,o){return n(),t("svg",W2,eo)}const oo={render:A},co=Object.freeze(Object.defineProperty({__proto__:null,default:oo,render:A},Symbol.toStringTag,{value:"Module"})),no={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},to=e("path",{d:"m5.069 10.711 1.243-2.383a3.97 3.97 0 0 1 1.425-1.502c2.875-1.71 3.238-1.684 3.6-1.658l1.943.13c.596.025 1.01.18 3.005 3.108a.507.507 0 0 0 .337.207l2.383.363c.647.103 1.088.7.984 1.347a1.174 1.174 0 0 1-1.347.984l-2.383-.363c-.777-.129-1.476-.544-1.917-1.191-.104-.156-.181-.285-.285-.415l-.947 4.658 1.543 2.31c.31.311.57.726.725 1.14l1.632 4.767c.26.699-.13 1.476-.829 1.71a1.316 1.316 0 0 1-.44.077c-.57 0-1.088-.363-1.295-.907l-1.632-4.766c-.026-.052-.052-.078-.078-.13L8.954 14.39a2.184 2.184 0 0 1-.596-2.02l.83-3.68a2.277 2.277 0 0 1-.26.156 1.44 1.44 0 0 0-.544.57L7.141 11.8a1.189 1.189 0 0 1-1.036.622c-.182 0-.363-.052-.544-.13a1.19 1.19 0 0 1-.492-1.58Zm7.638-6.126a2.292 2.292 0 1 0 0-4.585 2.292 2.292 0 0 0 0 4.585Z"},null,-1),ro=e("path",{d:"m8.375 16.799-3.893 3.196a1.396 1.396 0 0 0-.396 1.531c.054.145.124.26.228.386a1.33 1.33 0 0 0 1.89.18l3.894-3.197c.334-.29.632-.68.813-1.078l.097-.59-1.968-1.972-.571 1.427c-.04.042-.052.076-.094.117Z"},null,-1),io=[to,ro];function I(c,o){return n(),t("svg",no,io)}const lo={render:I},so=Object.freeze(Object.defineProperty({__proto__:null,default:lo,render:I},Symbol.toStringTag,{value:"Module"})),_o={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},ho=e("path",{d:"m9.6 16.8 6-4.8-6-4.8z"},null,-1),ao=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"},null,-1),uo=[ho,ao];function F(c,o){return n(),t("svg",_o,uo)}const vo={render:F},go=Object.freeze(Object.defineProperty({__proto__:null,default:vo,render:F},Symbol.toStringTag,{value:"Module"})),wo={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},mo=e("path",{d:"M22.9 9.4c-.7-.7-1.6-1.1-2.6-1.1V4.7c0-.6-.2-1.2-.7-1.6L17.2.7c-.4-.4-1-.7-1.6-.7H5.2c-.4 0-.7.1-1 .4s-.4.7-.4 1.1v6.8c-1 0-1.9.4-2.6 1.1C.4 10.1 0 11 0 12v6c0 .2.1.4.2.5.1.1.3.2.5.2h3v4.5c0 .2.1.4.2.5.2.2.4.3.6.3h15c.2 0 .4-.1.5-.2.1-.1.2-.3.2-.5v-4.5h3c.2 0 .4-.1.5-.2.1-.1.2-.3.2-.5v-6c.1-1.1-.3-2-1-2.7zM6 2.2h9v2.2c0 .2.1.4.2.5.1.1.3.2.5.2H18v3H6V2.2zm12 19.6H6v-3h12v3zm3.8-5.3H2.2V12c0-.4.1-.8.4-1.1.3-.3.6-.4 1.1-.4h16.5c.4 0 .8.1 1.1.4.3.3.4.6.4 1.1v4.5z"},null,-1),po=e("path",{d:"M18.8 12.4c-.3 0-.6.1-.8.3s-.3.5-.3.8.1.6.3.8.5.3.8.3.6-.1.8-.3.3-.5.3-.8-.1-.6-.3-.8-.5-.3-.8-.3z"},null,-1),$o=[mo,po];function R(c,o){return n(),t("svg",wo,$o)}const fo={render:R},zo=Object.freeze(Object.defineProperty({__proto__:null,default:fo,render:R},Symbol.toStringTag,{value:"Module"})),bo={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},xo=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"},null,-1),So=e("path",{d:"M10.8 16.8h2.4v-2.4h-2.4zm1-10.8C10 6 8.4 7.6 8.4 9.6h2.4c-.1-.7.3-1.4 1-1.4.6 0 .9.4.9.9 0 .2-.2.6-.4.8l-1.1 1.2c-.3.4-.4.6-.4.8v1.2h2.4v-.3c0-.3 0-.4.2-.6l1-1.2c.4-.5.8-1.1.8-1.9-.1-2-1.7-3.1-3.4-3.1z"},null,-1),Mo=[xo,So];function q(c,o){return n(),t("svg",bo,Mo)}const yo={render:q},Oo=Object.freeze(Object.defineProperty({__proto__:null,default:yo,render:q},Symbol.toStringTag,{value:"Module"})),Po={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},jo=e("path",{d:"m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"},null,-1),Co=[jo];function E(c,o){return n(),t("svg",Po,Co)}const Lo={render:E},Ho=Object.freeze(Object.defineProperty({__proto__:null,default:Lo,render:E},Symbol.toStringTag,{value:"Module"})),To={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Bo=e("path",{d:"m16.9 9.5-5.8-5.4S9.3 6.2 6.8 9.2c-.4.6-.3 1.3.2 1.8l1.1 1-4.5 7.5c-.1.4 0 .8.4.9l1.1.6c.4.1.8 0 .9-.4l4-6.6 1.3 1.3-4.1 7.1c-.1.4 0 .8.4.9l1.2.6c.4.1.8 0 .9-.4l4.5-8.2c.2-.5.1-1.1-.3-1.5l-4.2-4L11.2 8l3.8 3.4c.3.3.7.3 1 0l1-1c.2-.2.2-.6-.1-.9zm.4-4.9c1.1-1.1 1.1-2.8 0-3.8-1.1-1.1-2.8-1.1-3.8 0-1.1 1.1-1.1 2.8 0 3.8 1 1.1 2.8 1.1 3.8 0zm2.3 12.2-.5-3.1c-.1-.4-.4-.6-.8-.6l-1.3.2c-.4.1-.6.4-.6.8l1.4 9.4c.1.4.4.6.8.6l1.4-.2c.4-.1.6-.4.6-.8l-1-6.3z"},null,-1),Vo=[Bo];function D(c,o){return n(),t("svg",To,Vo)}const ko={render:D},Zo=Object.freeze(Object.defineProperty({__proto__:null,default:ko,render:D},Symbol.toStringTag,{value:"Module"})),Ao={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Io=e("path",{d:"M20 15.2c-1.1 0-2.1.5-2.8 1.2L8 11.7v-.8l8.9-3.6c.7.9 1.9 1.5 3.1 1.5 2.2 0 4-1.8 4-4s-1.8-4-4-4c-2 0-3.6 1.4-3.9 3.3L6.5 8c-.7-.5-1.6-.8-2.5-.8-2.2 0-4 1.8-4 4s1.8 4 4 4c.8 0 1.6-.3 2.3-.7l9.8 5c.1 2.1 1.9 3.7 4 3.7 2.2 0 4-1.8 4-4-.1-2.2-1.9-4-4.1-4z"},null,-1),Fo=[Io];function N(c,o){return n(),t("svg",Ao,Fo)}const Ro={render:N},qo=Object.freeze(Object.defineProperty({__proto__:null,default:Ro,render:N},Symbol.toStringTag,{value:"Module"})),Eo={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Do=e("path",{d:"M6.9 10.4c.4-.1.9-.1 1.3-.1.7-2.6 2.8-4.7 5.4-5.3 3.8-.8 7.5 1.6 8.4 5.4.8.3 1.4.8 2 1.4C23.9 5.3 18.6 0 12 0S0 5.4 0 12c0 1.9.5 3.7 1.2 5.3.4-.4.9-.7 1.5-1-.3-2.7 1.5-5.3 4.2-5.9z"},null,-1),No=e("path",{d:"M20.8 12.4c-.4-.1-.7-.5-.8-.9 0-.1 0-.3-.1-.4-.6-2.7-3.2-4.4-5.8-3.9-2.1.4-3.7 2.3-3.8 4.5 0 .3-.2.6-.5.8-.3.2-.6.2-.9.2-.5-.1-1-.1-1.5 0-1.7.4-2.8 2.1-2.4 3.9 0 .1 0 .2.1.3.1.3.1.6-.1.9-.2.3-.4.5-.7.5-.8.2-1.7.5-1.7 1.2C4.7 22.2 8.2 24 12 24c5.4 0 10-3.6 11.5-8.6 0-.1-.1-.2-.1-.3-.3-1.4-1.3-2.4-2.6-2.7z"},null,-1),Go=[Do,No];function G(c,o){return n(),t("svg",Eo,Go)}const Qo={render:G},Uo=Object.freeze(Object.defineProperty({__proto__:null,default:Qo,render:G},Symbol.toStringTag,{value:"Module"})),Ko={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Jo=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.5 17.3c-.2.4-.7.5-1 .2-2.8-1.7-6.4-2.1-10.5-1.2-.4.1-.8-.2-.9-.6-.1-.4.2-.8.6-.9 4.6-1 8.5-.6 11.7 1.3.2.4.3.9.1 1.2zM19 14c-.3.4-.8.6-1.3.3-3.2-2-8.1-2.6-12-1.4-.5.1-1-.1-1.2-.6-.1-.5.1-1 .6-1.2 4.4-1.3 9.8-.7 13.5 1.6.5.3.6.9.4 1.3zm.1-3.4C15.2 8.3 8.8 8.1 5.2 9.3c-.6.1-1.3-.2-1.4-.8-.2-.6.1-1.2.7-1.4 4.2-1.3 11.3-1 15.7 1.6.5.3.7 1 .4 1.5-.3.6-1 .8-1.5.4z"},null,-1),Wo=[Jo];function Q(c,o){return n(),t("svg",Ko,Wo)}const Yo={render:Q},Xo=Object.freeze(Object.defineProperty({__proto__:null,default:Yo,render:Q},Symbol.toStringTag,{value:"Module"})),ec={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},oc=e("path",{d:"m23.4 12.5-4.1-3.8 1.1-6.4c.1-.7-.2-1.5-.8-1.9-.6-.4-1.4-.5-2.1-.1L12 3.1 6.5.2C5.8-.1 5-.1 4.4.4c-.6.4-.9 1.2-.8 1.9l1 6.4-4.1 3.8c-.5.5-.7 1.3-.5 2 .2.7.9 1.2 1.6 1.3l5.8 1.4 2.8 5.6c.3.7 1 1.1 1.8 1.1s1.4-.4 1.8-1.1l2.8-5.6 5.8-1.4c.7-.1 1.4-.6 1.6-1.3.1-.7-.1-1.5-.6-2z"},null,-1),cc=[oc];function U(c,o){return n(),t("svg",ec,cc)}const nc={render:U},tc=Object.freeze(Object.defineProperty({__proto__:null,default:nc,render:U},Symbol.toStringTag,{value:"Module"})),rc={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},ic=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"},null,-1),lc=e("path",{d:"M8.4 8.4h7.2v7.2H8.4z"},null,-1),sc=[ic,lc];function K(c,o){return n(),t("svg",rc,sc)}const dc={render:K},_c=Object.freeze(Object.defineProperty({__proto__:null,default:dc,render:K},Symbol.toStringTag,{value:"Module"})),hc={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},ac=e("path",{d:"M23.3 2.2c-.4-.4-1-.7-1.6-.7H2.2c-.6 0-1.2.2-1.6.7S0 3.1 0 3.8v16.5c0 .6.2 1.2.7 1.6.4.4 1 .7 1.6.7h19.5c.6 0 1.2-.2 1.6-.7.4-.4.7-1 .7-1.6V3.8c-.1-.7-.3-1.2-.8-1.6zM7.4 20.6h-5c-.2 0-.3-.1-.4-.2-.1-.1-.2-.2-.2-.4v-3.9h5.5v4.5zm0-6.4H1.9V9.8h5.5v4.4zm0-6.3H1.9v-4c0-.2.1-.3.2-.4s.2-.2.4-.2h4.9v4.6zm14.7 12.2c0 .2-.1.3-.2.4-.1.1-.2.2-.4.2H9.2v-4.5h12.9v3.9zm0-5.9H9.2V9.8h12.9v4.4zm0-6.3H9.2V3.4h12.3c.2 0 .3.1.4.2.1.1.2.2.2.4v3.9z"},null,-1),uc=[ac];function J(c,o){return n(),t("svg",hc,uc)}const vc={render:J},gc=Object.freeze(Object.defineProperty({__proto__:null,default:vc,render:J},Symbol.toStringTag,{value:"Module"})),wc={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},mc=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20.7c-3 0-5.5-2.4-5.5-5.5 0-2.2 1.4-4.2 3.3-5V3.9c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.4c1.9.8 3.3 2.8 3.3 5 0 3-2.5 5.4-5.5 5.4z"},null,-1),pc=e("circle",{cx:"12",cy:"15.3",r:"2.2"},null,-1),$c=[mc,pc];function W(c,o){return n(),t("svg",wc,$c)}const fc={render:W},zc=Object.freeze(Object.defineProperty({__proto__:null,default:fc,render:W},Symbol.toStringTag,{value:"Module"})),bc={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},xc=e("path",{d:"M12 4.4c-.6 0-1.1.5-1.1 1.1v3.3c0 .6.5 1.1 1.1 1.1s1.1-.5 1.1-1.1V5.5c0-.6-.5-1.1-1.1-1.1zm0 9.8c-.6 0-1.1.5-1.1 1.1v4.4c0 .6.5 1.1 1.1 1.1s1.1-.5 1.1-1.1v-4.4c0-.6-.5-1.1-1.1-1.1zM0 12.7c0 4.2 2.2 8 5.5 10.2L8.8 1.1C3.8 2.6 0 7.2 0 12.7zM15.3 1.1l3.3 21.8c3.3-2.2 5.5-6 5.5-10.2-.1-5.5-3.9-10.1-8.8-11.6z"},null,-1),Sc=[xc];function Y(c,o){return n(),t("svg",bc,Sc)}const Mc={render:Y},yc=Object.freeze(Object.defineProperty({__proto__:null,default:Mc,render:Y},Symbol.toStringTag,{value:"Module"})),Oc={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Pc=e("path",{d:"M18.7 6.7H5.3c-.8 0-1.4.6-1.3 1.4l1.5 14.7c.1.7.6 1.2 1.3 1.2h10.4c.7 0 1.3-.5 1.3-1.2L20 8.1c.1-.8-.5-1.4-1.3-1.4zM16 21.3H8l-1.2-12h10.4l-1.2 12zM5.3 5.3h13.3c.8 0 1.4-.6 1.4-1.3s-.6-1.3-1.3-1.3h-5.3V1.3C13.3.6 12.7 0 12 0s-1.3.6-1.3 1.3v1.3H5.3C4.6 2.7 4 3.3 4 4s.6 1.3 1.3 1.3z"},null,-1),jc=[Pc];function X(c,o){return n(),t("svg",Oc,jc)}const Cc={render:X},Lc=Object.freeze(Object.defineProperty({__proto__:null,default:Cc,render:X},Symbol.toStringTag,{value:"Module"})),Hc={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Tc=e("path",{d:"M11 .4 3.5 7.2c-.6.6-.7 1.5-.1 2.1.5.6 1.5.7 2.1.1l5-4.5v11.6c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V4.9l5 4.5c.6.6 1.6.5 2.1-.1.3-.3.4-.6.4-1s-.2-.8-.5-1.1L13 .4c-.6-.5-1.4-.5-2 0zM4.5 24c-.8 0-1.5-.7-1.5-1.5S3.7 21 4.5 21h15c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-15z"},null,-1),Bc=[Tc];function e1(c,o){return n(),t("svg",Hc,Bc)}const Vc={render:e1},kc=Object.freeze(Object.defineProperty({__proto__:null,default:Vc,render:e1},Symbol.toStringTag,{value:"Module"})),Zc={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Ac=e("path",{d:"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 4c1.9 0 3.5 1.6 3.5 3.5S13.9 11 12 11 8.5 9.4 8.5 7.5 10.1 4 12 4zm6 12.7c0 .7-.6 1.3-1.3 1.3H7.3c-.7 0-1.3-.6-1.3-1.3v-1.1c0-2 1.6-3.6 3.6-3.6h.4c.6.3 1.3.4 2 .4s1.4-.2 2-.4h.4c2 0 3.6 1.6 3.6 3.6v1.1z"},null,-1),Ic=[Ac];function o1(c,o){return n(),t("svg",Zc,Ic)}const Fc={render:o1},Rc=Object.freeze(Object.defineProperty({__proto__:null,default:Fc,render:o1},Symbol.toStringTag,{value:"Module"})),qc={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Ec=e("path",{d:"m21.9 5.6-4.6 3.2v6.6l4.6 3.1c.9.6 2.1 0 2.1-1.1V6.6c0-1-1.2-1.6-2.1-1zM14 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2z"},null,-1),Dc=[Ec];function c1(c,o){return n(),t("svg",qc,Dc)}const Nc={render:c1},Gc=Object.freeze(Object.defineProperty({__proto__:null,default:Nc,render:c1},Symbol.toStringTag,{value:"Module"})),Qc={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Uc=e("path",{d:"M16.6 8.3c-4.4 0-7.9 2.9-7.9 6.5 0 .6.1 1.1.2 1.6h-.3c-1 0-1.9-.1-2.8-.4-2.5 1.5-3 1.3-3 1.3.3-.6.4-1.7.4-2.5C1.3 13.6 0 11.6 0 9.4c0-3.9 3.9-7 8.6-7 4.3 0 7.9 2.6 8.5 5.9h-.5zm-3.9-1.1c0-.7-.6-1.3-1.3-1.3s-1.3.6-1.3 1.3c0 .7.6 1.3 1.3 1.3s1.3-.6 1.3-1.3zm-8.2 0c0 .7.6 1.3 1.3 1.3S7 7.9 7 7.2 6.4 6 5.7 6s-1.2.5-1.2 1.2z"},null,-1),Kc=e("path",{d:"M16.7 8.9c4 0 7.3 2.6 7.3 5.9 0 1.9-1.1 3.5-2.7 4.6 0 .6.1 1.6.4 2.1 0 0-.4.2-2.5-1.1-.7.2-1.5.3-2.4.3-4 0-7.3-2.6-7.3-5.9 0-3.3 3.2-5.9 7.2-5.9zM13.2 13c0 .6.5 1 1 1 .6 0 1-.5 1-1 0-.6-.5-1-1-1-.6-.1-1 .4-1 1zm4.7 0c0 .6.5 1 1 1 .6 0 1-.5 1-1 0-.6-.5-1-1-1s-1 .4-1 1z"},null,-1),Jc=[Uc,Kc];function n1(c,o){return n(),t("svg",Qc,Jc)}const Wc={render:n1},Yc=Object.freeze(Object.defineProperty({__proto__:null,default:Wc,render:n1},Symbol.toStringTag,{value:"Module"})),Xc={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},en=e("path",{d:"M23.5 6.2c-.3-1-1.1-1.9-2.1-2.1-1.9-.5-9.4-.5-9.4-.5s-7.5 0-9.4.5C1.6 4.4.8 5.2.5 6.2 0 8.1 0 12 0 12s0 3.9.5 5.8c.3 1 1.1 1.8 2.1 2.1 1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5c1-.3 1.8-1.1 2.1-2.1.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zm-14 9.4V8.5l6.3 3.6-6.3 3.5z"},null,-1),on=[en];function t1(c,o){return n(),t("svg",Xc,on)}const cn={render:t1},nn=Object.freeze(Object.defineProperty({__proto__:null,default:cn,render:t1},Symbol.toStringTag,{value:"Module"})),tn={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},rn=e("path",{d:"m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"},null,-1),ln=e("path",{d:"M10.5 7.5V6c0-.8-.7-1.5-1.5-1.5S7.5 5.2 7.5 6v1.5H6c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h1.5V12c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5v-1.5H12c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5h-1.5z"},null,-1),sn=[rn,ln];function r1(c,o){return n(),t("svg",tn,sn)}const dn={render:r1},_n=Object.freeze(Object.defineProperty({__proto__:null,default:dn,render:r1},Symbol.toStringTag,{value:"Module"})),hn={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},an=e("path",{d:"m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"},null,-1),un=e("path",{d:"M6 7.5c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h6c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5H6z"},null,-1),vn=[an,un];function i1(c,o){return n(),t("svg",hn,vn)}const gn={render:i1},wn=Object.freeze(Object.defineProperty({__proto__:null,default:gn,render:i1},Symbol.toStringTag,{value:"Module"})),mn={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},pn=e("path",{"fill-rule":"evenodd",d:"M14 10V2c0-1.106-.894-2-2-2-1.106 0-2 .894-2 2v8H2c-1.106 0-2 .894-2 2 0 1.106.894 2 2 2h8v8c0 1.106.894 2 2 2 1.106 0 2-.894 2-2v-8h8c1.106 0 2-.894 2-2 0-1.106-.894-2-2-2h-8Z","clip-rule":"evenodd"},null,-1),$n=[pn];function l1(c,o){return n(),t("svg",mn,$n)}const fn={render:l1},zn=Object.freeze(Object.defineProperty({__proto__:null,default:fn,render:l1},Symbol.toStringTag,{value:"Module"})),bn={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},xn=e("path",{d:"M2 10h20c1.106 0 2 .894 2 2 0 1.106-.894 2-2 2H2c-1.106 0-2-.894-2-2 0-1.106.894-2 2-2Z"},null,-1),Sn=[xn];function s1(c,o){return n(),t("svg",bn,Sn)}const Mn={render:s1},yn=Object.freeze(Object.defineProperty({__proto__:null,default:Mn,render:s1},Symbol.toStringTag,{value:"Module"})),On={xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24"},Pn=e("path",{d:"m11.999 5.146-.01-.796a.587.587 0 0 1 .598-.6l6.959.088c.337.004.612.28.615.615l.089 6.969a.587.587 0 0 1-.6.6l-.794-.01a.628.628 0 0 1-.615-.63l.048-4.216-3.626 3.63a.606.606 0 0 1-.86-.01l-.58-.582a.608.608 0 0 1-.01-.86l3.626-3.63-4.211.047a.623.623 0 0 1-.63-.615Zm.002 13.708.01.796a.587.587 0 0 1-.598.6l-6.959-.088a.625.625 0 0 1-.615-.615l-.089-6.969a.587.587 0 0 1 .6-.6l.794.01c.34.005.618.29.615.63l-.048 4.216 3.626-3.63a.606.606 0 0 1 .86.01l.58.582a.608.608 0 0 1 .01.86l-3.626 3.63 4.211-.047a.623.623 0 0 1 .63.615Z"},null,-1),jn=[Pn];function d1(c,o){return n(),t("svg",On,jn)}const Cn={render:d1},Ln=Object.freeze(Object.defineProperty({__proto__:null,default:Cn,render:d1},Symbol.toStringTag,{value:"Module"})),Hn={xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16"},Tn=e("path",{"fill-rule":"evenodd",d:"M9.985 16c-.584 0-.992-.461-.992-1.143L9 11H7.015l-.008 3.857c-.004.676-.41 1.143-.992 1.143H3.037c-.582 0-.988-.467-.993-1.143V9.778l-.926-.04c-.437 0-.902-.123-1.06-.595C-.1 8.668.082 7.94.404 7.597L7.255.322c.404-.43 1.022-.43 1.427-.001l6.912 7.317c.326.343.507 1.03.347 1.505-.16.472-.557.635-.993.635h-.992v5.08c0 .68-.408 1.142-.993 1.142","clip-rule":"evenodd"},null,-1),Bn=[Tn];function _1(c,o){return n(),t("svg",Hn,Bn)}const Vn={render:_1},kn=Object.freeze(Object.defineProperty({__proto__:null,default:Vn,render:_1},Symbol.toStringTag,{value:"Module"}));export{Fn as R,Rn as u};
diff --git a/_nuxt/useDocsNavigation.w75JuMbu.js b/_nuxt/useDocsNavigation.a2cLzZKV.js
similarity index 88%
rename from _nuxt/useDocsNavigation.w75JuMbu.js
rename to _nuxt/useDocsNavigation.a2cLzZKV.js
index 202c9391a0..7a8013a987 100644
--- a/_nuxt/useDocsNavigation.w75JuMbu.js
+++ b/_nuxt/useDocsNavigation.a2cLzZKV.js
@@ -1,4 +1,4 @@
-import{_ as g}from"./RplLink.vue.TWUjSovo.js";import{u as h}from"./useRippleEvent.DMJaxZxB.js";import{d as m,b as c,G as _,w,c as p,f,t as R,e as x,n as k,F as B,W as E,g as D,m as V,aD as b,q as L}from"./entry.49ZHHvLB.js";import{u as $}from"./asyncData.6xpne1x0.js";const A={key:0,class:"rpl-icon--child"},F=m({__name:"RplVerticalNavLink",props:{text:{},href:{},active:{type:Boolean,default:!1},showChildIcon:{type:Boolean,default:!1}},emits:["itemClick"],setup(a,{emit:l}){const t=a,o=l,{emitRplEvent:n}=h("rpl-vertical-nav",o),r=()=>{n("itemClick",{action:"click",text:t.text,value:t.href})};return(e,i)=>{const u=g;return c(),_(u,{url:e.href,class:k({"rpl-vertical-nav__item":!0,"rpl-vertical-nav__item--active":e.active,"rpl-vertical-nav__link":!0,"rpl-u-focusable-block":!0}),onClick:r},{default:w(()=>[e.showChildIcon?(c(),p("span",A)):f("",!0),x("span",null,R(e.text),1)]),_:1},8,["url","class"])}}}),N=m({__name:"RplVerticalNavChildList",props:{items:{},level:{},isExpanded:{type:Boolean}},emits:["itemClick"],setup(a,{emit:l}){const t=a,o=l,{emitRplEvent:n}=h("rpl-vertical-nav",o),r=e=>{n("itemClick",{index:t.level,...e})};return(e,i)=>{const u=N;return c(),p("ul",{class:k(`
+import{_ as g}from"./RplLink.vue.3IdzOFUB.js";import{u as h}from"./useRippleEvent.Eg1owuZM.js";import{d as m,b as c,G as _,w,c as p,f,t as R,e as x,n as k,F as B,W as E,g as D,m as V,aD as b,q as L}from"./entry.Do8xnxHS.js";import{u as $}from"./asyncData.mgwg8A3s.js";const A={key:0,class:"rpl-icon--child"},F=m({__name:"RplVerticalNavLink",props:{text:{},href:{},active:{type:Boolean,default:!1},showChildIcon:{type:Boolean,default:!1}},emits:["itemClick"],setup(a,{emit:l}){const t=a,o=l,{emitRplEvent:n}=h("rpl-vertical-nav",o),r=()=>{n("itemClick",{action:"click",text:t.text,value:t.href})};return(e,i)=>{const u=g;return c(),_(u,{url:e.href,class:k({"rpl-vertical-nav__item":!0,"rpl-vertical-nav__item--active":e.active,"rpl-vertical-nav__link":!0,"rpl-u-focusable-block":!0}),onClick:r},{default:w(()=>[e.showChildIcon?(c(),p("span",A)):f("",!0),x("span",null,R(e.text),1)]),_:1},8,["url","class"])}}}),N=m({__name:"RplVerticalNavChildList",props:{items:{},level:{},isExpanded:{type:Boolean}},emits:["itemClick"],setup(a,{emit:l}){const t=a,o=l,{emitRplEvent:n}=h("rpl-vertical-nav",o),r=e=>{n("itemClick",{index:t.level,...e})};return(e,i)=>{const u=N;return c(),p("ul",{class:k(`
       rpl-vertical-nav__list
       rpl-vertical-nav__list--level-${t.level}
       rpl-type-p-small
diff --git a/_nuxt/useRippleEvent.DMJaxZxB.js b/_nuxt/useRippleEvent.Eg1owuZM.js
similarity index 78%
rename from _nuxt/useRippleEvent.DMJaxZxB.js
rename to _nuxt/useRippleEvent.Eg1owuZM.js
index 3a0a7e10c2..4ad59080e0 100644
--- a/_nuxt/useRippleEvent.DMJaxZxB.js
+++ b/_nuxt/useRippleEvent.Eg1owuZM.js
@@ -1 +1 @@
-import{H as f}from"./entry.49ZHHvLB.js";function v(s,c){const i=f("$rplEvent"),r=f("eventContext",{});return{emitRplEvent:(n,t={},e={})=>{r&&(t={...r,...t}),c&&c(n,t),e!=null&&e.global&&(i==null||i.emit(`${s}/${n}`,t))},withOptions:(n,t)=>Object.keys(n).filter(e=>t.includes(e)&&n[e])}}export{v as u};
+import{H as f}from"./entry.Do8xnxHS.js";function v(s,c){const i=f("$rplEvent"),r=f("eventContext",{});return{emitRplEvent:(n,t={},e={})=>{r&&(t={...r,...t}),c&&c(n,t),e!=null&&e.global&&(i==null||i.emit(`${s}/${n}`,t))},withOptions:(n,t)=>Object.keys(n).filter(e=>t.includes(e)&&n[e])}}export{v as u};
diff --git a/_nuxt/useStudio.ur6OYxmR.js b/_nuxt/useStudio.1zk0psWL.js
similarity index 98%
rename from _nuxt/useStudio.ur6OYxmR.js
rename to _nuxt/useStudio.1zk0psWL.js
index 66e7a2bb71..2fe9307076 100644
--- a/_nuxt/useStudio.ur6OYxmR.js
+++ b/_nuxt/useStudio.1zk0psWL.js
@@ -1,4 +1,4 @@
-import{r as Y}from"./asyncData.6xpne1x0.js";import{d as j,u as V,r as $,o as ee,_ as te,a as ne,b as q,c as L,n as oe,F as ie,e as w,f as E,g as O,w as J,T as B,t as se,h as D,p as ae,i as re,j as W,k as de,l as z,q as ce,m as U,s as M,v as Z,x as H,y as le,z as pe,A as ue,B as F}from"./entry.49ZHHvLB.js";import{_ as fe}from"./_plugin-vue_export-helper.x3n3nnut.js";const b=i=>(ae("data-v-d2c7d0ba"),i=i(),re(),i),ve=b(()=>w("svg",{viewBox:"0 0 90 90",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[w("path",{d:"M50.0016 71.0999h29.2561c.9293.0001 1.8422-.241 2.6469-.6992.8047-.4582 1.4729-1.1173 1.9373-1.9109.4645-.7936.7088-1.6939.7083-2.6102-.0004-.9162-.2455-1.8163-.7106-2.6095L64.192 29.713c-.4644-.7934-1.1325-1.4523-1.937-1.9105-.8046-.4581-1.7173-.6993-2.6463-.6993-.9291 0-1.8418.2412-2.6463.6993-.8046.4582-1.4726 1.1171-1.937 1.9105l-5.0238 8.5861-9.8224-16.7898c-.4648-.7934-1.1332-1.4522-1.938-1.9102-.8047-.4581-1.7176-.6992-2.6468-.6992-.9292 0-1.842.2411-2.6468.6992-.8048.458-1.4731 1.1168-1.9379 1.9102L6.56062 63.2701c-.46512.7932-.71021 1.6933-.71061 2.6095-.00041.9163.24389 1.8166.70831 2.6102.46443.7936 1.1326 1.4527 1.93732 1.9109.80473.4582 1.71766.6993 2.64686.6992h18.3646c7.2763 0 12.6422-3.1516 16.3345-9.3002l8.9642-15.3081 4.8015-8.1925 14.4099 24.6083H54.8058l-4.8042 8.1925ZM29.2077 62.899l-12.8161-.0028L35.603 30.0869l9.5857 16.4047-6.418 10.9645c-2.4521 3.9894-5.2377 5.4429-9.563 5.4429Z",fill:"currentColor"})],-1)),we=b(()=>w("span",null,"Preview mode enabled",-1)),he={key:0},me=b(()=>w("div",{id:"__preview_background"},null,-1)),ye=b(()=>w("svg",{id:"__preview_loading_icon",width:"32",height:"32",viewBox:"0 0 24 24"},[w("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15"})],-1)),_e=b(()=>w("p",null,"Initializing the preview...",-1)),ge={key:0},ke=b(()=>w("div",{id:"__preview_background"},null,-1)),Ce={id:"__preview_loader"},Ie=j({__name:"ContentPreviewMode",props:{previewToken:{type:String,required:!0},apiURL:{type:String,required:!0},syncPreview:{type:Function,required:!0},requestPreviewSyncAPI:{type:Function,required:!0}},setup(i){const s=i,c=["__nuxt_preview","__preview_enabled"],f=W(),y=V(),r=$(!0),g=$(!1),o=$(!1),l=$("");let a;const m=async()=>{D("previewToken").value="",window.sessionStorage.removeItem("previewToken"),await y.replace({query:{preview:void 0}}),window.location.reload()},A=async T=>{const h=await s.syncPreview(T);if(o.value!==!0){if(!h){setTimeout(()=>A(T),1e3);return}D("previewToken").value&&(o.value=!0,await y.replace({query:{}}),f.callHook("nuxt-studio:preview:ready"),window.parent&&window.self!==window.parent&&a.disconnect())}};return ee(async()=>{a=(await te(()=>import("./index.ktinZ6MN.js"),__vite__mapDeps([]),import.meta.url)).connect(`${s.apiURL}/preview`,{transports:["websocket","polling"],auth:{token:s.previewToken}});let h;a.on("connect",()=>{h=setTimeout(()=>{o.value||(h=setTimeout(()=>{l.value="Preview sync timed out",o.value=!1},3e4),a.emit("draft:requestSync"))},3e4)});const I=()=>{h&&(clearTimeout(h),h=null)};a.on("draft:sync",async P=>{if(I(),!P){try{a.once("draft:ready",()=>{a.emit("draft:requestSync")}),await s.requestPreviewSyncAPI()}catch(R){switch(I(),R.response.status){case 404:l.value="Preview draft not found",o.value=!1;break;default:l.value="An error occurred while syncing preview",o.value=!1}}return}A(P)}),a.on("draft:unauthorized",()=>{I(),l.value="Unauthorized preview token",o.value=!1}),a.on("disconnect",()=>{I()}),document.body.classList.add(...c),a.on("draft:update",P=>{g.value=!0,s.syncPreview(P),g.value=!1})}),ne(()=>{document.body.classList.remove(...c)}),(T,h)=>(q(),L("div",null,[r.value?(q(),L("div",{key:0,id:"__nuxt_preview",class:oe({__preview_ready:o.value,__preview_refreshing:g.value})},[o.value?(q(),L(ie,{key:0},[ve,we,w("button",{onClick:m}," Close ")],64)):E("",!0)],2)):E("",!0),O(B,{name:"preview-loading"},{default:J(()=>[r.value&&!o.value&&!l.value?(q(),L("div",he,[me,w("div",{id:"__preview_loader"},[ye,_e,w("button",{onClick:m}," Cancel ")])])):E("",!0)]),_:1}),O(B,{name:"preview-loading"},{default:J(()=>[l.value?(q(),L("div",ge,[ke,w("div",Ce,[w("p",null,se(l.value),1),w("button",{onClick:m}," Exit preview ")])])):E("",!0)]),_:1})]))}}),Pe=fe(Ie,[["__scopeId","data-v-d2c7d0ba"]]),Se=(i=[],s,c)=>{const f=[...s||[]],y=[...c||[]],r=JSON.parse(JSON.stringify(i));for(const o of f)if(o.oldPath)if(y.splice(y.findIndex(a=>a.path===o.oldPath),1),f.find(a=>a.path===o.oldPath))r.push({path:o.path,parsed:o.parsed});else{const a=r.find(m=>m.path===o.oldPath);a&&(a.path=o.path,o.parsed?a.parsed=o.parsed:o.pathMeta&&["_file","_path","_id","_locale"].forEach(m=>{a.parsed[m]=o.pathMeta[m]}))}else if(o.new)r.push({path:o.path,parsed:o.parsed});else{const l=r.find(a=>a.path===o.path);l&&Object.assign(l,{path:o.path,parsed:o.parsed})}for(const o of y)r.splice(r.findIndex(l=>l.path===o.path),1);const g=new Intl.Collator(void 0,{numeric:!0});return r.sort((o,l)=>g.compare(o.path,l.path)),r},C={appConfig:"app.config.ts",tokensConfig:"tokens.config.ts"},Te=i=>{let s;return(...c)=>(s||(s=i()),s)};function G(i,s){for(const c in i){const f=s[c];c in s||delete i[c],f!==null&&typeof f=="object"&&G(i[c],s[c])}}function Q(i,s){for(const c in s){const f=s[c];f!==null&&typeof f=="object"?(i[c]=i[c]||{},Q(i[c],f)):i[c]=f}}const xe=Te(()=>JSON.parse(JSON.stringify(Z()))),$e=()=>{const i=W(),{studio:s,content:c}=de().public,f=xe();let y;const r=z("studio-client-db",()=>null),g=z("studio-preview-db-files",()=>[]);r.value||(i.hook("content:storage",e=>{r.value=e}),ce("/non-existing-path").findOne());const o=async(e,n,d=!0)=>{const u=window.sessionStorage.getItem("previewToken"),v=await e.getKeys(`${u}:`);await Promise.all(v.map(p=>e.removeItem(p)));const t=new Set(n.map(p=>p.parsed._id.split(":").shift()));await e.setItem(`${u}$`,JSON.stringify({ignoreSources:Array.from(t)})),await Promise.all(n.map(p=>e.setItem(`${u}:${p.parsed._id}`,JSON.stringify(p.parsed))))},l=e=>{const n=M(i,Z);Q(n,H(e,f)),e||G(n,f)},a=e=>{var d,u,v,t;const n=(t=(v=(u=(d=i==null?void 0:i.vueApp)==null?void 0:d._context)==null?void 0:u.config)==null?void 0:v.globalProperties)==null?void 0:t.$pinceauTheme;!n||!(n!=null&&n.updateTheme)||(y||(y=JSON.parse(JSON.stringify((n==null?void 0:n.theme.value)||{}))),M(i,n.updateTheme,[H(e,y)]))},m=async e=>{if(g.value=e.files=e.files||g.value||[],!r.value)return!1;const n=Se(e.files,e.additions,e.deletions),d=n.filter(t=>![C.appConfig,C.tokensConfig].includes(t.path));await o(r.value,d,(e.files||[]).length!==0);const u=n.find(t=>t.path===C.appConfig);l(u==null?void 0:u.parsed);const v=n.find(t=>t.path===C.tokensConfig);return a(v==null?void 0:v.parsed),R(),!0},A=async()=>{const e=window.sessionStorage.getItem("previewToken");await $fetch("api/projects/preview/sync",{baseURL:s==null?void 0:s.apiURL,method:"POST",params:{token:e}})},T=()=>{const e=window.sessionStorage.getItem("previewToken"),n=document.createElement("div");n.id="__nuxt_preview_wrapper",document.body.appendChild(n),le(Pe,{previewToken:e,apiURL:s==null?void 0:s.apiURL,syncPreview:m,requestPreviewSyncAPI:A}).mount(n)},h=async e=>{var u,v,t;const n=window.sessionStorage.getItem("previewToken");if(!e)return null;e=e.replace(/\/$/,"");let d=await((u=r.value)==null?void 0:u.getItem(`${n}:${e}`));return d||(d=await((v=r.value)==null?void 0:v.getItem(`cached:${e}`))),d||(d=d=await((t=r.value)==null?void 0:t.getItem(e))),d},I=e=>{var d;const n=window.sessionStorage.getItem("previewToken");r.value&&r.value.setItem(`${n}:${(d=e.parsed)==null?void 0:d._id}`,JSON.stringify(e.parsed))},P=async e=>{var d;const n=window.sessionStorage.getItem("previewToken");await((d=r.value)==null?void 0:d.removeItem(`${n}:${e}`))},R=async()=>{if(c!=null&&c.documentDriven){const{pages:e}=M(i,pe);for(const n in e.value)e.value[n]&&(e.value[n]=await h(e.value[n]._id))}ue(()=>{M(i,Y)})};return{apiURL:s==null?void 0:s.apiURL,contentStorage:r,syncPreviewFiles:o,syncPreviewAppConfig:l,syncPreviewTokensConfig:a,requestPreviewSynchronization:A,findContentWithId:h,updateContent:I,removeContentWithId:P,requestRerender:R,mountPreviewUI:T,initiateIframeCommunication:X};function X(){if(!window.parent||window.self===window.parent)return;const e=V(),n=U(),d=$(""),u=t=>({path:t.path,query:F(t.query),params:F(t.params),fullPath:t.fullPath,meta:F(t.meta)});window.addEventListener("keydown",t=>{(t.metaKey||t.ctrlKey||t.altKey||t.shiftKey)&&window.parent.postMessage({type:"nuxt-studio:preview:keydown",payload:{key:t.key,metaKey:t.metaKey,ctrlKey:t.ctrlKey,shiftKey:t.shiftKey,altKey:t.altKey}},"*")}),window.addEventListener("message",async t=>{if(!["https://nuxt.studio","https://dev.nuxt.studio"].includes(t.origin))return;const{type:p,payload:x={}}=t.data||{};switch(p){case"nuxt-studio:editor:file-selected":{const _=await h(x.path);_&&(_._partial||_._path!==U().path&&(d.value=_._path,e.push(_._path)));break}case"nuxt-studio:editor:file-changed":{const{additions:_=[],deletions:N=[]}=x;for(const k of _)await I(k);for(const k of N)await P(k.path);R();break}case"nuxt-studio:preview:sync":{m(x);break}case"nuxt-studio:config:file-changed":{const{additions:_=[],deletions:N=[]}=x,k=_.find(S=>S.path===C.appConfig);k&&l(k==null?void 0:k.parsed),N.find(S=>S.path===C.appConfig)&&l(void 0);const K=_.find(S=>S.path===C.tokensConfig);K&&a(K==null?void 0:K.parsed),N.find(S=>S.path===C.tokensConfig)&&a(void 0);break}}}),i.hook("page:finish",()=>{v()}),i.hook("content:document-driven:finish",({route:t,page:p})=>{t.meta.studio_page_contentId=p==null?void 0:p._id}),i.hook("nuxt-studio:preview:ready",()=>{window.parent.postMessage({type:"nuxt-studio:preview:ready",payload:u(U())},"*"),setTimeout(()=>{v()},100)});function v(){const t=Array.from(window.document.querySelectorAll("[data-content-id]")).map(x=>x.getAttribute("data-content-id")),p=Array.from(new Set([n.meta.studio_page_contentId,...t])).filter(Boolean);if(d.value===p[0]){d.value="";return}window.openContentInStudioEditor(p,{navigate:!0,pageContentId:n.meta.studio_page_contentId})}window.openContentInStudioEditor=(t,p={})=>{window.parent.postMessage({type:"nuxt-studio:preview:navigate",payload:{...u(n),contentIds:t,...p}},"*")}}};export{$e as useStudio};
+import{r as Y}from"./asyncData.mgwg8A3s.js";import{d as j,u as V,r as $,o as ee,_ as te,a as ne,b as q,c as L,n as oe,F as ie,e as w,f as E,g as O,w as J,T as B,t as se,h as D,p as ae,i as re,j as W,k as de,l as z,q as ce,m as U,s as M,v as Z,x as H,y as le,z as pe,A as ue,B as F}from"./entry.Do8xnxHS.js";import{_ as fe}from"./_plugin-vue_export-helper.x3n3nnut.js";const b=i=>(ae("data-v-d2c7d0ba"),i=i(),re(),i),ve=b(()=>w("svg",{viewBox:"0 0 90 90",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[w("path",{d:"M50.0016 71.0999h29.2561c.9293.0001 1.8422-.241 2.6469-.6992.8047-.4582 1.4729-1.1173 1.9373-1.9109.4645-.7936.7088-1.6939.7083-2.6102-.0004-.9162-.2455-1.8163-.7106-2.6095L64.192 29.713c-.4644-.7934-1.1325-1.4523-1.937-1.9105-.8046-.4581-1.7173-.6993-2.6463-.6993-.9291 0-1.8418.2412-2.6463.6993-.8046.4582-1.4726 1.1171-1.937 1.9105l-5.0238 8.5861-9.8224-16.7898c-.4648-.7934-1.1332-1.4522-1.938-1.9102-.8047-.4581-1.7176-.6992-2.6468-.6992-.9292 0-1.842.2411-2.6468.6992-.8048.458-1.4731 1.1168-1.9379 1.9102L6.56062 63.2701c-.46512.7932-.71021 1.6933-.71061 2.6095-.00041.9163.24389 1.8166.70831 2.6102.46443.7936 1.1326 1.4527 1.93732 1.9109.80473.4582 1.71766.6993 2.64686.6992h18.3646c7.2763 0 12.6422-3.1516 16.3345-9.3002l8.9642-15.3081 4.8015-8.1925 14.4099 24.6083H54.8058l-4.8042 8.1925ZM29.2077 62.899l-12.8161-.0028L35.603 30.0869l9.5857 16.4047-6.418 10.9645c-2.4521 3.9894-5.2377 5.4429-9.563 5.4429Z",fill:"currentColor"})],-1)),we=b(()=>w("span",null,"Preview mode enabled",-1)),he={key:0},me=b(()=>w("div",{id:"__preview_background"},null,-1)),ye=b(()=>w("svg",{id:"__preview_loading_icon",width:"32",height:"32",viewBox:"0 0 24 24"},[w("path",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M4 4v5h.582m15.356 2A8.001 8.001 0 0 0 4.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 0 1-15.357-2m15.357 2H15"})],-1)),_e=b(()=>w("p",null,"Initializing the preview...",-1)),ge={key:0},ke=b(()=>w("div",{id:"__preview_background"},null,-1)),Ce={id:"__preview_loader"},Ie=j({__name:"ContentPreviewMode",props:{previewToken:{type:String,required:!0},apiURL:{type:String,required:!0},syncPreview:{type:Function,required:!0},requestPreviewSyncAPI:{type:Function,required:!0}},setup(i){const s=i,c=["__nuxt_preview","__preview_enabled"],f=W(),y=V(),r=$(!0),g=$(!1),o=$(!1),l=$("");let a;const m=async()=>{D("previewToken").value="",window.sessionStorage.removeItem("previewToken"),await y.replace({query:{preview:void 0}}),window.location.reload()},A=async T=>{const h=await s.syncPreview(T);if(o.value!==!0){if(!h){setTimeout(()=>A(T),1e3);return}D("previewToken").value&&(o.value=!0,await y.replace({query:{}}),f.callHook("nuxt-studio:preview:ready"),window.parent&&window.self!==window.parent&&a.disconnect())}};return ee(async()=>{a=(await te(()=>import("./index.ktinZ6MN.js"),__vite__mapDeps([]),import.meta.url)).connect(`${s.apiURL}/preview`,{transports:["websocket","polling"],auth:{token:s.previewToken}});let h;a.on("connect",()=>{h=setTimeout(()=>{o.value||(h=setTimeout(()=>{l.value="Preview sync timed out",o.value=!1},3e4),a.emit("draft:requestSync"))},3e4)});const I=()=>{h&&(clearTimeout(h),h=null)};a.on("draft:sync",async P=>{if(I(),!P){try{a.once("draft:ready",()=>{a.emit("draft:requestSync")}),await s.requestPreviewSyncAPI()}catch(R){switch(I(),R.response.status){case 404:l.value="Preview draft not found",o.value=!1;break;default:l.value="An error occurred while syncing preview",o.value=!1}}return}A(P)}),a.on("draft:unauthorized",()=>{I(),l.value="Unauthorized preview token",o.value=!1}),a.on("disconnect",()=>{I()}),document.body.classList.add(...c),a.on("draft:update",P=>{g.value=!0,s.syncPreview(P),g.value=!1})}),ne(()=>{document.body.classList.remove(...c)}),(T,h)=>(q(),L("div",null,[r.value?(q(),L("div",{key:0,id:"__nuxt_preview",class:oe({__preview_ready:o.value,__preview_refreshing:g.value})},[o.value?(q(),L(ie,{key:0},[ve,we,w("button",{onClick:m}," Close ")],64)):E("",!0)],2)):E("",!0),O(B,{name:"preview-loading"},{default:J(()=>[r.value&&!o.value&&!l.value?(q(),L("div",he,[me,w("div",{id:"__preview_loader"},[ye,_e,w("button",{onClick:m}," Cancel ")])])):E("",!0)]),_:1}),O(B,{name:"preview-loading"},{default:J(()=>[l.value?(q(),L("div",ge,[ke,w("div",Ce,[w("p",null,se(l.value),1),w("button",{onClick:m}," Exit preview ")])])):E("",!0)]),_:1})]))}}),Pe=fe(Ie,[["__scopeId","data-v-d2c7d0ba"]]),Se=(i=[],s,c)=>{const f=[...s||[]],y=[...c||[]],r=JSON.parse(JSON.stringify(i));for(const o of f)if(o.oldPath)if(y.splice(y.findIndex(a=>a.path===o.oldPath),1),f.find(a=>a.path===o.oldPath))r.push({path:o.path,parsed:o.parsed});else{const a=r.find(m=>m.path===o.oldPath);a&&(a.path=o.path,o.parsed?a.parsed=o.parsed:o.pathMeta&&["_file","_path","_id","_locale"].forEach(m=>{a.parsed[m]=o.pathMeta[m]}))}else if(o.new)r.push({path:o.path,parsed:o.parsed});else{const l=r.find(a=>a.path===o.path);l&&Object.assign(l,{path:o.path,parsed:o.parsed})}for(const o of y)r.splice(r.findIndex(l=>l.path===o.path),1);const g=new Intl.Collator(void 0,{numeric:!0});return r.sort((o,l)=>g.compare(o.path,l.path)),r},C={appConfig:"app.config.ts",tokensConfig:"tokens.config.ts"},Te=i=>{let s;return(...c)=>(s||(s=i()),s)};function G(i,s){for(const c in i){const f=s[c];c in s||delete i[c],f!==null&&typeof f=="object"&&G(i[c],s[c])}}function Q(i,s){for(const c in s){const f=s[c];f!==null&&typeof f=="object"?(i[c]=i[c]||{},Q(i[c],f)):i[c]=f}}const xe=Te(()=>JSON.parse(JSON.stringify(Z()))),$e=()=>{const i=W(),{studio:s,content:c}=de().public,f=xe();let y;const r=z("studio-client-db",()=>null),g=z("studio-preview-db-files",()=>[]);r.value||(i.hook("content:storage",e=>{r.value=e}),ce("/non-existing-path").findOne());const o=async(e,n,d=!0)=>{const u=window.sessionStorage.getItem("previewToken"),v=await e.getKeys(`${u}:`);await Promise.all(v.map(p=>e.removeItem(p)));const t=new Set(n.map(p=>p.parsed._id.split(":").shift()));await e.setItem(`${u}$`,JSON.stringify({ignoreSources:Array.from(t)})),await Promise.all(n.map(p=>e.setItem(`${u}:${p.parsed._id}`,JSON.stringify(p.parsed))))},l=e=>{const n=M(i,Z);Q(n,H(e,f)),e||G(n,f)},a=e=>{var d,u,v,t;const n=(t=(v=(u=(d=i==null?void 0:i.vueApp)==null?void 0:d._context)==null?void 0:u.config)==null?void 0:v.globalProperties)==null?void 0:t.$pinceauTheme;!n||!(n!=null&&n.updateTheme)||(y||(y=JSON.parse(JSON.stringify((n==null?void 0:n.theme.value)||{}))),M(i,n.updateTheme,[H(e,y)]))},m=async e=>{if(g.value=e.files=e.files||g.value||[],!r.value)return!1;const n=Se(e.files,e.additions,e.deletions),d=n.filter(t=>![C.appConfig,C.tokensConfig].includes(t.path));await o(r.value,d,(e.files||[]).length!==0);const u=n.find(t=>t.path===C.appConfig);l(u==null?void 0:u.parsed);const v=n.find(t=>t.path===C.tokensConfig);return a(v==null?void 0:v.parsed),R(),!0},A=async()=>{const e=window.sessionStorage.getItem("previewToken");await $fetch("api/projects/preview/sync",{baseURL:s==null?void 0:s.apiURL,method:"POST",params:{token:e}})},T=()=>{const e=window.sessionStorage.getItem("previewToken"),n=document.createElement("div");n.id="__nuxt_preview_wrapper",document.body.appendChild(n),le(Pe,{previewToken:e,apiURL:s==null?void 0:s.apiURL,syncPreview:m,requestPreviewSyncAPI:A}).mount(n)},h=async e=>{var u,v,t;const n=window.sessionStorage.getItem("previewToken");if(!e)return null;e=e.replace(/\/$/,"");let d=await((u=r.value)==null?void 0:u.getItem(`${n}:${e}`));return d||(d=await((v=r.value)==null?void 0:v.getItem(`cached:${e}`))),d||(d=d=await((t=r.value)==null?void 0:t.getItem(e))),d},I=e=>{var d;const n=window.sessionStorage.getItem("previewToken");r.value&&r.value.setItem(`${n}:${(d=e.parsed)==null?void 0:d._id}`,JSON.stringify(e.parsed))},P=async e=>{var d;const n=window.sessionStorage.getItem("previewToken");await((d=r.value)==null?void 0:d.removeItem(`${n}:${e}`))},R=async()=>{if(c!=null&&c.documentDriven){const{pages:e}=M(i,pe);for(const n in e.value)e.value[n]&&(e.value[n]=await h(e.value[n]._id))}ue(()=>{M(i,Y)})};return{apiURL:s==null?void 0:s.apiURL,contentStorage:r,syncPreviewFiles:o,syncPreviewAppConfig:l,syncPreviewTokensConfig:a,requestPreviewSynchronization:A,findContentWithId:h,updateContent:I,removeContentWithId:P,requestRerender:R,mountPreviewUI:T,initiateIframeCommunication:X};function X(){if(!window.parent||window.self===window.parent)return;const e=V(),n=U(),d=$(""),u=t=>({path:t.path,query:F(t.query),params:F(t.params),fullPath:t.fullPath,meta:F(t.meta)});window.addEventListener("keydown",t=>{(t.metaKey||t.ctrlKey||t.altKey||t.shiftKey)&&window.parent.postMessage({type:"nuxt-studio:preview:keydown",payload:{key:t.key,metaKey:t.metaKey,ctrlKey:t.ctrlKey,shiftKey:t.shiftKey,altKey:t.altKey}},"*")}),window.addEventListener("message",async t=>{if(!["https://nuxt.studio","https://dev.nuxt.studio"].includes(t.origin))return;const{type:p,payload:x={}}=t.data||{};switch(p){case"nuxt-studio:editor:file-selected":{const _=await h(x.path);_&&(_._partial||_._path!==U().path&&(d.value=_._path,e.push(_._path)));break}case"nuxt-studio:editor:file-changed":{const{additions:_=[],deletions:N=[]}=x;for(const k of _)await I(k);for(const k of N)await P(k.path);R();break}case"nuxt-studio:preview:sync":{m(x);break}case"nuxt-studio:config:file-changed":{const{additions:_=[],deletions:N=[]}=x,k=_.find(S=>S.path===C.appConfig);k&&l(k==null?void 0:k.parsed),N.find(S=>S.path===C.appConfig)&&l(void 0);const K=_.find(S=>S.path===C.tokensConfig);K&&a(K==null?void 0:K.parsed),N.find(S=>S.path===C.tokensConfig)&&a(void 0);break}}}),i.hook("page:finish",()=>{v()}),i.hook("content:document-driven:finish",({route:t,page:p})=>{t.meta.studio_page_contentId=p==null?void 0:p._id}),i.hook("nuxt-studio:preview:ready",()=>{window.parent.postMessage({type:"nuxt-studio:preview:ready",payload:u(U())},"*"),setTimeout(()=>{v()},100)});function v(){const t=Array.from(window.document.querySelectorAll("[data-content-id]")).map(x=>x.getAttribute("data-content-id")),p=Array.from(new Set([n.meta.studio_page_contentId,...t])).filter(Boolean);if(d.value===p[0]){d.value="";return}window.openContentInStudioEditor(p,{navigate:!0,pageContentId:n.meta.studio_page_contentId})}window.openContentInStudioEditor=(t,p={})=>{window.parent.postMessage({type:"nuxt-studio:preview:navigate",payload:{...u(n),contentIds:t,...p}},"*")}}};export{$e as useStudio};
 function __vite__mapDeps(indexes) {
   if (!__vite__mapDeps.viteFileDeps) {
     __vite__mapDeps.viteFileDeps = []
diff --git a/_payload.json b/_payload.json
index 067bdbf7a4..87d11b5b0e 100644
--- a/_payload.json
+++ b/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":3},["Reactive",2],{},1714695147306]
\ No newline at end of file
+[{"data":1,"prerenderedAt":3},["Reactive",2],{},1714695645630]
\ No newline at end of file
diff --git a/api/_content/cache.1714695122636.json b/api/_content/cache.1714695620480.json
similarity index 99%
rename from api/_content/cache.1714695122636.json
rename to api/_content/cache.1714695620480.json
index e5ba6f00d2..3790876baa 100644
--- a/api/_content/cache.1714695122636.json
+++ b/api/_content/cache.1714695620480.json
@@ -1 +1 @@
-{"generatedAt":1714695147279,"generateTime":3434,"contents":[{"_path":"/","_dir":"","_draft":false,"_partial":false,"_locale":"","title":"Ripple Design System","description":"Ripple is the design system for Victorian government digital products","icon":"carbon:home","layout":"home","primaryCTA":{"title":"For Designers","description":"Information for designers using Ripple to create brand Victoria compliant digital experiences.","image":{"src":"/assets/img/for-designers.png"},"url":"/design-system/design/getting-started"},"secondaryCTA":{"title":"For Developers","description":"How to get started implementing Ripple UI components in digital products.","image":{"src":"/assets/img/for-developers.png"},"url":"/design-system/develop/getting-started"},"modulesCTA":{"title":"Modules","description":"Paragraph Default. Cards contain actionable content about a single topic. These are usually grouped as similar style sets.","url":"/framework"},"quickLink1":{"title":"About Ripple","description":"Ripple is a system of reusable styles, components, patterns and tools for creating Victorian government digital experiences.","url":"/design-system/about/what-is-ripple"},"quickLink2":{"title":"Who should use it","description":"Ripple is built by government for government to deliver services Victorians trust and rely on.","url":"/design-system/about/whos-it-for"},"quickLink3":{"title":"Design principles","description":"The guiding principles that are the foundation of the Ripple Design System.","url":"/design-system/design/our-design-principles"},"framework":{"title":"Ripple framework","description":"Ripple framework contains the tools for building SDP sites using Ripple design system components.","url":"/framework"},"body":{"type":"root","children":[],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:1.index.md","_source":"content","_file":"1.index.md","_extension":"md"},{"_path":"/design-system/_markdown-reference-file","_dir":"design-system","_draft":false,"_partial":true,"_locale":"","title":"Markdown Kitchen Sink (DEV ONLY)","description":"This is an example page to demonstrate and document the markdown features available in the docs site","draft":true,"layout":"page","links":[{"text":"Vic gov","url":"https://www.vic.gov.au/"},{"text":"Single Digital Presence","url":"https://www.vic.gov.au/single-digital-presence"}],"body":{"type":"root","children":[{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For a more detailed markdown editing guide, see here "},{"type":"element","tag":"a","props":{"href":"https://www.markdownguide.org/basic-syntax/","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.markdownguide.org/basic-syntax/"}]}]}]},{"type":"element","tag":"h2","props":{"id":"front-matter"},"children":[{"type":"text","value":"Front matter"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Front matter sits at the very top of a markdown file and contains metadata about a page. In our case, it contains things like the page title and description."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is the frontmatter for the page you are currently reading."}]},{"type":"element","tag":"pre","props":{"code":"---\ntitle: Kitchen sink\ndescription: Here's everything\nlayout: page\nlinks:\n  - text: Vic gov\n    url: https://www.vic.gov.au/\n  - text: Single Digital Presence\n    url: https://www.vic.gov.au/single-digital-presence\n---\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"Kitchen sink\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"description"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"Here's everything\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"layout"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"page\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"links"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":":\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  - "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"Vic gov\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"    url"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"https://www.vic.gov.au/\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  - "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"Single Digital Presence\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"    url"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"https://www.vic.gov.au/single-digital-presence\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"---\n"}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"headings"},"children":[{"type":"text","value":"Headings"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Headings are added using hash marks before text. The number of hash marks specifies the heading level (e.g. '##' = H2). Please don't use H1s in markdown, these are reserved for the page title, which is set in the front matter."}]},{"type":"element","tag":"h3","props":{"id":"example"},"children":[{"type":"text","value":"Example"}]},{"type":"element","tag":"pre","props":{"code":"## Heading level 2\n\n### Heading level 3\n\n#### Heading level 4\n\n##### Heading level 5\n\n###### Heading level 6\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"## Heading level 2\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"### Heading level 3\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"#### Heading level 4\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"##### Heading level 5\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"###### Heading level 6\n"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"heading-level-2"},"children":[{"type":"text","value":"Heading level 2"}]},{"type":"element","tag":"h3","props":{"id":"heading-level-3"},"children":[{"type":"text","value":"Heading level 3"}]},{"type":"element","tag":"h4","props":{"id":"heading-level-4"},"children":[{"type":"text","value":"Heading level 4"}]},{"type":"element","tag":"h5","props":{"id":"heading-level-5"},"children":[{"type":"text","value":"Heading level 5"}]},{"type":"element","tag":"h6","props":{"id":"heading-level-6"},"children":[{"type":"text","value":"Heading level 6"}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"paragraph-text"},"children":[{"type":"text","value":"Paragraph text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Paragraphs are simply text seperated by an empty line."}]},{"type":"element","tag":"pre","props":{"code":"This is a paragraph\n\nThis is another paragraph\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"This is a paragraph\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"This is another paragraph\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is a paragraph"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is another paragraph"}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"emphasis"},"children":[{"type":"text","value":"Emphasis"}]},{"type":"element","tag":"h3","props":{"id":"italics"},"children":[{"type":"text","value":"Italics"}]},{"type":"element","tag":"pre","props":{"code":"Here is *italic text*\n\nHere is also _italic text_\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"Here is "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E;--shiki-default-font-style:italic"},"children":[{"type":"text","value":"*italic text*\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"Here is also "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E;--shiki-default-font-style:italic"},"children":[{"type":"text","value":"_italic text_\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"italic text"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is also "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"italic text"}]}]},{"type":"element","tag":"h3","props":{"id":"bold"},"children":[{"type":"text","value":"Bold"}]},{"type":"element","tag":"pre","props":{"code":"Here is **bold text**\n\nHere is also __bold text__\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"Here is "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"**bold text**\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"Here is also "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"__bold text__\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"bold text"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is also "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"bold text"}]}]},{"type":"element","tag":"h3","props":{"id":"strikethrough"},"children":[{"type":"text","value":"Strikethrough"}]},{"type":"element","tag":"pre","props":{"code":"Here is ~~strikethrough text~~\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"Here is "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"~~strikethrough text~~\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is "},{"type":"element","tag":"del","props":{},"children":[{"type":"text","value":"strikethrough text"}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"horizontal-rules"},"children":[{"type":"text","value":"Horizontal Rules"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can add a horizontal rule by using at least three of either "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"_"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" or "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"*"}]},{"type":"text","value":"."}]},{"type":"element","tag":"pre","props":{"code":"These are all equivalent:\n---\n___\n***\n\nSo are these:\n------\n______\n******\n\nBut these won't work:\n--\n__\n**\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"These are all equivalent:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"___\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"***\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"So are these:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"------\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"______\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"******\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"But these won't work:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"--\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"__\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"**\n"}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"blockquotes"},"children":[{"type":"text","value":"Blockquotes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Blockquotes are added with a "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":">"}]},{"type":"text","value":" before the text."}]},{"type":"element","tag":"pre","props":{"code":"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n"}]}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"lists"},"children":[{"type":"text","value":"Lists"}]},{"type":"element","tag":"h3","props":{"id":"unordered"},"children":[{"type":"text","value":"Unordered"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Unordered lists are created by starting a line with "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":", or "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"*"}]},{"type":"text","value":". Nested lists can be achieved through indentation, with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"2 spaces"}]},{"type":"text","value":" for each additional level."}]},{"type":"element","tag":"pre","props":{"code":"* Fruit\n  * Berries\n    - Strawberry\n    - Blueberry\n  * Classics\n    - Apple\n    - Banana\n* Vegetables\n  + Broccoli\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Fruit\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  *"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Berries\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Strawberry\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Blueberry\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  *"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Classics\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Apple\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Banana\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Vegetables\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  +"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Broccoli\n"}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Fruit\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Berries\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Strawberry"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Blueberry"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Classics\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Apple"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Banana"}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Vegetables\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Broccoli"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"ordered"},"children":[{"type":"text","value":"Ordered"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ordered lists are created by starting a line with a number and period (e.g. "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"1."}]},{"type":"text","value":"). Nested lists can be achieved through indentation, with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"4 spaces"}]},{"type":"text","value":" (different to the unordered list) for each additional level."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use any numbers, but it's more convenient to just use "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"1."}]},{"type":"text","value":" for each item, the numbering will work automatically."}]},{"type":"element","tag":"pre","props":{"code":"This works:\n\n1. Lorem ipsum dolor sit amet\n    1. Lorem at massa\n    2. Adipiscing\n2. Consectetur adipiscing elit\n3. Integer molestie lorem at massa\n\nBut just do this, it's the same thing:\n\n1. Lorem ipsum dolor sit amet\n    1. Lorem at massa\n    1. Adipiscing\n1. Consectetur adipiscing elit\n1. Integer molestie lorem at massa\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"This works:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Lorem ipsum dolor sit amet\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    1."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Lorem at massa\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    2."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Adipiscing\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"2."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Consectetur adipiscing elit\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"3."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Integer molestie lorem at massa\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"But just do this, it's the same thing:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Lorem ipsum dolor sit amet\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    1."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Lorem at massa\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    1."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Adipiscing\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Consectetur adipiscing elit\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Integer molestie lorem at massa\n"}]}]}]}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Lorem ipsum dolor sit amet\n"},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Lorem at massa"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Adipiscing"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Consectetur adipiscing elit"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Integer molestie lorem at massa"}]}]},{"type":"element","tag":"h4","props":{"id":"starting-point"},"children":[{"type":"text","value":"Starting point"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can start the list at any number like this:"}]},{"type":"element","tag":"pre","props":{"code":"64. foo\n1. bar\n1. blah\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"64."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" foo\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" bar\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" blah\n"}]}]}]}]},{"type":"element","tag":"ol","props":{"start":64},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"foo"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"bar"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"blah"}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"links"},"children":[{"type":"text","value":"Links"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hyperlinks can be added with the following syntax, the link text goes in the square brackets, followed by the url in round brackets."}]},{"type":"element","tag":"pre","props":{"code":"Visit the [Victorian government website](https://www.vic.gov.au/)\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"Visit the ["}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"Victorian government website"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"]("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"https://www.vic.gov.au/"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":")\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Visit the "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/","rel":["nofollow"]},"children":[{"type":"text","value":"Victorian government website"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alternatively, if you don't need different link text you can just write the url directly"}]},{"type":"element","tag":"pre","props":{"code":"Here is the link to vic gov https://www.vic.gov.au/.\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"Here is the link to vic gov https://www.vic.gov.au/.\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is the link to vic gov "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"code"},"children":[{"type":"text","value":"Code"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here's some "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"code inline"}]},{"type":"text","value":" in context."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here's some "},{"type":"element","tag":"code","props":{"className":"language-ts shiki shiki-themes github-light","language":"ts","style":""},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":" codeInline"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":" string"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" ="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" 'highlighted code inline'"}]}]},{"type":"text","value":" in context."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Indented code"}]},{"type":"element","tag":"pre","props":{"code":"// Some comments\nline 1 of code\nline 2 of code\nline 3 of code\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// Some comments\nline 1 of code\nline 2 of code\nline 3 of code\n"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Block code \"fences\""}]},{"type":"element","tag":"pre","props":{"code":"Sample text here...\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"Sample text here...\n"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax highlighting"}]},{"type":"element","tag":"pre","props":{"code":"var foo = function (bar) {\n  return bar++;\n};\n\nconsole.log(foo(5));\n","language":"js","meta":"","className":"language-js shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"var"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" foo"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" ="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" function"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"bar"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":") {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"  return"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" bar"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"++"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":";\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"};\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"console."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"foo"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"));\n"}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"tables"},"children":[{"type":"text","value":"Tables"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tables can be added using a special format. More info here:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/organizing-information-with-tables","rel":["nofollow"]},"children":[{"type":"text","value":"Github markdown tables guide"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"An example of a simple table"}]},{"type":"element","tag":"pre","props":{"code":"| Name   | Description                  |\n| ------ | ---------------------------- |\n| Banana | Yellow, elongated, edible.   |\n| Apple  | 84% water, 15% carbohydrates |\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"| Name   | Description                  |\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"| ------ | ---------------------------- |\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"| Banana | Yellow, elongated, edible.   |\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"| Apple  | 84% water, 15% carbohydrates |\n"}]}]}]}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Name"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Description"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Banana"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Yellow, elongated, edible."}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Apple"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"84% water, 15% carbohydrates"}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"images"},"children":[{"type":"text","value":"Images"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Images can be added like this:"}]},{"type":"element","tag":"pre","props":{"code":"![Nils Olav  - This is the alt text](/assets/img/temp/Nils_Olav_wide.jpg)\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"!["}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"Nils Olav  - This is the alt text"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"]("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"/assets/img/temp/Nils_Olav_wide.jpg"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":")\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Nils Olav  - This is the alt text","src":"/assets/img/temp/Nils_Olav_wide.jpg"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By Lee Carson on Flickr - Nils Olav on Flickr, CC BY-SA 2.0, "},{"type":"element","tag":"a","props":{"href":"https://commons.wikimedia.org/w/index.php?curid=5080064","rel":["nofollow"]},"children":[{"type":"text","value":"https://commons.wikimedia.org/w/index.php?curid=5080064"}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"custom-components"},"children":[{"type":"text","value":"Custom components"}]},{"type":"element","tag":"h3","props":{"id":"docsexample"},"children":[{"type":"text","value":"DocsExample"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"DocsExample"}]},{"type":"text","value":" will display an component example from storybook, you will need to give it the id of the story you want to display."}]},{"type":"element","tag":"pre","props":{"code":"::DocsExample\n---\nid: core-navigation-button--default-filled\n---\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"id: core-navigation-button--default-filled\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are additional options you can use for this component:"}]},{"type":"element","tag":"pre","props":{"code":"::DocsExample\n---\nid: core-navigation-button--default-filled\nwithPadding: false\nhideNewTab: false\nhideCode: true\n---\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"id: core-navigation-button--default-filled\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"withPadding: false\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"hideNewTab: false\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"hideCode: true\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled",":hideCode":"true",":hideNewTab":"false",":withPadding":"true"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can add toggle values in storybook and copy the the value of the args parameter in the URL to the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"argsString"}]},{"type":"text","value":" option in the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"DocsExample"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Storybook controls","src":"/assets/img/temp/storybook-toggles.png"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Browser url bar","src":"/assets/img/temp/url-args.png"},"children":[]}]},{"type":"element","tag":"pre","props":{"code":"::DocsExample\n---\nid: core-navigation-pagination--complex\nargsString: 'totalPages:50;currentPage:30;showTally:true'\n---\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"id: core-navigation-pagination--complex\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"argsString: 'totalPages:50;currentPage:30;showTally:true'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-pagination--complex","argsString":"totalPages:50;currentPage:30;showTally:true"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can also the theme and whether or not neutral buttons should be used."}]},{"type":"element","tag":"pre","props":{"code":"::DocsExample\n---\nid: core-navigation-button--default-filled\ntheme: 'light'\n---\n::\n\n::DocsExample\n---\nid: core-navigation-card--call-to-action\nuseNeutralButtons: true\n---\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"id: core-navigation-button--default-filled\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"theme: 'light'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"id: core-navigation-card--call-to-action\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"useNeutralButtons: true\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled","theme":"docsTheme3"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--call-to-action",":useNeutralButtons":"true"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docsthemechooser"},"children":[{"type":"text","value":"DocsThemeChooser"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can wrap "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"DocsExample"}]},{"type":"text","value":" components with a "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"DocsThemeChooser"}]},{"type":"text","value":" component. This will allow the user to choose which theme the examples inside the theme chooser will display with."}]},{"type":"element","tag":"pre","props":{"code":"::DocsThemeChooser\n  ::DocsExample\n  ---\n  id: core-navigation-button--default-filled\n  ---\n  ::\n  ::DocsExample\n  ---\n  id: core-navigation-button--default-outlined\n  ---\n  ::\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsThemeChooser\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ::DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  id: core-navigation-button--default-filled\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ::DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  id: core-navigation-button--default-outlined\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-outlined"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"docsimageexample"},"children":[{"type":"text","value":"DocsImageExample"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"DocsImageExample"}]},{"type":"text","value":" will display an image in a way this is visually similar to the component examples, you will need to give it the url (src) of the image, the alt text (alt) and an optional caption."}]},{"type":"element","tag":"pre","props":{"code":"::DocsImageExample\n---\nsrc: /assets/img/InlineLink-Focus.png\nalt: An example of focus state colour contrast\n---\nHere's the **rich** text `caption`\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsImageExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"src: /assets/img/InlineLink-Focus.png\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"alt: An example of focus state colour contrast\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"Here's the "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"**rich**"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" text "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":"`caption`\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"An example of focus state colour contrast","src":"/assets/img/InlineLink-Focus.png"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here's the "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"rich"}]},{"type":"text","value":" text "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"caption"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example without caption:"}]},{"type":"element","tag":"pre","props":{"code":"::DocsImageExample\n---\nsrc: /assets/img/InlineLink-Focus.png\nalt: An example of focus state colour contrast\n---\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsImageExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"src: /assets/img/InlineLink-Focus.png\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"alt: An example of focus state colour contrast\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"An example of focus state colour contrast","src":"/assets/img/InlineLink-Focus.png"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docscard-docscardgrid"},"children":[{"type":"text","value":"DocsCard && DocsCardGrid"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Cards can also be added. Ensure that you wrap them with DocsCardGrid so that they are layout out correctly. DocsCard use the 'promo' type card under the hood."}]},{"type":"element","tag":"pre","props":{"code":"::DocsCardGrid\n  ::DocsCard\n  ---\n  title: Button\n  url: /design-system/components/button\n  ---\n  Here's the summary text\n  ::\n\n  ::DocsCard\n  ---\n  title: Vic gov\n  url: https://www.vic.gov.au/\n  ---\n  Here's the summary text\n  ::\n\n  ::DocsCard\n  ---\n  title: Code standards\n  url: /framework/code-standards\n  ---\n  Here's the summary text\n  ::\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsCardGrid\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ::DocsCard\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  title: Button\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  url: /design-system/components/button\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  Here's the summary text\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ::DocsCard\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  title: Vic gov\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  url: https://www.vic.gov.au/\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  Here's the summary text\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ::DocsCard\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  title: Code standards\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  url: /framework/code-standards\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":22},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":23},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  Here's the summary text\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":24},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":25},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-card-grid","props":{},"children":[{"type":"element","tag":"docs-card","props":{"title":"Button","url":"/design-system/components/button"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here's the summary text"}]}]},{"type":"element","tag":"docs-card","props":{"title":"Vic gov","url":"https://www.vic.gov.au/"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here's the summary text"}]}]},{"type":"element","tag":"docs-card","props":{"title":"Code standards","url":"/framework/code-standards"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here's the summary text"}]}]}]},{"type":"element","tag":"h3","props":{"id":"docscolourtable"},"children":[{"type":"text","value":"DocsColourTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"DocsColourTable"}]},{"type":"text","value":" will display a table of themed colours, you just need to specify which colours to show.\nThis can be either direct colours like "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"clr.type.primary.contrast"}]},{"type":"text","value":", colour groups like "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"clr.type.primary"}]},{"type":"text","value":" or a mix of both."}]},{"type":"element","tag":"pre","props":{"code":"\n::DocsColourTable\n---\ncolours:\n  - clr.primary\n  - clr.link\n---\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsColourTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"colours:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" clr.primary\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" clr.link\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.primary\",\"clr.link\"]"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docsgradienttable"},"children":[{"type":"text","value":"DocsGradientTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"DocsGradientTable"}]},{"type":"text","value":" will display the themed horizontal and vertical gradients."}]},{"type":"element","tag":"pre","props":{"code":"::DocsGradientTable\n:::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsGradientTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":":::\n"}]}]}]}]},{"type":"element","tag":"docs-gradient-table","props":{},"children":[]},{"type":"element","tag":"h3","props":{"id":"docsicontable"},"children":[{"type":"text","value":"DocsIconTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"DocsIconsTable"}]},{"type":"text","value":" will display a table of icons, you just need to specify which icon group to show, this will be either "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"alert"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"social"}]},{"type":"text","value":" or "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"standard"}]},{"type":"text","value":"."}]},{"type":"element","tag":"pre","props":{"code":"::DocsIconTable\n---\ngroup: alert\n---\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsIconTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"group: alert\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-icon-table","props":{"group":"alert"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docsiconsizingtable"},"children":[{"type":"text","value":"DocsIconSizingTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"DocsIconSizingTable"}]},{"type":"text","value":" will display a table of icons with a preview of the icon at the specified size."}]},{"type":"element","tag":"pre","props":{"code":"::DocsIconSizingTable\n---\nsizes:\n- s : 16px\n- m : 24px\n- l : 32px\n---\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsIconSizingTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"sizes:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" s : 16px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" m : 24px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" l : 32px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-icon-sizing-table","props":{":sizes":"[{\"s\":\"16px\"},{\"m\":\"24px\"},{\"l\":\"32px\"}]"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docslayerstyletable"},"children":[{"type":"text","value":"DocsLayerStyleTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"DocsLayerStyleTable"}]},{"type":"text","value":" will display a table of layer styles with a preview of that style in action, you just need to specify the type of style to show, this will be either "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"border"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"border.radius"}]},{"type":"text","value":" or "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"elevation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"pre","props":{"code":"::DocsLayerStyleTable\n---\ntype: border.radius\n---\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsLayerStyleTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"type: border.radius\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-layer-style-table","props":{"type":"border.radius"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docstypetable"},"children":[{"type":"text","value":"DocsTypeTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"DocsTypeTable"}]},{"type":"text","value":" will display a table of type styles, you just need to specify the type of type style to show. This will be either "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"weight"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"size"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"lh"}]},{"type":"text","value":" or "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ls"}]},{"type":"text","value":"."}]},{"type":"element","tag":"pre","props":{"code":"::DocsTypeTable\n---\ntype: size\n---\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsTypeTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"type: size\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-type-table","props":{"type":"size"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docstypeclasstable"},"children":[{"type":"text","value":"DocsTypeClassTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"DocsTypeClassTable"}]},{"type":"text","value":" will display a table of type styles, with a preview of that style in action."}]},{"type":"element","tag":"pre","props":{"code":"::DocsTypeClassTable\n---\ntype:\n- style :\n  - Heading 1\n  - values :\n    - Font size: 32px / 56px\n    - Line height: 36px / 60px\n    - Letter spacing: 1.4% / 0.8%\n    - Font weight: Bold (700)\n  - rpl-type-h1\n- style :\n  - Heading 1 Highlight\n  - values :\n    - Font size: 32px / 56px\n    - Line height: 36px / 60px\n    - Letter spacing: 1.4% / 0.8%\n    - Font weight: Bold (700)\n  - rpl-type-h1-highlight\n---\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsTypeClassTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"type:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" style :\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Heading 1\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" values :\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Font size: 32px / 56px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Line height: 36px / 60px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Letter spacing: 1.4% / 0.8%\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Font weight: Bold (700)\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" rpl-type-h1\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" style :\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Heading 1 Highlight\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" values :\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Font size: 32px / 56px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Line height: 36px / 60px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Letter spacing: 1.4% / 0.8%\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Font weight: Bold (700)\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" rpl-type-h1-highlight\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-type-class-table","props":{":type":"[{\"style\":[\"Heading 1\",{\"values\":[{\"Font size\":\"32px / 56px\"},{\"Line height\":\"36px / 60px\"},{\"Letter spacing\":\"1.4% / 0.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1\"]},{\"style\":[\"Heading 1 Highlight\",{\"values\":[{\"Font size\":\"32px / 56px\"},{\"Line height\":\"36px / 60px\"},{\"Letter spacing\":\"1.4% / 0.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1-highlight\"]}]"},"children":[]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"front-matter","depth":2,"text":"Front matter"},{"id":"headings","depth":2,"text":"Headings","children":[{"id":"example","depth":3,"text":"Example"}]},{"id":"heading-level-2","depth":2,"text":"Heading level 2","children":[{"id":"heading-level-3","depth":3,"text":"Heading level 3"}]},{"id":"paragraph-text","depth":2,"text":"Paragraph text"},{"id":"emphasis","depth":2,"text":"Emphasis","children":[{"id":"italics","depth":3,"text":"Italics"},{"id":"bold","depth":3,"text":"Bold"},{"id":"strikethrough","depth":3,"text":"Strikethrough"}]},{"id":"horizontal-rules","depth":2,"text":"Horizontal Rules"},{"id":"blockquotes","depth":2,"text":"Blockquotes"},{"id":"lists","depth":2,"text":"Lists","children":[{"id":"unordered","depth":3,"text":"Unordered"},{"id":"ordered","depth":3,"text":"Ordered"}]},{"id":"links","depth":2,"text":"Links"},{"id":"code","depth":2,"text":"Code"},{"id":"tables","depth":2,"text":"Tables"},{"id":"images","depth":2,"text":"Images"},{"id":"custom-components","depth":2,"text":"Custom components","children":[{"id":"docsexample","depth":3,"text":"DocsExample"},{"id":"docsthemechooser","depth":3,"text":"DocsThemeChooser"},{"id":"docsimageexample","depth":3,"text":"DocsImageExample"},{"id":"docscard-docscardgrid","depth":3,"text":"DocsCard && DocsCardGrid"},{"id":"docscolourtable","depth":3,"text":"DocsColourTable"},{"id":"docsgradienttable","depth":3,"text":"DocsGradientTable"},{"id":"docsicontable","depth":3,"text":"DocsIconTable"},{"id":"docsiconsizingtable","depth":3,"text":"DocsIconSizingTable"},{"id":"docslayerstyletable","depth":3,"text":"DocsLayerStyleTable"},{"id":"docstypetable","depth":3,"text":"DocsTypeTable"},{"id":"docstypeclasstable","depth":3,"text":"DocsTypeClassTable"}]}]}},"_type":"markdown","_id":"content:design-system:_markdown-reference-file.md","_source":"content","_file":"design-system/_markdown-reference-file.md","_extension":"md"},{"_path":"/design-system/about/_5.accessibility-statement","_dir":"about","_draft":false,"_partial":true,"_locale":"","title":"Accessibility statement","description":"Page description","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"content-goes-here"},"children":[{"type":"text","value":"Content goes here"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"content-goes-here","depth":2,"text":"Content goes here"}]}},"_type":"markdown","_id":"content:design-system:1.about:_5.accessibility-statement.md","_source":"content","_file":"design-system/1.about/_5.accessibility-statement.md","_extension":"md"},{"_path":"/design-system/about/what-is-ripple","_dir":"about","_draft":false,"_partial":false,"_locale":"","title":"What is Ripple?","description":"Ripple is the digital design system of the Victorian government","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is a system of reusable styles, components, patterns and tools for building brand Victoria digital products."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Developed by the Single Digital Presence (SDP) team in the Department of Government Services, Ripple:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"makes it easier for citizens to "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"find"}]},{"type":"text","value":", "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"understand"}]},{"type":"text","value":" and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" government information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"makes creating Brand Victoria approved content, assets and sites easy"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"increases delivery speed for digital products and services."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Over 50 government websites use Ripple, including our main "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"vic.gov.au"}]},{"type":"text","value":" platform. These sites attract millions of views per month."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Screenshots of websites using SDP, vic.gov.au, police.vic.gov.au, health.vic.gov.au, legislation.vic.gov.au","className":["docs-center-img"],"src":"/assets/img/sites.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"why-use-ripple"},"children":[{"type":"text","value":"Why use Ripple?"}]},{"type":"element","tag":"h3","props":{"id":"ripple-solves-the-hard-problems-so-you-dont-have-to"},"children":[{"type":"text","value":"Ripple solves the hard problems so you don’t have to"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We spent the past 5 years refining Ripple based on user feedback to ensure it:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"meets the publishing needs of government users"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"makes it easier for citizens to interact with government services."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple users can be confident their site’s design and development is based on industry standards and best practices for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"accessibility"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"SEO"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"security"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"performance."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users can easily navigate sites regardless of technical ability, location or device."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Designers and developers can create consistent digital experiences across Victorian Government sites."}]},{"type":"element","tag":"h3","props":{"id":"ripple-gives-you-efficient-and-reusable-digital-resources"},"children":[{"type":"text","value":"Ripple gives you efficient and reusable digital resources"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple promotes efficiency and reuse by providing reusable styles, components and patterns."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It provides a set of standards to manage design at scale, to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reduce redundancy"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"create a shared language"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"provide visual consistency."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Developer contributions can be shared across projects, adding value to all government departments. This results in reduced project development time and expense."}]},{"type":"element","tag":"h3","props":{"id":"ripple-is-by-government-for-government"},"children":[{"type":"text","value":"Ripple is by government, for government"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple Design System has been made open-source to foster collaboration across government. By making the system open-source, departments and agencies can help improve the citizen experience across government. Ripple has been developed by government, for government and retains all intellectual property and expertise."}]},{"type":"element","tag":"h2","props":{"id":"who-can-use-ripple"},"children":[{"type":"text","value":"Who can use Ripple?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is open to all departments or agencies that use Victorian Government branding. Visit the "},{"type":"element","tag":"a","props":{"href":"/design-system/about/whos-it-for"},"children":[{"type":"text","value":"Who's it for?"}]},{"type":"text","value":" page for more information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is a modular system, allowing it to be used separately from our other SDP products, Tide and Bay. Visit the "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"text","value":" page for more information."}]},{"type":"element","tag":"h2","props":{"id":"how-do-i-find-out-more"},"children":[{"type":"text","value":"How do I find out more?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are a Victorian Government department or agency wanting to use Ripple in a Brand Victoria digital product (or a vendor supporting them), please visit "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/work-sdp","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/work-sdp"}]},{"type":"text","value":" or contact "},{"type":"element","tag":"a","props":{"href":"mailto:digital@dpc.vic.gov.au"},"children":[{"type":"text","value":"digital@dpc.vic.gov.au"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To find out more about the Single Digital Presence program, please visit "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/single-digital-presence","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/single-digital-presence"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"why-use-ripple","depth":2,"text":"Why use Ripple?","children":[{"id":"ripple-solves-the-hard-problems-so-you-dont-have-to","depth":3,"text":"Ripple solves the hard problems so you don’t have to"},{"id":"ripple-gives-you-efficient-and-reusable-digital-resources","depth":3,"text":"Ripple gives you efficient and reusable digital resources"},{"id":"ripple-is-by-government-for-government","depth":3,"text":"Ripple is by government, for government"}]},{"id":"who-can-use-ripple","depth":2,"text":"Who can use Ripple?"},{"id":"how-do-i-find-out-more","depth":2,"text":"How do I find out more?"}]}},"_type":"markdown","_id":"content:design-system:1.about:1.what-is-ripple.md","_source":"content","_file":"design-system/1.about/1.what-is-ripple.md","_extension":"md"},{"_path":"/design-system/about/whos-it-for","_dir":"about","_draft":false,"_partial":false,"_locale":"","title":"Who's it for?","description":"Built by government, for government.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"who-can-use-ripple"},"children":[{"type":"text","value":"Who can use Ripple?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is available to all departments and agencies that use Victorian Government branding."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Designers"}]},{"type":"text","value":" can easily and quickly create wireframes, high-fidelity designs and prototypes."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Developers"}]},{"type":"text","value":" can access technical specifications to create pixel-perfect code."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Content creators"}]},{"type":"text","value":" can design page concepts, knowing their layouts will accurately reflect the finished product."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Product owners"}]},{"type":"text","value":" and stakeholders can review designs and provide feedback."}]}]},{"type":"element","tag":"h2","props":{"id":"what-should-i-use-ripple-for"},"children":[{"type":"text","value":"What should I use Ripple for?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is designed to make websites that give Victorian citizens official information about their government. It is mainly used by Victorian Government departments and agencies to build websites using the "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/single-digital-presence","rel":["nofollow"]},"children":[{"type":"text","value":"Single Digital Presence (SDP)"}]},{"type":"text","value":" platform."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple makes it easy to share government information with all Victorians in a clear, concise and accessible way."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Since it is only used to build government websites, Ripple has been designed to support Brand Victoria digital products. This opinionated design means Ripple automatically guides you to create a digital experience for citizens that is in line with Brand Victoria’s look, feel and vision."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It also means Ripple is not a general purpose design system for use outside of Brand Victoria."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is for Victorian Government branded products only. Only use it to create communications that are approved to use the Victorian Government brand."}]}]},{"type":"element","tag":"h2","props":{"id":"how-do-i-use-ripple"},"children":[{"type":"text","value":"How do I use Ripple?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is a modular design system. This means Ripple lets you easily change and expand your website’s layout and content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It also means you can use different parts of the Ripple Design System, like components or styles, separately. Departments that don’t use the SDP platform can still use Ripple in their own digital products. You can do this by:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"building your own components"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"referencing the Ripple styles"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"importing the Ripple components."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Visit the "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"text","value":" page for instructions."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"who-can-use-ripple","depth":2,"text":"Who can use Ripple?"},{"id":"what-should-i-use-ripple-for","depth":2,"text":"What should I use Ripple for?"},{"id":"how-do-i-use-ripple","depth":2,"text":"How do I use Ripple?"}]}},"_type":"markdown","_id":"content:design-system:1.about:2.whos-it-for.md","_source":"content","_file":"design-system/1.about/2.whos-it-for.md","_extension":"md"},{"_path":"/design-system/about/getting-support","_dir":"about","_draft":false,"_partial":false,"_locale":"","title":"Support","description":"How to get help","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/ripple-design-system","rel":["nofollow"]},"children":[{"type":"text","value":"Ripple design system"}]},{"type":"text","value":" is maintained by the "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/single-digital-presence","rel":["nofollow"]},"children":[{"type":"text","value":"Single Digital Presence (SDP)"}]},{"type":"text","value":" team at the Victorian Department of Government Services."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can reach out to us via the following channels:"}]},{"type":"element","tag":"h3","props":{"id":"for-technical-and-project-support"},"children":[{"type":"text","value":"For technical and project support"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"join the discussion on "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions","rel":["nofollow"]},"children":[{"type":"text","value":"GitHub"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"log a request through our "},{"type":"element","tag":"a","props":{"href":"https://digital-vic.atlassian.net/servicedesk/customer/portals","rel":["nofollow"]},"children":[{"type":"text","value":"helpdesk"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"sign up to the "},{"type":"element","tag":"a","props":{"href":"https://vic-sdp.slack.com","rel":["nofollow"]},"children":[{"type":"text","value":"SDP Slack"}]},{"type":"text","value":" (Open to projects with an MoU for application support)"}]}]},{"type":"element","tag":"h2","props":{"id":"design-enquiries"},"children":[{"type":"text","value":"Design enquiries"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Email: "},{"type":"element","tag":"a","props":{"href":"mailto:design@dpc.vic.gov.au"},"children":[{"type":"text","value":"design@dpc.vic.gov.au"}]}]},{"type":"element","tag":"h2","props":{"id":"general-enquiries"},"children":[{"type":"text","value":"General enquiries"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://digital-vic.atlassian.net/servicedesk/customer/portal/14/group/113/create/497","rel":["nofollow"]},"children":[{"type":"text","value":"Raise a request"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"for-technical-and-project-support","depth":3,"text":"For technical and project support"},{"id":"design-enquiries","depth":2,"text":"Design enquiries"},{"id":"general-enquiries","depth":2,"text":"General enquiries"}]}},"_type":"markdown","_id":"content:design-system:1.about:3.getting-support.md","_source":"content","_file":"design-system/1.about/3.getting-support.md","_extension":"md"},{"_path":"/design-system/about/contributing","_dir":"about","_draft":false,"_partial":false,"_locale":"","title":"Contributing","description":"Found an issue?","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/ripple-design-system","rel":["nofollow"]},"children":[{"type":"text","value":"Ripple design system"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"/framework"},"children":[{"type":"text","value":"Ripple framework"}]},{"type":"text","value":" are open source and released under an Apache 2.0 License."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is maintained by the "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/single-digital-presence","rel":["nofollow"]},"children":[{"type":"text","value":"Single Digital Presence (SDP)"}]},{"type":"text","value":" team at the Victorian Department of Government Services.\nIf you are a Victorian Government department or agency (or a vendor supporting them) and wish to suggest improvements to Ripple that would benefit the project there are several options outlined below."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To propose a change, you will need to have a free GitHub account. Please see the "},{"type":"element","tag":"a","props":{"href":"https://docs.github.com/en/get-started/signing-up-for-github/signing-up-for-a-new-github-account","rel":["nofollow"]},"children":[{"type":"text","value":"GitHub docs"}]},{"type":"text","value":" to create one if you haven't already."}]},{"type":"element","tag":"h2","props":{"id":"submit-a-bug-report"},"children":[{"type":"text","value":"Submit a bug report"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you have encountered an issue that you think is a bug, help us fix it for everyone! To log a bug report please do the following:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Check existing the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions","rel":["nofollow"]},"children":[{"type":"text","value":"discussions"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/issues","rel":["nofollow"]},"children":[{"type":"text","value":"issues"}]},{"type":"text","value":" to see if the issue has already been discussed."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Fill out the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=bug&template=bug_report.yml&title=%5BBUG%5D","rel":["nofollow"]},"children":[{"type":"text","value":"bug report issue template"}]}]}]},{"type":"element","tag":"h2","props":{"id":"documentation-changes"},"children":[{"type":"text","value":"Documentation changes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Seen an issue with this documentation site? You can either describe it in an issue so the dev team can review it, or propose an edit directly by creating a Pull request with the proposed change."}]},{"type":"element","tag":"h3","props":{"id":"to-create-an-issue"},"children":[{"type":"text","value":"To create an issue:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To log a docs site issue please do the following"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Log in to GitHub"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=docs&template=docs.yml&title=%5BDOCS%5D","rel":["nofollow"]},"children":[{"type":"text","value":"Log an issue on the GitHub Repository"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Fill in the form, providing as much detail as possible"}]}]},{"type":"element","tag":"h3","props":{"id":"to-propose-an-edit-directly"},"children":[{"type":"text","value":"To propose an edit directly"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the "},{"type":"element","tag":"a","props":{"href":"https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request","rel":["nofollow"]},"children":[{"type":"text","value":"GitHub docs"}]},{"type":"text","value":" for more information about creating a pull request."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Log in to GitHub"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Click the \"Propose a change to this page on GitHub\" link at the bottom of each content page"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Make a change to the markdown in the editor. See "},{"type":"element","tag":"a","props":{"href":"https://www.markdownguide.org/","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.markdownguide.org/"}]},{"type":"text","value":" for information on syntax"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Describe the change in the commit message"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Create a new pull request from the \"forked\" version of the repository"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"This pull request will be reviewed by the SDP development team and we may ask for changes or revisions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If the Pull Request is approved it will be merged and included in the next Ripple release."}]}]},{"type":"element","tag":"h2","props":{"id":"propose-a-new-feature"},"children":[{"type":"text","value":"Propose a new feature"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you have a proposal for a new feature to the Ripple design system please see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/ripple-design-system#enquiries-and-support","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/ripple-design-system#enquiries-and-support"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For development partners wishing to propose a new feature to Ripple Framework please do the following:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Check existing the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions/categories/feature-proposals-rfc","rel":["nofollow"]},"children":[{"type":"text","value":"discussions"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/issues","rel":["nofollow"]},"children":[{"type":"text","value":"issues"}]},{"type":"text","value":" to see if the the proposal has already been discussed. The discussion board is a great place to bring up new ideas for discussion without having to write up a full proposal."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If you are confident that the feature is something worth progressing, please fill out the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=bug&template=feature-request.yml&title=%5BPROPOSAL%5D","rel":["nofollow"]},"children":[{"type":"text","value":"New feature proposal"}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"submit-a-bug-report","depth":2,"text":"Submit a bug report"},{"id":"documentation-changes","depth":2,"text":"Documentation changes","children":[{"id":"to-create-an-issue","depth":3,"text":"To create an issue:"},{"id":"to-propose-an-edit-directly","depth":3,"text":"To propose an edit directly"}]},{"id":"propose-a-new-feature","depth":2,"text":"Propose a new feature"}]}},"_type":"markdown","_id":"content:design-system:1.about:4.contributing.md","_source":"content","_file":"design-system/1.about/4.contributing.md","_extension":"md"},{"_path":"/design-system/design/getting-started","_dir":"design","_draft":false,"_partial":false,"_locale":"","title":"Getting started","description":null,"layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is the design system for Victorian Government digital products. The Ripple Design System makes websites and other digital products look and feel like part of the vic.gov.au brand."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple Design System creates an accessible and consistent visual user interface across all our digital products. This helps citizens trust they are visiting an official source of Victorian Government information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It also provides a single source of truth when choosing styles, components and patterns for Single Digital Presence (SDP) websites."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple Design System offers tools users can apply, adapt and expand to create a vic.gov.au-branded digital experience. These include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"styles"}]},{"type":"text","value":" - foundations of colour, typography, spacing, motion and graphic devices that communicate the Victorian Government’s visual identity"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"components"}]},{"type":"text","value":" - customisable parts (including base components) that give a website its functionality and, when combined with styles, user interface"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"guidance"}]},{"type":"text","value":" - detailed instructions for designers and and developers on using Ripple 2.0 styles, components and other Ripple tools to create consistent digital experiences."}]}]},{"type":"element","tag":"h2","props":{"id":"first-steps"},"children":[{"type":"text","value":"First steps"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some key areas of the Ripple Design System that will help you create your digital product."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/design/design-tokens/"},"children":[{"type":"text","value":"Design tokens"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/ripple-design-system#request-access-to-the-design-system","rel":["nofollow"]},"children":[{"type":"text","value":"Sign up for access to the Ripple 2.0 Figma file"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/"},"children":[{"type":"text","value":"Theming"}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-ripple-20-figma-file"},"children":[{"type":"text","value":"The Ripple 2.0 Figma file"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2.0 Design System is available in "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/","rel":["nofollow"]},"children":[{"type":"text","value":"Figma"}]},{"type":"text","value":". It contains all the design assets needed to design, prototype and share."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use the Figma file in conjunction with the Ripple 2.0 guidance about the component or style you are using. Read the guidance to understand the usage and behaviour of styles and components."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"To create quality user experiences, do not use the Figma file in isolation."}]},{"type":"text","value":" This is important because the Ripple Design System provides more than a website’s appearance. It encompasses developer, user experience, inclusive design and other human-centred design considerations. For example, Ripple automatically ensures accessible colour pairings, cross-browser functionality and consistent error messaging. Using the Figma file without Ripple guidance will confuse users and degrade your site’s accessibility and functionality."}]},{"type":"element","tag":"h3","props":{"id":"figma-file-access"},"children":[{"type":"text","value":"Figma file access"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Sign up to Figma"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Create a free "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/pricing/","rel":["nofollow"]},"children":[{"type":"text","value":"Figma Starter account"}]},{"type":"text","value":"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Install Ripple font"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Ripple uses the VIC font family."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/brand-victoria-fonts","rel":["nofollow"]},"children":[{"type":"text","value":"Download and install VIC"}]},{"type":"text","value":" to use this typeface in Figma."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Request access to Ripple Figma file"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Ripple has been built as a Figma project."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/ripple-design-system#request-access-to-the-design-system","rel":["nofollow"]},"children":[{"type":"text","value":"Request access to the Ripple 2.0 Design System"}]},{"type":"text","value":"."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"You will receive access to the Ripple Design System Figma file."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Add Ripple to your Figma account"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Add the Ripple 2.0 Design System Figma file to your Figma account."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Set up Asset Library"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"In your Figma account, go to the Getting Started page."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Follow these instructions to set up the Asset Library."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"first-steps","depth":2,"text":"First steps"},{"id":"the-ripple-20-figma-file","depth":2,"text":"The Ripple 2.0 Figma file","children":[{"id":"figma-file-access","depth":3,"text":"Figma file access"}]}]}},"_type":"markdown","_id":"content:design-system:2.design:1.getting-started.md","_source":"content","_file":"design-system/2.design/1.getting-started.md","_extension":"md"},{"_path":"/design-system/design/our-design-principles","_dir":"design","_draft":false,"_partial":false,"_locale":"","title":"Our design principles","description":"There are 4 design principles that are the foundation of the Ripple Design System.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are 4 design principles that underpin the Ripple Design System:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Inclusive."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Efficient."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Flexible."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Easy."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple Design System uses these principles when making design decisions."}]},{"type":"element","tag":"h2","props":{"id":"inclusive"},"children":[{"type":"text","value":"Inclusive"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Accessibility is top priority."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Collaborative in design."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Transparent documentation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Friendly, helpful and trustworthy."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Include all users, abilities and backgrounds in the process and design intent."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Support best practices, provide guidance and build trust with the community."}]},{"type":"element","tag":"h2","props":{"id":"efficient"},"children":[{"type":"text","value":"Efficient"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Less is more."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Clean and clear."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Considered."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Economic design."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Think holistically to create considered sustainable outcomes that make sense to all users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Increase efficiencies while reducing complexities and risks."}]},{"type":"element","tag":"h2","props":{"id":"flexible"},"children":[{"type":"text","value":"Flexible"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Responsive to data."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Responsive to sub-brands."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Considers context."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Iterative improvements."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use meaningful evidence to improve impact and add value."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Find improvement opportunities that elevate the experience for multiple contexts and end users."}]},{"type":"element","tag":"h2","props":{"id":"easy"},"children":[{"type":"text","value":"Easy"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Easy to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"contribute to"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"learn and understand"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"create and recreate"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"find information."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Consider the needs and experiences of end users of Victorian digital products."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Make the Ripple experience easy to use. Create experiences and contribute to the design system with end users in mind."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"inclusive","depth":2,"text":"Inclusive"},{"id":"efficient","depth":2,"text":"Efficient"},{"id":"flexible","depth":2,"text":"Flexible"},{"id":"easy","depth":2,"text":"Easy"}]}},"_type":"markdown","_id":"content:design-system:2.design:2.our-design-principles.md","_source":"content","_file":"design-system/2.design/2.our-design-principles.md","_extension":"md"},{"_path":"/design-system/design/design-tokens","_dir":"design","_draft":false,"_partial":false,"_locale":"","title":"Design tokens","description":"Design tokens store our design decisions in the Ripple Design System. They are the single source of truth.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"what-is-a-design-token"},"children":[{"type":"text","value":"What is a Design token?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design tokens store our design decisions that, together, make up the Ripple Design System’s visual style."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tokens apply values in a consistent, reusable and scalable way. They ensure the same style values are used across design files and code."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By storing design decisions, they replace the need to use static values (for example, hex code values for colour)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple Design System has tokens for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"colour"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"typography"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"spacing"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"elevation"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"borders"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"motion values."}]}]},{"type":"element","tag":"h2","props":{"id":"why-use-design-tokens"},"children":[{"type":"text","value":"Why use design tokens?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using design tokens keeps your UI consistent across different platforms."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design tokens are the single source of truth. You can use them across designs and code."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Since design tokens let you make value changes at scale, design language changes are easier to make."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design tokens aren't hard-coded. Avoiding hard-coded values in your design system makes it easier to build, maintain and scale products."}]},{"type":"element","tag":"h2","props":{"id":"ripple-design-tokens"},"children":[{"type":"text","value":"Ripple design tokens"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A Ripple token has 2 parts:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a token name, such as "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"rpl-clr-primary"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an associated value, such as "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"#0052C2"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The token's value can be one of several things: colour, a typeface, a measurement or even another token."}]},{"type":"element","tag":"h2","props":{"id":"how-to-read-ripple-design-token-names"},"children":[{"type":"text","value":"How to read Ripple design token names"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Knowing how to read a token name helps you find the right token faster."}]},{"type":"element","tag":"h3","props":{"id":"parts-of-design-token-names"},"children":[{"type":"text","value":"Parts of design token names"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"rpl"}]},{"type":"text","value":": design system"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"clr"}]},{"type":"text","value":" (colour) or "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"type"}]},{"type":"text","value":" (typography) or "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"sp"}]},{"type":"text","value":" (spacing) for example: token type"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"primary-accessible"}]},{"type":"text","value":" (a descriptive name) or "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"3"}]},{"type":"text","value":" (a number), for example: see below"}]}]},{"type":"element","tag":"h3","props":{"id":"examples"},"children":[{"type":"text","value":"Examples"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"rpl-clr-primary-accessible"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"rpl-sp-4"}]}]}]},{"type":"element","tag":"h3","props":{"id":"steps-and-explanations"},"children":[{"type":"text","value":"Steps and explanations"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Start all design tokens with the system name: "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"rpl"}]},{"type":"text","value":" is for Ripple."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Then, place an abbreviation for the token type: "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"clr"}]},{"type":"text","value":" is for colour; type is for typography; "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"sp"}]},{"type":"text","value":" is for spacing."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"End the token name with a descriptive name or number to show the token’s role relative to other Ripple design tokens. For example, "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"primary-accessible"}]},{"type":"text","value":" in rpl-clr-type-primary-accessible shows this is a colour token that applies one of Ripple’s primary colours (from the colour palette available in Ripple Design System) and is suitable for accessible content. "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"4"}]},{"type":"text","value":" in rpl-sp-4 shows this is a spacing token where 4 is the fourth spacing step (16x), in size order, from the spacing options available in the Ripple Design System."}]}]},{"type":"element","tag":"h2","props":{"id":"best-practices"},"children":[{"type":"text","value":"Best practices"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Choose tokens based on meaning rather than appearance only"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Choose the token with the most specific meaning that is available and applies to your content’s role on the site"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not choose tokens based only how the end result looks on your site"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"For example, for a heading, it is important to choose rpl-type-h3 (heading token) instead of a rpl-type-p-large (type token), even though the end result looks similar"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"For example, if your content needs to be accessible and a certain colour, you should pick rpl-clr-type-primary-accessible instead of rpl-clr-primary"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't pick a token just because the colours seem to match - this can break the consistency across other themes and confuse the user’s experience"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If you do choose tokens based on appearance only, updates to themes, colours, or other features will not apply properly or consistently later"}]}]},{"type":"element","tag":"h2","props":{"id":"why-are-tokens-important-for-design"},"children":[{"type":"text","value":"Why are tokens important for design?"}]},{"type":"element","tag":"h3","props":{"id":"purpose-driven"},"children":[{"type":"text","value":"Purpose-driven"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tokens can be created with a specific purpose or goal in mind. For example, improve accessibility, enhance visual consistency or make it easier to update and maintain a website or app."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Since tokens are purpose-driven, designers and developers can make system-wide updates focused on achieving specific purposes. For example, systematically apply a high-contrast colour scheme for improved visibility, or change the type scale."}]},{"type":"element","tag":"h3","props":{"id":"single-source-of-truth"},"children":[{"type":"text","value":"Single source of truth"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design tokens are like reusable building blocks. They give a design system a single source of truth for making changes to the way a website looks and works."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Having a single source of truth lets a design system implement features like global theming, responsive design and user customisation."}]},{"type":"element","tag":"h3","props":{"id":"system-wide-updates"},"children":[{"type":"text","value":"System-wide updates"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"They let developers and designers change system-wide themes and contexts, using only a single update."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design tokens prevent or reduce the need to find and replace thousands of instances of hard-coded values in the code."}]},{"type":"element","tag":"h2","props":{"id":"for-developers"},"children":[{"type":"text","value":"For developers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For information for developers using tokens to theme Ripple components see the "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guide"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"what-is-a-design-token","depth":2,"text":"What is a Design token?"},{"id":"why-use-design-tokens","depth":2,"text":"Why use design tokens?"},{"id":"ripple-design-tokens","depth":2,"text":"Ripple design tokens"},{"id":"how-to-read-ripple-design-token-names","depth":2,"text":"How to read Ripple design token names","children":[{"id":"parts-of-design-token-names","depth":3,"text":"Parts of design token names"},{"id":"examples","depth":3,"text":"Examples"},{"id":"steps-and-explanations","depth":3,"text":"Steps and explanations"}]},{"id":"best-practices","depth":2,"text":"Best practices"},{"id":"why-are-tokens-important-for-design","depth":2,"text":"Why are tokens important for design?","children":[{"id":"purpose-driven","depth":3,"text":"Purpose-driven"},{"id":"single-source-of-truth","depth":3,"text":"Single source of truth"},{"id":"system-wide-updates","depth":3,"text":"System-wide updates"}]},{"id":"for-developers","depth":2,"text":"For developers"}]}},"_type":"markdown","_id":"content:design-system:2.design:3.design-tokens.md","_source":"content","_file":"design-system/2.design/3.design-tokens.md","_extension":"md"},{"_path":"/design-system/design/theming-guidance-for-designers","_dir":"design","_draft":false,"_partial":false,"_locale":"","title":"Theming guidance for designers","description":null,"layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Jump to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/#create-a-custom-theme"},"children":[{"type":"text","value":"Create a custom theme"}]},{"type":"text","value":"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/#component-specific-theming"},"children":[{"type":"text","value":"Component-specific theming"}]},{"type":"text","value":"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/#theme-accessibility"},"children":[{"type":"text","value":"Theme accessibility"}]},{"type":"text","value":"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/#automatic-colour-token-logic"},"children":[{"type":"text","value":"Automatic colour token logic"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2.0 has been designed with in-built custom theming capabilities. Theming can be applied if your site requires department or entity branding and has been approved to use theming. Please note it is recommend you utilise the brand equity of vic.gov.au where possible and only theme your site if needed and approved. Please contact the SDP team for more information on approvals for theming."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple uses primary and accent colours, an optional gradient, a link colour and a focus state colour. You can read more about their roles and uses in the colour documentation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When theming your site, its styles and components will re-theme automatically. This has been done through the use of design tokens. Design tokens represent repeated design decisions that make up a design system's visual style. Tokens replace static values, such as hex codes for colour. The token informs how colour is used and inherited to ensure a consistent and accessible user experience."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We’ve designed a colour testing process so the selected colours will pass the accessibility contrast ratios. It classifies the selected colours into a ‘light’ or ‘dark’ category. The colour system will then automatically provide accessible colour contrast."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We have aimed to conform to the Web Content Accessibility Guideline (WCAG) requirements, but we recommend you perform your own accessibility checks where possible to ensure the guidelines are being met."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To learn more about if your site should be themed, please contact the Single Digital Presence (SDP) team."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"create-a-custom-theme"},"children":[{"type":"text","value":"Create a custom theme"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple has been designed with a primary and accent colour. These inform the colour framework."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A link colour, focus colour and optional gradient are also required when theming."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary, accent and focus colours can be either light or dark:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"'Light' means the colour is WCAG 2.1 AA compliant with dark type (rpl-clr-dark / #1A1A1A)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"‘Dark’ means the colour is WCAG 2.1 AA compliant with light type (rpl-clr-light / #FFFFFF)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To classify your colour as light or dark, we recommend the use "},{"type":"element","tag":"a","props":{"href":"https://webaim.org/resources/contrastchecker/","rel":["nofollow"]},"children":[{"type":"text","value":"WebAim Colour Contrast Checker"}]},{"type":"text","value":" or the "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/community/plugin/733159460536249875","rel":["nofollow"]},"children":[{"type":"text","value":"Figma plugin, A11y - Colour Contrast Checker"}]},{"type":"text","value":" to see if the colour is accessible with the Ripple 2.0 dark or light type colours listed above."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Classifying colours as either ‘dark’ or ‘light’ informs the implementation of other colour tokens, aiming to conform to WCAG 2.1 AA colour contrast requirements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It is recommended that the primary colour is always visually darker than the accent and is visually different at glance. This will ensure your users are quickly and easily directed to the most important areas of a web page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Guidance for creating your own theme can be found on the Theming page of the "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/file/mgPlLh5IFKAkDoSID9Vpi1/Ripple-2.0?type=design&node-id=9557%3A70609&t=dK1cmsWLfSmpr9Ff-1","rel":["nofollow"]},"children":[{"type":"text","value":"Ripple 2.0 Design System Figma file"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you don’t have access, you can "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/ripple-design-system","rel":["nofollow"]},"children":[{"type":"text","value":"request access to view the Ripple 2.0 Design System"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"component-specific-theming"},"children":[{"type":"text","value":"Component-specific theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple 2.0 Design System has components that allow for specific theming. This is optional and if not used, components will adopt the default framework styling. Component-specific theming is defined at a site level, and will affect all instances of the component."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are 2 options for component-specific styling:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"neutral"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"custom."}]}]},{"type":"element","tag":"h3","props":{"id":"neutral"},"children":[{"type":"text","value":"Neutral"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Neutral can be applied to the following components:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"buttons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"header (only reverse and image variants)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"footer."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The colour of neutral component variants cannot be changed. Neutral components have predefined neutral styling and cannot be edited or customised."}]},{"type":"element","tag":"h3","props":{"id":"custom"},"children":[{"type":"text","value":"Custom"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Custom component theming can only be applied to the footer."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The footer has been created with component-specific design tokens. It is recommended custom theming is only done if required."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To learn more about custom styling please see the Theming page of the "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/file/mgPlLh5IFKAkDoSID9Vpi1/Ripple-2.0?type=design&node-id=9557%3A70609&t=dK1cmsWLfSmpr9Ff-1","rel":["nofollow"]},"children":[{"type":"text","value":"Ripple 2.0 Design System Figma file"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theme-accessibility"},"children":[{"type":"text","value":"Theme accessibility"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2.0 has been designed with the aim to conform to WCAG 2.1 AA standards (below). For websites built on the SDP platform, it is mandatory to meet WCAG 2.1 AA level standards. These accessibility standards are also strongly recommended for all Victorian Government communications built using the Ripple design system (see: "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/brand-victoria-guidelines-logos","rel":["nofollow"]},"children":[{"type":"text","value":"Brand Victoria guidelines"}]},{"type":"text","value":" for more information)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Colour contrast is the amount of perceived difference between 2 colours. This is represented as a ratio. A high ratio indicates greater difference between colours and therefore higher contrast."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Colour contrast impacts the readability of your content. It is important for users with low vision or a colour vision deficiency."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html","rel":["nofollow"]},"children":[{"type":"text","value":"1.4.3 Contrast Minimum (Level AA)"}]},{"type":"text","value":"\nThe visual presentation of "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/WCAG21/#dfn-text","rel":["nofollow"]},"children":[{"type":"text","value":"text"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/WCAG21/#dfn-images-of-text","rel":["nofollow"]},"children":[{"type":"text","value":"images of text"}]},{"type":"text","value":" has a "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio","rel":["nofollow"]},"children":[{"type":"text","value":"contrast ratio"}]},{"type":"text","value":" of at least 4.5:1, except for the following:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/WCAG21/#dfn-large-scale","rel":["nofollow"]},"children":[{"type":"text","value":"Large-scale"}]},{"type":"text","value":" text and images of large-scale text have a contrast ratio of at least 3:1;"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text or images of text that are part of an inactive "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/WCAG21/#dfn-user-interface-components","rel":["nofollow"]},"children":[{"type":"text","value":"user interface component"}]},{"type":"text","value":", that are "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/WCAG21/#dfn-pure-decoration","rel":["nofollow"]},"children":[{"type":"text","value":"pure decoration"}]},{"type":"text","value":", that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text that is part of a logo or brand name has no contrast requirement."}]}]},{"type":"element","tag":"h3","props":{"id":"accessibility-testing-requirements"},"children":[{"type":"text","value":"Accessibility testing requirements"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When testing, websites on the SDP platform are required to meet AA standards. Your website must meet a "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html","rel":["nofollow"]},"children":[{"type":"text","value":"minimum contrast ratio of 4:5:1"}]},{"type":"text","value":" for normal text contrast, 3:1 for large text and non-text elements must be met."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Links are required to meet a ratio of 4.5:1 colour contrast."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In the Ripple 2.0 Design System the primary, accent and focus colours are tested against:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"dark type / rpl-clr-dark / #1A1A1A"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"light type / rpl-clr-light / #FFFFFF."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The link colour is tested against 3 colours:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"light type / rpl-clr-light / #FFFFFF"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"rpl-clr-neutral-100 / #F5F5F5"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"rpl-clr-accent-alt / #E6F5FD (example hex only)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Colour vision deficiency: it is recommended to also test your colour palette for colour blindness. Some colours can appear similar to people with colour vision deficiency. We recommend using the "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/community/plugin/733343906244951586","rel":["nofollow"]},"children":[{"type":"text","value":"Figma plugin 'Color Blind'"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"colour-token-automatic-logic"},"children":[{"type":"text","value":"Colour token automatic logic"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Below is a full list of colour tokens required to theme the Ripple 2.0 Design System."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Aiming to meet WCAG 2.1 AA colour contrast requirements, some token values are automatic based on their use in the system. This ensures all text-based content meets colour contrast accessibility requirements.\nFor example, if the primary colour is classified as dark:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast will automatically be rpl-clr-light"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-accessible will automatically be rpl-clr-primary."}]}]},{"type":"element","tag":"h3","props":{"id":"core"},"children":[{"type":"text","value":"Core"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Custom / Automatic"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-primary"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-primary-alt"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-primary-alpha"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-primary')"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-accent"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-accent-alt"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-focus"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-link"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-gradient-horizontal"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-gradient-vertical"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Custom"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"typography-colour-tokens"},"children":[{"type":"text","value":"Typography colour tokens"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Custom / Automatic"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-primary’ contrast requirements)"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast-alpha"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-type-primary-contrast')"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-accent-contrast"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-accent’ contrast requirements)"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-accessible"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-primary’ contrast requirements)"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-alt-accessible"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-primary’ contrast requirements)"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-focus-contrast"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-focus’ contrast requirements)"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"footer-specific-optional"},"children":[{"type":"text","value":"Footer-specific (optional)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See: "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/#component-specific-theming"},"children":[{"type":"text","value":"component-specific theming"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Custom / Automatic"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-footer"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Custom or automatic"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-footer-alt"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Custom or automatic"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-footer-contrast"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-footer’ contrast requirements)"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-footer-accessible"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-footer’ contrast requirements)"}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"automatic-colour-token-logic"},"children":[{"type":"text","value":"Automatic Colour Token Logic"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Based on the colour contrast requirements for the primary, accent and focus colours, some tokens are automatic to aim to conform to WCAG 2.0 AA colour contrast accessibility."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"‘Light’ means the colour (for example, primary) is AA compliant with dark type (rpl-clr-dark / #1A1A1A)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"‘Dark’ means the colour (for example, primary) is AA compliant with light type (rpl-clr-light / #FFFFFF)."}]}]},{"type":"element","tag":"h3","props":{"id":"primary-access-focus-and-link"},"children":[{"type":"text","value":"Primary, Access, Focus and Link"}]},{"type":"element","tag":"h4","props":{"id":"primary"},"children":[{"type":"text","value":"Primary"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Colour ‘Dark’"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Colour 'Light"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-primary-alpha"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-primary at 50% opacity"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-primary at 50% opacity"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-light"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-dark"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast-alpha"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast at 75% opacity"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast at 75% opacity"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-accessible"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-primary"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-dark"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-alt-accessible"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rlpl-clr-primary-alt"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-dark"}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"accent"},"children":[{"type":"text","value":"Accent"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Colour ‘Dark’"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Colour 'Light"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-accent-contrast"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-light"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-dark"}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"focus"},"children":[{"type":"text","value":"Focus"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Colour ‘Dark’"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Colour 'Light"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-focus-contrast"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-light"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-dark"}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"link"},"children":[{"type":"text","value":"Link"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Colour ‘Dark’"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Colour 'Light"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"If Primary ‘Dark’"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"If Primary ‘Light’"}]}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-link"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-primary"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Custom"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"gradient"},"children":[{"type":"text","value":"Gradient"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Including a gradient is optional for theming."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If a gradient is not used, 'rpl-clr-accent' will be used in its place."}]},{"type":"element","tag":"h4","props":{"id":"gradient-1"},"children":[{"type":"text","value":"Gradient"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Gradient"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Accent"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-gradient-horizontal"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-gradient (90 degrees)"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-accent"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-gradient-vertical"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-gradient (180 degrees)"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-accent"}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"create-a-custom-theme","depth":2,"text":"Create a custom theme"},{"id":"component-specific-theming","depth":2,"text":"Component-specific theming","children":[{"id":"neutral","depth":3,"text":"Neutral"},{"id":"custom","depth":3,"text":"Custom"}]},{"id":"theme-accessibility","depth":2,"text":"Theme accessibility","children":[{"id":"accessibility-testing-requirements","depth":3,"text":"Accessibility testing requirements"}]},{"id":"colour-token-automatic-logic","depth":2,"text":"Colour token automatic logic","children":[{"id":"core","depth":3,"text":"Core"},{"id":"typography-colour-tokens","depth":3,"text":"Typography colour tokens"},{"id":"footer-specific-optional","depth":3,"text":"Footer-specific (optional)"}]},{"id":"automatic-colour-token-logic","depth":2,"text":"Automatic Colour Token Logic","children":[{"id":"primary-access-focus-and-link","depth":3,"text":"Primary, Access, Focus and Link"},{"id":"gradient","depth":3,"text":"Gradient"}]}]}},"_type":"markdown","_id":"content:design-system:2.design:4.theming-guidance-for-designers.md","_source":"content","_file":"design-system/2.design/4.theming-guidance-for-designers.md","_extension":"md"},{"_path":"/design-system/develop/getting-started","_dir":"develop","_draft":false,"_partial":false,"_locale":"","title":"Getting started","description":"Information for developers using the Ripple 2 UI libraries","layout":"page","links":[{"text":"Github","url":"https://github.com/dpc-sdp/ripple-framework"},{"text":"Storybook","url":"/storybook"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This section contains information about the Ripple user interface libraries. These libraries are a collection of UI components which implement the Ripple Design System. The components are written in Vue and are split accross two packages:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-ui-core"}]},{"type":"text","value":": A collection of common UI components used in SDP sites. For example buttons, cards, icons and typography."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-ui-forms"}]},{"type":"text","value":": A collection of form inputs and support for building complex forms via "},{"type":"element","tag":"a","props":{"href":"https://formkit.com/","rel":["nofollow"]},"children":[{"type":"text","value":"Formkit"}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"These docs are for Ripple 2"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2 is a complete rebuild. If you are looking for information about the previous version of Ripple please visit the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple","rel":["nofollow"]},"children":[{"type":"text","value":"original Ripple GitHub repo"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Are you developing a site on the SDP platform?"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This section is about the Ripple UI component libraries, and there is a lot more to developing a site on the Single Digital Presence (SDP) stack that is not covered here."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For information about using Ripple in SDP sites, visit the "},{"type":"element","tag":"a","props":{"href":"/framework"},"children":[{"type":"text","value":"Ripple Framework for SDP documentation"}]}]}]},{"type":"element","tag":"h2","props":{"id":"accessing-the-source-code"},"children":[{"type":"text","value":"Accessing the Source code"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2 is an open source project and the source code can be found in the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework","rel":["nofollow"]},"children":[{"type":"text","value":"ripple-framework monorepo on Github"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This monorepo contains a lot more than just the UI libraries so we've provided direct links to packages below:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-core","rel":["nofollow"]},"children":[{"type":"text","value":"View "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-ui-core"}]},{"type":"text","value":" on Github"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-forms","rel":["nofollow"]},"children":[{"type":"text","value":"View "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-ui-forms"}]},{"type":"text","value":" on Github"}]}]}]},{"type":"element","tag":"h2","props":{"id":"viewing-examples-in-storybook"},"children":[{"type":"text","value":"Viewing examples in Storybook"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple Storybook has information about props and slots that each Vue component supports. "},{"type":"element","tag":"a","props":{"href":"/storybook"},"children":[{"type":"text","value":"View the Ripple storybook"}]},{"type":"text","value":" to start exploring the available components."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Most of the examples found on this documentation site link directly examples in storybook."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/usage"},"children":[{"type":"text","value":"usage"}]},{"type":"text","value":" guide for information about getting started with the different ways of implementing Ripple."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"accessing-the-source-code","depth":2,"text":"Accessing the Source code"},{"id":"viewing-examples-in-storybook","depth":2,"text":"Viewing examples in Storybook"},{"id":"usage","depth":2,"text":"Usage"}]}},"_type":"markdown","_id":"content:design-system:3.develop:1.getting-started.md","_source":"content","_file":"design-system/3.develop/1.getting-started.md","_extension":"md"},{"_path":"/design-system/develop/contributing","_dir":"develop","_draft":false,"_partial":false,"_locale":"","title":"Contributing","description":"Information for developers wishing to contribute to the Ripple 2 UI libraries","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When contributing or participating in discussions, ensure that you are following our "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/blob/develop/CODE_OF_CONDUCT.md","rel":["nofollow"]},"children":[{"type":"text","value":"contributor code of conduct"}]}]}]},{"type":"element","tag":"h2","props":{"id":"report-an-issue"},"children":[{"type":"text","value":"Report an issue"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you find an issue in Ripple, you can create an issue in github here "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/issues","rel":["nofollow"]},"children":[{"type":"text","value":"https://github.com/dpc-sdp/ripple-framework/issues"}]},{"type":"text","value":". Make sure to follow the template provided and provide plenty of detail so that your issue has a better chance of being fixed."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is an open source project, so PRs are always welcomed if you've already found a fix for the issue."}]},{"type":"element","tag":"h2","props":{"id":"join-the-discussion"},"children":[{"type":"text","value":"Join the discussion"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Do you have an idea for a new component or feature? Use the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions","rel":["nofollow"]},"children":[{"type":"text","value":"Discussions"}]},{"type":"text","value":" feature in Ripple Github repo to start the conversation."}]},{"type":"element","tag":"h2","props":{"id":"writing-code"},"children":[{"type":"text","value":"Writing code"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are ready to write some code in the Ripple git repo, please see the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/blob/develop/CONTRIBUTING.md","rel":["nofollow"]},"children":[{"type":"text","value":"Contributing guide"}]},{"type":"text","value":" in Github."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"report-an-issue","depth":2,"text":"Report an issue"},{"id":"join-the-discussion","depth":2,"text":"Join the discussion"},{"id":"writing-code","depth":2,"text":"Writing code"}]}},"_type":"markdown","_id":"content:design-system:3.develop:2.contributing.md","_source":"content","_file":"design-system/3.develop/2.contributing.md","_extension":"md"},{"_path":"/design-system/develop/theming","_dir":"develop","_draft":false,"_partial":false,"_locale":"","title":"Theme and brand application","description":"Information for developers using Ripple 2 UI libraries","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple allows for customisation of it's components to allow application of Victorian government departments and agencies brand and identity within a common framework. For guidance on how to theme Ripple in an accessible and consistent way, see the "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]}]},{"type":"element","tag":"h2","props":{"id":"css-variables"},"children":[{"type":"text","value":"CSS Variables"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is fully theme-able using "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties","rel":["nofollow"]},"children":[{"type":"text","value":"CSS variables"}]},{"type":"text","value":", this allows runtime customisation of site variables within all modern browsers. CSS variables form the API for allowing customisation of SDP sites by setting base tokens for your site."}]},{"type":"element","tag":"h2","props":{"id":"example"},"children":[{"type":"text","value":"Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To override theme values, simply set the css variable at "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":":root"}]},{"type":"text","value":" or an element that wraps elements you want to theme."}]},{"type":"element","tag":"pre","props":{"className":"language-css shiki shiki-themes github-light","code":":root {\n  --rpl-clr-primary: #6B19A3;\n}\n","language":"css","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":":root"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  --rpl-clr-primary"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":"#6B19A3"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":";\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"}\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the "},{"type":"element","tag":"a","props":{"href":"/design-system/styles/colour"},"children":[{"type":"text","value":"colour"}]},{"type":"text","value":" page for a list of theme-able colours."}]},{"type":"element","tag":"h2","props":{"id":"assets"},"children":[{"type":"text","value":"Assets"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alongside the inclusion of site logos, Ripple also uses graphic devices in several key components that allow for customising to apply brand."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the following components for guidance on providing graphic elements to theme your site:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/styles/logo"},"children":[{"type":"text","value":"Logos"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/header"},"children":[{"type":"text","value":"Header"}]}]}]},{"type":"element","tag":"h2","props":{"id":"brand-application-in-sdp-sites"},"children":[{"type":"text","value":"Brand application in SDP sites"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the "},{"type":"element","tag":"a","props":{"href":"/framework"},"children":[{"type":"text","value":"SDP Ripple framework"}]},{"type":"text","value":" section for more information on customising SDP websites and applying brand."}]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"css-variables","depth":2,"text":"CSS Variables"},{"id":"example","depth":2,"text":"Example"},{"id":"assets","depth":2,"text":"Assets"},{"id":"brand-application-in-sdp-sites","depth":2,"text":"Brand application in SDP sites"}]}},"_type":"markdown","_id":"content:design-system:3.develop:2.theming.md","_source":"content","_file":"design-system/3.develop/2.theming.md","_extension":"md"},{"_path":"/design-system/develop/usage","_dir":"develop","_draft":false,"_partial":false,"_locale":"","title":"Usage","description":"Ripple components can be used in several different ways depending on your project needs.","layout":"page","links":[{"text":"Github","url":"https://github.com/dpc-sdp/ripple-framework"},{"text":"Storybook","url":"/storybook"}],"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"using-ripple-ui-components"},"children":[{"type":"text","value":"Using Ripple UI components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Whilst Ripple is built to implement sites using a framework built on Vue JS and Nuxt, its modular architecture allows adopting different parts depending on your requirements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"ripple is made up of Figma design, CSS styles, Vue JS components and Nuxt JS Sites","src":"/assets/img/modules/rpl-modules.png"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple UI libraries are usable in the following contexts:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"svg","props":{"id":"docs-sprite","ariaHidden":"true","className":["rpl-svg-sprite--hidden"]},"children":[{"type":"element","tag":"defs","props":{},"children":[{"type":"element","tag":"symbol","props":{"xmlns":"http://www.w3.org/2000/svg","id":"icon-check","viewBox":"0 0 24 24"},"children":[{"type":"element","tag":"path","props":{"d":"M22.9.4c-1.1-.7-2.6-.4-3.3.8L9.2 17.8l-5.1-5.1c-.9-.9-2.5-.9-3.4 0s-.9 2.5 0 3.4l7.2 7.2c1.1 1.1 2.9.9 3.7-.4l12-19.2c.7-1.2.4-2.6-.7-3.3z"},"children":[]}]}]}]}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Library"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"CSS styles"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Vue Components"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Ripple Framework (Nuxt)"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Web components"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Ripple UI Core"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-check"},"children":[]}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-check"},"children":[]}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-check"},"children":[]}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Partial support"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Ripple UI Forms"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-check"},"children":[]}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-check"},"children":[]}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-check"},"children":[]}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"not supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-cancel"},"children":[]}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"using-in-an-sdp-website"},"children":[{"type":"text","value":"Using in an SDP website"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are using Ripple 2 to build a site on the SDP platform, the UI libraries will be included automatically when scaffolding your project."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For documentation on using Ripple with Nuxt in SDP sites, visit the "},{"type":"element","tag":"a","props":{"href":"/framework"},"children":[{"type":"text","value":"Ripple Framework documentation"}]}]}]},{"type":"element","tag":"h3","props":{"id":"github-packages"},"children":[{"type":"text","value":"Github Packages"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2 is hosted publicly on Github Packages (ghcr) under the "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"@dpc/sdp"}]},{"type":"text","value":" namespace, please read these "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/usage/access-to-github-packages"},"children":[{"type":"text","value":"setup instructions for accessing Github Packages"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"using-ripple-ui-components","depth":2,"text":"Using Ripple UI components","children":[{"id":"using-in-an-sdp-website","depth":3,"text":"Using in an SDP website"},{"id":"github-packages","depth":3,"text":"Github Packages"}]}]}},"_type":"markdown","_id":"content:design-system:3.develop:3.usage.md","_source":"content","_file":"design-system/3.develop/3.usage.md","_extension":"md"},{"_path":"/design-system/develop/usage/access-to-github-packages","_dir":"usage","_draft":false,"_partial":false,"_locale":"","title":"Access to Github Packages","description":"How to access and use repos hosted on Github Packages.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"NPM allows the use of multiple repo hosts, as long as they can be identified by namespace."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2 is hosted publicly on Github Packages (ghcr) under the "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"@dpc/sdp"}]},{"type":"text","value":" namespace, so a few steps need to be followed access these packages, while also co-existing with the npm ecosystem."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, create a Personal Access Token on Github:"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Visit "},{"type":"element","tag":"a","props":{"href":"https://github.com/settings/tokens","rel":["nofollow"]},"children":[{"type":"text","value":"https://github.com/settings/tokens"}]},{"type":"text","value":" and select "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Generate new token"}]},{"type":"text","value":" > "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Generate new token (classic)"}]}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Screenshot of a clicked button (title Generate new token) that has opened a drop-down menu with two options: fine-grained and classic","src":"/img/generate.jpg","style":"width:360px"},"children":[]},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Fill in the "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Note"}]},{"type":"text","value":" and choose an "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Expiration"}]},{"type":"text","value":" - the 30 day default is generally fine, you'll receive a reminder to regenerate the token just before expiry"}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Screenshot of personal access token setup form, with 'Note' filled in as 'public ghcr access' and 'Expiration' set to default of 30 days","src":"/img/token.jpg","style":"width:505px"},"children":[]},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Set the scope to only allow "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"read:packages"}]},{"type":"text","value":", and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Generate"}]},{"type":"text","value":" token"}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Screenshot of scope, with only read:packages selected","src":"/img/permissions.jpg","style":"width:827px"},"children":[]},{"type":"element","tag":"ol","props":{"start":4},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Store the resulting token somewhere secure, and add it to either a user "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":".npmrc"}]},{"type":"text","value":" (recommended) or the project-level "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":".npmrc"}]},{"type":"text","value":" (the url on line 2 below is protocol-less, not a comment):"}]}]},{"type":"element","tag":"pre","props":{"code":"@dpc-sdp:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=<github personal access token>\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"@dpc-sdp:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=<github personal access token>\n"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:design-system:3.develop:4.usage:1.access-to-github-packages.md","_source":"content","_file":"design-system/3.develop/4.usage/1.access-to-github-packages.md","_extension":"md"},{"_path":"/design-system/develop/usage/vue","_dir":"usage","_draft":false,"_partial":false,"_locale":"","title":"Vue","description":"How to use Ripple components with Vue.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, set up "},{"type":"element","tag":"a","props":{"href":"access-to-github-packages"},"children":[{"type":"text","value":"access to Github Packages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Next, install Ripple UI in your project:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"npm install @dpc-sdp/ripple-ui-core --save"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order for the styles to appear correctly, you will need to import them. Do this at the root of your project (usually in your app.vue or index.js file):"}]},{"type":"element","tag":"pre","props":{"className":"language-js shiki shiki-themes github-light","code":"import '@dpc-sdp/ripple-ui-core/style';\nimport '@dpc-sdp/ripple-ui-core/style/components';\n","language":"js","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '@dpc-sdp/ripple-ui-core/style'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":";\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '@dpc-sdp/ripple-ui-core/style/components'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":";\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use a component, import it from "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"@dpc-sdp/ripple-ui-core/vue"}]},{"type":"text","value":", note the addition of "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"/vue"}]},{"type":"text","value":"."}]},{"type":"element","tag":"pre","props":{"className":"language-js shiki shiki-themes github-light","code":"<script setup>\nimport { RplButton } from '@dpc-sdp/ripple-ui-core/vue';\n</script>\n\n<template>\n  <RplButton variant=\"outlined\" />\n</template>\n","language":"js","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" setup"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"import { RplButton } from '@dpc-sdp/ripple-ui-core/vue';\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":"RplButton"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" variant"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"outlined\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" />\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Please see this "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-vue-example","rel":["nofollow"]},"children":[{"type":"text","value":"example app"}]},{"type":"text","value":" for a basic demonstration of how to use Ripple components in a Vue app."}]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:design-system:3.develop:4.usage:2.vue.md","_source":"content","_file":"design-system/3.develop/4.usage/2.vue.md","_extension":"md"},{"_path":"/design-system/develop/usage/nuxt","_dir":"usage","_draft":false,"_partial":false,"_locale":"","title":"Nuxt","description":"How to use Ripple components with Nuxt in a non-SDP context.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, set up "},{"type":"element","tag":"a","props":{"href":"access-to-github-packages"},"children":[{"type":"text","value":"access to Github Packages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Next, install Ripple UI in your project:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"npm install @dpc-sdp/ripple-ui-core --save"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple UI exports a nuxt module that you can add to your nuxt config, note the addition of "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"/nuxt"}]},{"type":"text","value":":"}]},{"type":"element","tag":"pre","props":{"className":"language-js shiki shiki-themes github-light","code":"export default defineNuxtConfig({\n  modules: [\n    '@dpc-sdp/ripple-ui-core/nuxt'\n  ]\n})\n","language":"js","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" default"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  modules: [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"    '@dpc-sdp/ripple-ui-core/nuxt'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"})\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order for the styles to appear correctly, you will need to import them. Do this at the root of your project (usually in your app.vue file):"}]},{"type":"element","tag":"pre","props":{"className":"language-js shiki shiki-themes github-light","code":"import '@dpc-sdp/ripple-ui-core/style';\nimport '@dpc-sdp/ripple-ui-core/style/components';\n","language":"js","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '@dpc-sdp/ripple-ui-core/style'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":";\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '@dpc-sdp/ripple-ui-core/style/components'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":";\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There is no need to import the components as they will be registered globally by the nuxt module"}]},{"type":"element","tag":"pre","props":{"className":"language-js shiki shiki-themes github-light","code":"<template>\n  <RplButton variant=\"outlined\" />\n</template>\n","language":"js","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":"RplButton"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" variant"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"outlined\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" />\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Even if you are not using SDP, the "},{"type":"element","tag":"a","props":{"href":"/framework"},"children":[{"type":"text","value":"Ripple Framework documentation"}]},{"type":"text","value":" is a good starting point for any Nuxt development using Ripple."}]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:design-system:3.develop:4.usage:3.nuxt.md","_source":"content","_file":"design-system/3.develop/4.usage/3.nuxt.md","_extension":"md"},{"_path":"/design-system/develop/usage/webcomponents","_dir":"usage","_draft":false,"_partial":false,"_locale":"","title":"Web components","description":"How to use the web component exports with other front-end systems.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Web components are based on existing web standards. Features to support web components are currently being added to the HTML and DOM specs, letting web developers easily extend HTML with new elements with encapsulated styling and custom behavior.\n"},{"type":"element","tag":"a","props":{"href":"https://www.webcomponents.org/","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.webcomponents.org/"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple exports a limited set of components as standard browser native web components. The advantage of using Web components is they can be dropped straight into conventional webpages and any CMS without a javascript build pipeline, such as Squiz Matrix and Salesforce."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Support for this output target is currently experimental, if you think you have a use case for using Web components in your project please add a comment "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions/658","rel":["nofollow"]},"children":[{"type":"text","value":"here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As with the other methods, set up "},{"type":"element","tag":"a","props":{"href":"access-to-github-packages"},"children":[{"type":"text","value":"access to Github Packages"}]},{"type":"text","value":" and then install Ripple UI in your project:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"npm install @dpc-sdp/ripple-ui-core --save"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A basic example of how to use the web component exports can be found under "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/tree/develop/examples/webcomponents","rel":["nofollow"]},"children":[{"type":"text","value":"examples/webcomponents"}]},{"type":"text","value":" in the ripple-framework monorepo."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:design-system:3.develop:4.usage:4.webcomponents.md","_source":"content","_file":"design-system/3.develop/4.usage/4.webcomponents.md","_extension":"md"},{"_path":"/design-system/develop/usage/css-only","_dir":"usage","_draft":false,"_partial":false,"_locale":"","title":"Styles only","description":"Using the design system styles without a front-end framework.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple UI core exports it's CSS stylesheets directly. If you have a use case where you can't use any of the other outputs, you can use our styles directly and provide your own markup based upon the rendered examples in Storybook."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, set up "},{"type":"element","tag":"a","props":{"href":"access-to-github-packages"},"children":[{"type":"text","value":"access to Github Packages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Next, install Ripple UI in your project:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"npm install @dpc-sdp/ripple-ui-core --save"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can import CSS styles from the ripple-ui-core package."}]},{"type":"element","tag":"pre","props":{"className":"language-js shiki shiki-themes github-light","code":"import '@dpc-sdp/ripple-ui-core/style';\nimport '@dpc-sdp/ripple-ui-core/style/components';\n","language":"js","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '@dpc-sdp/ripple-ui-core/style'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":";\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '@dpc-sdp/ripple-ui-core/style/components'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":";\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We recommend that you lock the version of "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"@dpc-sdp/ripple-ui-core"}]},{"type":"text","value":" so that any future changes of styles without changes to markup do not break your application."}]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:design-system:3.develop:4.usage:5.css-only.md","_source":"content","_file":"design-system/3.develop/4.usage/5.css-only.md","_extension":"md"},{"_path":"/design-system/styles/colour","_dir":"styles","_draft":false,"_partial":false,"_locale":"","title":"Colour","description":"Colour plays an important role in creating a consistent and strong visual digital products and services.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You want users to recognise your brand. A well-designed colour palette can help you create a consistent look and feel."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default colours, made up of two blues, reflect vic.gov.au branding. This strengthens the association with the Victorian Government."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The design system contains a colour framework. You can change it if your site requires department or entity branding."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We've designed and tested colour pairings that already pass accessibility contrast ratios. However, we recommend you perform your own checks to ensure you're meeting WCAG requirements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you change your core brand colours, your styles and components will re-theme automatically using the design system's colour framework."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For more guidance on theming options, see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming/"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"You don’t need to use hex colours in code."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By using CSS variables, any branding or theming changes will automatically reflect in your product. See CSS variables below, or see the theming documentation."}]}]},{"type":"element","tag":"h2","props":{"id":"core-palette"},"children":[{"type":"text","value":"Core palette"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The core palette includes primary and secondary colours."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The ‘Primary’ colour is for key visual elements and components. They form the foundation of the colour palette."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The ‘Accent’ colour is an accent to help highlight key components or pieces of information. It's used in combination with the primary colour to create a more dynamic and engaging visual experience."}]}]},{"type":"element","tag":"h3","props":{"id":"primary"},"children":[{"type":"text","value":"Primary"}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.primary\"]"},"children":[]},{"type":"element","tag":"h3","props":{"id":"accent"},"children":[{"type":"text","value":"Accent"}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.accent\"]"},"children":[]},{"type":"element","tag":"h2","props":{"id":"neutral-palette"},"children":[{"type":"text","value":"Neutral palette"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Neutral palette is on a colour scale of white to black."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The 10 steps represent this scale based on our requirements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Neutral colours are consistent throughout the design system. They are for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"text colours"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"borders"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"other elements, like a neutral background."}]}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.neutral\"]"},"children":[]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.light\",\"clr.dark\"]"},"children":[]},{"type":"element","tag":"h2","props":{"id":"typography-colours"},"children":[{"type":"text","value":"Typography colours"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Type colours have a ratio of at least 4.5:1 (or 3:1 for text larger than 18 point). This was selected to try and conform to the Web Content Accessibility Guidelines (WCAG 2.1)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Interaction colours are in addition to the core colour palette. This guarantees accessible text."}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.type.default\",\"clr.type.light\",\"clr.type.primary.contrast\",\"clr.type.accent.contrast\"]"},"children":[]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.link\",\"clr.link-visited\",\"clr.focus\"]"},"children":[]},{"type":"element","tag":"h2","props":{"id":"gradients"},"children":[{"type":"text","value":"Gradients"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Gradients bring attention to components or information. Only use them on occasion."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All gradients should appear from dark to light in their usage."}]},{"type":"element","tag":"docs-gradient-table","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"sematics"},"children":[{"type":"text","value":"Sematics"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Semantic colours add meaning to element. They provide contextual or transactional feedback to the user. We have four semantic uses:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Success"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Warning"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using them outside of their semantic meaning."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"These colours help signal to users the meaning of some components. For example, for alerts or error messages."}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.information\",\"clr.success\",\"clr.warning\",\"clr.error\"]"},"children":[]},{"type":"element","tag":"h2","props":{"id":"focus"},"children":[{"type":"text","value":"Focus"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/design-system/styles/focus-state/"},"children":[{"type":"text","value":"focus state"}]},{"type":"text","value":" for guidance."}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.focus\"]"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see theming guidance for designers or developers."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"core-palette","depth":2,"text":"Core palette","children":[{"id":"primary","depth":3,"text":"Primary"},{"id":"accent","depth":3,"text":"Accent"}]},{"id":"neutral-palette","depth":2,"text":"Neutral palette"},{"id":"typography-colours","depth":2,"text":"Typography colours"},{"id":"gradients","depth":2,"text":"Gradients"},{"id":"sematics","depth":2,"text":"Sematics"},{"id":"focus","depth":2,"text":"Focus"},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:4.styles:colour.md","_source":"content","_file":"design-system/4.styles/colour.md","_extension":"md"},{"_path":"/design-system/styles/focus-state","_dir":"styles","_draft":false,"_partial":false,"_locale":"","title":"Focus state","description":"Focus states show when a user has highlighted an element, using an input method such as a keyboard or voice.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some users use keyboards or other devices to navigate through a page by jumping from one interactive element to the next. Focus states help users understand which element is currently selected and ready for interaction."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Focus states are orange and neutral-800, aiming to conform to the WCAG 2.1 Level AA "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html","rel":["nofollow"]},"children":[{"type":"text","value":"non-text contrast"}]},{"type":"text","value":" on any background colour."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We have chosen this orange colour as it is a direct opposite of our primary colour. This allows all colourblind users to see a visual difference. Focus state styling also removes any border radius to create a bigger visual difference to surrounding elements."}]},{"type":"element","tag":"h3","props":{"id":"inline-style"},"children":[{"type":"text","value":"Inline style"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The inline focus state helps links stand out from the rest of the content on a page. When a link receives focus, it will underline and change background colour. Other components and elements that look like links use the inline style."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"An example of focus state colour contrast","src":"/assets/img/focus-inline-focus.png"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":".rpl-u-focusable-inline"}]}]},{"type":"element","tag":"h3","props":{"id":"block-style"},"children":[{"type":"text","value":"Block style"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The block style completely highlights a section or whole component with the focus state. For example, when a button receives focus, a border is added to the bottom of the container and the background colour will change."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Focus Link Visual Block Sample","src":"/assets/img/focus-block-focus.png"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":".rpl-u-focusable-block"}]}]},{"type":"element","tag":"h3","props":{"id":"outline-focus-state-style"},"children":[{"type":"text","value":"Outline focus state style"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The outline styles are for when form inputs are focused. When a form field receives focus, it adds a border. If the element already has a border, the border gets thicker."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Focus Link Visual Outline Focus Sample","src":"/assets/img/focus-outline-focus.png"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":".rpl-u-focusable-outline"}]}]},{"type":"element","tag":"h3","props":{"id":"modified-focus-states-for-components"},"children":[{"type":"text","value":"Modified focus states for components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The alert component has a modified focus state colour. This is consistent across all alert variants. It meets colour contrast requirements on all semantic colours, including danger and warning."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The modified styling uses a white background in place of the orange, still with the dark content and border."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Component Modified Focus State Sample","src":"/assets/img/focus-alert-focus.png"},"children":[]},{"type":"element","tag":"h3","props":{"id":"css-variables"},"children":[{"type":"text","value":"CSS Variables"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The focus state has three CSS Variables."}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Swatch"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Element"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Value"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"CSS Variable"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"swatch","props":{"colour":"#FF9E1B"},"children":[]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Background Fill"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"#FF9E1B"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-focus"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"swatch","props":{"colour":"#1A1A1A"},"children":[]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Content / Text / Icons"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"#1A1A1A"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-focus-contrast"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"swatch","props":{"colour":"#1A1A1A"},"children":[]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Bottom Border"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"#1A1A1A"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-dark"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For advice on focus state theming, see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming/"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"inline-style","depth":3,"text":"Inline style"},{"id":"block-style","depth":3,"text":"Block style"},{"id":"outline-focus-state-style","depth":3,"text":"Outline focus state style"},{"id":"modified-focus-states-for-components","depth":3,"text":"Modified focus states for components"},{"id":"css-variables","depth":3,"text":"CSS Variables"},{"id":"theming","depth":3,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:4.styles:focus-state.md","_source":"content","_file":"design-system/4.styles/focus-state.md","_extension":"md"},{"_path":"/design-system/styles/grid","_dir":"styles","_draft":false,"_partial":false,"_locale":"","title":"Grid","description":"With up to 12 columns, you can build grids with responsive layouts across different breakpoints.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Grids are a crucial component of any design system. They provide a framework for arranging content in an appealing and structured manner."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We've designed the grid for a high degree of flexibility and responsiveness."}]},{"type":"element","tag":"h2","props":{"id":"breakpoints"},"children":[{"type":"text","value":"Breakpoints"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple has 5 breakpoints. These ensure content is at an optimal layout for readability and accessibility."}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Breakpoint"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Width"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Active content area"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"XS"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"<575px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"288 – 543px"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"S"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"576 – 767px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"544 – 735px"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"M"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"768 – 991px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"736 – 927px"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"L"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"992 – 1199px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"864 – 1071px"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"XL"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"1200px +"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"1040px"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"grids"},"children":[{"type":"text","value":"Grids"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The grid is made up of three elements: columns, gutters, and margins."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Visual of basic grid / column / gutter / margin anatomy","src":"/assets/img/Grid-Grid-Anatomy.png"},"children":[]}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Breakpoint"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Margins"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Gutter"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Column type / width"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"XS  • <575px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Fluid"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"S   • 576 – 767px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Fluid"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"M   • 768 – 991px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"32px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Fluid"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"L   • 992 – 1199px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"64px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Fluid"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"XL  • 1200px +"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"80px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"28px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Fixed / 61px"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the grid system to structure your content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Most vic.gov.au pages follow a ‘two-thirds and one-third’ layout. But, the grid system allows for more combinations if needed."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Your main content should always be in a two-thirds column. This is even if you’re not using a corresponding one-third column for secondary content."}]},{"type":"element","tag":"h3","props":{"id":"column-layouts"},"children":[{"type":"text","value":"Column layouts"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Column Span"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Layout"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Breakpoint"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"12"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Full"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"XS • S • M • L • XL"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Half"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"XS • S • M • L • XL"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Two thirds"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"M • L • XL"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"One third"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"M • L • XL"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"One quarter"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"L • XL"}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"breakpoints","depth":2,"text":"Breakpoints"},{"id":"grids","depth":2,"text":"Grids"},{"id":"usage","depth":2,"text":"Usage","children":[{"id":"column-layouts","depth":3,"text":"Column layouts"}]}]}},"_type":"markdown","_id":"content:design-system:4.styles:grid.md","_source":"content","_file":"design-system/4.styles/grid.md","_extension":"md"},{"_path":"/design-system/styles/icons","_dir":"styles","_draft":false,"_partial":false,"_locale":"","title":"Icons","description":"Use icons to illustrate actions and interactions, communicate statuses, and draw attention to important information.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Icons are a visual representation of an action, idea, or object. They provide a quick and easy way to communicate information. They can also enhance the usability of a design."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the Ripple Design System's icon set for a consistent user experience and a cohesive look and feel."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can add icons to components or pair them with text. Icons should have a clear relationship with their corresponding text or action. This keeps them accessible to users with visual impairments or disabilities."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using icons alone, as one user may interpret them differently to another."}]},{"type":"element","tag":"h2","props":{"id":"icon-library"},"children":[{"type":"text","value":"Icon Library"}]},{"type":"element","tag":"h4","props":{"id":"alerts"},"children":[{"type":"text","value":"Alerts"}]},{"type":"element","tag":"docs-icon-table","props":{"group":"alert"},"children":[]},{"type":"element","tag":"h4","props":{"id":"social"},"children":[{"type":"text","value":"Social"}]},{"type":"element","tag":"docs-icon-table","props":{"group":"social"},"children":[]},{"type":"element","tag":"h4","props":{"id":"standard"},"children":[{"type":"text","value":"Standard"}]},{"type":"element","tag":"docs-icon-table","props":{"group":"standard"},"children":[]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Accessibility tip"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you're using an icon by itself, ensure it's using the right label for screen readers."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you're using an icon and text, ensure only the text gets read out."}]}]},{"type":"element","tag":"h2","props":{"id":"application"},"children":[{"type":"text","value":"Application"}]},{"type":"element","tag":"h3","props":{"id":"sizing"},"children":[{"type":"text","value":"Sizing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple Design System displays icons at four sizes (12px, 16px, 24px, 32px) depending on their type, use and screen size."}]},{"type":"element","tag":"docs-icon-sizing-table","props":{":sizes":"[{\"xs\":\"12px\"},{\"s\":\"16px\"},{\"m\":\"24px\"},{\"l\":\"32px\"}]"},"children":[]},{"type":"element","tag":"h3","props":{"id":"spacing"},"children":[{"type":"text","value":"Spacing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ensure you use the right amount of space around an icon to allow for legibility. At the least, icons must have clear space of 50% of the height/width of the icon."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Visual of min space","src":"/assets/img/Icon-Clear-space.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"accessibility"},"children":[{"type":"text","value":"Accessibility"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For accessibility, ensure you:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"wrap icons within their interactive component"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"specify if an icon is decorative and informative by assigning the property in code"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"use descriptive and meaningful titles for informative icons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"use icons to represent the same action or idea."}]}]},{"type":"element","tag":"h2","props":{"id":"styling"},"children":[{"type":"text","value":"Styling"}]},{"type":"element","tag":"h3","props":{"id":"colour"},"children":[{"type":"text","value":"Colour"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If a background changes the colour of the text (for example, a button) the icon should take on the same colour as the text."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-elevated"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Icons used to represent a state should use the correct colour. For example, an icon used in a success notification should use rpl-clr-success."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-form-alert--success"},"children":[]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"icon-library","depth":2,"text":"Icon Library"},{"id":"application","depth":2,"text":"Application","children":[{"id":"sizing","depth":3,"text":"Sizing"},{"id":"spacing","depth":3,"text":"Spacing"}]},{"id":"accessibility","depth":2,"text":"Accessibility"},{"id":"styling","depth":2,"text":"Styling","children":[{"id":"colour","depth":3,"text":"Colour"}]}]}},"_type":"markdown","_id":"content:design-system:4.styles:icons.md","_source":"content","_file":"design-system/4.styles/icons.md","_extension":"md"},{"_path":"/design-system/styles/layer-styles","_dir":"styles","_draft":false,"_partial":false,"_locale":"","title":"Layer styles","description":null,"layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"border"},"children":[{"type":"text","value":"Border"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Borders create separation between elements and aid hierarchy and navigation. They are a solid border on one or more sides of an object or container."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Depending on where a border is being used, it can appear in 4 different thicknesses, 1px, 2px, 4px or 8px."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use a border to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"separate or segment blocks or sections of content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"highlight important elements such as featured content or a call to action"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"aid information hierarchy"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"support navigational structure"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"highlight an active navigation item."}]}]},{"type":"element","tag":"docs-layer-style-table","props":{"type":"border"},"children":[]},{"type":"element","tag":"h3","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Find examples of borders that add visual consistency on the "},{"type":"element","tag":"a","props":{"href":"/design-system/components/in-page-navigation/"},"children":[{"type":"text","value":"in-page navigation"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"/design-system/components/card/"},"children":[{"type":"text","value":"cards"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"/design-system/components/contact-us/"},"children":[{"type":"text","value":"contact us"}]},{"type":"text","value":" pages."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Borders can also segment content (like on banners)."}]},{"type":"element","tag":"docs-example","props":{":hideCode":"true","id":"core-navigation-in-page-navigation--in-page-navigation"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"border-radius"},"children":[{"type":"text","value":"Border Radius"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Border radius allows you to add rounded corners to elements such as a button or container. Border radius can create a more user-friendly and approachable look and feel."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We've defined a set of radius values for use."}]},{"type":"element","tag":"docs-layer-style-table","props":{"type":"border.radius"},"children":[]},{"type":"element","tag":"h3","props":{"id":"usage-1"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Border radius is on containers such as buttons, cards and form inputs."}]},{"type":"element","tag":"docs-example","props":{":hideCode":"true","id":"core-navigation-button--default-filled"},"children":[]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When a container has a defined border radius, but is in focus, discard the border radius."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A 0px value is applied for consistency and clarity."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"elevation"},"children":[{"type":"text","value":"Elevation"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Elevation adds depth to components."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer."}]},{"type":"element","tag":"docs-layer-style-table","props":{"type":"elevation"},"children":[]},{"type":"element","tag":"h3","props":{"id":"usage-2"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Elevation is on components such as cards, button (elevated variant only) and breadcrumbs."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Elevation helps components to stand out. You can use them to flag interactivity, such as when a user hovers over a card or when a modal is open."}]},{"type":"element","tag":"docs-example","props":{":hideCode":"true","id":"core-navigation-breadcrumbs--default-story"},"children":[]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"border","depth":2,"text":"Border","children":[{"id":"usage","depth":3,"text":"Usage"}]},{"id":"border-radius","depth":2,"text":"Border Radius","children":[{"id":"usage-1","depth":3,"text":"Usage"}]},{"id":"elevation","depth":2,"text":"Elevation","children":[{"id":"usage-2","depth":3,"text":"Usage"}]}]}},"_type":"markdown","_id":"content:design-system:4.styles:layer-styles.md","_source":"content","_file":"design-system/4.styles/layer-styles.md","_extension":"md"},{"_path":"/design-system/styles/layout","_dir":"styles","_draft":false,"_partial":false,"_locale":"","title":"Layout","description":"Layouts are common page composition patterns that offer ways of structuring components and content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always design for small screens first."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For most types of pages, use either a ‘two-thirds’ or a ‘two-thirds and one-third’ layout. Doing this reduces long lines of text that can make a page hard to read on desktop devices. This approach should limit lines of text to 75 characters."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should never assume what devices people are using. This is why you should design for different screen sizes instead of specific devices."}]},{"type":"element","tag":"h2","props":{"id":"page-layouts"},"children":[{"type":"text","value":"Page layouts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are 2 standard page layouts:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Full width."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Two column - right side."}]}]},{"type":"element","tag":"h3","props":{"id":"full-width"},"children":[{"type":"text","value":"Full width"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Displays the main content area the full width of the container."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Sample visual of full width layout","src":"/assets/img/layout-full-width.png"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"two-column"},"children":[{"type":"text","value":"Two column"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Displays a right hand sidebar that stacks on <991px breakpoints. The main content area is always visible."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Sample visual of two column layout","src":"/assets/img/layout-two-column.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"white-space"},"children":[{"type":"text","value":"White Space"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use adequate white space in the layout to separate elements and create a sense of hierarchy. This helps to make elements on the page easier to distinguish and understand, and creates visual harmony."}]},{"type":"element","tag":"h3","props":{"id":"page-section-spacing"},"children":[{"type":"text","value":"Page Section Spacing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Spacing is used between the ‘above’, ‘body’ and ‘below’ content sections."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For both XS and S breakpoints, section spacing is added between the body section and sidebar section when in use."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Sample visual of page section layout spacing","src":"/assets/img/layout-page-spacing.png"},"children":[]}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Breakpoint"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Value"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"CSS Variable"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"XS • <576px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"32px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-8"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"S • 576-767px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"32px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-8"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"M • 768-991px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"48px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-10"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"L • 992-1199px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"64px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-12"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"XL • 1200px+"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"80px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-13"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"content-layout-spacing"},"children":[{"type":"text","value":"Content Layout Spacing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We define spacing between components and elements at a breakpoint level. This compliments the grid and applied layout."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Sample visual of content layout spacing","src":"/assets/img/layout-content-spacing.png"},"children":[]}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Breakpoint"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Value"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"CSS Variable"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Sidebar Value"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Sidebar CSS Variable"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"XS • <576px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-4"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-6"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"S • 576-767px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-4"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-6"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"M • 768-991px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-6"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-6"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"L • 992-1199px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"32px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-8"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"32px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-8"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"XL • 1200px+"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"40px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-9"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"40px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-9"}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"page-layouts","depth":2,"text":"Page layouts","children":[{"id":"full-width","depth":3,"text":"Full width"},{"id":"two-column","depth":3,"text":"Two column"}]},{"id":"white-space","depth":2,"text":"White Space","children":[{"id":"page-section-spacing","depth":3,"text":"Page Section Spacing"},{"id":"content-layout-spacing","depth":3,"text":"Content Layout Spacing"}]}]}},"_type":"markdown","_id":"content:design-system:4.styles:layout.md","_source":"content","_file":"design-system/4.styles/layout.md","_extension":"md"},{"_path":"/design-system/styles/logo","_dir":"styles","_draft":false,"_partial":false,"_locale":"","title":"Logo","description":"The visual representation of vic.gov.au and the Victorian Government.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"vicgovau-logo"},"children":[{"type":"text","value":"vic.gov.au logo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The vic.gov.au logo is the primary logo used in the design system."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"vic.gov.au logo","src":"/assets/img/Logo-vicgov.png"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/brand-victoria-using-our-logos","rel":["nofollow"]},"children":[{"type":"text","value":"Download logo"}]}]}]},{"type":"element","tag":"h3","props":{"id":"clear-space"},"children":[{"type":"text","value":"Clear space"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The clear space for the vic.gov.au logo is 100% of the height of the ‘V’ across all applications."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Clear space visual","src":"/assets/img/Logo-vicgov-Clear-Space.png"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"co-branding"},"children":[{"type":"text","value":"Co-branding"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Where the vic.gov.au logo appears next to another logo, it should be:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"centred vertically"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"separated by a minimum distance of 16px"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"separated by a divider line."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Co-branded visual","src":"/assets/img/Logo-vicgov-cobrand.png"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"sizing"},"children":[{"type":"text","value":"Sizing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The vic.gov.au logo should be 16px in height on all screens."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"No modification"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't change the logo. This includes changing its colour, adding effects, or altering its shape."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This helps to maintain the integrity and consistency of the logo."}]}]},{"type":"element","tag":"h3","props":{"id":"accessibility"},"children":[{"type":"text","value":"Accessibility"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always add alternative text to the logo. This is for screen reader users."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"victoria-state-government-logo"},"children":[{"type":"text","value":"Victoria State Government logo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Victorian State Government logo is the secondary logo used in the design system. It’s used in the footer."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Victoria State Government logo","src":"/assets/img/Logo-StateGov.png"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/brand-victoria-using-our-logos","rel":["nofollow"]},"children":[{"type":"text","value":"Download logo"}]}]}]},{"type":"element","tag":"h3","props":{"id":"clear-space-1"},"children":[{"type":"text","value":"Clear space"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The clear space for the Victorian State Government logo is at least 20% the height."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Clear space visual","src":"/assets/img/Logo-StateGovClearSpace.png"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"co-branding-1"},"children":[{"type":"text","value":"Co-branding"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Where the Victorian State Government logo appears next to another logo, it should be:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"centred vertically"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"separated by a distance of at least 50% the height of the Victorian State Government logo."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Co-branded visual","src":"/assets/img/Logo-StateGov-cobrand.png"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"sizing-1"},"children":[{"type":"text","value":"Sizing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Victorian State Government logo should be 42px in height on all screens."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the Victorian State Government logo where size permits. But, at times, we need to use a smaller logo depending on the application:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"VIC only logo (favicons only)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We've designed these logos to ensure accessibility and clarity at all sizes."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"co-branding-logo"},"children":[{"type":"text","value":"Co-branding logo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/design-system/components/primary-navigation/"},"children":[{"type":"text","value":"primary navigation"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"/design-system/components/footer/"},"children":[{"type":"text","value":"footer"}]},{"type":"text","value":" for size requirements."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"vicgovau-logo","depth":2,"text":"vic.gov.au logo","children":[{"id":"clear-space","depth":3,"text":"Clear space"},{"id":"co-branding","depth":3,"text":"Co-branding"},{"id":"sizing","depth":3,"text":"Sizing"},{"id":"accessibility","depth":3,"text":"Accessibility"}]},{"id":"victoria-state-government-logo","depth":2,"text":"Victoria State Government logo","children":[{"id":"clear-space-1","depth":3,"text":"Clear space"},{"id":"co-branding-1","depth":3,"text":"Co-branding"},{"id":"sizing-1","depth":3,"text":"Sizing"}]},{"id":"co-branding-logo","depth":2,"text":"Co-branding logo"}]}},"_type":"markdown","_id":"content:design-system:4.styles:logo.md","_source":"content","_file":"design-system/4.styles/logo.md","_extension":"md"},{"_path":"/design-system/styles/motion","_dir":"styles","_draft":false,"_partial":false,"_locale":"","title":"Motion","description":"Motion gradually changes an element from one state to another. It can also indicate an interaction.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use motion with a purpose in mind. This could be to draw attention to important elements or to provide feedback to users."}]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each animation needs at least these four parts:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Trigger — what causes the animation to happen (gestures, time, etc.)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Duration — how long should the transition take."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Easing — how an element transitions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Property — the characteristic of the element transitioning (position, opacity, scale, etc.)."}]}]},{"type":"element","tag":"h2","props":{"id":"duration-speed"},"children":[{"type":"text","value":"Duration (speed)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The duration of motion should be consistent throughout. Use:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"shorter durations for more subtle motions"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"longer durations for more significant or complex motions."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A general rule of thumb is:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"0.06-0.2s for simple interface movements"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"up to 0.5s for more complex or larger movements."}]}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Time"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Value"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"CSS Variable"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"60 milliseconds"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"60ms"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-motion-speed-1"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"80 milliseconds"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"80ms"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-motion-speed-2"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"120 milliseconds"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"120ms"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-motion-speed-3"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"160 milliseconds"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"160ms"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-motion-speed-4"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"200 milliseconds"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"200ms"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-motion-speed-5"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"240 milliseconds"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"240ms"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-motion-speed-6"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"300 milliseconds"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"300ms"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-motion-speed-7"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"360 milliseconds"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"360ms"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-motion-speed-8"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"420 milliseconds"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"420ms"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-motion-speed-9"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"500 milliseconds"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"500ms"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-motion-speed-10"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"easing"},"children":[{"type":"text","value":"Easing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Easing is the rate the motion accelerates or decelerates. It can range from linear to highly exaggerated. The chosen easing should match the desired tone and feeling of the motion."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Currently, Ripple uses default easing values. We use the default names for this reason to reduce clutter in the code."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Definitions:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ease-in: slow at the beginning, fast/abrupt at the end."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ease-out: fast/abrupt at the beginning, slow at the end."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When to use:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ease-in: when things are moving "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"out."}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ease-out: when things are moving "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"in."}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage"},{"id":"duration-speed","depth":2,"text":"Duration (speed)"},{"id":"easing","depth":2,"text":"Easing"}]}},"_type":"markdown","_id":"content:design-system:4.styles:motion.md","_source":"content","_file":"design-system/4.styles/motion.md","_extension":"md"},{"_path":"/design-system/styles/spacing","_dir":"styles","_draft":false,"_partial":false,"_locale":"","title":"Spacing","description":"In components and layout, a defined set of spacing units provides good alignment and consistent spacing relationships.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We use a spacing system in a 4-pixel grid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It helps to create a visual hierarchy and organises page content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The 4px framework creates consistent spacing relationships and alignment across breakpoints. This is crucial for good UI design."}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Size"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"CSS Variable"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"4px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-1"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"8px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-2"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"12px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-3"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-4"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"20px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-5"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-6"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"28px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-7"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"32px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-8"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"40px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-9"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"48px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-10"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"56px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-11"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"64px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-12"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"80px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-13"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"120px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-14"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Spacing should be proportional to the size and importance of the elements on the page. For example, larger elements may need more space to balance their visual weight."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Consider spacing in responsive design to ensure that the spacing remains consistent and proportionate on different screen sizes and devices."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For page level, component and content spacing see "},{"type":"element","tag":"a","props":{"href":"/design-system/styles/layout/"},"children":[{"type":"text","value":"layout"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:design-system:4.styles:spacing.md","_source":"content","_file":"design-system/4.styles/spacing.md","_extension":"md"},{"_path":"/design-system/styles/typography","_dir":"styles","_draft":false,"_partial":false,"_locale":"","title":"Typography","description":"Type styles are used to present content clearly.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"font"},"children":[{"type":"text","value":"Font"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"'VIC' is the brand font to be used across all Victorian Government communications. This creates a distinct but consistent look and feel."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It is free to download from "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/brand-victoria-fonts","rel":["nofollow"]},"children":[{"type":"text","value":"vic.gov.au"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use VIC font. The Ripple Design System only uses ‘Regular’ and ‘Bold’ weights of VIC font."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As VIC is a custom font, it's recommended to use Web Safe Font as a fallback when declaring your font stack. The preferred fallback font for the Ripple Design System is Arial."}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Font Family"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Value"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"CSS Variable"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"VIC"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"VIC, Arial, Helvetica, sans-serif"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-type-font-family"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"type-styles"},"children":[{"type":"text","value":"Type Styles"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In the Ripple Design System there are two type sets, one for fixed use and one for fluid (responsive) use:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The fixed type set uses fixed sizes. This means they use the <991 fluid styles, but do not respond."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The fluid type set has two fixed sizes. These both respond at certain breakpoints for larger or smaller styles."}]}]},{"type":"element","tag":"h3","props":{"id":"headings"},"children":[{"type":"text","value":"Headings"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Headings have both fluid and fixed sets. Headings are bold by default for emphasis and to create contrast."}]},{"type":"element","tag":"h4","props":{"id":"fluid"},"children":[{"type":"text","value":"Fluid"}]},{"type":"element","tag":"docs-type-class-table","props":{":type":"[{\"style\":[\"Heading 1\",{\"values\":[{\"Font size\":\"32px / 56px\"},{\"Line height\":\"36px / 60px\"},{\"Letter spacing\":\"1.4% / 0.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1\"]},{\"style\":[\"Heading 1 Highlight\",{\"values\":[{\"Font size\":\"32px / 56px\"},{\"Line height\":\"36px / 60px\"},{\"Letter spacing\":\"1.4% / 0.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1-highlight\"]},{\"style\":[\"Heading 2\",{\"values\":[{\"Font size\":\"24px / 32px\"},{\"Line height\":\"32px / 40px\"},{\"Letter spacing\":\"1.6% / 1.4%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h2\"]},{\"style\":[\"Heading 3\",{\"values\":[{\"Font size\":\"20px / 24px\"},{\"Line height\":\"28px / 32px\"},{\"Letter spacing\":\"1.8% / 1.6%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h3\"]},{\"style\":[\"Heading 3 Highlight\",{\"values\":[{\"Font size\":\"20px / 24px\"},{\"Line height\":\"28px / 32px\"},{\"Letter spacing\":\"1.8% / 1.6%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h3-highlight\"]},{\"style\":[\"Heading 4\",{\"values\":[{\"Font size\":\"16px / 20px\"},{\"Line height\":\"24px / 28px\"},{\"Letter spacing\":\"1.92% / 1.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h4\"]}]"},"children":[]},{"type":"element","tag":"h4","props":{"id":"fixed"},"children":[{"type":"text","value":"Fixed"}]},{"type":"element","tag":"docs-type-class-table","props":{":type":"[{\"style\":[\"Heading 1 Fixed\",{\"values\":[{\"Font size\":\"32px\"},{\"Line height\":\"36px\"},{\"Letter spacing\":\"1.4%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1-fixed\"]},{\"style\":[\"Heading 1 Highlight Fixed\",{\"values\":[{\"Font size\":\"32px\"},{\"Line height\":\"44px\"},{\"Letter spacing\":\"1.4%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1-highlight-fixed\"]},{\"style\":[\"Heading 2 Fixed\",{\"values\":[{\"Font size\":\"24px\"},{\"Line height\":\"32px\"},{\"Letter spacing\":\"1.6%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h2-fixed\"]},{\"style\":[\"Heading 3 Fixed\",{\"values\":[{\"Font size\":\"20px\"},{\"Line height\":\"28px\"},{\"Letter spacing\":\"1.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h3-fixed\"]},{\"style\":[\"Heading 3 Highlight Fixed\",{\"values\":[{\"Font size\":\"20px\"},{\"Line height\":\"28px\"},{\"Letter spacing\":\"1.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h3-highlight-fixed\"]},{\"style\":[\"Heading 4 Fixed\",{\"values\":[{\"Font size\":\"16px\"},{\"Line height\":\"24px\"},{\"Letter spacing\":\"1.92%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h4-fixed\"]}]"},"children":[]},{"type":"element","tag":"h3","props":{"id":"paragraph"},"children":[{"type":"text","value":"Paragraph"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default paragraph font size is 16px on all screens."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The majority of your body copy should use the standard 16px paragraph size."}]},{"type":"element","tag":"docs-type-class-table","props":{":type":"[{\"style\":[\"Paragraph Large\",{\"values\":[{\"Font size\":\"20px / 24px\"},{\"Line height\":\"28px / 32px\"},{\"Letter Spacing\":\"1.8% / 1.6%\"}]},\"rpl-type-p-large\"]},{\"style\":[\"Paragraph Large Fixed\",{\"values\":[{\"Font size\":\"20px\"},{\"Line height\":\"28px\"},{\"Letter Spacing\":\"1.8%\"}]},\"rpl-type-p-large-fixed\"]},{\"style\":[\"Paragraph Large Highlight\",{\"values\":[{\"Font size\":\"20px / 24px\"},{\"Line height\":\"28px / 32px\"},{\"Letter Spacing\":\"1.8% / 1.6%\"}]},\"rpl-type-p-large-highlight\"]},{\"style\":[\"Paragraph\",{\"values\":[{\"Font size\":\"16px\"},{\"Line height\":\"24px\"},{\"Letter spacing\":\"1.92%\"}]},\"rpl-type-p\"]},{\"style\":[\"Paragraph Small\",{\"values\":[{\"Font size\":\"14px\"},{\"Line height\":\"20px\"},{\"Letter spacing\":\"1.92%\"}]},\"rpl-type-p-small\"]}]"},"children":[]},{"type":"element","tag":"h3","props":{"id":"lists"},"children":[{"type":"text","value":"Lists"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use lists to make blocks of text easier to read, and to break information into manageable chunks."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"List styles are based on rpl-type-p with extra spacing."}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Margin Top"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Paragraph Spacing"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Item Spacing"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Indent Amount"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-4"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-2"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-2"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-9"}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"unordered-lists"},"children":[{"type":"text","value":"Unordered Lists"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Introduce bulleted lists with a lead-in line ending in a colon. Start each item with a lowercase letter, and do not use a full stop at the end."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Unordered lists allow for two nested levels which are styled as:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"level 1 - bullet"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"level 2 - dash"}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"An example of an unordered list","src":"/assets/img/unordered-list.png"},"children":[]},{"type":"element","tag":"h4","props":{"id":"ordered-lists"},"children":[{"type":"text","value":"Ordered Lists"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use numbered lists instead of bulleted lists when the order of the items is relevant."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You do not need to use a lead-in line for numbered lists. Items in a numbered list should end in a full stop because each should be a complete sentence."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ordered lists allow for three nested levels which are styled as"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"level 1 - numbers"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"level 2 - alphabet"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"level 3 - roman numerals."}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"An example of an ordered list","src":"/assets/img/ordered-list.png"},"children":[]},{"type":"element","tag":"h3","props":{"id":"text-alignment"},"children":[{"type":"text","value":"Text Alignment"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should usually left-align body copy that’s read left to right. Right-aligned body copy can be hard for users to find and read when they magnify their screen."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Do not ‘justify’ blocks of body copy so that they’re aligned to both the left and right margins. Doing this creates wider spaces between words, which can make the text hard to read."}]},{"type":"element","tag":"h3","props":{"id":"font-weight"},"children":[{"type":"text","value":"Font weight"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use bold to emphasise particular words in a transaction. Use it to highlight critical information that users need to refer to or you’ve seen them miss."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Try to avoid bold. Overuse will make it difficult for users to know which parts of your content they need to pay the most attention to."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Acomparison between regular text and bold text","src":"/assets/img/font-weight.png"},"children":[]},{"type":"element","tag":"h3","props":{"id":"links"},"children":[{"type":"text","value":"Links"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Links are blue and underlined by default. If your link is at the end of a sentence or paragraph, make sure that the linked text does not include the full stop."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"A visual example of a link within regular text","src":"/assets/img/link.png"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"list-of-variables"},"children":[{"type":"text","value":"List of variables"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All values are stored as variables nested in the type variable."}]},{"type":"element","tag":"h3","props":{"id":"type-size"},"children":[{"type":"text","value":"Type size"}]},{"type":"element","tag":"docs-type-table","props":{"type":"size"},"children":[]},{"type":"element","tag":"h3","props":{"id":"line-height"},"children":[{"type":"text","value":"Line Height"}]},{"type":"element","tag":"docs-type-table","props":{"type":"lh"},"children":[]},{"type":"element","tag":"h3","props":{"id":"letter-spacing"},"children":[{"type":"text","value":"Letter Spacing"}]},{"type":"element","tag":"docs-type-table","props":{"type":"ls"},"children":[]},{"type":"element","tag":"h3","props":{"id":"font-weights"},"children":[{"type":"text","value":"Font Weights"}]},{"type":"element","tag":"docs-type-table","props":{"type":"weight"},"children":[]},{"type":"element","tag":"h3","props":{"id":"list-styling"},"children":[{"type":"text","value":"List Styling"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Style"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Level 1"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Level 2"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Level 3"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Unordered list"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"• (filled circle)"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"- (dash)"}]},{"type":"element","tag":"td","props":{},"children":[]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Ordered List"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"1. (numbers)"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"a. (letters)"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"i. (roman numerals)"}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"font","depth":2,"text":"Font"},{"id":"type-styles","depth":2,"text":"Type Styles","children":[{"id":"headings","depth":3,"text":"Headings"},{"id":"paragraph","depth":3,"text":"Paragraph"},{"id":"lists","depth":3,"text":"Lists"},{"id":"text-alignment","depth":3,"text":"Text Alignment"},{"id":"font-weight","depth":3,"text":"Font weight"},{"id":"links","depth":3,"text":"Links"}]},{"id":"list-of-variables","depth":2,"text":"List of variables","children":[{"id":"type-size","depth":3,"text":"Type size"},{"id":"line-height","depth":3,"text":"Line Height"},{"id":"letter-spacing","depth":3,"text":"Letter Spacing"},{"id":"font-weights","depth":3,"text":"Font Weights"},{"id":"list-styling","depth":3,"text":"List Styling"}]}]}},"_type":"markdown","_id":"content:design-system:4.styles:typography.md","_source":"content","_file":"design-system/4.styles/typography.md","_extension":"md"},{"_path":"/design-system/components/accordion","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Accordion","description":"The Accordion component is a panel designed to save space by hiding and revealing content as required.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use accordions only if it will benefit the user. You should have evidence of this."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using accordions will allow users to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"view related sections of content quickly"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"choose which content isn’t relevant to them by showing or hiding sections."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always test accordions with users first. Depending on what the user needs, hiding content could present problems."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-accordion--accordion"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Fill the entire width of the content area."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Embed into the body content area of any landing page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the 'numbered' variant when a sequential order is important."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include links and format text in accordions, as required."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use to conceal content that may only apply to specific users who can choose to show or hide content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Make sure accordion headings are descriptive and succinct."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use a single accordion."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid putting all page content into accordions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use accordions for important information all users need to read."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Putting accordions in accordions can confuse the user."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use an accordion if doing so will slow the page load time."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't disable sections."}]}]},{"type":"element","tag":"h3","props":{"id":"collapse-allexpand-all"},"children":[{"type":"text","value":"Collapse all/Expand all"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Being able to collapse or expand all lets users open or close all accordions with one click. This reduces the amount of clicks required to reach their content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't use this feature to help users find information. Expanding all accordions at once could defeat the purpose of having them. If a user has to do this, consider more descriptive titles."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The other option is to remove the accordions and display the content without them."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The accordion has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"numbered."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-accordion--accordion"},"children":[]},{"type":"element","tag":"h3","props":{"id":"numbered"},"children":[{"type":"text","value":"Numbered"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the numbered variant when it is important the content is read in sequential order."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-accordion--accordion-numbered"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Accordions use colour to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"represent interactions such as hover and active states"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"give prominence to the active displayed content section."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-accordion--accordion"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"},{"id":"collapse-allexpand-all","depth":3,"text":"Collapse all/Expand all"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"numbered","depth":3,"text":"Numbered"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:accordion.md","_source":"content","_file":"design-system/5.components/accordion.md","_extension":"md"},{"_path":"/design-system/components/acknowledgment","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Acknowledgement","description":"The Acknowledgement component pays respect to the First Peoples of Victoria.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Acknowledgement of Traditional Owners message:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"displays alongside the Aboriginal and Torres Strait Islander flags"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"is used in the footer."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-acknowledgement--acknowledgement"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use this component to display the Acknowledgement of Traditional Owners message."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Do not change the:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Aboriginal and Torres Strait Islander flags"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Acknowledgement of Traditional Owners wording."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:acknowledgment.md","_source":"content","_file":"design-system/5.components/acknowledgment.md","_extension":"md"},{"_path":"/design-system/components/alert","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Alert","description":"The Alert component display required actions or important messages to users.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alerts attract a user's attention with important messages or required actions. They appear at the top of pages."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alerts are:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"intrusive by design"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"created on purpose"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"dismissible by a user"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"not triggered by user action or back-end event."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alerts sit flush at the top of pages above the header. Users can still interact with the page below an alert."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-alert--information"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use an alert if its message or action applies to an entire product or site."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Write the alert in plain language that's clean and concise to minimise a user's cognitive load."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If the user needs more information or to complete an action, use link text for the call to action."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Place the alert at the top of the screen before the header."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use the critical alert setting for messages or actions that warrant it."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Limit actions to one per alert banner."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use an alert if its message applies only to that feature or page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Alerts shouldn't cover other components, only pushing down page content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use alerts for actions initiated by the user or backend."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"An alert’s styling is according to its meaning and uses semantic colours."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alert colours include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"grey for general information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"orange for a minor warning"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"red for a critical error or expected dangerous event."}]}]},{"type":"element","tag":"h3","props":{"id":"information"},"children":[{"type":"text","value":"Information"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"To communicate general information to users."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-alert--information"},"children":[]},{"type":"element","tag":"h3","props":{"id":"warning"},"children":[{"type":"text","value":"Warning"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"To communicate a minor warnings to users."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-alert--warning"},"children":[]},{"type":"element","tag":"h3","props":{"id":"critical"},"children":[{"type":"text","value":"Critical"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"To communicate a critical error has occurred or dangerous event is expected to users."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-alert--danger"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"alert-ordering"},"children":[{"type":"text","value":"Alert ordering"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"So that users view alerts in order of importance, they appear in priority order:"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Critical."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Warning."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Information."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-alert--stacked"},"children":[]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"information","depth":3,"text":"Information"},{"id":"warning","depth":3,"text":"Warning"},{"id":"critical","depth":3,"text":"Critical"}]},{"id":"alert-ordering","depth":2,"text":"Alert ordering"}]}},"_type":"markdown","_id":"content:design-system:5.components:alert.md","_source":"content","_file":"design-system/5.components/alert.md","_extension":"md"},{"_path":"/design-system/components/block-quote","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Block quote","description":"The Block quote component adds emphasis to a quote.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use block quotes to emphasise:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"important information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"excerpts from a source."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--blockquote"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use text in block quotes."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always put all the quoted text inside opening and closing quotation marks (' ')."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include optional author metadata."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"You can feature more than one quote by a single author."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use in content sections."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not repeat metadata across different quotes."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The block quote uses colour to add subtle visual prominence."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--blockquote"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:block-quote.md","_source":"content","_file":"design-system/5.components/block-quote.md","_extension":"md"},{"_path":"/design-system/components/breadcrumb","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Breadcrumb","description":"The Breadcrumb component shows a user their location on a website. This allows quick navigation between page levels.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use breadcrumbs to help users understand where they are within a website’s structure. A breadcrumb shows as a series of links and icons in a line."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A breadcrumb displays the parent page, icons and the current page."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Parent page: this links to the page above the current page in the information architecture."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Icons: chevrons (v-shaped icons) sitting between the parent and current pages are designed to visualise site hierarchy."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Current page: this is the page the user is currently on."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-breadcrumbs--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display the breadcrumb at the top left of a page, below the main navigation but above the page title."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always start the breadcrumb with the parent page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always end the breadcrumb with the current page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Truncate longer names if you've reached the maximum amount of links."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The breadcrumb does not replace primary navigation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not use the breadcrumb to show progress through a linear journey."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"how-the-breadcrumb-works"},"children":[{"type":"text","value":"How the Breadcrumb works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"On devices with a page resolution under 768px, the breadcrumb displays the parent link only."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Breadcrumb uses colour to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"represent possible interactions"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-breadcrumbs--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"how-the-breadcrumb-works","depth":2,"text":"How the Breadcrumb works"},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:breadcrumb.md","_source":"content","_file":"design-system/5.components/breadcrumb.md","_extension":"md"},{"_path":"/design-system/components/button","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Button","description":"The Button component helps a user to carry out an action.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a button to indicate an action a user can take and to let them start carrying it out. Button labels say what action will occur when the user interacts with it."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use a button when the page has a call to action. Don't use buttons when sending users to other locations on the page or to other pages or sites."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight a key call to action."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"So long as it also helps users carry out its identified action, a button can link to internal and external pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add to any basic content component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use verbs in the button label, for example, 'Submit now', 'Cancel booking', etc."}]}]},{"type":"element","tag":"h3","props":{"id":"when-not-to-use"},"children":[{"type":"text","value":"When not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Limit primary buttons to one per page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use more than 4 words in the button label."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid using inactive buttons."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Limit using buttons to one per page. The more you use them, the less a user will notice them."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Buttons are styled for their specific purposes. Button variants include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"filled"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"outlined"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"white"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"elevated"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"destructive."}]}]},{"type":"element","tag":"h3","props":{"id":"filled"},"children":[{"type":"text","value":"Filled"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the filled variant for primary actions, known as calls to action."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the primary colour."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use more than one filled button per page.\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A page should only have one call to action, otherwise they lose impact."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Having more than one also results in a dilemma of choice for the user."}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled"},"children":[]},{"type":"element","tag":"h3","props":{"id":"outlined"},"children":[{"type":"text","value":"Outlined"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The outlined variant is for secondary actions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Like the filled variant, don't use more than one outlined button.\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If you find you're adding lots of secondary buttons, you may need to simplify your content."}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-outlined"},"children":[]},{"type":"element","tag":"h3","props":{"id":"white"},"children":[{"type":"text","value":"White"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The white variant is for tertiary actions when an action is less prominent.\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"It should be obvious that it is lower priority than primary or secondary buttons."}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The white variant is styled with an underline by default, to align with links.\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"This helps meet accessibility requirements and is consistent with other link types."}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-white"},"children":[]},{"type":"element","tag":"h3","props":{"id":"elevated"},"children":[{"type":"text","value":"Elevated"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The elevated variant acts as a 'back-to-the-top' button."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"We've added elevation to show the where the button will sit as a 'layer' on the page (its CSS z-index value)."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-elevated"},"children":[]},{"type":"element","tag":"h3","props":{"id":"destructive"},"children":[{"type":"text","value":"Destructive"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the destructive variant for destructive actions, such as permanently deleting information, across the site."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The destructive variant has a semantic meaning and uses semantic colour."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Destructive buttons only work if not used often."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"It’s uncommon for most sites to need one."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use the destructive variant if an action has destructive consequences because they are not easy to undo."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never rely on colour only to communicate a serious action. For example, don't rely on red only as a warning to the user. Some users cannot see all colours and will miss meaning. What will happen when the user clicks the button must be obvious from context button text."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-destructive"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h3","props":{"id":"loading-spinner"},"children":[{"type":"text","value":"Loading spinner"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Loading spinners are used to indicate to users that an action is being processed. Spinners animate as soon as the user initiates an action and disappear once content shows."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A user may double-click a button because:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"their main operating system uses double click"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"they have a slow connection which results in delayed action feedback"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"they click the button by accident due to motor impairments like hand tremors."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Clicking a button twice can mean the information gets sent 2 times."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Try to show the user that their click has worked. For example, show a loading spinner once they've clicked."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When a button is in the loading state, the button label is hidden and a spinner is shown in its place. The button will keep the same width it had when the text was visible."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--busy-state"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Buttons can be themed in the following 2 ways:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"site colour palette"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"neutral colour palette."}]}]},{"type":"element","tag":"h3","props":{"id":"site-theme"},"children":[{"type":"text","value":"Site theme"}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-outlined"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-elevated"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"https:www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https:www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"neutral-theme"},"children":[{"type":"text","value":"Neutral theme"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Implemented at a site level, the neutral buttons have predefined neutral colour values. You are unable to edit or customise these colours."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There is no filled button variant available if you use the neutral theme. Buttons will automatically display as the next level down of button styling. For example, you'll use the outlined button variant for the neutral theme."}]},{"type":"element","tag":"h4","props":{"id":"outlined-1"},"children":[{"type":"text","value":"Outlined"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--neutral-outlined"},"children":[]},{"type":"element","tag":"h4","props":{"id":"white-1"},"children":[{"type":"text","value":"White"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--neutral-white"},"children":[]},{"type":"element","tag":"h4","props":{"id":"elevated-1"},"children":[{"type":"text","value":"Elevated"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--neutral-elevated"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To enhance visual weight and aim to confirm with "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html","rel":["nofollow"]},"children":[{"type":"text","value":"WCAG 2.0 Criterion 1.4.1"}]},{"type":"text","value":", Ripple buttons use underlined text by default on white buttons."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This underline shows users there is an interaction that they can perform."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-not-to-use","depth":3,"text":"When not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"filled","depth":3,"text":"Filled"},{"id":"outlined","depth":3,"text":"Outlined"},{"id":"white","depth":3,"text":"White"},{"id":"elevated","depth":3,"text":"Elevated"},{"id":"destructive","depth":3,"text":"Destructive"},{"id":"loading-spinner","depth":3,"text":"Loading spinner"}]},{"id":"theming","depth":2,"text":"Theming","children":[{"id":"site-theme","depth":3,"text":"Site theme"},{"id":"neutral-theme","depth":3,"text":"Neutral theme"}]},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:button.md","_source":"content","_file":"design-system/5.components/button.md","_extension":"md"},{"_path":"/design-system/components/call-to-action","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Call to action","description":"The Call to action component is a card promoting a specific piece of content and featuring a button highlighting the call to action.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the call to action card to give a brief summary of content or a task. The call to action card features a button highlighting the call to action."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use it to give your call to action more visual prominence. The call to action card can guide users to perform a preferred action."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--call-to-action"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use clear and concise content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ensure content is relevant to the action or destination."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Embed in any body content area of a content page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with a relevant image or graphic."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use without an image or graphic."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t overload it with content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use when a large amount of text is needed for more context."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use other interactive elements, like links."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The call to action card adopts its theming from your button component’s settings."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you choose neutral button for your site, the call to action card will display buttons in the neutral theme."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--call-to-action"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:call-to-action.md","_source":"content","_file":"design-system/5.components/call-to-action.md","_extension":"md"},{"_path":"/design-system/components/callout","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Callout","description":"The Callout component is a text excerpt that draws attention to specific or important content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use callouts to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"draw a user's attention"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"add emphasis to the content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"provide a user with more information."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A callout repeats and highlights content already on the page. Use callouts sparingly. To maintain effectiveness, consider weaving this information into the page's main content."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--callout"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight important information vital to the user."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Place a callout in a prominent position on the page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with text only."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only feature one callout per page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use no more than 2 paragraphs per callout."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't put the callout at the bottom of the page."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To allow for different levels of emphasis, a callout has 2 styles:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"accent"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"neutral."}]}]},{"type":"element","tag":"h3","props":{"id":"accent"},"children":[{"type":"text","value":"Accent"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the accent variant to add a high level of emphasis to the selected content. The callout accent can adopt any WYSIWYG type styles you choose."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--callout"},"children":[]},{"type":"element","tag":"h3","props":{"id":"neutral"},"children":[{"type":"text","value":"Neutral"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the neutral variant to give content a medium level of emphasis. The neutral callout uses a predefined type style that you cannot change."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--callout-neutral"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The accent variant uses the site accent colour to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"add visual prominence to the content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"aid hierarchy in the content area."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--callout"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To enhance visual weight and aim to conform with "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html","rel":["nofollow"]},"children":[{"type":"text","value":"WCAG2.0 Criterion 1.4.1"}]},{"type":"text","value":", Ripple callouts use:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a thick left-hand border"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"background colours"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"padding."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"accent","depth":3,"text":"Accent"},{"id":"neutral","depth":3,"text":"Neutral"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:callout.md","_source":"content","_file":"design-system/5.components/callout.md","_extension":"md"},{"_path":"/design-system/components/campaign-banner","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Campaign banner","description":"The Campaign banner component draws a user's attention to promoted content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use campaign banners to promote content. They include a feature image and have an optional call to action."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The banner has a headline and short summary text. These point users to promoted content and guide them to a call to action contained in a button."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Campaign banners can be used at the top or bottom of a page, under the header or above the footer."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-campaign-banner--primary-image"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Promote a campaign or related page content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add an optional image."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with an optional call to action."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t overload with content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use an unrelated image."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The campaign banner has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"featured, which appears at the top of the page, below the header"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"image inset, which appears at the bottom of the page above the footer."}]}]},{"type":"element","tag":"h3","props":{"id":"featured"},"children":[{"type":"text","value":"Featured"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A featured campaign banner goes at the top of the page underneath the header. When on larger screens, the image is cropped in a shape and can overlap the component above (the header)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There is an option to include metadata for the image if required."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-campaign-banner--primary-image"},"children":[]},{"type":"element","tag":"h3","props":{"id":"image-inset"},"children":[{"type":"text","value":"Image inset"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The image inset variant sits above the footer at the bottom of the page. This should be used for less prominent campaigns. For featured campaigns, we recommend using the featured variant at the top of the page."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-campaign-banner--secondary-image"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The campaign banner adopts its theming from the button component."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you choose the neutral button variant for your site, the campaign banner will display buttons in the neutral theme."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-campaign-banner--primary-image"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"featured","depth":3,"text":"Featured"},{"id":"image-inset","depth":3,"text":"Image inset"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:campaign-banner.md","_source":"content","_file":"design-system/5.components/campaign-banner.md","_extension":"md"},{"_path":"/design-system/components/card","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Card","description":"The Card component shows content about another page, event or topic. They help users find relevant information.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use cards to help users find the right information quickly."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"They can combine a variety of content, including text, media and links."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Cards are best used on a landing page to highlight any related pages, events or ongoing campaigns."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ensure headings are direct and summaries are concise."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--promo","argsString":"graphicElement:None"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Cards can be made up of:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"metadata, to show supplementary data to give the user more information (for example, date, topic, status, etc.)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"headline, to provide a snapshot of the content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"summary, to provide further details"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"visual elements, to provide visual prominence."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You only need a headline and a summary for a card. All other elements are optional and will depend on a user's needs."}]},{"type":"element","tag":"h4","props":{"id":"metadata"},"children":[{"type":"text","value":"Metadata"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All cards have optional metadata. Use metadata to display a combination of:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"topic/tag - categories for when a user needs to group content (for example, departments, agencies, services, etc.)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"date - how old the content is, for when this information is important to the user"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"status - where a component or action is sitting within a process."}]}]},{"type":"element","tag":"h4","props":{"id":"visual-elements"},"children":[{"type":"text","value":"Visual elements"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Visual elements in cards allow for different content to stand out. They can also provide additional context."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Elements that can provide visual prominence include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an image"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a highlight border"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a blocked headline type."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use visual elements carefully. Only use a visual element if it:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"is meaningful to the user journey"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"supports what is already in the content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"can help the user differentiate content from other content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"can be easily identified"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"is informative and not only decorative."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Group together cards with similar content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use only a single style of card within a set of cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep the content clear and concise."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use one piece of information per card."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't mix different card variants in a group."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use a single card only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never repeat content in a group of cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't overload cards with content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't include other interactive elements, like links, inside the card."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A card has 2 main variants and is styled for its purpose."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Promotion Cards, which is used to highlight important content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Navigation Cards, which is used for larger groups of content."}]}]},{"type":"element","tag":"h3","props":{"id":"promotion-cards"},"children":[{"type":"text","value":"Promotion cards"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Promotion cards provide an eye-catching way to promote links to other pages on your site (or external sites)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Promotion cards stack in a grid when used in a collection."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Promotion cards have 4 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"standard"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"highlight"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"image full bleed"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"avatar."}]}]},{"type":"element","tag":"h4","props":{"id":"standard"},"children":[{"type":"text","value":"Standard"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--promo","argsString":"graphicElement:None"},"children":[]},{"type":"element","tag":"h4","props":{"id":"highlight"},"children":[{"type":"text","value":"Highlight"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The highlight variant gives the card more visual prominence. Use this to guide users to the content."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--promo","argsString":"graphicElement:Highlight","theme":"docsTheme2"},"children":[]},{"type":"element","tag":"h4","props":{"id":"image-full-bleed"},"children":[{"type":"text","value":"Image full bleed"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The image full bleed variant gives the option to add a relevant image to grab the user’s attention."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--promo"},"children":[]},{"type":"element","tag":"h4","props":{"id":"avatar"},"children":[{"type":"text","value":"Avatar"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--avatar"},"children":[]},{"type":"element","tag":"h3","props":{"id":"navigation-cards"},"children":[{"type":"text","value":"Navigation cards"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Navigation cards are useful for displaying and breaking down large groups of content options."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"On landing pages, they are used to highlight all the different sections of that site."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Navigation cards fill the full width of the content area. They will always stack vertically."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are 3 variants of navigation cards:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"standard"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"image inset"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"heading highlight."}]}]},{"type":"element","tag":"h4","props":{"id":"standard-1"},"children":[{"type":"text","value":"Standard"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--nav","argsString":"graphicElement:None"},"children":[]},{"type":"element","tag":"h4","props":{"id":"image-inset"},"children":[{"type":"text","value":"Image inset"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A related image can increase a card's visual prominence."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--nav"},"children":[]},{"type":"element","tag":"h4","props":{"id":"heading-highlight"},"children":[{"type":"text","value":"Heading highlight"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To draw attention to the heading and highlight the content, use a heading highlight."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--nav","argsString":"graphicElement:Heading+highlighted"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Cards use colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interaction states"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"adding visual prominence to some elements."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--promo","argsString":"graphicElement:Highlight"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--nav","argsString":"graphicElement:Heading+highlighted"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"promotion-cards","depth":3,"text":"Promotion cards"},{"id":"navigation-cards","depth":3,"text":"Navigation cards"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:card.md","_source":"content","_file":"design-system/5.components/card.md","_extension":"md"},{"_path":"/design-system/components/carousel","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Carousel","description":"The Carousel component is a set of related cards that users can side-scroll through.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a carousel to let users browse through a set of up to 9 cards with pagination controls."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The content in the carousel should be related in some way. This helps users to find related and relevant content."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-card-carousel--breakpoints"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use a combination of promotion cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use when wanting to display a collection of cards with related content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add to any page type."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include with an accompanying title to give context to users."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use more than 9 cards or fewer than 3."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with navigation or other card types."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The carousel adopts its theming from the card and pagination components."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-card-carousel--breakpoints"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:carousel.md","_source":"content","_file":"design-system/5.components/carousel.md","_extension":"md"},{"_path":"/design-system/components/category-grid","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Category grid","description":"The Category grid component shows multiple cards laid out in a grid, allowing users to browse a collection of categories.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a category grid to help users browse a range of categories and content. Each card in a collection acts as a link to more information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A category grid uses the text link style to indicate clickable elements. An accompanying media item, such as an icon or pictogram, is used to support the content for each category."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The media item you choose must be directly relevant to the card’s content, to support and reinforce the user’s understanding. The icon or pictogram should clearly show the difference in topics and should be easily identifiable."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--category-grid"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use as a collection of cards only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include clear and concise content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with icons or pictograms."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Be careful not to include too many cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always use unique media items per card."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use a single card only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t repeat content in the same a group of cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t overload with content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t include with other interactive elements like links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use without a media item."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use on pages with a sidebar."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The category grid uses colour to indicate interaction states."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--category-grid"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:category-grid.md","_source":"content","_file":"design-system/5.components/category-grid.md","_extension":"md"},{"_path":"/design-system/components/checkbox","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Checkbox","description":"The Checkbox component lets users select one or more options from a list.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use checkboxes to allow users to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"select one or more list options"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"toggle one option on or off."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't use a checkbox if only one option is available or if you expect the user to only select one option. For this, use the radio button component instead."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-checkbox-group--default-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use checkboxes with a:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"form label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional requirement label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional hint text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"checkbox label."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Checkboxes should always have a form and checkbox label."}]},{"type":"element","tag":"h4","props":{"id":"single-checkbox"},"children":[{"type":"text","value":"Single checkbox"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A single checkbox confirms a user's selection or preference. Examples include when a user is agreeing to terms and conditions or registering for a the only available option presented."}]},{"type":"element","tag":"h4","props":{"id":"checkbox-group"},"children":[{"type":"text","value":"Checkbox group"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Checkbox groups provide a list of available items for the user to choose from. Always tell the user how many options they can select."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always give checkbox groups a clear and descriptive label. The label should say what the options represent and should help the user to choose one. Doing so ensures good accessibility, as screen readers read each option's label."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Not all users will know the visual difference between a checkbox and a radio button. You can could add extra instructions to guide users, for example, ‘Select up to 3 options’."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use checkboxes for lists with more than one selectable option."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use hints to inform users that more than one option can be selected, for example, 'Select all that apply'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always position checkboxes to the left of their labels because this makes them easier to find, especially if using a screen magnifier."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ensure you list the options in a logical and unbiased manner. It could be helpful to users if you order them from most common to least common."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use checkboxes for a single selectable list option, use radio buttons for this."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't pre-select checkboxes because users may not realise they submitted the wrong answer or missed a question."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Checkboxes have 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, used on white backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse, used on neutral backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-checkbox-group--default-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the reverse variant when the chip appears on the primary colour."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-checkbox-group--reverse-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Make sure errors follow error message guidance. Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: nothing is selected and the question has options in it"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user to choose which options apply to them."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select if [options]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Select if you like summer, winter, autumn, and/or spring'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: nothing is selected and the question does not have options in it"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user to choose which options apply to them."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select [options]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Select your favourite season'."}]}]},{"type":"element","tag":"docs-example","props":{"id":"forms-checkbox-group--invalid"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A checkbox uses colour for interactive states."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A checkbox in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a checkbox remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-checkbox-group--default-variant"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"error","depth":3,"text":"Error"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:checkbox.md","_source":"content","_file":"design-system/5.components/checkbox.md","_extension":"md"},{"_path":"/design-system/components/chip","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Chip","description":"The Chip component is an interactive element to draw a user’s user attention to a category.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use chips to represent options in a specific context. They are unlike buttons, which are persistent across contexts."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A chip labels or draws attention to categorised content. Chips can be interactive and help users navigate to relevant content easily."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When displaying multiple chips together, place them in a row."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-chip--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include keywords."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use on any content page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Link through to the topic page."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t include punctuation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use as a heading."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t include more than 4 words."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use without an interaction or link."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"chips-or-buttons"},"children":[{"type":"text","value":"Chips or buttons?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"While chips and buttons both prompt calls to action, they are different."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Multiple chips should all sit together. Buttons should sit separately from each other."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Chips react to their context, but buttons are fixed and remain static."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Chips convey forking paths in a user experience, while buttons show a linear step."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The chip has a default and reverse variant, allowing flexible use across a range of backgrounds."}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-chip--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the reverse variant when the chip appears on the primary colour."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-chip--reversed"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The chip uses the primary and primary-accessible colour tokens. This is to meet colour contrast requirements when theming."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If the site primary colour is ‘light’, the chip content will display in the type-default colour. The border will always take on the site primary colour."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-chip--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"chips-or-buttons","depth":2,"text":"Chips or buttons?"},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:chip.md","_source":"content","_file":"design-system/5.components/chip.md","_extension":"md"},{"_path":"/design-system/components/contact-us","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Contact us","description":"The Contact us component is a list of contact details and links to help the user get in touch with you.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the contact us component to show the user multiple pieces of contact information or actions. The details should be related to the page content and a single point of contact."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Contact us details can include a:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"contact person"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"phone number"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"social media account."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-contact-us--contact-us"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Provide users with additional contact details relevant to the page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display any combination of physical and postal addresses, phone numbers, email addresses and common social media accounts."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display in the sidebar of the page."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If you add social media accounts to the contact us component, don’t add the social share component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use unrelated contact details or social media accounts."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Contact us uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"visual prominence for key information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"link icons."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-contact-us--contact-us"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:contact-us.md","_source":"content","_file":"design-system/5.components/contact-us.md","_extension":"md"},{"_path":"/design-system/components/date-input","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Date input","description":"The Date input component helps users enter a date.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use date input to let users to enter a date they already know, or a date they can enter without needing a calendar."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Date input has 3 fields: day, month and year."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don’t set this component to automatically tab between these fields. This can be confusing and jarring for the user."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-date-input--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-to-use-this-component"},"children":[{"type":"text","value":"How to use this component"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You must use a form label with a date input."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use an date input with:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"requirement label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hint text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"placeholder text."}]}]},{"type":"element","tag":"h4","props":{"id":"avoid-placeholder-text"},"children":[{"type":"text","value":"Avoid placeholder text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information."}]},{"type":"element","tag":"h4","props":{"id":"hint-text"},"children":[{"type":"text","value":"Hint text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hint text can be used to tell the user what, or how, to successfully complete a date input."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, hint text can include specific formatting examples or requirements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use hint text where it’s needed. Don’t use it just to keep the layout consistent with other fields in the form."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always use date inputs with a label."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Write short and concise labels."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use hint text to show the expected date format, for example, ‘07 11 2022’."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If it’s not likely users will know the exact date, don’t use date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use without a form label or hint text specifying the expected date format."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid placeholder text because it can cause accessibility issues."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t disable copy and paste."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use placeholder text to give instructions or important examples."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t write ambiguous error messages only stating what's wrong - explain how the user can fix it."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The date input has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, used on white backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse, used on neutral backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-date-input--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-date-input--reverse"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When creating an error message for a date input, use the wording below."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: whole date field is empty"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Enter [the missing information]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Enter your dog’s birthday'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: some of date field is empty or incomplete"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: relevant day, month and/or year fields."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must include a [name of empty or incomplete field]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s birthday must include a month'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: impossible date entered"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: relevant day, month and/or year fields."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be a real date’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s birthday must be a real date'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: future date given when past date needed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be in the past’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s first playdate must be in the past'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: future date given when today or past date needed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be today or in the past’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s first beach visit must be today or in the past'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: past date given when future date needed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be in the future’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next raincoat purchase must be in the future'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: past date given when today or future date needed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be today or in the future’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next zoomies must be today or in the future'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date is not on or after another particular date"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be the same as or after [particular date and optional description]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next holiday must be on or after 2 April 2027 when you go on a roadtrip'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date is not after another particular date"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be after [particular date and optional description]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next blow-dry must be after 2 April 2026 when the groomer returns'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date is not the same as or before another particular date"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be on or before [particular date and optional description]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next hike must be on or before 2 January 2025'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date is not before another particular date"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be before [particular date and optional description]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next movie and pizza night must before 2 August 2027'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date is not between 2 other dates"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be between [earliest date] and [latest date and optional description]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next cuddles must be between 2 September 2026 and 3 September 2026'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date uses known characters that aren’t allowed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: relevant day, month and/or year fields."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘The date must not include [characters]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘The date must not include + & ~'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date uses unknown characters that aren’t allowed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: relevant day, month and/or year fields."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘The date must only include numbers'."}]}]},{"type":"element","tag":"docs-example","props":{"id":"forms-date-input--invalid"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Date input uses colour to show interactive states. A date input field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a date input field remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-date-input--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-to-use-this-component","depth":3,"text":"How to use this component"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"error","depth":3,"text":"Error"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:date-input.md","_source":"content","_file":"design-system/5.components/date-input.md","_extension":"md"},{"_path":"/design-system/components/detail-list","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Detail list","description":"The Detail list component shows a list of key information to users.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the detail list to display a list with labels. This surfaces (retrieves and displays) and highlights key information to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each row of the detail list comprises a:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"label, a descriptive or informative label for your content, for example, 'Location'"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"content, the piece of information itself, for example, 'East Gippsland'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The detail list is used to display:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"metadata, for example, ‘Published date' (which shows as '22 March 2023’)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"status, for example of a program or grant."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use the detail list for simple information. For data or complex information, consider using a table."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-description-list--with-link"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use single words only for the label."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include a link if you need to."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep the summary content and labels clear and concise."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Align all summary content to the longest label."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use labels for unrelated summary content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use it to surface information that is not important to users."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with complex or long form content."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When a link is present, the detail list uses the link colour for interaction states."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-description-list--with-link"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:detail-list.md","_source":"content","_file":"design-system/5.components/detail-list.md","_extension":"md"},{"_path":"/design-system/components/dropdown","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Dropdown","description":"The Dropdown component lets users see a list of available options and then select one or more options.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use this component to let users select one or more items from a dropdown list of available items."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It can be helpful when users need to choose from 6 or more options. It can also be used when listing all options in checkboxes or radio buttons is not viable."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dropdowns should only be used as a last resort. For example, to find a compromise between usability and keeping the layout compact and clear."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Many users find dropdowns hard to use. Dropdowns hide content by default and create user confusion, cross-device issues and limited accessibility. Use radio buttons, checkboxes or input fields for most small lists instead."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A compromise might be needed for a long list of options (for example, all dog breeds). Or, when option description lengths vary or wrap over multiple lines. These situations also confuse users by creating layout issues for checkboxes, input fields or radio buttons."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A dropdown is often called a 'select'."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-dropdown--single-select-many-items"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You must use a form label with a dropdown."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use a dropdown with:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"requirement label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hint text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"placeholder text."}]}]},{"type":"element","tag":"h4","props":{"id":"single-select"},"children":[{"type":"text","value":"Single select"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A single select dropdown is used when users can select only a single option."}]},{"type":"element","tag":"h4","props":{"id":"multi-select"},"children":[{"type":"text","value":"Multi select"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If using a multi select dropdown, always tell the user how many menu options they can select. Add extra instructions in the hint text to guide them. For example, 'Select up to 3 options'."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Even though users can choose multiple items in a multi select dropdown, they often find this confusing. checkboxes could be better."}]},{"type":"element","tag":"h4","props":{"id":"hint-text"},"children":[{"type":"text","value":"Hint text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hint text can be used to tell the user what, or how, to successfully complete a dropdown."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, hint text can include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an overall description of the dropdown"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hints for what kind of information needs to be input"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"specific formatting examples or requirements."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form."}]},{"type":"element","tag":"h4","props":{"id":"placeholder-text"},"children":[{"type":"text","value":"Placeholder text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information. Placeholder text for the dropdown trigger must clearly tell the user its purpose."}]},{"type":"element","tag":"h4","props":{"id":"selected-value"},"children":[{"type":"text","value":"Selected value"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The selected value shows the option a user has selected."}]},{"type":"element","tag":"h4","props":{"id":"text-overflow"},"children":[{"type":"text","value":"Text overflow"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When the field label and menu text are too long for the available horizontal space, they wrap to form another line."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The field text itself truncates at the end, but the text can be shown in full in the menu."}]},{"type":"element","tag":"h4","props":{"id":"menu-height"},"children":[{"type":"text","value":"Menu height"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The dropdown menu has a maximum height of 288px or 6 single text-line options."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We recommend starting a scroll at the sixth option in the menu list. This may vary based on your specific use case."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use as a last resort component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A label must be used with a dropdown."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ensure dropdown item descriptions are short and concise."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use when listing between 6 and (if possible) 15 items, if checkboxes or radio buttons can’t be used."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never set the form to submit when a dropdown item is selected."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t write long menu option descriptions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Descriptions should not wrap over a single line."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Icons or decorative images should never be used in dropdowns."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not use a dropdown for listings less than 6 options, consider using radio buttons or checkboxes."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not use a dropdown without a label as it confuses users and is not accessible."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dropdown has 2 main variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"single select"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"multi select."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Both variants have default and reverse sub-variants."}]},{"type":"element","tag":"h3","props":{"id":"single-select-1"},"children":[{"type":"text","value":"Single select"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A single select dropdown is used when users can select only a single option."}]},{"type":"element","tag":"h4","props":{"id":"making-a-selection"},"children":[{"type":"text","value":"Making a selection"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Placeholder text is shown by default in the field when the dropdown is closed."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Interacting with a closed field opens a menu of options."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The dropdown closes when an option is chosen."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The selection option replaces the placeholder text, but also remains in place if the menus is opened."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The selected option then has a tick to the left of the option in the open menu, to remind the user of the selected value."}]}]},{"type":"element","tag":"h4","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-dropdown--single-select-many-items"},"children":[]},{"type":"element","tag":"h4","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-dropdown--reverse-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"multi-select-1"},"children":[{"type":"text","value":"Multi select"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users can choose multiple items in a list or to filter information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If using a multi select dropdown, always tell the user how many menu options they can select."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Add extra instructions in the hint text to guide them. For example, 'Select up to 3 options'."}]},{"type":"element","tag":"h4","props":{"id":"making-a-selection-1"},"children":[{"type":"text","value":"Making a selection"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Placeholder text is shown by default in the field when the dropdown is closed."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"When the menu is opened, each option shows a checkbox input to the left of its text."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"When options are being selected, the menu stays open."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The selected options replaces the placeholder text. When selected options extend beyond the width of the field, the values truncate. A ‘+#’ appears to the right of the field, to show how many unseen options (#) are selected."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"As multiple selections are possible, the user needs to interact outside the dropdown, or on the field, to close the menu."}]}]},{"type":"element","tag":"h4","props":{"id":"default-1"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-dropdown--multi-select-many-items"},"children":[]},{"type":"element","tag":"h4","props":{"id":"reverse-1"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-dropdown--reverse-variant&args=multiple:true"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When creating an error message for a dropdown, use the wording below."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"If nothing is selected and the question has options in it"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user to choose which options apply to them."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select if [options]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Select if you like summer, winter, autumn, and/or spring.'"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"If nothing is selected and the question does not have options in it"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user to choose which options apply to them."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select "},{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"options"}]},{"type":"text","value":"’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Select your favourite season'."}]}]},{"type":"element","tag":"docs-example","props":{"id":"add storybook"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dropdown uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A dropdown in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a dropdown remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-dropdown--multi-select-many-items"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"single-select-1","depth":3,"text":"Single select"},{"id":"multi-select-1","depth":3,"text":"Multi select"},{"id":"error","depth":3,"text":"Error"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:dropdown.md","_source":"content","_file":"design-system/5.components/dropdown.md","_extension":"md"},{"_path":"/design-system/components/file","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"File","description":"The File component shows a link, with additional metadata, and lets a user download a file attachment.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the File component to let users download an attachment. It is accompanied by an optional description so you can give the user more information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"File is made up of:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"the file name"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"metadata including file type and size"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a document description."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-file--with-caption"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use on any page type."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include in page content areas only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add an optional description."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add optional updated data if it’s relevant to users."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include metadata."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with a non-descriptive file name."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"File uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicating to users that they may have an action to complete"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--file"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:file.md","_source":"content","_file":"design-system/5.components/file.md","_extension":"md"},{"_path":"/design-system/components/footer","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Footer","description":"The Footer component helps help users find information at the bottom of a page.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use footers to help users find what they need after scrolling to the bottom of a page. Footers provide supplementary information such as:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"copyright"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"contact information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"links to other pages within the website"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"social media links."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The footer must be used at the bottom of every page. It is separate from the primary navigation but is relevant to the entire site."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-footer--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The footer is made up of:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional section links, which help avoid dead ends by giving users a way to continue their journey through:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"additional links (internal and external)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"bypassing main navigation"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional social links, which can be used to link to social media accounts"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"core site links, which must always be used and include the privacy statement, contact information and terms of use"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a copyright statement, which clarifies who owns the copyright and is specific to your agency or department (add the State Government of Victoria logo to vic.gov.au services, for sitewide consistency)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an Acknowledgement of Traditional Owners message (an acknowledgement component)."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with an optional supporting logo relevant to the site content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use a consistently-themed footer across all pages of your site."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the optional neutral theme."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with an optional image credit for the header image."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t alter the required links in the core section of the footer."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t change the text in the acknowledgement component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with links that are not relevant to your organisation."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can theme the footer in 3 ways:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"site colour palette"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"neutral colour palette"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"custom colour palette (see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":")."}]}]},{"type":"element","tag":"h3","props":{"id":"site-colour-palette"},"children":[{"type":"text","value":"Site colour palette"}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-footer--default-story"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"neutral-colour-palette"},"children":[{"type":"text","value":"Neutral colour palette"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Implemented at a site level, the footer has predefined neutral colour values. You are unable to edit or customise these colours."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-footer--neutral"},"children":[]},{"type":"element","tag":"h3","props":{"id":"custom-colour-palette"},"children":[{"type":"text","value":"Custom colour palette"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The footer has its own colour tokens. Because of this, it's possible to apply a custom theme to your footer."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is only recommended as a last resort."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"component specific theming guidance for designers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-footer--default-story","theme":"docsTheme3"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming","children":[{"id":"site-colour-palette","depth":3,"text":"Site colour palette"},{"id":"neutral-colour-palette","depth":3,"text":"Neutral colour palette"},{"id":"custom-colour-palette","depth":3,"text":"Custom colour palette"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:footer.md","_source":"content","_file":"design-system/5.components/footer.md","_extension":"md"},{"_path":"/design-system/components/form-alert","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Form alert","description":"The Form alert component shows the user the outcome of a form submission or validation.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a form alert to tell the user if a form has been submitted, or if there were errors in the form that prevented submission."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The form alert appears at the top of the form and the user is automatically scrolled to it on submission."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are 2 types of alerts:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"success"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"error."}]}]},{"type":"element","tag":"docs-example","props":{"id":"forms-form-alert--error"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Show the validation outcome of a form submission."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If successful, use with relevant success message."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Write error messages for the alert summary exactly the same way they are worded for inline error messages (next to the inputs with the errors)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include a custom error summary if required."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Make your error messages clear and concise."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not use the form alert without providing a summary of errors (if a submission is invalid)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not restyle with other colours or icons."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Form alert has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"success"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"error."}]}]},{"type":"element","tag":"h3","props":{"id":"success"},"children":[{"type":"text","value":"Success"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Success alerts tell users their form submissions worked. They are always static and stay until a user moves away from that page or view."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To help screen reader and other users notice it, ensure that on submission the focus is moved to the alert."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-form-alert--success"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If one or more form validation errors occur, they must always be presented using:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"the error summary alert"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"individual error messages next to each form field with an error (inline)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Make your error messages clear and concise."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Error summary alerts tell the user everything they need to fix before they can submit the form. This goes above the form."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Inline error messages show a user where the errors happened."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"On submission of the form, you must:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"move the keyboard focus to the error summary"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"include the heading ‘There is a problem’ in the error summary"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"link to all answers with validation errors"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"write error messages for the summary alert exactly the same way they are worded for inline error messages."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As well as showing an error summary, follow the validation pattern. For example, add, ‘Error: ’ to the start of the page <title> so screen readers read it out as soon as possible."}]},{"type":"element","tag":"h4","props":{"id":"linking-from-the-error-summary-to-each-answer"},"children":[{"type":"text","value":"Linking from the error summary to each answer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each error must be linked in the error summary to the form field (answer) causing it."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For questions where the user could choose one or more options as an answer, link to the first radio or checkbox field instead."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-form-alert--error"},"children":[]},{"type":"element","tag":"h4","props":{"id":"error-messages"},"children":[{"type":"text","value":"Error messages"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specific error messages must be provided for specific error states. Style your error messages as directed by the ‘Error’ section on the pages for the following form components:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/input-field/"},"children":[{"type":"text","value":"input field"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/text-area/"},"children":[{"type":"text","value":"text area"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/date-input/"},"children":[{"type":"text","value":"date input"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/checkbox/"},"children":[{"type":"text","value":"checkbox"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/radio-button/"},"children":[{"type":"text","value":"radio button"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/dropdown/"},"children":[{"type":"text","value":"dropdown"}]},{"type":"text","value":"."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"success","depth":3,"text":"Success"},{"id":"error","depth":3,"text":"Error"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:form-alert.md","_source":"content","_file":"design-system/5.components/form-alert.md","_extension":"md"},{"_path":"/design-system/components/form","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Form","description":"The Form component guides users to give information and consists of a group of related inputs or controls.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a form and its form input components to capture data from users. A form consists of a group of related inputs or controls."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Common form components include the:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/input-field/"},"children":[{"type":"text","value":"input field component"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/text-area/"},"children":[{"type":"text","value":"text area component"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/date-input/"},"children":[{"type":"text","value":"date input component"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/radio-button/"},"children":[{"type":"text","value":"radio button component"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/checkbox/"},"children":[{"type":"text","value":"checkbox component"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/dropdown/"},"children":[{"type":"text","value":"dropdown component"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"An input field) is for short (single-line) text entry. A text area is for longer text."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Other input types let a user select from predefined options. Use a radio button when a user needs to make only one selection. Use a checkbox for multiple selections."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Group related form components in logical chunks (fieldsets). A single form can have multiple fieldsets. For example, a fieldset with several input fields for an address, plus a fieldset with a date input and radio button for delivery preferences."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The user can submit a form when all fields are valid (see "},{"type":"element","tag":"a","props":{"href":"/design-system/components/form-alert/"},"children":[{"type":"text","value":"form alert"}]},{"type":"text","value":")."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-form--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"h4","props":{"id":"layout"},"children":[{"type":"text","value":"Layout"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use one form column to enable fast field comprehension. Users cannot scan easily if more columns are used."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Group related form components into logical chunks (fieldsets). This helps users understand the information they need to give."}]},{"type":"element","tag":"h4","props":{"id":"labels"},"children":[{"type":"text","value":"Labels"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each input must have a label."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use short, descriptive labels. This helps users quickly understand the information needed. It makes the content accessible, as a screen reader will read out these labels."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Put a label above its component (top-aligned). Labels will then be consistently aligned left, with small spaces between inputs. This helps users scan and fill the form."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Placeholder text should not be used as a label."}]},{"type":"element","tag":"h4","props":{"id":"requirement-optional-vs-mandatory"},"children":[{"type":"text","value":"Requirement - optional vs. mandatory"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Mark an input as ‘required’ if you do not want the form submission to work unless the user gives that information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Most fields on a simple form will be required."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Where possible, don’t include a large number of optional fields."}]},{"type":"element","tag":"h4","props":{"id":"hint-text"},"children":[{"type":"text","value":"Hint text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hint text can be used to tell the user what, or how, to successfully complete an input or text field."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, hint text can include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an overall description of the input field"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hints for what kind of information needs to be input"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"specific formatting examples or requirements."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form."}]},{"type":"element","tag":"h4","props":{"id":"placeholder-text"},"children":[{"type":"text","value":"Placeholder text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/form/#accessibility"},"children":[{"type":"text","value":"See accessibility"}]},{"type":"text","value":" (below)."}]},{"type":"element","tag":"h4","props":{"id":"error-messages"},"children":[{"type":"text","value":"Error messages"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling. When creating an error message, it must follow the guidance from the individual form component’s page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid. See the individual form component pages for suggested error messages."}]},{"type":"element","tag":"h4","props":{"id":"buttons"},"children":[{"type":"text","value":"Buttons"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Button labels should say what the button will do when a user interacts with it."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ensure the main action button tells the user when the form is being submitted (see "},{"type":"element","tag":"a","props":{"href":"/design-system/components/button/#loading-spinner"},"children":[{"type":"text","value":"button loading spinner"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To avoid confusing users about how to submit the form, use only one main action button. Do not use a reset button."}]},{"type":"element","tag":"h4","props":{"id":"validation"},"children":[{"type":"text","value":"Validation"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Form alert is used to tell the user the outcome of the form validation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If the form has been submitted successfully, the success alert will replace the form."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If the form has errors, the error alert will be placed at the top of the form, with an error summary and anchor links to all inputs that returned errors and require user actions."}]},{"type":"element","tag":"h4","props":{"id":"accessibility"},"children":[{"type":"text","value":"Accessibility"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All fields need a visible, accessible label. (Search fields are sometimes an exception to this.)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"On devices such as mobiles, display the keyboard required for the input. For example, a number keyboard for a date input."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never disable a submit button. Allow the user to submit the form and then display the error message. Use form alert to display the validation outcome."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use autocomplete to reduce typing for users."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep to one column."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use top-align labels."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always mark form fields as ‘required’ or ‘optional’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Make calls to action descriptive - state the intent of the action."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Write short, clear headings and form input labels."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use hint text (instead of labels) to explain any specifications."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use field length input constraints - for fields with a defined character count like phone numbers and postcodes."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Write clear error messages inline, in error summaries and in form alerts by specifying what went wrong, where and how to fix them."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t create a form without a submit button."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use an input or control without a form label."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid using all caps."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Forms use colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A form component in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that form and its components remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-form--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:form.md","_source":"content","_file":"design-system/5.components/form.md","_extension":"md"},{"_path":"/design-system/components/header","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Header","description":"The Header component introduces the purpose and content of a page.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use headers to inform the user of what is on the page. The header must be placed at the top of a page above the main body content and styled as an H1-level heading."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Headers include optional content such as introduction text, journey links, a call to action and an introduction banner."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Headers should feature a primary message and/or call to action. They can be accompanied by supporting content such as images or corner graphics."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The header can also support a campaign logo if required. This will display above the page title."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--default-journey-links"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep the header simple and concise."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use clear calls to action that align with the message or task."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use images that add value to the content and support the message."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include with featured links and buttons to help users perform key tasks."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include an optional campaign logo."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use a mix of reverse and default page title and introduction text styling."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t include the same links in the main and introduction banners."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with more than 6 journey links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t overload with content."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The header has 3 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"image."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default and reverse variants can be used with journey links or a call to action. These guide users to perform tasks or navigate to related information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"They can display corner images to enhance brand recognition and visual prominence. They can also display a supporting campaign logo if required."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The image variant displays a full background image with reverse blocked text. It only supports a page title and introduction text."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All variants can be used with the introduction banner."}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--default-story"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--default-call-to-action"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The reverse variant uses reversed blocked type for the title and introduction text. This adds visual prominence to the banner and its information."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--reverse-journey-links"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--reverse-call-to-action"},"children":[]},{"type":"element","tag":"h3","props":{"id":"image"},"children":[{"type":"text","value":"Image"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"An image can be added as a full background image. The title and introduction copy will always display as the reversed blocked type."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Images should not be stretched or too low in resolution. They should also not be complex or include text."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--image-reverse"},"children":[]},{"type":"element","tag":"h3","props":{"id":"introduction-banner"},"children":[{"type":"text","value":"Introduction banner"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The introduction banner:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"can be used to add content and journey links under the page title and introduction section in the main header banner"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"has an optional icon and journey links"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"should contain content relating to the content in the main header."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--intro-with-links"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"interaction-with-other-components"},"children":[{"type":"text","value":"Interaction with other components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When using a featured campaign banner with an image, the image can overlap the header, depending on the amount of content. By default, this will hide the header's bottom corner shape."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The bottom corner shape won't hide if an introduction banner is between the header and campaign banner."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"A demonstration of the interaction between the Header component and the campaign banner, the campaign banner image slightly overlaps the header.","src":"/assets/img/campaign-banner-behaviour.png"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Headers can be themed in 2 ways:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"site colour palette"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"neutral colour palette."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It will also adopt theming from the button component when displaying the call to action."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you choose neutral button for your site, the header will display buttons in the neutral theme."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--default-call-to-action"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--reverse-journey-links"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--intro-with-links"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"neutral-theme"},"children":[{"type":"text","value":"Neutral theme"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Implemented at a site level, headers can have a neutral theme option. This option is only applicable to the reverse blocked type. Neutral headers have predefined neutral colour values that must be used and cannot be edited or customised."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--image-neutral"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"image","depth":3,"text":"Image"},{"id":"introduction-banner","depth":3,"text":"Introduction banner"}]},{"id":"interaction-with-other-components","depth":2,"text":"Interaction with other components"},{"id":"theming","depth":2,"text":"Theming","children":[{"id":"neutral-theme","depth":3,"text":"Neutral theme"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:header.md","_source":"content","_file":"design-system/5.components/header.md","_extension":"md"},{"_path":"/design-system/components/in-page-navigation","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"In-page navigation","description":"The In-page navigation component sits above a page’s main content and shows a set of links.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use in-page navigation to make scanning and navigating within a single page quicker for users. This component shows links to headings that are on the current page. It sits at the top of the page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use in-page navigation for longer content pages. It acts as a table of contents, providing users with a summary and quick navigation across the page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The left-hand highlight bar:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"separates the component from the page content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"groups the navigation."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-in-page-navigation"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"In-page Navigation is ideal for pages with a lot of content. This will help users find their relevant content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use headings throughout your content, such as headings level 2 (H2) and 3 (H3). You can use these as navigation links at the start of the page, like a table of contents."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use subheadings as indented navigation links from the page."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't link to other pages, including on external sites."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use colons in the heading."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use it if you have less than 2 navigation links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use it with component headings, such as accordion item headings."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple’s theming applies colour to in-page navigation so that the user understands:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"its links and navigation heading relate to each other"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"they are deliberately separated from the main content."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-in-page-navigation"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:in-page-navigation.md","_source":"content","_file":"design-system/5.components/in-page-navigation.md","_extension":"md"},{"_path":"/design-system/components/input-field","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Input field","description":"The Input field component lets users input a short amount of text.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use input fields to let users enter, select and search for text. They are normally found in a form but can also be part of a modal or search."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use an input field for users to enter text shorter than a single line."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Input fields can have multiple input types, depending on the need and use case. They have a text input type by default."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Input fields can be used for entering:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"text: basic text or search terms"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"phone: a telephone number"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"email: an email address"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"passwords: a user's input is obscured with a dot (' • '), asterisk (' * ') or other symbol as they type."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don’t use an input field if the user’s text needs to be more than one line long: use a text area component instead."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-input--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Set the width of the input field to show the amount of information needed from the user. For example, use smaller widths for postcodes than for emails."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You must use a form label with an input field."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use an input field with:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"requirement label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hint text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"placeholder text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"prefix or suffix text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"prefix or suffix icon."}]}]},{"type":"element","tag":"h4","props":{"id":"avoid-placeholder-text"},"children":[{"type":"text","value":"Avoid placeholder text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information."}]},{"type":"element","tag":"h4","props":{"id":"hint-text"},"children":[{"type":"text","value":"Hint text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hint text can be used to tell the user what, or how, to successfully complete an input field."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, hint text can include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an overall description of the input field"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hints for what kind of information needs to be input"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"specific formatting examples or requirements."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form."}]},{"type":"element","tag":"h4","props":{"id":"prefix-and-suffixes"},"children":[{"type":"text","value":"Prefix and suffixes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use prefixes and suffixes to help users enter things like currencies and measurements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Prefixes and suffixes help when there’s a commonly understood symbol or abbreviation for the type of information needed."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don’t rely on prefixes or suffixes alone. Screen readers will not read them out."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need a specific type of information, say so in the input label and hint text. For example, ‘Cost, in dollars’ in the input label and ‘$’ in the prefix."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always use a label for input fields."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use hint text to specify helpful information such as:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"expected number format, for example ‘Must be 6 to 8 digits long’"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"minimum and maximum number values, for example ‘Minimum of # and maximum of #’."}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the prefix to indicate measurements and categories like currency, for example, '$'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the prefix together with hint text to reinforce what the input needs to be, for example 'Cost, in dollars'."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use an input field without a label."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid placeholder text because it can cause accessibility issues."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t disable copy and paste."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t set a minimum or maximum input limit without explicitly saying this in the hint text."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use placeholder text to give instructions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t write ambiguous error messages only stating what's wrong, explain how the user can fix it."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The input field has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, used on white backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse, used on neutral backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-input--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-input--reverse"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When creating an error message for an input field, use the wording below."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: empty input"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Enter [the missing information]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Enter your name'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input is too long"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must be [number] characters or less'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Delivery address must be 56 characters or less'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input is too short"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must be [number] characters or more'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Previous employer must be 3 characters or more'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input is too long or too short"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must be between [number] and [number] characters'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Justification must be between 3 and 56 characters'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input uses known characters that aren’t allowed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must not include [characters]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Reasons must not include + & ~'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input uses unknown characters that aren’t allowed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must only include [list of allowed characters]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Explanations must only include letters, numbers and commas'."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Input field uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"An input field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of an input field remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-input--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"error","depth":3,"text":"Error"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:input-field.md","_source":"content","_file":"design-system/5.components/input-field.md","_extension":"md"},{"_path":"/design-system/components/key-dates","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Key dates","description":"The Key dates component shows users a card promoting key dates or events.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use key dates to provide a card with brief summaries of up to 2 events or key dates with a call to action."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--key-dates"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use only on landing pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include in a grid of promo cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use once per page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use clear and concise content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use as the last card in the grid."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include a summary."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with navigation cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use the key dates card by itself."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t overload with content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with other interactive elements like links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use it to replace a call to action."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The key date card uses colour to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"add visual prominence to key information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicate an interaction to users."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--key-dates"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:key-dates.md","_source":"content","_file":"design-system/5.components/key-dates.md","_extension":"md"},{"_path":"/design-system/components/media-embed","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Media embed","description":"The Media embed component shows an image or video within the page content, with optional text to give context.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use media embed to add visual elements including images, videos, graphs, infographics, maps and charts to your page content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the optional text to combine the visual element with text, so that the user understands the visual element’s context. Optional text should always be used for complex media like graphs and charts with supporting data."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media can be an image or video. Images can display as small, medium or large."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When using the complex media variant, media displays at either a max width or height. This ensures it always displays the full image."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/design-system/components/media/"},"children":[{"type":"text","value":"media"}]},{"type":"text","value":" for information relating to file type, ratios and focal point."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--image-landscape"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use it with videos, images or complex images."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add data when using the complex image variant."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ensure the media is the right size so that it displays without error."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only add it to the content section of a page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add an optional image caption and metadata."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include alt text."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't include media unrelated to the page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid adding interactive elements, like links, to the caption or metadata sections."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use a video without closed captions and a transcript."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media embed has 3 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"video"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"complex media."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Depending on the variant used, you can display:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a caption"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"metadata"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a transcript link"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"accompanying data."}]}]},{"type":"element","tag":"h3","props":{"id":"image"},"children":[{"type":"text","value":"Image"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The image variant has 4 display options:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"landscape / 16:9 ratio"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"portrait / 3:4 ratio"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"square / 1:1 ratio"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"avatar / circle."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can display portrait, landscape and square as small, medium or large. Avatar only displays in small or medium."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The media gets cropped to fill the selected ratio. Make sure the media's focal point is best placed to accurately represent the media item."}]},{"type":"element","tag":"h4","props":{"id":"landscape"},"children":[{"type":"text","value":"Landscape"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--image-landscape"},"children":[]},{"type":"element","tag":"h4","props":{"id":"portrait"},"children":[{"type":"text","value":"Portrait"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--image-portrait"},"children":[]},{"type":"element","tag":"h4","props":{"id":"square"},"children":[{"type":"text","value":"Square"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--image-square"},"children":[]},{"type":"element","tag":"h4","props":{"id":"avatar"},"children":[{"type":"text","value":"Avatar"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--image-avatar"},"children":[]},{"type":"element","tag":"h3","props":{"id":"video"},"children":[{"type":"text","value":"Video"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Videos will always display at a 16:9 ratio."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A 'view transcript' link displays by default. Videos must have both closed captions and a transcript."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Include a supporting caption to give extra context to the user."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--video"},"children":[]},{"type":"element","tag":"h3","props":{"id":"complex-media"},"children":[{"type":"text","value":"Complex media"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Complex media items contain detail. They include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"infographics"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"graphs"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"flowchart"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"maps."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can support media by including:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional supporting data such as content or tables"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a view fullscreen link"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a download media link."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Optional supporting data displays in a dropdown list. Use the type of content that will best communicate your supporting data to the user. For example, some information is conveyed better by a table, rather than plain text."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Complex media will always display the full image. The media item will display at a predefined max height or width."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When the media is fullscreen, it displays in the media fullscreen component."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--complex-image"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media embed uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--complex-image"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"image","depth":3,"text":"Image"},{"id":"video","depth":3,"text":"Video"},{"id":"complex-media","depth":3,"text":"Complex media"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:media-embed.md","_source":"content","_file":"design-system/5.components/media-embed.md","_extension":"md"},{"_path":"/design-system/components/media-fullscreen","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Media fullscreen","description":"The Media fullscreen component is an icon, with text instructions, beneath your media items for users to interact with so they can view one or more related media items in fullscreen.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use media fullscreen to give users the option to toggle a fullscreen view of some media items. Media fullscreen can display media and content from your page’s media embed and media gallery components. It always displays the full media item, regardless of its ratio. The item fills the width or height of the available area."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Fullscreen view includes the media item's title and caption."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media fullscreen takes over the viewport completely. A transparent background helps users to know they are still on the page. When a user closes fullscreen view, they return to that same item in the gallery."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/design-system/components/media/"},"children":[{"type":"text","value":"media"}]},{"type":"text","value":" for information relating to file type, ratios and focal point."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-gallery--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always display the media item max height or width of the content area."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include a title for the media item."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include alt text."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display the media title and caption if used in the base component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use when you need to display a media item fullscreen."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with items that aren't media."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with a completely opaque background."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use pagination for one media item only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't crop or hide the media item."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media fullscreen adopts its theming from the pagination component."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-gallery--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:media-fullscreen.md","_source":"content","_file":"design-system/5.components/media-fullscreen.md","_extension":"md"},{"_path":"/design-system/components/media-gallery","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Media gallery","description":"The Media gallery component is a series of images users can side-scroll through.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a media gallery to collate a series of related images into a gallery. Media gallery allows users to scroll through related images. It's best used for displaying images."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media gallery combines images and text to give users context within the content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media items inside a media gallery will display as either landscape or portrait, at predefined ratios."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/design-system/components/media/"},"children":[{"type":"text","value":"media"}]},{"type":"text","value":" for information relating to file type, ratios and focal point."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-gallery--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include related images only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use at least 2 images."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always use a media title."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include an optional caption to help users understand images' context and relevance to the page content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use on any page type."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use for decorative purposes."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use sensory images."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use for a single image, instead use the media embed component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with media unrelated to page content."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media embed uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicating an interaction to users"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It also adopts its theming from the pagination component."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-gallery--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:media-gallery.md","_source":"content","_file":"design-system/5.components/media-gallery.md","_extension":"md"},{"_path":"/design-system/components/media","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Media","description":"The Media component is a container that houses media items to use in other components on a page.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use media to communicate and differentiate specific information through visuals."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media items sit within other components such as cards, or a media gallery."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use images if they help users complete a task. Images can make it easier for some people to understand information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use media to combine visual elements with text. This gives your content context and alignment."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-image--image"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always get copyright for all media used."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Nest media in other components."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Choose diverse images that reflect and support the diversity of Victoria."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only media that's relevant to the content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include alt text for each media item."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use appropriate resolution for the content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include a transcription for all audio content."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use a media item without alt text."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use video content without captions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't crop an image without a clear focal point."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The ratios you can use for media include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"1:1"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"4:3"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"16:9"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"21:9"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"3:1"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"avatar (circle)."}]}]},{"type":"element","tag":"h3","props":{"id":"copyright-requirements"},"children":[{"type":"text","value":"Copyright requirements"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You must get permission (a licence) to use copyright material. This includes images and text."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some images are available under an open access licence, such as "},{"type":"element","tag":"a","props":{"href":"https://au.creativecommons.net/","rel":["nofollow"]},"children":[{"type":"text","value":"Creative Commons"}]},{"type":"text","value":". Alt text is also licensed under copyright."}]},{"type":"element","tag":"h3","props":{"id":"file-resolution"},"children":[{"type":"text","value":"File resolution"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Image resolution must be appropriate for the content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don’t embed images with a large file size into content that you will publish online, such as PDFs or webpages. Optimise and compress all image files so they make it quicker for the user to access the information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design for mobile devices first. An image will scale to the device people view it on. Check that it’s easy to read on a mobile phone screen and a desktop before you publish it."}]},{"type":"element","tag":"h3","props":{"id":"focal-point"},"children":[{"type":"text","value":"Focal point"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always ensure that images work on all screen sizes. Select the focal point of the image to best position images in any area."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Consider cropping smaller images more to keep the impact of the original image."}]},{"type":"element","tag":"h3","props":{"id":"media-types"},"children":[{"type":"text","value":"Media types"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Multiple types of media can are supported and used to add meaning to content. These include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"photographs"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"decorative images"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"charts"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"graphs"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"maps"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"illustrations or drawings"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"video"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"audio."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Make sure you use the correct media type for the content it is supporting."}]},{"type":"element","tag":"h3","props":{"id":"file-types"},"children":[{"type":"text","value":"File types"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are many image file types. Seek specialist advice to optimise an image file as a vector or raster file format."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The following file types are recommended:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"photographs\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"jpeg"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"png"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"svg"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"png"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"charts/graphs\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"svg"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"png"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"video\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"mp4"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"audio\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"wav."}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"alternative-text"},"children":[{"type":"text","value":"Alternative text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All images, except purely decorative images, need a text alternative (alt text). Without this, your page will not address "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html","rel":["nofollow"]},"children":[{"type":"text","value":"WCAG 2.0 Criterion 1.1.1"}]},{"type":"text","value":" or conform with WCAG 2.0 or 2.1 AA standards. WCAG 2.0 AA standards are the minimum accessibility standards for all Victorian Government communications under the "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/brand-victoria-guidelines-logos","rel":["nofollow"]},"children":[{"type":"text","value":"Brand Victoria guidelines"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/tutorials/images/decision-tree/","rel":["nofollow"]},"children":[{"type":"text","value":"Web Accessibility initiative alt decision tree"}]},{"type":"text","value":" also guides you on whether your image needs alt text or not."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For purely descriptive images, the alt text attribute instead reads: alt=””."}]},{"type":"element","tag":"h4","props":{"id":"what-alt-text-does"},"children":[{"type":"text","value":"What alt text does"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alt text gives users who use screen readers (or devices that are not loading, or displaying, images) the information an image is meant to convey because:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a screen reader can read the alt text aloud"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"alt text is shown in the place of ‘broken’ or unloaded images on the page."}]}]},{"type":"element","tag":"h4","props":{"id":"how-to-write-alt-text"},"children":[{"type":"text","value":"How to write alt text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alt text must serve the equivalent purpose of the image itself, by:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"being short but specific (for example, ‘a Harry Potter novel’ rather than ‘a novel’)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"explaining the image’s function in the context of the page or content section (for example, ‘Search’ rather than ‘Magnifying glass’)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"using normal punctuation that helps users understand the text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"including the image text in the alt text (for images with text)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For more guidance on writing alt text, refer to "},{"type":"element","tag":"a","props":{"href":"https://www.stylemanual.gov.au/content-types/images/alt-text-captions-and-titles-images","rel":["nofollow"]},"children":[{"type":"text","value":"Alt text, captions and titles for images"}]},{"type":"text","value":" in the Australian Government Style Manual."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"copyright-requirements","depth":3,"text":"Copyright requirements"},{"id":"file-resolution","depth":3,"text":"File resolution"},{"id":"focal-point","depth":3,"text":"Focal point"},{"id":"media-types","depth":3,"text":"Media types"},{"id":"file-types","depth":3,"text":"File types"},{"id":"alternative-text","depth":3,"text":"Alternative text"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:media.md","_source":"content","_file":"design-system/5.components/media.md","_extension":"md"},{"_path":"/design-system/components/option-button","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Option button","description":"The Option button component is a set of buttons to help users filter content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use option buttons to show a set of options a user can choose from to filter content or results."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The option button component contains labels showing a user how the filter will work."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-option-buttons--squares"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You must use a form label with option buttons. The form label explains what happens when a user chooses an option. For example, ‘Filter by starting letter’."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always use descriptive labels for individual option buttons. Labels should help users choose, and say the category of content or results each option will show. This makes the content accessible, as screen readers will read out each label."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never preselect an option button on default. Users might miss that a filter has been automatically applied."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Help users filter content or results."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use short labels only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Order labels in alphabetical order to help users scan quickly."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add an ‘apply filter’ button if the option button will be used together with other form elements."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use for a call to action."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with long content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use without a form label."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never preselect an individual option button."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Option buttons have 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"custom."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Default uses the alphabet as a filter in the option buttons."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-option-buttons--squares"},"children":[]},{"type":"element","tag":"h3","props":{"id":"custom"},"children":[{"type":"text","value":"Custom"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The custom variant lets you create your own button labels as a filter."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"These labels must clearly tell the user what filter will be applied."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-option-buttons--fluid-widths"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Option buttons use colour to show interactive states. An option button in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that option button remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-option-buttons--squares"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"custom","depth":3,"text":"Custom"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:option-button.md","_source":"content","_file":"design-system/5.components/option-button.md","_extension":"md"},{"_path":"/design-system/components/page-action","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Page action","description":"The Page action component presents a collection of links that offer users a choice of actions, such as printing or downloading a document.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the Page action component to let users print or download pages and content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Page action presents as a collection of links giving users a choice of actions at a page level. This includes printing or downloading a document."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The component displays a combination of page-level actions."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Print page: prints the page a user is on."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Print full document: prints all pages in a publication or document, not only the page the user is on."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Download document: downloads a copy of the content that the page editor uploaded. You can add more than one document to the page action component. The documents should only be what's already on the page. Don't add new or extra content."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never use page actions for anything other than the above. Don't use it for links."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The print action prints the full document (section), not just the page the user is on. The document action downloads a document that has been uploaded in the content management system."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-page-action--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use in a page's sidebar section."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use as the first component in the sidebar, above the vertical navigation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with or without one or more documents."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include metadata with uploaded documents."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"in the content area of a page"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"with a document that has content different to the page's content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"for any other user actions."}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Page action uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons, to indicate a possible action to users"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-page-action--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:page-action.md","_source":"content","_file":"design-system/5.components/page-action.md","_extension":"md"},{"_path":"/design-system/components/pagination","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Pagination","description":"The Pagination component divides your content across more than one page into smaller lists to help users navigate forward and backwards.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use pagination to help users navigate forwards and backwards through your content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pagination breaks down content, making it more concise and less overwhelming. It does this by dividing your content across more than one page and into smaller lists. This makes it easier for users to find what they need."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Examples include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"search results or guidance divided into multiple website pages"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a collection of cards or media items."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pagination helps users to identify:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"how many pages or items they can navigate through"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"where the page or item they are viewing sits in the order of other pages or items"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"how they can immediately navigate to other pages or items."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pagination sits at the bottom of each page. It's a quick and easy way for users to move between each page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use pagination if your list has 10 or more results."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pagination identifies the page each result sits on. This makes it convenient for users to find again."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-page-links--page-links"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Stack standard pagination variant links vertically."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use standard and complex variants at the bottom of the body content area."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the simple variant nested in components, for example, the "},{"type":"element","tag":"a","props":{"href":"/design-system/components/media-gallery/"},"children":[{"type":"text","value":"media gallery"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/components/carousel/"},"children":[{"type":"text","value":"carousel"}]},{"type":"text","value":"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use ellipses to replace any skipped pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use pagination to avoid an infinite scroll of results, which can be a problem for keyboard users."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use pagination for one page only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only choose one pagination variant, never mix or combine them."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always put the user first, so don't break up content if it reduces usability or performance."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use for linear user journeys such as form completion."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pagination has 3 main variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"simple, for a small number of items or used in other components"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"standard, to navigate through a small number of pages"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"complex, when there is a large number of pages to navigate through."}]}]},{"type":"element","tag":"h3","props":{"id":"simple"},"children":[{"type":"text","value":"Simple"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The simple variant is for navigating through a small number of items. Use it to nest pagination in other components, like media gallery, media fullscreen and carousel."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-pagination--simple-tally"},"children":[]},{"type":"element","tag":"h3","props":{"id":"standard"},"children":[{"type":"text","value":"Standard"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The standard variant is for navigating through a small number of pages. It has 2 options for label display:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"page titles."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"page numbers."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use page titles to give more context."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When stacking the links, do it vertically. This helps screen magnifier users when they have zoomed in to better read the content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never show the previous page link on the first page because it will confuse the user. The same goes for the next page link on the final page."}]},{"type":"element","tag":"h4","props":{"id":"page-title"},"children":[{"type":"text","value":"Page Title"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-page-links--page-links"},"children":[]},{"type":"element","tag":"h4","props":{"id":"page-number"},"children":[{"type":"text","value":"Page Number"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-page-links--example-count"},"children":[]},{"type":"element","tag":"h3","props":{"id":"complex"},"children":[{"type":"text","value":"Complex"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The complex variant lets users navigate through a large number of pages. It's ideal for a long list of search results."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The user can interact with the next and back controls to move forward and backward through the pages. The user can navigate straight to a page by selecting its specific page number."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are 3 pages that should always remain highlighted:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The first page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The current page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The last page."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never show the previous page link on the first page because it will confuse the user. The same goes for the next page link on the final page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Display page numbers for the:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"current page on all screen sizes"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"previous and next pages on smaller screen sizes"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"page immediately before and after the current page on larger screen sizes"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"first and final pages on all screen sizes."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-pagination--complex"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pagination uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states"}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-page-links--page-links"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-pagination--complex"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"simple","depth":3,"text":"Simple"},{"id":"standard","depth":3,"text":"Standard"},{"id":"complex","depth":3,"text":"Complex"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:pagination.md","_source":"content","_file":"design-system/5.components/pagination.md","_extension":"md"},{"_path":"/design-system/components/primary-navigation","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Primary navigation","description":"The Primary navigation component appears as a menu sitting at the top of the page and contains links to site’s content pages.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use primary navigation to help users get to where they need to go. It shows links to key areas of the website and guides users to the content they are looking for. The main way users journey through your site should be through primary navigation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use primary navigation to let users identify where they are. It helps users know their current page location within the overall site."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary navigation contains:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a site logo"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"navigation links"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional search link."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The navigation and search links expand to either a fullscreen menu or search bar."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary navigation always sits at the top of the page. It displays above all page content and components."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-primary-nav--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"h4","props":{"id":"logo"},"children":[{"type":"text","value":"Logo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The logo lets users instantly recognise which organisation or entity owns the current page. When users interact with the logo, it should direct them to the site’s homepage."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Within the primary navigation component, the logo is centred vertically."}]},{"type":"element","tag":"h4","props":{"id":"co-branding-logos"},"children":[{"type":"text","value":"Co-branding logos"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Primary navigation allows for co-branding when required. The maximum size a co-branded logo can appear is 40h x 140w pixels."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/design-system/styles/logo/"},"children":[{"type":"text","value":"logo"}]},{"type":"text","value":" for guidance and requirements including co-branding."}]},{"type":"element","tag":"h4","props":{"id":"navigation-links"},"children":[{"type":"text","value":"Navigation links"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary navigation displays the top level of the site’s information architecture (IA). When the link has child pages, a chevron (a v-shaped arrow icon) displays next to the top page name. When clicked, this opens the mega menu and displays the child pages."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When there are no child pages, there is no chevron and it takes users to the page."}]},{"type":"element","tag":"h4","props":{"id":"mega-menu"},"children":[{"type":"text","value":"Mega menu"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The mega menu gives users access to pages deeper in the site. Use it if your site or service has more than one level of navigation. If a mega menu item has a chevron, users can expand it to display its child pages."}]},{"type":"element","tag":"h4","props":{"id":"search-menu"},"children":[{"type":"text","value":"Search menu"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The menu can display a search bar to provide users the option to perform a site search."}]},{"type":"element","tag":"h4","props":{"id":"smaller-devices"},"children":[{"type":"text","value":"Smaller devices"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary navigation adapts to small devices. The breakpoint for displaying the collapsed menu is 992px."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"On smaller devices primary navigation shows as a dropdown showing only one labelled menu item. It contains more levels of navigation options, which remain hidden until the single dropdown is interacted with and opens."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To aim to conform with "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv.html","rel":["nofollow"]},"children":[{"type":"text","value":"WCAG2.0 Criterion 1.1.1"}]},{"type":"text","value":", and for increased consistency across screens sizes, the primary navigation:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"uses the menu label and a chevron"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"doesn't use the 3 bar, or 'hamburger', menu icon."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose."}]}]},{"type":"element","tag":"h4","props":{"id":"responsive-behaviour"},"children":[{"type":"text","value":"Responsive behaviour"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Primary navigation supports only a small number of items. This is because it is a horizontal list."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Take this into account when defining your site's IA."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A maximum number of links can display before the navigation bar will respond to the collapsed menu display."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When used with a single logo:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"992-1199px breakpoint can display 6 links (including search)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"1200+ breakpoint can display 7 links (including search)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When used with a co-branded logo:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"992-1199px breakpoint can display 5 links (including search)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"1200+ breakpoint can display 6 links (including search)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When using the collapsed menu in the navigation bar, the mega menu will also display the mobile (collapsed) version."}]},{"type":"element","tag":"h4","props":{"id":"scroll-behaviour"},"children":[{"type":"text","value":"Scroll behaviour"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary navigation has show and hide behaviour on user scroll."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Scroll down: the primary navigation hides from view."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Scroll up: the primary navigation shows at the top of the viewport."}]}]},{"type":"element","tag":"h4","props":{"id":"interaction-with-other-components"},"children":[{"type":"text","value":"Interaction with other components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When a site has a quick exit button (a button component that uses the destructive variant), it sits underneath the primary navigation. If the user opens the mega menu or search menu, the quick exit button moves inside the menu container. So the quick exit action will always be available to users."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use across all pages of your site."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use descriptive, recognisable link labels."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display links in priority order: move from left (for most-used links) to right (for least-used links)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Base your navigation's structure on user research."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Structure navigation to prioritise tasks and information your research says users need the most."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with optional user action, such as login, if required."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t label links with jargon or unfamiliar terms."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use more than 150 characters per menu item."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Hover should never be used to expand dropdown lists as it is not reliably accessible or responsive."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"An organisational structure should not be used as a navigation stucture."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Primary navigation uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"visual prominence and brand recognition"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Primary navigation also adopts its theming from the search bar component."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-primary-nav--default-story"},"children":[]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"accessibility"},"children":[{"type":"text","value":"Accessibility"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To aim to conform with "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum","rel":["nofollow"]},"children":[{"type":"text","value":"WCAG2.2 Criterion 2.5.8"}]},{"type":"text","value":", the primary navigation bar uses the space either side of menu items. This allows for increased touch targets and the use of the block focus state styling."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2.5.8 Target Size (Minimum) The size of the "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-target","rel":["nofollow"]},"children":[{"type":"text","value":"target"}]},{"type":"text","value":" for "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-pointer-input","rel":["nofollow"]},"children":[{"type":"text","value":"pointer inputs"}]},{"type":"text","value":" is at least 24 by 24 "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-css-pixel","rel":["nofollow"]},"children":[{"type":"text","value":"CSS pixels"}]},{"type":"text","value":","}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"accessibility","depth":2,"text":"Accessibility"}]}},"_type":"markdown","_id":"content:design-system:5.components:primary-navigation.md","_source":"content","_file":"design-system/5.components/primary-navigation.md","_extension":"md"},{"_path":"/design-system/components/profile","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Profile","description":"The Profile component shows an avatar (image) on your page, with supporting text to display key information.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use profile to highlight key information to users by showing an avatar image with summary content. This highlights key information to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each row of content includes a:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"summary."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It's used to display key information, including:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"date"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"category."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use the profile component for displaying simple information. For data or complex information, consider using a table."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-profile--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep label as short as possible (under 2 words, like a name)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep all content clear and concise."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display at the top of profile pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always add alt text to the image."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use an image that's relevant to the summary."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use a label that doesn't match the summary."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use unimportant, complex or longform content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't include punctuation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use full URLs in the label or summary."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:profile.md","_source":"content","_file":"design-system/5.components/profile.md","_extension":"md"},{"_path":"/design-system/components/radio-button","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Radio button","description":"The Radio button component shows a list of options, with a radio (round) button to the left of each option’s description.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use radio buttons to let users select one option from a list."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"They help users make a single selection from a list of available items."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never use radio buttons if a user may select multiple options. Use a checkbox component instead."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-radio-group--default-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use radio buttons with:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"form label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"radio label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional requirement label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional hint text."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Radio buttons should always have a form and radio label."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always use a descriptive label for groups of radio buttons. The label should say what the options represent and should help the user to choose one. Doing so ensures good accessibility, as screen readers read each option's label."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Not all users will know the visual difference between a radio button and a checkbox. You could add extra instructions to guide then, like 'select one option’."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use if only one options needs selecting from a list."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the reverse variant on grey backgrounds."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always write clear and concise radio label descriptions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ensure you list options in a logical and unbiased manner."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If unsure about the list order, place from most common, to least common."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use hints to tell users they can only select one option."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always put the radio button on the left side of its label description to allow users, particularly those using screen magnifiers, to find labels."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use for lists with more than one possible option. Use checkboxes for these."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use a radio group with an horizontal alignment for displaying more than 2 options."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't list all possible options. Add an option for 'other'."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Radio buttons have 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, used on white backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse, used on neutral backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-radio-group--default-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-radio-group--reverse-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling. Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When creating an error message for radio buttons, use the wording below."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: invalid response to a yes/no question"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user understand why they would say yes."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select yes if [the information is true]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Select yes if you drive a car'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: invalid response to a choice (other than yes/no) from 2 options"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user choose the option that applies to them."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select if [the choice you are asking the user to make].'"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Select if you drive a car or truck’."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: invalid response to a choice from 3 or more options"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user to choose a single option from 3 or more options."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select the [singular piece of information you are seeking from the user].'"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Select the day of the week you drive the most.'"}]}]},{"type":"element","tag":"docs-example","props":{"id":"forms-radio-group--default-variant"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Radio buttons use colour for interactive states."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A radio button component in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that radio button remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-radio-group--default-variant"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"error","depth":3,"text":"Error"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:radio-button.md","_source":"content","_file":"design-system/5.components/radio-button.md","_extension":"md"},{"_path":"/design-system/components/related-links","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Related links","description":"The Related links component is a list of links to help users discover related content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use related links to present a user with a list of links. They can use these to explore content related to the current page or context, or to the next best action."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use if you’re presenting the user with related information or actions to help them deep dive into content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't use related links for linking to unrelated content."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-related-links--related-links"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use to help users discover related content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use in the sidebar section pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use at least 2 links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use no more than 8 links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep description clear, concise and specific to each link."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't add unrelated links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't overload each link with too many words."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use punctuation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't link to documents or videos - instead, embed them."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't include other interactive elements, like buttons."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:related-links.md","_source":"content","_file":"design-system/5.components/related-links.md","_extension":"md"},{"_path":"/design-system/components/results-listing","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Results listing","description":"The Results listing component shows a list of search result items, with each item displaying key information relevant to that search.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a results listing to display content results, like search results or news items. It surfaces (retrieves and shows) important information to the user."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A results listing shows multiple results items, each with their own:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"title, telling the user the name of the result"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"summary, summing up the result’s content for the user"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"URL, telling the user the website address for the result"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"featured content, visually highlighting key content from the result"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"topic/category, putting the result into its context within a broader page or site"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"date, showing a result’s published (simple variant) or updated (default variant) date"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"keyword term bold styling, showing the search term(s) in bold in the result displayed."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When displaying the results listing, consider a user's needs. Only display what will help them to make an informed decision."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-result-listing--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Put the search term in bold."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Test results so they are correct and relevant to the search term."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep descriptions under 150 words."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display up to 10 results."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't display the result title only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t make only the title interactive, ensure the entire result is interactive."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use both updated date and published date, choose one only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't display more than 10 results."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A result listing's 2 main variants are:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"simple."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default results listing has the option of surfacing key information when required."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Key information can include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"audience"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"status"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"grants metadata such as grant value."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default variant users the updated date by default."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-result-listing--with-details"},"children":[]},{"type":"element","tag":"h3","props":{"id":"simple"},"children":[{"type":"text","value":"Simple"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The simple variant displays the page title with accompanying metadata."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It uses the published date by default, which is automatically pulled in from the metadata."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We recommend using this variant when displaying simple results, like news items."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-result-listing--with-meta"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Results listing uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicating to the user there is an interaction possible"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When displaying key information such as status, the icon should adopt the relevant semantic colour."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-result-listing--with-details"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"simple","depth":3,"text":"Simple"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:results-listing.md","_source":"content","_file":"design-system/5.components/results-listing.md","_extension":"md"},{"_path":"/design-system/components/search-bar","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Search bar","description":"The Search bar shows a text input field with a search button to let users enter keywords and search content on the website.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the search bar to help users find what they are looking for."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users often rely on search to find the information they need. You can use it as an alternative to on-page navigation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users will use keywords in the search bar, often using different words or phrases. Search is especially helpful for users when navigating site that have many pages."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The search bar includes:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"text - placeholder and input text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"search button label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"search button icon"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional predictive list - present suggested keywords to the user"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional refine search link - expand to present advanced filters to the user."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-search-bar--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"h4","props":{"id":"input-text"},"children":[{"type":"text","value":"Input text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Include short, descriptive placeholder text. This tells the user what they can search for."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The text the user inputs replaces the placeholder text."}]},{"type":"element","tag":"h4","props":{"id":"search-button"},"children":[{"type":"text","value":"Search button"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The search button contains a button label and search icon."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Smaller devices show a responsive variant with:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"only a search icon"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"no button label."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This gives the user more space to write search text. Users know that a magnifying glass represents a search function."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The word ‘Search’ must appear in the alt text for screen readers."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The button type should be a submit button. This lets a user conduct a search:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"using the enter/return key"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"using fewer keystrokes"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"by choosing a suggestion (if applicable)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"that afterwards, still displays the search keyword."}]}]},{"type":"element","tag":"h4","props":{"id":"predictive-keyword-list"},"children":[{"type":"text","value":"Predictive keyword list"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful suggestions let users find what they need with less effort. They also reduce spelling errors and typing."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a short, ordered list of no more than 10 keyword suggestions."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"They should appear after only a few keystrokes."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Let the user scroll through keyword suggestions using keyboard navigation, with the Esc key to exit."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Scrolling ‘down’ past the last suggestion should loop the user back to the first one. Scrolling ‘up’ before the first suggestion should loop the user to the last (bottom) one."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the search bar to let users search your site (site search)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use default search field on white page background."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use reverse search field on grey background."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use menu variant in the mega menu only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use only default and reverse variants with predictive list suggestions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Even if it's hidden from view, always use a form label for screen readers."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep placeholder text concise and descriptive."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use default or reverse variants in the mega menu."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use filters or refine search with the menu variant."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use multiline search inputs."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Revised search shouldn't be by default."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with the refine search link if no filters are available."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The 3 search variants include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"menu."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is standard search. The button initiates search based on the text input."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-search-bar--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the reverse variant when on a neutral background and you can't use the default variant."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-search-bar--reverse"},"children":[]},{"type":"element","tag":"h3","props":{"id":"menu"},"children":[{"type":"text","value":"Menu"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use this in the mega menu. See "},{"type":"element","tag":"a","props":{"href":"/design-system/components/primary-navigation/"},"children":[{"type":"text","value":"Primary Navigation"}]},{"type":"text","value":" for more information."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-search-bar--menu"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The search bar uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicating an action to users"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interaction states."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-search-bar--default-story"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-search-bar--menu"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"menu","depth":3,"text":"Menu"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:search-bar.md","_source":"content","_file":"design-system/5.components/search-bar.md","_extension":"md"},{"_path":"/design-system/components/skip-link","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Skip link","description":"The Skip link component makes your page more accessible and easier to navigate, by helping keyboard users skip to the main content on a page.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use skip links to let users:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"navigate quickly through links and form elements"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"navigate your page when interacting only through the keyboard"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"let users navigate directly to the main page content."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Skip links bypass the primary navigation links (the top horizontal menu items appearing on every page)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Until the user activates it through a keyboard press, a skip link won’t display."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When visible, it's always the first item on a page and pushes down all page content."}]},{"type":"element","tag":"docs-example","props":{"id":"core-layout-skip-links--stand-alone"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"It must be on every page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"When visible, it must be the first element on the page."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use at the top of the page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't edit the styling."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't overlay page content. It must push down the page content."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The skip link uses the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with a skip link. This could be jarring or confusing to users."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-layout-skip-links--stand-alone"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:skip-link.md","_source":"content","_file":"design-system/5.components/skip-link.md","_extension":"md"},{"_path":"/design-system/components/social-share","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Social share","description":"The Social share component shows a list of links to help users to share pages to social media.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use social share to let users share pages to their own social media channels."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It uses the social media icons to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"provide extra context"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"distinguish between the different social media channels."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The link labels should clearly indicate the platform the user is sharing the page to."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-social-share--social-share"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use it to enable users to share pages to social media."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Place in sidebar section of pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Link labels should be the social media platform name."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use for links to sites that aren't social media channels."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid placing in a page's body section."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with labels that aren't social media platform names."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Social share uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicating an action to users"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-social-share--social-share"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:social-share.md","_source":"content","_file":"design-system/5.components/social-share.md","_extension":"md"},{"_path":"/design-system/components/statistics-grid","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Statistics grid","description":"The Statistics grid component shows a summary of 2 to 8 key statistics in a grid layout.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the statistics grid to present a user with multiple pieces of key information. This can help the user to determine if a page is relevant to them or not."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each cell features:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a key statistic"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"content to give the statistic context."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A statistics grid can act as a summary to help users view multiple related pieces of content."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-stats-grid--on-light"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use text or numbers in the content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Give a high-level summary of key information."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The grid will always span the full available width."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Place in the body section of pages."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with under 2 or over 8 statistics."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't overload with content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use when you need a large amount of text for context."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use images or graphics."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't add links."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The statistic grid has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, for white backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse, for neutral backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-stats-grid--on-light"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-stats-grid--on-dark"},"children":[]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:statistics-grid.md","_source":"content","_file":"design-system/5.components/statistics-grid.md","_extension":"md"},{"_path":"/design-system/components/table","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Table","description":"The Table component makes it easier for users to scan and compare data and content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A table is a systematic grid of data or content. They display in rows and columns to let users scan, analyse and compare information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users tend to read tables one row or column at a time. So, it's important that content is simple and logical."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A table can include a combination of:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"row and/or column headings that help users know what the rows and columns represent"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"body rows that display data or content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a table caption describing its content and helping users find, navigate and understand its information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a table footer that provides additional details, if required"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an expandable section with expandable rows, which can show extra related or supplementary information or data."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-data-table--structured-content"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Table content should be left-aligned because we read from left to right.  However, tables with financial figures should have columns that contain numerals set to right-aligned."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only left-align numbers that are arbitrary identifiers, known as 'nominal numbers'. These are numbers you cannot compare or combine arithmetically. These can include postal codes, IP addresses, or phone numbers. Column headers follow the alignment of the data."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The data table uses a zebra-stripe styling which alternates table row colours. This makes it easier for the user to scan horizontal information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't include too many columns as it's easier for users to scan down a list than to scroll across a page. So, consider more rows before more columns."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tables can respond differently based on how your website is built. Where tables do not respond, they will display with a horizontal scroll bar to view all the content. Where tables do respond on smaller screens, tables will stack vertically."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The complex variant has the option of expandable extra information in nested rows. This is shown by a dropdown toggle."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add a caption or footer, if required."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use for complex content and data sets."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Align numbers to the right (except nominal numbers)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Align headers according to their column data."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't repeat the same content in both the caption and summary."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with long form content. Cell content should be brief and scannable."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use without zebra-stripe styling.."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't centre-align content."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Table has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"simple, best used for simple data."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"complex, best used for complex data."}]}]},{"type":"element","tag":"h3","props":{"id":"simple"},"children":[{"type":"text","value":"Simple"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--table-scrollable"},"children":[]},{"type":"element","tag":"h3","props":{"id":"complex"},"children":[{"type":"text","value":"Complex"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The complex variant is best used to display complex data sets."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-data-table--structured-content"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Table data uses colour to indicate an action to the user."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-data-table--custom-content"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"simple","depth":3,"text":"Simple"},{"id":"complex","depth":3,"text":"Complex"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:table.md","_source":"content","_file":"design-system/5.components/table.md","_extension":"md"},{"_path":"/design-system/components/tabs","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Tabs","description":"The Tab component lets you organise related content so that users can switch between related information on the same page.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use tabs to let users stay on the same page, but access more content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only one tab is active at a time. Tabs help users navigate between, and display and hide, relevant content on your page so long as:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"you can split, categorise and clearly label the content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"there is a section more relevant for most users, which is placed first"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"seeing the all sections at the same time is not needed"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"you have a minimum of 2 tabs."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use tabs to organise content so a user doesn't have to navigate away to complete their task. Tabs are useful for maps or dashboards."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never use tabs if your content is sequential. Use it to present related content together, as a group."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tabs include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"labels"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an optional icon."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Icons tell the user the category of content under a tab. Keep icons simple and easily understood, and reinforce the label."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-tabs--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Order your tabs according to importance."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Labels should clearly and succinctly describe the content within the tab."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use tabs to group content that all sits at the same level of hierarchy."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Limit labels to one word and ensure they are unique."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use tabs within tabs."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't display disabled tabs."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't display more than one row of tabs when using the horizontal variant."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use tabs for important information, since a user will choose which tab to open, so they may not see some content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use if your content is short, instead use lists or paragraph text."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Tabs are not a substitute for primary navigation, so never use tabs as primary navigation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use tabs to tell the user about their progress through a page or content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use tabs when the user needs to compare information, since only one tab is visible at a time."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tabs have 2 display variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"vertical."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default variant sets the tab group bottom border to span the full available content width."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-tabs--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"vertical"},"children":[{"type":"text","value":"Vertical"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The vertical variant sets the tab group left border to span the height of the tab group."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-tabs--vertical"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tabs use colour to represent interaction states."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-tabs--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"vertical","depth":3,"text":"Vertical"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:tabs.md","_source":"content","_file":"design-system/5.components/tabs.md","_extension":"md"},{"_path":"/design-system/components/tag","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Tag","description":"The Tag component adds, and draws attention to, a category name for your content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use tags to help categorise content. Tags help users to scan and find content that's relevant to them."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content can have more than one category or theme. Using the tag component helps indicate this to the user."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When naming tags, use a noun or adjective. Don't use verbs as a user may confuse the tag with an action."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-tag--neutral"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use keywords."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use to draw attention to a category of content or information."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use nouns or adjectives."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use punctuation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't overuse tags."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use icons in the tags."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use as a heading."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use more than 2 words."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use as a link or action."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tags have 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, for use on neutral backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"neutral, for use on white backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-tag--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"neutral"},"children":[{"type":"text","value":"Neutral"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the reverse variant when the chip appears on the primary colour."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-tag--neutral"},"children":[]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"neutral","depth":3,"text":"Neutral"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:tag.md","_source":"content","_file":"design-system/5.components/tag.md","_extension":"md"},{"_path":"/design-system/components/text-area","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Text area","description":"The Text area component lets users select one option from a list.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use text area so users can enter multiple lines of text."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text area is used when information longer than a single line of text is needed or expected. For example, comments fields."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text areas can be resized and can be used with a character counter."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don’t use text area for succinct responses such as email addresses or names. In this case, you should use the input field component."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-textarea--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You must use a form label with a text area component."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use text area with:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"requirement label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hint text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"metadata"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"placeholder text."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Guide users about the amount of text wanted. Set the text area to match the amount preferred. It has no maximum height, but has a minimum height of 96px."}]},{"type":"element","tag":"h4","props":{"id":"resize-handle"},"children":[{"type":"text","value":"Resize handle"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users can change the text area height (but not width) with the resize handle. They can also scroll within the container."}]},{"type":"element","tag":"h4","props":{"id":"avoid-placeholder-text"},"children":[{"type":"text","value":"Avoid placeholder text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information."}]},{"type":"element","tag":"h4","props":{"id":"hint-text"},"children":[{"type":"text","value":"Hint text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hint text can be used to tell the user what, or how, to successfully complete a text area."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, hint text can include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an overall description of the text area"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hints for what kind of information needs to be input"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"specific formatting examples or requirements."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form."}]},{"type":"element","tag":"h4","props":{"id":"character-count"},"children":[{"type":"text","value":"Character count"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A character count can sit below the text area field. It tells users the maximum characters and their input’s current count."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users can enter more characters than the maximum. The character count then says they’ve entered too many characters before they submit the text area. The user can copy or reduce their full answer."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Even though there is a live character count, normal error responses (below) must appear if a user tries to submit a text area with too many characters."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use character count when there is a good reason. For example, legal reasons, technical reasons or evidence users will give more text than needed."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always use a label for text areas."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use hint text to specify helpful information such as specific formatting or information requirements."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Specify character counts when required."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use without a label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid placeholder text because it can cause accessibility issues."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t disable copy and paste."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t set a minimum or maximum input limit without explicitly saying this in the character count."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not use hint text if it isn’t relevant or meaningful to the user."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use placeholder text to give instructions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t write ambiguous error messages only stating what's wrong - explain how the user can fix it."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The text area has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, used on white backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse, used on neutral backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-textarea--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-textarea--reverse"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When creating an error message for an input field, use the wording below."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: empty input"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Enter [the missing information]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Enter your name'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input is too long"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must be [number] characters or less'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Delivery address must be 56 characters or less'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input is too short"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must be [number] characters or more'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Previous employer must be 3 characters or more'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input is too long or to short"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must be between [number] and [number] characters'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Justification must be between 3 and 56 characters'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input uses known characters that aren’t allowed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must not include [characters]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Reasons must not include + & ~'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input uses unknown characters that aren’t allowed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must only include [list of allowed characters]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Explanations must only include letters, numbers and commas'."}]}]},{"type":"element","tag":"docs-example","props":{"id":"forms-textarea--error"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text area uses colour to show interactive states. A text area field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a text area remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-textarea--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"error","depth":3,"text":"Error"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:text-area.md","_source":"content","_file":"design-system/5.components/text-area.md","_extension":"md"},{"_path":"/design-system/components/timeline","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Timeline","description":"The Timeline component contains blocks of content displayed in a linear order.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A timeline displays a visual journey of short blocks of content in a linear order. Each block can be actionable for users to navigate through to related content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A timeline can include a combination of:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"heading"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"subheading"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"summary"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"image."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use timelines to show a clear and sequential order of information. This assists users in linking pieces of information together."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some examples include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"dates"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"steps"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"stages"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"events"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"actions"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"outcomes."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The timeline component is ordered from top to bottom."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use between 3 to 8 discrete sections of content, so the user is not overwhelmed."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-timeline--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include a title for the entire timeline."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add a heading, subheading, short summary and optional image for each block."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only include 3 to 8 blocks per timeline."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add a link if you're providing more details on another page."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't add fewer than 3 or more than 8 blocks."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use without a heading for each block."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never include unrelated content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use if content doesn't flow in a sequential or linear order. Consider bullets points instead."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Timeline has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"progressive."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is for steps or stages along a process. Use the default timeline when progress is not relevant to the user."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-timeline--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"progressive"},"children":[{"type":"text","value":"Progressive"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the progressive variant to show the progress or status of the content to the user."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-timeline--progressive-active-2"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Timeline uses colour to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"show progress"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"highlight interactive states."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-timeline--progressive-active-2"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"progressive","depth":3,"text":"Progressive"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:timeline.md","_source":"content","_file":"design-system/5.components/timeline.md","_extension":"md"},{"_path":"/design-system/components/vertical-navigation","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Vertical navigation","description":"The Vertical navigation component displays a list of links to help users navigate a section of related pages.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use vertical navigation to help users navigate a section of related pages."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use vertical navigation to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"let users find and navigate to relevant information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"show the user where, within your site’s content hierarchy, the page they are viewing is located"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"show 4 nested content sections (parent sections) and a heading for the names of each section."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vertical navigation is placed next to your page’s body content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A chevron (v-shaped icon) next to each parent section lets users expand that parent section. This reveals the names of content pages falling within the parent section (child pages). Child page links are hidden by default."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The chevron flips up and parent sections stay expanded until the user interacts with the chevron to hide the child pages. This helps the user find what they need and minimises visual clutter."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-vertical-navigation--vertical-navigation"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use in a page's sidebar."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always keep the navigation links short. You can use a shorter version of the page title."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display up to 4 levels of navigation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add a link for the section's 'home' page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with at least 4 links."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't embed on a page that doesn't have a sidebar."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't add more than 4 child levels. Users will not see the indents, so navigation will become confusing."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use on a site with fewer than 5 pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with icons."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use it to link to other sites."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vertical navigation uses colour and active state focus to highlight the current page the user is on."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-vertical-navigation--vertical-navigation"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To show the user which page in the vertical navigation they are currently on, the active state is used. This displays as an underline in addition to colour, to aim to conform with the "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html","rel":["nofollow"]},"children":[{"type":"text","value":"Web Content Accessibility Guidelines 2.0 Success Criterion 1.4.1"}]},{"type":"text","value":"."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-without-color","rel":["nofollow"]},"children":[{"type":"text","value":"1.4.1"}]},{"type":"text","value":" Use of Color:"}]},{"type":"text","value":" Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:vertical-navigation.md","_source":"content","_file":"design-system/5.components/vertical-navigation.md","_extension":"md"},{"_path":"/framework","_dir":"","_draft":false,"_partial":false,"_locale":"","title":"Ripple Framework","description":"Ripple framework contains the tools for building SDP sites using the Ripple design system components.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Ripple Framework","src":"/assets/img/ripple-header.png","style":"margin-top: -20px; padding-bottom: 50px; "},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"what-is-it"},"children":[{"type":"text","value":"What is it?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple design system consists of the design elements and components used to build "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"any"}]},{"type":"text","value":" web application using the Victorian government brand. Ripple "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"framework"}]},{"type":"text","value":" is a collection of "},{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/nuxt"},"children":[{"type":"text","value":"Nuxt 3"}]},{"type":"text","value":" modules and "},{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/nuxt-layers"},"children":[{"type":"text","value":"layers"}]},{"type":"text","value":" primarily used to create headless SDP websites using the Tide Drupal CMS."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"ripple is made up of Figma design, CSS styles, Vue JS components and Nuxt JS Sites","src":"/assets/img/modules/rpl-modules.png","className":["rpl-u-padding-t-4"]},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"whos-it-for"},"children":[{"type":"text","value":"Who's it for?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Whilst the Ripple UI components can be used in non SDP projects, Ripple framework assumes a Tide Drupal backend in most cases."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using the Ripple framework, developers are able to build headless frontend websites that derive content from the Tide Drupal CMS via it's JSON API."}]},{"type":"element","tag":"h3","props":{"id":"sdp-architecture"},"children":[{"type":"text","value":"SDP architecture"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"SDP Architecture","src":"/assets/img/modules/sdp-architecture.png","className":["rpl-u-padding-12"]},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To find out more about Single Digital Presence please visit "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/single-digital-presence","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/single-digital-presence"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"what-is-it","depth":2,"text":"What is it?"},{"id":"whos-it-for","depth":2,"text":"Who's it for?","children":[{"id":"sdp-architecture","depth":3,"text":"SDP architecture"}]}]}},"_type":"markdown","_id":"content:framework:1.index.md","_source":"content","_file":"framework/1.index.md","_extension":"md"},{"_path":"/framework/key-concepts/nuxt","_dir":"key-concepts","_draft":false,"_partial":false,"_locale":"","title":"Nuxt","description":"Nuxt is the framework used in Ripple to deliver headless SDP websites that connect to Tide Drupal backends for content.","layout":"page","links":[{"text":"Nuxt documentation","url":"https://nuxt.com/"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt is a framework for building web applications that can be rendered both server side using Node.js and client side with Vue.js components. Nuxt is the framework used in Ripple to deliver headless SDP websites that connect to Tide Drupal backends for content."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"\"Nuxt is a fantastic choice for teams building a production-grade product on the web. It aims to bake in performance best practices while maintaining excellent Vue.js DX\""}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Addy Osmani - Chief Engineer of Chrome"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It is recommended that developers new to Ripple familiarise themselves with Nuxt by reading the documentation site, in particular, the following sections:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/getting-started/introduction","rel":["nofollow"]},"children":[{"type":"text","value":"Introduction · Get Started with Nuxt "}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/guide/concepts/vuejs-development","rel":["nofollow"]},"children":[{"type":"text","value":"Vue.js Development · Nuxt Concepts"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/guide/concepts/server-engine","rel":["nofollow"]},"children":[{"type":"text","value":" Server Engine · Nuxt Concepts "}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/guide/directory-structure/nuxt","rel":["nofollow"]},"children":[{"type":"text","value":".nuxt/ · Nuxt Directory Structure"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/guide/going-further/layers","rel":["nofollow"]},"children":[{"type":"text","value":"Authoring Nuxt Layers · Nuxt Advanced"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For support and help working with Nuxt please see "},{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/community/getting-help","rel":["nofollow"]},"children":[{"type":"text","value":"https://nuxt.com/docs/community/getting-help"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://nuxt.com/support/solutions","rel":["nofollow"]},"children":[{"type":"text","value":"https://nuxt.com/support/solutions"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are a number of recommended resources for learning Nuxt 3 including:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://masteringnuxt.com/nuxt3","rel":["nofollow"]},"children":[{"type":"text","value":"https://masteringnuxt.com/nuxt3"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://frontendmasters.com/courses/nuxt/","rel":["nofollow"]},"children":[{"type":"text","value":"https://frontendmasters.com/courses/nuxt/"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=ww94Jvi8JJo","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.youtube.com/watch?v=ww94Jvi8JJo"}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:framework:2.key-concepts:1.nuxt.md","_source":"content","_file":"framework/2.key-concepts/1.nuxt.md","_extension":"md"},{"_path":"/framework/key-concepts/nuxt-layers","_dir":"key-concepts","_draft":false,"_partial":false,"_locale":"","title":"Layers","description":"Nuxt layers are used to encapsulate Ripple functionality to share and reuse","layout":"page","links":[{"text":"Nuxt layers documentation","url":"https://nuxt.com/docs/getting-started/layers"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"nuxt"},"children":[{"type":"text","value":"Nuxt"}]},{"type":"text","value":" 3 provides a way to encapsulate part of a Nuxt project into what they call a Layer."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt layers are a powerful feature that you can use to share and reuse partial Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain."}]}]},{"type":"element","tag":"iframe","props":{"width":800,"height":500,"className":["rpl-u-padding-t-8","rpl-u-padding-b-8"],"style":"width: 100%","src":"https://www.youtube.com/embed/lnFCM7c9f7I","title":"YouTube video player","frameBorder":"0","allow":"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share","allowFullScreen":true},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 2, we utilise Nuxt Layers extensively to share isolated features between SDP sites. A good example is a content type. Using a Nuxt Layer we are able to add the components, API endpoints, composables, etc needed to implement the feature, without having the overhead of a Nuxt Module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A great feature of Nuxt Layers is that you can reference them from any public or private Git repo in addition to publishing via an NPM module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Below is a diagram showing how Ripple 2 features are distributed through Nuxt layers and used within projects."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Ripple layers architecture diagram. Shows how modules can be shared between projects","src":"/assets/img/modules/layers.png"},"children":[]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:framework:2.key-concepts:2.nuxt-layers.md","_source":"content","_file":"framework/2.key-concepts/2.nuxt-layers.md","_extension":"md"},{"_path":"/framework/key-concepts/api-endpoints","_dir":"key-concepts","_draft":false,"_partial":false,"_locale":"","title":"API endpoints","description":"Ripple creates an API that handles the translation of Drupal data into exactly whats needed on the page.","layout":"page","links":[{"text":"Nuxt API routes documentation","url":"https://nuxt.com/docs/guide/directory-structure/server#api-routes"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 2 we use API routes to create a "},{"type":"element","tag":"a","props":{"href":"https://medium.com/mobilepeople/backend-for-frontend-pattern-why-you-need-to-know-it-46f94ce420b0","rel":["nofollow"]},"children":[{"type":"text","value":"backend for frontend"}]},{"type":"text","value":" API that handles communicating with the Drupal Tide JSON API and maps the response to only what is required to render the page in Ripple."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"API routes diagram","src":"/assets/img/modules/api-routes.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"nitro-server-routes"},"children":[{"type":"text","value":"Nitro server routes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt 3 introduces the concept of "},{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/guide/directory-structure/server#api-routes","rel":["nofollow"]},"children":[{"type":"text","value":"server API routes"}]},{"type":"text","value":"   powered by the "},{"type":"element","tag":"a","props":{"href":"https://nitro.unjs.io/","rel":["nofollow"]},"children":[{"type":"text","value":"Nitro rendering engine"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://github.com/unjs/h3","rel":["nofollow"]},"children":[{"type":"text","value":"H3"}]},{"type":"text","value":" server."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nitro is the server layer that creates API routes in a Nuxt application. Nitro plugins run at build time and we use them to add the mapping needed to tell Ripple-tide-api package how to respond to a Drupal JSON API request for a content type node"}]},{"type":"element","tag":"h2","props":{"id":"ripple-tide-api"},"children":[{"type":"text","value":"Ripple Tide API"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple Tide API is the module that handles communication with Tide Drupal JSON API. It provides a wrapper service for API calls to Tide and provides an interface for adding mapping functions which transform the response from Drupal into only what's needed for rendering the website. This makes creating pages easier and improves performance by moving all data transformation into the server bundle where it can be easily cached."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"API routes diagram","src":"/assets/img/modules/ripple-tide-api.png"},"children":[]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"nitro-server-routes","depth":2,"text":"Nitro server routes"},{"id":"ripple-tide-api","depth":2,"text":"Ripple Tide API"}]}},"_type":"markdown","_id":"content:framework:2.key-concepts:3.API-endpoints.md","_source":"content","_file":"framework/2.key-concepts/3.API-endpoints.md","_extension":"md"},{"_path":"/framework/key-concepts/content-types","_dir":"key-concepts","_draft":false,"_partial":false,"_locale":"","title":"Content types","description":"Implementing content type specific page layouts","layout":"page","links":[{"text":"Drupal content types","url":"https://www.drupal.org/docs/7/understanding-drupal/content-types"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content types are a Drupal concept that allow for modelling content using fields to describe the data structure. See the "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/docs/7/understanding-drupal/content-types","rel":["nofollow"]},"children":[{"type":"text","value":"Drupal documentation"}]},{"type":"text","value":" for more details."}]},{"type":"element","tag":"h2","props":{"id":"ripple-content-types"},"children":[{"type":"text","value":"Ripple content types"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As SDP is a "},{"type":"element","tag":"a","props":{"href":"https://salsa.digital/insights/dissecting-the-single-digital-presence-platform","rel":["nofollow"]},"children":[{"type":"text","value":"headless CMS using a decoupled architecture"}]},{"type":"text","value":" once we have modelled content in Tide, we need a way to render it into a template that can be delivered to end users. Ripple content types allow you to support custom templates for new content types."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple content types consist of the following parts:"}]},{"type":"element","tag":"h3","props":{"id":"api-mapping"},"children":[{"type":"text","value":"API Mapping"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/api-endpoints"},"children":[{"type":"text","value":"API Endpoints"}]},{"type":"text","value":" for more information the Tide API translation layer. For each content type we supply a function that maps the Tide Drupal API response into more concise fields that match the data needed for"}]},{"type":"element","tag":"h3","props":{"id":"template"},"children":[{"type":"text","value":"Template"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To render the page using Ripple UI components, we need to create a Vue component that is passed the data from the API request and, using Ripple UI components, creates a layout that matches your intended design."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the "},{"type":"element","tag":"a","props":{"href":"/framework/guides/creating-content-types"},"children":[{"type":"text","value":"Content type guide"}]},{"type":"text","value":" for more information on creating new content types."}]}]},{"type":"element","tag":"h2","props":{"id":"core-content-types"},"children":[{"type":"text","value":"Core content types"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Tide we have a number of content types which are part of the core distribution and are initially included in SDP sites"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Landing page"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Event"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Grant"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"News"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Publication (page)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Alert"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"ripple-content-types","depth":2,"text":"Ripple content types","children":[{"id":"api-mapping","depth":3,"text":"API Mapping"},{"id":"template","depth":3,"text":"Template"}]},{"id":"core-content-types","depth":2,"text":"Core content types"}]}},"_type":"markdown","_id":"content:framework:2.key-concepts:4.content-types.md","_source":"content","_file":"framework/2.key-concepts/4.content-types.md","_extension":"md"},{"_path":"/framework/key-concepts/dynamic-components","_dir":"key-concepts","_draft":false,"_partial":false,"_locale":"","title":"Dynamic components","description":null,"layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dynamic components are a concept in Ripple that is closely tied to the concept of 'Paragraphs' in Drupal. See the "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/project/paragraphs","rel":["nofollow"]},"children":[{"type":"text","value":"Drupal documentation for Paragraphs"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dynamic components/paragraphs can be added to pages in drupal (see "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/project/paragraphs","rel":["nofollow"]},"children":[{"type":"text","value":"Key concepts - content types"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple the raw paragraphs from the Drupal JSON API and 'mapped' to a Vue component, along with the props required for that component to render. This Vue component, along with the associated mapping is what is referred to as the 'Dynamic component'."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Illustration of hows how dynamic components are mapped from drupal paragraphs to vue components","src":"/assets/img/modules/dynamic-components.png"},"children":[]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:framework:2.key-concepts:5.dynamic-components.md","_source":"content","_file":"framework/2.key-concepts/5.dynamic-components.md","_extension":"md"},{"_path":"/framework/guides/migrating","_dir":"guides","_draft":false,"_partial":false,"_locale":"","title":"Migrating from Ripple 1.x","description":"This guide is intended to outline the process of updating SDP sites using Ripple 1.x to Ripple 2. It is intended for developers tasked with porting Ripple 1 sites and features to Ripple 2.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"background"},"children":[{"type":"text","value":"Background"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2 is a complete rewrite of both the design system and the Nuxt modules used to create SDP sites with it. It is a breaking change with the processes used to create sites and functionality used in Ripple 1. This was required due to the following reasons:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Latest versions of Vue and Nuxt 3 introducing breaking changes"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Deprecation of IE11 support allowing us to support modern browser features"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Opportunity to adopt best practices such as Typescript and modern CSS"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Build up of technical and design debt"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Improvements to the design allowing better theming and accessibility"}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Due to breaking changes between versions 2 and 3 of both Vue and Nuxt there is no automated way to upgrade Ripple components and sites.\n"},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"Custom functionality built on Ripple 1 will need to be rewritten to use Ripple 2 API’s and design."}]}]}]},{"type":"element","tag":"h2","props":{"id":"migrating-your-site"},"children":[{"type":"text","value":"Migrating your site"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If your site is supported by the SDP team for upgrades, the initial site upgrade will be handled by the SDP team. The process will be as follows:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a new empty V2 branch will be created in the site repository"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a fresh install of Ripple 2 will be added to the site"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"all required environment variables will be added to the project to connect the site to the Tide content backend"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"the V2 branch will be setup to be served from behind the Section.io CDN"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The migration of the following will be out of scope for sites without an MoU for SDP support:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Custom content types"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Custom user facing components"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Custom pages"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Extensive theme customisation outside of those documented in the theming guide"}]}]},{"type":"element","tag":"h2","props":{"id":"migrating-features-from-ripple-1x"},"children":[{"type":"text","value":"Migrating features from Ripple 1.x"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Please review the following concepts before proceeding:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/content-types"},"children":[{"type":"text","value":"Content types"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/api-endpoints"},"children":[{"type":"text","value":"API mapping"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/dynamic-components"},"children":[{"type":"text","value":"Dynamic components"}]}]}]},{"type":"element","tag":"h3","props":{"id":"content-types"},"children":[{"type":"text","value":"Content types"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content types in Tide allow for defining custom fields that can be returned via the Drupal JSON API. Because SDP sites are headless, we need to tell Ripple how to render each custom content type on the front end."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 1.x, each content type was added through the convention of adding a folder named tide and each content type as a subfolder. See "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple/tree/develop/examples/basic-examples/tide/modules/example-content-type","rel":["nofollow"]},"children":[{"type":"text","value":"Ripple 1 example"}]},{"type":"text","value":".\nThe mapping of the tide API response was done through "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple/blob/develop/packages/ripple-nuxt-tide/modules/news/tide.config.j","rel":["nofollow"]},"children":[{"type":"text","value":"tide.config.js"}]},{"type":"text","value":". The JSON API response was returned in its entirety and mapping the Drupal fields to Ripple components was done through the Page component."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 2.x we move the mapping of data to the Nuxt server layer. This allows us to only return the necessary data needed to the end user, reducing the JSON payload from Drupal."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For more information on creating new content types see the guide on "},{"type":"element","tag":"a","props":{"href":"creating-content-types"},"children":[{"type":"text","value":"creating content types"}]}]},{"type":"element","tag":"h3","props":{"id":"dynamic-components"},"children":[{"type":"text","value":"Dynamic components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tide CMS makes use of "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/project/paragraphs","rel":["nofollow"]},"children":[{"type":"text","value":"Drupal paragraphs"}]},{"type":"text","value":" to structure content types to allow content creators flexibility when composing content. Creating new paragraph types that can be reused for the landing page content or across others is a common customisation task."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 1, new paragraph support was added through custom mappings "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple/blob/develop/examples/basic-examples/tide/modules/example-override-mapping/tide.config.js","rel":["nofollow"]},"children":[{"type":"text","value":"See Ripple 1"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 2, we need to add similar support - See "},{"type":"element","tag":"a","props":{"href":"dynamic-components"},"children":[{"type":"text","value":"Guide to creating dynamic components"}]}]},{"type":"element","tag":"h3","props":{"id":"search-listing-pages"},"children":[{"type":"text","value":"Search listing pages"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This feature is still in Beta, please see the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions/660","rel":["nofollow"]},"children":[{"type":"text","value":"feature proposal"}]},{"type":"text","value":" for more information."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Listing pages are pages that contain dynamic lists of links to other pages. These are typically used to generate index pages when there are large amounts of similar items. See "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/grants","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/grants"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/victorian-honour-roll-of-women","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/victorian-honour-roll-of-women"}]},{"type":"text","value":" for example."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 1 there was no dedicated content type for creating listing pages and hence these pages were usually created as static pages in the frontend."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 2 we intend to move to a standard content type that allows configuring the search experience from the backend. Please see the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions/660","rel":["nofollow"]},"children":[{"type":"text","value":"feature proposal"}]},{"type":"text","value":" for more info."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"background","depth":2,"text":"Background"},{"id":"migrating-your-site","depth":2,"text":"Migrating your site"},{"id":"migrating-features-from-ripple-1x","depth":2,"text":"Migrating features from Ripple 1.x","children":[{"id":"content-types","depth":3,"text":"Content types"},{"id":"dynamic-components","depth":3,"text":"Dynamic components"},{"id":"search-listing-pages","depth":3,"text":"Search listing pages"}]}]}},"_type":"markdown","_id":"content:framework:3.guides:1.migrating.md","_source":"content","_file":"framework/3.guides/1.migrating.md","_extension":"md"},{"_path":"/framework/guides/new-sites","_dir":"guides","_draft":false,"_partial":false,"_locale":"","title":"Setting up a new site","description":"A guide to setting up new SDP frontend sites using Ripple framework.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Setting up new sites with Ripple 2 is made easy with our CLI tool and provisioning process. Before you do so though please ensure you have got in touch with the SDP engagement manager ("},{"type":"element","tag":"a","props":{"href":"mailto:digital@dpc.vic.gov.au"},"children":[{"type":"text","value":"digital@dpc.vic.gov.au"}]},{"type":"text","value":") prior and have submitted a support request to the Digital Victoria Help Centre "},{"type":"element","tag":"a","props":{"href":"https://digital-vic.atlassian.net/servicedesk/customer/portals","rel":["nofollow"]},"children":[{"type":"text","value":"https://digital-vic.atlassian.net/servicedesk/customer/portals"}]}]},{"type":"element","tag":"h2","props":{"id":"requirements"},"children":[{"type":"text","value":"Requirements"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When onboarding a new project to SDP the following will be provisioned for you:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Git repo created"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Required platform files added to repo, required Dockerfile, etc"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Bay hosting environment configured"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Section.io CDN setup and configured"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Environment variables set to your project specific requirements"}]}]},{"type":"element","tag":"h2","props":{"id":"local-development-dependencies"},"children":[{"type":"text","value":"Local development dependencies"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Please make sure you have the following dependencies installed before proceeding. Typically local development is not performed through a docker container on the front end."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Node version 16.11.0 or greater (We recommend installing Node through Node Version Manager - See "},{"type":"element","tag":"a","props":{"href":"https://github.com/nvm-sh/nvm","rel":["nofollow"]},"children":[{"type":"text","value":"https://github.com/nvm-sh/nvm"}]},{"type":"text","value":" for install guide)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"NPM version 8.1.0 or greater"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Please see the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"engines"}]},{"type":"text","value":" key in "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"package.json"}]},{"type":"text","value":" for most accurate versions."}]},{"type":"element","tag":"h2","props":{"id":"installing-ripple"},"children":[{"type":"text","value":"Installing Ripple"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For SDP sites, this will also be applied. However, if you wish to create a local install of Ripple outside of a project see below."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Installing Ripple is easy with the included CLI tool:"}]},{"type":"element","tag":"pre","props":{"code":"npx @dpc-sdp/nuxt-ripple-cli init site ~/path/to/site --name \"My Site\"\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npx @dpc-sdp/nuxt-ripple-cli init site ~/path/to/site --name \"My Site\"\n"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will copy the required files needed to setup your site into "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"~/path/to/site"}]}]},{"type":"element","tag":"pre","props":{"code":"cd ~/path/to/site && npm install\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"cd ~/path/to/site && npm install\n"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will install all dependencies with NPM, you can then run the development server with"}]},{"type":"element","tag":"pre","props":{"code":"npm run dev\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm run dev\n"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"requirements","depth":2,"text":"Requirements"},{"id":"local-development-dependencies","depth":2,"text":"Local development dependencies"},{"id":"installing-ripple","depth":2,"text":"Installing Ripple"}]}},"_type":"markdown","_id":"content:framework:3.guides:2.new-sites.md","_source":"content","_file":"framework/3.guides/2.new-sites.md","_extension":"md"},{"_path":"/framework/guides/brand-application","_dir":"guides","_draft":false,"_partial":false,"_locale":"","title":"Applying theme and brand","description":"A guide to applying theme and brand assets to Ripple sites.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Theming with brand colours is embedded deeply into Ripple, using "},{"type":"element","tag":"a","props":{"href":"https://amzn.github.io/style-dictionary/#/tokens","rel":["nofollow"]},"children":[{"type":"text","value":"design tokens"}]},{"type":"text","value":". Global and component styles are built on a base level of tokens, that can be adjusted at a "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"site"}]},{"type":"text","value":" level by modifying a few key properties."}]},{"type":"element","tag":"h2","props":{"id":"token-naming"},"children":[{"type":"text","value":"Token naming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple uses a naming scheme for tokens, and the CSS custom properties are derived with this pattern:"}]},{"type":"element","tag":"pre","props":{"code":"--rpl(-<module>)-<attribute>(-<level>)\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"--rpl(-<module>)-<attribute>(-<level>)\n"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some example props:"}]},{"type":"element","tag":"pre","props":{"code":"--rpl-clr-primary\n--rpl-clr-success-light\n--rpl-type-size-5\n--rpl-sp-3\n--rpl-border-4\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"--rpl-clr-primary\n--rpl-clr-success-light\n--rpl-type-size-5\n--rpl-sp-3\n--rpl-border-4\n"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"And a worked example:"}]},{"type":"element","tag":"pre","props":{"code":".example-block {\n  border-color: var(--rpl-clr-primary);\n  border-style: solid;\n  border-width: var(--rpl-border-4);\n  colour: var(--rpl-clr-primary);\n  padding: var(--rpl-sp-3);\n}\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".example-block {\n  border-color: var(--rpl-clr-primary);\n  border-style: solid;\n  border-width: var(--rpl-border-4);\n  colour: var(--rpl-clr-primary);\n  padding: var(--rpl-sp-3);\n}\n"}]}]},{"type":"element","tag":"h2","props":{"id":"theme-properties"},"children":[{"type":"text","value":"Theme properties"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The minimum set of required properties are listed below:"}]},{"type":"element","tag":"pre","props":{"code":"--rpl-clr-primary\n--rpl-clr-footer-alt\n--rpl-clr-link\n--rpl-clr-type-primary-accessible\n--rpl-clr-primary-alt\n--rpl-clr-type-primary-alt-accessible\n--rpl-clr-footer\n--rpl-clr-type-footer-accessible\n--rpl-clr-primary-alpha\n--rpl-clr-accent\n--rpl-clr-accent-alt\n--rpl-clr-focus\n--rpl-clr-gradient-horizontal\n--rpl-clr-gradient-vertical\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"--rpl-clr-primary\n--rpl-clr-footer-alt\n--rpl-clr-link\n--rpl-clr-type-primary-accessible\n--rpl-clr-primary-alt\n--rpl-clr-type-primary-alt-accessible\n--rpl-clr-footer\n--rpl-clr-type-footer-accessible\n--rpl-clr-primary-alpha\n--rpl-clr-accent\n--rpl-clr-accent-alt\n--rpl-clr-focus\n--rpl-clr-gradient-horizontal\n--rpl-clr-gradient-vertical\n"}]}]},{"type":"element","tag":"h2","props":{"id":"sdp"},"children":[{"type":"text","value":"SDP"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In SDP, the theme is managed in the back-end system via the Site Taxonomy. Site entries have a collection of key-value "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"site theme values"}]},{"type":"text","value":", and also "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"site feature flag values"}]},{"type":"text","value":" to define site-specific settings, e.g."}]},{"type":"element","tag":"pre","props":{"code":"Key\nrpl-clr-primary\nValue\n#1c4f9c\n\nKey\nfooterTheme\nValue\nneutral\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"Key\nrpl-clr-primary\nValue\n#1c4f9c\n\nKey\nfooterTheme\nValue\nneutral\n"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Both these collections are exposed to the front-end through the Site API, and can immediately update production sites without requiring a code change or deployment."}]},{"type":"element","tag":"h2","props":{"id":"secondary-logo"},"children":[{"type":"text","value":"Secondary logo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The secondary logo is also content managed, and can be set on the same Site Taxonomy page in the back-end under "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"Logo"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"appconfig"},"children":[{"type":"text","value":"app.config"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Theme and feature flag properties may also be defined in the Nuxt "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"app.config.ts"}]},{"type":"text","value":" for the site. This matches the naming used in the Site API (note the difference in "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"--"}]},{"type":"text","value":" for theme, since these are Javascript config props, not CSS custom props):"}]},{"type":"element","tag":"pre","props":{"code":"export default defineAppConfig({\n  ripple: {\n    featureFlags: {\n      contentCollectionSearchConnector: 'elasticsearch'\n    },\n    theme: {\n      'rpl-clr-primary': '#6B19A3',\n      'rpl-clr-footer-alt': '#6B19A3',\n      'rpl-clr-link': '#6B19A3',\n      'rpl-clr-type-primary-accessible': '#6B19A3',\n      'rpl-clr-primary-alt': '#3F006B',\n      'rpl-clr-type-primary-alt-accessible': '#3F006B',\n      'rpl-clr-footer': '#3F006B',\n      'rpl-clr-type-footer-accessible': '#3F006B',\n      'rpl-clr-primary-alpha': 'rgba(107, 25, 163, 0.5)',\n      'rpl-clr-accent': '#6DDD97',\n      'rpl-clr-accent-alt': '#EAFAF0',\n      'rpl-clr-focus': '#9DEF65',\n      'rpl-clr-gradient-horizontal': 'linear-gradient(90deg, #382484 0%, #5A0099 20%, #7623B0 35%, #2E7478 50%, #2FA26F 70%, #2FCE6A 80%)',\n      'rpl-clr-gradient-vertical': 'linear-gradient(180deg, #382484 0%, #5A0099 20%, #7623B0 35%, #2E7478 50%, #2FA26F 70%, #2FCE6A 80%)'\n    }\n  }\n})\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default defineAppConfig({\n  ripple: {\n    featureFlags: {\n      contentCollectionSearchConnector: 'elasticsearch'\n    },\n    theme: {\n      'rpl-clr-primary': '#6B19A3',\n      'rpl-clr-footer-alt': '#6B19A3',\n      'rpl-clr-link': '#6B19A3',\n      'rpl-clr-type-primary-accessible': '#6B19A3',\n      'rpl-clr-primary-alt': '#3F006B',\n      'rpl-clr-type-primary-alt-accessible': '#3F006B',\n      'rpl-clr-footer': '#3F006B',\n      'rpl-clr-type-footer-accessible': '#3F006B',\n      'rpl-clr-primary-alpha': 'rgba(107, 25, 163, 0.5)',\n      'rpl-clr-accent': '#6DDD97',\n      'rpl-clr-accent-alt': '#EAFAF0',\n      'rpl-clr-focus': '#9DEF65',\n      'rpl-clr-gradient-horizontal': 'linear-gradient(90deg, #382484 0%, #5A0099 20%, #7623B0 35%, #2E7478 50%, #2FA26F 70%, #2FCE6A 80%)',\n      'rpl-clr-gradient-vertical': 'linear-gradient(180deg, #382484 0%, #5A0099 20%, #7623B0 35%, #2E7478 50%, #2FA26F 70%, #2FCE6A 80%)'\n    }\n  }\n})\n"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Note in this example the same value is used in the first four properties (primary branding colour), then the next four (alternate branding colour). Even though they use the same value, these properties must all be defined. The system was set up this way to support accessible "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"light-on-dark"}]},{"type":"text","value":" and "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"dark-on-light"}]},{"type":"text","value":" theming options."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"token-naming","depth":2,"text":"Token naming"},{"id":"theme-properties","depth":2,"text":"Theme properties"},{"id":"sdp","depth":2,"text":"SDP"},{"id":"secondary-logo","depth":2,"text":"Secondary logo"},{"id":"appconfig","depth":2,"text":"app.config"}]}},"_type":"markdown","_id":"content:framework:3.guides:3.brand-application.md","_source":"content","_file":"framework/3.guides/3.brand-application.md","_extension":"md"},{"_path":"/framework/guides/creating-content-types","_dir":"guides","_draft":false,"_partial":false,"_locale":"","title":"Creating content types","description":"How to create new content types for the SDP platform","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/content-types"},"children":[{"type":"text","value":"key concepts - content types"}]},{"type":"text","value":" for an overview of what content types are and the core content types used within the SDP platform."}]}]},{"type":"element","tag":"h2","props":{"id":"anatomy"},"children":[{"type":"text","value":"Anatomy"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content types are comprised of three main parts:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#the-mapping-object"},"children":[{"type":"text","value":"A mapping object"}]},{"type":"text","value":" - maps API data to pass to a Vue component"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#the-server-plugin"},"children":[{"type":"text","value":"A server plugin"}]},{"type":"text","value":" - registers the content type with "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"@dpc-sdp/ripple-tide-api"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#the-vue-component"},"children":[{"type":"text","value":"And Vue components"}]},{"type":"text","value":" - takes the mapped data and renders the content type"}]}]},{"type":"element","tag":"h2","props":{"id":"creating-a-content-type"},"children":[{"type":"text","value":"Creating a content type"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Nuxt Ripple CLI provides a simple way to add new content types, to get started just run the following command:"}]},{"type":"element","tag":"pre","props":{"code":"npx @dpc-sdp/nuxt-ripple-cli add content-type [DIRECTORY] --name {NAME} --createTests --cypressPath {CYPRESSPATH}\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npx @dpc-sdp/nuxt-ripple-cli add content-type [DIRECTORY] --name {NAME} --createTests --cypressPath {CYPRESSPATH}\n"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Where "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"[DIRECTORY]"}]},{"type":"text","value":" is the location to output the content type scaffolding, "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"{NAME}"}]},{"type":"text","value":" is the name of the new content type, and "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"{CYPRESSPATH}"}]},{"type":"text","value":" is the relative path to be used for the cypress tests folder."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using the CLI is the preferred way to create new content types as it will ensure the correct file structure and naming conventions are used. It will also scaffold the mapping object, server plugin, and Vue component for you."}]}]},{"type":"element","tag":"h2","props":{"id":"the-mapping-object"},"children":[{"type":"text","value":"The mapping object"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The mapping object is responsible for supplying the data mapping and includes."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Data mapping"}]},{"type":"text","value":": the data mapping is responsible for mapping the Tide API response data (i.e. Drupal JSON) into a clean format that can be used within the Vue component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Includes"}]},{"type":"text","value":": the includes are an array of fields that need to be added to the API request so Drupal knows what referenced entities to include in the API response, for more on Drupal includes see "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/docs/core-modules-and-themes/core-modules/jsonapi-module/includes","rel":["nofollow"]},"children":[{"type":"text","value":"JSON API includes"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Below is an example mapping object."}]},{"type":"element","tag":"pre","props":{"code":"import type { IRplTideModuleMapping } from '@dpc-sdp/ripple-tide-api/types'\nimport { tidePageBaseMapping, tidePageBaseIncludes } from '@dpc-sdp/nuxt-ripple/mapping'\nimport { getField, getImageFromField } from '@dpc-sdp/ripple-tide-api'\n\nconst tideMyConentTypeModule: IRplTideModuleMapping = {\n  mapping: {\n    // The base mapping is used to add common fields\n    // See the tidePageBaseMapping function for details \n    ...tidePageBaseMapping({ withTopicTags: true }),\n    \n    content: 'field_my_content_type_content',\n    \n    // Can be nested as needed\n    header: {\n      intro: 'field_landing_page_intro_text',\n    },\n    \n    // Use a function to transform the data\n    files: (src) => getField(src, 'field_node_files').map((file) => ({\n      name: file.name,\n      url: file.field_media_file.url\n    })),\n\n    // Or when using helper functions\n    image: (src) => getImageFromField(src, 'field_featured_image.field_media_image')\n  },\n  includes: [\n    // The base includes are used to include common fields\n    // See the tidePageBaseIncludes function for details \n    ...tidePageBaseIncludes({ withTopicTags: true }),\n    \n    'field_featured_image',\n    'field_featured_image.field_media_image'\n  ]\n}\n\nexport default tideMyConentTypeModule\n","language":"ts","meta":"","className":"language-ts shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" type"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" { IRplTideModuleMapping } "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '@dpc-sdp/ripple-tide-api/types'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" { tidePageBaseMapping, tidePageBaseIncludes } "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '@dpc-sdp/nuxt-ripple/mapping'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" { getField, getImageFromField } "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '@dpc-sdp/ripple-tide-api'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":" tideMyConentTypeModule"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" IRplTideModuleMapping"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" ="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  mapping: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"    // The base mapping is used to add common fields\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"    // See the tidePageBaseMapping function for details \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"    ..."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"tidePageBaseMapping"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"({ withTopicTags: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" }),\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    content: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"'field_my_content_type_content'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"    // Can be nested as needed\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    header: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"      intro: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"'field_landing_page_intro_text'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"    // Use a function to transform the data\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"    files"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":": ("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" getField"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"(src, "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"'field_node_files'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"map"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"file"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" ({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"      name: file.name,\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"      url: file.field_media_file.url\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":22},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    })),\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":23},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":24},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"    // Or when using helper functions\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":25},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"    image"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":": ("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" getImageFromField"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"(src, "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"'field_featured_image.field_media_image'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":")\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":26},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":27},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  includes: [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":28},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"    // The base includes are used to include common fields\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":29},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"    // See the tidePageBaseIncludes function for details \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":30},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"    ..."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"tidePageBaseIncludes"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"({ withTopicTags: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" }),\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":31},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":32},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"    'field_featured_image'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":33},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"    'field_featured_image.field_media_image'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":34},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":35},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":36},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":37},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" default"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" tideMyConentTypeModule\n"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-server-plugin"},"children":[{"type":"text","value":"The server plugin"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The server plugin is responsible for registering the new content type with "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"@dpc-sdp/ripple-tide-api"}]},{"type":"text","value":", this file needs to live within the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"server/plugins"}]},{"type":"text","value":" directory of the content type."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The content type can then be registered by calling the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"setContentType"}]},{"type":"text","value":" method on the Tide page API. This method takes two arguments, the first is the name of the content type, and the second is the mapping object. If you have used the CLI to create the content type this will already be done for you."}]},{"type":"element","tag":"pre","props":{"code":"import type { NitroApp } from 'nitropack'\nimport { defineNitroPlugin } from 'nitropack/dist/runtime/plugin'\nimport tideMyContentTypeModule from '../../mapping'\n\nexport default defineNitroPlugin(async (nitroApp: NitroApp) => {\n  nitroApp.tide?.pageApi.setContentType('my-content-type', tideMyContentTypeModule)\n})\n","language":"ts","meta":"","className":"language-ts shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" type"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" { NitroApp } "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" 'nitropack'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" { defineNitroPlugin } "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" 'nitropack/dist/runtime/plugin'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" tideMyContentTypeModule "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '../../mapping'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" default"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" defineNitroPlugin"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"nitroApp"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" NitroApp"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  nitroApp.tide?.pageApi."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"setContentType"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"'my-content-type'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":", tideMyContentTypeModule)\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"})\n"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-vue-component"},"children":[{"type":"text","value":"The Vue component"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A Vue component is needed to render the content type. This component will receive a "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"page"}]},{"type":"text","value":" prop, it's this prop that contains the mapped data from the Tide API response."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Important note"}]},{"type":"text","value":": The component needs to be registered globally, this can be done by adding the component to a "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"/components/global"}]},{"type":"text","value":" folder within the content type. Because this is global the name needs to be unique, it must also be prefixed with "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"Tide"}]},{"type":"text","value":" i.e. "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"TideMyContentType"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This component should use the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"TideBaseLayout"}]},{"type":"text","value":" component to render the shell of the site, from there slots are used to render the content types content in the right locations. If you're using the CLI it will take care of scaffolding a global component that uses "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"TideBaseLayout"}]},{"type":"text","value":" for you."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Below is an example component using "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"TideBaseLayout"}]},{"type":"text","value":"."}]},{"type":"element","tag":"pre","props":{"code":"<template>\n  <TideBaseLayout\n    :site=\"site\"\n    :page=\"page\"\n    :siteSection=\"page.siteSection\"\n    :pageTitle=\"page.title\"\n    :pageLanguage=\"page.lang\"\n    :updatedDate=\"page.changed || page.created\"\n    :showContentRating=\"page.showContentRating\"\n  >\n    <template #aboveHeader>\n      <slot name=\"aboveHeader\"></slot>\n    </template>\n    <template #primaryNav>\n      <slot name=\"primaryNav\"></slot>\n    </template>\n    <template #breadcrumbs>\n      <slot name=\"breadcrumbs\"></slot>\n    </template>\n    <template #aboveBody>\n      <slot name=\"aboveBody\"></slot>\n    </template>\n    <template #body>\n      <!-- Add content within the relevant slot -->\n      <TideMyContentTypeContent :content=\"page.content\" />\n    </template>\n    <template #sidebar>\n      <slot name=\"sidebar\"></slot>\n    </template>\n    <template #footer>\n      <slot name=\"footer\"></slot>\n    </template>\n  </TideBaseLayout>\n</template>\n\n<script setup lang=\"ts\">\nimport { TideSiteData } from '@dpc-sdp/ripple-tide-api/types'\nimport type { TideMediaPage } from '../../types'\n\ninterface Props {\n  site: TideSiteData\n  page: TideMediaPage\n}\n\ndefineProps<Props>()\n</script>\n","language":"vue","meta":"","className":"language-vue shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"TideBaseLayout\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"site"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"site"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"page"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"page"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"siteSection"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"page.siteSection"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"pageTitle"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"page.title"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"pageLanguage"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"page.lang"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"updatedDate"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"page.changed "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" page.created"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"showContentRating"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"page.showContentRating"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  >\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"aboveHeader"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" name"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"aboveHeader\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"primaryNav"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" name"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"primaryNav\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"breadcrumbs"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" name"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"breadcrumbs\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"aboveBody"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" name"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"aboveBody\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":22},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":23},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":24},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"      <!-- Add content within the relevant slot -->\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":25},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"TideMyContentTypeContent"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" :"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"content"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"page.content"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" />\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":26},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":27},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"sidebar"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":28},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" name"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"sidebar\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":29},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":30},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"footer"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":31},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" name"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"footer\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":32},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":33},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"TideBaseLayout"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":34},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":35},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":36},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" setup"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" lang"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":37},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" { TideSiteData } "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '@dpc-sdp/ripple-tide-api/types'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":38},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" type"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" { TideMediaPage } "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '../../types'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":39},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":40},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" Props"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":41},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  site"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" TideSiteData\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":42},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  page"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" TideMediaPage\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":43},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":44},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":45},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"defineProps"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">()\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":46},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"using-the-content-type"},"children":[{"type":"text","value":"Using the content type"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content types are actually "},{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/getting-started/layers","rel":["nofollow"]},"children":[{"type":"text","value":"Nuxt layers"}]},{"type":"text","value":" so these are added in the same way as any other layer through the extends property of the main applications "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"nuxt.config.ts"}]},{"type":"text","value":" file."}]},{"type":"element","tag":"pre","props":{"code":"export default defineNuxtConfig({\n  extends: [\n    '@dpc-sdp/ripple-tide-news', // An npm installed package\n    'github:dpc-sdp/ripple-tide-news#1.0.0', // A tagged git repository\n    './layers/tide-my-content-type', // A local layer\n  ]\n})\n","language":"js","meta":"","className":"language-js shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" default"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  extends: [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"    '@dpc-sdp/ripple-tide-news'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"// An npm installed package\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"    'github:dpc-sdp/ripple-tide-news#1.0.0'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"// A tagged git repository\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"    './layers/tide-my-content-type'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"// A local layer\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"})\n"}]}]}]}]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"anatomy","depth":2,"text":"Anatomy"},{"id":"creating-a-content-type","depth":2,"text":"Creating a content type"},{"id":"the-mapping-object","depth":2,"text":"The mapping object"},{"id":"the-server-plugin","depth":2,"text":"The server plugin"},{"id":"the-vue-component","depth":2,"text":"The Vue component"},{"id":"using-the-content-type","depth":2,"text":"Using the content type"}]}},"_type":"markdown","_id":"content:framework:3.guides:4.creating-content-types.md","_source":"content","_file":"framework/3.guides/4.creating-content-types.md","_extension":"md"},{"_path":"/framework/guides/creating-new-layers","_dir":"guides","_draft":false,"_partial":false,"_locale":"","title":"Creating new layers","description":"Implementing custom functionality through layers","layout":"page","links":[{"text":"Nuxt layers documentation","url":"https://nuxt.com/docs/getting-started/layers"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt layers are used to encapsulate Ripple functionality, so it can easily be shared and reused across projects, see "},{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/nuxt-layers"},"children":[{"type":"text","value":"key concepts - layers"}]},{"type":"text","value":" for a conceptual overview of what layers are and how they are used within Ripple."}]},{"type":"element","tag":"h2","props":{"id":"creating-a-new-layer"},"children":[{"type":"text","value":"Creating a new layer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Nuxt Ripple CLI provides a simple way to initialise new layers, to create a new layer just run the following command:"}]},{"type":"element","tag":"pre","props":{"code":"npx @dpc-sdp/nuxt-ripple-cli init layer [DIRECTORY] --name {NAME}\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npx @dpc-sdp/nuxt-ripple-cli init layer [DIRECTORY] --name {NAME}\n"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Where "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"[DIRECTORY]"}]},{"type":"text","value":" is the location to output the layer scaffolding and "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"{NAME}"}]},{"type":"text","value":" is the name of the new layer. This command will scaffold everything you need to get started developing a new layer."}]},{"type":"element","tag":"h2","props":{"id":"developing-the-layer"},"children":[{"type":"text","value":"Developing the layer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Once the layer has been created you can start working with it by running the command below from the new layers directory. This will start a development server and allow you to start working on the layer."}]},{"type":"element","tag":"pre","props":{"code":"npm run dev\n","language":"bash","meta":"","className":"language-bash shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"npm"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" run dev\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"playground"}]},{"type":"text","value":" folder contains the essentials to get a test Nuxt application up and running, it includes a "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"app.config.js"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"nuxt.config.js"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":".env"}]},{"type":"text","value":" file. The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"nuxt.config.js"}]},{"type":"text","value":" includes a core set of layers used by Ripple to get a reference sdp site up and running, it also includes the new layer itself."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"playground"}]},{"type":"text","value":" folder is a fully functional Nuxt application and can be used to test the new layer in isolation."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The layers structure is almost identical to a normal Nuxt app, meaning you can utilise the same features and conventions as a standard Nuxt application. i.e. create a "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"pages"}]},{"type":"text","value":" folder for new pages, create a "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"components"}]},{"type":"text","value":" folder for new components, etc."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Other useful commands:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"npm run build"}]},{"type":"text","value":" to do a production build of the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":".preview"}]},{"type":"text","value":" application (for testing purposes)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"npm run lint"}]},{"type":"text","value":" to lint the layer code with "},{"type":"element","tag":"a","props":{"href":"https://eslint.org/","rel":["nofollow"]},"children":[{"type":"text","value":"eslint"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"npm run test"}]},{"type":"text","value":" to run any unit tests with "},{"type":"element","tag":"a","props":{"href":"https://jestjs.io/","rel":["nofollow"]},"children":[{"type":"text","value":"jest"}]}]}]},{"type":"element","tag":"h2","props":{"id":"publishing-the-layer"},"children":[{"type":"text","value":"Publishing the layer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Once the layer is ready to be published it can be published to npm or pushed to a remote git repository, "},{"type":"element","tag":"a","props":{"href":"https://github.com/","rel":["nofollow"]},"children":[{"type":"text","value":"GitHub"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://about.gitlab.com/","rel":["nofollow"]},"children":[{"type":"text","value":"GitLab"}]},{"type":"text","value":", and "},{"type":"element","tag":"a","props":{"href":"https://bitbucket.org/","rel":["nofollow"]},"children":[{"type":"text","value":"Bitbucket"}]},{"type":"text","value":" are supported.\nFor more on publishing to npm see "},{"type":"element","tag":"a","props":{"href":"https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry","rel":["nofollow"]},"children":[{"type":"text","value":"contributing packages to the npm registry"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"using-the-layer"},"children":[{"type":"text","value":"Using the layer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt layers can be added to any Nuxt site by including the layer in the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"nuxt.config.js"}]},{"type":"text","value":" file under extends. If the layer is published to npm don't forget to "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"npm install"}]},{"type":"text","value":" it first."}]},{"type":"element","tag":"pre","props":{"code":"export default defineNuxtConfig({\n  extends: [\n    '@dpc-sdp/nuxt-ripple', // An npm installed package\n    'github:dpc-sdp/ripple-vic-gov-au-custom#1.0.0' // A tagged git repository\n  ]\n})\n","language":"js","meta":"","className":"language-js shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" default"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  extends: [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"    '@dpc-sdp/nuxt-ripple'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"// An npm installed package\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"    'github:dpc-sdp/ripple-vic-gov-au-custom#1.0.0'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":" // A tagged git repository\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"})\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Also, make sure to check the layers documentation for any additional configuration that may be required."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To extend from a private repository, you need to add a "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"GIGET_AUTH=<token>"}]},{"type":"text","value":" environment variable, with an auth token from your git provider."}]}]},{"type":"element","tag":"h3","props":{"id":"caveats-when-using-layers-from-a-git-repository"},"children":[{"type":"text","value":"Caveats when using layers from a git repository"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If a layer is added via a git repository and that layer has npm dependencies, you will need to manually install them within the Nuxt application utilising the layer. The Nuxt team are looking at auto-installing layer dependencies in the future, see "},{"type":"element","tag":"a","props":{"href":"https://github.com/nuxt/nuxt/issues/13367","rel":["nofollow"]},"children":[{"type":"text","value":"issue #13367"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You will also need to alias the dependencies in the Nuxt application, so they can be resolved to the correct package location. This can be done by adding an "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"alias"}]},{"type":"text","value":" object to the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"nuxt.config.js"}]},{"type":"text","value":" file."}]},{"type":"element","tag":"pre","props":{"code":"export default defineNuxtConfig({\n  alias: {\n    'date-fns': require.resolve('date-fns')\n  }\n})\n","language":"js","meta":"","className":"language-js shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" default"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  alias: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"    'date-fns'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":": require."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"'date-fns'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":")\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  }\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"})\n"}]}]}]}]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"creating-a-new-layer","depth":2,"text":"Creating a new layer"},{"id":"developing-the-layer","depth":2,"text":"Developing the layer"},{"id":"publishing-the-layer","depth":2,"text":"Publishing the layer"},{"id":"using-the-layer","depth":2,"text":"Using the layer","children":[{"id":"caveats-when-using-layers-from-a-git-repository","depth":3,"text":"Caveats when using layers from a git repository"}]}]}},"_type":"markdown","_id":"content:framework:3.guides:5.creating-new-layers.md","_source":"content","_file":"framework/3.guides/5.creating-new-layers.md","_extension":"md"},{"_path":"/framework/guides/dynamic-components","_dir":"guides","_draft":false,"_partial":false,"_locale":"","title":"Adding a new dynamic component","description":"Learn how to add a new dynamic page component to a content type","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/dynamic-components"},"children":[{"type":"text","value":"key concepts - dynamic components"}]},{"type":"text","value":" for a conceptual overview of what dynamic components are and how they are used within the SDP platform."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dynamic components comprise of the following elements:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A mapping function that will map the raw drupal api response to a Vue component and the props to pass to that Vue component"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A Vue component that will render the component"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A list of 'includes' to send to Drupal JSON API (See drupal docs for "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/docs/core-modules-and-themes/core-modules/jsonapi-module/includes","rel":["nofollow"]},"children":[{"type":"text","value":"Includes"}]},{"type":"text","value":")"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A list of content types that the dynamic component can be added to"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each dynamic component then needs to be registered against the name of the "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/project/paragraphs","rel":["nofollow"]},"children":[{"type":"text","value":"paragraph"}]},{"type":"text","value":" in Drupal."}]},{"type":"element","tag":"h2","props":{"id":"registering-the-dynamic-component"},"children":[{"type":"text","value":"Registering the dynamic component"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dynamic components need to registered inside a "},{"type":"element","tag":"a","props":{"href":"https://nitro.unjs.io/guide/plugins","rel":["nofollow"]},"children":[{"type":"text","value":"Nitro Plugins"}]},{"type":"text","value":". Nitro is the server engine used in Nuxt 3."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nitro Plugins can be added in the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"/server/plugins"}]},{"type":"text","value":" folder in your project."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"setDynamicComponent"}]},{"type":"text","value":" method to register your component."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"setDynamicComponent"}]},{"type":"text","value":" takes the following parameters:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"name of the component in Drupal (paragraph name)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"the mapping function, includes and list of content types"}]}]},{"type":"element","tag":"pre","props":{"className":"language-ts shiki shiki-themes github-light","code":"// /server/plugins/my-content-type.ts\n\nexport default defineNitroPlugin(async (nitroApp: NitroApp) => {\n  nitroApp.tide?.pageApi.setDynamicComponent('paragraph--my_dynamic_component', {\n    mapping: (field) => { ... },\n    includes: [ ... ],\n    contentTypes: [ ... ]\n  })\n})\n","language":"ts","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"// /server/plugins/my-content-type.ts\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" default"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" defineNitroPlugin"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"nitroApp"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" NitroApp"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  nitroApp.tide?.pageApi."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"setDynamicComponent"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"'paragraph--my_dynamic_component'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":", {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"    mapping"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":": ("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"field"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    includes: [ "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" ],\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    contentTypes: [ "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" ]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  })\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"})\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The individual elements of a dynamic component are covered below."}]},{"type":"element","tag":"h2","props":{"id":"the-mapping-function"},"children":[{"type":"text","value":"The mapping function"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The mapping function takes the raw response from the drupal JSON API and returns a standard structure that ultimately ties the dynamic component with a Vue component."}]},{"type":"element","tag":"pre","props":{"className":"language-ts shiki shiki-themes github-light","code":"import { TideDynamicPageComponent } from '@dpc-sdp/ripple-tide-api/types'\n\ninterface IMyDynamicComponentProps {\n  someProp1: boolean,\n  someProp2: string\n}\n\nconst mappingFunction = (field): TideDynamicPageComponent<IMyDynamicComponentProps> => {\n  return {\n    // This should be the name to the Vue component you created\n    component: 'MyDynamicComponent',\n\n    // Always include a unique id\n    id: field.drupal_internal__id.toString(),\n\n    // Some components have titles above them, which you can add here. This is optional\n    title: field.field_paragraph_title,\n\n    // These props will be passed to `MyDynamicComponent`\n    props: {\n      someProp1: false,\n      someProp2: field.field_paragraph_description\n    }\n  }\n}\n","language":"ts","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" { TideDynamicPageComponent } "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '@dpc-sdp/ripple-tide-api/types'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" IMyDynamicComponentProps"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  someProp1"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":" boolean"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  someProp2"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":" string\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" mappingFunction"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" ="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"field"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" TideDynamicPageComponent"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"IMyDynamicComponentProps"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"  return"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"    // This should be the name to the Vue component you created\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    component: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"'MyDynamicComponent'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"    // Always include a unique id\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    id: field.drupal_internal__id."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"(),\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"    // Some components have titles above them, which you can add here. This is optional\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    title: field.field_paragraph_title,\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"    // These props will be passed to `MyDynamicComponent`\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    props: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"      someProp1: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":22},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"      someProp2: field.field_paragraph_description\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":23},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    }\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":24},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  }\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":25},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"}\n"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-vue-component"},"children":[{"type":"text","value":"The Vue component"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Create a Vue component that will render your dynamic component."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This component will be rendered each time your component appears on a page and will receive any props that were specified from the mapping function."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Important note"}]},{"type":"text","value":": For this to work, your component needs to be registered globally. The simplest way to do this is to add the component to the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"/components/global"}]},{"type":"text","value":" folder in your layer."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Because they are global it's also important to choose non generic names so that they don't clash and overwrite other dynamic components"}]}]},{"type":"element","tag":"pre","props":{"className":"language-ts shiki shiki-themes github-light","code":"// /components/global/MyDynamicComponent.vue\n\n<script setup lang=\"ts\">\ndefineProps<{\n  someProp1: boolean,\n  someProp2: string\n}>()\n</script>\n\n<template>\n  <div>\n    {{someProp2}}\n  </div>\n</template>\n","language":"ts","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"// /components/global/MyDynamicComponent.vue\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"script setup lang"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"defineProps"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"<{\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  someProp1"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":" boolean"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  someProp2"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":" string\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"}>()\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    {{someProp2}}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":">\n"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-list-of-includes"},"children":[{"type":"text","value":"The list of includes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each dynamic component should specify an array of 'includes' that it needs in order to function properly."}]},{"type":"element","tag":"pre","props":{"className":"language-ts shiki shiki-themes github-light","code":"const includes = [\n  'field_landing_page_component.field_paragraph_accordion'\n]\n","language":"ts","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":" includes"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" ="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"  'field_landing_page_component.field_paragraph_accordion'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"]\n"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-list-of-content-types"},"children":[{"type":"text","value":"The list of content types"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each dynamic component should specify an array of 'content types' that the dynamic component can appear on."}]},{"type":"element","tag":"pre","props":{"className":"language-ts shiki shiki-themes github-light","code":"const contentTypes = [\n  'landing_page',\n  'some_content_type'\n]\n","language":"ts","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":" contentTypes"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" ="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"  'landing_page'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"  'some_content_type'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"]\n"}]}]}]}]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"registering-the-dynamic-component","depth":2,"text":"Registering the dynamic component"},{"id":"the-mapping-function","depth":2,"text":"The mapping function"},{"id":"the-vue-component","depth":2,"text":"The Vue component"},{"id":"the-list-of-includes","depth":2,"text":"The list of includes"},{"id":"the-list-of-content-types","depth":2,"text":"The list of content types"}]}},"_type":"markdown","_id":"content:framework:3.guides:5.dynamic-components.md","_source":"content","_file":"framework/3.guides/5.dynamic-components.md","_extension":"md"},{"_path":"/framework/core-modules","_dir":"framework","_draft":false,"_partial":false,"_locale":"","title":"Core modules","description":"A listing of all current core Ripple layers and packages","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"View each package on NPM for their individual READMEs."}]},{"type":"element","tag":"h2","props":{"id":"core-ui-libraries"},"children":[{"type":"text","value":"Core UI Libraries"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-ui-core","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-ui-core"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-ui-forms","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-ui-forms"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"tide-api"},"children":[{"type":"text","value":"Tide API"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-api","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-tide-api"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"nuxt-ripple-base-layer"},"children":[{"type":"text","value":"Nuxt-ripple base layer"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"nuxt-ripple"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"core-content-types"},"children":[{"type":"text","value":"Core content types"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-landing-page","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-tide-landing-page"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-event","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-tide-event"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-grant","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-tide-grant"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-media","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-tide-media"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-news","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-tide-news"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-publication","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-tide-publication"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"other-core-modules"},"children":[{"type":"text","value":"Other core modules"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-search","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-tide-search"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-analytics","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"nuxt-ripple-analytics"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-preview","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"nuxt-ripple-preview"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"scaffolding-testing-and-supporting-packages"},"children":[{"type":"text","value":"Scaffolding, testing and supporting packages"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-cli","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"nuxt-ripple-cli"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-test-utils","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-test-utils"}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"core-ui-libraries","depth":2,"text":"Core UI Libraries"},{"id":"tide-api","depth":2,"text":"Tide API"},{"id":"nuxt-ripple-base-layer","depth":2,"text":"Nuxt-ripple base layer"},{"id":"core-content-types","depth":2,"text":"Core content types"},{"id":"other-core-modules","depth":2,"text":"Other core modules"},{"id":"scaffolding-testing-and-supporting-packages","depth":2,"text":"Scaffolding, testing and supporting packages"}]}},"_type":"markdown","_id":"content:framework:4.core-modules.md","_source":"content","_file":"framework/4.core-modules.md","_extension":"md"}],"navigation":[{"title":"Ripple Design System","_path":"/","icon":"carbon:home","layout":"home"},{"title":"Design System","_path":"/design-system","children":[{"title":"About","_path":"/design-system/about","children":[{"title":"What is Ripple?","_path":"/design-system/about/what-is-ripple","layout":"page"},{"title":"Who's it for?","_path":"/design-system/about/whos-it-for","layout":"page"},{"title":"Support","_path":"/design-system/about/getting-support","layout":"page"},{"title":"Contributing","_path":"/design-system/about/contributing","layout":"page"}]},{"title":"Design","_path":"/design-system/design","children":[{"title":"Getting started","_path":"/design-system/design/getting-started","layout":"page"},{"title":"Our design principles","_path":"/design-system/design/our-design-principles","layout":"page"},{"title":"Design tokens","_path":"/design-system/design/design-tokens","layout":"page"},{"title":"Theming guidance for designers","_path":"/design-system/design/theming-guidance-for-designers","layout":"page"}]},{"title":"Develop","_path":"/design-system/develop","children":[{"title":"Getting started","_path":"/design-system/develop/getting-started","layout":"page"},{"title":"Contributing","_path":"/design-system/develop/contributing","layout":"page"},{"title":"Theme and brand application","_path":"/design-system/develop/theming","layout":"page"},{"title":"Usage","_path":"/design-system/develop/usage","children":[{"title":"Access to Github Packages","_path":"/design-system/develop/usage/access-to-github-packages","layout":"page"},{"title":"Vue","_path":"/design-system/develop/usage/vue","layout":"page"},{"title":"Nuxt","_path":"/design-system/develop/usage/nuxt","layout":"page"},{"title":"Web components","_path":"/design-system/develop/usage/webcomponents","layout":"page"},{"title":"Styles only","_path":"/design-system/develop/usage/css-only","layout":"page"}],"layout":"page"}]},{"title":"Styles","_path":"/design-system/styles","children":[{"title":"Colour","_path":"/design-system/styles/colour","layout":"page"},{"title":"Focus state","_path":"/design-system/styles/focus-state","layout":"page"},{"title":"Grid","_path":"/design-system/styles/grid","layout":"page"},{"title":"Icons","_path":"/design-system/styles/icons","layout":"page"},{"title":"Layer styles","_path":"/design-system/styles/layer-styles","layout":"page"},{"title":"Layout","_path":"/design-system/styles/layout","layout":"page"},{"title":"Logo","_path":"/design-system/styles/logo","layout":"page"},{"title":"Motion","_path":"/design-system/styles/motion","layout":"page"},{"title":"Spacing","_path":"/design-system/styles/spacing","layout":"page"},{"title":"Typography","_path":"/design-system/styles/typography","layout":"page"}]},{"title":"Components","_path":"/design-system/components","children":[{"title":"Accordion","_path":"/design-system/components/accordion","layout":"page"},{"title":"Acknowledgement","_path":"/design-system/components/acknowledgment","layout":"page"},{"title":"Alert","_path":"/design-system/components/alert","layout":"page"},{"title":"Block quote","_path":"/design-system/components/block-quote","layout":"page"},{"title":"Breadcrumb","_path":"/design-system/components/breadcrumb","layout":"page"},{"title":"Button","_path":"/design-system/components/button","layout":"page"},{"title":"Call to action","_path":"/design-system/components/call-to-action","layout":"page"},{"title":"Callout","_path":"/design-system/components/callout","layout":"page"},{"title":"Campaign banner","_path":"/design-system/components/campaign-banner","layout":"page"},{"title":"Card","_path":"/design-system/components/card","layout":"page"},{"title":"Carousel","_path":"/design-system/components/carousel","layout":"page"},{"title":"Category grid","_path":"/design-system/components/category-grid","layout":"page"},{"title":"Checkbox","_path":"/design-system/components/checkbox","layout":"page"},{"title":"Chip","_path":"/design-system/components/chip","layout":"page"},{"title":"Contact us","_path":"/design-system/components/contact-us","layout":"page"},{"title":"Date input","_path":"/design-system/components/date-input","layout":"page"},{"title":"Detail list","_path":"/design-system/components/detail-list","layout":"page"},{"title":"Dropdown","_path":"/design-system/components/dropdown","layout":"page"},{"title":"File","_path":"/design-system/components/file","layout":"page"},{"title":"Footer","_path":"/design-system/components/footer","layout":"page"},{"title":"Form","_path":"/design-system/components/form","layout":"page"},{"title":"Form alert","_path":"/design-system/components/form-alert","layout":"page"},{"title":"Header","_path":"/design-system/components/header","layout":"page"},{"title":"In-page navigation","_path":"/design-system/components/in-page-navigation","layout":"page"},{"title":"Input field","_path":"/design-system/components/input-field","layout":"page"},{"title":"Key dates","_path":"/design-system/components/key-dates","layout":"page"},{"title":"Media","_path":"/design-system/components/media","layout":"page"},{"title":"Media embed","_path":"/design-system/components/media-embed","layout":"page"},{"title":"Media fullscreen","_path":"/design-system/components/media-fullscreen","layout":"page"},{"title":"Media gallery","_path":"/design-system/components/media-gallery","layout":"page"},{"title":"Option button","_path":"/design-system/components/option-button","layout":"page"},{"title":"Page action","_path":"/design-system/components/page-action","layout":"page"},{"title":"Pagination","_path":"/design-system/components/pagination","layout":"page"},{"title":"Primary navigation","_path":"/design-system/components/primary-navigation","layout":"page"},{"title":"Profile","_path":"/design-system/components/profile","layout":"page"},{"title":"Radio button","_path":"/design-system/components/radio-button","layout":"page"},{"title":"Related links","_path":"/design-system/components/related-links","layout":"page"},{"title":"Results listing","_path":"/design-system/components/results-listing","layout":"page"},{"title":"Search bar","_path":"/design-system/components/search-bar","layout":"page"},{"title":"Skip link","_path":"/design-system/components/skip-link","layout":"page"},{"title":"Social share","_path":"/design-system/components/social-share","layout":"page"},{"title":"Statistics grid","_path":"/design-system/components/statistics-grid","layout":"page"},{"title":"Table","_path":"/design-system/components/table","layout":"page"},{"title":"Tabs","_path":"/design-system/components/tabs","layout":"page"},{"title":"Tag","_path":"/design-system/components/tag","layout":"page"},{"title":"Text area","_path":"/design-system/components/text-area","layout":"page"},{"title":"Timeline","_path":"/design-system/components/timeline","layout":"page"},{"title":"Vertical navigation","_path":"/design-system/components/vertical-navigation","layout":"page"}]}]},{"title":"Ripple Framework","_path":"/framework","children":[{"title":"Ripple Framework","_path":"/framework","layout":"page"},{"title":"Key Concepts","_path":"/framework/key-concepts","children":[{"title":"Nuxt","_path":"/framework/key-concepts/nuxt","layout":"page"},{"title":"Layers","_path":"/framework/key-concepts/nuxt-layers","layout":"page"},{"title":"API endpoints","_path":"/framework/key-concepts/api-endpoints","layout":"page"},{"title":"Content types","_path":"/framework/key-concepts/content-types","layout":"page"},{"title":"Dynamic components","_path":"/framework/key-concepts/dynamic-components","layout":"page"}]},{"title":"Guides","_path":"/framework/guides","children":[{"title":"Migrating from Ripple 1.x","_path":"/framework/guides/migrating","layout":"page"},{"title":"Setting up a new site","_path":"/framework/guides/new-sites","layout":"page"},{"title":"Applying theme and brand","_path":"/framework/guides/brand-application","layout":"page"},{"title":"Creating content types","_path":"/framework/guides/creating-content-types","layout":"page"},{"title":"Creating new layers","_path":"/framework/guides/creating-new-layers","layout":"page"},{"title":"Adding a new dynamic component","_path":"/framework/guides/dynamic-components","layout":"page"}]},{"title":"Core modules","_path":"/framework/core-modules","layout":"page"}],"layout":"page"}]}
\ No newline at end of file
+{"generatedAt":1714695645596,"generateTime":3438,"contents":[{"_path":"/","_dir":"","_draft":false,"_partial":false,"_locale":"","title":"Ripple Design System","description":"Ripple is the design system for Victorian government digital products","icon":"carbon:home","layout":"home","primaryCTA":{"title":"For Designers","description":"Information for designers using Ripple to create brand Victoria compliant digital experiences.","image":{"src":"/assets/img/for-designers.png"},"url":"/design-system/design/getting-started"},"secondaryCTA":{"title":"For Developers","description":"How to get started implementing Ripple UI components in digital products.","image":{"src":"/assets/img/for-developers.png"},"url":"/design-system/develop/getting-started"},"modulesCTA":{"title":"Modules","description":"Paragraph Default. Cards contain actionable content about a single topic. These are usually grouped as similar style sets.","url":"/framework"},"quickLink1":{"title":"About Ripple","description":"Ripple is a system of reusable styles, components, patterns and tools for creating Victorian government digital experiences.","url":"/design-system/about/what-is-ripple"},"quickLink2":{"title":"Who should use it","description":"Ripple is built by government for government to deliver services Victorians trust and rely on.","url":"/design-system/about/whos-it-for"},"quickLink3":{"title":"Design principles","description":"The guiding principles that are the foundation of the Ripple Design System.","url":"/design-system/design/our-design-principles"},"framework":{"title":"Ripple framework","description":"Ripple framework contains the tools for building SDP sites using Ripple design system components.","url":"/framework"},"body":{"type":"root","children":[],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:1.index.md","_source":"content","_file":"1.index.md","_extension":"md"},{"_path":"/design-system/_markdown-reference-file","_dir":"design-system","_draft":false,"_partial":true,"_locale":"","title":"Markdown Kitchen Sink (DEV ONLY)","description":"This is an example page to demonstrate and document the markdown features available in the docs site","draft":true,"layout":"page","links":[{"text":"Vic gov","url":"https://www.vic.gov.au/"},{"text":"Single Digital Presence","url":"https://www.vic.gov.au/single-digital-presence"}],"body":{"type":"root","children":[{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For a more detailed markdown editing guide, see here "},{"type":"element","tag":"a","props":{"href":"https://www.markdownguide.org/basic-syntax/","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.markdownguide.org/basic-syntax/"}]}]}]},{"type":"element","tag":"h2","props":{"id":"front-matter"},"children":[{"type":"text","value":"Front matter"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Front matter sits at the very top of a markdown file and contains metadata about a page. In our case, it contains things like the page title and description."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is the frontmatter for the page you are currently reading."}]},{"type":"element","tag":"pre","props":{"code":"---\ntitle: Kitchen sink\ndescription: Here's everything\nlayout: page\nlinks:\n  - text: Vic gov\n    url: https://www.vic.gov.au/\n  - text: Single Digital Presence\n    url: https://www.vic.gov.au/single-digital-presence\n---\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"Kitchen sink\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"description"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"Here's everything\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"layout"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"page\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"links"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":":\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  - "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"Vic gov\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"    url"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"https://www.vic.gov.au/\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  - "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"text"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"Single Digital Presence\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"    url"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"https://www.vic.gov.au/single-digital-presence\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"---\n"}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"headings"},"children":[{"type":"text","value":"Headings"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Headings are added using hash marks before text. The number of hash marks specifies the heading level (e.g. '##' = H2). Please don't use H1s in markdown, these are reserved for the page title, which is set in the front matter."}]},{"type":"element","tag":"h3","props":{"id":"example"},"children":[{"type":"text","value":"Example"}]},{"type":"element","tag":"pre","props":{"code":"## Heading level 2\n\n### Heading level 3\n\n#### Heading level 4\n\n##### Heading level 5\n\n###### Heading level 6\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"## Heading level 2\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"### Heading level 3\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"#### Heading level 4\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"##### Heading level 5\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"###### Heading level 6\n"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"heading-level-2"},"children":[{"type":"text","value":"Heading level 2"}]},{"type":"element","tag":"h3","props":{"id":"heading-level-3"},"children":[{"type":"text","value":"Heading level 3"}]},{"type":"element","tag":"h4","props":{"id":"heading-level-4"},"children":[{"type":"text","value":"Heading level 4"}]},{"type":"element","tag":"h5","props":{"id":"heading-level-5"},"children":[{"type":"text","value":"Heading level 5"}]},{"type":"element","tag":"h6","props":{"id":"heading-level-6"},"children":[{"type":"text","value":"Heading level 6"}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"paragraph-text"},"children":[{"type":"text","value":"Paragraph text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Paragraphs are simply text seperated by an empty line."}]},{"type":"element","tag":"pre","props":{"code":"This is a paragraph\n\nThis is another paragraph\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"This is a paragraph\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"This is another paragraph\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is a paragraph"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is another paragraph"}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"emphasis"},"children":[{"type":"text","value":"Emphasis"}]},{"type":"element","tag":"h3","props":{"id":"italics"},"children":[{"type":"text","value":"Italics"}]},{"type":"element","tag":"pre","props":{"code":"Here is *italic text*\n\nHere is also _italic text_\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"Here is "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E;--shiki-default-font-style:italic"},"children":[{"type":"text","value":"*italic text*\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"Here is also "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E;--shiki-default-font-style:italic"},"children":[{"type":"text","value":"_italic text_\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"italic text"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is also "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"italic text"}]}]},{"type":"element","tag":"h3","props":{"id":"bold"},"children":[{"type":"text","value":"Bold"}]},{"type":"element","tag":"pre","props":{"code":"Here is **bold text**\n\nHere is also __bold text__\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"Here is "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"**bold text**\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"Here is also "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"__bold text__\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"bold text"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is also "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"bold text"}]}]},{"type":"element","tag":"h3","props":{"id":"strikethrough"},"children":[{"type":"text","value":"Strikethrough"}]},{"type":"element","tag":"pre","props":{"code":"Here is ~~strikethrough text~~\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"Here is "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"~~strikethrough text~~\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is "},{"type":"element","tag":"del","props":{},"children":[{"type":"text","value":"strikethrough text"}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"horizontal-rules"},"children":[{"type":"text","value":"Horizontal Rules"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can add a horizontal rule by using at least three of either "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"_"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" or "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"*"}]},{"type":"text","value":"."}]},{"type":"element","tag":"pre","props":{"code":"These are all equivalent:\n---\n___\n***\n\nSo are these:\n------\n______\n******\n\nBut these won't work:\n--\n__\n**\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"These are all equivalent:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"___\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"***\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"So are these:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"------\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"______\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"******\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"But these won't work:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"--\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"__\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"**\n"}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"blockquotes"},"children":[{"type":"text","value":"Blockquotes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Blockquotes are added with a "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":">"}]},{"type":"text","value":" before the text."}]},{"type":"element","tag":"pre","props":{"code":"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n"}]}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"lists"},"children":[{"type":"text","value":"Lists"}]},{"type":"element","tag":"h3","props":{"id":"unordered"},"children":[{"type":"text","value":"Unordered"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Unordered lists are created by starting a line with "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":", or "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"*"}]},{"type":"text","value":". Nested lists can be achieved through indentation, with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"2 spaces"}]},{"type":"text","value":" for each additional level."}]},{"type":"element","tag":"pre","props":{"code":"* Fruit\n  * Berries\n    - Strawberry\n    - Blueberry\n  * Classics\n    - Apple\n    - Banana\n* Vegetables\n  + Broccoli\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Fruit\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  *"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Berries\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Strawberry\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Blueberry\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  *"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Classics\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Apple\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Banana\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Vegetables\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  +"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Broccoli\n"}]}]}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Fruit\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Berries\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Strawberry"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Blueberry"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Classics\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Apple"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Banana"}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Vegetables\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Broccoli"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"ordered"},"children":[{"type":"text","value":"Ordered"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ordered lists are created by starting a line with a number and period (e.g. "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"1."}]},{"type":"text","value":"). Nested lists can be achieved through indentation, with "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"4 spaces"}]},{"type":"text","value":" (different to the unordered list) for each additional level."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use any numbers, but it's more convenient to just use "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"1."}]},{"type":"text","value":" for each item, the numbering will work automatically."}]},{"type":"element","tag":"pre","props":{"code":"This works:\n\n1. Lorem ipsum dolor sit amet\n    1. Lorem at massa\n    2. Adipiscing\n2. Consectetur adipiscing elit\n3. Integer molestie lorem at massa\n\nBut just do this, it's the same thing:\n\n1. Lorem ipsum dolor sit amet\n    1. Lorem at massa\n    1. Adipiscing\n1. Consectetur adipiscing elit\n1. Integer molestie lorem at massa\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"This works:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Lorem ipsum dolor sit amet\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    1."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Lorem at massa\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    2."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Adipiscing\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"2."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Consectetur adipiscing elit\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"3."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Integer molestie lorem at massa\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"But just do this, it's the same thing:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Lorem ipsum dolor sit amet\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    1."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Lorem at massa\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    1."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Adipiscing\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Consectetur adipiscing elit\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Integer molestie lorem at massa\n"}]}]}]}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Lorem ipsum dolor sit amet\n"},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Lorem at massa"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Adipiscing"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Consectetur adipiscing elit"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Integer molestie lorem at massa"}]}]},{"type":"element","tag":"h4","props":{"id":"starting-point"},"children":[{"type":"text","value":"Starting point"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can start the list at any number like this:"}]},{"type":"element","tag":"pre","props":{"code":"64. foo\n1. bar\n1. blah\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"64."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" foo\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" bar\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"1."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" blah\n"}]}]}]}]},{"type":"element","tag":"ol","props":{"start":64},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"foo"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"bar"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"blah"}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"links"},"children":[{"type":"text","value":"Links"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hyperlinks can be added with the following syntax, the link text goes in the square brackets, followed by the url in round brackets."}]},{"type":"element","tag":"pre","props":{"code":"Visit the [Victorian government website](https://www.vic.gov.au/)\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"Visit the ["}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"Victorian government website"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"]("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"https://www.vic.gov.au/"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":")\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Visit the "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/","rel":["nofollow"]},"children":[{"type":"text","value":"Victorian government website"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alternatively, if you don't need different link text you can just write the url directly"}]},{"type":"element","tag":"pre","props":{"code":"Here is the link to vic gov https://www.vic.gov.au/.\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"Here is the link to vic gov https://www.vic.gov.au/.\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is the link to vic gov "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"code"},"children":[{"type":"text","value":"Code"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here's some "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"code inline"}]},{"type":"text","value":" in context."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here's some "},{"type":"element","tag":"code","props":{"className":"language-ts shiki shiki-themes github-light","language":"ts","style":""},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":" codeInline"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":" string"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" ="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" 'highlighted code inline'"}]}]},{"type":"text","value":" in context."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Indented code"}]},{"type":"element","tag":"pre","props":{"code":"// Some comments\nline 1 of code\nline 2 of code\nline 3 of code\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"// Some comments\nline 1 of code\nline 2 of code\nline 3 of code\n"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Block code \"fences\""}]},{"type":"element","tag":"pre","props":{"code":"Sample text here...\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"Sample text here...\n"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Syntax highlighting"}]},{"type":"element","tag":"pre","props":{"code":"var foo = function (bar) {\n  return bar++;\n};\n\nconsole.log(foo(5));\n","language":"js","meta":"","className":"language-js shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"var"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" foo"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" ="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" function"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"bar"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":") {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"  return"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" bar"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"++"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":";\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"};\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"console."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"foo"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"));\n"}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"tables"},"children":[{"type":"text","value":"Tables"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tables can be added using a special format. More info here:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/organizing-information-with-tables","rel":["nofollow"]},"children":[{"type":"text","value":"Github markdown tables guide"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"An example of a simple table"}]},{"type":"element","tag":"pre","props":{"code":"| Name   | Description                  |\n| ------ | ---------------------------- |\n| Banana | Yellow, elongated, edible.   |\n| Apple  | 84% water, 15% carbohydrates |\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"| Name   | Description                  |\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"| ------ | ---------------------------- |\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"| Banana | Yellow, elongated, edible.   |\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"| Apple  | 84% water, 15% carbohydrates |\n"}]}]}]}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Name"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Description"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Banana"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Yellow, elongated, edible."}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Apple"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"84% water, 15% carbohydrates"}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"images"},"children":[{"type":"text","value":"Images"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Images can be added like this:"}]},{"type":"element","tag":"pre","props":{"code":"![Nils Olav  - This is the alt text](/assets/img/temp/Nils_Olav_wide.jpg)\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"!["}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"Nils Olav  - This is the alt text"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"]("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E;--shiki-default-text-decoration:underline"},"children":[{"type":"text","value":"/assets/img/temp/Nils_Olav_wide.jpg"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":")\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Nils Olav  - This is the alt text","src":"/assets/img/temp/Nils_Olav_wide.jpg"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By Lee Carson on Flickr - Nils Olav on Flickr, CC BY-SA 2.0, "},{"type":"element","tag":"a","props":{"href":"https://commons.wikimedia.org/w/index.php?curid=5080064","rel":["nofollow"]},"children":[{"type":"text","value":"https://commons.wikimedia.org/w/index.php?curid=5080064"}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"custom-components"},"children":[{"type":"text","value":"Custom components"}]},{"type":"element","tag":"h3","props":{"id":"docsexample"},"children":[{"type":"text","value":"DocsExample"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"DocsExample"}]},{"type":"text","value":" will display an component example from storybook, you will need to give it the id of the story you want to display."}]},{"type":"element","tag":"pre","props":{"code":"::DocsExample\n---\nid: core-navigation-button--default-filled\n---\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"id: core-navigation-button--default-filled\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are additional options you can use for this component:"}]},{"type":"element","tag":"pre","props":{"code":"::DocsExample\n---\nid: core-navigation-button--default-filled\nwithPadding: false\nhideNewTab: false\nhideCode: true\n---\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"id: core-navigation-button--default-filled\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"withPadding: false\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"hideNewTab: false\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"hideCode: true\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled",":hideCode":"true",":hideNewTab":"false",":withPadding":"true"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can add toggle values in storybook and copy the the value of the args parameter in the URL to the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"argsString"}]},{"type":"text","value":" option in the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"DocsExample"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Storybook controls","src":"/assets/img/temp/storybook-toggles.png"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Browser url bar","src":"/assets/img/temp/url-args.png"},"children":[]}]},{"type":"element","tag":"pre","props":{"code":"::DocsExample\n---\nid: core-navigation-pagination--complex\nargsString: 'totalPages:50;currentPage:30;showTally:true'\n---\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"id: core-navigation-pagination--complex\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"argsString: 'totalPages:50;currentPage:30;showTally:true'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-pagination--complex","argsString":"totalPages:50;currentPage:30;showTally:true"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can also the theme and whether or not neutral buttons should be used."}]},{"type":"element","tag":"pre","props":{"code":"::DocsExample\n---\nid: core-navigation-button--default-filled\ntheme: 'light'\n---\n::\n\n::DocsExample\n---\nid: core-navigation-card--call-to-action\nuseNeutralButtons: true\n---\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"id: core-navigation-button--default-filled\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"theme: 'light'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"id: core-navigation-card--call-to-action\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"useNeutralButtons: true\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled","theme":"docsTheme3"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--call-to-action",":useNeutralButtons":"true"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docsthemechooser"},"children":[{"type":"text","value":"DocsThemeChooser"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can wrap "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"DocsExample"}]},{"type":"text","value":" components with a "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"DocsThemeChooser"}]},{"type":"text","value":" component. This will allow the user to choose which theme the examples inside the theme chooser will display with."}]},{"type":"element","tag":"pre","props":{"code":"::DocsThemeChooser\n  ::DocsExample\n  ---\n  id: core-navigation-button--default-filled\n  ---\n  ::\n  ::DocsExample\n  ---\n  id: core-navigation-button--default-outlined\n  ---\n  ::\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsThemeChooser\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ::DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  id: core-navigation-button--default-filled\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ::DocsExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  id: core-navigation-button--default-outlined\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-outlined"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"docsimageexample"},"children":[{"type":"text","value":"DocsImageExample"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"DocsImageExample"}]},{"type":"text","value":" will display an image in a way this is visually similar to the component examples, you will need to give it the url (src) of the image, the alt text (alt) and an optional caption."}]},{"type":"element","tag":"pre","props":{"code":"::DocsImageExample\n---\nsrc: /assets/img/InlineLink-Focus.png\nalt: An example of focus state colour contrast\n---\nHere's the **rich** text `caption`\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsImageExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"src: /assets/img/InlineLink-Focus.png\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"alt: An example of focus state colour contrast\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"Here's the "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"**rich**"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" text "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":"`caption`\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"An example of focus state colour contrast","src":"/assets/img/InlineLink-Focus.png"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here's the "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"rich"}]},{"type":"text","value":" text "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"caption"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Example without caption:"}]},{"type":"element","tag":"pre","props":{"code":"::DocsImageExample\n---\nsrc: /assets/img/InlineLink-Focus.png\nalt: An example of focus state colour contrast\n---\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsImageExample\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"src: /assets/img/InlineLink-Focus.png\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"alt: An example of focus state colour contrast\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"An example of focus state colour contrast","src":"/assets/img/InlineLink-Focus.png"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docscard-docscardgrid"},"children":[{"type":"text","value":"DocsCard && DocsCardGrid"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Cards can also be added. Ensure that you wrap them with DocsCardGrid so that they are layout out correctly. DocsCard use the 'promo' type card under the hood."}]},{"type":"element","tag":"pre","props":{"code":"::DocsCardGrid\n  ::DocsCard\n  ---\n  title: Button\n  url: /design-system/components/button\n  ---\n  Here's the summary text\n  ::\n\n  ::DocsCard\n  ---\n  title: Vic gov\n  url: https://www.vic.gov.au/\n  ---\n  Here's the summary text\n  ::\n\n  ::DocsCard\n  ---\n  title: Code standards\n  url: /framework/code-standards\n  ---\n  Here's the summary text\n  ::\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsCardGrid\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ::DocsCard\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  title: Button\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  url: /design-system/components/button\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  Here's the summary text\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ::DocsCard\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  title: Vic gov\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  url: https://www.vic.gov.au/\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  Here's the summary text\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ::DocsCard\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  title: Code standards\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  url: /framework/code-standards\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":22},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":23},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  Here's the summary text\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":24},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ::\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":25},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-card-grid","props":{},"children":[{"type":"element","tag":"docs-card","props":{"title":"Button","url":"/design-system/components/button"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here's the summary text"}]}]},{"type":"element","tag":"docs-card","props":{"title":"Vic gov","url":"https://www.vic.gov.au/"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here's the summary text"}]}]},{"type":"element","tag":"docs-card","props":{"title":"Code standards","url":"/framework/code-standards"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here's the summary text"}]}]}]},{"type":"element","tag":"h3","props":{"id":"docscolourtable"},"children":[{"type":"text","value":"DocsColourTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"DocsColourTable"}]},{"type":"text","value":" will display a table of themed colours, you just need to specify which colours to show.\nThis can be either direct colours like "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"clr.type.primary.contrast"}]},{"type":"text","value":", colour groups like "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"clr.type.primary"}]},{"type":"text","value":" or a mix of both."}]},{"type":"element","tag":"pre","props":{"code":"\n::DocsColourTable\n---\ncolours:\n  - clr.primary\n  - clr.link\n---\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsColourTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"colours:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" clr.primary\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" clr.link\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.primary\",\"clr.link\"]"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docsgradienttable"},"children":[{"type":"text","value":"DocsGradientTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"DocsGradientTable"}]},{"type":"text","value":" will display the themed horizontal and vertical gradients."}]},{"type":"element","tag":"pre","props":{"code":"::DocsGradientTable\n:::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsGradientTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":":::\n"}]}]}]}]},{"type":"element","tag":"docs-gradient-table","props":{},"children":[]},{"type":"element","tag":"h3","props":{"id":"docsicontable"},"children":[{"type":"text","value":"DocsIconTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"DocsIconsTable"}]},{"type":"text","value":" will display a table of icons, you just need to specify which icon group to show, this will be either "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"alert"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"social"}]},{"type":"text","value":" or "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"standard"}]},{"type":"text","value":"."}]},{"type":"element","tag":"pre","props":{"code":"::DocsIconTable\n---\ngroup: alert\n---\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsIconTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"group: alert\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-icon-table","props":{"group":"alert"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docsiconsizingtable"},"children":[{"type":"text","value":"DocsIconSizingTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"DocsIconSizingTable"}]},{"type":"text","value":" will display a table of icons with a preview of the icon at the specified size."}]},{"type":"element","tag":"pre","props":{"code":"::DocsIconSizingTable\n---\nsizes:\n- s : 16px\n- m : 24px\n- l : 32px\n---\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsIconSizingTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"sizes:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" s : 16px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" m : 24px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" l : 32px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-icon-sizing-table","props":{":sizes":"[{\"s\":\"16px\"},{\"m\":\"24px\"},{\"l\":\"32px\"}]"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docslayerstyletable"},"children":[{"type":"text","value":"DocsLayerStyleTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"DocsLayerStyleTable"}]},{"type":"text","value":" will display a table of layer styles with a preview of that style in action, you just need to specify the type of style to show, this will be either "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"border"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"border.radius"}]},{"type":"text","value":" or "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"elevation"}]},{"type":"text","value":"."}]},{"type":"element","tag":"pre","props":{"code":"::DocsLayerStyleTable\n---\ntype: border.radius\n---\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsLayerStyleTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"type: border.radius\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-layer-style-table","props":{"type":"border.radius"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docstypetable"},"children":[{"type":"text","value":"DocsTypeTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"DocsTypeTable"}]},{"type":"text","value":" will display a table of type styles, you just need to specify the type of type style to show. This will be either "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"weight"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"size"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"lh"}]},{"type":"text","value":" or "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ls"}]},{"type":"text","value":"."}]},{"type":"element","tag":"pre","props":{"code":"::DocsTypeTable\n---\ntype: size\n---\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsTypeTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"type: size\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-type-table","props":{"type":"size"},"children":[]},{"type":"element","tag":"h3","props":{"id":"docstypeclasstable"},"children":[{"type":"text","value":"DocsTypeClassTable"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"DocsTypeClassTable"}]},{"type":"text","value":" will display a table of type styles, with a preview of that style in action."}]},{"type":"element","tag":"pre","props":{"code":"::DocsTypeClassTable\n---\ntype:\n- style :\n  - Heading 1\n  - values :\n    - Font size: 32px / 56px\n    - Line height: 36px / 60px\n    - Letter spacing: 1.4% / 0.8%\n    - Font weight: Bold (700)\n  - rpl-type-h1\n- style :\n  - Heading 1 Highlight\n  - values :\n    - Font size: 32px / 56px\n    - Line height: 36px / 60px\n    - Letter spacing: 1.4% / 0.8%\n    - Font weight: Bold (700)\n  - rpl-type-h1-highlight\n---\n::\n","language":"md","meta":"","className":"language-md shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::DocsTypeClassTable\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"type:\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" style :\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Heading 1\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" values :\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Font size: 32px / 56px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Line height: 36px / 60px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Letter spacing: 1.4% / 0.8%\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Font weight: Bold (700)\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" rpl-type-h1\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"-"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" style :\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Heading 1 Highlight\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" values :\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Font size: 32px / 56px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Line height: 36px / 60px\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Letter spacing: 1.4% / 0.8%\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"    -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" Font weight: Bold (700)\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  -"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" rpl-type-h1-highlight\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5;--shiki-default-font-weight:bold"},"children":[{"type":"text","value":"---\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"::\n"}]}]}]}]},{"type":"element","tag":"docs-type-class-table","props":{":type":"[{\"style\":[\"Heading 1\",{\"values\":[{\"Font size\":\"32px / 56px\"},{\"Line height\":\"36px / 60px\"},{\"Letter spacing\":\"1.4% / 0.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1\"]},{\"style\":[\"Heading 1 Highlight\",{\"values\":[{\"Font size\":\"32px / 56px\"},{\"Line height\":\"36px / 60px\"},{\"Letter spacing\":\"1.4% / 0.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1-highlight\"]}]"},"children":[]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"front-matter","depth":2,"text":"Front matter"},{"id":"headings","depth":2,"text":"Headings","children":[{"id":"example","depth":3,"text":"Example"}]},{"id":"heading-level-2","depth":2,"text":"Heading level 2","children":[{"id":"heading-level-3","depth":3,"text":"Heading level 3"}]},{"id":"paragraph-text","depth":2,"text":"Paragraph text"},{"id":"emphasis","depth":2,"text":"Emphasis","children":[{"id":"italics","depth":3,"text":"Italics"},{"id":"bold","depth":3,"text":"Bold"},{"id":"strikethrough","depth":3,"text":"Strikethrough"}]},{"id":"horizontal-rules","depth":2,"text":"Horizontal Rules"},{"id":"blockquotes","depth":2,"text":"Blockquotes"},{"id":"lists","depth":2,"text":"Lists","children":[{"id":"unordered","depth":3,"text":"Unordered"},{"id":"ordered","depth":3,"text":"Ordered"}]},{"id":"links","depth":2,"text":"Links"},{"id":"code","depth":2,"text":"Code"},{"id":"tables","depth":2,"text":"Tables"},{"id":"images","depth":2,"text":"Images"},{"id":"custom-components","depth":2,"text":"Custom components","children":[{"id":"docsexample","depth":3,"text":"DocsExample"},{"id":"docsthemechooser","depth":3,"text":"DocsThemeChooser"},{"id":"docsimageexample","depth":3,"text":"DocsImageExample"},{"id":"docscard-docscardgrid","depth":3,"text":"DocsCard && DocsCardGrid"},{"id":"docscolourtable","depth":3,"text":"DocsColourTable"},{"id":"docsgradienttable","depth":3,"text":"DocsGradientTable"},{"id":"docsicontable","depth":3,"text":"DocsIconTable"},{"id":"docsiconsizingtable","depth":3,"text":"DocsIconSizingTable"},{"id":"docslayerstyletable","depth":3,"text":"DocsLayerStyleTable"},{"id":"docstypetable","depth":3,"text":"DocsTypeTable"},{"id":"docstypeclasstable","depth":3,"text":"DocsTypeClassTable"}]}]}},"_type":"markdown","_id":"content:design-system:_markdown-reference-file.md","_source":"content","_file":"design-system/_markdown-reference-file.md","_extension":"md"},{"_path":"/design-system/about/_5.accessibility-statement","_dir":"about","_draft":false,"_partial":true,"_locale":"","title":"Accessibility statement","description":"Page description","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"content-goes-here"},"children":[{"type":"text","value":"Content goes here"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"content-goes-here","depth":2,"text":"Content goes here"}]}},"_type":"markdown","_id":"content:design-system:1.about:_5.accessibility-statement.md","_source":"content","_file":"design-system/1.about/_5.accessibility-statement.md","_extension":"md"},{"_path":"/design-system/about/what-is-ripple","_dir":"about","_draft":false,"_partial":false,"_locale":"","title":"What is Ripple?","description":"Ripple is the digital design system of the Victorian government","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is a system of reusable styles, components, patterns and tools for building brand Victoria digital products."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Developed by the Single Digital Presence (SDP) team in the Department of Government Services, Ripple:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"makes it easier for citizens to "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"find"}]},{"type":"text","value":", "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"understand"}]},{"type":"text","value":" and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"use"}]},{"type":"text","value":" government information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"makes creating Brand Victoria approved content, assets and sites easy"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"increases delivery speed for digital products and services."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Over 50 government websites use Ripple, including our main "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"vic.gov.au"}]},{"type":"text","value":" platform. These sites attract millions of views per month."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Screenshots of websites using SDP, vic.gov.au, police.vic.gov.au, health.vic.gov.au, legislation.vic.gov.au","className":["docs-center-img"],"src":"/assets/img/sites.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"why-use-ripple"},"children":[{"type":"text","value":"Why use Ripple?"}]},{"type":"element","tag":"h3","props":{"id":"ripple-solves-the-hard-problems-so-you-dont-have-to"},"children":[{"type":"text","value":"Ripple solves the hard problems so you don’t have to"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We spent the past 5 years refining Ripple based on user feedback to ensure it:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"meets the publishing needs of government users"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"makes it easier for citizens to interact with government services."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple users can be confident their site’s design and development is based on industry standards and best practices for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"accessibility"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"SEO"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"security"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"performance."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users can easily navigate sites regardless of technical ability, location or device."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Designers and developers can create consistent digital experiences across Victorian Government sites."}]},{"type":"element","tag":"h3","props":{"id":"ripple-gives-you-efficient-and-reusable-digital-resources"},"children":[{"type":"text","value":"Ripple gives you efficient and reusable digital resources"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple promotes efficiency and reuse by providing reusable styles, components and patterns."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It provides a set of standards to manage design at scale, to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reduce redundancy"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"create a shared language"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"provide visual consistency."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Developer contributions can be shared across projects, adding value to all government departments. This results in reduced project development time and expense."}]},{"type":"element","tag":"h3","props":{"id":"ripple-is-by-government-for-government"},"children":[{"type":"text","value":"Ripple is by government, for government"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple Design System has been made open-source to foster collaboration across government. By making the system open-source, departments and agencies can help improve the citizen experience across government. Ripple has been developed by government, for government and retains all intellectual property and expertise."}]},{"type":"element","tag":"h2","props":{"id":"who-can-use-ripple"},"children":[{"type":"text","value":"Who can use Ripple?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is open to all departments or agencies that use Victorian Government branding. Visit the "},{"type":"element","tag":"a","props":{"href":"/design-system/about/whos-it-for"},"children":[{"type":"text","value":"Who's it for?"}]},{"type":"text","value":" page for more information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is a modular system, allowing it to be used separately from our other SDP products, Tide and Bay. Visit the "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"text","value":" page for more information."}]},{"type":"element","tag":"h2","props":{"id":"how-do-i-find-out-more"},"children":[{"type":"text","value":"How do I find out more?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are a Victorian Government department or agency wanting to use Ripple in a Brand Victoria digital product (or a vendor supporting them), please visit "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/work-sdp","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/work-sdp"}]},{"type":"text","value":" or contact "},{"type":"element","tag":"a","props":{"href":"mailto:digital@dpc.vic.gov.au"},"children":[{"type":"text","value":"digital@dpc.vic.gov.au"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To find out more about the Single Digital Presence program, please visit "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/single-digital-presence","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/single-digital-presence"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"why-use-ripple","depth":2,"text":"Why use Ripple?","children":[{"id":"ripple-solves-the-hard-problems-so-you-dont-have-to","depth":3,"text":"Ripple solves the hard problems so you don’t have to"},{"id":"ripple-gives-you-efficient-and-reusable-digital-resources","depth":3,"text":"Ripple gives you efficient and reusable digital resources"},{"id":"ripple-is-by-government-for-government","depth":3,"text":"Ripple is by government, for government"}]},{"id":"who-can-use-ripple","depth":2,"text":"Who can use Ripple?"},{"id":"how-do-i-find-out-more","depth":2,"text":"How do I find out more?"}]}},"_type":"markdown","_id":"content:design-system:1.about:1.what-is-ripple.md","_source":"content","_file":"design-system/1.about/1.what-is-ripple.md","_extension":"md"},{"_path":"/design-system/about/whos-it-for","_dir":"about","_draft":false,"_partial":false,"_locale":"","title":"Who's it for?","description":"Built by government, for government.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"who-can-use-ripple"},"children":[{"type":"text","value":"Who can use Ripple?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is available to all departments and agencies that use Victorian Government branding."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Designers"}]},{"type":"text","value":" can easily and quickly create wireframes, high-fidelity designs and prototypes."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Developers"}]},{"type":"text","value":" can access technical specifications to create pixel-perfect code."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Content creators"}]},{"type":"text","value":" can design page concepts, knowing their layouts will accurately reflect the finished product."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Product owners"}]},{"type":"text","value":" and stakeholders can review designs and provide feedback."}]}]},{"type":"element","tag":"h2","props":{"id":"what-should-i-use-ripple-for"},"children":[{"type":"text","value":"What should I use Ripple for?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is designed to make websites that give Victorian citizens official information about their government. It is mainly used by Victorian Government departments and agencies to build websites using the "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/single-digital-presence","rel":["nofollow"]},"children":[{"type":"text","value":"Single Digital Presence (SDP)"}]},{"type":"text","value":" platform."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple makes it easy to share government information with all Victorians in a clear, concise and accessible way."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Since it is only used to build government websites, Ripple has been designed to support Brand Victoria digital products. This opinionated design means Ripple automatically guides you to create a digital experience for citizens that is in line with Brand Victoria’s look, feel and vision."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It also means Ripple is not a general purpose design system for use outside of Brand Victoria."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is for Victorian Government branded products only. Only use it to create communications that are approved to use the Victorian Government brand."}]}]},{"type":"element","tag":"h2","props":{"id":"how-do-i-use-ripple"},"children":[{"type":"text","value":"How do I use Ripple?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is a modular design system. This means Ripple lets you easily change and expand your website’s layout and content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It also means you can use different parts of the Ripple Design System, like components or styles, separately. Departments that don’t use the SDP platform can still use Ripple in their own digital products. You can do this by:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"building your own components"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"referencing the Ripple styles"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"importing the Ripple components."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Visit the "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"text","value":" page for instructions."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"who-can-use-ripple","depth":2,"text":"Who can use Ripple?"},{"id":"what-should-i-use-ripple-for","depth":2,"text":"What should I use Ripple for?"},{"id":"how-do-i-use-ripple","depth":2,"text":"How do I use Ripple?"}]}},"_type":"markdown","_id":"content:design-system:1.about:2.whos-it-for.md","_source":"content","_file":"design-system/1.about/2.whos-it-for.md","_extension":"md"},{"_path":"/design-system/about/getting-support","_dir":"about","_draft":false,"_partial":false,"_locale":"","title":"Support","description":"How to get help","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/ripple-design-system","rel":["nofollow"]},"children":[{"type":"text","value":"Ripple design system"}]},{"type":"text","value":" is maintained by the "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/single-digital-presence","rel":["nofollow"]},"children":[{"type":"text","value":"Single Digital Presence (SDP)"}]},{"type":"text","value":" team at the Victorian Department of Government Services."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can reach out to us via the following channels:"}]},{"type":"element","tag":"h3","props":{"id":"for-technical-and-project-support"},"children":[{"type":"text","value":"For technical and project support"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"join the discussion on "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions","rel":["nofollow"]},"children":[{"type":"text","value":"GitHub"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"log a request through our "},{"type":"element","tag":"a","props":{"href":"https://digital-vic.atlassian.net/servicedesk/customer/portals","rel":["nofollow"]},"children":[{"type":"text","value":"helpdesk"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"sign up to the "},{"type":"element","tag":"a","props":{"href":"https://vic-sdp.slack.com","rel":["nofollow"]},"children":[{"type":"text","value":"SDP Slack"}]},{"type":"text","value":" (Open to projects with an MoU for application support)"}]}]},{"type":"element","tag":"h2","props":{"id":"design-enquiries"},"children":[{"type":"text","value":"Design enquiries"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Email: "},{"type":"element","tag":"a","props":{"href":"mailto:design@dpc.vic.gov.au"},"children":[{"type":"text","value":"design@dpc.vic.gov.au"}]}]},{"type":"element","tag":"h2","props":{"id":"general-enquiries"},"children":[{"type":"text","value":"General enquiries"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://digital-vic.atlassian.net/servicedesk/customer/portal/14/group/113/create/497","rel":["nofollow"]},"children":[{"type":"text","value":"Raise a request"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"for-technical-and-project-support","depth":3,"text":"For technical and project support"},{"id":"design-enquiries","depth":2,"text":"Design enquiries"},{"id":"general-enquiries","depth":2,"text":"General enquiries"}]}},"_type":"markdown","_id":"content:design-system:1.about:3.getting-support.md","_source":"content","_file":"design-system/1.about/3.getting-support.md","_extension":"md"},{"_path":"/design-system/about/contributing","_dir":"about","_draft":false,"_partial":false,"_locale":"","title":"Contributing","description":"Found an issue?","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/ripple-design-system","rel":["nofollow"]},"children":[{"type":"text","value":"Ripple design system"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"/framework"},"children":[{"type":"text","value":"Ripple framework"}]},{"type":"text","value":" are open source and released under an Apache 2.0 License."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is maintained by the "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/single-digital-presence","rel":["nofollow"]},"children":[{"type":"text","value":"Single Digital Presence (SDP)"}]},{"type":"text","value":" team at the Victorian Department of Government Services.\nIf you are a Victorian Government department or agency (or a vendor supporting them) and wish to suggest improvements to Ripple that would benefit the project there are several options outlined below."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To propose a change, you will need to have a free GitHub account. Please see the "},{"type":"element","tag":"a","props":{"href":"https://docs.github.com/en/get-started/signing-up-for-github/signing-up-for-a-new-github-account","rel":["nofollow"]},"children":[{"type":"text","value":"GitHub docs"}]},{"type":"text","value":" to create one if you haven't already."}]},{"type":"element","tag":"h2","props":{"id":"submit-a-bug-report"},"children":[{"type":"text","value":"Submit a bug report"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you have encountered an issue that you think is a bug, help us fix it for everyone! To log a bug report please do the following:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Check existing the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions","rel":["nofollow"]},"children":[{"type":"text","value":"discussions"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/issues","rel":["nofollow"]},"children":[{"type":"text","value":"issues"}]},{"type":"text","value":" to see if the issue has already been discussed."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Fill out the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=bug&template=bug_report.yml&title=%5BBUG%5D","rel":["nofollow"]},"children":[{"type":"text","value":"bug report issue template"}]}]}]},{"type":"element","tag":"h2","props":{"id":"documentation-changes"},"children":[{"type":"text","value":"Documentation changes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Seen an issue with this documentation site? You can either describe it in an issue so the dev team can review it, or propose an edit directly by creating a Pull request with the proposed change."}]},{"type":"element","tag":"h3","props":{"id":"to-create-an-issue"},"children":[{"type":"text","value":"To create an issue:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To log a docs site issue please do the following"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Log in to GitHub"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=docs&template=docs.yml&title=%5BDOCS%5D","rel":["nofollow"]},"children":[{"type":"text","value":"Log an issue on the GitHub Repository"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Fill in the form, providing as much detail as possible"}]}]},{"type":"element","tag":"h3","props":{"id":"to-propose-an-edit-directly"},"children":[{"type":"text","value":"To propose an edit directly"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the "},{"type":"element","tag":"a","props":{"href":"https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request","rel":["nofollow"]},"children":[{"type":"text","value":"GitHub docs"}]},{"type":"text","value":" for more information about creating a pull request."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Log in to GitHub"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Click the \"Propose a change to this page on GitHub\" link at the bottom of each content page"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Make a change to the markdown in the editor. See "},{"type":"element","tag":"a","props":{"href":"https://www.markdownguide.org/","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.markdownguide.org/"}]},{"type":"text","value":" for information on syntax"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Describe the change in the commit message"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Create a new pull request from the \"forked\" version of the repository"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"This pull request will be reviewed by the SDP development team and we may ask for changes or revisions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If the Pull Request is approved it will be merged and included in the next Ripple release."}]}]},{"type":"element","tag":"h2","props":{"id":"propose-a-new-feature"},"children":[{"type":"text","value":"Propose a new feature"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you have a proposal for a new feature to the Ripple design system please see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/ripple-design-system#enquiries-and-support","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/ripple-design-system#enquiries-and-support"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For development partners wishing to propose a new feature to Ripple Framework please do the following:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Check existing the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions/categories/feature-proposals-rfc","rel":["nofollow"]},"children":[{"type":"text","value":"discussions"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/issues","rel":["nofollow"]},"children":[{"type":"text","value":"issues"}]},{"type":"text","value":" to see if the the proposal has already been discussed. The discussion board is a great place to bring up new ideas for discussion without having to write up a full proposal."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If you are confident that the feature is something worth progressing, please fill out the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=bug&template=feature-request.yml&title=%5BPROPOSAL%5D","rel":["nofollow"]},"children":[{"type":"text","value":"New feature proposal"}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"submit-a-bug-report","depth":2,"text":"Submit a bug report"},{"id":"documentation-changes","depth":2,"text":"Documentation changes","children":[{"id":"to-create-an-issue","depth":3,"text":"To create an issue:"},{"id":"to-propose-an-edit-directly","depth":3,"text":"To propose an edit directly"}]},{"id":"propose-a-new-feature","depth":2,"text":"Propose a new feature"}]}},"_type":"markdown","_id":"content:design-system:1.about:4.contributing.md","_source":"content","_file":"design-system/1.about/4.contributing.md","_extension":"md"},{"_path":"/design-system/design/getting-started","_dir":"design","_draft":false,"_partial":false,"_locale":"","title":"Getting started","description":null,"layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is the design system for Victorian Government digital products. The Ripple Design System makes websites and other digital products look and feel like part of the vic.gov.au brand."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple Design System creates an accessible and consistent visual user interface across all our digital products. This helps citizens trust they are visiting an official source of Victorian Government information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It also provides a single source of truth when choosing styles, components and patterns for Single Digital Presence (SDP) websites."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple Design System offers tools users can apply, adapt and expand to create a vic.gov.au-branded digital experience. These include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"styles"}]},{"type":"text","value":" - foundations of colour, typography, spacing, motion and graphic devices that communicate the Victorian Government’s visual identity"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"components"}]},{"type":"text","value":" - customisable parts (including base components) that give a website its functionality and, when combined with styles, user interface"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"guidance"}]},{"type":"text","value":" - detailed instructions for designers and and developers on using Ripple 2.0 styles, components and other Ripple tools to create consistent digital experiences."}]}]},{"type":"element","tag":"h2","props":{"id":"first-steps"},"children":[{"type":"text","value":"First steps"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some key areas of the Ripple Design System that will help you create your digital product."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/design/design-tokens/"},"children":[{"type":"text","value":"Design tokens"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/ripple-design-system#request-access-to-the-design-system","rel":["nofollow"]},"children":[{"type":"text","value":"Sign up for access to the Ripple 2.0 Figma file"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/"},"children":[{"type":"text","value":"Theming"}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-ripple-20-figma-file"},"children":[{"type":"text","value":"The Ripple 2.0 Figma file"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2.0 Design System is available in "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/","rel":["nofollow"]},"children":[{"type":"text","value":"Figma"}]},{"type":"text","value":". It contains all the design assets needed to design, prototype and share."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use the Figma file in conjunction with the Ripple 2.0 guidance about the component or style you are using. Read the guidance to understand the usage and behaviour of styles and components."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"To create quality user experiences, do not use the Figma file in isolation."}]},{"type":"text","value":" This is important because the Ripple Design System provides more than a website’s appearance. It encompasses developer, user experience, inclusive design and other human-centred design considerations. For example, Ripple automatically ensures accessible colour pairings, cross-browser functionality and consistent error messaging. Using the Figma file without Ripple guidance will confuse users and degrade your site’s accessibility and functionality."}]},{"type":"element","tag":"h3","props":{"id":"figma-file-access"},"children":[{"type":"text","value":"Figma file access"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Sign up to Figma"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Create a free "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/pricing/","rel":["nofollow"]},"children":[{"type":"text","value":"Figma Starter account"}]},{"type":"text","value":"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Install Ripple font"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Ripple uses the VIC font family."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/brand-victoria-fonts","rel":["nofollow"]},"children":[{"type":"text","value":"Download and install VIC"}]},{"type":"text","value":" to use this typeface in Figma."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Request access to Ripple Figma file"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Ripple has been built as a Figma project."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/ripple-design-system#request-access-to-the-design-system","rel":["nofollow"]},"children":[{"type":"text","value":"Request access to the Ripple 2.0 Design System"}]},{"type":"text","value":"."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"You will receive access to the Ripple Design System Figma file."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Add Ripple to your Figma account"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Add the Ripple 2.0 Design System Figma file to your Figma account."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Set up Asset Library"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"In your Figma account, go to the Getting Started page."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"Follow these instructions to set up the Asset Library."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"first-steps","depth":2,"text":"First steps"},{"id":"the-ripple-20-figma-file","depth":2,"text":"The Ripple 2.0 Figma file","children":[{"id":"figma-file-access","depth":3,"text":"Figma file access"}]}]}},"_type":"markdown","_id":"content:design-system:2.design:1.getting-started.md","_source":"content","_file":"design-system/2.design/1.getting-started.md","_extension":"md"},{"_path":"/design-system/design/our-design-principles","_dir":"design","_draft":false,"_partial":false,"_locale":"","title":"Our design principles","description":"There are 4 design principles that are the foundation of the Ripple Design System.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are 4 design principles that underpin the Ripple Design System:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Inclusive."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Efficient."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Flexible."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Easy."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple Design System uses these principles when making design decisions."}]},{"type":"element","tag":"h2","props":{"id":"inclusive"},"children":[{"type":"text","value":"Inclusive"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Accessibility is top priority."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Collaborative in design."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Transparent documentation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Friendly, helpful and trustworthy."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Include all users, abilities and backgrounds in the process and design intent."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Support best practices, provide guidance and build trust with the community."}]},{"type":"element","tag":"h2","props":{"id":"efficient"},"children":[{"type":"text","value":"Efficient"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Less is more."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Clean and clear."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Considered."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Economic design."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Think holistically to create considered sustainable outcomes that make sense to all users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Increase efficiencies while reducing complexities and risks."}]},{"type":"element","tag":"h2","props":{"id":"flexible"},"children":[{"type":"text","value":"Flexible"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Responsive to data."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Responsive to sub-brands."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Considers context."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Iterative improvements."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use meaningful evidence to improve impact and add value."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Find improvement opportunities that elevate the experience for multiple contexts and end users."}]},{"type":"element","tag":"h2","props":{"id":"easy"},"children":[{"type":"text","value":"Easy"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Easy to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"contribute to"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"learn and understand"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"create and recreate"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"find information."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Consider the needs and experiences of end users of Victorian digital products."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Make the Ripple experience easy to use. Create experiences and contribute to the design system with end users in mind."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"inclusive","depth":2,"text":"Inclusive"},{"id":"efficient","depth":2,"text":"Efficient"},{"id":"flexible","depth":2,"text":"Flexible"},{"id":"easy","depth":2,"text":"Easy"}]}},"_type":"markdown","_id":"content:design-system:2.design:2.our-design-principles.md","_source":"content","_file":"design-system/2.design/2.our-design-principles.md","_extension":"md"},{"_path":"/design-system/design/design-tokens","_dir":"design","_draft":false,"_partial":false,"_locale":"","title":"Design tokens","description":"Design tokens store our design decisions in the Ripple Design System. They are the single source of truth.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"what-is-a-design-token"},"children":[{"type":"text","value":"What is a Design token?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design tokens store our design decisions that, together, make up the Ripple Design System’s visual style."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tokens apply values in a consistent, reusable and scalable way. They ensure the same style values are used across design files and code."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By storing design decisions, they replace the need to use static values (for example, hex code values for colour)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple Design System has tokens for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"colour"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"typography"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"spacing"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"elevation"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"borders"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"motion values."}]}]},{"type":"element","tag":"h2","props":{"id":"why-use-design-tokens"},"children":[{"type":"text","value":"Why use design tokens?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using design tokens keeps your UI consistent across different platforms."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design tokens are the single source of truth. You can use them across designs and code."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Since design tokens let you make value changes at scale, design language changes are easier to make."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design tokens aren't hard-coded. Avoiding hard-coded values in your design system makes it easier to build, maintain and scale products."}]},{"type":"element","tag":"h2","props":{"id":"ripple-design-tokens"},"children":[{"type":"text","value":"Ripple design tokens"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A Ripple token has 2 parts:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a token name, such as "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"rpl-clr-primary"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an associated value, such as "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"#0052C2"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The token's value can be one of several things: colour, a typeface, a measurement or even another token."}]},{"type":"element","tag":"h2","props":{"id":"how-to-read-ripple-design-token-names"},"children":[{"type":"text","value":"How to read Ripple design token names"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Knowing how to read a token name helps you find the right token faster."}]},{"type":"element","tag":"h3","props":{"id":"parts-of-design-token-names"},"children":[{"type":"text","value":"Parts of design token names"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"rpl"}]},{"type":"text","value":": design system"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"clr"}]},{"type":"text","value":" (colour) or "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"type"}]},{"type":"text","value":" (typography) or "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"sp"}]},{"type":"text","value":" (spacing) for example: token type"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"primary-accessible"}]},{"type":"text","value":" (a descriptive name) or "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"3"}]},{"type":"text","value":" (a number), for example: see below"}]}]},{"type":"element","tag":"h3","props":{"id":"examples"},"children":[{"type":"text","value":"Examples"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"rpl-clr-primary-accessible"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"rpl-sp-4"}]}]}]},{"type":"element","tag":"h3","props":{"id":"steps-and-explanations"},"children":[{"type":"text","value":"Steps and explanations"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Start all design tokens with the system name: "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"rpl"}]},{"type":"text","value":" is for Ripple."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Then, place an abbreviation for the token type: "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"clr"}]},{"type":"text","value":" is for colour; type is for typography; "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"sp"}]},{"type":"text","value":" is for spacing."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"End the token name with a descriptive name or number to show the token’s role relative to other Ripple design tokens. For example, "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"primary-accessible"}]},{"type":"text","value":" in rpl-clr-type-primary-accessible shows this is a colour token that applies one of Ripple’s primary colours (from the colour palette available in Ripple Design System) and is suitable for accessible content. "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"4"}]},{"type":"text","value":" in rpl-sp-4 shows this is a spacing token where 4 is the fourth spacing step (16x), in size order, from the spacing options available in the Ripple Design System."}]}]},{"type":"element","tag":"h2","props":{"id":"best-practices"},"children":[{"type":"text","value":"Best practices"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Choose tokens based on meaning rather than appearance only"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Choose the token with the most specific meaning that is available and applies to your content’s role on the site"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not choose tokens based only how the end result looks on your site"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"For example, for a heading, it is important to choose rpl-type-h3 (heading token) instead of a rpl-type-p-large (type token), even though the end result looks similar"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"For example, if your content needs to be accessible and a certain colour, you should pick rpl-clr-type-primary-accessible instead of rpl-clr-primary"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't pick a token just because the colours seem to match - this can break the consistency across other themes and confuse the user’s experience"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If you do choose tokens based on appearance only, updates to themes, colours, or other features will not apply properly or consistently later"}]}]},{"type":"element","tag":"h2","props":{"id":"why-are-tokens-important-for-design"},"children":[{"type":"text","value":"Why are tokens important for design?"}]},{"type":"element","tag":"h3","props":{"id":"purpose-driven"},"children":[{"type":"text","value":"Purpose-driven"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tokens can be created with a specific purpose or goal in mind. For example, improve accessibility, enhance visual consistency or make it easier to update and maintain a website or app."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Since tokens are purpose-driven, designers and developers can make system-wide updates focused on achieving specific purposes. For example, systematically apply a high-contrast colour scheme for improved visibility, or change the type scale."}]},{"type":"element","tag":"h3","props":{"id":"single-source-of-truth"},"children":[{"type":"text","value":"Single source of truth"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design tokens are like reusable building blocks. They give a design system a single source of truth for making changes to the way a website looks and works."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Having a single source of truth lets a design system implement features like global theming, responsive design and user customisation."}]},{"type":"element","tag":"h3","props":{"id":"system-wide-updates"},"children":[{"type":"text","value":"System-wide updates"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"They let developers and designers change system-wide themes and contexts, using only a single update."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design tokens prevent or reduce the need to find and replace thousands of instances of hard-coded values in the code."}]},{"type":"element","tag":"h2","props":{"id":"for-developers"},"children":[{"type":"text","value":"For developers"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For information for developers using tokens to theme Ripple components see the "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guide"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"what-is-a-design-token","depth":2,"text":"What is a Design token?"},{"id":"why-use-design-tokens","depth":2,"text":"Why use design tokens?"},{"id":"ripple-design-tokens","depth":2,"text":"Ripple design tokens"},{"id":"how-to-read-ripple-design-token-names","depth":2,"text":"How to read Ripple design token names","children":[{"id":"parts-of-design-token-names","depth":3,"text":"Parts of design token names"},{"id":"examples","depth":3,"text":"Examples"},{"id":"steps-and-explanations","depth":3,"text":"Steps and explanations"}]},{"id":"best-practices","depth":2,"text":"Best practices"},{"id":"why-are-tokens-important-for-design","depth":2,"text":"Why are tokens important for design?","children":[{"id":"purpose-driven","depth":3,"text":"Purpose-driven"},{"id":"single-source-of-truth","depth":3,"text":"Single source of truth"},{"id":"system-wide-updates","depth":3,"text":"System-wide updates"}]},{"id":"for-developers","depth":2,"text":"For developers"}]}},"_type":"markdown","_id":"content:design-system:2.design:3.design-tokens.md","_source":"content","_file":"design-system/2.design/3.design-tokens.md","_extension":"md"},{"_path":"/design-system/design/theming-guidance-for-designers","_dir":"design","_draft":false,"_partial":false,"_locale":"","title":"Theming guidance for designers","description":null,"layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Jump to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/#create-a-custom-theme"},"children":[{"type":"text","value":"Create a custom theme"}]},{"type":"text","value":"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/#component-specific-theming"},"children":[{"type":"text","value":"Component-specific theming"}]},{"type":"text","value":"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/#theme-accessibility"},"children":[{"type":"text","value":"Theme accessibility"}]},{"type":"text","value":"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/#automatic-colour-token-logic"},"children":[{"type":"text","value":"Automatic colour token logic"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2.0 has been designed with in-built custom theming capabilities. Theming can be applied if your site requires department or entity branding and has been approved to use theming. Please note it is recommend you utilise the brand equity of vic.gov.au where possible and only theme your site if needed and approved. Please contact the SDP team for more information on approvals for theming."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple uses primary and accent colours, an optional gradient, a link colour and a focus state colour. You can read more about their roles and uses in the colour documentation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When theming your site, its styles and components will re-theme automatically. This has been done through the use of design tokens. Design tokens represent repeated design decisions that make up a design system's visual style. Tokens replace static values, such as hex codes for colour. The token informs how colour is used and inherited to ensure a consistent and accessible user experience."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We’ve designed a colour testing process so the selected colours will pass the accessibility contrast ratios. It classifies the selected colours into a ‘light’ or ‘dark’ category. The colour system will then automatically provide accessible colour contrast."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We have aimed to conform to the Web Content Accessibility Guideline (WCAG) requirements, but we recommend you perform your own accessibility checks where possible to ensure the guidelines are being met."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To learn more about if your site should be themed, please contact the Single Digital Presence (SDP) team."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"create-a-custom-theme"},"children":[{"type":"text","value":"Create a custom theme"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple has been designed with a primary and accent colour. These inform the colour framework."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A link colour, focus colour and optional gradient are also required when theming."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary, accent and focus colours can be either light or dark:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"'Light' means the colour is WCAG 2.1 AA compliant with dark type (rpl-clr-dark / #1A1A1A)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"‘Dark’ means the colour is WCAG 2.1 AA compliant with light type (rpl-clr-light / #FFFFFF)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To classify your colour as light or dark, we recommend the use "},{"type":"element","tag":"a","props":{"href":"https://webaim.org/resources/contrastchecker/","rel":["nofollow"]},"children":[{"type":"text","value":"WebAim Colour Contrast Checker"}]},{"type":"text","value":" or the "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/community/plugin/733159460536249875","rel":["nofollow"]},"children":[{"type":"text","value":"Figma plugin, A11y - Colour Contrast Checker"}]},{"type":"text","value":" to see if the colour is accessible with the Ripple 2.0 dark or light type colours listed above."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Classifying colours as either ‘dark’ or ‘light’ informs the implementation of other colour tokens, aiming to conform to WCAG 2.1 AA colour contrast requirements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It is recommended that the primary colour is always visually darker than the accent and is visually different at glance. This will ensure your users are quickly and easily directed to the most important areas of a web page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Guidance for creating your own theme can be found on the Theming page of the "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/file/mgPlLh5IFKAkDoSID9Vpi1/Ripple-2.0?type=design&node-id=9557%3A70609&t=dK1cmsWLfSmpr9Ff-1","rel":["nofollow"]},"children":[{"type":"text","value":"Ripple 2.0 Design System Figma file"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you don’t have access, you can "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/ripple-design-system","rel":["nofollow"]},"children":[{"type":"text","value":"request access to view the Ripple 2.0 Design System"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"component-specific-theming"},"children":[{"type":"text","value":"Component-specific theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple 2.0 Design System has components that allow for specific theming. This is optional and if not used, components will adopt the default framework styling. Component-specific theming is defined at a site level, and will affect all instances of the component."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are 2 options for component-specific styling:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"neutral"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"custom."}]}]},{"type":"element","tag":"h3","props":{"id":"neutral"},"children":[{"type":"text","value":"Neutral"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Neutral can be applied to the following components:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"buttons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"header (only reverse and image variants)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"footer."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The colour of neutral component variants cannot be changed. Neutral components have predefined neutral styling and cannot be edited or customised."}]},{"type":"element","tag":"h3","props":{"id":"custom"},"children":[{"type":"text","value":"Custom"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Custom component theming can only be applied to the footer."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The footer has been created with component-specific design tokens. It is recommended custom theming is only done if required."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To learn more about custom styling please see the Theming page of the "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/file/mgPlLh5IFKAkDoSID9Vpi1/Ripple-2.0?type=design&node-id=9557%3A70609&t=dK1cmsWLfSmpr9Ff-1","rel":["nofollow"]},"children":[{"type":"text","value":"Ripple 2.0 Design System Figma file"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theme-accessibility"},"children":[{"type":"text","value":"Theme accessibility"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2.0 has been designed with the aim to conform to WCAG 2.1 AA standards (below). For websites built on the SDP platform, it is mandatory to meet WCAG 2.1 AA level standards. These accessibility standards are also strongly recommended for all Victorian Government communications built using the Ripple design system (see: "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/brand-victoria-guidelines-logos","rel":["nofollow"]},"children":[{"type":"text","value":"Brand Victoria guidelines"}]},{"type":"text","value":" for more information)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Colour contrast is the amount of perceived difference between 2 colours. This is represented as a ratio. A high ratio indicates greater difference between colours and therefore higher contrast."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Colour contrast impacts the readability of your content. It is important for users with low vision or a colour vision deficiency."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html","rel":["nofollow"]},"children":[{"type":"text","value":"1.4.3 Contrast Minimum (Level AA)"}]},{"type":"text","value":"\nThe visual presentation of "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/WCAG21/#dfn-text","rel":["nofollow"]},"children":[{"type":"text","value":"text"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/WCAG21/#dfn-images-of-text","rel":["nofollow"]},"children":[{"type":"text","value":"images of text"}]},{"type":"text","value":" has a "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio","rel":["nofollow"]},"children":[{"type":"text","value":"contrast ratio"}]},{"type":"text","value":" of at least 4.5:1, except for the following:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/WCAG21/#dfn-large-scale","rel":["nofollow"]},"children":[{"type":"text","value":"Large-scale"}]},{"type":"text","value":" text and images of large-scale text have a contrast ratio of at least 3:1;"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text or images of text that are part of an inactive "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/WCAG21/#dfn-user-interface-components","rel":["nofollow"]},"children":[{"type":"text","value":"user interface component"}]},{"type":"text","value":", that are "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/WCAG21/#dfn-pure-decoration","rel":["nofollow"]},"children":[{"type":"text","value":"pure decoration"}]},{"type":"text","value":", that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text that is part of a logo or brand name has no contrast requirement."}]}]},{"type":"element","tag":"h3","props":{"id":"accessibility-testing-requirements"},"children":[{"type":"text","value":"Accessibility testing requirements"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When testing, websites on the SDP platform are required to meet AA standards. Your website must meet a "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html","rel":["nofollow"]},"children":[{"type":"text","value":"minimum contrast ratio of 4:5:1"}]},{"type":"text","value":" for normal text contrast, 3:1 for large text and non-text elements must be met."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Links are required to meet a ratio of 4.5:1 colour contrast."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In the Ripple 2.0 Design System the primary, accent and focus colours are tested against:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"dark type / rpl-clr-dark / #1A1A1A"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"light type / rpl-clr-light / #FFFFFF."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The link colour is tested against 3 colours:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"light type / rpl-clr-light / #FFFFFF"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"rpl-clr-neutral-100 / #F5F5F5"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"rpl-clr-accent-alt / #E6F5FD (example hex only)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Colour vision deficiency: it is recommended to also test your colour palette for colour blindness. Some colours can appear similar to people with colour vision deficiency. We recommend using the "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/community/plugin/733343906244951586","rel":["nofollow"]},"children":[{"type":"text","value":"Figma plugin 'Color Blind'"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"colour-token-automatic-logic"},"children":[{"type":"text","value":"Colour token automatic logic"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Below is a full list of colour tokens required to theme the Ripple 2.0 Design System."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Aiming to meet WCAG 2.1 AA colour contrast requirements, some token values are automatic based on their use in the system. This ensures all text-based content meets colour contrast accessibility requirements.\nFor example, if the primary colour is classified as dark:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast will automatically be rpl-clr-light"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-accessible will automatically be rpl-clr-primary."}]}]},{"type":"element","tag":"h3","props":{"id":"core"},"children":[{"type":"text","value":"Core"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Custom / Automatic"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-primary"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-primary-alt"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-primary-alpha"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-primary')"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-accent"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-accent-alt"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-focus"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-link"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-gradient-horizontal"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Custom"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-gradient-vertical"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Custom"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"typography-colour-tokens"},"children":[{"type":"text","value":"Typography colour tokens"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Custom / Automatic"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-primary’ contrast requirements)"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast-alpha"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-type-primary-contrast')"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-accent-contrast"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-accent’ contrast requirements)"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-accessible"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-primary’ contrast requirements)"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-alt-accessible"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-primary’ contrast requirements)"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-focus-contrast"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-focus’ contrast requirements)"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"footer-specific-optional"},"children":[{"type":"text","value":"Footer-specific (optional)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See: "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/#component-specific-theming"},"children":[{"type":"text","value":"component-specific theming"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Custom / Automatic"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-footer"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Custom or automatic"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-footer-alt"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Custom or automatic"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-footer-contrast"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-footer’ contrast requirements)"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-footer-accessible"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Automatic (based on ‘rlp-clr-footer’ contrast requirements)"}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"automatic-colour-token-logic"},"children":[{"type":"text","value":"Automatic Colour Token Logic"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Based on the colour contrast requirements for the primary, accent and focus colours, some tokens are automatic to aim to conform to WCAG 2.0 AA colour contrast accessibility."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"‘Light’ means the colour (for example, primary) is AA compliant with dark type (rpl-clr-dark / #1A1A1A)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"‘Dark’ means the colour (for example, primary) is AA compliant with light type (rpl-clr-light / #FFFFFF)."}]}]},{"type":"element","tag":"h3","props":{"id":"primary-access-focus-and-link"},"children":[{"type":"text","value":"Primary, Access, Focus and Link"}]},{"type":"element","tag":"h4","props":{"id":"primary"},"children":[{"type":"text","value":"Primary"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Colour ‘Dark’"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Colour 'Light"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-primary-alpha"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-primary at 50% opacity"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-primary at 50% opacity"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-light"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-dark"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast-alpha"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast at 75% opacity"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-contrast at 75% opacity"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-accessible"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-primary"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-dark"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-primary-alt-accessible"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rlpl-clr-primary-alt"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-dark"}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"accent"},"children":[{"type":"text","value":"Accent"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Colour ‘Dark’"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Colour 'Light"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-accent-contrast"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-light"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-dark"}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"focus"},"children":[{"type":"text","value":"Focus"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Colour ‘Dark’"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Colour 'Light"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-type-focus-contrast"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-light"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-dark"}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"link"},"children":[{"type":"text","value":"Link"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Colour ‘Dark’"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Colour 'Light"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"If Primary ‘Dark’"}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"If Primary ‘Light’"}]}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-link"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-primary"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Custom"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"gradient"},"children":[{"type":"text","value":"Gradient"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Including a gradient is optional for theming."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If a gradient is not used, 'rpl-clr-accent' will be used in its place."}]},{"type":"element","tag":"h4","props":{"id":"gradient-1"},"children":[{"type":"text","value":"Gradient"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Token"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Gradient"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Accent"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-gradient-horizontal"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-gradient (90 degrees)"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-accent"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-gradient-vertical"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-gradient (180 degrees)"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-accent"}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"create-a-custom-theme","depth":2,"text":"Create a custom theme"},{"id":"component-specific-theming","depth":2,"text":"Component-specific theming","children":[{"id":"neutral","depth":3,"text":"Neutral"},{"id":"custom","depth":3,"text":"Custom"}]},{"id":"theme-accessibility","depth":2,"text":"Theme accessibility","children":[{"id":"accessibility-testing-requirements","depth":3,"text":"Accessibility testing requirements"}]},{"id":"colour-token-automatic-logic","depth":2,"text":"Colour token automatic logic","children":[{"id":"core","depth":3,"text":"Core"},{"id":"typography-colour-tokens","depth":3,"text":"Typography colour tokens"},{"id":"footer-specific-optional","depth":3,"text":"Footer-specific (optional)"}]},{"id":"automatic-colour-token-logic","depth":2,"text":"Automatic Colour Token Logic","children":[{"id":"primary-access-focus-and-link","depth":3,"text":"Primary, Access, Focus and Link"},{"id":"gradient","depth":3,"text":"Gradient"}]}]}},"_type":"markdown","_id":"content:design-system:2.design:4.theming-guidance-for-designers.md","_source":"content","_file":"design-system/2.design/4.theming-guidance-for-designers.md","_extension":"md"},{"_path":"/design-system/develop/getting-started","_dir":"develop","_draft":false,"_partial":false,"_locale":"","title":"Getting started","description":"Information for developers using the Ripple 2 UI libraries","layout":"page","links":[{"text":"Github","url":"https://github.com/dpc-sdp/ripple-framework"},{"text":"Storybook","url":"/storybook"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This section contains information about the Ripple user interface libraries. These libraries are a collection of UI components which implement the Ripple Design System. The components are written in Vue and are split accross two packages:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-ui-core"}]},{"type":"text","value":": A collection of common UI components used in SDP sites. For example buttons, cards, icons and typography."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-ui-forms"}]},{"type":"text","value":": A collection of form inputs and support for building complex forms via "},{"type":"element","tag":"a","props":{"href":"https://formkit.com/","rel":["nofollow"]},"children":[{"type":"text","value":"Formkit"}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"These docs are for Ripple 2"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2 is a complete rebuild. If you are looking for information about the previous version of Ripple please visit the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple","rel":["nofollow"]},"children":[{"type":"text","value":"original Ripple GitHub repo"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Are you developing a site on the SDP platform?"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This section is about the Ripple UI component libraries, and there is a lot more to developing a site on the Single Digital Presence (SDP) stack that is not covered here."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For information about using Ripple in SDP sites, visit the "},{"type":"element","tag":"a","props":{"href":"/framework"},"children":[{"type":"text","value":"Ripple Framework for SDP documentation"}]}]}]},{"type":"element","tag":"h2","props":{"id":"accessing-the-source-code"},"children":[{"type":"text","value":"Accessing the Source code"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2 is an open source project and the source code can be found in the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework","rel":["nofollow"]},"children":[{"type":"text","value":"ripple-framework monorepo on Github"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This monorepo contains a lot more than just the UI libraries so we've provided direct links to packages below:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-core","rel":["nofollow"]},"children":[{"type":"text","value":"View "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-ui-core"}]},{"type":"text","value":" on Github"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-forms","rel":["nofollow"]},"children":[{"type":"text","value":"View "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-ui-forms"}]},{"type":"text","value":" on Github"}]}]}]},{"type":"element","tag":"h2","props":{"id":"viewing-examples-in-storybook"},"children":[{"type":"text","value":"Viewing examples in Storybook"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple Storybook has information about props and slots that each Vue component supports. "},{"type":"element","tag":"a","props":{"href":"/storybook"},"children":[{"type":"text","value":"View the Ripple storybook"}]},{"type":"text","value":" to start exploring the available components."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Most of the examples found on this documentation site link directly examples in storybook."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/usage"},"children":[{"type":"text","value":"usage"}]},{"type":"text","value":" guide for information about getting started with the different ways of implementing Ripple."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"accessing-the-source-code","depth":2,"text":"Accessing the Source code"},{"id":"viewing-examples-in-storybook","depth":2,"text":"Viewing examples in Storybook"},{"id":"usage","depth":2,"text":"Usage"}]}},"_type":"markdown","_id":"content:design-system:3.develop:1.getting-started.md","_source":"content","_file":"design-system/3.develop/1.getting-started.md","_extension":"md"},{"_path":"/design-system/develop/contributing","_dir":"develop","_draft":false,"_partial":false,"_locale":"","title":"Contributing","description":"Information for developers wishing to contribute to the Ripple 2 UI libraries","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When contributing or participating in discussions, ensure that you are following our "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/blob/develop/CODE_OF_CONDUCT.md","rel":["nofollow"]},"children":[{"type":"text","value":"contributor code of conduct"}]}]}]},{"type":"element","tag":"h2","props":{"id":"report-an-issue"},"children":[{"type":"text","value":"Report an issue"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you find an issue in Ripple, you can create an issue in github here "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/issues","rel":["nofollow"]},"children":[{"type":"text","value":"https://github.com/dpc-sdp/ripple-framework/issues"}]},{"type":"text","value":". Make sure to follow the template provided and provide plenty of detail so that your issue has a better chance of being fixed."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is an open source project, so PRs are always welcomed if you've already found a fix for the issue."}]},{"type":"element","tag":"h2","props":{"id":"join-the-discussion"},"children":[{"type":"text","value":"Join the discussion"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Do you have an idea for a new component or feature? Use the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions","rel":["nofollow"]},"children":[{"type":"text","value":"Discussions"}]},{"type":"text","value":" feature in Ripple Github repo to start the conversation."}]},{"type":"element","tag":"h2","props":{"id":"writing-code"},"children":[{"type":"text","value":"Writing code"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are ready to write some code in the Ripple git repo, please see the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/blob/develop/CONTRIBUTING.md","rel":["nofollow"]},"children":[{"type":"text","value":"Contributing guide"}]},{"type":"text","value":" in Github."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"report-an-issue","depth":2,"text":"Report an issue"},{"id":"join-the-discussion","depth":2,"text":"Join the discussion"},{"id":"writing-code","depth":2,"text":"Writing code"}]}},"_type":"markdown","_id":"content:design-system:3.develop:2.contributing.md","_source":"content","_file":"design-system/3.develop/2.contributing.md","_extension":"md"},{"_path":"/design-system/develop/theming","_dir":"develop","_draft":false,"_partial":false,"_locale":"","title":"Theme and brand application","description":"Information for developers using Ripple 2 UI libraries","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple allows for customisation of it's components to allow application of Victorian government departments and agencies brand and identity within a common framework. For guidance on how to theme Ripple in an accessible and consistent way, see the "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]}]},{"type":"element","tag":"h2","props":{"id":"css-variables"},"children":[{"type":"text","value":"CSS Variables"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple is fully theme-able using "},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties","rel":["nofollow"]},"children":[{"type":"text","value":"CSS variables"}]},{"type":"text","value":", this allows runtime customisation of site variables within all modern browsers. CSS variables form the API for allowing customisation of SDP sites by setting base tokens for your site."}]},{"type":"element","tag":"h2","props":{"id":"example"},"children":[{"type":"text","value":"Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To override theme values, simply set the css variable at "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":":root"}]},{"type":"text","value":" or an element that wraps elements you want to theme."}]},{"type":"element","tag":"pre","props":{"className":"language-css shiki shiki-themes github-light","code":":root {\n  --rpl-clr-primary: #6B19A3;\n}\n","language":"css","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":":root"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  --rpl-clr-primary"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":"#6B19A3"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":";\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"}\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the "},{"type":"element","tag":"a","props":{"href":"/design-system/styles/colour"},"children":[{"type":"text","value":"colour"}]},{"type":"text","value":" page for a list of theme-able colours."}]},{"type":"element","tag":"h2","props":{"id":"assets"},"children":[{"type":"text","value":"Assets"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alongside the inclusion of site logos, Ripple also uses graphic devices in several key components that allow for customising to apply brand."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the following components for guidance on providing graphic elements to theme your site:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/styles/logo"},"children":[{"type":"text","value":"Logos"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/header"},"children":[{"type":"text","value":"Header"}]}]}]},{"type":"element","tag":"h2","props":{"id":"brand-application-in-sdp-sites"},"children":[{"type":"text","value":"Brand application in SDP sites"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the "},{"type":"element","tag":"a","props":{"href":"/framework"},"children":[{"type":"text","value":"SDP Ripple framework"}]},{"type":"text","value":" section for more information on customising SDP websites and applying brand."}]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"css-variables","depth":2,"text":"CSS Variables"},{"id":"example","depth":2,"text":"Example"},{"id":"assets","depth":2,"text":"Assets"},{"id":"brand-application-in-sdp-sites","depth":2,"text":"Brand application in SDP sites"}]}},"_type":"markdown","_id":"content:design-system:3.develop:2.theming.md","_source":"content","_file":"design-system/3.develop/2.theming.md","_extension":"md"},{"_path":"/design-system/develop/usage","_dir":"develop","_draft":false,"_partial":false,"_locale":"","title":"Usage","description":"Ripple components can be used in several different ways depending on your project needs.","layout":"page","links":[{"text":"Github","url":"https://github.com/dpc-sdp/ripple-framework"},{"text":"Storybook","url":"/storybook"}],"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"using-ripple-ui-components"},"children":[{"type":"text","value":"Using Ripple UI components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Whilst Ripple is built to implement sites using a framework built on Vue JS and Nuxt, its modular architecture allows adopting different parts depending on your requirements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"ripple is made up of Figma design, CSS styles, Vue JS components and Nuxt JS Sites","src":"/assets/img/modules/rpl-modules.png"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple UI libraries are usable in the following contexts:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"svg","props":{"id":"docs-sprite","ariaHidden":"true","className":["rpl-svg-sprite--hidden"]},"children":[{"type":"element","tag":"defs","props":{},"children":[{"type":"element","tag":"symbol","props":{"xmlns":"http://www.w3.org/2000/svg","id":"icon-check","viewBox":"0 0 24 24"},"children":[{"type":"element","tag":"path","props":{"d":"M22.9.4c-1.1-.7-2.6-.4-3.3.8L9.2 17.8l-5.1-5.1c-.9-.9-2.5-.9-3.4 0s-.9 2.5 0 3.4l7.2 7.2c1.1 1.1 2.9.9 3.7-.4l12-19.2c.7-1.2.4-2.6-.7-3.3z"},"children":[]}]}]}]}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Library"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"CSS styles"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Vue Components"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Ripple Framework (Nuxt)"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Web components"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Ripple UI Core"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-check"},"children":[]}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-check"},"children":[]}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-check"},"children":[]}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Partial support"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Ripple UI Forms"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-check"},"children":[]}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-check"},"children":[]}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-check"},"children":[]}]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"svg","props":{"width":"12","height":"12"},"children":[{"type":"element","tag":"title","props":{},"children":[{"type":"text","value":"not supported"}]},{"type":"element","tag":"use","props":{"xLinkHref":"#icon-cancel"},"children":[]}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"using-in-an-sdp-website"},"children":[{"type":"text","value":"Using in an SDP website"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are using Ripple 2 to build a site on the SDP platform, the UI libraries will be included automatically when scaffolding your project."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For documentation on using Ripple with Nuxt in SDP sites, visit the "},{"type":"element","tag":"a","props":{"href":"/framework"},"children":[{"type":"text","value":"Ripple Framework documentation"}]}]}]},{"type":"element","tag":"h3","props":{"id":"github-packages"},"children":[{"type":"text","value":"Github Packages"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2 is hosted publicly on Github Packages (ghcr) under the "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"@dpc/sdp"}]},{"type":"text","value":" namespace, please read these "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/usage/access-to-github-packages"},"children":[{"type":"text","value":"setup instructions for accessing Github Packages"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"using-ripple-ui-components","depth":2,"text":"Using Ripple UI components","children":[{"id":"using-in-an-sdp-website","depth":3,"text":"Using in an SDP website"},{"id":"github-packages","depth":3,"text":"Github Packages"}]}]}},"_type":"markdown","_id":"content:design-system:3.develop:3.usage.md","_source":"content","_file":"design-system/3.develop/3.usage.md","_extension":"md"},{"_path":"/design-system/develop/usage/access-to-github-packages","_dir":"usage","_draft":false,"_partial":false,"_locale":"","title":"Access to Github Packages","description":"How to access and use repos hosted on Github Packages.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"NPM allows the use of multiple repo hosts, as long as they can be identified by namespace."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2 is hosted publicly on Github Packages (ghcr) under the "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"@dpc/sdp"}]},{"type":"text","value":" namespace, so a few steps need to be followed access these packages, while also co-existing with the npm ecosystem."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, create a Personal Access Token on Github:"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Visit "},{"type":"element","tag":"a","props":{"href":"https://github.com/settings/tokens","rel":["nofollow"]},"children":[{"type":"text","value":"https://github.com/settings/tokens"}]},{"type":"text","value":" and select "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Generate new token"}]},{"type":"text","value":" > "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Generate new token (classic)"}]}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Screenshot of a clicked button (title Generate new token) that has opened a drop-down menu with two options: fine-grained and classic","src":"/img/generate.jpg","style":"width:360px"},"children":[]},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Fill in the "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Note"}]},{"type":"text","value":" and choose an "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Expiration"}]},{"type":"text","value":" - the 30 day default is generally fine, you'll receive a reminder to regenerate the token just before expiry"}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Screenshot of personal access token setup form, with 'Note' filled in as 'public ghcr access' and 'Expiration' set to default of 30 days","src":"/img/token.jpg","style":"width:505px"},"children":[]},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Set the scope to only allow "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"read:packages"}]},{"type":"text","value":", and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Generate"}]},{"type":"text","value":" token"}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Screenshot of scope, with only read:packages selected","src":"/img/permissions.jpg","style":"width:827px"},"children":[]},{"type":"element","tag":"ol","props":{"start":4},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Store the resulting token somewhere secure, and add it to either a user "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":".npmrc"}]},{"type":"text","value":" (recommended) or the project-level "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":".npmrc"}]},{"type":"text","value":" (the url on line 2 below is protocol-less, not a comment):"}]}]},{"type":"element","tag":"pre","props":{"code":"@dpc-sdp:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=<github personal access token>\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"@dpc-sdp:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=<github personal access token>\n"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:design-system:3.develop:4.usage:1.access-to-github-packages.md","_source":"content","_file":"design-system/3.develop/4.usage/1.access-to-github-packages.md","_extension":"md"},{"_path":"/design-system/develop/usage/vue","_dir":"usage","_draft":false,"_partial":false,"_locale":"","title":"Vue","description":"How to use Ripple components with Vue.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, set up "},{"type":"element","tag":"a","props":{"href":"access-to-github-packages"},"children":[{"type":"text","value":"access to Github Packages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Next, install Ripple UI in your project:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"npm install @dpc-sdp/ripple-ui-core --save"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order for the styles to appear correctly, you will need to import them. Do this at the root of your project (usually in your app.vue or index.js file):"}]},{"type":"element","tag":"pre","props":{"className":"language-js shiki shiki-themes github-light","code":"import '@dpc-sdp/ripple-ui-core/style';\nimport '@dpc-sdp/ripple-ui-core/style/components';\n","language":"js","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '@dpc-sdp/ripple-ui-core/style'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":";\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '@dpc-sdp/ripple-ui-core/style/components'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":";\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use a component, import it from "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"@dpc-sdp/ripple-ui-core/vue"}]},{"type":"text","value":", note the addition of "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"/vue"}]},{"type":"text","value":"."}]},{"type":"element","tag":"pre","props":{"className":"language-js shiki shiki-themes github-light","code":"<script setup>\nimport { RplButton } from '@dpc-sdp/ripple-ui-core/vue';\n</script>\n\n<template>\n  <RplButton variant=\"outlined\" />\n</template>\n","language":"js","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" setup"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"import { RplButton } from '@dpc-sdp/ripple-ui-core/vue';\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":"RplButton"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" variant"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"outlined\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" />\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Please see this "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-vue-example","rel":["nofollow"]},"children":[{"type":"text","value":"example app"}]},{"type":"text","value":" for a basic demonstration of how to use Ripple components in a Vue app."}]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:design-system:3.develop:4.usage:2.vue.md","_source":"content","_file":"design-system/3.develop/4.usage/2.vue.md","_extension":"md"},{"_path":"/design-system/develop/usage/nuxt","_dir":"usage","_draft":false,"_partial":false,"_locale":"","title":"Nuxt","description":"How to use Ripple components with Nuxt in a non-SDP context.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, set up "},{"type":"element","tag":"a","props":{"href":"access-to-github-packages"},"children":[{"type":"text","value":"access to Github Packages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Next, install Ripple UI in your project:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"npm install @dpc-sdp/ripple-ui-core --save"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple UI exports a nuxt module that you can add to your nuxt config, note the addition of "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"/nuxt"}]},{"type":"text","value":":"}]},{"type":"element","tag":"pre","props":{"className":"language-js shiki shiki-themes github-light","code":"export default defineNuxtConfig({\n  modules: [\n    '@dpc-sdp/ripple-ui-core/nuxt'\n  ]\n})\n","language":"js","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" default"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  modules: [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"    '@dpc-sdp/ripple-ui-core/nuxt'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"})\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order for the styles to appear correctly, you will need to import them. Do this at the root of your project (usually in your app.vue file):"}]},{"type":"element","tag":"pre","props":{"className":"language-js shiki shiki-themes github-light","code":"import '@dpc-sdp/ripple-ui-core/style';\nimport '@dpc-sdp/ripple-ui-core/style/components';\n","language":"js","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '@dpc-sdp/ripple-ui-core/style'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":";\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '@dpc-sdp/ripple-ui-core/style/components'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":";\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There is no need to import the components as they will be registered globally by the nuxt module"}]},{"type":"element","tag":"pre","props":{"className":"language-js shiki shiki-themes github-light","code":"<template>\n  <RplButton variant=\"outlined\" />\n</template>\n","language":"js","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":"RplButton"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" variant"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"outlined\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" />\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Even if you are not using SDP, the "},{"type":"element","tag":"a","props":{"href":"/framework"},"children":[{"type":"text","value":"Ripple Framework documentation"}]},{"type":"text","value":" is a good starting point for any Nuxt development using Ripple."}]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:design-system:3.develop:4.usage:3.nuxt.md","_source":"content","_file":"design-system/3.develop/4.usage/3.nuxt.md","_extension":"md"},{"_path":"/design-system/develop/usage/webcomponents","_dir":"usage","_draft":false,"_partial":false,"_locale":"","title":"Web components","description":"How to use the web component exports with other front-end systems.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Web components are based on existing web standards. Features to support web components are currently being added to the HTML and DOM specs, letting web developers easily extend HTML with new elements with encapsulated styling and custom behavior.\n"},{"type":"element","tag":"a","props":{"href":"https://www.webcomponents.org/","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.webcomponents.org/"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple exports a limited set of components as standard browser native web components. The advantage of using Web components is they can be dropped straight into conventional webpages and any CMS without a javascript build pipeline, such as Squiz Matrix and Salesforce."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Support for this output target is currently experimental, if you think you have a use case for using Web components in your project please add a comment "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions/658","rel":["nofollow"]},"children":[{"type":"text","value":"here"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As with the other methods, set up "},{"type":"element","tag":"a","props":{"href":"access-to-github-packages"},"children":[{"type":"text","value":"access to Github Packages"}]},{"type":"text","value":" and then install Ripple UI in your project:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"npm install @dpc-sdp/ripple-ui-core --save"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A basic example of how to use the web component exports can be found under "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/tree/develop/examples/webcomponents","rel":["nofollow"]},"children":[{"type":"text","value":"examples/webcomponents"}]},{"type":"text","value":" in the ripple-framework monorepo."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:design-system:3.develop:4.usage:4.webcomponents.md","_source":"content","_file":"design-system/3.develop/4.usage/4.webcomponents.md","_extension":"md"},{"_path":"/design-system/develop/usage/css-only","_dir":"usage","_draft":false,"_partial":false,"_locale":"","title":"Styles only","description":"Using the design system styles without a front-end framework.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple UI core exports it's CSS stylesheets directly. If you have a use case where you can't use any of the other outputs, you can use our styles directly and provide your own markup based upon the rendered examples in Storybook."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First, set up "},{"type":"element","tag":"a","props":{"href":"access-to-github-packages"},"children":[{"type":"text","value":"access to Github Packages"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Next, install Ripple UI in your project:"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"npm install @dpc-sdp/ripple-ui-core --save"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can import CSS styles from the ripple-ui-core package."}]},{"type":"element","tag":"pre","props":{"className":"language-js shiki shiki-themes github-light","code":"import '@dpc-sdp/ripple-ui-core/style';\nimport '@dpc-sdp/ripple-ui-core/style/components';\n","language":"js","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '@dpc-sdp/ripple-ui-core/style'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":";\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '@dpc-sdp/ripple-ui-core/style/components'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":";\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We recommend that you lock the version of "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"@dpc-sdp/ripple-ui-core"}]},{"type":"text","value":" so that any future changes of styles without changes to markup do not break your application."}]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:design-system:3.develop:4.usage:5.css-only.md","_source":"content","_file":"design-system/3.develop/4.usage/5.css-only.md","_extension":"md"},{"_path":"/design-system/styles/colour","_dir":"styles","_draft":false,"_partial":false,"_locale":"","title":"Colour","description":"Colour plays an important role in creating a consistent and strong visual digital products and services.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You want users to recognise your brand. A well-designed colour palette can help you create a consistent look and feel."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default colours, made up of two blues, reflect vic.gov.au branding. This strengthens the association with the Victorian Government."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The design system contains a colour framework. You can change it if your site requires department or entity branding."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We've designed and tested colour pairings that already pass accessibility contrast ratios. However, we recommend you perform your own checks to ensure you're meeting WCAG requirements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you change your core brand colours, your styles and components will re-theme automatically using the design system's colour framework."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For more guidance on theming options, see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming/"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"You don’t need to use hex colours in code."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By using CSS variables, any branding or theming changes will automatically reflect in your product. See CSS variables below, or see the theming documentation."}]}]},{"type":"element","tag":"h2","props":{"id":"core-palette"},"children":[{"type":"text","value":"Core palette"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The core palette includes primary and secondary colours."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The ‘Primary’ colour is for key visual elements and components. They form the foundation of the colour palette."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The ‘Accent’ colour is an accent to help highlight key components or pieces of information. It's used in combination with the primary colour to create a more dynamic and engaging visual experience."}]}]},{"type":"element","tag":"h3","props":{"id":"primary"},"children":[{"type":"text","value":"Primary"}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.primary\"]"},"children":[]},{"type":"element","tag":"h3","props":{"id":"accent"},"children":[{"type":"text","value":"Accent"}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.accent\"]"},"children":[]},{"type":"element","tag":"h2","props":{"id":"neutral-palette"},"children":[{"type":"text","value":"Neutral palette"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Neutral palette is on a colour scale of white to black."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The 10 steps represent this scale based on our requirements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Neutral colours are consistent throughout the design system. They are for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"text colours"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"borders"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"other elements, like a neutral background."}]}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.neutral\"]"},"children":[]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.light\",\"clr.dark\"]"},"children":[]},{"type":"element","tag":"h2","props":{"id":"typography-colours"},"children":[{"type":"text","value":"Typography colours"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Type colours have a ratio of at least 4.5:1 (or 3:1 for text larger than 18 point). This was selected to try and conform to the Web Content Accessibility Guidelines (WCAG 2.1)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Interaction colours are in addition to the core colour palette. This guarantees accessible text."}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.type.default\",\"clr.type.light\",\"clr.type.primary.contrast\",\"clr.type.accent.contrast\"]"},"children":[]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.link\",\"clr.link-visited\",\"clr.focus\"]"},"children":[]},{"type":"element","tag":"h2","props":{"id":"gradients"},"children":[{"type":"text","value":"Gradients"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Gradients bring attention to components or information. Only use them on occasion."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All gradients should appear from dark to light in their usage."}]},{"type":"element","tag":"docs-gradient-table","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"sematics"},"children":[{"type":"text","value":"Sematics"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Semantic colours add meaning to element. They provide contextual or transactional feedback to the user. We have four semantic uses:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Success"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Warning"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using them outside of their semantic meaning."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"These colours help signal to users the meaning of some components. For example, for alerts or error messages."}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.information\",\"clr.success\",\"clr.warning\",\"clr.error\"]"},"children":[]},{"type":"element","tag":"h2","props":{"id":"focus"},"children":[{"type":"text","value":"Focus"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/design-system/styles/focus-state/"},"children":[{"type":"text","value":"focus state"}]},{"type":"text","value":" for guidance."}]},{"type":"element","tag":"docs-colour-table","props":{":colours":"[\"clr.focus\"]"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see theming guidance for designers or developers."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"core-palette","depth":2,"text":"Core palette","children":[{"id":"primary","depth":3,"text":"Primary"},{"id":"accent","depth":3,"text":"Accent"}]},{"id":"neutral-palette","depth":2,"text":"Neutral palette"},{"id":"typography-colours","depth":2,"text":"Typography colours"},{"id":"gradients","depth":2,"text":"Gradients"},{"id":"sematics","depth":2,"text":"Sematics"},{"id":"focus","depth":2,"text":"Focus"},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:4.styles:colour.md","_source":"content","_file":"design-system/4.styles/colour.md","_extension":"md"},{"_path":"/design-system/styles/focus-state","_dir":"styles","_draft":false,"_partial":false,"_locale":"","title":"Focus state","description":"Focus states show when a user has highlighted an element, using an input method such as a keyboard or voice.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some users use keyboards or other devices to navigate through a page by jumping from one interactive element to the next. Focus states help users understand which element is currently selected and ready for interaction."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Focus states are orange and neutral-800, aiming to conform to the WCAG 2.1 Level AA "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html","rel":["nofollow"]},"children":[{"type":"text","value":"non-text contrast"}]},{"type":"text","value":" on any background colour."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We have chosen this orange colour as it is a direct opposite of our primary colour. This allows all colourblind users to see a visual difference. Focus state styling also removes any border radius to create a bigger visual difference to surrounding elements."}]},{"type":"element","tag":"h3","props":{"id":"inline-style"},"children":[{"type":"text","value":"Inline style"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The inline focus state helps links stand out from the rest of the content on a page. When a link receives focus, it will underline and change background colour. Other components and elements that look like links use the inline style."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"An example of focus state colour contrast","src":"/assets/img/focus-inline-focus.png"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":".rpl-u-focusable-inline"}]}]},{"type":"element","tag":"h3","props":{"id":"block-style"},"children":[{"type":"text","value":"Block style"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The block style completely highlights a section or whole component with the focus state. For example, when a button receives focus, a border is added to the bottom of the container and the background colour will change."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Focus Link Visual Block Sample","src":"/assets/img/focus-block-focus.png"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":".rpl-u-focusable-block"}]}]},{"type":"element","tag":"h3","props":{"id":"outline-focus-state-style"},"children":[{"type":"text","value":"Outline focus state style"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The outline styles are for when form inputs are focused. When a form field receives focus, it adds a border. If the element already has a border, the border gets thicker."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Focus Link Visual Outline Focus Sample","src":"/assets/img/focus-outline-focus.png"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":".rpl-u-focusable-outline"}]}]},{"type":"element","tag":"h3","props":{"id":"modified-focus-states-for-components"},"children":[{"type":"text","value":"Modified focus states for components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The alert component has a modified focus state colour. This is consistent across all alert variants. It meets colour contrast requirements on all semantic colours, including danger and warning."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The modified styling uses a white background in place of the orange, still with the dark content and border."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Component Modified Focus State Sample","src":"/assets/img/focus-alert-focus.png"},"children":[]},{"type":"element","tag":"h3","props":{"id":"css-variables"},"children":[{"type":"text","value":"CSS Variables"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The focus state has three CSS Variables."}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Swatch"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Element"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Value"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"CSS Variable"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"swatch","props":{"colour":"#FF9E1B"},"children":[]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Background Fill"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"#FF9E1B"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-focus"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"swatch","props":{"colour":"#1A1A1A"},"children":[]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Content / Text / Icons"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"#1A1A1A"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-focus-contrast"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"element","tag":"swatch","props":{"colour":"#1A1A1A"},"children":[]}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Bottom Border"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"#1A1A1A"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-clr-dark"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For advice on focus state theming, see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers/"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming/"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"inline-style","depth":3,"text":"Inline style"},{"id":"block-style","depth":3,"text":"Block style"},{"id":"outline-focus-state-style","depth":3,"text":"Outline focus state style"},{"id":"modified-focus-states-for-components","depth":3,"text":"Modified focus states for components"},{"id":"css-variables","depth":3,"text":"CSS Variables"},{"id":"theming","depth":3,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:4.styles:focus-state.md","_source":"content","_file":"design-system/4.styles/focus-state.md","_extension":"md"},{"_path":"/design-system/styles/grid","_dir":"styles","_draft":false,"_partial":false,"_locale":"","title":"Grid","description":"With up to 12 columns, you can build grids with responsive layouts across different breakpoints.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Grids are a crucial component of any design system. They provide a framework for arranging content in an appealing and structured manner."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We've designed the grid for a high degree of flexibility and responsiveness."}]},{"type":"element","tag":"h2","props":{"id":"breakpoints"},"children":[{"type":"text","value":"Breakpoints"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple has 5 breakpoints. These ensure content is at an optimal layout for readability and accessibility."}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Breakpoint"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Width"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Active content area"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"XS"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"<575px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"288 – 543px"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"S"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"576 – 767px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"544 – 735px"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"M"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"768 – 991px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"736 – 927px"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"L"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"992 – 1199px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"864 – 1071px"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"XL"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"1200px +"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"1040px"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"grids"},"children":[{"type":"text","value":"Grids"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The grid is made up of three elements: columns, gutters, and margins."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Visual of basic grid / column / gutter / margin anatomy","src":"/assets/img/Grid-Grid-Anatomy.png"},"children":[]}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Breakpoint"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Margins"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Gutter"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Column type / width"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"XS  • <575px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Fluid"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"S   • 576 – 767px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Fluid"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"M   • 768 – 991px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"32px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Fluid"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"L   • 992 – 1199px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"64px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Fluid"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"XL  • 1200px +"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"80px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"28px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Fixed / 61px"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the grid system to structure your content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Most vic.gov.au pages follow a ‘two-thirds and one-third’ layout. But, the grid system allows for more combinations if needed."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Your main content should always be in a two-thirds column. This is even if you’re not using a corresponding one-third column for secondary content."}]},{"type":"element","tag":"h3","props":{"id":"column-layouts"},"children":[{"type":"text","value":"Column layouts"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Column Span"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Layout"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Breakpoint"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"12"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Full"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"XS • S • M • L • XL"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"6"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Half"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"XS • S • M • L • XL"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"7"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Two thirds"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"M • L • XL"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"One third"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"M • L • XL"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"3"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"One quarter"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"L • XL"}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"breakpoints","depth":2,"text":"Breakpoints"},{"id":"grids","depth":2,"text":"Grids"},{"id":"usage","depth":2,"text":"Usage","children":[{"id":"column-layouts","depth":3,"text":"Column layouts"}]}]}},"_type":"markdown","_id":"content:design-system:4.styles:grid.md","_source":"content","_file":"design-system/4.styles/grid.md","_extension":"md"},{"_path":"/design-system/styles/icons","_dir":"styles","_draft":false,"_partial":false,"_locale":"","title":"Icons","description":"Use icons to illustrate actions and interactions, communicate statuses, and draw attention to important information.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Icons are a visual representation of an action, idea, or object. They provide a quick and easy way to communicate information. They can also enhance the usability of a design."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the Ripple Design System's icon set for a consistent user experience and a cohesive look and feel."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can add icons to components or pair them with text. Icons should have a clear relationship with their corresponding text or action. This keeps them accessible to users with visual impairments or disabilities."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using icons alone, as one user may interpret them differently to another."}]},{"type":"element","tag":"h2","props":{"id":"icon-library"},"children":[{"type":"text","value":"Icon Library"}]},{"type":"element","tag":"h4","props":{"id":"alerts"},"children":[{"type":"text","value":"Alerts"}]},{"type":"element","tag":"docs-icon-table","props":{"group":"alert"},"children":[]},{"type":"element","tag":"h4","props":{"id":"social"},"children":[{"type":"text","value":"Social"}]},{"type":"element","tag":"docs-icon-table","props":{"group":"social"},"children":[]},{"type":"element","tag":"h4","props":{"id":"standard"},"children":[{"type":"text","value":"Standard"}]},{"type":"element","tag":"docs-icon-table","props":{"group":"standard"},"children":[]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Accessibility tip"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you're using an icon by itself, ensure it's using the right label for screen readers."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you're using an icon and text, ensure only the text gets read out."}]}]},{"type":"element","tag":"h2","props":{"id":"application"},"children":[{"type":"text","value":"Application"}]},{"type":"element","tag":"h3","props":{"id":"sizing"},"children":[{"type":"text","value":"Sizing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple Design System displays icons at four sizes (12px, 16px, 24px, 32px) depending on their type, use and screen size."}]},{"type":"element","tag":"docs-icon-sizing-table","props":{":sizes":"[{\"xs\":\"12px\"},{\"s\":\"16px\"},{\"m\":\"24px\"},{\"l\":\"32px\"}]"},"children":[]},{"type":"element","tag":"h3","props":{"id":"spacing"},"children":[{"type":"text","value":"Spacing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ensure you use the right amount of space around an icon to allow for legibility. At the least, icons must have clear space of 50% of the height/width of the icon."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Visual of min space","src":"/assets/img/Icon-Clear-space.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"accessibility"},"children":[{"type":"text","value":"Accessibility"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For accessibility, ensure you:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"wrap icons within their interactive component"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"specify if an icon is decorative and informative by assigning the property in code"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"use descriptive and meaningful titles for informative icons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"use icons to represent the same action or idea."}]}]},{"type":"element","tag":"h2","props":{"id":"styling"},"children":[{"type":"text","value":"Styling"}]},{"type":"element","tag":"h3","props":{"id":"colour"},"children":[{"type":"text","value":"Colour"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If a background changes the colour of the text (for example, a button) the icon should take on the same colour as the text."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-elevated"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Icons used to represent a state should use the correct colour. For example, an icon used in a success notification should use rpl-clr-success."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-form-alert--success"},"children":[]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"icon-library","depth":2,"text":"Icon Library"},{"id":"application","depth":2,"text":"Application","children":[{"id":"sizing","depth":3,"text":"Sizing"},{"id":"spacing","depth":3,"text":"Spacing"}]},{"id":"accessibility","depth":2,"text":"Accessibility"},{"id":"styling","depth":2,"text":"Styling","children":[{"id":"colour","depth":3,"text":"Colour"}]}]}},"_type":"markdown","_id":"content:design-system:4.styles:icons.md","_source":"content","_file":"design-system/4.styles/icons.md","_extension":"md"},{"_path":"/design-system/styles/layer-styles","_dir":"styles","_draft":false,"_partial":false,"_locale":"","title":"Layer styles","description":null,"layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"border"},"children":[{"type":"text","value":"Border"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Borders create separation between elements and aid hierarchy and navigation. They are a solid border on one or more sides of an object or container."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Depending on where a border is being used, it can appear in 4 different thicknesses, 1px, 2px, 4px or 8px."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use a border to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"separate or segment blocks or sections of content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"highlight important elements such as featured content or a call to action"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"aid information hierarchy"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"support navigational structure"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"highlight an active navigation item."}]}]},{"type":"element","tag":"docs-layer-style-table","props":{"type":"border"},"children":[]},{"type":"element","tag":"h3","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Find examples of borders that add visual consistency on the "},{"type":"element","tag":"a","props":{"href":"/design-system/components/in-page-navigation/"},"children":[{"type":"text","value":"in-page navigation"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"/design-system/components/card/"},"children":[{"type":"text","value":"cards"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"/design-system/components/contact-us/"},"children":[{"type":"text","value":"contact us"}]},{"type":"text","value":" pages."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Borders can also segment content (like on banners)."}]},{"type":"element","tag":"docs-example","props":{":hideCode":"true","id":"core-navigation-in-page-navigation--in-page-navigation"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"border-radius"},"children":[{"type":"text","value":"Border Radius"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Border radius allows you to add rounded corners to elements such as a button or container. Border radius can create a more user-friendly and approachable look and feel."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We've defined a set of radius values for use."}]},{"type":"element","tag":"docs-layer-style-table","props":{"type":"border.radius"},"children":[]},{"type":"element","tag":"h3","props":{"id":"usage-1"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Border radius is on containers such as buttons, cards and form inputs."}]},{"type":"element","tag":"docs-example","props":{":hideCode":"true","id":"core-navigation-button--default-filled"},"children":[]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When a container has a defined border radius, but is in focus, discard the border radius."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A 0px value is applied for consistency and clarity."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"elevation"},"children":[{"type":"text","value":"Elevation"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Elevation adds depth to components."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer."}]},{"type":"element","tag":"docs-layer-style-table","props":{"type":"elevation"},"children":[]},{"type":"element","tag":"h3","props":{"id":"usage-2"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Elevation is on components such as cards, button (elevated variant only) and breadcrumbs."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Elevation helps components to stand out. You can use them to flag interactivity, such as when a user hovers over a card or when a modal is open."}]},{"type":"element","tag":"docs-example","props":{":hideCode":"true","id":"core-navigation-breadcrumbs--default-story"},"children":[]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"border","depth":2,"text":"Border","children":[{"id":"usage","depth":3,"text":"Usage"}]},{"id":"border-radius","depth":2,"text":"Border Radius","children":[{"id":"usage-1","depth":3,"text":"Usage"}]},{"id":"elevation","depth":2,"text":"Elevation","children":[{"id":"usage-2","depth":3,"text":"Usage"}]}]}},"_type":"markdown","_id":"content:design-system:4.styles:layer-styles.md","_source":"content","_file":"design-system/4.styles/layer-styles.md","_extension":"md"},{"_path":"/design-system/styles/layout","_dir":"styles","_draft":false,"_partial":false,"_locale":"","title":"Layout","description":"Layouts are common page composition patterns that offer ways of structuring components and content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always design for small screens first."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For most types of pages, use either a ‘two-thirds’ or a ‘two-thirds and one-third’ layout. Doing this reduces long lines of text that can make a page hard to read on desktop devices. This approach should limit lines of text to 75 characters."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should never assume what devices people are using. This is why you should design for different screen sizes instead of specific devices."}]},{"type":"element","tag":"h2","props":{"id":"page-layouts"},"children":[{"type":"text","value":"Page layouts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are 2 standard page layouts:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Full width."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Two column - right side."}]}]},{"type":"element","tag":"h3","props":{"id":"full-width"},"children":[{"type":"text","value":"Full width"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Displays the main content area the full width of the container."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Sample visual of full width layout","src":"/assets/img/layout-full-width.png"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"two-column"},"children":[{"type":"text","value":"Two column"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Displays a right hand sidebar that stacks on <991px breakpoints. The main content area is always visible."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Sample visual of two column layout","src":"/assets/img/layout-two-column.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"white-space"},"children":[{"type":"text","value":"White Space"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use adequate white space in the layout to separate elements and create a sense of hierarchy. This helps to make elements on the page easier to distinguish and understand, and creates visual harmony."}]},{"type":"element","tag":"h3","props":{"id":"page-section-spacing"},"children":[{"type":"text","value":"Page Section Spacing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Spacing is used between the ‘above’, ‘body’ and ‘below’ content sections."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For both XS and S breakpoints, section spacing is added between the body section and sidebar section when in use."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Sample visual of page section layout spacing","src":"/assets/img/layout-page-spacing.png"},"children":[]}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Breakpoint"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Value"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"CSS Variable"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"XS • <576px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"32px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-8"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"S • 576-767px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"32px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-8"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"M • 768-991px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"48px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-10"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"L • 992-1199px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"64px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-12"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"XL • 1200px+"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"80px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-13"}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"content-layout-spacing"},"children":[{"type":"text","value":"Content Layout Spacing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We define spacing between components and elements at a breakpoint level. This compliments the grid and applied layout."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Sample visual of content layout spacing","src":"/assets/img/layout-content-spacing.png"},"children":[]}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Breakpoint"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Value"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"CSS Variable"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Sidebar Value"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Sidebar CSS Variable"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"XS • <576px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-4"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-6"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"S • 576-767px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-4"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-6"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"M • 768-991px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-6"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-6"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"L • 992-1199px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"32px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-8"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"32px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-8"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"XL • 1200px+"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"40px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-9"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"40px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-9"}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"page-layouts","depth":2,"text":"Page layouts","children":[{"id":"full-width","depth":3,"text":"Full width"},{"id":"two-column","depth":3,"text":"Two column"}]},{"id":"white-space","depth":2,"text":"White Space","children":[{"id":"page-section-spacing","depth":3,"text":"Page Section Spacing"},{"id":"content-layout-spacing","depth":3,"text":"Content Layout Spacing"}]}]}},"_type":"markdown","_id":"content:design-system:4.styles:layout.md","_source":"content","_file":"design-system/4.styles/layout.md","_extension":"md"},{"_path":"/design-system/styles/logo","_dir":"styles","_draft":false,"_partial":false,"_locale":"","title":"Logo","description":"The visual representation of vic.gov.au and the Victorian Government.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"vicgovau-logo"},"children":[{"type":"text","value":"vic.gov.au logo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The vic.gov.au logo is the primary logo used in the design system."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"vic.gov.au logo","src":"/assets/img/Logo-vicgov.png"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/brand-victoria-using-our-logos","rel":["nofollow"]},"children":[{"type":"text","value":"Download logo"}]}]}]},{"type":"element","tag":"h3","props":{"id":"clear-space"},"children":[{"type":"text","value":"Clear space"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The clear space for the vic.gov.au logo is 100% of the height of the ‘V’ across all applications."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Clear space visual","src":"/assets/img/Logo-vicgov-Clear-Space.png"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"co-branding"},"children":[{"type":"text","value":"Co-branding"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Where the vic.gov.au logo appears next to another logo, it should be:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"centred vertically"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"separated by a minimum distance of 16px"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"separated by a divider line."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Co-branded visual","src":"/assets/img/Logo-vicgov-cobrand.png"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"sizing"},"children":[{"type":"text","value":"Sizing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The vic.gov.au logo should be 16px in height on all screens."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"No modification"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't change the logo. This includes changing its colour, adding effects, or altering its shape."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This helps to maintain the integrity and consistency of the logo."}]}]},{"type":"element","tag":"h3","props":{"id":"accessibility"},"children":[{"type":"text","value":"Accessibility"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always add alternative text to the logo. This is for screen reader users."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"victoria-state-government-logo"},"children":[{"type":"text","value":"Victoria State Government logo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Victorian State Government logo is the secondary logo used in the design system. It’s used in the footer."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Victoria State Government logo","src":"/assets/img/Logo-StateGov.png"},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/brand-victoria-using-our-logos","rel":["nofollow"]},"children":[{"type":"text","value":"Download logo"}]}]}]},{"type":"element","tag":"h3","props":{"id":"clear-space-1"},"children":[{"type":"text","value":"Clear space"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The clear space for the Victorian State Government logo is at least 20% the height."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Clear space visual","src":"/assets/img/Logo-StateGovClearSpace.png"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"co-branding-1"},"children":[{"type":"text","value":"Co-branding"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Where the Victorian State Government logo appears next to another logo, it should be:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"centred vertically"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"separated by a distance of at least 50% the height of the Victorian State Government logo."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Co-branded visual","src":"/assets/img/Logo-StateGov-cobrand.png"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"sizing-1"},"children":[{"type":"text","value":"Sizing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Victorian State Government logo should be 42px in height on all screens."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the Victorian State Government logo where size permits. But, at times, we need to use a smaller logo depending on the application:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"VIC only logo (favicons only)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We've designed these logos to ensure accessibility and clarity at all sizes."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"co-branding-logo"},"children":[{"type":"text","value":"Co-branding logo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/design-system/components/primary-navigation/"},"children":[{"type":"text","value":"primary navigation"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"/design-system/components/footer/"},"children":[{"type":"text","value":"footer"}]},{"type":"text","value":" for size requirements."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"vicgovau-logo","depth":2,"text":"vic.gov.au logo","children":[{"id":"clear-space","depth":3,"text":"Clear space"},{"id":"co-branding","depth":3,"text":"Co-branding"},{"id":"sizing","depth":3,"text":"Sizing"},{"id":"accessibility","depth":3,"text":"Accessibility"}]},{"id":"victoria-state-government-logo","depth":2,"text":"Victoria State Government logo","children":[{"id":"clear-space-1","depth":3,"text":"Clear space"},{"id":"co-branding-1","depth":3,"text":"Co-branding"},{"id":"sizing-1","depth":3,"text":"Sizing"}]},{"id":"co-branding-logo","depth":2,"text":"Co-branding logo"}]}},"_type":"markdown","_id":"content:design-system:4.styles:logo.md","_source":"content","_file":"design-system/4.styles/logo.md","_extension":"md"},{"_path":"/design-system/styles/motion","_dir":"styles","_draft":false,"_partial":false,"_locale":"","title":"Motion","description":"Motion gradually changes an element from one state to another. It can also indicate an interaction.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use motion with a purpose in mind. This could be to draw attention to important elements or to provide feedback to users."}]},{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each animation needs at least these four parts:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Trigger — what causes the animation to happen (gestures, time, etc.)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Duration — how long should the transition take."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Easing — how an element transitions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Property — the characteristic of the element transitioning (position, opacity, scale, etc.)."}]}]},{"type":"element","tag":"h2","props":{"id":"duration-speed"},"children":[{"type":"text","value":"Duration (speed)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The duration of motion should be consistent throughout. Use:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"shorter durations for more subtle motions"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"longer durations for more significant or complex motions."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A general rule of thumb is:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"0.06-0.2s for simple interface movements"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"up to 0.5s for more complex or larger movements."}]}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Time"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Value"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"CSS Variable"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"60 milliseconds"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"60ms"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-motion-speed-1"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"80 milliseconds"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"80ms"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-motion-speed-2"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"120 milliseconds"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"120ms"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-motion-speed-3"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"160 milliseconds"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"160ms"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-motion-speed-4"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"200 milliseconds"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"200ms"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-motion-speed-5"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"240 milliseconds"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"240ms"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-motion-speed-6"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"300 milliseconds"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"300ms"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-motion-speed-7"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"360 milliseconds"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"360ms"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-motion-speed-8"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"420 milliseconds"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"420ms"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-motion-speed-9"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"500 milliseconds"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"500ms"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-motion-speed-10"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"easing"},"children":[{"type":"text","value":"Easing"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Easing is the rate the motion accelerates or decelerates. It can range from linear to highly exaggerated. The chosen easing should match the desired tone and feeling of the motion."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Currently, Ripple uses default easing values. We use the default names for this reason to reduce clutter in the code."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Definitions:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ease-in: slow at the beginning, fast/abrupt at the end."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ease-out: fast/abrupt at the beginning, slow at the end."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When to use:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ease-in: when things are moving "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"out."}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ease-out: when things are moving "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"in."}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage"},{"id":"duration-speed","depth":2,"text":"Duration (speed)"},{"id":"easing","depth":2,"text":"Easing"}]}},"_type":"markdown","_id":"content:design-system:4.styles:motion.md","_source":"content","_file":"design-system/4.styles/motion.md","_extension":"md"},{"_path":"/design-system/styles/spacing","_dir":"styles","_draft":false,"_partial":false,"_locale":"","title":"Spacing","description":"In components and layout, a defined set of spacing units provides good alignment and consistent spacing relationships.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We use a spacing system in a 4-pixel grid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It helps to create a visual hierarchy and organises page content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The 4px framework creates consistent spacing relationships and alignment across breakpoints. This is crucial for good UI design."}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Size"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"CSS Variable"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"4px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-1"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"8px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-2"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"12px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-3"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"16px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-4"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"20px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-5"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"24px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-6"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"28px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-7"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"32px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-8"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"40px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-9"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"48px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-10"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"56px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-11"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"64px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-12"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"80px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-13"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"120px"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-14"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Spacing should be proportional to the size and importance of the elements on the page. For example, larger elements may need more space to balance their visual weight."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Consider spacing in responsive design to ensure that the spacing remains consistent and proportionate on different screen sizes and devices."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For page level, component and content spacing see "},{"type":"element","tag":"a","props":{"href":"/design-system/styles/layout/"},"children":[{"type":"text","value":"layout"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:design-system:4.styles:spacing.md","_source":"content","_file":"design-system/4.styles/spacing.md","_extension":"md"},{"_path":"/design-system/styles/typography","_dir":"styles","_draft":false,"_partial":false,"_locale":"","title":"Typography","description":"Type styles are used to present content clearly.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"font"},"children":[{"type":"text","value":"Font"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"'VIC' is the brand font to be used across all Victorian Government communications. This creates a distinct but consistent look and feel."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It is free to download from "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/brand-victoria-fonts","rel":["nofollow"]},"children":[{"type":"text","value":"vic.gov.au"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use VIC font. The Ripple Design System only uses ‘Regular’ and ‘Bold’ weights of VIC font."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As VIC is a custom font, it's recommended to use Web Safe Font as a fallback when declaring your font stack. The preferred fallback font for the Ripple Design System is Arial."}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Font Family"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Value"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"CSS Variable"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"VIC"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"VIC, Arial, Helvetica, sans-serif"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-type-font-family"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"type-styles"},"children":[{"type":"text","value":"Type Styles"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In the Ripple Design System there are two type sets, one for fixed use and one for fluid (responsive) use:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The fixed type set uses fixed sizes. This means they use the <991 fluid styles, but do not respond."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The fluid type set has two fixed sizes. These both respond at certain breakpoints for larger or smaller styles."}]}]},{"type":"element","tag":"h3","props":{"id":"headings"},"children":[{"type":"text","value":"Headings"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Headings have both fluid and fixed sets. Headings are bold by default for emphasis and to create contrast."}]},{"type":"element","tag":"h4","props":{"id":"fluid"},"children":[{"type":"text","value":"Fluid"}]},{"type":"element","tag":"docs-type-class-table","props":{":type":"[{\"style\":[\"Heading 1\",{\"values\":[{\"Font size\":\"32px / 56px\"},{\"Line height\":\"36px / 60px\"},{\"Letter spacing\":\"1.4% / 0.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1\"]},{\"style\":[\"Heading 1 Highlight\",{\"values\":[{\"Font size\":\"32px / 56px\"},{\"Line height\":\"36px / 60px\"},{\"Letter spacing\":\"1.4% / 0.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1-highlight\"]},{\"style\":[\"Heading 2\",{\"values\":[{\"Font size\":\"24px / 32px\"},{\"Line height\":\"32px / 40px\"},{\"Letter spacing\":\"1.6% / 1.4%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h2\"]},{\"style\":[\"Heading 3\",{\"values\":[{\"Font size\":\"20px / 24px\"},{\"Line height\":\"28px / 32px\"},{\"Letter spacing\":\"1.8% / 1.6%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h3\"]},{\"style\":[\"Heading 3 Highlight\",{\"values\":[{\"Font size\":\"20px / 24px\"},{\"Line height\":\"28px / 32px\"},{\"Letter spacing\":\"1.8% / 1.6%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h3-highlight\"]},{\"style\":[\"Heading 4\",{\"values\":[{\"Font size\":\"16px / 20px\"},{\"Line height\":\"24px / 28px\"},{\"Letter spacing\":\"1.92% / 1.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h4\"]}]"},"children":[]},{"type":"element","tag":"h4","props":{"id":"fixed"},"children":[{"type":"text","value":"Fixed"}]},{"type":"element","tag":"docs-type-class-table","props":{":type":"[{\"style\":[\"Heading 1 Fixed\",{\"values\":[{\"Font size\":\"32px\"},{\"Line height\":\"36px\"},{\"Letter spacing\":\"1.4%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1-fixed\"]},{\"style\":[\"Heading 1 Highlight Fixed\",{\"values\":[{\"Font size\":\"32px\"},{\"Line height\":\"44px\"},{\"Letter spacing\":\"1.4%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1-highlight-fixed\"]},{\"style\":[\"Heading 2 Fixed\",{\"values\":[{\"Font size\":\"24px\"},{\"Line height\":\"32px\"},{\"Letter spacing\":\"1.6%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h2-fixed\"]},{\"style\":[\"Heading 3 Fixed\",{\"values\":[{\"Font size\":\"20px\"},{\"Line height\":\"28px\"},{\"Letter spacing\":\"1.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h3-fixed\"]},{\"style\":[\"Heading 3 Highlight Fixed\",{\"values\":[{\"Font size\":\"20px\"},{\"Line height\":\"28px\"},{\"Letter spacing\":\"1.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h3-highlight-fixed\"]},{\"style\":[\"Heading 4 Fixed\",{\"values\":[{\"Font size\":\"16px\"},{\"Line height\":\"24px\"},{\"Letter spacing\":\"1.92%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h4-fixed\"]}]"},"children":[]},{"type":"element","tag":"h3","props":{"id":"paragraph"},"children":[{"type":"text","value":"Paragraph"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default paragraph font size is 16px on all screens."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The majority of your body copy should use the standard 16px paragraph size."}]},{"type":"element","tag":"docs-type-class-table","props":{":type":"[{\"style\":[\"Paragraph Large\",{\"values\":[{\"Font size\":\"20px / 24px\"},{\"Line height\":\"28px / 32px\"},{\"Letter Spacing\":\"1.8% / 1.6%\"}]},\"rpl-type-p-large\"]},{\"style\":[\"Paragraph Large Fixed\",{\"values\":[{\"Font size\":\"20px\"},{\"Line height\":\"28px\"},{\"Letter Spacing\":\"1.8%\"}]},\"rpl-type-p-large-fixed\"]},{\"style\":[\"Paragraph Large Highlight\",{\"values\":[{\"Font size\":\"20px / 24px\"},{\"Line height\":\"28px / 32px\"},{\"Letter Spacing\":\"1.8% / 1.6%\"}]},\"rpl-type-p-large-highlight\"]},{\"style\":[\"Paragraph\",{\"values\":[{\"Font size\":\"16px\"},{\"Line height\":\"24px\"},{\"Letter spacing\":\"1.92%\"}]},\"rpl-type-p\"]},{\"style\":[\"Paragraph Small\",{\"values\":[{\"Font size\":\"14px\"},{\"Line height\":\"20px\"},{\"Letter spacing\":\"1.92%\"}]},\"rpl-type-p-small\"]}]"},"children":[]},{"type":"element","tag":"h3","props":{"id":"lists"},"children":[{"type":"text","value":"Lists"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use lists to make blocks of text easier to read, and to break information into manageable chunks."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"List styles are based on rpl-type-p with extra spacing."}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Margin Top"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Paragraph Spacing"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Item Spacing"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Indent Amount"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-4"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-2"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-2"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"rpl-sp-9"}]}]}]}]},{"type":"element","tag":"h4","props":{"id":"unordered-lists"},"children":[{"type":"text","value":"Unordered Lists"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Introduce bulleted lists with a lead-in line ending in a colon. Start each item with a lowercase letter, and do not use a full stop at the end."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Unordered lists allow for two nested levels which are styled as:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"level 1 - bullet"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"level 2 - dash"}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"An example of an unordered list","src":"/assets/img/unordered-list.png"},"children":[]},{"type":"element","tag":"h4","props":{"id":"ordered-lists"},"children":[{"type":"text","value":"Ordered Lists"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use numbered lists instead of bulleted lists when the order of the items is relevant."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You do not need to use a lead-in line for numbered lists. Items in a numbered list should end in a full stop because each should be a complete sentence."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ordered lists allow for three nested levels which are styled as"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"level 1 - numbers"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"level 2 - alphabet"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"level 3 - roman numerals."}]}]},{"type":"element","tag":"docs-image-example","props":{"alt":"An example of an ordered list","src":"/assets/img/ordered-list.png"},"children":[]},{"type":"element","tag":"h3","props":{"id":"text-alignment"},"children":[{"type":"text","value":"Text Alignment"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You should usually left-align body copy that’s read left to right. Right-aligned body copy can be hard for users to find and read when they magnify their screen."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Do not ‘justify’ blocks of body copy so that they’re aligned to both the left and right margins. Doing this creates wider spaces between words, which can make the text hard to read."}]},{"type":"element","tag":"h3","props":{"id":"font-weight"},"children":[{"type":"text","value":"Font weight"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use bold to emphasise particular words in a transaction. Use it to highlight critical information that users need to refer to or you’ve seen them miss."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Try to avoid bold. Overuse will make it difficult for users to know which parts of your content they need to pay the most attention to."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"Acomparison between regular text and bold text","src":"/assets/img/font-weight.png"},"children":[]},{"type":"element","tag":"h3","props":{"id":"links"},"children":[{"type":"text","value":"Links"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Links are blue and underlined by default. If your link is at the end of a sentence or paragraph, make sure that the linked text does not include the full stop."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"A visual example of a link within regular text","src":"/assets/img/link.png"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"list-of-variables"},"children":[{"type":"text","value":"List of variables"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All values are stored as variables nested in the type variable."}]},{"type":"element","tag":"h3","props":{"id":"type-size"},"children":[{"type":"text","value":"Type size"}]},{"type":"element","tag":"docs-type-table","props":{"type":"size"},"children":[]},{"type":"element","tag":"h3","props":{"id":"line-height"},"children":[{"type":"text","value":"Line Height"}]},{"type":"element","tag":"docs-type-table","props":{"type":"lh"},"children":[]},{"type":"element","tag":"h3","props":{"id":"letter-spacing"},"children":[{"type":"text","value":"Letter Spacing"}]},{"type":"element","tag":"docs-type-table","props":{"type":"ls"},"children":[]},{"type":"element","tag":"h3","props":{"id":"font-weights"},"children":[{"type":"text","value":"Font Weights"}]},{"type":"element","tag":"docs-type-table","props":{"type":"weight"},"children":[]},{"type":"element","tag":"h3","props":{"id":"list-styling"},"children":[{"type":"text","value":"List Styling"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Style"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Level 1"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Level 2"}]},{"type":"element","tag":"th","props":{},"children":[{"type":"text","value":"Level 3"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Unordered list"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"• (filled circle)"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"- (dash)"}]},{"type":"element","tag":"td","props":{},"children":[]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"Ordered List"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"1. (numbers)"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"a. (letters)"}]},{"type":"element","tag":"td","props":{},"children":[{"type":"text","value":"i. (roman numerals)"}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"font","depth":2,"text":"Font"},{"id":"type-styles","depth":2,"text":"Type Styles","children":[{"id":"headings","depth":3,"text":"Headings"},{"id":"paragraph","depth":3,"text":"Paragraph"},{"id":"lists","depth":3,"text":"Lists"},{"id":"text-alignment","depth":3,"text":"Text Alignment"},{"id":"font-weight","depth":3,"text":"Font weight"},{"id":"links","depth":3,"text":"Links"}]},{"id":"list-of-variables","depth":2,"text":"List of variables","children":[{"id":"type-size","depth":3,"text":"Type size"},{"id":"line-height","depth":3,"text":"Line Height"},{"id":"letter-spacing","depth":3,"text":"Letter Spacing"},{"id":"font-weights","depth":3,"text":"Font Weights"},{"id":"list-styling","depth":3,"text":"List Styling"}]}]}},"_type":"markdown","_id":"content:design-system:4.styles:typography.md","_source":"content","_file":"design-system/4.styles/typography.md","_extension":"md"},{"_path":"/design-system/components/accordion","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Accordion","description":"The Accordion component is a panel designed to save space by hiding and revealing content as required.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use accordions only if it will benefit the user. You should have evidence of this."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using accordions will allow users to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"view related sections of content quickly"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"choose which content isn’t relevant to them by showing or hiding sections."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always test accordions with users first. Depending on what the user needs, hiding content could present problems."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-accordion--accordion"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Fill the entire width of the content area."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Embed into the body content area of any landing page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the 'numbered' variant when a sequential order is important."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include links and format text in accordions, as required."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use to conceal content that may only apply to specific users who can choose to show or hide content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Make sure accordion headings are descriptive and succinct."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use a single accordion."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid putting all page content into accordions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use accordions for important information all users need to read."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Putting accordions in accordions can confuse the user."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use an accordion if doing so will slow the page load time."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't disable sections."}]}]},{"type":"element","tag":"h3","props":{"id":"collapse-allexpand-all"},"children":[{"type":"text","value":"Collapse all/Expand all"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Being able to collapse or expand all lets users open or close all accordions with one click. This reduces the amount of clicks required to reach their content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't use this feature to help users find information. Expanding all accordions at once could defeat the purpose of having them. If a user has to do this, consider more descriptive titles."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The other option is to remove the accordions and display the content without them."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The accordion has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"numbered."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-accordion--accordion"},"children":[]},{"type":"element","tag":"h3","props":{"id":"numbered"},"children":[{"type":"text","value":"Numbered"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the numbered variant when it is important the content is read in sequential order."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-accordion--accordion-numbered"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Accordions use colour to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"represent interactions such as hover and active states"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"give prominence to the active displayed content section."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-accordion--accordion"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"},{"id":"collapse-allexpand-all","depth":3,"text":"Collapse all/Expand all"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"numbered","depth":3,"text":"Numbered"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:accordion.md","_source":"content","_file":"design-system/5.components/accordion.md","_extension":"md"},{"_path":"/design-system/components/acknowledgment","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Acknowledgement","description":"The Acknowledgement component pays respect to the First Peoples of Victoria.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Acknowledgement of Traditional Owners message:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"displays alongside the Aboriginal and Torres Strait Islander flags"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"is used in the footer."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-acknowledgement--acknowledgement"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use this component to display the Acknowledgement of Traditional Owners message."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Do not change the:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Aboriginal and Torres Strait Islander flags"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Acknowledgement of Traditional Owners wording."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:acknowledgment.md","_source":"content","_file":"design-system/5.components/acknowledgment.md","_extension":"md"},{"_path":"/design-system/components/alert","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Alert","description":"The Alert component display required actions or important messages to users.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alerts attract a user's attention with important messages or required actions. They appear at the top of pages."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alerts are:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"intrusive by design"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"created on purpose"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"dismissible by a user"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"not triggered by user action or back-end event."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alerts sit flush at the top of pages above the header. Users can still interact with the page below an alert."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-alert--information"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use an alert if its message or action applies to an entire product or site."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Write the alert in plain language that's clean and concise to minimise a user's cognitive load."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If the user needs more information or to complete an action, use link text for the call to action."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Place the alert at the top of the screen before the header."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use the critical alert setting for messages or actions that warrant it."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Limit actions to one per alert banner."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use an alert if its message applies only to that feature or page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Alerts shouldn't cover other components, only pushing down page content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use alerts for actions initiated by the user or backend."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"An alert’s styling is according to its meaning and uses semantic colours."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alert colours include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"grey for general information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"orange for a minor warning"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"red for a critical error or expected dangerous event."}]}]},{"type":"element","tag":"h3","props":{"id":"information"},"children":[{"type":"text","value":"Information"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"To communicate general information to users."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-alert--information"},"children":[]},{"type":"element","tag":"h3","props":{"id":"warning"},"children":[{"type":"text","value":"Warning"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"To communicate a minor warnings to users."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-alert--warning"},"children":[]},{"type":"element","tag":"h3","props":{"id":"critical"},"children":[{"type":"text","value":"Critical"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"To communicate a critical error has occurred or dangerous event is expected to users."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-alert--danger"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"alert-ordering"},"children":[{"type":"text","value":"Alert ordering"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"So that users view alerts in order of importance, they appear in priority order:"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Critical."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Warning."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Information."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-alert--stacked"},"children":[]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"information","depth":3,"text":"Information"},{"id":"warning","depth":3,"text":"Warning"},{"id":"critical","depth":3,"text":"Critical"}]},{"id":"alert-ordering","depth":2,"text":"Alert ordering"}]}},"_type":"markdown","_id":"content:design-system:5.components:alert.md","_source":"content","_file":"design-system/5.components/alert.md","_extension":"md"},{"_path":"/design-system/components/block-quote","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Block quote","description":"The Block quote component adds emphasis to a quote.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use block quotes to emphasise:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"important information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"excerpts from a source."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--blockquote"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use text in block quotes."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always put all the quoted text inside opening and closing quotation marks (' ')."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include optional author metadata."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"You can feature more than one quote by a single author."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use in content sections."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not repeat metadata across different quotes."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The block quote uses colour to add subtle visual prominence."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--blockquote"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:block-quote.md","_source":"content","_file":"design-system/5.components/block-quote.md","_extension":"md"},{"_path":"/design-system/components/breadcrumb","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Breadcrumb","description":"The Breadcrumb component shows a user their location on a website. This allows quick navigation between page levels.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use breadcrumbs to help users understand where they are within a website’s structure. A breadcrumb shows as a series of links and icons in a line."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A breadcrumb displays the parent page, icons and the current page."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Parent page: this links to the page above the current page in the information architecture."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Icons: chevrons (v-shaped icons) sitting between the parent and current pages are designed to visualise site hierarchy."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Current page: this is the page the user is currently on."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-breadcrumbs--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display the breadcrumb at the top left of a page, below the main navigation but above the page title."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always start the breadcrumb with the parent page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always end the breadcrumb with the current page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Truncate longer names if you've reached the maximum amount of links."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The breadcrumb does not replace primary navigation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not use the breadcrumb to show progress through a linear journey."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"how-the-breadcrumb-works"},"children":[{"type":"text","value":"How the Breadcrumb works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"On devices with a page resolution under 768px, the breadcrumb displays the parent link only."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Breadcrumb uses colour to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"represent possible interactions"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-breadcrumbs--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"how-the-breadcrumb-works","depth":2,"text":"How the Breadcrumb works"},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:breadcrumb.md","_source":"content","_file":"design-system/5.components/breadcrumb.md","_extension":"md"},{"_path":"/design-system/components/button","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Button","description":"The Button component helps a user to carry out an action.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a button to indicate an action a user can take and to let them start carrying it out. Button labels say what action will occur when the user interacts with it."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use a button when the page has a call to action. Don't use buttons when sending users to other locations on the page or to other pages or sites."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight a key call to action."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"So long as it also helps users carry out its identified action, a button can link to internal and external pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add to any basic content component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use verbs in the button label, for example, 'Submit now', 'Cancel booking', etc."}]}]},{"type":"element","tag":"h3","props":{"id":"when-not-to-use"},"children":[{"type":"text","value":"When not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Limit primary buttons to one per page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use more than 4 words in the button label."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid using inactive buttons."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Limit using buttons to one per page. The more you use them, the less a user will notice them."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Buttons are styled for their specific purposes. Button variants include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"filled"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"outlined"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"white"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"elevated"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"destructive."}]}]},{"type":"element","tag":"h3","props":{"id":"filled"},"children":[{"type":"text","value":"Filled"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the filled variant for primary actions, known as calls to action."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the primary colour."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use more than one filled button per page.\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A page should only have one call to action, otherwise they lose impact."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Having more than one also results in a dilemma of choice for the user."}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled"},"children":[]},{"type":"element","tag":"h3","props":{"id":"outlined"},"children":[{"type":"text","value":"Outlined"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The outlined variant is for secondary actions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Like the filled variant, don't use more than one outlined button.\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If you find you're adding lots of secondary buttons, you may need to simplify your content."}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-outlined"},"children":[]},{"type":"element","tag":"h3","props":{"id":"white"},"children":[{"type":"text","value":"White"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The white variant is for tertiary actions when an action is less prominent.\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"It should be obvious that it is lower priority than primary or secondary buttons."}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The white variant is styled with an underline by default, to align with links.\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"This helps meet accessibility requirements and is consistent with other link types."}]}]}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-white"},"children":[]},{"type":"element","tag":"h3","props":{"id":"elevated"},"children":[{"type":"text","value":"Elevated"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The elevated variant acts as a 'back-to-the-top' button."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"We've added elevation to show the where the button will sit as a 'layer' on the page (its CSS z-index value)."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-elevated"},"children":[]},{"type":"element","tag":"h3","props":{"id":"destructive"},"children":[{"type":"text","value":"Destructive"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the destructive variant for destructive actions, such as permanently deleting information, across the site."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The destructive variant has a semantic meaning and uses semantic colour."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Destructive buttons only work if not used often."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"It’s uncommon for most sites to need one."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use the destructive variant if an action has destructive consequences because they are not easy to undo."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never rely on colour only to communicate a serious action. For example, don't rely on red only as a warning to the user. Some users cannot see all colours and will miss meaning. What will happen when the user clicks the button must be obvious from context button text."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-destructive"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h3","props":{"id":"loading-spinner"},"children":[{"type":"text","value":"Loading spinner"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Loading spinners are used to indicate to users that an action is being processed. Spinners animate as soon as the user initiates an action and disappear once content shows."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A user may double-click a button because:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"their main operating system uses double click"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"they have a slow connection which results in delayed action feedback"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"they click the button by accident due to motor impairments like hand tremors."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Clicking a button twice can mean the information gets sent 2 times."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Try to show the user that their click has worked. For example, show a loading spinner once they've clicked."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When a button is in the loading state, the button label is hidden and a spinner is shown in its place. The button will keep the same width it had when the text was visible."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--busy-state"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Buttons can be themed in the following 2 ways:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"site colour palette"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"neutral colour palette."}]}]},{"type":"element","tag":"h3","props":{"id":"site-theme"},"children":[{"type":"text","value":"Site theme"}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-filled"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-outlined"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--default-elevated"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"https:www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https:www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h3","props":{"id":"neutral-theme"},"children":[{"type":"text","value":"Neutral theme"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Implemented at a site level, the neutral buttons have predefined neutral colour values. You are unable to edit or customise these colours."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There is no filled button variant available if you use the neutral theme. Buttons will automatically display as the next level down of button styling. For example, you'll use the outlined button variant for the neutral theme."}]},{"type":"element","tag":"h4","props":{"id":"outlined-1"},"children":[{"type":"text","value":"Outlined"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--neutral-outlined"},"children":[]},{"type":"element","tag":"h4","props":{"id":"white-1"},"children":[{"type":"text","value":"White"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--neutral-white"},"children":[]},{"type":"element","tag":"h4","props":{"id":"elevated-1"},"children":[{"type":"text","value":"Elevated"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-button--neutral-elevated"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To enhance visual weight and aim to confirm with "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html","rel":["nofollow"]},"children":[{"type":"text","value":"WCAG 2.0 Criterion 1.4.1"}]},{"type":"text","value":", Ripple buttons use underlined text by default on white buttons."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This underline shows users there is an interaction that they can perform."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-not-to-use","depth":3,"text":"When not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"filled","depth":3,"text":"Filled"},{"id":"outlined","depth":3,"text":"Outlined"},{"id":"white","depth":3,"text":"White"},{"id":"elevated","depth":3,"text":"Elevated"},{"id":"destructive","depth":3,"text":"Destructive"},{"id":"loading-spinner","depth":3,"text":"Loading spinner"}]},{"id":"theming","depth":2,"text":"Theming","children":[{"id":"site-theme","depth":3,"text":"Site theme"},{"id":"neutral-theme","depth":3,"text":"Neutral theme"}]},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:button.md","_source":"content","_file":"design-system/5.components/button.md","_extension":"md"},{"_path":"/design-system/components/call-to-action","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Call to action","description":"The Call to action component is a card promoting a specific piece of content and featuring a button highlighting the call to action.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the call to action card to give a brief summary of content or a task. The call to action card features a button highlighting the call to action."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use it to give your call to action more visual prominence. The call to action card can guide users to perform a preferred action."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--call-to-action"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use clear and concise content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ensure content is relevant to the action or destination."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Embed in any body content area of a content page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with a relevant image or graphic."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use without an image or graphic."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t overload it with content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use when a large amount of text is needed for more context."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use other interactive elements, like links."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The call to action card adopts its theming from your button component’s settings."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you choose neutral button for your site, the call to action card will display buttons in the neutral theme."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--call-to-action"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:call-to-action.md","_source":"content","_file":"design-system/5.components/call-to-action.md","_extension":"md"},{"_path":"/design-system/components/callout","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Callout","description":"The Callout component is a text excerpt that draws attention to specific or important content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use callouts to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"draw a user's attention"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"add emphasis to the content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"provide a user with more information."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A callout repeats and highlights content already on the page. Use callouts sparingly. To maintain effectiveness, consider weaving this information into the page's main content."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--callout"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight important information vital to the user."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Place a callout in a prominent position on the page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with text only."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only feature one callout per page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use no more than 2 paragraphs per callout."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't put the callout at the bottom of the page."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To allow for different levels of emphasis, a callout has 2 styles:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"accent"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"neutral."}]}]},{"type":"element","tag":"h3","props":{"id":"accent"},"children":[{"type":"text","value":"Accent"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the accent variant to add a high level of emphasis to the selected content. The callout accent can adopt any WYSIWYG type styles you choose."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--callout"},"children":[]},{"type":"element","tag":"h3","props":{"id":"neutral"},"children":[{"type":"text","value":"Neutral"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the neutral variant to give content a medium level of emphasis. The neutral callout uses a predefined type style that you cannot change."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--callout-neutral"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The accent variant uses the site accent colour to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"add visual prominence to the content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"aid hierarchy in the content area."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--callout"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To enhance visual weight and aim to conform with "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html","rel":["nofollow"]},"children":[{"type":"text","value":"WCAG2.0 Criterion 1.4.1"}]},{"type":"text","value":", Ripple callouts use:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a thick left-hand border"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"background colours"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"padding."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"accent","depth":3,"text":"Accent"},{"id":"neutral","depth":3,"text":"Neutral"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:callout.md","_source":"content","_file":"design-system/5.components/callout.md","_extension":"md"},{"_path":"/design-system/components/campaign-banner","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Campaign banner","description":"The Campaign banner component draws a user's attention to promoted content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use campaign banners to promote content. They include a feature image and have an optional call to action."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The banner has a headline and short summary text. These point users to promoted content and guide them to a call to action contained in a button."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Campaign banners can be used at the top or bottom of a page, under the header or above the footer."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-campaign-banner--primary-image"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Promote a campaign or related page content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add an optional image."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with an optional call to action."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t overload with content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use an unrelated image."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The campaign banner has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"featured, which appears at the top of the page, below the header"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"image inset, which appears at the bottom of the page above the footer."}]}]},{"type":"element","tag":"h3","props":{"id":"featured"},"children":[{"type":"text","value":"Featured"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A featured campaign banner goes at the top of the page underneath the header. When on larger screens, the image is cropped in a shape and can overlap the component above (the header)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There is an option to include metadata for the image if required."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-campaign-banner--primary-image"},"children":[]},{"type":"element","tag":"h3","props":{"id":"image-inset"},"children":[{"type":"text","value":"Image inset"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The image inset variant sits above the footer at the bottom of the page. This should be used for less prominent campaigns. For featured campaigns, we recommend using the featured variant at the top of the page."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-campaign-banner--secondary-image"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The campaign banner adopts its theming from the button component."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you choose the neutral button variant for your site, the campaign banner will display buttons in the neutral theme."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-campaign-banner--primary-image"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"featured","depth":3,"text":"Featured"},{"id":"image-inset","depth":3,"text":"Image inset"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:campaign-banner.md","_source":"content","_file":"design-system/5.components/campaign-banner.md","_extension":"md"},{"_path":"/design-system/components/card","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Card","description":"The Card component shows content about another page, event or topic. They help users find relevant information.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use cards to help users find the right information quickly."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"They can combine a variety of content, including text, media and links."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Cards are best used on a landing page to highlight any related pages, events or ongoing campaigns."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ensure headings are direct and summaries are concise."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--promo","argsString":"graphicElement:None"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Cards can be made up of:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"metadata, to show supplementary data to give the user more information (for example, date, topic, status, etc.)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"headline, to provide a snapshot of the content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"summary, to provide further details"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"visual elements, to provide visual prominence."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You only need a headline and a summary for a card. All other elements are optional and will depend on a user's needs."}]},{"type":"element","tag":"h4","props":{"id":"metadata"},"children":[{"type":"text","value":"Metadata"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All cards have optional metadata. Use metadata to display a combination of:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"topic/tag - categories for when a user needs to group content (for example, departments, agencies, services, etc.)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"date - how old the content is, for when this information is important to the user"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"status - where a component or action is sitting within a process."}]}]},{"type":"element","tag":"h4","props":{"id":"visual-elements"},"children":[{"type":"text","value":"Visual elements"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Visual elements in cards allow for different content to stand out. They can also provide additional context."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Elements that can provide visual prominence include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an image"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a highlight border"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a blocked headline type."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use visual elements carefully. Only use a visual element if it:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"is meaningful to the user journey"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"supports what is already in the content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"can help the user differentiate content from other content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"can be easily identified"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"is informative and not only decorative."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Group together cards with similar content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use only a single style of card within a set of cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep the content clear and concise."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use one piece of information per card."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't mix different card variants in a group."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use a single card only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never repeat content in a group of cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't overload cards with content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't include other interactive elements, like links, inside the card."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A card has 2 main variants and is styled for its purpose."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Promotion Cards, which is used to highlight important content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Navigation Cards, which is used for larger groups of content."}]}]},{"type":"element","tag":"h3","props":{"id":"promotion-cards"},"children":[{"type":"text","value":"Promotion cards"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Promotion cards provide an eye-catching way to promote links to other pages on your site (or external sites)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Promotion cards stack in a grid when used in a collection."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Promotion cards have 4 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"standard"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"highlight"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"image full bleed"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"avatar."}]}]},{"type":"element","tag":"h4","props":{"id":"standard"},"children":[{"type":"text","value":"Standard"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--promo","argsString":"graphicElement:None"},"children":[]},{"type":"element","tag":"h4","props":{"id":"highlight"},"children":[{"type":"text","value":"Highlight"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The highlight variant gives the card more visual prominence. Use this to guide users to the content."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--promo","argsString":"graphicElement:Highlight","theme":"docsTheme2"},"children":[]},{"type":"element","tag":"h4","props":{"id":"image-full-bleed"},"children":[{"type":"text","value":"Image full bleed"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The image full bleed variant gives the option to add a relevant image to grab the user’s attention."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--promo"},"children":[]},{"type":"element","tag":"h4","props":{"id":"avatar"},"children":[{"type":"text","value":"Avatar"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--avatar"},"children":[]},{"type":"element","tag":"h3","props":{"id":"navigation-cards"},"children":[{"type":"text","value":"Navigation cards"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Navigation cards are useful for displaying and breaking down large groups of content options."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"On landing pages, they are used to highlight all the different sections of that site."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Navigation cards fill the full width of the content area. They will always stack vertically."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are 3 variants of navigation cards:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"standard"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"image inset"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"heading highlight."}]}]},{"type":"element","tag":"h4","props":{"id":"standard-1"},"children":[{"type":"text","value":"Standard"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--nav","argsString":"graphicElement:None"},"children":[]},{"type":"element","tag":"h4","props":{"id":"image-inset"},"children":[{"type":"text","value":"Image inset"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A related image can increase a card's visual prominence."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--nav"},"children":[]},{"type":"element","tag":"h4","props":{"id":"heading-highlight"},"children":[{"type":"text","value":"Heading highlight"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To draw attention to the heading and highlight the content, use a heading highlight."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--nav","argsString":"graphicElement:Heading+highlighted"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Cards use colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interaction states"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"adding visual prominence to some elements."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--promo","argsString":"graphicElement:Highlight"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--nav","argsString":"graphicElement:Heading+highlighted"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"promotion-cards","depth":3,"text":"Promotion cards"},{"id":"navigation-cards","depth":3,"text":"Navigation cards"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:card.md","_source":"content","_file":"design-system/5.components/card.md","_extension":"md"},{"_path":"/design-system/components/carousel","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Carousel","description":"The Carousel component is a set of related cards that users can side-scroll through.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a carousel to let users browse through a set of up to 9 cards with pagination controls."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The content in the carousel should be related in some way. This helps users to find related and relevant content."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-card-carousel--breakpoints"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use a combination of promotion cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use when wanting to display a collection of cards with related content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add to any page type."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include with an accompanying title to give context to users."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use more than 9 cards or fewer than 3."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with navigation or other card types."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The carousel adopts its theming from the card and pagination components."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-card-carousel--breakpoints"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:carousel.md","_source":"content","_file":"design-system/5.components/carousel.md","_extension":"md"},{"_path":"/design-system/components/category-grid","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Category grid","description":"The Category grid component shows multiple cards laid out in a grid, allowing users to browse a collection of categories.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a category grid to help users browse a range of categories and content. Each card in a collection acts as a link to more information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A category grid uses the text link style to indicate clickable elements. An accompanying media item, such as an icon or pictogram, is used to support the content for each category."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The media item you choose must be directly relevant to the card’s content, to support and reinforce the user’s understanding. The icon or pictogram should clearly show the difference in topics and should be easily identifiable."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--category-grid"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use as a collection of cards only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include clear and concise content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with icons or pictograms."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Be careful not to include too many cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always use unique media items per card."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use a single card only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t repeat content in the same a group of cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t overload with content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t include with other interactive elements like links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use without a media item."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use on pages with a sidebar."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The category grid uses colour to indicate interaction states."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--category-grid"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:category-grid.md","_source":"content","_file":"design-system/5.components/category-grid.md","_extension":"md"},{"_path":"/design-system/components/checkbox","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Checkbox","description":"The Checkbox component lets users select one or more options from a list.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use checkboxes to allow users to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"select one or more list options"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"toggle one option on or off."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't use a checkbox if only one option is available or if you expect the user to only select one option. For this, use the radio button component instead."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-checkbox-group--default-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use checkboxes with a:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"form label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional requirement label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional hint text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"checkbox label."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Checkboxes should always have a form and checkbox label."}]},{"type":"element","tag":"h4","props":{"id":"single-checkbox"},"children":[{"type":"text","value":"Single checkbox"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A single checkbox confirms a user's selection or preference. Examples include when a user is agreeing to terms and conditions or registering for a the only available option presented."}]},{"type":"element","tag":"h4","props":{"id":"checkbox-group"},"children":[{"type":"text","value":"Checkbox group"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Checkbox groups provide a list of available items for the user to choose from. Always tell the user how many options they can select."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always give checkbox groups a clear and descriptive label. The label should say what the options represent and should help the user to choose one. Doing so ensures good accessibility, as screen readers read each option's label."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Not all users will know the visual difference between a checkbox and a radio button. You can could add extra instructions to guide users, for example, ‘Select up to 3 options’."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use checkboxes for lists with more than one selectable option."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use hints to inform users that more than one option can be selected, for example, 'Select all that apply'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always position checkboxes to the left of their labels because this makes them easier to find, especially if using a screen magnifier."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ensure you list the options in a logical and unbiased manner. It could be helpful to users if you order them from most common to least common."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use checkboxes for a single selectable list option, use radio buttons for this."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't pre-select checkboxes because users may not realise they submitted the wrong answer or missed a question."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Checkboxes have 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, used on white backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse, used on neutral backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-checkbox-group--default-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the reverse variant when the chip appears on the primary colour."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-checkbox-group--reverse-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Make sure errors follow error message guidance. Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: nothing is selected and the question has options in it"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user to choose which options apply to them."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select if [options]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Select if you like summer, winter, autumn, and/or spring'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: nothing is selected and the question does not have options in it"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user to choose which options apply to them."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select [options]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Select your favourite season'."}]}]},{"type":"element","tag":"docs-example","props":{"id":"forms-checkbox-group--invalid"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A checkbox uses colour for interactive states."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A checkbox in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a checkbox remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-checkbox-group--default-variant"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"error","depth":3,"text":"Error"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:checkbox.md","_source":"content","_file":"design-system/5.components/checkbox.md","_extension":"md"},{"_path":"/design-system/components/chip","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Chip","description":"The Chip component is an interactive element to draw a user’s user attention to a category.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use chips to represent options in a specific context. They are unlike buttons, which are persistent across contexts."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A chip labels or draws attention to categorised content. Chips can be interactive and help users navigate to relevant content easily."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When displaying multiple chips together, place them in a row."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-chip--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include keywords."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use on any content page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Link through to the topic page."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t include punctuation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use as a heading."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t include more than 4 words."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use without an interaction or link."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"chips-or-buttons"},"children":[{"type":"text","value":"Chips or buttons?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"While chips and buttons both prompt calls to action, they are different."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Multiple chips should all sit together. Buttons should sit separately from each other."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Chips react to their context, but buttons are fixed and remain static."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Chips convey forking paths in a user experience, while buttons show a linear step."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The chip has a default and reverse variant, allowing flexible use across a range of backgrounds."}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-chip--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the reverse variant when the chip appears on the primary colour."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-chip--reversed"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The chip uses the primary and primary-accessible colour tokens. This is to meet colour contrast requirements when theming."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If the site primary colour is ‘light’, the chip content will display in the type-default colour. The border will always take on the site primary colour."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-chip--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"chips-or-buttons","depth":2,"text":"Chips or buttons?"},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:chip.md","_source":"content","_file":"design-system/5.components/chip.md","_extension":"md"},{"_path":"/design-system/components/contact-us","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Contact us","description":"The Contact us component is a list of contact details and links to help the user get in touch with you.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the contact us component to show the user multiple pieces of contact information or actions. The details should be related to the page content and a single point of contact."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Contact us details can include a:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"contact person"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"address"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"phone number"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"social media account."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-contact-us--contact-us"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Provide users with additional contact details relevant to the page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display any combination of physical and postal addresses, phone numbers, email addresses and common social media accounts."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display in the sidebar of the page."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If you add social media accounts to the contact us component, don’t add the social share component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use unrelated contact details or social media accounts."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Contact us uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"visual prominence for key information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"link icons."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-contact-us--contact-us"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:contact-us.md","_source":"content","_file":"design-system/5.components/contact-us.md","_extension":"md"},{"_path":"/design-system/components/date-input","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Date input","description":"The Date input component helps users enter a date.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use date input to let users to enter a date they already know, or a date they can enter without needing a calendar."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Date input has 3 fields: day, month and year."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don’t set this component to automatically tab between these fields. This can be confusing and jarring for the user."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-date-input--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-to-use-this-component"},"children":[{"type":"text","value":"How to use this component"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You must use a form label with a date input."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use an date input with:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"requirement label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hint text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"placeholder text."}]}]},{"type":"element","tag":"h4","props":{"id":"avoid-placeholder-text"},"children":[{"type":"text","value":"Avoid placeholder text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information."}]},{"type":"element","tag":"h4","props":{"id":"hint-text"},"children":[{"type":"text","value":"Hint text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hint text can be used to tell the user what, or how, to successfully complete a date input."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, hint text can include specific formatting examples or requirements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use hint text where it’s needed. Don’t use it just to keep the layout consistent with other fields in the form."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always use date inputs with a label."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Write short and concise labels."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use hint text to show the expected date format, for example, ‘07 11 2022’."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If it’s not likely users will know the exact date, don’t use date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use without a form label or hint text specifying the expected date format."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid placeholder text because it can cause accessibility issues."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t disable copy and paste."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use placeholder text to give instructions or important examples."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t write ambiguous error messages only stating what's wrong - explain how the user can fix it."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The date input has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, used on white backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse, used on neutral backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-date-input--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-date-input--reverse"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When creating an error message for a date input, use the wording below."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: whole date field is empty"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Enter [the missing information]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Enter your dog’s birthday'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: some of date field is empty or incomplete"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: relevant day, month and/or year fields."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must include a [name of empty or incomplete field]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s birthday must include a month'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: impossible date entered"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: relevant day, month and/or year fields."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be a real date’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s birthday must be a real date'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: future date given when past date needed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be in the past’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s first playdate must be in the past'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: future date given when today or past date needed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be today or in the past’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s first beach visit must be today or in the past'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: past date given when future date needed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be in the future’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next raincoat purchase must be in the future'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: past date given when today or future date needed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be today or in the future’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next zoomies must be today or in the future'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date is not on or after another particular date"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be the same as or after [particular date and optional description]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next holiday must be on or after 2 April 2027 when you go on a roadtrip'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date is not after another particular date"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be after [particular date and optional description]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next blow-dry must be after 2 April 2026 when the groomer returns'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date is not the same as or before another particular date"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be on or before [particular date and optional description]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next hike must be on or before 2 January 2025'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date is not before another particular date"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be before [particular date and optional description]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next movie and pizza night must before 2 August 2027'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date is not between 2 other dates"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: entire date input."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[Information requested] must be between [earliest date] and [latest date and optional description]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Your dog’s next cuddles must be between 2 September 2026 and 3 September 2026'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date uses known characters that aren’t allowed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: relevant day, month and/or year fields."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘The date must not include [characters]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘The date must not include + & ~'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: date uses unknown characters that aren’t allowed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Highlight area: relevant day, month and/or year fields."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘The date must only include numbers'."}]}]},{"type":"element","tag":"docs-example","props":{"id":"forms-date-input--invalid"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Date input uses colour to show interactive states. A date input field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a date input field remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-date-input--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-to-use-this-component","depth":3,"text":"How to use this component"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"error","depth":3,"text":"Error"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:date-input.md","_source":"content","_file":"design-system/5.components/date-input.md","_extension":"md"},{"_path":"/design-system/components/detail-list","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Detail list","description":"The Detail list component shows a list of key information to users.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the detail list to display a list with labels. This surfaces (retrieves and displays) and highlights key information to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each row of the detail list comprises a:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"label, a descriptive or informative label for your content, for example, 'Location'"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"content, the piece of information itself, for example, 'East Gippsland'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The detail list is used to display:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"metadata, for example, ‘Published date' (which shows as '22 March 2023’)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"status, for example of a program or grant."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use the detail list for simple information. For data or complex information, consider using a table."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-description-list--with-link"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use single words only for the label."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include a link if you need to."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep the summary content and labels clear and concise."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Align all summary content to the longest label."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use labels for unrelated summary content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use it to surface information that is not important to users."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with complex or long form content."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When a link is present, the detail list uses the link colour for interaction states."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-description-list--with-link"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:detail-list.md","_source":"content","_file":"design-system/5.components/detail-list.md","_extension":"md"},{"_path":"/design-system/components/dropdown","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Dropdown","description":"The Dropdown component lets users see a list of available options and then select one or more options.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use this component to let users select one or more items from a dropdown list of available items."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It can be helpful when users need to choose from 6 or more options. It can also be used when listing all options in checkboxes or radio buttons is not viable."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dropdowns should only be used as a last resort. For example, to find a compromise between usability and keeping the layout compact and clear."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Many users find dropdowns hard to use. Dropdowns hide content by default and create user confusion, cross-device issues and limited accessibility. Use radio buttons, checkboxes or input fields for most small lists instead."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A compromise might be needed for a long list of options (for example, all dog breeds). Or, when option description lengths vary or wrap over multiple lines. These situations also confuse users by creating layout issues for checkboxes, input fields or radio buttons."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A dropdown is often called a 'select'."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-dropdown--single-select-many-items"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You must use a form label with a dropdown."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use a dropdown with:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"requirement label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hint text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"placeholder text."}]}]},{"type":"element","tag":"h4","props":{"id":"single-select"},"children":[{"type":"text","value":"Single select"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A single select dropdown is used when users can select only a single option."}]},{"type":"element","tag":"h4","props":{"id":"multi-select"},"children":[{"type":"text","value":"Multi select"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If using a multi select dropdown, always tell the user how many menu options they can select. Add extra instructions in the hint text to guide them. For example, 'Select up to 3 options'."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Even though users can choose multiple items in a multi select dropdown, they often find this confusing. checkboxes could be better."}]},{"type":"element","tag":"h4","props":{"id":"hint-text"},"children":[{"type":"text","value":"Hint text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hint text can be used to tell the user what, or how, to successfully complete a dropdown."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, hint text can include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an overall description of the dropdown"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hints for what kind of information needs to be input"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"specific formatting examples or requirements."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form."}]},{"type":"element","tag":"h4","props":{"id":"placeholder-text"},"children":[{"type":"text","value":"Placeholder text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information. Placeholder text for the dropdown trigger must clearly tell the user its purpose."}]},{"type":"element","tag":"h4","props":{"id":"selected-value"},"children":[{"type":"text","value":"Selected value"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The selected value shows the option a user has selected."}]},{"type":"element","tag":"h4","props":{"id":"text-overflow"},"children":[{"type":"text","value":"Text overflow"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When the field label and menu text are too long for the available horizontal space, they wrap to form another line."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The field text itself truncates at the end, but the text can be shown in full in the menu."}]},{"type":"element","tag":"h4","props":{"id":"menu-height"},"children":[{"type":"text","value":"Menu height"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The dropdown menu has a maximum height of 288px or 6 single text-line options."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We recommend starting a scroll at the sixth option in the menu list. This may vary based on your specific use case."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use as a last resort component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A label must be used with a dropdown."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ensure dropdown item descriptions are short and concise."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use when listing between 6 and (if possible) 15 items, if checkboxes or radio buttons can’t be used."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never set the form to submit when a dropdown item is selected."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t write long menu option descriptions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Descriptions should not wrap over a single line."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Icons or decorative images should never be used in dropdowns."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not use a dropdown for listings less than 6 options, consider using radio buttons or checkboxes."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not use a dropdown without a label as it confuses users and is not accessible."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dropdown has 2 main variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"single select"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"multi select."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Both variants have default and reverse sub-variants."}]},{"type":"element","tag":"h3","props":{"id":"single-select-1"},"children":[{"type":"text","value":"Single select"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A single select dropdown is used when users can select only a single option."}]},{"type":"element","tag":"h4","props":{"id":"making-a-selection"},"children":[{"type":"text","value":"Making a selection"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Placeholder text is shown by default in the field when the dropdown is closed."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Interacting with a closed field opens a menu of options."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The dropdown closes when an option is chosen."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The selection option replaces the placeholder text, but also remains in place if the menus is opened."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The selected option then has a tick to the left of the option in the open menu, to remind the user of the selected value."}]}]},{"type":"element","tag":"h4","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-dropdown--single-select-many-items"},"children":[]},{"type":"element","tag":"h4","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-dropdown--reverse-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"multi-select-1"},"children":[{"type":"text","value":"Multi select"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users can choose multiple items in a list or to filter information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If using a multi select dropdown, always tell the user how many menu options they can select."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Add extra instructions in the hint text to guide them. For example, 'Select up to 3 options'."}]},{"type":"element","tag":"h4","props":{"id":"making-a-selection-1"},"children":[{"type":"text","value":"Making a selection"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Placeholder text is shown by default in the field when the dropdown is closed."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"When the menu is opened, each option shows a checkbox input to the left of its text."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"When options are being selected, the menu stays open."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The selected options replaces the placeholder text. When selected options extend beyond the width of the field, the values truncate. A ‘+#’ appears to the right of the field, to show how many unseen options (#) are selected."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"As multiple selections are possible, the user needs to interact outside the dropdown, or on the field, to close the menu."}]}]},{"type":"element","tag":"h4","props":{"id":"default-1"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-dropdown--multi-select-many-items"},"children":[]},{"type":"element","tag":"h4","props":{"id":"reverse-1"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-dropdown--reverse-variant&args=multiple:true"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When creating an error message for a dropdown, use the wording below."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"If nothing is selected and the question has options in it"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user to choose which options apply to them."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select if [options]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Select if you like summer, winter, autumn, and/or spring.'"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"If nothing is selected and the question does not have options in it"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user to choose which options apply to them."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select "},{"type":"element","tag":"span","props":{},"children":[{"type":"text","value":"options"}]},{"type":"text","value":"’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Select your favourite season'."}]}]},{"type":"element","tag":"docs-example","props":{"id":"add storybook"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dropdown uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A dropdown in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a dropdown remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-dropdown--multi-select-many-items"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"single-select-1","depth":3,"text":"Single select"},{"id":"multi-select-1","depth":3,"text":"Multi select"},{"id":"error","depth":3,"text":"Error"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:dropdown.md","_source":"content","_file":"design-system/5.components/dropdown.md","_extension":"md"},{"_path":"/design-system/components/file","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"File","description":"The File component shows a link, with additional metadata, and lets a user download a file attachment.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the File component to let users download an attachment. It is accompanied by an optional description so you can give the user more information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"File is made up of:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"the file name"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"metadata including file type and size"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a document description."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-file--with-caption"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use on any page type."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include in page content areas only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add an optional description."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add optional updated data if it’s relevant to users."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include metadata."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with a non-descriptive file name."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"File uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicating to users that they may have an action to complete"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--file"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:file.md","_source":"content","_file":"design-system/5.components/file.md","_extension":"md"},{"_path":"/design-system/components/footer","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Footer","description":"The Footer component helps help users find information at the bottom of a page.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use footers to help users find what they need after scrolling to the bottom of a page. Footers provide supplementary information such as:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"copyright"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"contact information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"links to other pages within the website"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"social media links."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The footer must be used at the bottom of every page. It is separate from the primary navigation but is relevant to the entire site."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-footer--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The footer is made up of:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional section links, which help avoid dead ends by giving users a way to continue their journey through:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"additional links (internal and external)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"bypassing main navigation"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional social links, which can be used to link to social media accounts"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"core site links, which must always be used and include the privacy statement, contact information and terms of use"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a copyright statement, which clarifies who owns the copyright and is specific to your agency or department (add the State Government of Victoria logo to vic.gov.au services, for sitewide consistency)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an Acknowledgement of Traditional Owners message (an acknowledgement component)."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with an optional supporting logo relevant to the site content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use a consistently-themed footer across all pages of your site."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the optional neutral theme."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with an optional image credit for the header image."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t alter the required links in the core section of the footer."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t change the text in the acknowledgement component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with links that are not relevant to your organisation."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can theme the footer in 3 ways:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"site colour palette"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"neutral colour palette"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"custom colour palette (see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":")."}]}]},{"type":"element","tag":"h3","props":{"id":"site-colour-palette"},"children":[{"type":"text","value":"Site colour palette"}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-footer--default-story"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"neutral-colour-palette"},"children":[{"type":"text","value":"Neutral colour palette"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Implemented at a site level, the footer has predefined neutral colour values. You are unable to edit or customise these colours."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-footer--neutral"},"children":[]},{"type":"element","tag":"h3","props":{"id":"custom-colour-palette"},"children":[{"type":"text","value":"Custom colour palette"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The footer has its own colour tokens. Because of this, it's possible to apply a custom theme to your footer."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is only recommended as a last resort."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"component specific theming guidance for designers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-footer--default-story","theme":"docsTheme3"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming","children":[{"id":"site-colour-palette","depth":3,"text":"Site colour palette"},{"id":"neutral-colour-palette","depth":3,"text":"Neutral colour palette"},{"id":"custom-colour-palette","depth":3,"text":"Custom colour palette"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:footer.md","_source":"content","_file":"design-system/5.components/footer.md","_extension":"md"},{"_path":"/design-system/components/form-alert","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Form alert","description":"The Form alert component shows the user the outcome of a form submission or validation.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a form alert to tell the user if a form has been submitted, or if there were errors in the form that prevented submission."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The form alert appears at the top of the form and the user is automatically scrolled to it on submission."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are 2 types of alerts:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"success"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"error."}]}]},{"type":"element","tag":"docs-example","props":{"id":"forms-form-alert--error"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Show the validation outcome of a form submission."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If successful, use with relevant success message."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Write error messages for the alert summary exactly the same way they are worded for inline error messages (next to the inputs with the errors)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include a custom error summary if required."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Make your error messages clear and concise."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not use the form alert without providing a summary of errors (if a submission is invalid)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not restyle with other colours or icons."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Form alert has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"success"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"error."}]}]},{"type":"element","tag":"h3","props":{"id":"success"},"children":[{"type":"text","value":"Success"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Success alerts tell users their form submissions worked. They are always static and stay until a user moves away from that page or view."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To help screen reader and other users notice it, ensure that on submission the focus is moved to the alert."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-form-alert--success"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If one or more form validation errors occur, they must always be presented using:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"the error summary alert"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"individual error messages next to each form field with an error (inline)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Make your error messages clear and concise."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Error summary alerts tell the user everything they need to fix before they can submit the form. This goes above the form."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Inline error messages show a user where the errors happened."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"On submission of the form, you must:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"move the keyboard focus to the error summary"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"include the heading ‘There is a problem’ in the error summary"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"link to all answers with validation errors"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"write error messages for the summary alert exactly the same way they are worded for inline error messages."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As well as showing an error summary, follow the validation pattern. For example, add, ‘Error: ’ to the start of the page <title> so screen readers read it out as soon as possible."}]},{"type":"element","tag":"h4","props":{"id":"linking-from-the-error-summary-to-each-answer"},"children":[{"type":"text","value":"Linking from the error summary to each answer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each error must be linked in the error summary to the form field (answer) causing it."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For questions where the user could choose one or more options as an answer, link to the first radio or checkbox field instead."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-form-alert--error"},"children":[]},{"type":"element","tag":"h4","props":{"id":"error-messages"},"children":[{"type":"text","value":"Error messages"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Specific error messages must be provided for specific error states. Style your error messages as directed by the ‘Error’ section on the pages for the following form components:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/input-field/"},"children":[{"type":"text","value":"input field"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/text-area/"},"children":[{"type":"text","value":"text area"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/date-input/"},"children":[{"type":"text","value":"date input"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/checkbox/"},"children":[{"type":"text","value":"checkbox"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/radio-button/"},"children":[{"type":"text","value":"radio button"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/dropdown/"},"children":[{"type":"text","value":"dropdown"}]},{"type":"text","value":"."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"success","depth":3,"text":"Success"},{"id":"error","depth":3,"text":"Error"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:form-alert.md","_source":"content","_file":"design-system/5.components/form-alert.md","_extension":"md"},{"_path":"/design-system/components/form","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Form","description":"The Form component guides users to give information and consists of a group of related inputs or controls.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a form and its form input components to capture data from users. A form consists of a group of related inputs or controls."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Common form components include the:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/input-field/"},"children":[{"type":"text","value":"input field component"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/text-area/"},"children":[{"type":"text","value":"text area component"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/date-input/"},"children":[{"type":"text","value":"date input component"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/radio-button/"},"children":[{"type":"text","value":"radio button component"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/checkbox/"},"children":[{"type":"text","value":"checkbox component"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/dropdown/"},"children":[{"type":"text","value":"dropdown component"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"An input field) is for short (single-line) text entry. A text area is for longer text."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Other input types let a user select from predefined options. Use a radio button when a user needs to make only one selection. Use a checkbox for multiple selections."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Group related form components in logical chunks (fieldsets). A single form can have multiple fieldsets. For example, a fieldset with several input fields for an address, plus a fieldset with a date input and radio button for delivery preferences."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The user can submit a form when all fields are valid (see "},{"type":"element","tag":"a","props":{"href":"/design-system/components/form-alert/"},"children":[{"type":"text","value":"form alert"}]},{"type":"text","value":")."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-form--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"h4","props":{"id":"layout"},"children":[{"type":"text","value":"Layout"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use one form column to enable fast field comprehension. Users cannot scan easily if more columns are used."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Group related form components into logical chunks (fieldsets). This helps users understand the information they need to give."}]},{"type":"element","tag":"h4","props":{"id":"labels"},"children":[{"type":"text","value":"Labels"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each input must have a label."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use short, descriptive labels. This helps users quickly understand the information needed. It makes the content accessible, as a screen reader will read out these labels."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Put a label above its component (top-aligned). Labels will then be consistently aligned left, with small spaces between inputs. This helps users scan and fill the form."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Placeholder text should not be used as a label."}]},{"type":"element","tag":"h4","props":{"id":"requirement-optional-vs-mandatory"},"children":[{"type":"text","value":"Requirement - optional vs. mandatory"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Mark an input as ‘required’ if you do not want the form submission to work unless the user gives that information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Most fields on a simple form will be required."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Where possible, don’t include a large number of optional fields."}]},{"type":"element","tag":"h4","props":{"id":"hint-text"},"children":[{"type":"text","value":"Hint text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hint text can be used to tell the user what, or how, to successfully complete an input or text field."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, hint text can include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an overall description of the input field"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hints for what kind of information needs to be input"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"specific formatting examples or requirements."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form."}]},{"type":"element","tag":"h4","props":{"id":"placeholder-text"},"children":[{"type":"text","value":"Placeholder text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/design-system/components/form/#accessibility"},"children":[{"type":"text","value":"See accessibility"}]},{"type":"text","value":" (below)."}]},{"type":"element","tag":"h4","props":{"id":"error-messages"},"children":[{"type":"text","value":"Error messages"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling. When creating an error message, it must follow the guidance from the individual form component’s page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid. See the individual form component pages for suggested error messages."}]},{"type":"element","tag":"h4","props":{"id":"buttons"},"children":[{"type":"text","value":"Buttons"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Button labels should say what the button will do when a user interacts with it."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ensure the main action button tells the user when the form is being submitted (see "},{"type":"element","tag":"a","props":{"href":"/design-system/components/button/#loading-spinner"},"children":[{"type":"text","value":"button loading spinner"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To avoid confusing users about how to submit the form, use only one main action button. Do not use a reset button."}]},{"type":"element","tag":"h4","props":{"id":"validation"},"children":[{"type":"text","value":"Validation"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Form alert is used to tell the user the outcome of the form validation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If the form has been submitted successfully, the success alert will replace the form."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If the form has errors, the error alert will be placed at the top of the form, with an error summary and anchor links to all inputs that returned errors and require user actions."}]},{"type":"element","tag":"h4","props":{"id":"accessibility"},"children":[{"type":"text","value":"Accessibility"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All fields need a visible, accessible label. (Search fields are sometimes an exception to this.)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"On devices such as mobiles, display the keyboard required for the input. For example, a number keyboard for a date input."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never disable a submit button. Allow the user to submit the form and then display the error message. Use form alert to display the validation outcome."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use autocomplete to reduce typing for users."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep to one column."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use top-align labels."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always mark form fields as ‘required’ or ‘optional’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Make calls to action descriptive - state the intent of the action."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Write short, clear headings and form input labels."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use hint text (instead of labels) to explain any specifications."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use field length input constraints - for fields with a defined character count like phone numbers and postcodes."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Write clear error messages inline, in error summaries and in form alerts by specifying what went wrong, where and how to fix them."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t create a form without a submit button."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use an input or control without a form label."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid using all caps."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Forms use colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A form component in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that form and its components remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-form--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:form.md","_source":"content","_file":"design-system/5.components/form.md","_extension":"md"},{"_path":"/design-system/components/header","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Header","description":"The Header component introduces the purpose and content of a page.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use headers to inform the user of what is on the page. The header must be placed at the top of a page above the main body content and styled as an H1-level heading."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Headers include optional content such as introduction text, journey links, a call to action and an introduction banner."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Headers should feature a primary message and/or call to action. They can be accompanied by supporting content such as images or corner graphics."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The header can also support a campaign logo if required. This will display above the page title."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--default-journey-links"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep the header simple and concise."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use clear calls to action that align with the message or task."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use images that add value to the content and support the message."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include with featured links and buttons to help users perform key tasks."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include an optional campaign logo."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use a mix of reverse and default page title and introduction text styling."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t include the same links in the main and introduction banners."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with more than 6 journey links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t overload with content."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The header has 3 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"image."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default and reverse variants can be used with journey links or a call to action. These guide users to perform tasks or navigate to related information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"They can display corner images to enhance brand recognition and visual prominence. They can also display a supporting campaign logo if required."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The image variant displays a full background image with reverse blocked text. It only supports a page title and introduction text."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All variants can be used with the introduction banner."}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--default-story"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--default-call-to-action"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The reverse variant uses reversed blocked type for the title and introduction text. This adds visual prominence to the banner and its information."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--reverse-journey-links"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--reverse-call-to-action"},"children":[]},{"type":"element","tag":"h3","props":{"id":"image"},"children":[{"type":"text","value":"Image"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"An image can be added as a full background image. The title and introduction copy will always display as the reversed blocked type."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Images should not be stretched or too low in resolution. They should also not be complex or include text."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--image-reverse"},"children":[]},{"type":"element","tag":"h3","props":{"id":"introduction-banner"},"children":[{"type":"text","value":"Introduction banner"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The introduction banner:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"can be used to add content and journey links under the page title and introduction section in the main header banner"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"has an optional icon and journey links"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"should contain content relating to the content in the main header."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--intro-with-links"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"interaction-with-other-components"},"children":[{"type":"text","value":"Interaction with other components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When using a featured campaign banner with an image, the image can overlap the header, depending on the amount of content. By default, this will hide the header's bottom corner shape."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The bottom corner shape won't hide if an introduction banner is between the header and campaign banner."}]},{"type":"element","tag":"docs-image-example","props":{"alt":"A demonstration of the interaction between the Header component and the campaign banner, the campaign banner image slightly overlaps the header.","src":"/assets/img/campaign-banner-behaviour.png"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Headers can be themed in 2 ways:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"site colour palette"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"neutral colour palette."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It will also adopt theming from the button component when displaying the call to action."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you choose neutral button for your site, the header will display buttons in the neutral theme."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--default-call-to-action"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--reverse-journey-links"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--intro-with-links"},"children":[]}]},{"type":"element","tag":"h3","props":{"id":"neutral-theme"},"children":[{"type":"text","value":"Neutral theme"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Implemented at a site level, headers can have a neutral theme option. This option is only applicable to the reverse blocked type. Neutral headers have predefined neutral colour values that must be used and cannot be edited or customised."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-header--image-neutral"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"image","depth":3,"text":"Image"},{"id":"introduction-banner","depth":3,"text":"Introduction banner"}]},{"id":"interaction-with-other-components","depth":2,"text":"Interaction with other components"},{"id":"theming","depth":2,"text":"Theming","children":[{"id":"neutral-theme","depth":3,"text":"Neutral theme"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:header.md","_source":"content","_file":"design-system/5.components/header.md","_extension":"md"},{"_path":"/design-system/components/in-page-navigation","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"In-page navigation","description":"The In-page navigation component sits above a page’s main content and shows a set of links.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use in-page navigation to make scanning and navigating within a single page quicker for users. This component shows links to headings that are on the current page. It sits at the top of the page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use in-page navigation for longer content pages. It acts as a table of contents, providing users with a summary and quick navigation across the page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The left-hand highlight bar:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"separates the component from the page content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"groups the navigation."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-in-page-navigation"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"In-page Navigation is ideal for pages with a lot of content. This will help users find their relevant content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use headings throughout your content, such as headings level 2 (H2) and 3 (H3). You can use these as navigation links at the start of the page, like a table of contents."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use subheadings as indented navigation links from the page."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't link to other pages, including on external sites."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use colons in the heading."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use it if you have less than 2 navigation links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use it with component headings, such as accordion item headings."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple’s theming applies colour to in-page navigation so that the user understands:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"its links and navigation heading relate to each other"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"they are deliberately separated from the main content."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-in-page-navigation"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:in-page-navigation.md","_source":"content","_file":"design-system/5.components/in-page-navigation.md","_extension":"md"},{"_path":"/design-system/components/input-field","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Input field","description":"The Input field component lets users input a short amount of text.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use input fields to let users enter, select and search for text. They are normally found in a form but can also be part of a modal or search."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use an input field for users to enter text shorter than a single line."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Input fields can have multiple input types, depending on the need and use case. They have a text input type by default."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Input fields can be used for entering:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"text: basic text or search terms"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"phone: a telephone number"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"email: an email address"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"passwords: a user's input is obscured with a dot (' • '), asterisk (' * ') or other symbol as they type."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don’t use an input field if the user’s text needs to be more than one line long: use a text area component instead."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-input--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Set the width of the input field to show the amount of information needed from the user. For example, use smaller widths for postcodes than for emails."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You must use a form label with an input field."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use an input field with:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"requirement label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hint text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"placeholder text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"prefix or suffix text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"prefix or suffix icon."}]}]},{"type":"element","tag":"h4","props":{"id":"avoid-placeholder-text"},"children":[{"type":"text","value":"Avoid placeholder text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information."}]},{"type":"element","tag":"h4","props":{"id":"hint-text"},"children":[{"type":"text","value":"Hint text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hint text can be used to tell the user what, or how, to successfully complete an input field."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, hint text can include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an overall description of the input field"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hints for what kind of information needs to be input"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"specific formatting examples or requirements."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form."}]},{"type":"element","tag":"h4","props":{"id":"prefix-and-suffixes"},"children":[{"type":"text","value":"Prefix and suffixes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use prefixes and suffixes to help users enter things like currencies and measurements."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Prefixes and suffixes help when there’s a commonly understood symbol or abbreviation for the type of information needed."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don’t rely on prefixes or suffixes alone. Screen readers will not read them out."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you need a specific type of information, say so in the input label and hint text. For example, ‘Cost, in dollars’ in the input label and ‘$’ in the prefix."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always use a label for input fields."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use hint text to specify helpful information such as:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"expected number format, for example ‘Must be 6 to 8 digits long’"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"minimum and maximum number values, for example ‘Minimum of # and maximum of #’."}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the prefix to indicate measurements and categories like currency, for example, '$'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the prefix together with hint text to reinforce what the input needs to be, for example 'Cost, in dollars'."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use an input field without a label."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid placeholder text because it can cause accessibility issues."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t disable copy and paste."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t set a minimum or maximum input limit without explicitly saying this in the hint text."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use placeholder text to give instructions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t write ambiguous error messages only stating what's wrong, explain how the user can fix it."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The input field has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, used on white backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse, used on neutral backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-input--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-input--reverse"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When creating an error message for an input field, use the wording below."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: empty input"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Enter [the missing information]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Enter your name'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input is too long"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must be [number] characters or less'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Delivery address must be 56 characters or less'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input is too short"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must be [number] characters or more'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Previous employer must be 3 characters or more'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input is too long or too short"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must be between [number] and [number] characters'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Justification must be between 3 and 56 characters'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input uses known characters that aren’t allowed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must not include [characters]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Reasons must not include + & ~'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input uses unknown characters that aren’t allowed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must only include [list of allowed characters]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Explanations must only include letters, numbers and commas'."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Input field uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"An input field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of an input field remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-input--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"error","depth":3,"text":"Error"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:input-field.md","_source":"content","_file":"design-system/5.components/input-field.md","_extension":"md"},{"_path":"/design-system/components/key-dates","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Key dates","description":"The Key dates component shows users a card promoting key dates or events.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use key dates to provide a card with brief summaries of up to 2 events or key dates with a call to action."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--key-dates"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use only on landing pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include in a grid of promo cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use once per page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use clear and concise content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use as the last card in the grid."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include a summary."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with navigation cards."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use the key dates card by itself."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t overload with content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with other interactive elements like links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use it to replace a call to action."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The key date card uses colour to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"add visual prominence to key information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicate an interaction to users."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-card--key-dates"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:key-dates.md","_source":"content","_file":"design-system/5.components/key-dates.md","_extension":"md"},{"_path":"/design-system/components/media-embed","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Media embed","description":"The Media embed component shows an image or video within the page content, with optional text to give context.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use media embed to add visual elements including images, videos, graphs, infographics, maps and charts to your page content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the optional text to combine the visual element with text, so that the user understands the visual element’s context. Optional text should always be used for complex media like graphs and charts with supporting data."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media can be an image or video. Images can display as small, medium or large."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When using the complex media variant, media displays at either a max width or height. This ensures it always displays the full image."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/design-system/components/media/"},"children":[{"type":"text","value":"media"}]},{"type":"text","value":" for information relating to file type, ratios and focal point."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--image-landscape"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use it with videos, images or complex images."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add data when using the complex image variant."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ensure the media is the right size so that it displays without error."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only add it to the content section of a page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add an optional image caption and metadata."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include alt text."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't include media unrelated to the page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid adding interactive elements, like links, to the caption or metadata sections."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use a video without closed captions and a transcript."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media embed has 3 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"video"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"complex media."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Depending on the variant used, you can display:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a caption"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"metadata"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a transcript link"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"accompanying data."}]}]},{"type":"element","tag":"h3","props":{"id":"image"},"children":[{"type":"text","value":"Image"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The image variant has 4 display options:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"landscape / 16:9 ratio"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"portrait / 3:4 ratio"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"square / 1:1 ratio"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"avatar / circle."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can display portrait, landscape and square as small, medium or large. Avatar only displays in small or medium."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The media gets cropped to fill the selected ratio. Make sure the media's focal point is best placed to accurately represent the media item."}]},{"type":"element","tag":"h4","props":{"id":"landscape"},"children":[{"type":"text","value":"Landscape"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--image-landscape"},"children":[]},{"type":"element","tag":"h4","props":{"id":"portrait"},"children":[{"type":"text","value":"Portrait"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--image-portrait"},"children":[]},{"type":"element","tag":"h4","props":{"id":"square"},"children":[{"type":"text","value":"Square"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--image-square"},"children":[]},{"type":"element","tag":"h4","props":{"id":"avatar"},"children":[{"type":"text","value":"Avatar"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--image-avatar"},"children":[]},{"type":"element","tag":"h3","props":{"id":"video"},"children":[{"type":"text","value":"Video"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Videos will always display at a 16:9 ratio."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A 'view transcript' link displays by default. Videos must have both closed captions and a transcript."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Include a supporting caption to give extra context to the user."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--video"},"children":[]},{"type":"element","tag":"h3","props":{"id":"complex-media"},"children":[{"type":"text","value":"Complex media"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Complex media items contain detail. They include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"infographics"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"graphs"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"flowchart"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"maps."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can support media by including:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional supporting data such as content or tables"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a view fullscreen link"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a download media link."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Optional supporting data displays in a dropdown list. Use the type of content that will best communicate your supporting data to the user. For example, some information is conveyed better by a table, rather than plain text."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Complex media will always display the full image. The media item will display at a predefined max height or width."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When the media is fullscreen, it displays in the media fullscreen component."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--complex-image"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media embed uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-embed--complex-image"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"image","depth":3,"text":"Image"},{"id":"video","depth":3,"text":"Video"},{"id":"complex-media","depth":3,"text":"Complex media"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:media-embed.md","_source":"content","_file":"design-system/5.components/media-embed.md","_extension":"md"},{"_path":"/design-system/components/media-fullscreen","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Media fullscreen","description":"The Media fullscreen component is an icon, with text instructions, beneath your media items for users to interact with so they can view one or more related media items in fullscreen.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use media fullscreen to give users the option to toggle a fullscreen view of some media items. Media fullscreen can display media and content from your page’s media embed and media gallery components. It always displays the full media item, regardless of its ratio. The item fills the width or height of the available area."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Fullscreen view includes the media item's title and caption."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media fullscreen takes over the viewport completely. A transparent background helps users to know they are still on the page. When a user closes fullscreen view, they return to that same item in the gallery."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/design-system/components/media/"},"children":[{"type":"text","value":"media"}]},{"type":"text","value":" for information relating to file type, ratios and focal point."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-gallery--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always display the media item max height or width of the content area."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include a title for the media item."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include alt text."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display the media title and caption if used in the base component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use when you need to display a media item fullscreen."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with items that aren't media."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with a completely opaque background."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use pagination for one media item only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't crop or hide the media item."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media fullscreen adopts its theming from the pagination component."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-gallery--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:media-fullscreen.md","_source":"content","_file":"design-system/5.components/media-fullscreen.md","_extension":"md"},{"_path":"/design-system/components/media-gallery","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Media gallery","description":"The Media gallery component is a series of images users can side-scroll through.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a media gallery to collate a series of related images into a gallery. Media gallery allows users to scroll through related images. It's best used for displaying images."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media gallery combines images and text to give users context within the content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media items inside a media gallery will display as either landscape or portrait, at predefined ratios."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/design-system/components/media/"},"children":[{"type":"text","value":"media"}]},{"type":"text","value":" for information relating to file type, ratios and focal point."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-gallery--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include related images only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use at least 2 images."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always use a media title."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include an optional caption to help users understand images' context and relevance to the page content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use on any page type."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use for decorative purposes."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use sensory images."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use for a single image, instead use the media embed component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with media unrelated to page content."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media embed uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicating an interaction to users"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It also adopts its theming from the pagination component."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-media-gallery--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:media-gallery.md","_source":"content","_file":"design-system/5.components/media-gallery.md","_extension":"md"},{"_path":"/design-system/components/media","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Media","description":"The Media component is a container that houses media items to use in other components on a page.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use media to communicate and differentiate specific information through visuals."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Media items sit within other components such as cards, or a media gallery."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use images if they help users complete a task. Images can make it easier for some people to understand information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use media to combine visual elements with text. This gives your content context and alignment."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-image--image"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always get copyright for all media used."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Nest media in other components."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Choose diverse images that reflect and support the diversity of Victoria."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only media that's relevant to the content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include alt text for each media item."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use appropriate resolution for the content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include a transcription for all audio content."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use a media item without alt text."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use video content without captions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't crop an image without a clear focal point."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The ratios you can use for media include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"1:1"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"4:3"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"16:9"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"21:9"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"3:1"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"avatar (circle)."}]}]},{"type":"element","tag":"h3","props":{"id":"copyright-requirements"},"children":[{"type":"text","value":"Copyright requirements"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You must get permission (a licence) to use copyright material. This includes images and text."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some images are available under an open access licence, such as "},{"type":"element","tag":"a","props":{"href":"https://au.creativecommons.net/","rel":["nofollow"]},"children":[{"type":"text","value":"Creative Commons"}]},{"type":"text","value":". Alt text is also licensed under copyright."}]},{"type":"element","tag":"h3","props":{"id":"file-resolution"},"children":[{"type":"text","value":"File resolution"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Image resolution must be appropriate for the content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don’t embed images with a large file size into content that you will publish online, such as PDFs or webpages. Optimise and compress all image files so they make it quicker for the user to access the information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design for mobile devices first. An image will scale to the device people view it on. Check that it’s easy to read on a mobile phone screen and a desktop before you publish it."}]},{"type":"element","tag":"h3","props":{"id":"focal-point"},"children":[{"type":"text","value":"Focal point"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always ensure that images work on all screen sizes. Select the focal point of the image to best position images in any area."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Consider cropping smaller images more to keep the impact of the original image."}]},{"type":"element","tag":"h3","props":{"id":"media-types"},"children":[{"type":"text","value":"Media types"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Multiple types of media can are supported and used to add meaning to content. These include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"photographs"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"decorative images"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"charts"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"graphs"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"maps"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"illustrations or drawings"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"video"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"audio."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Make sure you use the correct media type for the content it is supporting."}]},{"type":"element","tag":"h3","props":{"id":"file-types"},"children":[{"type":"text","value":"File types"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are many image file types. Seek specialist advice to optimise an image file as a vector or raster file format."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The following file types are recommended:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"photographs\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"jpeg"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"png"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"svg"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"png"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"charts/graphs\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"svg"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"png"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"video\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"mp4"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"audio\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"wav."}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"alternative-text"},"children":[{"type":"text","value":"Alternative text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All images, except purely decorative images, need a text alternative (alt text). Without this, your page will not address "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html","rel":["nofollow"]},"children":[{"type":"text","value":"WCAG 2.0 Criterion 1.1.1"}]},{"type":"text","value":" or conform with WCAG 2.0 or 2.1 AA standards. WCAG 2.0 AA standards are the minimum accessibility standards for all Victorian Government communications under the "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/brand-victoria-guidelines-logos","rel":["nofollow"]},"children":[{"type":"text","value":"Brand Victoria guidelines"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/tutorials/images/decision-tree/","rel":["nofollow"]},"children":[{"type":"text","value":"Web Accessibility initiative alt decision tree"}]},{"type":"text","value":" also guides you on whether your image needs alt text or not."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For purely descriptive images, the alt text attribute instead reads: alt=””."}]},{"type":"element","tag":"h4","props":{"id":"what-alt-text-does"},"children":[{"type":"text","value":"What alt text does"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alt text gives users who use screen readers (or devices that are not loading, or displaying, images) the information an image is meant to convey because:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a screen reader can read the alt text aloud"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"alt text is shown in the place of ‘broken’ or unloaded images on the page."}]}]},{"type":"element","tag":"h4","props":{"id":"how-to-write-alt-text"},"children":[{"type":"text","value":"How to write alt text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Alt text must serve the equivalent purpose of the image itself, by:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"being short but specific (for example, ‘a Harry Potter novel’ rather than ‘a novel’)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"explaining the image’s function in the context of the page or content section (for example, ‘Search’ rather than ‘Magnifying glass’)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"using normal punctuation that helps users understand the text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"including the image text in the alt text (for images with text)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For more guidance on writing alt text, refer to "},{"type":"element","tag":"a","props":{"href":"https://www.stylemanual.gov.au/content-types/images/alt-text-captions-and-titles-images","rel":["nofollow"]},"children":[{"type":"text","value":"Alt text, captions and titles for images"}]},{"type":"text","value":" in the Australian Government Style Manual."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"copyright-requirements","depth":3,"text":"Copyright requirements"},{"id":"file-resolution","depth":3,"text":"File resolution"},{"id":"focal-point","depth":3,"text":"Focal point"},{"id":"media-types","depth":3,"text":"Media types"},{"id":"file-types","depth":3,"text":"File types"},{"id":"alternative-text","depth":3,"text":"Alternative text"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:media.md","_source":"content","_file":"design-system/5.components/media.md","_extension":"md"},{"_path":"/design-system/components/option-button","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Option button","description":"The Option button component is a set of buttons to help users filter content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use option buttons to show a set of options a user can choose from to filter content or results."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The option button component contains labels showing a user how the filter will work."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-option-buttons--squares"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You must use a form label with option buttons. The form label explains what happens when a user chooses an option. For example, ‘Filter by starting letter’."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always use descriptive labels for individual option buttons. Labels should help users choose, and say the category of content or results each option will show. This makes the content accessible, as screen readers will read out each label."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never preselect an option button on default. Users might miss that a filter has been automatically applied."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Help users filter content or results."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use short labels only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Order labels in alphabetical order to help users scan quickly."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add an ‘apply filter’ button if the option button will be used together with other form elements."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use for a call to action."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with long content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use without a form label."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never preselect an individual option button."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Option buttons have 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"custom."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Default uses the alphabet as a filter in the option buttons."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-option-buttons--squares"},"children":[]},{"type":"element","tag":"h3","props":{"id":"custom"},"children":[{"type":"text","value":"Custom"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The custom variant lets you create your own button labels as a filter."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"These labels must clearly tell the user what filter will be applied."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-option-buttons--fluid-widths"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Option buttons use colour to show interactive states. An option button in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that option button remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-option-buttons--squares"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"custom","depth":3,"text":"Custom"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:option-button.md","_source":"content","_file":"design-system/5.components/option-button.md","_extension":"md"},{"_path":"/design-system/components/page-action","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Page action","description":"The Page action component presents a collection of links that offer users a choice of actions, such as printing or downloading a document.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the Page action component to let users print or download pages and content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Page action presents as a collection of links giving users a choice of actions at a page level. This includes printing or downloading a document."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The component displays a combination of page-level actions."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Print page: prints the page a user is on."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Print full document: prints all pages in a publication or document, not only the page the user is on."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Download document: downloads a copy of the content that the page editor uploaded. You can add more than one document to the page action component. The documents should only be what's already on the page. Don't add new or extra content."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never use page actions for anything other than the above. Don't use it for links."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The print action prints the full document (section), not just the page the user is on. The document action downloads a document that has been uploaded in the content management system."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-page-action--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use in a page's sidebar section."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use as the first component in the sidebar, above the vertical navigation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with or without one or more documents."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Include metadata with uploaded documents."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"in the content area of a page"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"with a document that has content different to the page's content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"for any other user actions."}]}]}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Page action uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons, to indicate a possible action to users"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-page-action--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au","rel":["nofollow"]},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:page-action.md","_source":"content","_file":"design-system/5.components/page-action.md","_extension":"md"},{"_path":"/design-system/components/pagination","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Pagination","description":"The Pagination component divides your content across more than one page into smaller lists to help users navigate forward and backwards.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use pagination to help users navigate forwards and backwards through your content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pagination breaks down content, making it more concise and less overwhelming. It does this by dividing your content across more than one page and into smaller lists. This makes it easier for users to find what they need."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Examples include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"search results or guidance divided into multiple website pages"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a collection of cards or media items."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pagination helps users to identify:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"how many pages or items they can navigate through"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"where the page or item they are viewing sits in the order of other pages or items"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"how they can immediately navigate to other pages or items."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pagination sits at the bottom of each page. It's a quick and easy way for users to move between each page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use pagination if your list has 10 or more results."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pagination identifies the page each result sits on. This makes it convenient for users to find again."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-page-links--page-links"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Stack standard pagination variant links vertically."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use standard and complex variants at the bottom of the body content area."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the simple variant nested in components, for example, the "},{"type":"element","tag":"a","props":{"href":"/design-system/components/media-gallery/"},"children":[{"type":"text","value":"media gallery"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/components/carousel/"},"children":[{"type":"text","value":"carousel"}]},{"type":"text","value":"."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use ellipses to replace any skipped pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use pagination to avoid an infinite scroll of results, which can be a problem for keyboard users."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use pagination for one page only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only choose one pagination variant, never mix or combine them."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always put the user first, so don't break up content if it reduces usability or performance."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use for linear user journeys such as form completion."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pagination has 3 main variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"simple, for a small number of items or used in other components"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"standard, to navigate through a small number of pages"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"complex, when there is a large number of pages to navigate through."}]}]},{"type":"element","tag":"h3","props":{"id":"simple"},"children":[{"type":"text","value":"Simple"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The simple variant is for navigating through a small number of items. Use it to nest pagination in other components, like media gallery, media fullscreen and carousel."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-pagination--simple-tally"},"children":[]},{"type":"element","tag":"h3","props":{"id":"standard"},"children":[{"type":"text","value":"Standard"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The standard variant is for navigating through a small number of pages. It has 2 options for label display:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"page titles."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"page numbers."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use page titles to give more context."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When stacking the links, do it vertically. This helps screen magnifier users when they have zoomed in to better read the content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never show the previous page link on the first page because it will confuse the user. The same goes for the next page link on the final page."}]},{"type":"element","tag":"h4","props":{"id":"page-title"},"children":[{"type":"text","value":"Page Title"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-page-links--page-links"},"children":[]},{"type":"element","tag":"h4","props":{"id":"page-number"},"children":[{"type":"text","value":"Page Number"}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-page-links--example-count"},"children":[]},{"type":"element","tag":"h3","props":{"id":"complex"},"children":[{"type":"text","value":"Complex"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The complex variant lets users navigate through a large number of pages. It's ideal for a long list of search results."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The user can interact with the next and back controls to move forward and backward through the pages. The user can navigate straight to a page by selecting its specific page number."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are 3 pages that should always remain highlighted:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The first page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The current page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The last page."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never show the previous page link on the first page because it will confuse the user. The same goes for the next page link on the final page."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Display page numbers for the:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"current page on all screen sizes"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"previous and next pages on smaller screen sizes"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"page immediately before and after the current page on larger screen sizes"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"first and final pages on all screen sizes."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-pagination--complex"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pagination uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states"}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-page-links--page-links"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-pagination--complex"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"simple","depth":3,"text":"Simple"},{"id":"standard","depth":3,"text":"Standard"},{"id":"complex","depth":3,"text":"Complex"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:pagination.md","_source":"content","_file":"design-system/5.components/pagination.md","_extension":"md"},{"_path":"/design-system/components/primary-navigation","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Primary navigation","description":"The Primary navigation component appears as a menu sitting at the top of the page and contains links to site’s content pages.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use primary navigation to help users get to where they need to go. It shows links to key areas of the website and guides users to the content they are looking for. The main way users journey through your site should be through primary navigation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use primary navigation to let users identify where they are. It helps users know their current page location within the overall site."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary navigation contains:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a site logo"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"navigation links"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional search link."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The navigation and search links expand to either a fullscreen menu or search bar."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary navigation always sits at the top of the page. It displays above all page content and components."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-primary-nav--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"h4","props":{"id":"logo"},"children":[{"type":"text","value":"Logo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The logo lets users instantly recognise which organisation or entity owns the current page. When users interact with the logo, it should direct them to the site’s homepage."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Within the primary navigation component, the logo is centred vertically."}]},{"type":"element","tag":"h4","props":{"id":"co-branding-logos"},"children":[{"type":"text","value":"Co-branding logos"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Primary navigation allows for co-branding when required. The maximum size a co-branded logo can appear is 40h x 140w pixels."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/design-system/styles/logo/"},"children":[{"type":"text","value":"logo"}]},{"type":"text","value":" for guidance and requirements including co-branding."}]},{"type":"element","tag":"h4","props":{"id":"navigation-links"},"children":[{"type":"text","value":"Navigation links"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary navigation displays the top level of the site’s information architecture (IA). When the link has child pages, a chevron (a v-shaped arrow icon) displays next to the top page name. When clicked, this opens the mega menu and displays the child pages."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When there are no child pages, there is no chevron and it takes users to the page."}]},{"type":"element","tag":"h4","props":{"id":"mega-menu"},"children":[{"type":"text","value":"Mega menu"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The mega menu gives users access to pages deeper in the site. Use it if your site or service has more than one level of navigation. If a mega menu item has a chevron, users can expand it to display its child pages."}]},{"type":"element","tag":"h4","props":{"id":"search-menu"},"children":[{"type":"text","value":"Search menu"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The menu can display a search bar to provide users the option to perform a site search."}]},{"type":"element","tag":"h4","props":{"id":"smaller-devices"},"children":[{"type":"text","value":"Smaller devices"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary navigation adapts to small devices. The breakpoint for displaying the collapsed menu is 992px."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"On smaller devices primary navigation shows as a dropdown showing only one labelled menu item. It contains more levels of navigation options, which remain hidden until the single dropdown is interacted with and opens."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To aim to conform with "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv.html","rel":["nofollow"]},"children":[{"type":"text","value":"WCAG2.0 Criterion 1.1.1"}]},{"type":"text","value":", and for increased consistency across screens sizes, the primary navigation:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"uses the menu label and a chevron"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"doesn't use the 3 bar, or 'hamburger', menu icon."}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose."}]}]},{"type":"element","tag":"h4","props":{"id":"responsive-behaviour"},"children":[{"type":"text","value":"Responsive behaviour"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Primary navigation supports only a small number of items. This is because it is a horizontal list."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Take this into account when defining your site's IA."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A maximum number of links can display before the navigation bar will respond to the collapsed menu display."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When used with a single logo:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"992-1199px breakpoint can display 6 links (including search)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"1200+ breakpoint can display 7 links (including search)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When used with a co-branded logo:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"992-1199px breakpoint can display 5 links (including search)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"1200+ breakpoint can display 6 links (including search)."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When using the collapsed menu in the navigation bar, the mega menu will also display the mobile (collapsed) version."}]},{"type":"element","tag":"h4","props":{"id":"scroll-behaviour"},"children":[{"type":"text","value":"Scroll behaviour"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The primary navigation has show and hide behaviour on user scroll."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Scroll down: the primary navigation hides from view."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Scroll up: the primary navigation shows at the top of the viewport."}]}]},{"type":"element","tag":"h4","props":{"id":"interaction-with-other-components"},"children":[{"type":"text","value":"Interaction with other components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When a site has a quick exit button (a button component that uses the destructive variant), it sits underneath the primary navigation. If the user opens the mega menu or search menu, the quick exit button moves inside the menu container. So the quick exit action will always be available to users."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use across all pages of your site."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use descriptive, recognisable link labels."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display links in priority order: move from left (for most-used links) to right (for least-used links)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Base your navigation's structure on user research."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Structure navigation to prioritise tasks and information your research says users need the most."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with optional user action, such as login, if required."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t label links with jargon or unfamiliar terms."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use more than 150 characters per menu item."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Hover should never be used to expand dropdown lists as it is not reliably accessible or responsive."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"An organisational structure should not be used as a navigation stucture."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Primary navigation uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"visual prominence and brand recognition"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Primary navigation also adopts its theming from the search bar component."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-primary-nav--default-story"},"children":[]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"accessibility"},"children":[{"type":"text","value":"Accessibility"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To aim to conform with "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum","rel":["nofollow"]},"children":[{"type":"text","value":"WCAG2.2 Criterion 2.5.8"}]},{"type":"text","value":", the primary navigation bar uses the space either side of menu items. This allows for increased touch targets and the use of the block focus state styling."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2.5.8 Target Size (Minimum) The size of the "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-target","rel":["nofollow"]},"children":[{"type":"text","value":"target"}]},{"type":"text","value":" for "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-pointer-input","rel":["nofollow"]},"children":[{"type":"text","value":"pointer inputs"}]},{"type":"text","value":" is at least 24 by 24 "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-css-pixel","rel":["nofollow"]},"children":[{"type":"text","value":"CSS pixels"}]},{"type":"text","value":","}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"accessibility","depth":2,"text":"Accessibility"}]}},"_type":"markdown","_id":"content:design-system:5.components:primary-navigation.md","_source":"content","_file":"design-system/5.components/primary-navigation.md","_extension":"md"},{"_path":"/design-system/components/profile","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Profile","description":"The Profile component shows an avatar (image) on your page, with supporting text to display key information.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use profile to highlight key information to users by showing an avatar image with summary content. This highlights key information to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each row of content includes a:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"summary."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It's used to display key information, including:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"date"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"category."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use the profile component for displaying simple information. For data or complex information, consider using a table."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-profile--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep label as short as possible (under 2 words, like a name)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep all content clear and concise."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display at the top of profile pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always add alt text to the image."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use an image that's relevant to the summary."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use a label that doesn't match the summary."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use unimportant, complex or longform content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't include punctuation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use full URLs in the label or summary."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:profile.md","_source":"content","_file":"design-system/5.components/profile.md","_extension":"md"},{"_path":"/design-system/components/radio-button","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Radio button","description":"The Radio button component shows a list of options, with a radio (round) button to the left of each option’s description.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use radio buttons to let users select one option from a list."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"They help users make a single selection from a list of available items."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never use radio buttons if a user may select multiple options. Use a checkbox component instead."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-radio-group--default-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use radio buttons with:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"form label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"radio label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional requirement label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional hint text."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Radio buttons should always have a form and radio label."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always use a descriptive label for groups of radio buttons. The label should say what the options represent and should help the user to choose one. Doing so ensures good accessibility, as screen readers read each option's label."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Not all users will know the visual difference between a radio button and a checkbox. You could add extra instructions to guide then, like 'select one option’."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use if only one options needs selecting from a list."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the reverse variant on grey backgrounds."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always write clear and concise radio label descriptions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Ensure you list options in a logical and unbiased manner."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If unsure about the list order, place from most common, to least common."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use hints to tell users they can only select one option."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always put the radio button on the left side of its label description to allow users, particularly those using screen magnifiers, to find labels."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use for lists with more than one possible option. Use checkboxes for these."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use a radio group with an horizontal alignment for displaying more than 2 options."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't list all possible options. Add an option for 'other'."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Radio buttons have 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, used on white backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse, used on neutral backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-radio-group--default-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-radio-group--reverse-variant"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling. Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When creating an error message for radio buttons, use the wording below."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: invalid response to a yes/no question"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user understand why they would say yes."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select yes if [the information is true]’."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Select yes if you drive a car'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: invalid response to a choice (other than yes/no) from 2 options"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user choose the option that applies to them."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select if [the choice you are asking the user to make].'"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Select if you drive a car or truck’."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: invalid response to a choice from 3 or more options"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Structure this message to help the user to choose a single option from 3 or more options."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Select the [singular piece of information you are seeking from the user].'"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Select the day of the week you drive the most.'"}]}]},{"type":"element","tag":"docs-example","props":{"id":"forms-radio-group--default-variant"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Radio buttons use colour for interactive states."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A radio button component in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that radio button remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-radio-group--default-variant"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"error","depth":3,"text":"Error"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:radio-button.md","_source":"content","_file":"design-system/5.components/radio-button.md","_extension":"md"},{"_path":"/design-system/components/related-links","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Related links","description":"The Related links component is a list of links to help users discover related content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use related links to present a user with a list of links. They can use these to explore content related to the current page or context, or to the next best action."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use if you’re presenting the user with related information or actions to help them deep dive into content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't use related links for linking to unrelated content."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-related-links--related-links"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use to help users discover related content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use in the sidebar section pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use at least 2 links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use no more than 8 links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep description clear, concise and specific to each link."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't add unrelated links."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't overload each link with too many words."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use punctuation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't link to documents or videos - instead, embed them."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't include other interactive elements, like buttons."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:related-links.md","_source":"content","_file":"design-system/5.components/related-links.md","_extension":"md"},{"_path":"/design-system/components/results-listing","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Results listing","description":"The Results listing component shows a list of search result items, with each item displaying key information relevant to that search.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a results listing to display content results, like search results or news items. It surfaces (retrieves and shows) important information to the user."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A results listing shows multiple results items, each with their own:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"title, telling the user the name of the result"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"summary, summing up the result’s content for the user"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"URL, telling the user the website address for the result"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"featured content, visually highlighting key content from the result"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"topic/category, putting the result into its context within a broader page or site"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"date, showing a result’s published (simple variant) or updated (default variant) date"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"keyword term bold styling, showing the search term(s) in bold in the result displayed."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When displaying the results listing, consider a user's needs. Only display what will help them to make an informed decision."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-result-listing--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Put the search term in bold."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Test results so they are correct and relevant to the search term."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep descriptions under 150 words."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display up to 10 results."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't display the result title only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t make only the title interactive, ensure the entire result is interactive."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use both updated date and published date, choose one only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't display more than 10 results."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A result listing's 2 main variants are:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"simple."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default results listing has the option of surfacing key information when required."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Key information can include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"audience"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"status"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"grants metadata such as grant value."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default variant users the updated date by default."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-result-listing--with-details"},"children":[]},{"type":"element","tag":"h3","props":{"id":"simple"},"children":[{"type":"text","value":"Simple"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The simple variant displays the page title with accompanying metadata."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It uses the published date by default, which is automatically pulled in from the metadata."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We recommend using this variant when displaying simple results, like news items."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-result-listing--with-meta"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Results listing uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicating to the user there is an interaction possible"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interactive states."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When displaying key information such as status, the icon should adopt the relevant semantic colour."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-result-listing--with-details"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"simple","depth":3,"text":"Simple"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:results-listing.md","_source":"content","_file":"design-system/5.components/results-listing.md","_extension":"md"},{"_path":"/design-system/components/search-bar","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Search bar","description":"The Search bar shows a text input field with a search button to let users enter keywords and search content on the website.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the search bar to help users find what they are looking for."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users often rely on search to find the information they need. You can use it as an alternative to on-page navigation."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users will use keywords in the search bar, often using different words or phrases. Search is especially helpful for users when navigating site that have many pages."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The search bar includes:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"text - placeholder and input text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"search button label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"search button icon"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional predictive list - present suggested keywords to the user"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"optional refine search link - expand to present advanced filters to the user."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-search-bar--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"h4","props":{"id":"input-text"},"children":[{"type":"text","value":"Input text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Include short, descriptive placeholder text. This tells the user what they can search for."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The text the user inputs replaces the placeholder text."}]},{"type":"element","tag":"h4","props":{"id":"search-button"},"children":[{"type":"text","value":"Search button"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The search button contains a button label and search icon."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Smaller devices show a responsive variant with:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"only a search icon"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"no button label."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This gives the user more space to write search text. Users know that a magnifying glass represents a search function."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The word ‘Search’ must appear in the alt text for screen readers."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The button type should be a submit button. This lets a user conduct a search:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"using the enter/return key"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"using fewer keystrokes"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"by choosing a suggestion (if applicable)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"that afterwards, still displays the search keyword."}]}]},{"type":"element","tag":"h4","props":{"id":"predictive-keyword-list"},"children":[{"type":"text","value":"Predictive keyword list"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Useful suggestions let users find what they need with less effort. They also reduce spelling errors and typing."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use a short, ordered list of no more than 10 keyword suggestions."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"They should appear after only a few keystrokes."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Let the user scroll through keyword suggestions using keyboard navigation, with the Esc key to exit."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Scrolling ‘down’ past the last suggestion should loop the user back to the first one. Scrolling ‘up’ before the first suggestion should loop the user to the last (bottom) one."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the search bar to let users search your site (site search)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use default search field on white page background."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use reverse search field on grey background."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use menu variant in the mega menu only."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use only default and reverse variants with predictive list suggestions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Even if it's hidden from view, always use a form label for screen readers."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Keep placeholder text concise and descriptive."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use default or reverse variants in the mega menu."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use filters or refine search with the menu variant."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use multiline search inputs."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Revised search shouldn't be by default."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with the refine search link if no filters are available."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The 3 search variants include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"menu."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is standard search. The button initiates search based on the text input."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-search-bar--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the reverse variant when on a neutral background and you can't use the default variant."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-search-bar--reverse"},"children":[]},{"type":"element","tag":"h3","props":{"id":"menu"},"children":[{"type":"text","value":"Menu"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use this in the mega menu. See "},{"type":"element","tag":"a","props":{"href":"/design-system/components/primary-navigation/"},"children":[{"type":"text","value":"Primary Navigation"}]},{"type":"text","value":" for more information."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-search-bar--menu"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The search bar uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicating an action to users"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"interaction states."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-search-bar--default-story"},"children":[]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-search-bar--menu"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"menu","depth":3,"text":"Menu"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:search-bar.md","_source":"content","_file":"design-system/5.components/search-bar.md","_extension":"md"},{"_path":"/design-system/components/skip-link","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Skip link","description":"The Skip link component makes your page more accessible and easier to navigate, by helping keyboard users skip to the main content on a page.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use skip links to let users:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"navigate quickly through links and form elements"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"navigate your page when interacting only through the keyboard"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"let users navigate directly to the main page content."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Skip links bypass the primary navigation links (the top horizontal menu items appearing on every page)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Until the user activates it through a keyboard press, a skip link won’t display."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When visible, it's always the first item on a page and pushes down all page content."}]},{"type":"element","tag":"docs-example","props":{"id":"core-layout-skip-links--stand-alone"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"It must be on every page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"When visible, it must be the first element on the page."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use at the top of the page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't edit the styling."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't overlay page content. It must push down the page content."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The skip link uses the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with a skip link. This could be jarring or confusing to users."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-layout-skip-links--stand-alone"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme, see "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:skip-link.md","_source":"content","_file":"design-system/5.components/skip-link.md","_extension":"md"},{"_path":"/design-system/components/social-share","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Social share","description":"The Social share component shows a list of links to help users to share pages to social media.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use social share to let users share pages to their own social media channels."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It uses the social media icons to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"provide extra context"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"distinguish between the different social media channels."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The link labels should clearly indicate the platform the user is sharing the page to."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-social-share--social-share"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use it to enable users to share pages to social media."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Place in sidebar section of pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Link labels should be the social media platform name."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use for links to sites that aren't social media channels."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid placing in a page's body section."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with labels that aren't social media platform names."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Social share uses colour for:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"indicating an action to users"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"icons."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-social-share--social-share"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:social-share.md","_source":"content","_file":"design-system/5.components/social-share.md","_extension":"md"},{"_path":"/design-system/components/statistics-grid","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Statistics grid","description":"The Statistics grid component shows a summary of 2 to 8 key statistics in a grid layout.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the statistics grid to present a user with multiple pieces of key information. This can help the user to determine if a page is relevant to them or not."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each cell features:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a key statistic"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"content to give the statistic context."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A statistics grid can act as a summary to help users view multiple related pieces of content."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-stats-grid--on-light"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use text or numbers in the content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Give a high-level summary of key information."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The grid will always span the full available width."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Place in the body section of pages."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with under 2 or over 8 statistics."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't overload with content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use when you need a large amount of text for context."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use images or graphics."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't add links."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The statistic grid has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, for white backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse, for neutral backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-stats-grid--on-light"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-stats-grid--on-dark"},"children":[]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:statistics-grid.md","_source":"content","_file":"design-system/5.components/statistics-grid.md","_extension":"md"},{"_path":"/design-system/components/table","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Table","description":"The Table component makes it easier for users to scan and compare data and content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A table is a systematic grid of data or content. They display in rows and columns to let users scan, analyse and compare information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users tend to read tables one row or column at a time. So, it's important that content is simple and logical."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A table can include a combination of:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"row and/or column headings that help users know what the rows and columns represent"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"body rows that display data or content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a table caption describing its content and helping users find, navigate and understand its information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a table footer that provides additional details, if required"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an expandable section with expandable rows, which can show extra related or supplementary information or data."}]}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-data-table--structured-content"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Table content should be left-aligned because we read from left to right.  However, tables with financial figures should have columns that contain numerals set to right-aligned."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only left-align numbers that are arbitrary identifiers, known as 'nominal numbers'. These are numbers you cannot compare or combine arithmetically. These can include postal codes, IP addresses, or phone numbers. Column headers follow the alignment of the data."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The data table uses a zebra-stripe styling which alternates table row colours. This makes it easier for the user to scan horizontal information."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't include too many columns as it's easier for users to scan down a list than to scroll across a page. So, consider more rows before more columns."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tables can respond differently based on how your website is built. Where tables do not respond, they will display with a horizontal scroll bar to view all the content. Where tables do respond on smaller screens, tables will stack vertically."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The complex variant has the option of expandable extra information in nested rows. This is shown by a dropdown toggle."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add a caption or footer, if required."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use for complex content and data sets."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Align numbers to the right (except nominal numbers)."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Align headers according to their column data."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't repeat the same content in both the caption and summary."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use with long form content. Cell content should be brief and scannable."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use without zebra-stripe styling.."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't centre-align content."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Table has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"simple, best used for simple data."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"complex, best used for complex data."}]}]},{"type":"element","tag":"h3","props":{"id":"simple"},"children":[{"type":"text","value":"Simple"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-content--table-scrollable"},"children":[]},{"type":"element","tag":"h3","props":{"id":"complex"},"children":[{"type":"text","value":"Complex"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The complex variant is best used to display complex data sets."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-data-table--structured-content"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Table data uses colour to indicate an action to the user."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-data-table--custom-content"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"simple","depth":3,"text":"Simple"},{"id":"complex","depth":3,"text":"Complex"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:table.md","_source":"content","_file":"design-system/5.components/table.md","_extension":"md"},{"_path":"/design-system/components/tabs","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Tabs","description":"The Tab component lets you organise related content so that users can switch between related information on the same page.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use tabs to let users stay on the same page, but access more content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only one tab is active at a time. Tabs help users navigate between, and display and hide, relevant content on your page so long as:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"you can split, categorise and clearly label the content"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"there is a section more relevant for most users, which is placed first"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"seeing the all sections at the same time is not needed"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"you have a minimum of 2 tabs."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use tabs to organise content so a user doesn't have to navigate away to complete their task. Tabs are useful for maps or dashboards."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Never use tabs if your content is sequential. Use it to present related content together, as a group."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tabs include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"labels"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an optional icon."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Icons tell the user the category of content under a tab. Keep icons simple and easily understood, and reinforce the label."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-tabs--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Order your tabs according to importance."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Labels should clearly and succinctly describe the content within the tab."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only use tabs to group content that all sits at the same level of hierarchy."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Limit labels to one word and ensure they are unique."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use tabs within tabs."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't display disabled tabs."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't display more than one row of tabs when using the horizontal variant."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use tabs for important information, since a user will choose which tab to open, so they may not see some content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use if your content is short, instead use lists or paragraph text."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Tabs are not a substitute for primary navigation, so never use tabs as primary navigation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use tabs to tell the user about their progress through a page or content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use tabs when the user needs to compare information, since only one tab is visible at a time."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tabs have 2 display variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"vertical."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The default variant sets the tab group bottom border to span the full available content width."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-tabs--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"vertical"},"children":[{"type":"text","value":"Vertical"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The vertical variant sets the tab group left border to span the height of the tab group."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-tabs--vertical"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tabs use colour to represent interaction states."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-tabs--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"vertical","depth":3,"text":"Vertical"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:tabs.md","_source":"content","_file":"design-system/5.components/tabs.md","_extension":"md"},{"_path":"/design-system/components/tag","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Tag","description":"The Tag component adds, and draws attention to, a category name for your content.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use tags to help categorise content. Tags help users to scan and find content that's relevant to them."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content can have more than one category or theme. Using the tag component helps indicate this to the user."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When naming tags, use a noun or adjective. Don't use verbs as a user may confuse the tag with an action."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-tag--neutral"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use keywords."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use to draw attention to a category of content or information."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use nouns or adjectives."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use punctuation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't overuse tags."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use icons in the tags."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use as a heading."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use more than 2 words."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use as a link or action."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tags have 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, for use on neutral backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"neutral, for use on white backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-tag--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"neutral"},"children":[{"type":"text","value":"Neutral"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the reverse variant when the chip appears on the primary colour."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-tag--neutral"},"children":[]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"neutral","depth":3,"text":"Neutral"}]}]}},"_type":"markdown","_id":"content:design-system:5.components:tag.md","_source":"content","_file":"design-system/5.components/tag.md","_extension":"md"},{"_path":"/design-system/components/text-area","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Text area","description":"The Text area component lets users select one option from a list.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use text area so users can enter multiple lines of text."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text area is used when information longer than a single line of text is needed or expected. For example, comments fields."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text areas can be resized and can be used with a character counter."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don’t use text area for succinct responses such as email addresses or names. In this case, you should use the input field component."}]},{"type":"element","tag":"docs-example","props":{"id":"forms-textarea--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"how-this-component-works"},"children":[{"type":"text","value":"How this component works"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You must use a form label with a text area component."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use text area with:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"requirement label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hint text"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"metadata"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"placeholder text."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Guide users about the amount of text wanted. Set the text area to match the amount preferred. It has no maximum height, but has a minimum height of 96px."}]},{"type":"element","tag":"h4","props":{"id":"resize-handle"},"children":[{"type":"text","value":"Resize handle"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users can change the text area height (but not width) with the resize handle. They can also scroll within the container."}]},{"type":"element","tag":"h4","props":{"id":"avoid-placeholder-text"},"children":[{"type":"text","value":"Avoid placeholder text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information."}]},{"type":"element","tag":"h4","props":{"id":"hint-text"},"children":[{"type":"text","value":"Hint text"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hint text can be used to tell the user what, or how, to successfully complete a text area."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, hint text can include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"an overall description of the text area"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"hints for what kind of information needs to be input"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"specific formatting examples or requirements."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form."}]},{"type":"element","tag":"h4","props":{"id":"character-count"},"children":[{"type":"text","value":"Character count"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A character count can sit below the text area field. It tells users the maximum characters and their input’s current count."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users can enter more characters than the maximum. The character count then says they’ve entered too many characters before they submit the text area. The user can copy or reduce their full answer."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Even though there is a live character count, normal error responses (below) must appear if a user tries to submit a text area with too many characters."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only use character count when there is a good reason. For example, legal reasons, technical reasons or evidence users will give more text than needed."}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always use a label for text areas."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use hint text to specify helpful information such as specific formatting or information requirements."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Specify character counts when required."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use without a label"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid placeholder text because it can cause accessibility issues."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t disable copy and paste."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t set a minimum or maximum input limit without explicitly saying this in the character count."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Do not use hint text if it isn’t relevant or meaningful to the user."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use placeholder text to give instructions."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t write ambiguous error messages only stating what's wrong - explain how the user can fix it."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The text area has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default, used on white backgrounds"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"reverse, used on neutral backgrounds."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-textarea--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"reverse"},"children":[{"type":"text","value":"Reverse"}]},{"type":"element","tag":"docs-example","props":{"id":"forms-textarea--reverse"},"children":[]},{"type":"element","tag":"h3","props":{"id":"error"},"children":[{"type":"text","value":"Error"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All form inputs share error state styling."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When creating an error message for an input field, use the wording below."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: empty input"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘Enter [the missing information]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Enter your name'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input is too long"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must be [number] characters or less'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Delivery address must be 56 characters or less'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input is too short"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must be [number] characters or more'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Previous employer must be 3 characters or more'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input is too long or to short"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must be between [number] and [number] characters'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: 'Justification must be between 3 and 56 characters'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input uses known characters that aren’t allowed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must not include [characters]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Reasons must not include + & ~'."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Error: input uses unknown characters that aren’t allowed"}]}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Error message: ‘[The input] must only include [list of allowed characters]'."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Example: ‘Explanations must only include letters, numbers and commas'."}]}]},{"type":"element","tag":"docs-example","props":{"id":"forms-textarea--error"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Text area uses colour to show interactive states. A text area field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a text area remains consistent while it transitions from a focus to an active state."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"forms-textarea--default-story"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This occurs across all form and input elements, for a consistent experience."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"how-this-component-works","depth":3,"text":"How this component works"},{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"reverse","depth":3,"text":"Reverse"},{"id":"error","depth":3,"text":"Error"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:text-area.md","_source":"content","_file":"design-system/5.components/text-area.md","_extension":"md"},{"_path":"/design-system/components/timeline","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Timeline","description":"The Timeline component contains blocks of content displayed in a linear order.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A timeline displays a visual journey of short blocks of content in a linear order. Each block can be actionable for users to navigate through to related content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A timeline can include a combination of:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"heading"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"subheading"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"summary"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"image."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use timelines to show a clear and sequential order of information. This assists users in linking pieces of information together."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some examples include:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"dates"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"steps"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"stages"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"events"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"actions"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"outcomes."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The timeline component is ordered from top to bottom."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use between 3 to 8 discrete sections of content, so the user is not overwhelmed."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-timeline--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always include a title for the entire timeline."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add a heading, subheading, short summary and optional image for each block."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Only include 3 to 8 blocks per timeline."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add a link if you're providing more details on another page."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't add fewer than 3 or more than 8 blocks."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use without a heading for each block."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never include unrelated content."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use if content doesn't flow in a sequential or linear order. Consider bullets points instead."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"variants"},"children":[{"type":"text","value":"Variants"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Timeline has 2 variants:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"progressive."}]}]},{"type":"element","tag":"h3","props":{"id":"default"},"children":[{"type":"text","value":"Default"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is for steps or stages along a process. Use the default timeline when progress is not relevant to the user."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-timeline--default-story"},"children":[]},{"type":"element","tag":"h3","props":{"id":"progressive"},"children":[{"type":"text","value":"Progressive"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the progressive variant to show the progress or status of the content to the user."}]},{"type":"element","tag":"docs-example","props":{"id":"core-containers-timeline--progressive-active-2"},"children":[]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Timeline uses colour to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"show progress"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"highlight interactive states."}]}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-containers-timeline--progressive-active-2"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"variants","depth":2,"text":"Variants","children":[{"id":"default","depth":3,"text":"Default"},{"id":"progressive","depth":3,"text":"Progressive"}]},{"id":"theming","depth":2,"text":"Theming"}]}},"_type":"markdown","_id":"content:design-system:5.components:timeline.md","_source":"content","_file":"design-system/5.components/timeline.md","_extension":"md"},{"_path":"/design-system/components/vertical-navigation","_dir":"components","_draft":false,"_partial":false,"_locale":"","title":"Vertical navigation","description":"The Vertical navigation component displays a list of links to help users navigate a section of related pages.","layout":"page","label":"Core","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"usage"},"children":[{"type":"text","value":"Usage"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use vertical navigation to help users navigate a section of related pages."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use vertical navigation to:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"let users find and navigate to relevant information"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"show the user where, within your site’s content hierarchy, the page they are viewing is located"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"show 4 nested content sections (parent sections) and a heading for the names of each section."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vertical navigation is placed next to your page’s body content."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A chevron (v-shaped icon) next to each parent section lets users expand that parent section. This reveals the names of content pages falling within the parent section (child pages). Child page links are hidden by default."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The chevron flips up and parent sections stay expanded until the user interacts with the chevron to hide the child pages. This helps the user find what they need and minimises visual clutter."}]},{"type":"element","tag":"docs-example","props":{"id":"core-navigation-vertical-navigation--vertical-navigation"},"children":[]},{"type":"element","tag":"h3","props":{"id":"when-and-how-to-use"},"children":[{"type":"text","value":"When and how to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use in a page's sidebar."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Always keep the navigation links short. You can use a shorter version of the page title."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Display up to 4 levels of navigation."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Add a link for the section's 'home' page."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use with at least 4 links."}]}]},{"type":"element","tag":"h3","props":{"id":"when-and-how-not-to-use"},"children":[{"type":"text","value":"When and how not to use"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't embed on a page that doesn't have a sidebar."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't add more than 4 child levels. Users will not see the indents, so navigation will become confusing."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use on a site with fewer than 5 pages."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don’t use with icons."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Never use it to link to other sites."}]}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"theming"},"children":[{"type":"text","value":"Theming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vertical navigation uses colour and active state focus to highlight the current page the user is on."}]},{"type":"element","tag":"docs-theme-chooser","props":{},"children":[{"type":"element","tag":"docs-example","props":{"id":"core-navigation-vertical-navigation--vertical-navigation"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To create your own theme see "},{"type":"element","tag":"a","props":{"href":"/design-system/design/theming-guidance-for-designers"},"children":[{"type":"text","value":"theming guidance for designers"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"/design-system/develop/theming"},"children":[{"type":"text","value":"theming guidance for developers"}]},{"type":"text","value":"."}]},{"type":"element","tag":"hr","props":{},"children":[]},{"type":"element","tag":"h2","props":{"id":"rationale"},"children":[{"type":"text","value":"Rationale"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To show the user which page in the vertical navigation they are currently on, the active state is used. This displays as an underline in addition to colour, to aim to conform with the "},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html","rel":["nofollow"]},"children":[{"type":"text","value":"Web Content Accessibility Guidelines 2.0 Success Criterion 1.4.1"}]},{"type":"text","value":"."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-without-color","rel":["nofollow"]},"children":[{"type":"text","value":"1.4.1"}]},{"type":"text","value":" Use of Color:"}]},{"type":"text","value":" Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element."}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"usage","depth":2,"text":"Usage","children":[{"id":"when-and-how-to-use","depth":3,"text":"When and how to use"},{"id":"when-and-how-not-to-use","depth":3,"text":"When and how not to use"}]},{"id":"theming","depth":2,"text":"Theming"},{"id":"rationale","depth":2,"text":"Rationale"}]}},"_type":"markdown","_id":"content:design-system:5.components:vertical-navigation.md","_source":"content","_file":"design-system/5.components/vertical-navigation.md","_extension":"md"},{"_path":"/framework","_dir":"","_draft":false,"_partial":false,"_locale":"","title":"Ripple Framework","description":"Ripple framework contains the tools for building SDP sites using the Ripple design system components.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Ripple Framework","src":"/assets/img/ripple-header.png","style":"margin-top: -20px; padding-bottom: 50px; "},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"what-is-it"},"children":[{"type":"text","value":"What is it?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Ripple design system consists of the design elements and components used to build "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"any"}]},{"type":"text","value":" web application using the Victorian government brand. Ripple "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"framework"}]},{"type":"text","value":" is a collection of "},{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/nuxt"},"children":[{"type":"text","value":"Nuxt 3"}]},{"type":"text","value":" modules and "},{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/nuxt-layers"},"children":[{"type":"text","value":"layers"}]},{"type":"text","value":" primarily used to create headless SDP websites using the Tide Drupal CMS."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"ripple is made up of Figma design, CSS styles, Vue JS components and Nuxt JS Sites","src":"/assets/img/modules/rpl-modules.png","className":["rpl-u-padding-t-4"]},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"whos-it-for"},"children":[{"type":"text","value":"Who's it for?"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Whilst the Ripple UI components can be used in non SDP projects, Ripple framework assumes a Tide Drupal backend in most cases."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using the Ripple framework, developers are able to build headless frontend websites that derive content from the Tide Drupal CMS via it's JSON API."}]},{"type":"element","tag":"h3","props":{"id":"sdp-architecture"},"children":[{"type":"text","value":"SDP architecture"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"SDP Architecture","src":"/assets/img/modules/sdp-architecture.png","className":["rpl-u-padding-12"]},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To find out more about Single Digital Presence please visit "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/single-digital-presence","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/single-digital-presence"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"what-is-it","depth":2,"text":"What is it?"},{"id":"whos-it-for","depth":2,"text":"Who's it for?","children":[{"id":"sdp-architecture","depth":3,"text":"SDP architecture"}]}]}},"_type":"markdown","_id":"content:framework:1.index.md","_source":"content","_file":"framework/1.index.md","_extension":"md"},{"_path":"/framework/key-concepts/nuxt","_dir":"key-concepts","_draft":false,"_partial":false,"_locale":"","title":"Nuxt","description":"Nuxt is the framework used in Ripple to deliver headless SDP websites that connect to Tide Drupal backends for content.","layout":"page","links":[{"text":"Nuxt documentation","url":"https://nuxt.com/"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt is a framework for building web applications that can be rendered both server side using Node.js and client side with Vue.js components. Nuxt is the framework used in Ripple to deliver headless SDP websites that connect to Tide Drupal backends for content."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"\"Nuxt is a fantastic choice for teams building a production-grade product on the web. It aims to bake in performance best practices while maintaining excellent Vue.js DX\""}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Addy Osmani - Chief Engineer of Chrome"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It is recommended that developers new to Ripple familiarise themselves with Nuxt by reading the documentation site, in particular, the following sections:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/getting-started/introduction","rel":["nofollow"]},"children":[{"type":"text","value":"Introduction · Get Started with Nuxt "}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/guide/concepts/vuejs-development","rel":["nofollow"]},"children":[{"type":"text","value":"Vue.js Development · Nuxt Concepts"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/guide/concepts/server-engine","rel":["nofollow"]},"children":[{"type":"text","value":" Server Engine · Nuxt Concepts "}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/guide/directory-structure/nuxt","rel":["nofollow"]},"children":[{"type":"text","value":".nuxt/ · Nuxt Directory Structure"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/guide/going-further/layers","rel":["nofollow"]},"children":[{"type":"text","value":"Authoring Nuxt Layers · Nuxt Advanced"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For support and help working with Nuxt please see "},{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/community/getting-help","rel":["nofollow"]},"children":[{"type":"text","value":"https://nuxt.com/docs/community/getting-help"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://nuxt.com/support/solutions","rel":["nofollow"]},"children":[{"type":"text","value":"https://nuxt.com/support/solutions"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are a number of recommended resources for learning Nuxt 3 including:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://masteringnuxt.com/nuxt3","rel":["nofollow"]},"children":[{"type":"text","value":"https://masteringnuxt.com/nuxt3"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://frontendmasters.com/courses/nuxt/","rel":["nofollow"]},"children":[{"type":"text","value":"https://frontendmasters.com/courses/nuxt/"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=ww94Jvi8JJo","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.youtube.com/watch?v=ww94Jvi8JJo"}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:framework:2.key-concepts:1.nuxt.md","_source":"content","_file":"framework/2.key-concepts/1.nuxt.md","_extension":"md"},{"_path":"/framework/key-concepts/nuxt-layers","_dir":"key-concepts","_draft":false,"_partial":false,"_locale":"","title":"Layers","description":"Nuxt layers are used to encapsulate Ripple functionality to share and reuse","layout":"page","links":[{"text":"Nuxt layers documentation","url":"https://nuxt.com/docs/getting-started/layers"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"nuxt"},"children":[{"type":"text","value":"Nuxt"}]},{"type":"text","value":" 3 provides a way to encapsulate part of a Nuxt project into what they call a Layer."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt layers are a powerful feature that you can use to share and reuse partial Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain."}]}]},{"type":"element","tag":"iframe","props":{"width":800,"height":500,"className":["rpl-u-padding-t-8","rpl-u-padding-b-8"],"style":"width: 100%","src":"https://www.youtube.com/embed/lnFCM7c9f7I","title":"YouTube video player","frameBorder":"0","allow":"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share","allowFullScreen":true},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 2, we utilise Nuxt Layers extensively to share isolated features between SDP sites. A good example is a content type. Using a Nuxt Layer we are able to add the components, API endpoints, composables, etc needed to implement the feature, without having the overhead of a Nuxt Module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A great feature of Nuxt Layers is that you can reference them from any public or private Git repo in addition to publishing via an NPM module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Below is a diagram showing how Ripple 2 features are distributed through Nuxt layers and used within projects."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Ripple layers architecture diagram. Shows how modules can be shared between projects","src":"/assets/img/modules/layers.png"},"children":[]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:framework:2.key-concepts:2.nuxt-layers.md","_source":"content","_file":"framework/2.key-concepts/2.nuxt-layers.md","_extension":"md"},{"_path":"/framework/key-concepts/api-endpoints","_dir":"key-concepts","_draft":false,"_partial":false,"_locale":"","title":"API endpoints","description":"Ripple creates an API that handles the translation of Drupal data into exactly whats needed on the page.","layout":"page","links":[{"text":"Nuxt API routes documentation","url":"https://nuxt.com/docs/guide/directory-structure/server#api-routes"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 2 we use API routes to create a "},{"type":"element","tag":"a","props":{"href":"https://medium.com/mobilepeople/backend-for-frontend-pattern-why-you-need-to-know-it-46f94ce420b0","rel":["nofollow"]},"children":[{"type":"text","value":"backend for frontend"}]},{"type":"text","value":" API that handles communicating with the Drupal Tide JSON API and maps the response to only what is required to render the page in Ripple."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"API routes diagram","src":"/assets/img/modules/api-routes.png"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"nitro-server-routes"},"children":[{"type":"text","value":"Nitro server routes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt 3 introduces the concept of "},{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/guide/directory-structure/server#api-routes","rel":["nofollow"]},"children":[{"type":"text","value":"server API routes"}]},{"type":"text","value":"   powered by the "},{"type":"element","tag":"a","props":{"href":"https://nitro.unjs.io/","rel":["nofollow"]},"children":[{"type":"text","value":"Nitro rendering engine"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://github.com/unjs/h3","rel":["nofollow"]},"children":[{"type":"text","value":"H3"}]},{"type":"text","value":" server."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nitro is the server layer that creates API routes in a Nuxt application. Nitro plugins run at build time and we use them to add the mapping needed to tell Ripple-tide-api package how to respond to a Drupal JSON API request for a content type node"}]},{"type":"element","tag":"h2","props":{"id":"ripple-tide-api"},"children":[{"type":"text","value":"Ripple Tide API"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple Tide API is the module that handles communication with Tide Drupal JSON API. It provides a wrapper service for API calls to Tide and provides an interface for adding mapping functions which transform the response from Drupal into only what's needed for rendering the website. This makes creating pages easier and improves performance by moving all data transformation into the server bundle where it can be easily cached."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"API routes diagram","src":"/assets/img/modules/ripple-tide-api.png"},"children":[]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"nitro-server-routes","depth":2,"text":"Nitro server routes"},{"id":"ripple-tide-api","depth":2,"text":"Ripple Tide API"}]}},"_type":"markdown","_id":"content:framework:2.key-concepts:3.API-endpoints.md","_source":"content","_file":"framework/2.key-concepts/3.API-endpoints.md","_extension":"md"},{"_path":"/framework/key-concepts/content-types","_dir":"key-concepts","_draft":false,"_partial":false,"_locale":"","title":"Content types","description":"Implementing content type specific page layouts","layout":"page","links":[{"text":"Drupal content types","url":"https://www.drupal.org/docs/7/understanding-drupal/content-types"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content types are a Drupal concept that allow for modelling content using fields to describe the data structure. See the "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/docs/7/understanding-drupal/content-types","rel":["nofollow"]},"children":[{"type":"text","value":"Drupal documentation"}]},{"type":"text","value":" for more details."}]},{"type":"element","tag":"h2","props":{"id":"ripple-content-types"},"children":[{"type":"text","value":"Ripple content types"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As SDP is a "},{"type":"element","tag":"a","props":{"href":"https://salsa.digital/insights/dissecting-the-single-digital-presence-platform","rel":["nofollow"]},"children":[{"type":"text","value":"headless CMS using a decoupled architecture"}]},{"type":"text","value":" once we have modelled content in Tide, we need a way to render it into a template that can be delivered to end users. Ripple content types allow you to support custom templates for new content types."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple content types consist of the following parts:"}]},{"type":"element","tag":"h3","props":{"id":"api-mapping"},"children":[{"type":"text","value":"API Mapping"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/api-endpoints"},"children":[{"type":"text","value":"API Endpoints"}]},{"type":"text","value":" for more information the Tide API translation layer. For each content type we supply a function that maps the Tide Drupal API response into more concise fields that match the data needed for"}]},{"type":"element","tag":"h3","props":{"id":"template"},"children":[{"type":"text","value":"Template"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To render the page using Ripple UI components, we need to create a Vue component that is passed the data from the API request and, using Ripple UI components, creates a layout that matches your intended design."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See the "},{"type":"element","tag":"a","props":{"href":"/framework/guides/creating-content-types"},"children":[{"type":"text","value":"Content type guide"}]},{"type":"text","value":" for more information on creating new content types."}]}]},{"type":"element","tag":"h2","props":{"id":"core-content-types"},"children":[{"type":"text","value":"Core content types"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Tide we have a number of content types which are part of the core distribution and are initially included in SDP sites"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Landing page"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Event"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Grant"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"News"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Publication (page)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Alert"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"ripple-content-types","depth":2,"text":"Ripple content types","children":[{"id":"api-mapping","depth":3,"text":"API Mapping"},{"id":"template","depth":3,"text":"Template"}]},{"id":"core-content-types","depth":2,"text":"Core content types"}]}},"_type":"markdown","_id":"content:framework:2.key-concepts:4.content-types.md","_source":"content","_file":"framework/2.key-concepts/4.content-types.md","_extension":"md"},{"_path":"/framework/key-concepts/dynamic-components","_dir":"key-concepts","_draft":false,"_partial":false,"_locale":"","title":"Dynamic components","description":null,"layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dynamic components are a concept in Ripple that is closely tied to the concept of 'Paragraphs' in Drupal. See the "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/project/paragraphs","rel":["nofollow"]},"children":[{"type":"text","value":"Drupal documentation for Paragraphs"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dynamic components/paragraphs can be added to pages in drupal (see "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/project/paragraphs","rel":["nofollow"]},"children":[{"type":"text","value":"Key concepts - content types"}]},{"type":"text","value":")."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple the raw paragraphs from the Drupal JSON API and 'mapped' to a Vue component, along with the props required for that component to render. This Vue component, along with the associated mapping is what is referred to as the 'Dynamic component'."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"alt":"Illustration of hows how dynamic components are mapped from drupal paragraphs to vue components","src":"/assets/img/modules/dynamic-components.png"},"children":[]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:framework:2.key-concepts:5.dynamic-components.md","_source":"content","_file":"framework/2.key-concepts/5.dynamic-components.md","_extension":"md"},{"_path":"/framework/guides/migrating","_dir":"guides","_draft":false,"_partial":false,"_locale":"","title":"Migrating from Ripple 1.x","description":"This guide is intended to outline the process of updating SDP sites using Ripple 1.x to Ripple 2. It is intended for developers tasked with porting Ripple 1 sites and features to Ripple 2.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"background"},"children":[{"type":"text","value":"Background"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple 2 is a complete rewrite of both the design system and the Nuxt modules used to create SDP sites with it. It is a breaking change with the processes used to create sites and functionality used in Ripple 1. This was required due to the following reasons:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Latest versions of Vue and Nuxt 3 introducing breaking changes"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Deprecation of IE11 support allowing us to support modern browser features"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Opportunity to adopt best practices such as Typescript and modern CSS"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Build up of technical and design debt"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Improvements to the design allowing better theming and accessibility"}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Due to breaking changes between versions 2 and 3 of both Vue and Nuxt there is no automated way to upgrade Ripple components and sites.\n"},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"Custom functionality built on Ripple 1 will need to be rewritten to use Ripple 2 API’s and design."}]}]}]},{"type":"element","tag":"h2","props":{"id":"migrating-your-site"},"children":[{"type":"text","value":"Migrating your site"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If your site is supported by the SDP team for upgrades, the initial site upgrade will be handled by the SDP team. The process will be as follows:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a new empty V2 branch will be created in the site repository"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"a fresh install of Ripple 2 will be added to the site"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"all required environment variables will be added to the project to connect the site to the Tide content backend"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"the V2 branch will be setup to be served from behind the Section.io CDN"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The migration of the following will be out of scope for sites without an MoU for SDP support:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Custom content types"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Custom user facing components"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Custom pages"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Extensive theme customisation outside of those documented in the theming guide"}]}]},{"type":"element","tag":"h2","props":{"id":"migrating-features-from-ripple-1x"},"children":[{"type":"text","value":"Migrating features from Ripple 1.x"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Please review the following concepts before proceeding:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/content-types"},"children":[{"type":"text","value":"Content types"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/api-endpoints"},"children":[{"type":"text","value":"API mapping"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/dynamic-components"},"children":[{"type":"text","value":"Dynamic components"}]}]}]},{"type":"element","tag":"h3","props":{"id":"content-types"},"children":[{"type":"text","value":"Content types"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content types in Tide allow for defining custom fields that can be returned via the Drupal JSON API. Because SDP sites are headless, we need to tell Ripple how to render each custom content type on the front end."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 1.x, each content type was added through the convention of adding a folder named tide and each content type as a subfolder. See "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple/tree/develop/examples/basic-examples/tide/modules/example-content-type","rel":["nofollow"]},"children":[{"type":"text","value":"Ripple 1 example"}]},{"type":"text","value":".\nThe mapping of the tide API response was done through "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple/blob/develop/packages/ripple-nuxt-tide/modules/news/tide.config.j","rel":["nofollow"]},"children":[{"type":"text","value":"tide.config.js"}]},{"type":"text","value":". The JSON API response was returned in its entirety and mapping the Drupal fields to Ripple components was done through the Page component."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 2.x we move the mapping of data to the Nuxt server layer. This allows us to only return the necessary data needed to the end user, reducing the JSON payload from Drupal."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For more information on creating new content types see the guide on "},{"type":"element","tag":"a","props":{"href":"creating-content-types"},"children":[{"type":"text","value":"creating content types"}]}]},{"type":"element","tag":"h3","props":{"id":"dynamic-components"},"children":[{"type":"text","value":"Dynamic components"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tide CMS makes use of "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/project/paragraphs","rel":["nofollow"]},"children":[{"type":"text","value":"Drupal paragraphs"}]},{"type":"text","value":" to structure content types to allow content creators flexibility when composing content. Creating new paragraph types that can be reused for the landing page content or across others is a common customisation task."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 1, new paragraph support was added through custom mappings "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple/blob/develop/examples/basic-examples/tide/modules/example-override-mapping/tide.config.js","rel":["nofollow"]},"children":[{"type":"text","value":"See Ripple 1"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 2, we need to add similar support - See "},{"type":"element","tag":"a","props":{"href":"dynamic-components"},"children":[{"type":"text","value":"Guide to creating dynamic components"}]}]},{"type":"element","tag":"h3","props":{"id":"search-listing-pages"},"children":[{"type":"text","value":"Search listing pages"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This feature is still in Beta, please see the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions/660","rel":["nofollow"]},"children":[{"type":"text","value":"feature proposal"}]},{"type":"text","value":" for more information."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Listing pages are pages that contain dynamic lists of links to other pages. These are typically used to generate index pages when there are large amounts of similar items. See "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/grants","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/grants"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://www.vic.gov.au/victorian-honour-roll-of-women","rel":["nofollow"]},"children":[{"type":"text","value":"https://www.vic.gov.au/victorian-honour-roll-of-women"}]},{"type":"text","value":" for example."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 1 there was no dedicated content type for creating listing pages and hence these pages were usually created as static pages in the frontend."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In Ripple 2 we intend to move to a standard content type that allows configuring the search experience from the backend. Please see the "},{"type":"element","tag":"a","props":{"href":"https://github.com/dpc-sdp/ripple-framework/discussions/660","rel":["nofollow"]},"children":[{"type":"text","value":"feature proposal"}]},{"type":"text","value":" for more info."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"background","depth":2,"text":"Background"},{"id":"migrating-your-site","depth":2,"text":"Migrating your site"},{"id":"migrating-features-from-ripple-1x","depth":2,"text":"Migrating features from Ripple 1.x","children":[{"id":"content-types","depth":3,"text":"Content types"},{"id":"dynamic-components","depth":3,"text":"Dynamic components"},{"id":"search-listing-pages","depth":3,"text":"Search listing pages"}]}]}},"_type":"markdown","_id":"content:framework:3.guides:1.migrating.md","_source":"content","_file":"framework/3.guides/1.migrating.md","_extension":"md"},{"_path":"/framework/guides/new-sites","_dir":"guides","_draft":false,"_partial":false,"_locale":"","title":"Setting up a new site","description":"A guide to setting up new SDP frontend sites using Ripple framework.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Setting up new sites with Ripple 2 is made easy with our CLI tool and provisioning process. Before you do so though please ensure you have got in touch with the SDP engagement manager ("},{"type":"element","tag":"a","props":{"href":"mailto:digital@dpc.vic.gov.au"},"children":[{"type":"text","value":"digital@dpc.vic.gov.au"}]},{"type":"text","value":") prior and have submitted a support request to the Digital Victoria Help Centre "},{"type":"element","tag":"a","props":{"href":"https://digital-vic.atlassian.net/servicedesk/customer/portals","rel":["nofollow"]},"children":[{"type":"text","value":"https://digital-vic.atlassian.net/servicedesk/customer/portals"}]}]},{"type":"element","tag":"h2","props":{"id":"requirements"},"children":[{"type":"text","value":"Requirements"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When onboarding a new project to SDP the following will be provisioned for you:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Git repo created"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Required platform files added to repo, required Dockerfile, etc"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Bay hosting environment configured"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Section.io CDN setup and configured"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Environment variables set to your project specific requirements"}]}]},{"type":"element","tag":"h2","props":{"id":"local-development-dependencies"},"children":[{"type":"text","value":"Local development dependencies"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Please make sure you have the following dependencies installed before proceeding. Typically local development is not performed through a docker container on the front end."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Node version 16.11.0 or greater (We recommend installing Node through Node Version Manager - See "},{"type":"element","tag":"a","props":{"href":"https://github.com/nvm-sh/nvm","rel":["nofollow"]},"children":[{"type":"text","value":"https://github.com/nvm-sh/nvm"}]},{"type":"text","value":" for install guide)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"NPM version 8.1.0 or greater"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Please see the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"engines"}]},{"type":"text","value":" key in "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"package.json"}]},{"type":"text","value":" for most accurate versions."}]},{"type":"element","tag":"h2","props":{"id":"installing-ripple"},"children":[{"type":"text","value":"Installing Ripple"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For SDP sites, this will also be applied. However, if you wish to create a local install of Ripple outside of a project see below."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Installing Ripple is easy with the included CLI tool:"}]},{"type":"element","tag":"pre","props":{"code":"npx @dpc-sdp/nuxt-ripple-cli init site ~/path/to/site --name \"My Site\"\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npx @dpc-sdp/nuxt-ripple-cli init site ~/path/to/site --name \"My Site\"\n"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will copy the required files needed to setup your site into "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"~/path/to/site"}]}]},{"type":"element","tag":"pre","props":{"code":"cd ~/path/to/site && npm install\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"cd ~/path/to/site && npm install\n"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This will install all dependencies with NPM, you can then run the development server with"}]},{"type":"element","tag":"pre","props":{"code":"npm run dev\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npm run dev\n"}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"requirements","depth":2,"text":"Requirements"},{"id":"local-development-dependencies","depth":2,"text":"Local development dependencies"},{"id":"installing-ripple","depth":2,"text":"Installing Ripple"}]}},"_type":"markdown","_id":"content:framework:3.guides:2.new-sites.md","_source":"content","_file":"framework/3.guides/2.new-sites.md","_extension":"md"},{"_path":"/framework/guides/brand-application","_dir":"guides","_draft":false,"_partial":false,"_locale":"","title":"Applying theme and brand","description":"A guide to applying theme and brand assets to Ripple sites.","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Theming with brand colours is embedded deeply into Ripple, using "},{"type":"element","tag":"a","props":{"href":"https://amzn.github.io/style-dictionary/#/tokens","rel":["nofollow"]},"children":[{"type":"text","value":"design tokens"}]},{"type":"text","value":". Global and component styles are built on a base level of tokens, that can be adjusted at a "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"site"}]},{"type":"text","value":" level by modifying a few key properties."}]},{"type":"element","tag":"h2","props":{"id":"token-naming"},"children":[{"type":"text","value":"Token naming"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Ripple uses a naming scheme for tokens, and the CSS custom properties are derived with this pattern:"}]},{"type":"element","tag":"pre","props":{"code":"--rpl(-<module>)-<attribute>(-<level>)\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"--rpl(-<module>)-<attribute>(-<level>)\n"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some example props:"}]},{"type":"element","tag":"pre","props":{"code":"--rpl-clr-primary\n--rpl-clr-success-light\n--rpl-type-size-5\n--rpl-sp-3\n--rpl-border-4\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"--rpl-clr-primary\n--rpl-clr-success-light\n--rpl-type-size-5\n--rpl-sp-3\n--rpl-border-4\n"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"And a worked example:"}]},{"type":"element","tag":"pre","props":{"code":".example-block {\n  border-color: var(--rpl-clr-primary);\n  border-style: solid;\n  border-width: var(--rpl-border-4);\n  colour: var(--rpl-clr-primary);\n  padding: var(--rpl-sp-3);\n}\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":".example-block {\n  border-color: var(--rpl-clr-primary);\n  border-style: solid;\n  border-width: var(--rpl-border-4);\n  colour: var(--rpl-clr-primary);\n  padding: var(--rpl-sp-3);\n}\n"}]}]},{"type":"element","tag":"h2","props":{"id":"theme-properties"},"children":[{"type":"text","value":"Theme properties"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The minimum set of required properties are listed below:"}]},{"type":"element","tag":"pre","props":{"code":"--rpl-clr-primary\n--rpl-clr-footer-alt\n--rpl-clr-link\n--rpl-clr-type-primary-accessible\n--rpl-clr-primary-alt\n--rpl-clr-type-primary-alt-accessible\n--rpl-clr-footer\n--rpl-clr-type-footer-accessible\n--rpl-clr-primary-alpha\n--rpl-clr-accent\n--rpl-clr-accent-alt\n--rpl-clr-focus\n--rpl-clr-gradient-horizontal\n--rpl-clr-gradient-vertical\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"--rpl-clr-primary\n--rpl-clr-footer-alt\n--rpl-clr-link\n--rpl-clr-type-primary-accessible\n--rpl-clr-primary-alt\n--rpl-clr-type-primary-alt-accessible\n--rpl-clr-footer\n--rpl-clr-type-footer-accessible\n--rpl-clr-primary-alpha\n--rpl-clr-accent\n--rpl-clr-accent-alt\n--rpl-clr-focus\n--rpl-clr-gradient-horizontal\n--rpl-clr-gradient-vertical\n"}]}]},{"type":"element","tag":"h2","props":{"id":"sdp"},"children":[{"type":"text","value":"SDP"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In SDP, the theme is managed in the back-end system via the Site Taxonomy. Site entries have a collection of key-value "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"site theme values"}]},{"type":"text","value":", and also "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"site feature flag values"}]},{"type":"text","value":" to define site-specific settings, e.g."}]},{"type":"element","tag":"pre","props":{"code":"Key\nrpl-clr-primary\nValue\n#1c4f9c\n\nKey\nfooterTheme\nValue\nneutral\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"Key\nrpl-clr-primary\nValue\n#1c4f9c\n\nKey\nfooterTheme\nValue\nneutral\n"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Both these collections are exposed to the front-end through the Site API, and can immediately update production sites without requiring a code change or deployment."}]},{"type":"element","tag":"h2","props":{"id":"secondary-logo"},"children":[{"type":"text","value":"Secondary logo"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The secondary logo is also content managed, and can be set on the same Site Taxonomy page in the back-end under "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"Logo"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"appconfig"},"children":[{"type":"text","value":"app.config"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Theme and feature flag properties may also be defined in the Nuxt "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"app.config.ts"}]},{"type":"text","value":" for the site. This matches the naming used in the Site API (note the difference in "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"--"}]},{"type":"text","value":" for theme, since these are Javascript config props, not CSS custom props):"}]},{"type":"element","tag":"pre","props":{"code":"export default defineAppConfig({\n  ripple: {\n    featureFlags: {\n      contentCollectionSearchConnector: 'elasticsearch'\n    },\n    theme: {\n      'rpl-clr-primary': '#6B19A3',\n      'rpl-clr-footer-alt': '#6B19A3',\n      'rpl-clr-link': '#6B19A3',\n      'rpl-clr-type-primary-accessible': '#6B19A3',\n      'rpl-clr-primary-alt': '#3F006B',\n      'rpl-clr-type-primary-alt-accessible': '#3F006B',\n      'rpl-clr-footer': '#3F006B',\n      'rpl-clr-type-footer-accessible': '#3F006B',\n      'rpl-clr-primary-alpha': 'rgba(107, 25, 163, 0.5)',\n      'rpl-clr-accent': '#6DDD97',\n      'rpl-clr-accent-alt': '#EAFAF0',\n      'rpl-clr-focus': '#9DEF65',\n      'rpl-clr-gradient-horizontal': 'linear-gradient(90deg, #382484 0%, #5A0099 20%, #7623B0 35%, #2E7478 50%, #2FA26F 70%, #2FCE6A 80%)',\n      'rpl-clr-gradient-vertical': 'linear-gradient(180deg, #382484 0%, #5A0099 20%, #7623B0 35%, #2E7478 50%, #2FA26F 70%, #2FCE6A 80%)'\n    }\n  }\n})\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default defineAppConfig({\n  ripple: {\n    featureFlags: {\n      contentCollectionSearchConnector: 'elasticsearch'\n    },\n    theme: {\n      'rpl-clr-primary': '#6B19A3',\n      'rpl-clr-footer-alt': '#6B19A3',\n      'rpl-clr-link': '#6B19A3',\n      'rpl-clr-type-primary-accessible': '#6B19A3',\n      'rpl-clr-primary-alt': '#3F006B',\n      'rpl-clr-type-primary-alt-accessible': '#3F006B',\n      'rpl-clr-footer': '#3F006B',\n      'rpl-clr-type-footer-accessible': '#3F006B',\n      'rpl-clr-primary-alpha': 'rgba(107, 25, 163, 0.5)',\n      'rpl-clr-accent': '#6DDD97',\n      'rpl-clr-accent-alt': '#EAFAF0',\n      'rpl-clr-focus': '#9DEF65',\n      'rpl-clr-gradient-horizontal': 'linear-gradient(90deg, #382484 0%, #5A0099 20%, #7623B0 35%, #2E7478 50%, #2FA26F 70%, #2FCE6A 80%)',\n      'rpl-clr-gradient-vertical': 'linear-gradient(180deg, #382484 0%, #5A0099 20%, #7623B0 35%, #2E7478 50%, #2FA26F 70%, #2FCE6A 80%)'\n    }\n  }\n})\n"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Note in this example the same value is used in the first four properties (primary branding colour), then the next four (alternate branding colour). Even though they use the same value, these properties must all be defined. The system was set up this way to support accessible "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"light-on-dark"}]},{"type":"text","value":" and "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"dark-on-light"}]},{"type":"text","value":" theming options."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"token-naming","depth":2,"text":"Token naming"},{"id":"theme-properties","depth":2,"text":"Theme properties"},{"id":"sdp","depth":2,"text":"SDP"},{"id":"secondary-logo","depth":2,"text":"Secondary logo"},{"id":"appconfig","depth":2,"text":"app.config"}]}},"_type":"markdown","_id":"content:framework:3.guides:3.brand-application.md","_source":"content","_file":"framework/3.guides/3.brand-application.md","_extension":"md"},{"_path":"/framework/guides/creating-content-types","_dir":"guides","_draft":false,"_partial":false,"_locale":"","title":"Creating content types","description":"How to create new content types for the SDP platform","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/content-types"},"children":[{"type":"text","value":"key concepts - content types"}]},{"type":"text","value":" for an overview of what content types are and the core content types used within the SDP platform."}]}]},{"type":"element","tag":"h2","props":{"id":"anatomy"},"children":[{"type":"text","value":"Anatomy"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content types are comprised of three main parts:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#the-mapping-object"},"children":[{"type":"text","value":"A mapping object"}]},{"type":"text","value":" - maps API data to pass to a Vue component"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#the-server-plugin"},"children":[{"type":"text","value":"A server plugin"}]},{"type":"text","value":" - registers the content type with "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"@dpc-sdp/ripple-tide-api"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"#the-vue-component"},"children":[{"type":"text","value":"And Vue components"}]},{"type":"text","value":" - takes the mapped data and renders the content type"}]}]},{"type":"element","tag":"h2","props":{"id":"creating-a-content-type"},"children":[{"type":"text","value":"Creating a content type"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Nuxt Ripple CLI provides a simple way to add new content types, to get started just run the following command:"}]},{"type":"element","tag":"pre","props":{"code":"npx @dpc-sdp/nuxt-ripple-cli add content-type [DIRECTORY] --name {NAME} --createTests --cypressPath {CYPRESSPATH}\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npx @dpc-sdp/nuxt-ripple-cli add content-type [DIRECTORY] --name {NAME} --createTests --cypressPath {CYPRESSPATH}\n"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Where "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"[DIRECTORY]"}]},{"type":"text","value":" is the location to output the content type scaffolding, "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"{NAME}"}]},{"type":"text","value":" is the name of the new content type, and "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"{CYPRESSPATH}"}]},{"type":"text","value":" is the relative path to be used for the cypress tests folder."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using the CLI is the preferred way to create new content types as it will ensure the correct file structure and naming conventions are used. It will also scaffold the mapping object, server plugin, and Vue component for you."}]}]},{"type":"element","tag":"h2","props":{"id":"the-mapping-object"},"children":[{"type":"text","value":"The mapping object"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The mapping object is responsible for supplying the data mapping and includes."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Data mapping"}]},{"type":"text","value":": the data mapping is responsible for mapping the Tide API response data (i.e. Drupal JSON) into a clean format that can be used within the Vue component."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Includes"}]},{"type":"text","value":": the includes are an array of fields that need to be added to the API request so Drupal knows what referenced entities to include in the API response, for more on Drupal includes see "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/docs/core-modules-and-themes/core-modules/jsonapi-module/includes","rel":["nofollow"]},"children":[{"type":"text","value":"JSON API includes"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Below is an example mapping object."}]},{"type":"element","tag":"pre","props":{"code":"import type { IRplTideModuleMapping } from '@dpc-sdp/ripple-tide-api/types'\nimport { tidePageBaseMapping, tidePageBaseIncludes } from '@dpc-sdp/nuxt-ripple/mapping'\nimport { getField, getImageFromField } from '@dpc-sdp/ripple-tide-api'\n\nconst tideMyConentTypeModule: IRplTideModuleMapping = {\n  mapping: {\n    // The base mapping is used to add common fields\n    // See the tidePageBaseMapping function for details \n    ...tidePageBaseMapping({ withTopicTags: true }),\n    \n    content: 'field_my_content_type_content',\n    \n    // Can be nested as needed\n    header: {\n      intro: 'field_landing_page_intro_text',\n    },\n    \n    // Use a function to transform the data\n    files: (src) => getField(src, 'field_node_files').map((file) => ({\n      name: file.name,\n      url: file.field_media_file.url\n    })),\n\n    // Or when using helper functions\n    image: (src) => getImageFromField(src, 'field_featured_image.field_media_image')\n  },\n  includes: [\n    // The base includes are used to include common fields\n    // See the tidePageBaseIncludes function for details \n    ...tidePageBaseIncludes({ withTopicTags: true }),\n    \n    'field_featured_image',\n    'field_featured_image.field_media_image'\n  ]\n}\n\nexport default tideMyConentTypeModule\n","language":"ts","meta":"","className":"language-ts shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" type"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" { IRplTideModuleMapping } "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '@dpc-sdp/ripple-tide-api/types'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" { tidePageBaseMapping, tidePageBaseIncludes } "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '@dpc-sdp/nuxt-ripple/mapping'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" { getField, getImageFromField } "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '@dpc-sdp/ripple-tide-api'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":" tideMyConentTypeModule"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" IRplTideModuleMapping"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" ="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  mapping: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"    // The base mapping is used to add common fields\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"    // See the tidePageBaseMapping function for details \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"    ..."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"tidePageBaseMapping"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"({ withTopicTags: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" }),\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    content: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"'field_my_content_type_content'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"    // Can be nested as needed\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    header: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"      intro: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"'field_landing_page_intro_text'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"    // Use a function to transform the data\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"    files"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":": ("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" getField"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"(src, "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"'field_node_files'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":")."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"map"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"(("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"file"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" ({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"      name: file.name,\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"      url: file.field_media_file.url\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":22},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    })),\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":23},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":24},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"    // Or when using helper functions\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":25},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"    image"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":": ("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" getImageFromField"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"(src, "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"'field_featured_image.field_media_image'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":")\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":26},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":27},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  includes: [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":28},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"    // The base includes are used to include common fields\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":29},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"    // See the tidePageBaseIncludes function for details \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":30},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"    ..."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"tidePageBaseIncludes"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"({ withTopicTags: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" }),\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":31},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    \n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":32},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"    'field_featured_image'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":33},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"    'field_featured_image.field_media_image'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":34},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":35},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":36},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":37},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" default"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" tideMyConentTypeModule\n"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-server-plugin"},"children":[{"type":"text","value":"The server plugin"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The server plugin is responsible for registering the new content type with "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"@dpc-sdp/ripple-tide-api"}]},{"type":"text","value":", this file needs to live within the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"server/plugins"}]},{"type":"text","value":" directory of the content type."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The content type can then be registered by calling the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"setContentType"}]},{"type":"text","value":" method on the Tide page API. This method takes two arguments, the first is the name of the content type, and the second is the mapping object. If you have used the CLI to create the content type this will already be done for you."}]},{"type":"element","tag":"pre","props":{"code":"import type { NitroApp } from 'nitropack'\nimport { defineNitroPlugin } from 'nitropack/dist/runtime/plugin'\nimport tideMyContentTypeModule from '../../mapping'\n\nexport default defineNitroPlugin(async (nitroApp: NitroApp) => {\n  nitroApp.tide?.pageApi.setContentType('my-content-type', tideMyContentTypeModule)\n})\n","language":"ts","meta":"","className":"language-ts shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" type"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" { NitroApp } "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" 'nitropack'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" { defineNitroPlugin } "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" 'nitropack/dist/runtime/plugin'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" tideMyContentTypeModule "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '../../mapping'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" default"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" defineNitroPlugin"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"nitroApp"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" NitroApp"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  nitroApp.tide?.pageApi."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"setContentType"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"'my-content-type'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":", tideMyContentTypeModule)\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"})\n"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-vue-component"},"children":[{"type":"text","value":"The Vue component"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A Vue component is needed to render the content type. This component will receive a "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"page"}]},{"type":"text","value":" prop, it's this prop that contains the mapped data from the Tide API response."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Important note"}]},{"type":"text","value":": The component needs to be registered globally, this can be done by adding the component to a "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"/components/global"}]},{"type":"text","value":" folder within the content type. Because this is global the name needs to be unique, it must also be prefixed with "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"Tide"}]},{"type":"text","value":" i.e. "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"TideMyContentType"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This component should use the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"TideBaseLayout"}]},{"type":"text","value":" component to render the shell of the site, from there slots are used to render the content types content in the right locations. If you're using the CLI it will take care of scaffolding a global component that uses "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"TideBaseLayout"}]},{"type":"text","value":" for you."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Below is an example component using "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"TideBaseLayout"}]},{"type":"text","value":"."}]},{"type":"element","tag":"pre","props":{"code":"<template>\n  <TideBaseLayout\n    :site=\"site\"\n    :page=\"page\"\n    :siteSection=\"page.siteSection\"\n    :pageTitle=\"page.title\"\n    :pageLanguage=\"page.lang\"\n    :updatedDate=\"page.changed || page.created\"\n    :showContentRating=\"page.showContentRating\"\n  >\n    <template #aboveHeader>\n      <slot name=\"aboveHeader\"></slot>\n    </template>\n    <template #primaryNav>\n      <slot name=\"primaryNav\"></slot>\n    </template>\n    <template #breadcrumbs>\n      <slot name=\"breadcrumbs\"></slot>\n    </template>\n    <template #aboveBody>\n      <slot name=\"aboveBody\"></slot>\n    </template>\n    <template #body>\n      <!-- Add content within the relevant slot -->\n      <TideMyContentTypeContent :content=\"page.content\" />\n    </template>\n    <template #sidebar>\n      <slot name=\"sidebar\"></slot>\n    </template>\n    <template #footer>\n      <slot name=\"footer\"></slot>\n    </template>\n  </TideBaseLayout>\n</template>\n\n<script setup lang=\"ts\">\nimport { TideSiteData } from '@dpc-sdp/ripple-tide-api/types'\nimport type { TideMediaPage } from '../../types'\n\ninterface Props {\n  site: TideSiteData\n  page: TideMediaPage\n}\n\ndefineProps<Props>()\n</script>\n","language":"vue","meta":"","className":"language-vue shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"TideBaseLayout\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"site"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"site"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"page"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"page"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"siteSection"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"page.siteSection"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"pageTitle"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"page.title"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"pageLanguage"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"page.lang"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"updatedDate"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"page.changed "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"||"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" page.created"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    :"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"showContentRating"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"page.showContentRating"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  >\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"aboveHeader"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" name"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"aboveHeader\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"primaryNav"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" name"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"primaryNav\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"breadcrumbs"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" name"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"breadcrumbs\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"aboveBody"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" name"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"aboveBody\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":22},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":23},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":24},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"      <!-- Add content within the relevant slot -->\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":25},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"TideMyContentTypeContent"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" :"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"content"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"page.content"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" />\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":26},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":27},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"sidebar"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":28},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" name"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"sidebar\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":29},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":30},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" #"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"footer"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":31},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"      <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" name"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"footer\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":32},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    </"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":33},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"TideBaseLayout"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":34},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":35},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":36},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" setup"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" lang"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":37},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" { TideSiteData } "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '@dpc-sdp/ripple-tide-api/types'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":38},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" type"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" { TideMediaPage } "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '../../types'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":39},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":40},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" Props"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":41},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  site"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" TideSiteData\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":42},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  page"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" TideMediaPage\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":43},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":44},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":45},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"defineProps"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"Props"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">()\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":46},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#22863A"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"using-the-content-type"},"children":[{"type":"text","value":"Using the content type"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Content types are actually "},{"type":"element","tag":"a","props":{"href":"https://nuxt.com/docs/getting-started/layers","rel":["nofollow"]},"children":[{"type":"text","value":"Nuxt layers"}]},{"type":"text","value":" so these are added in the same way as any other layer through the extends property of the main applications "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"nuxt.config.ts"}]},{"type":"text","value":" file."}]},{"type":"element","tag":"pre","props":{"code":"export default defineNuxtConfig({\n  extends: [\n    '@dpc-sdp/ripple-tide-news', // An npm installed package\n    'github:dpc-sdp/ripple-tide-news#1.0.0', // A tagged git repository\n    './layers/tide-my-content-type', // A local layer\n  ]\n})\n","language":"js","meta":"","className":"language-js shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" default"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  extends: [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"    '@dpc-sdp/ripple-tide-news'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"// An npm installed package\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"    'github:dpc-sdp/ripple-tide-news#1.0.0'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"// A tagged git repository\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"    './layers/tide-my-content-type'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"// A local layer\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"})\n"}]}]}]}]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"anatomy","depth":2,"text":"Anatomy"},{"id":"creating-a-content-type","depth":2,"text":"Creating a content type"},{"id":"the-mapping-object","depth":2,"text":"The mapping object"},{"id":"the-server-plugin","depth":2,"text":"The server plugin"},{"id":"the-vue-component","depth":2,"text":"The Vue component"},{"id":"using-the-content-type","depth":2,"text":"Using the content type"}]}},"_type":"markdown","_id":"content:framework:3.guides:4.creating-content-types.md","_source":"content","_file":"framework/3.guides/4.creating-content-types.md","_extension":"md"},{"_path":"/framework/guides/creating-new-layers","_dir":"guides","_draft":false,"_partial":false,"_locale":"","title":"Creating new layers","description":"Implementing custom functionality through layers","layout":"page","links":[{"text":"Nuxt layers documentation","url":"https://nuxt.com/docs/getting-started/layers"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt layers are used to encapsulate Ripple functionality, so it can easily be shared and reused across projects, see "},{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/nuxt-layers"},"children":[{"type":"text","value":"key concepts - layers"}]},{"type":"text","value":" for a conceptual overview of what layers are and how they are used within Ripple."}]},{"type":"element","tag":"h2","props":{"id":"creating-a-new-layer"},"children":[{"type":"text","value":"Creating a new layer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Nuxt Ripple CLI provides a simple way to initialise new layers, to create a new layer just run the following command:"}]},{"type":"element","tag":"pre","props":{"code":"npx @dpc-sdp/nuxt-ripple-cli init layer [DIRECTORY] --name {NAME}\n"},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"npx @dpc-sdp/nuxt-ripple-cli init layer [DIRECTORY] --name {NAME}\n"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Where "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"[DIRECTORY]"}]},{"type":"text","value":" is the location to output the layer scaffolding and "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"{NAME}"}]},{"type":"text","value":" is the name of the new layer. This command will scaffold everything you need to get started developing a new layer."}]},{"type":"element","tag":"h2","props":{"id":"developing-the-layer"},"children":[{"type":"text","value":"Developing the layer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Once the layer has been created you can start working with it by running the command below from the new layers directory. This will start a development server and allow you to start working on the layer."}]},{"type":"element","tag":"pre","props":{"code":"npm run dev\n","language":"bash","meta":"","className":"language-bash shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"npm"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" run dev\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"playground"}]},{"type":"text","value":" folder contains the essentials to get a test Nuxt application up and running, it includes a "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"app.config.js"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"nuxt.config.js"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":".env"}]},{"type":"text","value":" file. The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"nuxt.config.js"}]},{"type":"text","value":" includes a core set of layers used by Ripple to get a reference sdp site up and running, it also includes the new layer itself."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"playground"}]},{"type":"text","value":" folder is a fully functional Nuxt application and can be used to test the new layer in isolation."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The layers structure is almost identical to a normal Nuxt app, meaning you can utilise the same features and conventions as a standard Nuxt application. i.e. create a "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"pages"}]},{"type":"text","value":" folder for new pages, create a "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"components"}]},{"type":"text","value":" folder for new components, etc."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Other useful commands:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"npm run build"}]},{"type":"text","value":" to do a production build of the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":".preview"}]},{"type":"text","value":" application (for testing purposes)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"npm run lint"}]},{"type":"text","value":" to lint the layer code with "},{"type":"element","tag":"a","props":{"href":"https://eslint.org/","rel":["nofollow"]},"children":[{"type":"text","value":"eslint"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"npm run test"}]},{"type":"text","value":" to run any unit tests with "},{"type":"element","tag":"a","props":{"href":"https://jestjs.io/","rel":["nofollow"]},"children":[{"type":"text","value":"jest"}]}]}]},{"type":"element","tag":"h2","props":{"id":"publishing-the-layer"},"children":[{"type":"text","value":"Publishing the layer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Once the layer is ready to be published it can be published to npm or pushed to a remote git repository, "},{"type":"element","tag":"a","props":{"href":"https://github.com/","rel":["nofollow"]},"children":[{"type":"text","value":"GitHub"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://about.gitlab.com/","rel":["nofollow"]},"children":[{"type":"text","value":"GitLab"}]},{"type":"text","value":", and "},{"type":"element","tag":"a","props":{"href":"https://bitbucket.org/","rel":["nofollow"]},"children":[{"type":"text","value":"Bitbucket"}]},{"type":"text","value":" are supported.\nFor more on publishing to npm see "},{"type":"element","tag":"a","props":{"href":"https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry","rel":["nofollow"]},"children":[{"type":"text","value":"contributing packages to the npm registry"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"using-the-layer"},"children":[{"type":"text","value":"Using the layer"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nuxt layers can be added to any Nuxt site by including the layer in the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"nuxt.config.js"}]},{"type":"text","value":" file under extends. If the layer is published to npm don't forget to "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"npm install"}]},{"type":"text","value":" it first."}]},{"type":"element","tag":"pre","props":{"code":"export default defineNuxtConfig({\n  extends: [\n    '@dpc-sdp/nuxt-ripple', // An npm installed package\n    'github:dpc-sdp/ripple-vic-gov-au-custom#1.0.0' // A tagged git repository\n  ]\n})\n","language":"js","meta":"","className":"language-js shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" default"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  extends: [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"    '@dpc-sdp/nuxt-ripple'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"// An npm installed package\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"    'github:dpc-sdp/ripple-vic-gov-au-custom#1.0.0'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":" // A tagged git repository\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  ]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"})\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Also, make sure to check the layers documentation for any additional configuration that may be required."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To extend from a private repository, you need to add a "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"GIGET_AUTH=<token>"}]},{"type":"text","value":" environment variable, with an auth token from your git provider."}]}]},{"type":"element","tag":"h3","props":{"id":"caveats-when-using-layers-from-a-git-repository"},"children":[{"type":"text","value":"Caveats when using layers from a git repository"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If a layer is added via a git repository and that layer has npm dependencies, you will need to manually install them within the Nuxt application utilising the layer. The Nuxt team are looking at auto-installing layer dependencies in the future, see "},{"type":"element","tag":"a","props":{"href":"https://github.com/nuxt/nuxt/issues/13367","rel":["nofollow"]},"children":[{"type":"text","value":"issue #13367"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You will also need to alias the dependencies in the Nuxt application, so they can be resolved to the correct package location. This can be done by adding an "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"alias"}]},{"type":"text","value":" object to the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"nuxt.config.js"}]},{"type":"text","value":" file."}]},{"type":"element","tag":"pre","props":{"code":"export default defineNuxtConfig({\n  alias: {\n    'date-fns': require.resolve('date-fns')\n  }\n})\n","language":"js","meta":"","className":"language-js shiki shiki-themes github-light","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" default"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"({\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  alias: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"    'date-fns'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":": require."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"resolve"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"'date-fns'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":")\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  }\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"})\n"}]}]}]}]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"creating-a-new-layer","depth":2,"text":"Creating a new layer"},{"id":"developing-the-layer","depth":2,"text":"Developing the layer"},{"id":"publishing-the-layer","depth":2,"text":"Publishing the layer"},{"id":"using-the-layer","depth":2,"text":"Using the layer","children":[{"id":"caveats-when-using-layers-from-a-git-repository","depth":3,"text":"Caveats when using layers from a git repository"}]}]}},"_type":"markdown","_id":"content:framework:3.guides:5.creating-new-layers.md","_source":"content","_file":"framework/3.guides/5.creating-new-layers.md","_extension":"md"},{"_path":"/framework/guides/dynamic-components","_dir":"guides","_draft":false,"_partial":false,"_locale":"","title":"Adding a new dynamic component","description":"Learn how to add a new dynamic page component to a content type","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"/framework/key-concepts/dynamic-components"},"children":[{"type":"text","value":"key concepts - dynamic components"}]},{"type":"text","value":" for a conceptual overview of what dynamic components are and how they are used within the SDP platform."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dynamic components comprise of the following elements:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A mapping function that will map the raw drupal api response to a Vue component and the props to pass to that Vue component"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A Vue component that will render the component"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A list of 'includes' to send to Drupal JSON API (See drupal docs for "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/docs/core-modules-and-themes/core-modules/jsonapi-module/includes","rel":["nofollow"]},"children":[{"type":"text","value":"Includes"}]},{"type":"text","value":")"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A list of content types that the dynamic component can be added to"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each dynamic component then needs to be registered against the name of the "},{"type":"element","tag":"a","props":{"href":"https://www.drupal.org/project/paragraphs","rel":["nofollow"]},"children":[{"type":"text","value":"paragraph"}]},{"type":"text","value":" in Drupal."}]},{"type":"element","tag":"h2","props":{"id":"registering-the-dynamic-component"},"children":[{"type":"text","value":"Registering the dynamic component"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dynamic components need to registered inside a "},{"type":"element","tag":"a","props":{"href":"https://nitro.unjs.io/guide/plugins","rel":["nofollow"]},"children":[{"type":"text","value":"Nitro Plugins"}]},{"type":"text","value":". Nitro is the server engine used in Nuxt 3."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Nitro Plugins can be added in the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"/server/plugins"}]},{"type":"text","value":" folder in your project."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"setDynamicComponent"}]},{"type":"text","value":" method to register your component."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"setDynamicComponent"}]},{"type":"text","value":" takes the following parameters:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"name of the component in Drupal (paragraph name)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"the mapping function, includes and list of content types"}]}]},{"type":"element","tag":"pre","props":{"className":"language-ts shiki shiki-themes github-light","code":"// /server/plugins/my-content-type.ts\n\nexport default defineNitroPlugin(async (nitroApp: NitroApp) => {\n  nitroApp.tide?.pageApi.setDynamicComponent('paragraph--my_dynamic_component', {\n    mapping: (field) => { ... },\n    includes: [ ... ],\n    contentTypes: [ ... ]\n  })\n})\n","language":"ts","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"// /server/plugins/my-content-type.ts\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" default"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" defineNitroPlugin"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"nitroApp"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" NitroApp"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  nitroApp.tide?.pageApi."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"setDynamicComponent"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"'paragraph--my_dynamic_component'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":", {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"    mapping"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":": ("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"field"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" },\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    includes: [ "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" ],\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    contentTypes: [ "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"..."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" ]\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  })\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"})\n"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The individual elements of a dynamic component are covered below."}]},{"type":"element","tag":"h2","props":{"id":"the-mapping-function"},"children":[{"type":"text","value":"The mapping function"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The mapping function takes the raw response from the drupal JSON API and returns a standard structure that ultimately ties the dynamic component with a Vue component."}]},{"type":"element","tag":"pre","props":{"className":"language-ts shiki shiki-themes github-light","code":"import { TideDynamicPageComponent } from '@dpc-sdp/ripple-tide-api/types'\n\ninterface IMyDynamicComponentProps {\n  someProp1: boolean,\n  someProp2: string\n}\n\nconst mappingFunction = (field): TideDynamicPageComponent<IMyDynamicComponentProps> => {\n  return {\n    // This should be the name to the Vue component you created\n    component: 'MyDynamicComponent',\n\n    // Always include a unique id\n    id: field.drupal_internal__id.toString(),\n\n    // Some components have titles above them, which you can add here. This is optional\n    title: field.field_paragraph_title,\n\n    // These props will be passed to `MyDynamicComponent`\n    props: {\n      someProp1: false,\n      someProp2: field.field_paragraph_description\n    }\n  }\n}\n","language":"ts","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" { TideDynamicPageComponent } "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":" '@dpc-sdp/ripple-tide-api/types'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"interface"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" IMyDynamicComponentProps"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  someProp1"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":" boolean"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  someProp2"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":" string\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" mappingFunction"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" ="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"field"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":")"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":" TideDynamicPageComponent"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"IMyDynamicComponentProps"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"> "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"  return"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"    // This should be the name to the Vue component you created\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    component: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"'MyDynamicComponent'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"    // Always include a unique id\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    id: field.drupal_internal__id."}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"toString"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"(),\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":15},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":16},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"    // Some components have titles above them, which you can add here. This is optional\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":17},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    title: field.field_paragraph_title,\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":18},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":19},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"    // These props will be passed to `MyDynamicComponent`\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":20},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    props: {\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":21},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"      someProp1: "}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":"false"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":22},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"      someProp2: field.field_paragraph_description\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":23},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    }\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":24},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  }\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":25},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"}\n"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-vue-component"},"children":[{"type":"text","value":"The Vue component"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Create a Vue component that will render your dynamic component."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This component will be rendered each time your component appears on a page and will receive any props that were specified from the mapping function."}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Important note"}]},{"type":"text","value":": For this to work, your component needs to be registered globally. The simplest way to do this is to add the component to the "},{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"/components/global"}]},{"type":"text","value":" folder in your layer."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Because they are global it's also important to choose non generic names so that they don't clash and overwrite other dynamic components"}]}]},{"type":"element","tag":"pre","props":{"className":"language-ts shiki shiki-themes github-light","code":"// /components/global/MyDynamicComponent.vue\n\n<script setup lang=\"ts\">\ndefineProps<{\n  someProp1: boolean,\n  someProp2: string\n}>()\n</script>\n\n<template>\n  <div>\n    {{someProp2}}\n  </div>\n</template>\n","language":"ts","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6A737D"},"children":[{"type":"text","value":"// /components/global/MyDynamicComponent.vue\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"script setup lang"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"defineProps"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"<{\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":5},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  someProp1"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":" boolean"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":6},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#E36209"},"children":[{"type":"text","value":"  someProp2"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":" string\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":7},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"}>()\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":8},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":9},"children":[{"type":"element","tag":"span","props":{"emptyLinePlaceholder":true},"children":[{"type":"text","value":"\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":10},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":11},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#6F42C1"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":12},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"    {{someProp2}}\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":13},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":">\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":14},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":">\n"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-list-of-includes"},"children":[{"type":"text","value":"The list of includes"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each dynamic component should specify an array of 'includes' that it needs in order to function properly."}]},{"type":"element","tag":"pre","props":{"className":"language-ts shiki shiki-themes github-light","code":"const includes = [\n  'field_landing_page_component.field_paragraph_accordion'\n]\n","language":"ts","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":" includes"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" ="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"  'field_landing_page_component.field_paragraph_accordion'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"]\n"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"the-list-of-content-types"},"children":[{"type":"text","value":"The list of content types"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Each dynamic component should specify an array of 'content types' that the dynamic component can appear on."}]},{"type":"element","tag":"pre","props":{"className":"language-ts shiki shiki-themes github-light","code":"const contentTypes = [\n  'landing_page',\n  'some_content_type'\n]\n","language":"ts","meta":"","style":""},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line","line":1},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#005CC5"},"children":[{"type":"text","value":" contentTypes"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#D73A49"},"children":[{"type":"text","value":" ="}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":" [\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":2},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"  'landing_page'"}]},{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":",\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":3},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#032F62"},"children":[{"type":"text","value":"  'some_content_type'\n"}]}]},{"type":"element","tag":"span","props":{"class":"line","line":4},"children":[{"type":"element","tag":"span","props":{"style":"--shiki-default:#24292E"},"children":[{"type":"text","value":"]\n"}]}]}]}]},{"type":"element","tag":"style","props":{},"children":[{"type":"text","value":"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"registering-the-dynamic-component","depth":2,"text":"Registering the dynamic component"},{"id":"the-mapping-function","depth":2,"text":"The mapping function"},{"id":"the-vue-component","depth":2,"text":"The Vue component"},{"id":"the-list-of-includes","depth":2,"text":"The list of includes"},{"id":"the-list-of-content-types","depth":2,"text":"The list of content types"}]}},"_type":"markdown","_id":"content:framework:3.guides:5.dynamic-components.md","_source":"content","_file":"framework/3.guides/5.dynamic-components.md","_extension":"md"},{"_path":"/framework/core-modules","_dir":"framework","_draft":false,"_partial":false,"_locale":"","title":"Core modules","description":"A listing of all current core Ripple layers and packages","layout":"page","body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"View each package on NPM for their individual READMEs."}]},{"type":"element","tag":"h2","props":{"id":"core-ui-libraries"},"children":[{"type":"text","value":"Core UI Libraries"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-ui-core","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-ui-core"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-ui-forms","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-ui-forms"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"tide-api"},"children":[{"type":"text","value":"Tide API"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-api","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-tide-api"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"nuxt-ripple-base-layer"},"children":[{"type":"text","value":"Nuxt-ripple base layer"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"nuxt-ripple"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"core-content-types"},"children":[{"type":"text","value":"Core content types"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-landing-page","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-tide-landing-page"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-event","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-tide-event"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-grant","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-tide-grant"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-media","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-tide-media"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-news","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-tide-news"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-publication","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-tide-publication"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"other-core-modules"},"children":[{"type":"text","value":"Other core modules"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-search","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-tide-search"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-analytics","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"nuxt-ripple-analytics"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-preview","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"nuxt-ripple-preview"}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"scaffolding-testing-and-supporting-packages"},"children":[{"type":"text","value":"Scaffolding, testing and supporting packages"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-cli","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"nuxt-ripple-cli"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/@dpc-sdp/ripple-test-utils","rel":["nofollow"]},"children":[{"type":"element","tag":"code","props":{"className":[]},"children":[{"type":"text","value":"ripple-test-utils"}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"core-ui-libraries","depth":2,"text":"Core UI Libraries"},{"id":"tide-api","depth":2,"text":"Tide API"},{"id":"nuxt-ripple-base-layer","depth":2,"text":"Nuxt-ripple base layer"},{"id":"core-content-types","depth":2,"text":"Core content types"},{"id":"other-core-modules","depth":2,"text":"Other core modules"},{"id":"scaffolding-testing-and-supporting-packages","depth":2,"text":"Scaffolding, testing and supporting packages"}]}},"_type":"markdown","_id":"content:framework:4.core-modules.md","_source":"content","_file":"framework/4.core-modules.md","_extension":"md"}],"navigation":[{"title":"Ripple Design System","_path":"/","icon":"carbon:home","layout":"home"},{"title":"Design System","_path":"/design-system","children":[{"title":"About","_path":"/design-system/about","children":[{"title":"What is Ripple?","_path":"/design-system/about/what-is-ripple","layout":"page"},{"title":"Who's it for?","_path":"/design-system/about/whos-it-for","layout":"page"},{"title":"Support","_path":"/design-system/about/getting-support","layout":"page"},{"title":"Contributing","_path":"/design-system/about/contributing","layout":"page"}]},{"title":"Design","_path":"/design-system/design","children":[{"title":"Getting started","_path":"/design-system/design/getting-started","layout":"page"},{"title":"Our design principles","_path":"/design-system/design/our-design-principles","layout":"page"},{"title":"Design tokens","_path":"/design-system/design/design-tokens","layout":"page"},{"title":"Theming guidance for designers","_path":"/design-system/design/theming-guidance-for-designers","layout":"page"}]},{"title":"Develop","_path":"/design-system/develop","children":[{"title":"Getting started","_path":"/design-system/develop/getting-started","layout":"page"},{"title":"Contributing","_path":"/design-system/develop/contributing","layout":"page"},{"title":"Theme and brand application","_path":"/design-system/develop/theming","layout":"page"},{"title":"Usage","_path":"/design-system/develop/usage","children":[{"title":"Access to Github Packages","_path":"/design-system/develop/usage/access-to-github-packages","layout":"page"},{"title":"Vue","_path":"/design-system/develop/usage/vue","layout":"page"},{"title":"Nuxt","_path":"/design-system/develop/usage/nuxt","layout":"page"},{"title":"Web components","_path":"/design-system/develop/usage/webcomponents","layout":"page"},{"title":"Styles only","_path":"/design-system/develop/usage/css-only","layout":"page"}],"layout":"page"}]},{"title":"Styles","_path":"/design-system/styles","children":[{"title":"Colour","_path":"/design-system/styles/colour","layout":"page"},{"title":"Focus state","_path":"/design-system/styles/focus-state","layout":"page"},{"title":"Grid","_path":"/design-system/styles/grid","layout":"page"},{"title":"Icons","_path":"/design-system/styles/icons","layout":"page"},{"title":"Layer styles","_path":"/design-system/styles/layer-styles","layout":"page"},{"title":"Layout","_path":"/design-system/styles/layout","layout":"page"},{"title":"Logo","_path":"/design-system/styles/logo","layout":"page"},{"title":"Motion","_path":"/design-system/styles/motion","layout":"page"},{"title":"Spacing","_path":"/design-system/styles/spacing","layout":"page"},{"title":"Typography","_path":"/design-system/styles/typography","layout":"page"}]},{"title":"Components","_path":"/design-system/components","children":[{"title":"Accordion","_path":"/design-system/components/accordion","layout":"page"},{"title":"Acknowledgement","_path":"/design-system/components/acknowledgment","layout":"page"},{"title":"Alert","_path":"/design-system/components/alert","layout":"page"},{"title":"Block quote","_path":"/design-system/components/block-quote","layout":"page"},{"title":"Breadcrumb","_path":"/design-system/components/breadcrumb","layout":"page"},{"title":"Button","_path":"/design-system/components/button","layout":"page"},{"title":"Call to action","_path":"/design-system/components/call-to-action","layout":"page"},{"title":"Callout","_path":"/design-system/components/callout","layout":"page"},{"title":"Campaign banner","_path":"/design-system/components/campaign-banner","layout":"page"},{"title":"Card","_path":"/design-system/components/card","layout":"page"},{"title":"Carousel","_path":"/design-system/components/carousel","layout":"page"},{"title":"Category grid","_path":"/design-system/components/category-grid","layout":"page"},{"title":"Checkbox","_path":"/design-system/components/checkbox","layout":"page"},{"title":"Chip","_path":"/design-system/components/chip","layout":"page"},{"title":"Contact us","_path":"/design-system/components/contact-us","layout":"page"},{"title":"Date input","_path":"/design-system/components/date-input","layout":"page"},{"title":"Detail list","_path":"/design-system/components/detail-list","layout":"page"},{"title":"Dropdown","_path":"/design-system/components/dropdown","layout":"page"},{"title":"File","_path":"/design-system/components/file","layout":"page"},{"title":"Footer","_path":"/design-system/components/footer","layout":"page"},{"title":"Form","_path":"/design-system/components/form","layout":"page"},{"title":"Form alert","_path":"/design-system/components/form-alert","layout":"page"},{"title":"Header","_path":"/design-system/components/header","layout":"page"},{"title":"In-page navigation","_path":"/design-system/components/in-page-navigation","layout":"page"},{"title":"Input field","_path":"/design-system/components/input-field","layout":"page"},{"title":"Key dates","_path":"/design-system/components/key-dates","layout":"page"},{"title":"Media","_path":"/design-system/components/media","layout":"page"},{"title":"Media embed","_path":"/design-system/components/media-embed","layout":"page"},{"title":"Media fullscreen","_path":"/design-system/components/media-fullscreen","layout":"page"},{"title":"Media gallery","_path":"/design-system/components/media-gallery","layout":"page"},{"title":"Option button","_path":"/design-system/components/option-button","layout":"page"},{"title":"Page action","_path":"/design-system/components/page-action","layout":"page"},{"title":"Pagination","_path":"/design-system/components/pagination","layout":"page"},{"title":"Primary navigation","_path":"/design-system/components/primary-navigation","layout":"page"},{"title":"Profile","_path":"/design-system/components/profile","layout":"page"},{"title":"Radio button","_path":"/design-system/components/radio-button","layout":"page"},{"title":"Related links","_path":"/design-system/components/related-links","layout":"page"},{"title":"Results listing","_path":"/design-system/components/results-listing","layout":"page"},{"title":"Search bar","_path":"/design-system/components/search-bar","layout":"page"},{"title":"Skip link","_path":"/design-system/components/skip-link","layout":"page"},{"title":"Social share","_path":"/design-system/components/social-share","layout":"page"},{"title":"Statistics grid","_path":"/design-system/components/statistics-grid","layout":"page"},{"title":"Table","_path":"/design-system/components/table","layout":"page"},{"title":"Tabs","_path":"/design-system/components/tabs","layout":"page"},{"title":"Tag","_path":"/design-system/components/tag","layout":"page"},{"title":"Text area","_path":"/design-system/components/text-area","layout":"page"},{"title":"Timeline","_path":"/design-system/components/timeline","layout":"page"},{"title":"Vertical navigation","_path":"/design-system/components/vertical-navigation","layout":"page"}]}]},{"title":"Ripple Framework","_path":"/framework","children":[{"title":"Ripple Framework","_path":"/framework","layout":"page"},{"title":"Key Concepts","_path":"/framework/key-concepts","children":[{"title":"Nuxt","_path":"/framework/key-concepts/nuxt","layout":"page"},{"title":"Layers","_path":"/framework/key-concepts/nuxt-layers","layout":"page"},{"title":"API endpoints","_path":"/framework/key-concepts/api-endpoints","layout":"page"},{"title":"Content types","_path":"/framework/key-concepts/content-types","layout":"page"},{"title":"Dynamic components","_path":"/framework/key-concepts/dynamic-components","layout":"page"}]},{"title":"Guides","_path":"/framework/guides","children":[{"title":"Migrating from Ripple 1.x","_path":"/framework/guides/migrating","layout":"page"},{"title":"Setting up a new site","_path":"/framework/guides/new-sites","layout":"page"},{"title":"Applying theme and brand","_path":"/framework/guides/brand-application","layout":"page"},{"title":"Creating content types","_path":"/framework/guides/creating-content-types","layout":"page"},{"title":"Creating new layers","_path":"/framework/guides/creating-new-layers","layout":"page"},{"title":"Adding a new dynamic component","_path":"/framework/guides/dynamic-components","layout":"page"}]},{"title":"Core modules","_path":"/framework/core-modules","layout":"page"}],"layout":"page"}]}
\ No newline at end of file
diff --git a/api/_content/navigation/VEvCElvzal.1714695122636.json b/api/_content/navigation/VEvCElvzal.1714695620480.json
similarity index 100%
rename from api/_content/navigation/VEvCElvzal.1714695122636.json
rename to api/_content/navigation/VEvCElvzal.1714695620480.json
diff --git a/api/_content/navigation/X4Kd2USCYY.1714695122636.json b/api/_content/navigation/X4Kd2USCYY.1714695620480.json
similarity index 100%
rename from api/_content/navigation/X4Kd2USCYY.1714695122636.json
rename to api/_content/navigation/X4Kd2USCYY.1714695620480.json
diff --git a/api/_content/navigation/u7BbTyuhiE.1714695122636.json b/api/_content/navigation/u7BbTyuhiE.1714695620480.json
similarity index 100%
rename from api/_content/navigation/u7BbTyuhiE.1714695122636.json
rename to api/_content/navigation/u7BbTyuhiE.1714695620480.json
diff --git a/api/_content/query/0aaoN3qg9x.1714695122636.json b/api/_content/query/0aaoN3qg9x.1714695620480.json
similarity index 100%
rename from api/_content/query/0aaoN3qg9x.1714695122636.json
rename to api/_content/query/0aaoN3qg9x.1714695620480.json
diff --git a/api/_content/query/0yFKOFomIE.1714695122636.json b/api/_content/query/0yFKOFomIE.1714695620480.json
similarity index 100%
rename from api/_content/query/0yFKOFomIE.1714695122636.json
rename to api/_content/query/0yFKOFomIE.1714695620480.json
diff --git a/api/_content/query/1h0UvPl5DJ.1714695122636.json b/api/_content/query/1h0UvPl5DJ.1714695620480.json
similarity index 100%
rename from api/_content/query/1h0UvPl5DJ.1714695122636.json
rename to api/_content/query/1h0UvPl5DJ.1714695620480.json
diff --git a/api/_content/query/1sexmTbv3K.1714695122636.json b/api/_content/query/1sexmTbv3K.1714695620480.json
similarity index 100%
rename from api/_content/query/1sexmTbv3K.1714695122636.json
rename to api/_content/query/1sexmTbv3K.1714695620480.json
diff --git a/api/_content/query/2a1w1AtxYS.1714695122636.json b/api/_content/query/2a1w1AtxYS.1714695620480.json
similarity index 100%
rename from api/_content/query/2a1w1AtxYS.1714695122636.json
rename to api/_content/query/2a1w1AtxYS.1714695620480.json
diff --git a/api/_content/query/2mCaREffKT.1714695122636.json b/api/_content/query/2mCaREffKT.1714695620480.json
similarity index 100%
rename from api/_content/query/2mCaREffKT.1714695122636.json
rename to api/_content/query/2mCaREffKT.1714695620480.json
diff --git a/api/_content/query/2nhac26oaS.1714695122636.json b/api/_content/query/2nhac26oaS.1714695620480.json
similarity index 100%
rename from api/_content/query/2nhac26oaS.1714695122636.json
rename to api/_content/query/2nhac26oaS.1714695620480.json
diff --git a/api/_content/query/37U72dvAml.1714695122636.json b/api/_content/query/37U72dvAml.1714695620480.json
similarity index 100%
rename from api/_content/query/37U72dvAml.1714695122636.json
rename to api/_content/query/37U72dvAml.1714695620480.json
diff --git a/api/_content/query/3e5KwkFD8D.1714695122636.json b/api/_content/query/3e5KwkFD8D.1714695620480.json
similarity index 100%
rename from api/_content/query/3e5KwkFD8D.1714695122636.json
rename to api/_content/query/3e5KwkFD8D.1714695620480.json
diff --git a/api/_content/query/3pJr534AHd.1714695122636.json b/api/_content/query/3pJr534AHd.1714695620480.json
similarity index 100%
rename from api/_content/query/3pJr534AHd.1714695122636.json
rename to api/_content/query/3pJr534AHd.1714695620480.json
diff --git a/api/_content/query/4AcSjmUyKz.1714695122636.json b/api/_content/query/4AcSjmUyKz.1714695620480.json
similarity index 100%
rename from api/_content/query/4AcSjmUyKz.1714695122636.json
rename to api/_content/query/4AcSjmUyKz.1714695620480.json
diff --git a/api/_content/query/4CDH2RZlOg.1714695122636.json b/api/_content/query/4CDH2RZlOg.1714695620480.json
similarity index 100%
rename from api/_content/query/4CDH2RZlOg.1714695122636.json
rename to api/_content/query/4CDH2RZlOg.1714695620480.json
diff --git a/api/_content/query/4GAecKBcgM.1714695122636.json b/api/_content/query/4GAecKBcgM.1714695620480.json
similarity index 100%
rename from api/_content/query/4GAecKBcgM.1714695122636.json
rename to api/_content/query/4GAecKBcgM.1714695620480.json
diff --git a/api/_content/query/4HXkqmVFJb.1714695122636.json b/api/_content/query/4HXkqmVFJb.1714695620480.json
similarity index 100%
rename from api/_content/query/4HXkqmVFJb.1714695122636.json
rename to api/_content/query/4HXkqmVFJb.1714695620480.json
diff --git a/api/_content/query/4N78hAZbAr.1714695122636.json b/api/_content/query/4N78hAZbAr.1714695620480.json
similarity index 100%
rename from api/_content/query/4N78hAZbAr.1714695122636.json
rename to api/_content/query/4N78hAZbAr.1714695620480.json
diff --git a/api/_content/query/4gRKa55c92.1714695122636.json b/api/_content/query/4gRKa55c92.1714695620480.json
similarity index 100%
rename from api/_content/query/4gRKa55c92.1714695122636.json
rename to api/_content/query/4gRKa55c92.1714695620480.json
diff --git a/api/_content/query/4gkyHLRvtL.1714695122636.json b/api/_content/query/4gkyHLRvtL.1714695620480.json
similarity index 100%
rename from api/_content/query/4gkyHLRvtL.1714695122636.json
rename to api/_content/query/4gkyHLRvtL.1714695620480.json
diff --git a/api/_content/query/4lybtDCVQt.1714695122636.json b/api/_content/query/4lybtDCVQt.1714695620480.json
similarity index 100%
rename from api/_content/query/4lybtDCVQt.1714695122636.json
rename to api/_content/query/4lybtDCVQt.1714695620480.json
diff --git a/api/_content/query/4nnBbKHqJy.1714695122636.json b/api/_content/query/4nnBbKHqJy.1714695620480.json
similarity index 100%
rename from api/_content/query/4nnBbKHqJy.1714695122636.json
rename to api/_content/query/4nnBbKHqJy.1714695620480.json
diff --git a/api/_content/query/4voVzfjyBs.1714695122636.json b/api/_content/query/4voVzfjyBs.1714695620480.json
similarity index 100%
rename from api/_content/query/4voVzfjyBs.1714695122636.json
rename to api/_content/query/4voVzfjyBs.1714695620480.json
diff --git a/api/_content/query/50smjdqWfq.1714695122636.json b/api/_content/query/50smjdqWfq.1714695620480.json
similarity index 100%
rename from api/_content/query/50smjdqWfq.1714695122636.json
rename to api/_content/query/50smjdqWfq.1714695620480.json
diff --git a/api/_content/query/5FAfxJoHkk.1714695122636.json b/api/_content/query/5FAfxJoHkk.1714695620480.json
similarity index 100%
rename from api/_content/query/5FAfxJoHkk.1714695122636.json
rename to api/_content/query/5FAfxJoHkk.1714695620480.json
diff --git a/api/_content/query/5U43wnL6p8.1714695122636.json b/api/_content/query/5U43wnL6p8.1714695620480.json
similarity index 100%
rename from api/_content/query/5U43wnL6p8.1714695122636.json
rename to api/_content/query/5U43wnL6p8.1714695620480.json
diff --git a/api/_content/query/5jdemGYhzs.1714695122636.json b/api/_content/query/5jdemGYhzs.1714695620480.json
similarity index 100%
rename from api/_content/query/5jdemGYhzs.1714695122636.json
rename to api/_content/query/5jdemGYhzs.1714695620480.json
diff --git a/api/_content/query/6m9vKFTHoz.1714695122636.json b/api/_content/query/6m9vKFTHoz.1714695620480.json
similarity index 100%
rename from api/_content/query/6m9vKFTHoz.1714695122636.json
rename to api/_content/query/6m9vKFTHoz.1714695620480.json
diff --git a/api/_content/query/6qsnYmf6Kg.1714695122636.json b/api/_content/query/6qsnYmf6Kg.1714695620480.json
similarity index 100%
rename from api/_content/query/6qsnYmf6Kg.1714695122636.json
rename to api/_content/query/6qsnYmf6Kg.1714695620480.json
diff --git a/api/_content/query/7YecXPJ42X.1714695122636.json b/api/_content/query/7YecXPJ42X.1714695620480.json
similarity index 100%
rename from api/_content/query/7YecXPJ42X.1714695122636.json
rename to api/_content/query/7YecXPJ42X.1714695620480.json
diff --git a/api/_content/query/7ht5DW7UkW.1714695122636.json b/api/_content/query/7ht5DW7UkW.1714695620480.json
similarity index 100%
rename from api/_content/query/7ht5DW7UkW.1714695122636.json
rename to api/_content/query/7ht5DW7UkW.1714695620480.json
diff --git a/api/_content/query/7xyfDntTEH.1714695122636.json b/api/_content/query/7xyfDntTEH.1714695620480.json
similarity index 100%
rename from api/_content/query/7xyfDntTEH.1714695122636.json
rename to api/_content/query/7xyfDntTEH.1714695620480.json
diff --git a/api/_content/query/8YsCLN3a5w.1714695122636.json b/api/_content/query/8YsCLN3a5w.1714695620480.json
similarity index 100%
rename from api/_content/query/8YsCLN3a5w.1714695122636.json
rename to api/_content/query/8YsCLN3a5w.1714695620480.json
diff --git a/api/_content/query/8bRHO8CL4a.1714695122636.json b/api/_content/query/8bRHO8CL4a.1714695620480.json
similarity index 100%
rename from api/_content/query/8bRHO8CL4a.1714695122636.json
rename to api/_content/query/8bRHO8CL4a.1714695620480.json
diff --git a/api/_content/query/9XxSCC2Gng.1714695122636.json b/api/_content/query/9XxSCC2Gng.1714695620480.json
similarity index 100%
rename from api/_content/query/9XxSCC2Gng.1714695122636.json
rename to api/_content/query/9XxSCC2Gng.1714695620480.json
diff --git a/api/_content/query/A9fXFyNTcE.1714695122636.json b/api/_content/query/A9fXFyNTcE.1714695620480.json
similarity index 100%
rename from api/_content/query/A9fXFyNTcE.1714695122636.json
rename to api/_content/query/A9fXFyNTcE.1714695620480.json
diff --git a/api/_content/query/AWcKDZuk7Q.1714695122636.json b/api/_content/query/AWcKDZuk7Q.1714695620480.json
similarity index 100%
rename from api/_content/query/AWcKDZuk7Q.1714695122636.json
rename to api/_content/query/AWcKDZuk7Q.1714695620480.json
diff --git a/api/_content/query/Atv5Eb58HG.1714695122636.json b/api/_content/query/Atv5Eb58HG.1714695620480.json
similarity index 100%
rename from api/_content/query/Atv5Eb58HG.1714695122636.json
rename to api/_content/query/Atv5Eb58HG.1714695620480.json
diff --git a/api/_content/query/Az1biL1r1R.1714695122636.json b/api/_content/query/Az1biL1r1R.1714695620480.json
similarity index 100%
rename from api/_content/query/Az1biL1r1R.1714695122636.json
rename to api/_content/query/Az1biL1r1R.1714695620480.json
diff --git a/api/_content/query/BNBjGRc556.1714695122636.json b/api/_content/query/BNBjGRc556.1714695620480.json
similarity index 100%
rename from api/_content/query/BNBjGRc556.1714695122636.json
rename to api/_content/query/BNBjGRc556.1714695620480.json
diff --git a/api/_content/query/BZQqMF8iy9.1714695122636.json b/api/_content/query/BZQqMF8iy9.1714695620480.json
similarity index 100%
rename from api/_content/query/BZQqMF8iy9.1714695122636.json
rename to api/_content/query/BZQqMF8iy9.1714695620480.json
diff --git a/api/_content/query/BlQCj02zMr.1714695122636.json b/api/_content/query/BlQCj02zMr.1714695620480.json
similarity index 100%
rename from api/_content/query/BlQCj02zMr.1714695122636.json
rename to api/_content/query/BlQCj02zMr.1714695620480.json
diff --git a/api/_content/query/CPfLz4RDEN.1714695122636.json b/api/_content/query/CPfLz4RDEN.1714695620480.json
similarity index 100%
rename from api/_content/query/CPfLz4RDEN.1714695122636.json
rename to api/_content/query/CPfLz4RDEN.1714695620480.json
diff --git a/api/_content/query/Cxn4djMCqT.1714695122636.json b/api/_content/query/Cxn4djMCqT.1714695620480.json
similarity index 100%
rename from api/_content/query/Cxn4djMCqT.1714695122636.json
rename to api/_content/query/Cxn4djMCqT.1714695620480.json
diff --git a/api/_content/query/DRQuabYniG.1714695122636.json b/api/_content/query/DRQuabYniG.1714695620480.json
similarity index 100%
rename from api/_content/query/DRQuabYniG.1714695122636.json
rename to api/_content/query/DRQuabYniG.1714695620480.json
diff --git a/api/_content/query/DrRBJ50Lyl.1714695122636.json b/api/_content/query/DrRBJ50Lyl.1714695620480.json
similarity index 100%
rename from api/_content/query/DrRBJ50Lyl.1714695122636.json
rename to api/_content/query/DrRBJ50Lyl.1714695620480.json
diff --git a/api/_content/query/E4VbfHM5TO.1714695122636.json b/api/_content/query/E4VbfHM5TO.1714695620480.json
similarity index 100%
rename from api/_content/query/E4VbfHM5TO.1714695122636.json
rename to api/_content/query/E4VbfHM5TO.1714695620480.json
diff --git a/api/_content/query/EA1Viu7YX3.1714695122636.json b/api/_content/query/EA1Viu7YX3.1714695620480.json
similarity index 100%
rename from api/_content/query/EA1Viu7YX3.1714695122636.json
rename to api/_content/query/EA1Viu7YX3.1714695620480.json
diff --git a/api/_content/query/EytvxStB0e.1714695122636.json b/api/_content/query/EytvxStB0e.1714695620480.json
similarity index 100%
rename from api/_content/query/EytvxStB0e.1714695122636.json
rename to api/_content/query/EytvxStB0e.1714695620480.json
diff --git a/api/_content/query/FL2NoTOnZH.1714695122636.json b/api/_content/query/FL2NoTOnZH.1714695620480.json
similarity index 100%
rename from api/_content/query/FL2NoTOnZH.1714695122636.json
rename to api/_content/query/FL2NoTOnZH.1714695620480.json
diff --git a/api/_content/query/FRx43BOHwZ.1714695122636.json b/api/_content/query/FRx43BOHwZ.1714695620480.json
similarity index 100%
rename from api/_content/query/FRx43BOHwZ.1714695122636.json
rename to api/_content/query/FRx43BOHwZ.1714695620480.json
diff --git a/api/_content/query/FXcU8uc5Dd.1714695122636.json b/api/_content/query/FXcU8uc5Dd.1714695620480.json
similarity index 100%
rename from api/_content/query/FXcU8uc5Dd.1714695122636.json
rename to api/_content/query/FXcU8uc5Dd.1714695620480.json
diff --git a/api/_content/query/G6inKMevJ7.1714695122636.json b/api/_content/query/G6inKMevJ7.1714695620480.json
similarity index 100%
rename from api/_content/query/G6inKMevJ7.1714695122636.json
rename to api/_content/query/G6inKMevJ7.1714695620480.json
diff --git a/api/_content/query/GJj5YfVIWk.1714695122636.json b/api/_content/query/GJj5YfVIWk.1714695620480.json
similarity index 100%
rename from api/_content/query/GJj5YfVIWk.1714695122636.json
rename to api/_content/query/GJj5YfVIWk.1714695620480.json
diff --git a/api/_content/query/GNwfSxVFIk.1714695122636.json b/api/_content/query/GNwfSxVFIk.1714695620480.json
similarity index 100%
rename from api/_content/query/GNwfSxVFIk.1714695122636.json
rename to api/_content/query/GNwfSxVFIk.1714695620480.json
diff --git a/api/_content/query/IHTNSTG2BE.1714695122636.json b/api/_content/query/IHTNSTG2BE.1714695620480.json
similarity index 100%
rename from api/_content/query/IHTNSTG2BE.1714695122636.json
rename to api/_content/query/IHTNSTG2BE.1714695620480.json
diff --git a/api/_content/query/IVSDZeduvC.1714695122636.json b/api/_content/query/IVSDZeduvC.1714695620480.json
similarity index 100%
rename from api/_content/query/IVSDZeduvC.1714695122636.json
rename to api/_content/query/IVSDZeduvC.1714695620480.json
diff --git a/api/_content/query/ImzjcGUQec.1714695122636.json b/api/_content/query/ImzjcGUQec.1714695620480.json
similarity index 100%
rename from api/_content/query/ImzjcGUQec.1714695122636.json
rename to api/_content/query/ImzjcGUQec.1714695620480.json
diff --git a/api/_content/query/Int4bWCGef.1714695122636.json b/api/_content/query/Int4bWCGef.1714695620480.json
similarity index 100%
rename from api/_content/query/Int4bWCGef.1714695122636.json
rename to api/_content/query/Int4bWCGef.1714695620480.json
diff --git a/api/_content/query/K0FMoZzx9O.1714695122636.json b/api/_content/query/K0FMoZzx9O.1714695620480.json
similarity index 100%
rename from api/_content/query/K0FMoZzx9O.1714695122636.json
rename to api/_content/query/K0FMoZzx9O.1714695620480.json
diff --git a/api/_content/query/KFY0AW5Ub0.1714695122636.json b/api/_content/query/KFY0AW5Ub0.1714695620480.json
similarity index 100%
rename from api/_content/query/KFY0AW5Ub0.1714695122636.json
rename to api/_content/query/KFY0AW5Ub0.1714695620480.json
diff --git a/api/_content/query/KrSUbbePmB.1714695122636.json b/api/_content/query/KrSUbbePmB.1714695620480.json
similarity index 100%
rename from api/_content/query/KrSUbbePmB.1714695122636.json
rename to api/_content/query/KrSUbbePmB.1714695620480.json
diff --git a/api/_content/query/L4BiBaBwSa.1714695122636.json b/api/_content/query/L4BiBaBwSa.1714695620480.json
similarity index 100%
rename from api/_content/query/L4BiBaBwSa.1714695122636.json
rename to api/_content/query/L4BiBaBwSa.1714695620480.json
diff --git a/api/_content/query/LRqNzYU79f.1714695122636.json b/api/_content/query/LRqNzYU79f.1714695620480.json
similarity index 100%
rename from api/_content/query/LRqNzYU79f.1714695122636.json
rename to api/_content/query/LRqNzYU79f.1714695620480.json
diff --git a/api/_content/query/LhnX2N5NGd.1714695122636.json b/api/_content/query/LhnX2N5NGd.1714695620480.json
similarity index 100%
rename from api/_content/query/LhnX2N5NGd.1714695122636.json
rename to api/_content/query/LhnX2N5NGd.1714695620480.json
diff --git a/api/_content/query/LmYw8BgZez.1714695122636.json b/api/_content/query/LmYw8BgZez.1714695620480.json
similarity index 100%
rename from api/_content/query/LmYw8BgZez.1714695122636.json
rename to api/_content/query/LmYw8BgZez.1714695620480.json
diff --git a/api/_content/query/LoX2CGyAED.1714695122636.json b/api/_content/query/LoX2CGyAED.1714695620480.json
similarity index 100%
rename from api/_content/query/LoX2CGyAED.1714695122636.json
rename to api/_content/query/LoX2CGyAED.1714695620480.json
diff --git a/api/_content/query/M44yiRFUUt.1714695122636.json b/api/_content/query/M44yiRFUUt.1714695620480.json
similarity index 100%
rename from api/_content/query/M44yiRFUUt.1714695122636.json
rename to api/_content/query/M44yiRFUUt.1714695620480.json
diff --git a/api/_content/query/MRFkBuP81T.1714695122636.json b/api/_content/query/MRFkBuP81T.1714695620480.json
similarity index 100%
rename from api/_content/query/MRFkBuP81T.1714695122636.json
rename to api/_content/query/MRFkBuP81T.1714695620480.json
diff --git a/api/_content/query/MdKSCPenip.1714695122636.json b/api/_content/query/MdKSCPenip.1714695620480.json
similarity index 100%
rename from api/_content/query/MdKSCPenip.1714695122636.json
rename to api/_content/query/MdKSCPenip.1714695620480.json
diff --git a/api/_content/query/Mk9AxDcquK.1714695122636.json b/api/_content/query/Mk9AxDcquK.1714695620480.json
similarity index 100%
rename from api/_content/query/Mk9AxDcquK.1714695122636.json
rename to api/_content/query/Mk9AxDcquK.1714695620480.json
diff --git a/api/_content/query/MulTBoHiIX.1714695122636.json b/api/_content/query/MulTBoHiIX.1714695620480.json
similarity index 100%
rename from api/_content/query/MulTBoHiIX.1714695122636.json
rename to api/_content/query/MulTBoHiIX.1714695620480.json
diff --git a/api/_content/query/MyfyBodaI9.1714695122636.json b/api/_content/query/MyfyBodaI9.1714695620480.json
similarity index 100%
rename from api/_content/query/MyfyBodaI9.1714695122636.json
rename to api/_content/query/MyfyBodaI9.1714695620480.json
diff --git a/api/_content/query/O88noog5Ku.1714695122636.json b/api/_content/query/O88noog5Ku.1714695620480.json
similarity index 100%
rename from api/_content/query/O88noog5Ku.1714695122636.json
rename to api/_content/query/O88noog5Ku.1714695620480.json
diff --git a/api/_content/query/P93e3h20vo.1714695122636.json b/api/_content/query/P93e3h20vo.1714695620480.json
similarity index 100%
rename from api/_content/query/P93e3h20vo.1714695122636.json
rename to api/_content/query/P93e3h20vo.1714695620480.json
diff --git a/api/_content/query/PDyWpwM8OX.1714695122636.json b/api/_content/query/PDyWpwM8OX.1714695620480.json
similarity index 100%
rename from api/_content/query/PDyWpwM8OX.1714695122636.json
rename to api/_content/query/PDyWpwM8OX.1714695620480.json
diff --git a/api/_content/query/PJBEZoM2Co.1714695122636.json b/api/_content/query/PJBEZoM2Co.1714695620480.json
similarity index 100%
rename from api/_content/query/PJBEZoM2Co.1714695122636.json
rename to api/_content/query/PJBEZoM2Co.1714695620480.json
diff --git a/api/_content/query/QkADENtF1a.1714695122636.json b/api/_content/query/QkADENtF1a.1714695620480.json
similarity index 100%
rename from api/_content/query/QkADENtF1a.1714695122636.json
rename to api/_content/query/QkADENtF1a.1714695620480.json
diff --git a/api/_content/query/SF9m31U3TG.1714695122636.json b/api/_content/query/SF9m31U3TG.1714695620480.json
similarity index 100%
rename from api/_content/query/SF9m31U3TG.1714695122636.json
rename to api/_content/query/SF9m31U3TG.1714695620480.json
diff --git a/api/_content/query/SJLhvQED7V.1714695122636.json b/api/_content/query/SJLhvQED7V.1714695620480.json
similarity index 100%
rename from api/_content/query/SJLhvQED7V.1714695122636.json
rename to api/_content/query/SJLhvQED7V.1714695620480.json
diff --git a/api/_content/query/SM7WENOXwn.1714695122636.json b/api/_content/query/SM7WENOXwn.1714695620480.json
similarity index 100%
rename from api/_content/query/SM7WENOXwn.1714695122636.json
rename to api/_content/query/SM7WENOXwn.1714695620480.json
diff --git a/api/_content/query/TIFRZ2W30y.1714695122636.json b/api/_content/query/TIFRZ2W30y.1714695620480.json
similarity index 100%
rename from api/_content/query/TIFRZ2W30y.1714695122636.json
rename to api/_content/query/TIFRZ2W30y.1714695620480.json
diff --git a/api/_content/query/TlwNM8EnUb.1714695122636.json b/api/_content/query/TlwNM8EnUb.1714695620480.json
similarity index 100%
rename from api/_content/query/TlwNM8EnUb.1714695122636.json
rename to api/_content/query/TlwNM8EnUb.1714695620480.json
diff --git a/api/_content/query/Tr8c01AB9c.1714695122636.json b/api/_content/query/Tr8c01AB9c.1714695620480.json
similarity index 100%
rename from api/_content/query/Tr8c01AB9c.1714695122636.json
rename to api/_content/query/Tr8c01AB9c.1714695620480.json
diff --git a/api/_content/query/UqYcuzGZzU.1714695122636.json b/api/_content/query/UqYcuzGZzU.1714695620480.json
similarity index 100%
rename from api/_content/query/UqYcuzGZzU.1714695122636.json
rename to api/_content/query/UqYcuzGZzU.1714695620480.json
diff --git a/api/_content/query/UrnjC2F9dw.1714695122636.json b/api/_content/query/UrnjC2F9dw.1714695620480.json
similarity index 100%
rename from api/_content/query/UrnjC2F9dw.1714695122636.json
rename to api/_content/query/UrnjC2F9dw.1714695620480.json
diff --git a/api/_content/query/VYBIyuFjts.1714695122636.json b/api/_content/query/VYBIyuFjts.1714695620480.json
similarity index 100%
rename from api/_content/query/VYBIyuFjts.1714695122636.json
rename to api/_content/query/VYBIyuFjts.1714695620480.json
diff --git a/api/_content/query/VbChyF8OyE.1714695122636.json b/api/_content/query/VbChyF8OyE.1714695620480.json
similarity index 100%
rename from api/_content/query/VbChyF8OyE.1714695122636.json
rename to api/_content/query/VbChyF8OyE.1714695620480.json
diff --git a/api/_content/query/VgHMTDZLK4.1714695122636.json b/api/_content/query/VgHMTDZLK4.1714695620480.json
similarity index 100%
rename from api/_content/query/VgHMTDZLK4.1714695122636.json
rename to api/_content/query/VgHMTDZLK4.1714695620480.json
diff --git a/api/_content/query/WTS5sIVY6D.1714695122636.json b/api/_content/query/WTS5sIVY6D.1714695620480.json
similarity index 100%
rename from api/_content/query/WTS5sIVY6D.1714695122636.json
rename to api/_content/query/WTS5sIVY6D.1714695620480.json
diff --git a/api/_content/query/X0kuUttahW.1714695122636.json b/api/_content/query/X0kuUttahW.1714695620480.json
similarity index 100%
rename from api/_content/query/X0kuUttahW.1714695122636.json
rename to api/_content/query/X0kuUttahW.1714695620480.json
diff --git a/api/_content/query/X4VxdTjbhP.1714695122636.json b/api/_content/query/X4VxdTjbhP.1714695620480.json
similarity index 100%
rename from api/_content/query/X4VxdTjbhP.1714695122636.json
rename to api/_content/query/X4VxdTjbhP.1714695620480.json
diff --git a/api/_content/query/XAPzcVjat3.1714695122636.json b/api/_content/query/XAPzcVjat3.1714695620480.json
similarity index 100%
rename from api/_content/query/XAPzcVjat3.1714695122636.json
rename to api/_content/query/XAPzcVjat3.1714695620480.json
diff --git a/api/_content/query/XFjJyWynAe.1714695122636.json b/api/_content/query/XFjJyWynAe.1714695620480.json
similarity index 100%
rename from api/_content/query/XFjJyWynAe.1714695122636.json
rename to api/_content/query/XFjJyWynAe.1714695620480.json
diff --git a/api/_content/query/XZp1K2Gry5.1714695122636.json b/api/_content/query/XZp1K2Gry5.1714695620480.json
similarity index 100%
rename from api/_content/query/XZp1K2Gry5.1714695122636.json
rename to api/_content/query/XZp1K2Gry5.1714695620480.json
diff --git a/api/_content/query/Xh1IsErcFG.1714695122636.json b/api/_content/query/Xh1IsErcFG.1714695620480.json
similarity index 100%
rename from api/_content/query/Xh1IsErcFG.1714695122636.json
rename to api/_content/query/Xh1IsErcFG.1714695620480.json
diff --git a/api/_content/query/XjS2U5Izhg.1714695122636.json b/api/_content/query/XjS2U5Izhg.1714695620480.json
similarity index 100%
rename from api/_content/query/XjS2U5Izhg.1714695122636.json
rename to api/_content/query/XjS2U5Izhg.1714695620480.json
diff --git a/api/_content/query/Xl71L7ieAm.1714695122636.json b/api/_content/query/Xl71L7ieAm.1714695620480.json
similarity index 100%
rename from api/_content/query/Xl71L7ieAm.1714695122636.json
rename to api/_content/query/Xl71L7ieAm.1714695620480.json
diff --git a/api/_content/query/XmTesIf7f9.1714695122636.json b/api/_content/query/XmTesIf7f9.1714695620480.json
similarity index 100%
rename from api/_content/query/XmTesIf7f9.1714695122636.json
rename to api/_content/query/XmTesIf7f9.1714695620480.json
diff --git a/api/_content/query/YA6fkmNWlw.1714695122636.json b/api/_content/query/YA6fkmNWlw.1714695620480.json
similarity index 100%
rename from api/_content/query/YA6fkmNWlw.1714695122636.json
rename to api/_content/query/YA6fkmNWlw.1714695620480.json
diff --git a/api/_content/query/YCO3BsA2AE.1714695122636.json b/api/_content/query/YCO3BsA2AE.1714695620480.json
similarity index 100%
rename from api/_content/query/YCO3BsA2AE.1714695122636.json
rename to api/_content/query/YCO3BsA2AE.1714695620480.json
diff --git a/api/_content/query/YoUlkYQh6c.1714695122636.json b/api/_content/query/YoUlkYQh6c.1714695620480.json
similarity index 100%
rename from api/_content/query/YoUlkYQh6c.1714695122636.json
rename to api/_content/query/YoUlkYQh6c.1714695620480.json
diff --git a/api/_content/query/Z5EE1O4UbG.1714695122636.json b/api/_content/query/Z5EE1O4UbG.1714695620480.json
similarity index 100%
rename from api/_content/query/Z5EE1O4UbG.1714695122636.json
rename to api/_content/query/Z5EE1O4UbG.1714695620480.json
diff --git a/api/_content/query/Z70rHCO4fI.1714695122636.json b/api/_content/query/Z70rHCO4fI.1714695620480.json
similarity index 100%
rename from api/_content/query/Z70rHCO4fI.1714695122636.json
rename to api/_content/query/Z70rHCO4fI.1714695620480.json
diff --git a/api/_content/query/ZWAUGjhMhU.1714695122636.json b/api/_content/query/ZWAUGjhMhU.1714695620480.json
similarity index 100%
rename from api/_content/query/ZWAUGjhMhU.1714695122636.json
rename to api/_content/query/ZWAUGjhMhU.1714695620480.json
diff --git a/api/_content/query/acark7P3nX.1714695122636.json b/api/_content/query/acark7P3nX.1714695620480.json
similarity index 100%
rename from api/_content/query/acark7P3nX.1714695122636.json
rename to api/_content/query/acark7P3nX.1714695620480.json
diff --git a/api/_content/query/apkiOdtfcp.1714695122636.json b/api/_content/query/apkiOdtfcp.1714695620480.json
similarity index 100%
rename from api/_content/query/apkiOdtfcp.1714695122636.json
rename to api/_content/query/apkiOdtfcp.1714695620480.json
diff --git a/api/_content/query/bEnwKjFwnq.1714695122636.json b/api/_content/query/bEnwKjFwnq.1714695620480.json
similarity index 100%
rename from api/_content/query/bEnwKjFwnq.1714695122636.json
rename to api/_content/query/bEnwKjFwnq.1714695620480.json
diff --git a/api/_content/query/bF3gJlnVu7.1714695122636.json b/api/_content/query/bF3gJlnVu7.1714695620480.json
similarity index 100%
rename from api/_content/query/bF3gJlnVu7.1714695122636.json
rename to api/_content/query/bF3gJlnVu7.1714695620480.json
diff --git a/api/_content/query/bnDywirsxl.1714695122636.json b/api/_content/query/bnDywirsxl.1714695620480.json
similarity index 100%
rename from api/_content/query/bnDywirsxl.1714695122636.json
rename to api/_content/query/bnDywirsxl.1714695620480.json
diff --git a/api/_content/query/brX4CwCJoQ.1714695122636.json b/api/_content/query/brX4CwCJoQ.1714695620480.json
similarity index 100%
rename from api/_content/query/brX4CwCJoQ.1714695122636.json
rename to api/_content/query/brX4CwCJoQ.1714695620480.json
diff --git a/api/_content/query/bzCp7cuiep.1714695122636.json b/api/_content/query/bzCp7cuiep.1714695620480.json
similarity index 100%
rename from api/_content/query/bzCp7cuiep.1714695122636.json
rename to api/_content/query/bzCp7cuiep.1714695620480.json
diff --git a/api/_content/query/c71XK0jI69.1714695122636.json b/api/_content/query/c71XK0jI69.1714695620480.json
similarity index 100%
rename from api/_content/query/c71XK0jI69.1714695122636.json
rename to api/_content/query/c71XK0jI69.1714695620480.json
diff --git a/api/_content/query/cExGEtkzuk.1714695122636.json b/api/_content/query/cExGEtkzuk.1714695620480.json
similarity index 100%
rename from api/_content/query/cExGEtkzuk.1714695122636.json
rename to api/_content/query/cExGEtkzuk.1714695620480.json
diff --git a/api/_content/query/caOGo3s222.1714695122636.json b/api/_content/query/caOGo3s222.1714695620480.json
similarity index 100%
rename from api/_content/query/caOGo3s222.1714695122636.json
rename to api/_content/query/caOGo3s222.1714695620480.json
diff --git a/api/_content/query/ciwJA2cWZR.1714695122636.json b/api/_content/query/ciwJA2cWZR.1714695620480.json
similarity index 100%
rename from api/_content/query/ciwJA2cWZR.1714695122636.json
rename to api/_content/query/ciwJA2cWZR.1714695620480.json
diff --git a/api/_content/query/clipwUGxow.1714695122636.json b/api/_content/query/clipwUGxow.1714695620480.json
similarity index 100%
rename from api/_content/query/clipwUGxow.1714695122636.json
rename to api/_content/query/clipwUGxow.1714695620480.json
diff --git a/api/_content/query/cuM7MVrMUw.1714695122636.json b/api/_content/query/cuM7MVrMUw.1714695620480.json
similarity index 100%
rename from api/_content/query/cuM7MVrMUw.1714695122636.json
rename to api/_content/query/cuM7MVrMUw.1714695620480.json
diff --git a/api/_content/query/dIqZm2MbqA.1714695122636.json b/api/_content/query/dIqZm2MbqA.1714695620480.json
similarity index 100%
rename from api/_content/query/dIqZm2MbqA.1714695122636.json
rename to api/_content/query/dIqZm2MbqA.1714695620480.json
diff --git a/api/_content/query/dKdR0W5tzU.1714695122636.json b/api/_content/query/dKdR0W5tzU.1714695620480.json
similarity index 100%
rename from api/_content/query/dKdR0W5tzU.1714695122636.json
rename to api/_content/query/dKdR0W5tzU.1714695620480.json
diff --git a/api/_content/query/eOtXz0jpwF.1714695122636.json b/api/_content/query/eOtXz0jpwF.1714695620480.json
similarity index 100%
rename from api/_content/query/eOtXz0jpwF.1714695122636.json
rename to api/_content/query/eOtXz0jpwF.1714695620480.json
diff --git a/api/_content/query/etly8IUHtt.1714695122636.json b/api/_content/query/etly8IUHtt.1714695620480.json
similarity index 100%
rename from api/_content/query/etly8IUHtt.1714695122636.json
rename to api/_content/query/etly8IUHtt.1714695620480.json
diff --git a/api/_content/query/eygiU6u8aQ.1714695122636.json b/api/_content/query/eygiU6u8aQ.1714695620480.json
similarity index 100%
rename from api/_content/query/eygiU6u8aQ.1714695122636.json
rename to api/_content/query/eygiU6u8aQ.1714695620480.json
diff --git a/api/_content/query/fRk0JHtrBq.1714695122636.json b/api/_content/query/fRk0JHtrBq.1714695620480.json
similarity index 100%
rename from api/_content/query/fRk0JHtrBq.1714695122636.json
rename to api/_content/query/fRk0JHtrBq.1714695620480.json
diff --git a/api/_content/query/fyKzonlTVE.1714695122636.json b/api/_content/query/fyKzonlTVE.1714695620480.json
similarity index 100%
rename from api/_content/query/fyKzonlTVE.1714695122636.json
rename to api/_content/query/fyKzonlTVE.1714695620480.json
diff --git a/api/_content/query/g90uDrGc6h.1714695122636.json b/api/_content/query/g90uDrGc6h.1714695620480.json
similarity index 100%
rename from api/_content/query/g90uDrGc6h.1714695122636.json
rename to api/_content/query/g90uDrGc6h.1714695620480.json
diff --git a/api/_content/query/gH1XZ96zGS.1714695122636.json b/api/_content/query/gH1XZ96zGS.1714695620480.json
similarity index 100%
rename from api/_content/query/gH1XZ96zGS.1714695122636.json
rename to api/_content/query/gH1XZ96zGS.1714695620480.json
diff --git a/api/_content/query/grXljdbkxM.1714695122636.json b/api/_content/query/grXljdbkxM.1714695620480.json
similarity index 100%
rename from api/_content/query/grXljdbkxM.1714695122636.json
rename to api/_content/query/grXljdbkxM.1714695620480.json
diff --git a/api/_content/query/gvk7ITPeIG.1714695122636.json b/api/_content/query/gvk7ITPeIG.1714695620480.json
similarity index 100%
rename from api/_content/query/gvk7ITPeIG.1714695122636.json
rename to api/_content/query/gvk7ITPeIG.1714695620480.json
diff --git a/api/_content/query/hP08bRT8o2.1714695122636.json b/api/_content/query/hP08bRT8o2.1714695620480.json
similarity index 100%
rename from api/_content/query/hP08bRT8o2.1714695122636.json
rename to api/_content/query/hP08bRT8o2.1714695620480.json
diff --git a/api/_content/query/hckiE95FTb.1714695122636.json b/api/_content/query/hckiE95FTb.1714695620480.json
similarity index 100%
rename from api/_content/query/hckiE95FTb.1714695122636.json
rename to api/_content/query/hckiE95FTb.1714695620480.json
diff --git a/api/_content/query/j64GcQcJKA.1714695122636.json b/api/_content/query/j64GcQcJKA.1714695620480.json
similarity index 100%
rename from api/_content/query/j64GcQcJKA.1714695122636.json
rename to api/_content/query/j64GcQcJKA.1714695620480.json
diff --git a/api/_content/query/j6VGlwh2g9.1714695122636.json b/api/_content/query/j6VGlwh2g9.1714695620480.json
similarity index 100%
rename from api/_content/query/j6VGlwh2g9.1714695122636.json
rename to api/_content/query/j6VGlwh2g9.1714695620480.json
diff --git a/api/_content/query/jgRpWN3BQE.1714695122636.json b/api/_content/query/jgRpWN3BQE.1714695620480.json
similarity index 100%
rename from api/_content/query/jgRpWN3BQE.1714695122636.json
rename to api/_content/query/jgRpWN3BQE.1714695620480.json
diff --git a/api/_content/query/k0LdsxuVgM.1714695122636.json b/api/_content/query/k0LdsxuVgM.1714695620480.json
similarity index 100%
rename from api/_content/query/k0LdsxuVgM.1714695122636.json
rename to api/_content/query/k0LdsxuVgM.1714695620480.json
diff --git a/api/_content/query/kO7epVwzlv.1714695122636.json b/api/_content/query/kO7epVwzlv.1714695620480.json
similarity index 100%
rename from api/_content/query/kO7epVwzlv.1714695122636.json
rename to api/_content/query/kO7epVwzlv.1714695620480.json
diff --git a/api/_content/query/kXlcvutl1N.1714695122636.json b/api/_content/query/kXlcvutl1N.1714695620480.json
similarity index 100%
rename from api/_content/query/kXlcvutl1N.1714695122636.json
rename to api/_content/query/kXlcvutl1N.1714695620480.json
diff --git a/api/_content/query/kh2DZ78o4K.1714695122636.json b/api/_content/query/kh2DZ78o4K.1714695620480.json
similarity index 100%
rename from api/_content/query/kh2DZ78o4K.1714695122636.json
rename to api/_content/query/kh2DZ78o4K.1714695620480.json
diff --git a/api/_content/query/mKPt9msOAD.1714695122636.json b/api/_content/query/mKPt9msOAD.1714695620480.json
similarity index 100%
rename from api/_content/query/mKPt9msOAD.1714695122636.json
rename to api/_content/query/mKPt9msOAD.1714695620480.json
diff --git a/api/_content/query/mPus9cC6oE.1714695122636.json b/api/_content/query/mPus9cC6oE.1714695620480.json
similarity index 100%
rename from api/_content/query/mPus9cC6oE.1714695122636.json
rename to api/_content/query/mPus9cC6oE.1714695620480.json
diff --git a/api/_content/query/mrPIJZRQWV.1714695122636.json b/api/_content/query/mrPIJZRQWV.1714695620480.json
similarity index 100%
rename from api/_content/query/mrPIJZRQWV.1714695122636.json
rename to api/_content/query/mrPIJZRQWV.1714695620480.json
diff --git a/api/_content/query/ok04mhOgoW.1714695122636.json b/api/_content/query/ok04mhOgoW.1714695620480.json
similarity index 100%
rename from api/_content/query/ok04mhOgoW.1714695122636.json
rename to api/_content/query/ok04mhOgoW.1714695620480.json
diff --git a/api/_content/query/pQRGRVXgWa.1714695122636.json b/api/_content/query/pQRGRVXgWa.1714695620480.json
similarity index 100%
rename from api/_content/query/pQRGRVXgWa.1714695122636.json
rename to api/_content/query/pQRGRVXgWa.1714695620480.json
diff --git a/api/_content/query/pawOjRstIF.1714695122636.json b/api/_content/query/pawOjRstIF.1714695620480.json
similarity index 100%
rename from api/_content/query/pawOjRstIF.1714695122636.json
rename to api/_content/query/pawOjRstIF.1714695620480.json
diff --git a/api/_content/query/popbnfes2V.1714695122636.json b/api/_content/query/popbnfes2V.1714695620480.json
similarity index 100%
rename from api/_content/query/popbnfes2V.1714695122636.json
rename to api/_content/query/popbnfes2V.1714695620480.json
diff --git a/api/_content/query/q8OIs3OPBw.1714695122636.json b/api/_content/query/q8OIs3OPBw.1714695620480.json
similarity index 100%
rename from api/_content/query/q8OIs3OPBw.1714695122636.json
rename to api/_content/query/q8OIs3OPBw.1714695620480.json
diff --git a/api/_content/query/qhKQKXD4Dg.1714695122636.json b/api/_content/query/qhKQKXD4Dg.1714695620480.json
similarity index 100%
rename from api/_content/query/qhKQKXD4Dg.1714695122636.json
rename to api/_content/query/qhKQKXD4Dg.1714695620480.json
diff --git a/api/_content/query/qsQbddAhkh.1714695122636.json b/api/_content/query/qsQbddAhkh.1714695620480.json
similarity index 100%
rename from api/_content/query/qsQbddAhkh.1714695122636.json
rename to api/_content/query/qsQbddAhkh.1714695620480.json
diff --git a/api/_content/query/rjiu3BoM41.1714695122636.json b/api/_content/query/rjiu3BoM41.1714695620480.json
similarity index 100%
rename from api/_content/query/rjiu3BoM41.1714695122636.json
rename to api/_content/query/rjiu3BoM41.1714695620480.json
diff --git a/api/_content/query/rvljicMwDZ.1714695122636.json b/api/_content/query/rvljicMwDZ.1714695620480.json
similarity index 100%
rename from api/_content/query/rvljicMwDZ.1714695122636.json
rename to api/_content/query/rvljicMwDZ.1714695620480.json
diff --git a/api/_content/query/s6NQtLySML.1714695122636.json b/api/_content/query/s6NQtLySML.1714695620480.json
similarity index 100%
rename from api/_content/query/s6NQtLySML.1714695122636.json
rename to api/_content/query/s6NQtLySML.1714695620480.json
diff --git a/api/_content/query/s9WFFuhhYd.1714695122636.json b/api/_content/query/s9WFFuhhYd.1714695620480.json
similarity index 100%
rename from api/_content/query/s9WFFuhhYd.1714695122636.json
rename to api/_content/query/s9WFFuhhYd.1714695620480.json
diff --git a/api/_content/query/sFf87k6nba.1714695122636.json b/api/_content/query/sFf87k6nba.1714695620480.json
similarity index 100%
rename from api/_content/query/sFf87k6nba.1714695122636.json
rename to api/_content/query/sFf87k6nba.1714695620480.json
diff --git a/api/_content/query/sdAri5fXY2.1714695122636.json b/api/_content/query/sdAri5fXY2.1714695620480.json
similarity index 100%
rename from api/_content/query/sdAri5fXY2.1714695122636.json
rename to api/_content/query/sdAri5fXY2.1714695620480.json
diff --git a/api/_content/query/ssqfMqELbL.1714695122636.json b/api/_content/query/ssqfMqELbL.1714695620480.json
similarity index 100%
rename from api/_content/query/ssqfMqELbL.1714695122636.json
rename to api/_content/query/ssqfMqELbL.1714695620480.json
diff --git a/api/_content/query/t0PepQyppe.1714695122636.json b/api/_content/query/t0PepQyppe.1714695620480.json
similarity index 100%
rename from api/_content/query/t0PepQyppe.1714695122636.json
rename to api/_content/query/t0PepQyppe.1714695620480.json
diff --git a/api/_content/query/t2lXFVWGtk.1714695122636.json b/api/_content/query/t2lXFVWGtk.1714695620480.json
similarity index 100%
rename from api/_content/query/t2lXFVWGtk.1714695122636.json
rename to api/_content/query/t2lXFVWGtk.1714695620480.json
diff --git a/api/_content/query/tC2YUplCsO.1714695122636.json b/api/_content/query/tC2YUplCsO.1714695620480.json
similarity index 100%
rename from api/_content/query/tC2YUplCsO.1714695122636.json
rename to api/_content/query/tC2YUplCsO.1714695620480.json
diff --git a/api/_content/query/tJ9ZGrn4yB.1714695122636.json b/api/_content/query/tJ9ZGrn4yB.1714695620480.json
similarity index 100%
rename from api/_content/query/tJ9ZGrn4yB.1714695122636.json
rename to api/_content/query/tJ9ZGrn4yB.1714695620480.json
diff --git a/api/_content/query/tTSjBFoWHS.1714695122636.json b/api/_content/query/tTSjBFoWHS.1714695620480.json
similarity index 100%
rename from api/_content/query/tTSjBFoWHS.1714695122636.json
rename to api/_content/query/tTSjBFoWHS.1714695620480.json
diff --git a/api/_content/query/tXkIYFpTjb.1714695122636.json b/api/_content/query/tXkIYFpTjb.1714695620480.json
similarity index 100%
rename from api/_content/query/tXkIYFpTjb.1714695122636.json
rename to api/_content/query/tXkIYFpTjb.1714695620480.json
diff --git a/api/_content/query/tdIi0E0ZcT.1714695122636.json b/api/_content/query/tdIi0E0ZcT.1714695620480.json
similarity index 100%
rename from api/_content/query/tdIi0E0ZcT.1714695122636.json
rename to api/_content/query/tdIi0E0ZcT.1714695620480.json
diff --git a/api/_content/query/tpTHQGg3jH.1714695122636.json b/api/_content/query/tpTHQGg3jH.1714695620480.json
similarity index 100%
rename from api/_content/query/tpTHQGg3jH.1714695122636.json
rename to api/_content/query/tpTHQGg3jH.1714695620480.json
diff --git a/api/_content/query/u5WCIRmncC.1714695122636.json b/api/_content/query/u5WCIRmncC.1714695620480.json
similarity index 100%
rename from api/_content/query/u5WCIRmncC.1714695122636.json
rename to api/_content/query/u5WCIRmncC.1714695620480.json
diff --git a/api/_content/query/ufL8jzkw3H.1714695122636.json b/api/_content/query/ufL8jzkw3H.1714695620480.json
similarity index 100%
rename from api/_content/query/ufL8jzkw3H.1714695122636.json
rename to api/_content/query/ufL8jzkw3H.1714695620480.json
diff --git a/api/_content/query/uiREdQR1My.1714695122636.json b/api/_content/query/uiREdQR1My.1714695620480.json
similarity index 100%
rename from api/_content/query/uiREdQR1My.1714695122636.json
rename to api/_content/query/uiREdQR1My.1714695620480.json
diff --git a/api/_content/query/utM4Ruw0ol.1714695122636.json b/api/_content/query/utM4Ruw0ol.1714695620480.json
similarity index 100%
rename from api/_content/query/utM4Ruw0ol.1714695122636.json
rename to api/_content/query/utM4Ruw0ol.1714695620480.json
diff --git a/api/_content/query/v6HPfz8OL9.1714695122636.json b/api/_content/query/v6HPfz8OL9.1714695620480.json
similarity index 100%
rename from api/_content/query/v6HPfz8OL9.1714695122636.json
rename to api/_content/query/v6HPfz8OL9.1714695620480.json
diff --git a/api/_content/query/vJwSfNopNI.1714695122636.json b/api/_content/query/vJwSfNopNI.1714695620480.json
similarity index 100%
rename from api/_content/query/vJwSfNopNI.1714695122636.json
rename to api/_content/query/vJwSfNopNI.1714695620480.json
diff --git a/api/_content/query/vdsDSrkXFQ.1714695122636.json b/api/_content/query/vdsDSrkXFQ.1714695620480.json
similarity index 100%
rename from api/_content/query/vdsDSrkXFQ.1714695122636.json
rename to api/_content/query/vdsDSrkXFQ.1714695620480.json
diff --git a/api/_content/query/vj66SN51A0.1714695122636.json b/api/_content/query/vj66SN51A0.1714695620480.json
similarity index 100%
rename from api/_content/query/vj66SN51A0.1714695122636.json
rename to api/_content/query/vj66SN51A0.1714695620480.json
diff --git a/api/_content/query/w37itSs4uJ.1714695122636.json b/api/_content/query/w37itSs4uJ.1714695620480.json
similarity index 100%
rename from api/_content/query/w37itSs4uJ.1714695122636.json
rename to api/_content/query/w37itSs4uJ.1714695620480.json
diff --git a/api/_content/query/wEB9wuD1Rn.1714695122636.json b/api/_content/query/wEB9wuD1Rn.1714695620480.json
similarity index 100%
rename from api/_content/query/wEB9wuD1Rn.1714695122636.json
rename to api/_content/query/wEB9wuD1Rn.1714695620480.json
diff --git a/api/_content/query/wH3ANibFW3.1714695122636.json b/api/_content/query/wH3ANibFW3.1714695620480.json
similarity index 100%
rename from api/_content/query/wH3ANibFW3.1714695122636.json
rename to api/_content/query/wH3ANibFW3.1714695620480.json
diff --git a/api/_content/query/xCcU5Gnepq.1714695122636.json b/api/_content/query/xCcU5Gnepq.1714695620480.json
similarity index 100%
rename from api/_content/query/xCcU5Gnepq.1714695122636.json
rename to api/_content/query/xCcU5Gnepq.1714695620480.json
diff --git a/api/_content/query/xKaOOlWHDJ.1714695122636.json b/api/_content/query/xKaOOlWHDJ.1714695620480.json
similarity index 100%
rename from api/_content/query/xKaOOlWHDJ.1714695122636.json
rename to api/_content/query/xKaOOlWHDJ.1714695620480.json
diff --git a/api/_content/query/xSzuF1nnCj.1714695122636.json b/api/_content/query/xSzuF1nnCj.1714695620480.json
similarity index 100%
rename from api/_content/query/xSzuF1nnCj.1714695122636.json
rename to api/_content/query/xSzuF1nnCj.1714695620480.json
diff --git a/api/_content/query/xWeY3NfYtX.1714695122636.json b/api/_content/query/xWeY3NfYtX.1714695620480.json
similarity index 100%
rename from api/_content/query/xWeY3NfYtX.1714695122636.json
rename to api/_content/query/xWeY3NfYtX.1714695620480.json
diff --git a/api/_content/query/xqajda0wk4.1714695122636.json b/api/_content/query/xqajda0wk4.1714695620480.json
similarity index 100%
rename from api/_content/query/xqajda0wk4.1714695122636.json
rename to api/_content/query/xqajda0wk4.1714695620480.json
diff --git a/api/_content/query/yCq8hfNCRB.1714695122636.json b/api/_content/query/yCq8hfNCRB.1714695620480.json
similarity index 100%
rename from api/_content/query/yCq8hfNCRB.1714695122636.json
rename to api/_content/query/yCq8hfNCRB.1714695620480.json
diff --git a/api/_content/query/zVyWsmAcuf.1714695122636.json b/api/_content/query/zVyWsmAcuf.1714695620480.json
similarity index 100%
rename from api/_content/query/zVyWsmAcuf.1714695122636.json
rename to api/_content/query/zVyWsmAcuf.1714695620480.json
diff --git a/design-system/about/contributing/_payload.json b/design-system/about/contributing/_payload.json
index faeac73573..91a0d14d21 100644
--- a/design-system/about/contributing/_payload.json
+++ b/design-system/about/contributing/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,22,38,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",true,[9,13,16,19],{"id":10,"text":11,"url":10,"active":12,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",false,{"id":14,"text":15,"url":14,"active":12,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":17,"text":18,"url":17,"active":12,"items":-1},"/design-system/about/getting-support","Support",{"id":20,"text":21,"url":20,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":23,"text":24,"url":23,"active":12,"items":25},"/design-system/design","Design",[26,29,32,35],{"id":27,"text":28,"url":27,"active":12,"items":-1},"/design-system/design/getting-started","Getting started",{"id":30,"text":31,"url":30,"active":12,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":33,"text":34,"url":33,"active":12,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":36,"text":37,"url":36,"active":12,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":39,"text":40,"url":39,"active":12,"items":41},"/design-system/develop","Develop",[42,44,46,49],{"id":43,"text":28,"url":43,"active":12,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":21,"url":45,"active":12,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":12,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":12,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":12,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":12,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":12,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":12,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":12,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":12,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":12,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":12,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":12,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":12,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":12,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":12,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":12,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":12,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":12,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":12,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":12,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":12,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":12,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":12,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":12,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":12,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":12,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":12,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":12,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":12,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":12,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":12,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":12,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":12,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":12,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":12,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":12,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":12,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":12,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":12,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":12,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":12,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":12,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":12,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":12,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":12,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":12,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":12,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":12,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":12,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":12,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":12,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":12,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":12,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":12,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":12,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":12,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":12,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":12,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":12,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":12,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":12,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":12,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":12,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":12,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":12,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":12,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":12,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":12,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695151506]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,22,38,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",true,[9,13,16,19],{"id":10,"text":11,"url":10,"active":12,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",false,{"id":14,"text":15,"url":14,"active":12,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":17,"text":18,"url":17,"active":12,"items":-1},"/design-system/about/getting-support","Support",{"id":20,"text":21,"url":20,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":23,"text":24,"url":23,"active":12,"items":25},"/design-system/design","Design",[26,29,32,35],{"id":27,"text":28,"url":27,"active":12,"items":-1},"/design-system/design/getting-started","Getting started",{"id":30,"text":31,"url":30,"active":12,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":33,"text":34,"url":33,"active":12,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":36,"text":37,"url":36,"active":12,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":39,"text":40,"url":39,"active":12,"items":41},"/design-system/develop","Develop",[42,44,46,49],{"id":43,"text":28,"url":43,"active":12,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":21,"url":45,"active":12,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":12,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":12,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":12,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":12,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":12,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":12,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":12,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":12,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":12,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":12,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":12,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":12,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":12,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":12,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":12,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":12,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":12,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":12,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":12,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":12,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":12,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":12,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":12,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":12,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":12,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":12,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":12,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":12,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":12,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":12,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":12,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":12,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":12,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":12,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":12,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":12,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":12,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":12,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":12,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":12,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":12,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":12,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":12,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":12,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":12,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":12,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":12,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":12,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":12,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":12,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":12,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":12,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":12,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":12,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":12,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":12,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":12,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":12,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":12,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":12,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":12,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":12,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":12,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":12,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":12,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":12,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":12,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695649731]
\ No newline at end of file
diff --git a/design-system/about/contributing/index.html b/design-system/about/contributing/index.html
index f061c35fe3..5c5924d075 100644
--- a/design-system/about/contributing/index.html
+++ b/design-system/about/contributing/index.html
@@ -23,59 +23,59 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -88,8 +88,8 @@
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Contributing</h1><p class="rpl-type-p-large" data-v-3163c6df>Found an issue?</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->The <a href="https://www.vic.gov.au/ripple-design-system" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Ripple design system<!--]--><!--]--><!----><!--]--></a> and <a href="/framework" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Ripple framework<!--]--><!--]--><!----><!--]--></a> are open source and released under an Apache 2.0 License.<!--]--></p><p><!--[-->Ripple is maintained by the <a href="https://www.vic.gov.au/single-digital-presence" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Single Digital Presence (SDP)<!--]--><!--]--><!----><!--]--></a> team at the Victorian Department of Government Services.
-If you are a Victorian Government department or agency (or a vendor supporting them) and wish to suggest improvements to Ripple that would benefit the project there are several options outlined below.<!--]--></p><p><!--[-->To propose a change, you will need to have a free GitHub account. Please see the <a href="https://docs.github.com/en/get-started/signing-up-for-github/signing-up-for-a-new-github-account" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->GitHub docs<!--]--><!--]--><!----><!--]--></a> to create one if you haven&#39;t already.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="submit-a-bug-report" data-v-fff5b905><a href="#submit-a-bug-report" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Submit a bug report<!--]--></a></h2><p><!--[-->If you have encountered an issue that you think is a bug, help us fix it for everyone! To log a bug report please do the following:<!--]--></p><ul><!--[--><li><!--[-->Check existing the <a href="https://github.com/dpc-sdp/ripple-framework/discussions" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->discussions<!--]--><!--]--><!----><!--]--></a> and <a href="https://github.com/dpc-sdp/ripple-framework/issues" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->issues<!--]--><!--]--><!----><!--]--></a> to see if the issue has already been discussed.<!--]--></li><li><!--[-->Fill out the <a href="https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&amp;labels=bug&amp;template=bug_report.yml&amp;title=%5BBUG%5D" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->bug report issue template<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="documentation-changes" data-v-fff5b905><a href="#documentation-changes" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Documentation changes<!--]--></a></h2><p><!--[-->Seen an issue with this documentation site? You can either describe it in an issue so the dev team can review it, or propose an edit directly by creating a Pull request with the proposed change.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="to-create-an-issue" data-v-ea525968><a href="#to-create-an-issue" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->To create an issue:<!--]--></a></h2><p><!--[-->To log a docs site issue please do the following<!--]--></p><ul><!--[--><li><!--[-->Log in to GitHub<!--]--></li><li><!--[--><a href="https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&amp;labels=docs&amp;template=docs.yml&amp;title=%5BDOCS%5D" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Log an issue on the GitHub Repository<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[-->Fill in the form, providing as much detail as possible<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="to-propose-an-edit-directly" data-v-ea525968><a href="#to-propose-an-edit-directly" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->To propose an edit directly<!--]--></a></h2><p><!--[-->See the <a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->GitHub docs<!--]--><!--]--><!----><!--]--></a> for more information about creating a pull request.<!--]--></p><ul><!--[--><li><!--[-->Log in to GitHub<!--]--></li><li><!--[-->Click the &quot;Propose a change to this page on GitHub&quot; link at the bottom of each content page<!--]--></li><li><!--[-->Make a change to the markdown in the editor. See <a href="https://www.markdownguide.org/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.markdownguide.org/<!--]--><!--]--><!----><!--]--></a> for information on syntax<!--]--></li><li><!--[-->Describe the change in the commit message<!--]--></li><li><!--[-->Create a new pull request from the &quot;forked&quot; version of the repository<!--]--></li><li><!--[-->This pull request will be reviewed by the SDP development team and we may ask for changes or revisions.<!--]--></li><li><!--[-->If the Pull Request is approved it will be merged and included in the next Ripple release.<!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="propose-a-new-feature" data-v-fff5b905><a href="#propose-a-new-feature" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Propose a new feature<!--]--></a></h2><p><!--[-->If you have a proposal for a new feature to the Ripple design system please see <a href="https://www.vic.gov.au/ripple-design-system#enquiries-and-support" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.vic.gov.au/ripple-design-system#enquiries-and-support<!--]--><!--]--><!----><!--]--></a><!--]--></p><p><!--[-->For development partners wishing to propose a new feature to Ripple Framework please do the following:<!--]--></p><ul><!--[--><li><!--[-->Check existing the <a href="https://github.com/dpc-sdp/ripple-framework/discussions/categories/feature-proposals-rfc" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->discussions<!--]--><!--]--><!----><!--]--></a> and <a href="https://github.com/dpc-sdp/ripple-framework/issues" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->issues<!--]--><!--]--><!----><!--]--></a> to see if the the proposal has already been discussed. The discussion board is a great place to bring up new ideas for discussion without having to write up a full proposal.<!--]--></li><li><!--[-->If you are confident that the feature is something worth progressing, please fill out the <a href="https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&amp;labels=bug&amp;template=feature-request.yml&amp;title=%5BPROPOSAL%5D" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->New feature proposal<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/1.about/4.contributing.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/about/contributing/_payload.json">[{"state":1,"once":617,"_errors":619,"serverRendered":621,"path":7,"prerenderedAt":622},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":303,"$sdd-globals":320,"$sdd-navigation":322},["ShallowRef",4],["ShallowReactive",5],{"/design-system/about/contributing":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":298,"_id":299,"_source":300,"_file":301,"_extension":302},"/design-system/about/contributing","about",false,"","Contributing","Found an issue?","page",{"type":15,"children":16,"toc":288},"root",[17,44,58,72,79,84,123,129,134,141,146,169,175,188,233,239,250,255],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22,25,34,36,42],{"type":23,"value":24},"text","The ",{"type":18,"tag":26,"props":27,"children":31},"a",{"href":28,"rel":29},"https://www.vic.gov.au/ripple-design-system",[30],"nofollow",[32],{"type":23,"value":33},"Ripple design system",{"type":23,"value":35}," and ",{"type":18,"tag":26,"props":37,"children":39},{"href":38},"/framework",[40],{"type":23,"value":41},"Ripple framework",{"type":23,"value":43}," are open source and released under an Apache 2.0 License.",{"type":18,"tag":19,"props":45,"children":46},{},[47,49,56],{"type":23,"value":48},"Ripple is maintained by the ",{"type":18,"tag":26,"props":50,"children":53},{"href":51,"rel":52},"https://www.vic.gov.au/single-digital-presence",[30],[54],{"type":23,"value":55},"Single Digital Presence (SDP)",{"type":23,"value":57}," team at the Victorian Department of Government Services.\nIf you are a Victorian Government department or agency (or a vendor supporting them) and wish to suggest improvements to Ripple that would benefit the project there are several options outlined below.",{"type":18,"tag":19,"props":59,"children":60},{},[61,63,70],{"type":23,"value":62},"To propose a change, you will need to have a free GitHub account. Please see the ",{"type":18,"tag":26,"props":64,"children":67},{"href":65,"rel":66},"https://docs.github.com/en/get-started/signing-up-for-github/signing-up-for-a-new-github-account",[30],[68],{"type":23,"value":69},"GitHub docs",{"type":23,"value":71}," to create one if you haven't already.",{"type":18,"tag":73,"props":74,"children":76},"h2",{"id":75},"submit-a-bug-report",[77],{"type":23,"value":78},"Submit a bug report",{"type":18,"tag":19,"props":80,"children":81},{},[82],{"type":23,"value":83},"If you have encountered an issue that you think is a bug, help us fix it for everyone! To log a bug report please do the following:",{"type":18,"tag":85,"props":86,"children":87},"ul",{},[88,111],{"type":18,"tag":89,"props":90,"children":91},"li",{},[92,94,101,102,109],{"type":23,"value":93},"Check existing the ",{"type":18,"tag":26,"props":95,"children":98},{"href":96,"rel":97},"https://github.com/dpc-sdp/ripple-framework/discussions",[30],[99],{"type":23,"value":100},"discussions",{"type":23,"value":35},{"type":18,"tag":26,"props":103,"children":106},{"href":104,"rel":105},"https://github.com/dpc-sdp/ripple-framework/issues",[30],[107],{"type":23,"value":108},"issues",{"type":23,"value":110}," to see if the issue has already been discussed.",{"type":18,"tag":89,"props":112,"children":113},{},[114,116],{"type":23,"value":115},"Fill out the ",{"type":18,"tag":26,"props":117,"children":120},{"href":118,"rel":119},"https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=bug&template=bug_report.yml&title=%5BBUG%5D",[30],[121],{"type":23,"value":122},"bug report issue template",{"type":18,"tag":73,"props":124,"children":126},{"id":125},"documentation-changes",[127],{"type":23,"value":128},"Documentation changes",{"type":18,"tag":19,"props":130,"children":131},{},[132],{"type":23,"value":133},"Seen an issue with this documentation site? You can either describe it in an issue so the dev team can review it, or propose an edit directly by creating a Pull request with the proposed change.",{"type":18,"tag":135,"props":136,"children":138},"h3",{"id":137},"to-create-an-issue",[139],{"type":23,"value":140},"To create an issue:",{"type":18,"tag":19,"props":142,"children":143},{},[144],{"type":23,"value":145},"To log a docs site issue please do the following",{"type":18,"tag":85,"props":147,"children":148},{},[149,154,164],{"type":18,"tag":89,"props":150,"children":151},{},[152],{"type":23,"value":153},"Log in to GitHub",{"type":18,"tag":89,"props":155,"children":156},{},[157],{"type":18,"tag":26,"props":158,"children":161},{"href":159,"rel":160},"https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=docs&template=docs.yml&title=%5BDOCS%5D",[30],[162],{"type":23,"value":163},"Log an issue on the GitHub Repository",{"type":18,"tag":89,"props":165,"children":166},{},[167],{"type":23,"value":168},"Fill in the form, providing as much detail as possible",{"type":18,"tag":135,"props":170,"children":172},{"id":171},"to-propose-an-edit-directly",[173],{"type":23,"value":174},"To propose an edit directly",{"type":18,"tag":19,"props":176,"children":177},{},[178,180,186],{"type":23,"value":179},"See the ",{"type":18,"tag":26,"props":181,"children":184},{"href":182,"rel":183},"https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request",[30],[185],{"type":23,"value":69},{"type":23,"value":187}," for more information about creating a pull request.",{"type":18,"tag":85,"props":189,"children":190},{},[191,195,200,213,218,223,228],{"type":18,"tag":89,"props":192,"children":193},{},[194],{"type":23,"value":153},{"type":18,"tag":89,"props":196,"children":197},{},[198],{"type":23,"value":199},"Click the \"Propose a change to this page on GitHub\" link at the bottom of each content page",{"type":18,"tag":89,"props":201,"children":202},{},[203,205,211],{"type":23,"value":204},"Make a change to the markdown in the editor. See ",{"type":18,"tag":26,"props":206,"children":209},{"href":207,"rel":208},"https://www.markdownguide.org/",[30],[210],{"type":23,"value":207},{"type":23,"value":212}," for information on syntax",{"type":18,"tag":89,"props":214,"children":215},{},[216],{"type":23,"value":217},"Describe the change in the commit message",{"type":18,"tag":89,"props":219,"children":220},{},[221],{"type":23,"value":222},"Create a new pull request from the \"forked\" version of the repository",{"type":18,"tag":89,"props":224,"children":225},{},[226],{"type":23,"value":227},"This pull request will be reviewed by the SDP development team and we may ask for changes or revisions.",{"type":18,"tag":89,"props":229,"children":230},{},[231],{"type":23,"value":232},"If the Pull Request is approved it will be merged and included in the next Ripple release.",{"type":18,"tag":73,"props":234,"children":236},{"id":235},"propose-a-new-feature",[237],{"type":23,"value":238},"Propose a new feature",{"type":18,"tag":19,"props":240,"children":241},{},[242,244],{"type":23,"value":243},"If you have a proposal for a new feature to the Ripple design system please see ",{"type":18,"tag":26,"props":245,"children":248},{"href":246,"rel":247},"https://www.vic.gov.au/ripple-design-system#enquiries-and-support",[30],[249],{"type":23,"value":246},{"type":18,"tag":19,"props":251,"children":252},{},[253],{"type":23,"value":254},"For development partners wishing to propose a new feature to Ripple Framework please do the following:",{"type":18,"tag":85,"props":256,"children":257},{},[258,276],{"type":18,"tag":89,"props":259,"children":260},{},[261,262,268,269,274],{"type":23,"value":93},{"type":18,"tag":26,"props":263,"children":266},{"href":264,"rel":265},"https://github.com/dpc-sdp/ripple-framework/discussions/categories/feature-proposals-rfc",[30],[267],{"type":23,"value":100},{"type":23,"value":35},{"type":18,"tag":26,"props":270,"children":272},{"href":104,"rel":271},[30],[273],{"type":23,"value":108},{"type":23,"value":275}," to see if the the proposal has already been discussed. The discussion board is a great place to bring up new ideas for discussion without having to write up a full proposal.",{"type":18,"tag":89,"props":277,"children":278},{},[279,281],{"type":23,"value":280},"If you are confident that the feature is something worth progressing, please fill out the ",{"type":18,"tag":26,"props":282,"children":285},{"href":283,"rel":284},"https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=bug&template=feature-request.yml&title=%5BPROPOSAL%5D",[30],[286],{"type":23,"value":287},"New feature proposal",{"title":10,"searchDepth":289,"depth":289,"links":290},2,[291,292,297],{"id":75,"depth":289,"text":78},{"id":125,"depth":289,"text":128,"children":293},[294,296],{"id":137,"depth":295,"text":140},3,{"id":171,"depth":295,"text":174},{"id":235,"depth":289,"text":238},"markdown","content:design-system:1.about:4.contributing.md","content","design-system/1.about/4.contributing.md","md",["ShallowRef",304],["ShallowReactive",305],{"/design-system/about/contributing":306},[307,313],{"_path":308,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":309,"description":310,"layout":13,"_type":298,"_id":311,"_source":300,"_file":312,"_extension":302},"/design-system/about/getting-support","Support","How to get help","content:design-system:1.about:3.getting-support.md","design-system/1.about/3.getting-support.md",{"_path":314,"_dir":315,"_draft":9,"_partial":9,"_locale":10,"title":316,"description":317,"layout":13,"_type":298,"_id":318,"_source":300,"_file":319,"_extension":302},"/design-system/design/getting-started","design","Getting started",null,"content:design-system:2.design:1.getting-started.md","design-system/2.design/1.getting-started.md",["ShallowRef",321],{},[323,328,570],{"title":324,"_path":325,"icon":326,"layout":327},"Ripple Design System","/","carbon:home","home",{"title":329,"_path":330,"children":331},"Design System","/design-system",[332,344,358,388,422],{"title":333,"_path":334,"children":335},"About","/design-system/about",[336,339,342,343],{"title":337,"_path":338,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":340,"_path":341,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":309,"_path":308,"layout":13},{"title":11,"_path":7,"layout":13},{"title":345,"_path":346,"children":347},"Design","/design-system/design",[348,349,352,355],{"title":316,"_path":314,"layout":13},{"title":350,"_path":351,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":353,"_path":354,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":356,"_path":357,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":359,"_path":360,"children":361},"Develop","/design-system/develop",[362,364,366,369],{"title":316,"_path":363,"layout":13},"/design-system/develop/getting-started",{"title":11,"_path":365,"layout":13},"/design-system/develop/contributing",{"title":367,"_path":368,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":370,"_path":371,"children":372,"layout":13},"Usage","/design-system/develop/usage",[373,376,379,382,385],{"title":374,"_path":375,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":377,"_path":378,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":380,"_path":381,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":383,"_path":384,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":386,"_path":387,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":389,"_path":390,"children":391},"Styles","/design-system/styles",[392,395,398,401,404,407,410,413,416,419],{"title":393,"_path":394,"layout":13},"Colour","/design-system/styles/colour",{"title":396,"_path":397,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":399,"_path":400,"layout":13},"Grid","/design-system/styles/grid",{"title":402,"_path":403,"layout":13},"Icons","/design-system/styles/icons",{"title":405,"_path":406,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":408,"_path":409,"layout":13},"Layout","/design-system/styles/layout",{"title":411,"_path":412,"layout":13},"Logo","/design-system/styles/logo",{"title":414,"_path":415,"layout":13},"Motion","/design-system/styles/motion",{"title":417,"_path":418,"layout":13},"Spacing","/design-system/styles/spacing",{"title":420,"_path":421,"layout":13},"Typography","/design-system/styles/typography",{"title":423,"_path":424,"children":425},"Components","/design-system/components",[426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543,546,549,552,555,558,561,564,567],{"title":427,"_path":428,"layout":13},"Accordion","/design-system/components/accordion",{"title":430,"_path":431,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":433,"_path":434,"layout":13},"Alert","/design-system/components/alert",{"title":436,"_path":437,"layout":13},"Block quote","/design-system/components/block-quote",{"title":439,"_path":440,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":442,"_path":443,"layout":13},"Button","/design-system/components/button",{"title":445,"_path":446,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":448,"_path":449,"layout":13},"Callout","/design-system/components/callout",{"title":451,"_path":452,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":454,"_path":455,"layout":13},"Card","/design-system/components/card",{"title":457,"_path":458,"layout":13},"Carousel","/design-system/components/carousel",{"title":460,"_path":461,"layout":13},"Category grid","/design-system/components/category-grid",{"title":463,"_path":464,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":466,"_path":467,"layout":13},"Chip","/design-system/components/chip",{"title":469,"_path":470,"layout":13},"Contact us","/design-system/components/contact-us",{"title":472,"_path":473,"layout":13},"Date input","/design-system/components/date-input",{"title":475,"_path":476,"layout":13},"Detail list","/design-system/components/detail-list",{"title":478,"_path":479,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":481,"_path":482,"layout":13},"File","/design-system/components/file",{"title":484,"_path":485,"layout":13},"Footer","/design-system/components/footer",{"title":487,"_path":488,"layout":13},"Form","/design-system/components/form",{"title":490,"_path":491,"layout":13},"Form alert","/design-system/components/form-alert",{"title":493,"_path":494,"layout":13},"Header","/design-system/components/header",{"title":496,"_path":497,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":499,"_path":500,"layout":13},"Input field","/design-system/components/input-field",{"title":502,"_path":503,"layout":13},"Key dates","/design-system/components/key-dates",{"title":505,"_path":506,"layout":13},"Media","/design-system/components/media",{"title":508,"_path":509,"layout":13},"Media embed","/design-system/components/media-embed",{"title":511,"_path":512,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":514,"_path":515,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":517,"_path":518,"layout":13},"Option button","/design-system/components/option-button",{"title":520,"_path":521,"layout":13},"Page action","/design-system/components/page-action",{"title":523,"_path":524,"layout":13},"Pagination","/design-system/components/pagination",{"title":526,"_path":527,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":529,"_path":530,"layout":13},"Profile","/design-system/components/profile",{"title":532,"_path":533,"layout":13},"Radio button","/design-system/components/radio-button",{"title":535,"_path":536,"layout":13},"Related links","/design-system/components/related-links",{"title":538,"_path":539,"layout":13},"Results listing","/design-system/components/results-listing",{"title":541,"_path":542,"layout":13},"Search bar","/design-system/components/search-bar",{"title":544,"_path":545,"layout":13},"Skip link","/design-system/components/skip-link",{"title":547,"_path":548,"layout":13},"Social share","/design-system/components/social-share",{"title":550,"_path":551,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":553,"_path":554,"layout":13},"Table","/design-system/components/table",{"title":556,"_path":557,"layout":13},"Tabs","/design-system/components/tabs",{"title":559,"_path":560,"layout":13},"Tag","/design-system/components/tag",{"title":562,"_path":563,"layout":13},"Text area","/design-system/components/text-area",{"title":565,"_path":566,"layout":13},"Timeline","/design-system/components/timeline",{"title":568,"_path":569,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":571,"_path":38,"children":572,"layout":13},"Ripple Framework",[573,574,592,614],{"title":571,"_path":38,"layout":13},{"title":575,"_path":576,"children":577},"Key Concepts","/framework/key-concepts",[578,580,583,586,589],{"title":380,"_path":579,"layout":13},"/framework/key-concepts/nuxt",{"title":581,"_path":582,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":584,"_path":585,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":587,"_path":588,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":590,"_path":591,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":593,"_path":594,"children":595},"Guides","/framework/guides",[596,599,602,605,608,611],{"title":597,"_path":598,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":600,"_path":601,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":603,"_path":604,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":606,"_path":607,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":609,"_path":610,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":612,"_path":613,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":615,"_path":616,"layout":13},"Core modules","/framework/core-modules",["Reactive",618],["Set"],["Reactive",620],{"module-navigation":317},true,1714695151506]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+If you are a Victorian Government department or agency (or a vendor supporting them) and wish to suggest improvements to Ripple that would benefit the project there are several options outlined below.<!--]--></p><p><!--[-->To propose a change, you will need to have a free GitHub account. Please see the <a href="https://docs.github.com/en/get-started/signing-up-for-github/signing-up-for-a-new-github-account" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->GitHub docs<!--]--><!--]--><!----><!--]--></a> to create one if you haven&#39;t already.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="submit-a-bug-report" data-v-fff5b905><a href="#submit-a-bug-report" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Submit a bug report<!--]--></a></h2><p><!--[-->If you have encountered an issue that you think is a bug, help us fix it for everyone! To log a bug report please do the following:<!--]--></p><ul><!--[--><li><!--[-->Check existing the <a href="https://github.com/dpc-sdp/ripple-framework/discussions" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->discussions<!--]--><!--]--><!----><!--]--></a> and <a href="https://github.com/dpc-sdp/ripple-framework/issues" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->issues<!--]--><!--]--><!----><!--]--></a> to see if the issue has already been discussed.<!--]--></li><li><!--[-->Fill out the <a href="https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&amp;labels=bug&amp;template=bug_report.yml&amp;title=%5BBUG%5D" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->bug report issue template<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="documentation-changes" data-v-fff5b905><a href="#documentation-changes" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Documentation changes<!--]--></a></h2><p><!--[-->Seen an issue with this documentation site? You can either describe it in an issue so the dev team can review it, or propose an edit directly by creating a Pull request with the proposed change.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="to-create-an-issue" data-v-ea525968><a href="#to-create-an-issue" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->To create an issue:<!--]--></a></h2><p><!--[-->To log a docs site issue please do the following<!--]--></p><ul><!--[--><li><!--[-->Log in to GitHub<!--]--></li><li><!--[--><a href="https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&amp;labels=docs&amp;template=docs.yml&amp;title=%5BDOCS%5D" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Log an issue on the GitHub Repository<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[-->Fill in the form, providing as much detail as possible<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="to-propose-an-edit-directly" data-v-ea525968><a href="#to-propose-an-edit-directly" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->To propose an edit directly<!--]--></a></h2><p><!--[-->See the <a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->GitHub docs<!--]--><!--]--><!----><!--]--></a> for more information about creating a pull request.<!--]--></p><ul><!--[--><li><!--[-->Log in to GitHub<!--]--></li><li><!--[-->Click the &quot;Propose a change to this page on GitHub&quot; link at the bottom of each content page<!--]--></li><li><!--[-->Make a change to the markdown in the editor. See <a href="https://www.markdownguide.org/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.markdownguide.org/<!--]--><!--]--><!----><!--]--></a> for information on syntax<!--]--></li><li><!--[-->Describe the change in the commit message<!--]--></li><li><!--[-->Create a new pull request from the &quot;forked&quot; version of the repository<!--]--></li><li><!--[-->This pull request will be reviewed by the SDP development team and we may ask for changes or revisions.<!--]--></li><li><!--[-->If the Pull Request is approved it will be merged and included in the next Ripple release.<!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="propose-a-new-feature" data-v-fff5b905><a href="#propose-a-new-feature" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Propose a new feature<!--]--></a></h2><p><!--[-->If you have a proposal for a new feature to the Ripple design system please see <a href="https://www.vic.gov.au/ripple-design-system#enquiries-and-support" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.vic.gov.au/ripple-design-system#enquiries-and-support<!--]--><!--]--><!----><!--]--></a><!--]--></p><p><!--[-->For development partners wishing to propose a new feature to Ripple Framework please do the following:<!--]--></p><ul><!--[--><li><!--[-->Check existing the <a href="https://github.com/dpc-sdp/ripple-framework/discussions/categories/feature-proposals-rfc" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->discussions<!--]--><!--]--><!----><!--]--></a> and <a href="https://github.com/dpc-sdp/ripple-framework/issues" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->issues<!--]--><!--]--><!----><!--]--></a> to see if the the proposal has already been discussed. The discussion board is a great place to bring up new ideas for discussion without having to write up a full proposal.<!--]--></li><li><!--[-->If you are confident that the feature is something worth progressing, please fill out the <a href="https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&amp;labels=bug&amp;template=feature-request.yml&amp;title=%5BPROPOSAL%5D" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->New feature proposal<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/1.about/4.contributing.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/about/contributing/_payload.json">[{"state":1,"once":617,"_errors":619,"serverRendered":621,"path":7,"prerenderedAt":622},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":303,"$sdd-globals":320,"$sdd-navigation":322},["ShallowRef",4],["ShallowReactive",5],{"/design-system/about/contributing":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":298,"_id":299,"_source":300,"_file":301,"_extension":302},"/design-system/about/contributing","about",false,"","Contributing","Found an issue?","page",{"type":15,"children":16,"toc":288},"root",[17,44,58,72,79,84,123,129,134,141,146,169,175,188,233,239,250,255],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22,25,34,36,42],{"type":23,"value":24},"text","The ",{"type":18,"tag":26,"props":27,"children":31},"a",{"href":28,"rel":29},"https://www.vic.gov.au/ripple-design-system",[30],"nofollow",[32],{"type":23,"value":33},"Ripple design system",{"type":23,"value":35}," and ",{"type":18,"tag":26,"props":37,"children":39},{"href":38},"/framework",[40],{"type":23,"value":41},"Ripple framework",{"type":23,"value":43}," are open source and released under an Apache 2.0 License.",{"type":18,"tag":19,"props":45,"children":46},{},[47,49,56],{"type":23,"value":48},"Ripple is maintained by the ",{"type":18,"tag":26,"props":50,"children":53},{"href":51,"rel":52},"https://www.vic.gov.au/single-digital-presence",[30],[54],{"type":23,"value":55},"Single Digital Presence (SDP)",{"type":23,"value":57}," team at the Victorian Department of Government Services.\nIf you are a Victorian Government department or agency (or a vendor supporting them) and wish to suggest improvements to Ripple that would benefit the project there are several options outlined below.",{"type":18,"tag":19,"props":59,"children":60},{},[61,63,70],{"type":23,"value":62},"To propose a change, you will need to have a free GitHub account. Please see the ",{"type":18,"tag":26,"props":64,"children":67},{"href":65,"rel":66},"https://docs.github.com/en/get-started/signing-up-for-github/signing-up-for-a-new-github-account",[30],[68],{"type":23,"value":69},"GitHub docs",{"type":23,"value":71}," to create one if you haven't already.",{"type":18,"tag":73,"props":74,"children":76},"h2",{"id":75},"submit-a-bug-report",[77],{"type":23,"value":78},"Submit a bug report",{"type":18,"tag":19,"props":80,"children":81},{},[82],{"type":23,"value":83},"If you have encountered an issue that you think is a bug, help us fix it for everyone! To log a bug report please do the following:",{"type":18,"tag":85,"props":86,"children":87},"ul",{},[88,111],{"type":18,"tag":89,"props":90,"children":91},"li",{},[92,94,101,102,109],{"type":23,"value":93},"Check existing the ",{"type":18,"tag":26,"props":95,"children":98},{"href":96,"rel":97},"https://github.com/dpc-sdp/ripple-framework/discussions",[30],[99],{"type":23,"value":100},"discussions",{"type":23,"value":35},{"type":18,"tag":26,"props":103,"children":106},{"href":104,"rel":105},"https://github.com/dpc-sdp/ripple-framework/issues",[30],[107],{"type":23,"value":108},"issues",{"type":23,"value":110}," to see if the issue has already been discussed.",{"type":18,"tag":89,"props":112,"children":113},{},[114,116],{"type":23,"value":115},"Fill out the ",{"type":18,"tag":26,"props":117,"children":120},{"href":118,"rel":119},"https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=bug&template=bug_report.yml&title=%5BBUG%5D",[30],[121],{"type":23,"value":122},"bug report issue template",{"type":18,"tag":73,"props":124,"children":126},{"id":125},"documentation-changes",[127],{"type":23,"value":128},"Documentation changes",{"type":18,"tag":19,"props":130,"children":131},{},[132],{"type":23,"value":133},"Seen an issue with this documentation site? You can either describe it in an issue so the dev team can review it, or propose an edit directly by creating a Pull request with the proposed change.",{"type":18,"tag":135,"props":136,"children":138},"h3",{"id":137},"to-create-an-issue",[139],{"type":23,"value":140},"To create an issue:",{"type":18,"tag":19,"props":142,"children":143},{},[144],{"type":23,"value":145},"To log a docs site issue please do the following",{"type":18,"tag":85,"props":147,"children":148},{},[149,154,164],{"type":18,"tag":89,"props":150,"children":151},{},[152],{"type":23,"value":153},"Log in to GitHub",{"type":18,"tag":89,"props":155,"children":156},{},[157],{"type":18,"tag":26,"props":158,"children":161},{"href":159,"rel":160},"https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=docs&template=docs.yml&title=%5BDOCS%5D",[30],[162],{"type":23,"value":163},"Log an issue on the GitHub Repository",{"type":18,"tag":89,"props":165,"children":166},{},[167],{"type":23,"value":168},"Fill in the form, providing as much detail as possible",{"type":18,"tag":135,"props":170,"children":172},{"id":171},"to-propose-an-edit-directly",[173],{"type":23,"value":174},"To propose an edit directly",{"type":18,"tag":19,"props":176,"children":177},{},[178,180,186],{"type":23,"value":179},"See the ",{"type":18,"tag":26,"props":181,"children":184},{"href":182,"rel":183},"https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request",[30],[185],{"type":23,"value":69},{"type":23,"value":187}," for more information about creating a pull request.",{"type":18,"tag":85,"props":189,"children":190},{},[191,195,200,213,218,223,228],{"type":18,"tag":89,"props":192,"children":193},{},[194],{"type":23,"value":153},{"type":18,"tag":89,"props":196,"children":197},{},[198],{"type":23,"value":199},"Click the \"Propose a change to this page on GitHub\" link at the bottom of each content page",{"type":18,"tag":89,"props":201,"children":202},{},[203,205,211],{"type":23,"value":204},"Make a change to the markdown in the editor. See ",{"type":18,"tag":26,"props":206,"children":209},{"href":207,"rel":208},"https://www.markdownguide.org/",[30],[210],{"type":23,"value":207},{"type":23,"value":212}," for information on syntax",{"type":18,"tag":89,"props":214,"children":215},{},[216],{"type":23,"value":217},"Describe the change in the commit message",{"type":18,"tag":89,"props":219,"children":220},{},[221],{"type":23,"value":222},"Create a new pull request from the \"forked\" version of the repository",{"type":18,"tag":89,"props":224,"children":225},{},[226],{"type":23,"value":227},"This pull request will be reviewed by the SDP development team and we may ask for changes or revisions.",{"type":18,"tag":89,"props":229,"children":230},{},[231],{"type":23,"value":232},"If the Pull Request is approved it will be merged and included in the next Ripple release.",{"type":18,"tag":73,"props":234,"children":236},{"id":235},"propose-a-new-feature",[237],{"type":23,"value":238},"Propose a new feature",{"type":18,"tag":19,"props":240,"children":241},{},[242,244],{"type":23,"value":243},"If you have a proposal for a new feature to the Ripple design system please see ",{"type":18,"tag":26,"props":245,"children":248},{"href":246,"rel":247},"https://www.vic.gov.au/ripple-design-system#enquiries-and-support",[30],[249],{"type":23,"value":246},{"type":18,"tag":19,"props":251,"children":252},{},[253],{"type":23,"value":254},"For development partners wishing to propose a new feature to Ripple Framework please do the following:",{"type":18,"tag":85,"props":256,"children":257},{},[258,276],{"type":18,"tag":89,"props":259,"children":260},{},[261,262,268,269,274],{"type":23,"value":93},{"type":18,"tag":26,"props":263,"children":266},{"href":264,"rel":265},"https://github.com/dpc-sdp/ripple-framework/discussions/categories/feature-proposals-rfc",[30],[267],{"type":23,"value":100},{"type":23,"value":35},{"type":18,"tag":26,"props":270,"children":272},{"href":104,"rel":271},[30],[273],{"type":23,"value":108},{"type":23,"value":275}," to see if the the proposal has already been discussed. The discussion board is a great place to bring up new ideas for discussion without having to write up a full proposal.",{"type":18,"tag":89,"props":277,"children":278},{},[279,281],{"type":23,"value":280},"If you are confident that the feature is something worth progressing, please fill out the ",{"type":18,"tag":26,"props":282,"children":285},{"href":283,"rel":284},"https://github.com/dpc-sdp/ripple-framework/issues/new?assignees=dylankelly&labels=bug&template=feature-request.yml&title=%5BPROPOSAL%5D",[30],[286],{"type":23,"value":287},"New feature proposal",{"title":10,"searchDepth":289,"depth":289,"links":290},2,[291,292,297],{"id":75,"depth":289,"text":78},{"id":125,"depth":289,"text":128,"children":293},[294,296],{"id":137,"depth":295,"text":140},3,{"id":171,"depth":295,"text":174},{"id":235,"depth":289,"text":238},"markdown","content:design-system:1.about:4.contributing.md","content","design-system/1.about/4.contributing.md","md",["ShallowRef",304],["ShallowReactive",305],{"/design-system/about/contributing":306},[307,313],{"_path":308,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":309,"description":310,"layout":13,"_type":298,"_id":311,"_source":300,"_file":312,"_extension":302},"/design-system/about/getting-support","Support","How to get help","content:design-system:1.about:3.getting-support.md","design-system/1.about/3.getting-support.md",{"_path":314,"_dir":315,"_draft":9,"_partial":9,"_locale":10,"title":316,"description":317,"layout":13,"_type":298,"_id":318,"_source":300,"_file":319,"_extension":302},"/design-system/design/getting-started","design","Getting started",null,"content:design-system:2.design:1.getting-started.md","design-system/2.design/1.getting-started.md",["ShallowRef",321],{},[323,328,570],{"title":324,"_path":325,"icon":326,"layout":327},"Ripple Design System","/","carbon:home","home",{"title":329,"_path":330,"children":331},"Design System","/design-system",[332,344,358,388,422],{"title":333,"_path":334,"children":335},"About","/design-system/about",[336,339,342,343],{"title":337,"_path":338,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":340,"_path":341,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":309,"_path":308,"layout":13},{"title":11,"_path":7,"layout":13},{"title":345,"_path":346,"children":347},"Design","/design-system/design",[348,349,352,355],{"title":316,"_path":314,"layout":13},{"title":350,"_path":351,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":353,"_path":354,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":356,"_path":357,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":359,"_path":360,"children":361},"Develop","/design-system/develop",[362,364,366,369],{"title":316,"_path":363,"layout":13},"/design-system/develop/getting-started",{"title":11,"_path":365,"layout":13},"/design-system/develop/contributing",{"title":367,"_path":368,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":370,"_path":371,"children":372,"layout":13},"Usage","/design-system/develop/usage",[373,376,379,382,385],{"title":374,"_path":375,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":377,"_path":378,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":380,"_path":381,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":383,"_path":384,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":386,"_path":387,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":389,"_path":390,"children":391},"Styles","/design-system/styles",[392,395,398,401,404,407,410,413,416,419],{"title":393,"_path":394,"layout":13},"Colour","/design-system/styles/colour",{"title":396,"_path":397,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":399,"_path":400,"layout":13},"Grid","/design-system/styles/grid",{"title":402,"_path":403,"layout":13},"Icons","/design-system/styles/icons",{"title":405,"_path":406,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":408,"_path":409,"layout":13},"Layout","/design-system/styles/layout",{"title":411,"_path":412,"layout":13},"Logo","/design-system/styles/logo",{"title":414,"_path":415,"layout":13},"Motion","/design-system/styles/motion",{"title":417,"_path":418,"layout":13},"Spacing","/design-system/styles/spacing",{"title":420,"_path":421,"layout":13},"Typography","/design-system/styles/typography",{"title":423,"_path":424,"children":425},"Components","/design-system/components",[426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543,546,549,552,555,558,561,564,567],{"title":427,"_path":428,"layout":13},"Accordion","/design-system/components/accordion",{"title":430,"_path":431,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":433,"_path":434,"layout":13},"Alert","/design-system/components/alert",{"title":436,"_path":437,"layout":13},"Block quote","/design-system/components/block-quote",{"title":439,"_path":440,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":442,"_path":443,"layout":13},"Button","/design-system/components/button",{"title":445,"_path":446,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":448,"_path":449,"layout":13},"Callout","/design-system/components/callout",{"title":451,"_path":452,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":454,"_path":455,"layout":13},"Card","/design-system/components/card",{"title":457,"_path":458,"layout":13},"Carousel","/design-system/components/carousel",{"title":460,"_path":461,"layout":13},"Category grid","/design-system/components/category-grid",{"title":463,"_path":464,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":466,"_path":467,"layout":13},"Chip","/design-system/components/chip",{"title":469,"_path":470,"layout":13},"Contact us","/design-system/components/contact-us",{"title":472,"_path":473,"layout":13},"Date input","/design-system/components/date-input",{"title":475,"_path":476,"layout":13},"Detail list","/design-system/components/detail-list",{"title":478,"_path":479,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":481,"_path":482,"layout":13},"File","/design-system/components/file",{"title":484,"_path":485,"layout":13},"Footer","/design-system/components/footer",{"title":487,"_path":488,"layout":13},"Form","/design-system/components/form",{"title":490,"_path":491,"layout":13},"Form alert","/design-system/components/form-alert",{"title":493,"_path":494,"layout":13},"Header","/design-system/components/header",{"title":496,"_path":497,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":499,"_path":500,"layout":13},"Input field","/design-system/components/input-field",{"title":502,"_path":503,"layout":13},"Key dates","/design-system/components/key-dates",{"title":505,"_path":506,"layout":13},"Media","/design-system/components/media",{"title":508,"_path":509,"layout":13},"Media embed","/design-system/components/media-embed",{"title":511,"_path":512,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":514,"_path":515,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":517,"_path":518,"layout":13},"Option button","/design-system/components/option-button",{"title":520,"_path":521,"layout":13},"Page action","/design-system/components/page-action",{"title":523,"_path":524,"layout":13},"Pagination","/design-system/components/pagination",{"title":526,"_path":527,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":529,"_path":530,"layout":13},"Profile","/design-system/components/profile",{"title":532,"_path":533,"layout":13},"Radio button","/design-system/components/radio-button",{"title":535,"_path":536,"layout":13},"Related links","/design-system/components/related-links",{"title":538,"_path":539,"layout":13},"Results listing","/design-system/components/results-listing",{"title":541,"_path":542,"layout":13},"Search bar","/design-system/components/search-bar",{"title":544,"_path":545,"layout":13},"Skip link","/design-system/components/skip-link",{"title":547,"_path":548,"layout":13},"Social share","/design-system/components/social-share",{"title":550,"_path":551,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":553,"_path":554,"layout":13},"Table","/design-system/components/table",{"title":556,"_path":557,"layout":13},"Tabs","/design-system/components/tabs",{"title":559,"_path":560,"layout":13},"Tag","/design-system/components/tag",{"title":562,"_path":563,"layout":13},"Text area","/design-system/components/text-area",{"title":565,"_path":566,"layout":13},"Timeline","/design-system/components/timeline",{"title":568,"_path":569,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":571,"_path":38,"children":572,"layout":13},"Ripple Framework",[573,574,592,614],{"title":571,"_path":38,"layout":13},{"title":575,"_path":576,"children":577},"Key Concepts","/framework/key-concepts",[578,580,583,586,589],{"title":380,"_path":579,"layout":13},"/framework/key-concepts/nuxt",{"title":581,"_path":582,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":584,"_path":585,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":587,"_path":588,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":590,"_path":591,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":593,"_path":594,"children":595},"Guides","/framework/guides",[596,599,602,605,608,611],{"title":597,"_path":598,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":600,"_path":601,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":603,"_path":604,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":606,"_path":607,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":609,"_path":610,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":612,"_path":613,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":615,"_path":616,"layout":13},"Core modules","/framework/core-modules",["Reactive",618],["Set"],["Reactive",620],{"module-navigation":317},true,1714695649731]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/about/getting-support/_payload.json b/design-system/about/getting-support/_payload.json
index d5177b840d..c923b1ba09 100644
--- a/design-system/about/getting-support/_payload.json
+++ b/design-system/about/getting-support/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,22,38,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",true,[9,13,16,19],{"id":10,"text":11,"url":10,"active":12,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",false,{"id":14,"text":15,"url":14,"active":12,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":17,"text":18,"url":17,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":20,"text":21,"url":20,"active":12,"items":-1},"/design-system/about/contributing","Contributing",{"id":23,"text":24,"url":23,"active":12,"items":25},"/design-system/design","Design",[26,29,32,35],{"id":27,"text":28,"url":27,"active":12,"items":-1},"/design-system/design/getting-started","Getting started",{"id":30,"text":31,"url":30,"active":12,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":33,"text":34,"url":33,"active":12,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":36,"text":37,"url":36,"active":12,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":39,"text":40,"url":39,"active":12,"items":41},"/design-system/develop","Develop",[42,44,46,49],{"id":43,"text":28,"url":43,"active":12,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":21,"url":45,"active":12,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":12,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":12,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":12,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":12,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":12,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":12,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":12,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":12,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":12,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":12,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":12,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":12,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":12,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":12,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":12,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":12,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":12,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":12,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":12,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":12,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":12,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":12,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":12,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":12,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":12,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":12,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":12,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":12,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":12,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":12,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":12,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":12,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":12,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":12,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":12,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":12,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":12,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":12,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":12,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":12,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":12,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":12,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":12,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":12,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":12,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":12,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":12,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":12,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":12,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":12,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":12,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":12,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":12,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":12,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":12,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":12,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":12,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":12,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":12,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":12,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":12,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":12,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":12,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":12,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":12,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":12,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":12,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695151496]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,22,38,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",true,[9,13,16,19],{"id":10,"text":11,"url":10,"active":12,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",false,{"id":14,"text":15,"url":14,"active":12,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":17,"text":18,"url":17,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":20,"text":21,"url":20,"active":12,"items":-1},"/design-system/about/contributing","Contributing",{"id":23,"text":24,"url":23,"active":12,"items":25},"/design-system/design","Design",[26,29,32,35],{"id":27,"text":28,"url":27,"active":12,"items":-1},"/design-system/design/getting-started","Getting started",{"id":30,"text":31,"url":30,"active":12,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":33,"text":34,"url":33,"active":12,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":36,"text":37,"url":36,"active":12,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":39,"text":40,"url":39,"active":12,"items":41},"/design-system/develop","Develop",[42,44,46,49],{"id":43,"text":28,"url":43,"active":12,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":21,"url":45,"active":12,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":12,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":12,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":12,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":12,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":12,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":12,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":12,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":12,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":12,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":12,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":12,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":12,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":12,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":12,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":12,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":12,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":12,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":12,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":12,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":12,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":12,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":12,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":12,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":12,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":12,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":12,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":12,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":12,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":12,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":12,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":12,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":12,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":12,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":12,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":12,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":12,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":12,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":12,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":12,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":12,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":12,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":12,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":12,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":12,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":12,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":12,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":12,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":12,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":12,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":12,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":12,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":12,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":12,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":12,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":12,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":12,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":12,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":12,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":12,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":12,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":12,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":12,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":12,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":12,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":12,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":12,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":12,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695649651]
\ No newline at end of file
diff --git a/design-system/about/getting-support/index.html b/design-system/about/getting-support/index.html
index 14cc386f5d..25f4ad8145 100644
--- a/design-system/about/getting-support/index.html
+++ b/design-system/about/getting-support/index.html
@@ -23,59 +23,59 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -87,8 +87,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Support</h1><p class="rpl-type-p-large" data-v-3163c6df>How to get help</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->The <a href="https://www.vic.gov.au/ripple-design-system" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Ripple design system<!--]--><!--]--><!----><!--]--></a> is maintained by the <a href="https://www.vic.gov.au/single-digital-presence" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Single Digital Presence (SDP)<!--]--><!--]--><!----><!--]--></a> team at the Victorian Department of Government Services.<!--]--></p><p><!--[-->You can reach out to us via the following channels:<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="for-technical-and-project-support" data-v-ea525968><a href="#for-technical-and-project-support" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->For technical and project support<!--]--></a></h2><ul><!--[--><li><!--[-->join the discussion on <a href="https://github.com/dpc-sdp/ripple-framework/discussions" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->GitHub<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[-->log a request through our <a href="https://digital-vic.atlassian.net/servicedesk/customer/portals" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->helpdesk<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[-->sign up to the <a href="https://vic-sdp.slack.com" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->SDP Slack<!--]--><!--]--><!----><!--]--></a> (Open to projects with an MoU for application support)<!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="design-enquiries" data-v-fff5b905><a href="#design-enquiries" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Design enquiries<!--]--></a></h2><p><!--[-->Email: <a href="mailto:design@dpc.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->design@dpc.vic.gov.au<!--]--><!--]--><!----><!--]--></a><!--]--></p><h2 class="rpl-type-h2 docs-h2" id="general-enquiries" data-v-fff5b905><a href="#general-enquiries" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->General enquiries<!--]--></a></h2><p><!--[--><a href="https://digital-vic.atlassian.net/servicedesk/customer/portal/14/group/113/create/497" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Raise a request<!--]--><!--]--><!----><!--]--></a><!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/1.about/3.getting-support.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/about/getting-support/_payload.json">[{"state":1,"once":460,"_errors":462,"serverRendered":465,"path":7,"prerenderedAt":466},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":146,"$sdd-globals":162,"$sdd-navigation":164},["ShallowRef",4],["ShallowReactive",5],{"/design-system/about/getting-support":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":141,"_id":142,"_source":143,"_file":144,"_extension":145},"/design-system/about/getting-support","about",false,"","Support","How to get help","page",{"type":15,"children":16,"toc":134},"root",[17,45,50,57,100,107,118,124],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22,25,34,36,43],{"type":23,"value":24},"text","The ",{"type":18,"tag":26,"props":27,"children":31},"a",{"href":28,"rel":29},"https://www.vic.gov.au/ripple-design-system",[30],"nofollow",[32],{"type":23,"value":33},"Ripple design system",{"type":23,"value":35}," is maintained by the ",{"type":18,"tag":26,"props":37,"children":40},{"href":38,"rel":39},"https://www.vic.gov.au/single-digital-presence",[30],[41],{"type":23,"value":42},"Single Digital Presence (SDP)",{"type":23,"value":44}," team at the Victorian Department of Government Services.",{"type":18,"tag":19,"props":46,"children":47},{},[48],{"type":23,"value":49},"You can reach out to us via the following channels:",{"type":18,"tag":51,"props":52,"children":54},"h3",{"id":53},"for-technical-and-project-support",[55],{"type":23,"value":56},"For technical and project support",{"type":18,"tag":58,"props":59,"children":60},"ul",{},[61,74,86],{"type":18,"tag":62,"props":63,"children":64},"li",{},[65,67],{"type":23,"value":66},"join the discussion on ",{"type":18,"tag":26,"props":68,"children":71},{"href":69,"rel":70},"https://github.com/dpc-sdp/ripple-framework/discussions",[30],[72],{"type":23,"value":73},"GitHub",{"type":18,"tag":62,"props":75,"children":76},{},[77,79],{"type":23,"value":78},"log a request through our ",{"type":18,"tag":26,"props":80,"children":83},{"href":81,"rel":82},"https://digital-vic.atlassian.net/servicedesk/customer/portals",[30],[84],{"type":23,"value":85},"helpdesk",{"type":18,"tag":62,"props":87,"children":88},{},[89,91,98],{"type":23,"value":90},"sign up to the ",{"type":18,"tag":26,"props":92,"children":95},{"href":93,"rel":94},"https://vic-sdp.slack.com",[30],[96],{"type":23,"value":97},"SDP Slack",{"type":23,"value":99}," (Open to projects with an MoU for application support)",{"type":18,"tag":101,"props":102,"children":104},"h2",{"id":103},"design-enquiries",[105],{"type":23,"value":106},"Design enquiries",{"type":18,"tag":19,"props":108,"children":109},{},[110,112],{"type":23,"value":111},"Email: ",{"type":18,"tag":26,"props":113,"children":115},{"href":114},"mailto:design@dpc.vic.gov.au",[116],{"type":23,"value":117},"design@dpc.vic.gov.au",{"type":18,"tag":101,"props":119,"children":121},{"id":120},"general-enquiries",[122],{"type":23,"value":123},"General enquiries",{"type":18,"tag":19,"props":125,"children":126},{},[127],{"type":18,"tag":26,"props":128,"children":131},{"href":129,"rel":130},"https://digital-vic.atlassian.net/servicedesk/customer/portal/14/group/113/create/497",[30],[132],{"type":23,"value":133},"Raise a request",{"title":10,"searchDepth":135,"depth":135,"links":136},2,[137,139,140],{"id":53,"depth":138,"text":56},3,{"id":103,"depth":135,"text":106},{"id":120,"depth":135,"text":123},"markdown","content:design-system:1.about:3.getting-support.md","content","design-system/1.about/3.getting-support.md","md",["ShallowRef",147],["ShallowReactive",148],{"/design-system/about/getting-support":149},[150,156],{"_path":151,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":152,"description":153,"layout":13,"_type":141,"_id":154,"_source":143,"_file":155,"_extension":145},"/design-system/about/whos-it-for","Who's it for?","Built by government, for government.","content:design-system:1.about:2.whos-it-for.md","design-system/1.about/2.whos-it-for.md",{"_path":157,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":158,"description":159,"layout":13,"_type":141,"_id":160,"_source":143,"_file":161,"_extension":145},"/design-system/about/contributing","Contributing","Found an issue?","content:design-system:1.about:4.contributing.md","design-system/1.about/4.contributing.md",["ShallowRef",163],{},[165,170,412],{"title":166,"_path":167,"icon":168,"layout":169},"Ripple Design System","/","carbon:home","home",{"title":171,"_path":172,"children":173},"Design System","/design-system",[174,184,200,230,264],{"title":175,"_path":176,"children":177},"About","/design-system/about",[178,181,182,183],{"title":179,"_path":180,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":152,"_path":151,"layout":13},{"title":11,"_path":7,"layout":13},{"title":158,"_path":157,"layout":13},{"title":185,"_path":186,"children":187},"Design","/design-system/design",[188,191,194,197],{"title":189,"_path":190,"layout":13},"Getting started","/design-system/design/getting-started",{"title":192,"_path":193,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":195,"_path":196,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":198,"_path":199,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":201,"_path":202,"children":203},"Develop","/design-system/develop",[204,206,208,211],{"title":189,"_path":205,"layout":13},"/design-system/develop/getting-started",{"title":158,"_path":207,"layout":13},"/design-system/develop/contributing",{"title":209,"_path":210,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":212,"_path":213,"children":214,"layout":13},"Usage","/design-system/develop/usage",[215,218,221,224,227],{"title":216,"_path":217,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":219,"_path":220,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":222,"_path":223,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":225,"_path":226,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":228,"_path":229,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":231,"_path":232,"children":233},"Styles","/design-system/styles",[234,237,240,243,246,249,252,255,258,261],{"title":235,"_path":236,"layout":13},"Colour","/design-system/styles/colour",{"title":238,"_path":239,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":241,"_path":242,"layout":13},"Grid","/design-system/styles/grid",{"title":244,"_path":245,"layout":13},"Icons","/design-system/styles/icons",{"title":247,"_path":248,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":250,"_path":251,"layout":13},"Layout","/design-system/styles/layout",{"title":253,"_path":254,"layout":13},"Logo","/design-system/styles/logo",{"title":256,"_path":257,"layout":13},"Motion","/design-system/styles/motion",{"title":259,"_path":260,"layout":13},"Spacing","/design-system/styles/spacing",{"title":262,"_path":263,"layout":13},"Typography","/design-system/styles/typography",{"title":265,"_path":266,"children":267},"Components","/design-system/components",[268,271,274,277,280,283,286,289,292,295,298,301,304,307,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409],{"title":269,"_path":270,"layout":13},"Accordion","/design-system/components/accordion",{"title":272,"_path":273,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":275,"_path":276,"layout":13},"Alert","/design-system/components/alert",{"title":278,"_path":279,"layout":13},"Block quote","/design-system/components/block-quote",{"title":281,"_path":282,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":284,"_path":285,"layout":13},"Button","/design-system/components/button",{"title":287,"_path":288,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":290,"_path":291,"layout":13},"Callout","/design-system/components/callout",{"title":293,"_path":294,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":296,"_path":297,"layout":13},"Card","/design-system/components/card",{"title":299,"_path":300,"layout":13},"Carousel","/design-system/components/carousel",{"title":302,"_path":303,"layout":13},"Category grid","/design-system/components/category-grid",{"title":305,"_path":306,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":308,"_path":309,"layout":13},"Chip","/design-system/components/chip",{"title":311,"_path":312,"layout":13},"Contact us","/design-system/components/contact-us",{"title":314,"_path":315,"layout":13},"Date input","/design-system/components/date-input",{"title":317,"_path":318,"layout":13},"Detail list","/design-system/components/detail-list",{"title":320,"_path":321,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":323,"_path":324,"layout":13},"File","/design-system/components/file",{"title":326,"_path":327,"layout":13},"Footer","/design-system/components/footer",{"title":329,"_path":330,"layout":13},"Form","/design-system/components/form",{"title":332,"_path":333,"layout":13},"Form alert","/design-system/components/form-alert",{"title":335,"_path":336,"layout":13},"Header","/design-system/components/header",{"title":338,"_path":339,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":341,"_path":342,"layout":13},"Input field","/design-system/components/input-field",{"title":344,"_path":345,"layout":13},"Key dates","/design-system/components/key-dates",{"title":347,"_path":348,"layout":13},"Media","/design-system/components/media",{"title":350,"_path":351,"layout":13},"Media embed","/design-system/components/media-embed",{"title":353,"_path":354,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":356,"_path":357,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":359,"_path":360,"layout":13},"Option button","/design-system/components/option-button",{"title":362,"_path":363,"layout":13},"Page action","/design-system/components/page-action",{"title":365,"_path":366,"layout":13},"Pagination","/design-system/components/pagination",{"title":368,"_path":369,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":371,"_path":372,"layout":13},"Profile","/design-system/components/profile",{"title":374,"_path":375,"layout":13},"Radio button","/design-system/components/radio-button",{"title":377,"_path":378,"layout":13},"Related links","/design-system/components/related-links",{"title":380,"_path":381,"layout":13},"Results listing","/design-system/components/results-listing",{"title":383,"_path":384,"layout":13},"Search bar","/design-system/components/search-bar",{"title":386,"_path":387,"layout":13},"Skip link","/design-system/components/skip-link",{"title":389,"_path":390,"layout":13},"Social share","/design-system/components/social-share",{"title":392,"_path":393,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":395,"_path":396,"layout":13},"Table","/design-system/components/table",{"title":398,"_path":399,"layout":13},"Tabs","/design-system/components/tabs",{"title":401,"_path":402,"layout":13},"Tag","/design-system/components/tag",{"title":404,"_path":405,"layout":13},"Text area","/design-system/components/text-area",{"title":407,"_path":408,"layout":13},"Timeline","/design-system/components/timeline",{"title":410,"_path":411,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":413,"_path":414,"children":415,"layout":13},"Ripple Framework","/framework",[416,417,435,457],{"title":413,"_path":414,"layout":13},{"title":418,"_path":419,"children":420},"Key Concepts","/framework/key-concepts",[421,423,426,429,432],{"title":222,"_path":422,"layout":13},"/framework/key-concepts/nuxt",{"title":424,"_path":425,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":427,"_path":428,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":430,"_path":431,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":433,"_path":434,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":436,"_path":437,"children":438},"Guides","/framework/guides",[439,442,445,448,451,454],{"title":440,"_path":441,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":443,"_path":444,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":446,"_path":447,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":449,"_path":450,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":452,"_path":453,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":455,"_path":456,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":458,"_path":459,"layout":13},"Core modules","/framework/core-modules",["Reactive",461],["Set"],["Reactive",463],{"module-navigation":464},null,true,1714695151496]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Support</h1><p class="rpl-type-p-large" data-v-3163c6df>How to get help</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->The <a href="https://www.vic.gov.au/ripple-design-system" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Ripple design system<!--]--><!--]--><!----><!--]--></a> is maintained by the <a href="https://www.vic.gov.au/single-digital-presence" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Single Digital Presence (SDP)<!--]--><!--]--><!----><!--]--></a> team at the Victorian Department of Government Services.<!--]--></p><p><!--[-->You can reach out to us via the following channels:<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="for-technical-and-project-support" data-v-ea525968><a href="#for-technical-and-project-support" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->For technical and project support<!--]--></a></h2><ul><!--[--><li><!--[-->join the discussion on <a href="https://github.com/dpc-sdp/ripple-framework/discussions" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->GitHub<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[-->log a request through our <a href="https://digital-vic.atlassian.net/servicedesk/customer/portals" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->helpdesk<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[-->sign up to the <a href="https://vic-sdp.slack.com" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->SDP Slack<!--]--><!--]--><!----><!--]--></a> (Open to projects with an MoU for application support)<!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="design-enquiries" data-v-fff5b905><a href="#design-enquiries" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Design enquiries<!--]--></a></h2><p><!--[-->Email: <a href="mailto:design@dpc.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->design@dpc.vic.gov.au<!--]--><!--]--><!----><!--]--></a><!--]--></p><h2 class="rpl-type-h2 docs-h2" id="general-enquiries" data-v-fff5b905><a href="#general-enquiries" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->General enquiries<!--]--></a></h2><p><!--[--><a href="https://digital-vic.atlassian.net/servicedesk/customer/portal/14/group/113/create/497" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Raise a request<!--]--><!--]--><!----><!--]--></a><!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/1.about/3.getting-support.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/about/getting-support/_payload.json">[{"state":1,"once":460,"_errors":462,"serverRendered":465,"path":7,"prerenderedAt":466},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":146,"$sdd-globals":162,"$sdd-navigation":164},["ShallowRef",4],["ShallowReactive",5],{"/design-system/about/getting-support":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":141,"_id":142,"_source":143,"_file":144,"_extension":145},"/design-system/about/getting-support","about",false,"","Support","How to get help","page",{"type":15,"children":16,"toc":134},"root",[17,45,50,57,100,107,118,124],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22,25,34,36,43],{"type":23,"value":24},"text","The ",{"type":18,"tag":26,"props":27,"children":31},"a",{"href":28,"rel":29},"https://www.vic.gov.au/ripple-design-system",[30],"nofollow",[32],{"type":23,"value":33},"Ripple design system",{"type":23,"value":35}," is maintained by the ",{"type":18,"tag":26,"props":37,"children":40},{"href":38,"rel":39},"https://www.vic.gov.au/single-digital-presence",[30],[41],{"type":23,"value":42},"Single Digital Presence (SDP)",{"type":23,"value":44}," team at the Victorian Department of Government Services.",{"type":18,"tag":19,"props":46,"children":47},{},[48],{"type":23,"value":49},"You can reach out to us via the following channels:",{"type":18,"tag":51,"props":52,"children":54},"h3",{"id":53},"for-technical-and-project-support",[55],{"type":23,"value":56},"For technical and project support",{"type":18,"tag":58,"props":59,"children":60},"ul",{},[61,74,86],{"type":18,"tag":62,"props":63,"children":64},"li",{},[65,67],{"type":23,"value":66},"join the discussion on ",{"type":18,"tag":26,"props":68,"children":71},{"href":69,"rel":70},"https://github.com/dpc-sdp/ripple-framework/discussions",[30],[72],{"type":23,"value":73},"GitHub",{"type":18,"tag":62,"props":75,"children":76},{},[77,79],{"type":23,"value":78},"log a request through our ",{"type":18,"tag":26,"props":80,"children":83},{"href":81,"rel":82},"https://digital-vic.atlassian.net/servicedesk/customer/portals",[30],[84],{"type":23,"value":85},"helpdesk",{"type":18,"tag":62,"props":87,"children":88},{},[89,91,98],{"type":23,"value":90},"sign up to the ",{"type":18,"tag":26,"props":92,"children":95},{"href":93,"rel":94},"https://vic-sdp.slack.com",[30],[96],{"type":23,"value":97},"SDP Slack",{"type":23,"value":99}," (Open to projects with an MoU for application support)",{"type":18,"tag":101,"props":102,"children":104},"h2",{"id":103},"design-enquiries",[105],{"type":23,"value":106},"Design enquiries",{"type":18,"tag":19,"props":108,"children":109},{},[110,112],{"type":23,"value":111},"Email: ",{"type":18,"tag":26,"props":113,"children":115},{"href":114},"mailto:design@dpc.vic.gov.au",[116],{"type":23,"value":117},"design@dpc.vic.gov.au",{"type":18,"tag":101,"props":119,"children":121},{"id":120},"general-enquiries",[122],{"type":23,"value":123},"General enquiries",{"type":18,"tag":19,"props":125,"children":126},{},[127],{"type":18,"tag":26,"props":128,"children":131},{"href":129,"rel":130},"https://digital-vic.atlassian.net/servicedesk/customer/portal/14/group/113/create/497",[30],[132],{"type":23,"value":133},"Raise a request",{"title":10,"searchDepth":135,"depth":135,"links":136},2,[137,139,140],{"id":53,"depth":138,"text":56},3,{"id":103,"depth":135,"text":106},{"id":120,"depth":135,"text":123},"markdown","content:design-system:1.about:3.getting-support.md","content","design-system/1.about/3.getting-support.md","md",["ShallowRef",147],["ShallowReactive",148],{"/design-system/about/getting-support":149},[150,156],{"_path":151,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":152,"description":153,"layout":13,"_type":141,"_id":154,"_source":143,"_file":155,"_extension":145},"/design-system/about/whos-it-for","Who's it for?","Built by government, for government.","content:design-system:1.about:2.whos-it-for.md","design-system/1.about/2.whos-it-for.md",{"_path":157,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":158,"description":159,"layout":13,"_type":141,"_id":160,"_source":143,"_file":161,"_extension":145},"/design-system/about/contributing","Contributing","Found an issue?","content:design-system:1.about:4.contributing.md","design-system/1.about/4.contributing.md",["ShallowRef",163],{},[165,170,412],{"title":166,"_path":167,"icon":168,"layout":169},"Ripple Design System","/","carbon:home","home",{"title":171,"_path":172,"children":173},"Design System","/design-system",[174,184,200,230,264],{"title":175,"_path":176,"children":177},"About","/design-system/about",[178,181,182,183],{"title":179,"_path":180,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":152,"_path":151,"layout":13},{"title":11,"_path":7,"layout":13},{"title":158,"_path":157,"layout":13},{"title":185,"_path":186,"children":187},"Design","/design-system/design",[188,191,194,197],{"title":189,"_path":190,"layout":13},"Getting started","/design-system/design/getting-started",{"title":192,"_path":193,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":195,"_path":196,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":198,"_path":199,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":201,"_path":202,"children":203},"Develop","/design-system/develop",[204,206,208,211],{"title":189,"_path":205,"layout":13},"/design-system/develop/getting-started",{"title":158,"_path":207,"layout":13},"/design-system/develop/contributing",{"title":209,"_path":210,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":212,"_path":213,"children":214,"layout":13},"Usage","/design-system/develop/usage",[215,218,221,224,227],{"title":216,"_path":217,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":219,"_path":220,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":222,"_path":223,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":225,"_path":226,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":228,"_path":229,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":231,"_path":232,"children":233},"Styles","/design-system/styles",[234,237,240,243,246,249,252,255,258,261],{"title":235,"_path":236,"layout":13},"Colour","/design-system/styles/colour",{"title":238,"_path":239,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":241,"_path":242,"layout":13},"Grid","/design-system/styles/grid",{"title":244,"_path":245,"layout":13},"Icons","/design-system/styles/icons",{"title":247,"_path":248,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":250,"_path":251,"layout":13},"Layout","/design-system/styles/layout",{"title":253,"_path":254,"layout":13},"Logo","/design-system/styles/logo",{"title":256,"_path":257,"layout":13},"Motion","/design-system/styles/motion",{"title":259,"_path":260,"layout":13},"Spacing","/design-system/styles/spacing",{"title":262,"_path":263,"layout":13},"Typography","/design-system/styles/typography",{"title":265,"_path":266,"children":267},"Components","/design-system/components",[268,271,274,277,280,283,286,289,292,295,298,301,304,307,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409],{"title":269,"_path":270,"layout":13},"Accordion","/design-system/components/accordion",{"title":272,"_path":273,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":275,"_path":276,"layout":13},"Alert","/design-system/components/alert",{"title":278,"_path":279,"layout":13},"Block quote","/design-system/components/block-quote",{"title":281,"_path":282,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":284,"_path":285,"layout":13},"Button","/design-system/components/button",{"title":287,"_path":288,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":290,"_path":291,"layout":13},"Callout","/design-system/components/callout",{"title":293,"_path":294,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":296,"_path":297,"layout":13},"Card","/design-system/components/card",{"title":299,"_path":300,"layout":13},"Carousel","/design-system/components/carousel",{"title":302,"_path":303,"layout":13},"Category grid","/design-system/components/category-grid",{"title":305,"_path":306,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":308,"_path":309,"layout":13},"Chip","/design-system/components/chip",{"title":311,"_path":312,"layout":13},"Contact us","/design-system/components/contact-us",{"title":314,"_path":315,"layout":13},"Date input","/design-system/components/date-input",{"title":317,"_path":318,"layout":13},"Detail list","/design-system/components/detail-list",{"title":320,"_path":321,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":323,"_path":324,"layout":13},"File","/design-system/components/file",{"title":326,"_path":327,"layout":13},"Footer","/design-system/components/footer",{"title":329,"_path":330,"layout":13},"Form","/design-system/components/form",{"title":332,"_path":333,"layout":13},"Form alert","/design-system/components/form-alert",{"title":335,"_path":336,"layout":13},"Header","/design-system/components/header",{"title":338,"_path":339,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":341,"_path":342,"layout":13},"Input field","/design-system/components/input-field",{"title":344,"_path":345,"layout":13},"Key dates","/design-system/components/key-dates",{"title":347,"_path":348,"layout":13},"Media","/design-system/components/media",{"title":350,"_path":351,"layout":13},"Media embed","/design-system/components/media-embed",{"title":353,"_path":354,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":356,"_path":357,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":359,"_path":360,"layout":13},"Option button","/design-system/components/option-button",{"title":362,"_path":363,"layout":13},"Page action","/design-system/components/page-action",{"title":365,"_path":366,"layout":13},"Pagination","/design-system/components/pagination",{"title":368,"_path":369,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":371,"_path":372,"layout":13},"Profile","/design-system/components/profile",{"title":374,"_path":375,"layout":13},"Radio button","/design-system/components/radio-button",{"title":377,"_path":378,"layout":13},"Related links","/design-system/components/related-links",{"title":380,"_path":381,"layout":13},"Results listing","/design-system/components/results-listing",{"title":383,"_path":384,"layout":13},"Search bar","/design-system/components/search-bar",{"title":386,"_path":387,"layout":13},"Skip link","/design-system/components/skip-link",{"title":389,"_path":390,"layout":13},"Social share","/design-system/components/social-share",{"title":392,"_path":393,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":395,"_path":396,"layout":13},"Table","/design-system/components/table",{"title":398,"_path":399,"layout":13},"Tabs","/design-system/components/tabs",{"title":401,"_path":402,"layout":13},"Tag","/design-system/components/tag",{"title":404,"_path":405,"layout":13},"Text area","/design-system/components/text-area",{"title":407,"_path":408,"layout":13},"Timeline","/design-system/components/timeline",{"title":410,"_path":411,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":413,"_path":414,"children":415,"layout":13},"Ripple Framework","/framework",[416,417,435,457],{"title":413,"_path":414,"layout":13},{"title":418,"_path":419,"children":420},"Key Concepts","/framework/key-concepts",[421,423,426,429,432],{"title":222,"_path":422,"layout":13},"/framework/key-concepts/nuxt",{"title":424,"_path":425,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":427,"_path":428,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":430,"_path":431,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":433,"_path":434,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":436,"_path":437,"children":438},"Guides","/framework/guides",[439,442,445,448,451,454],{"title":440,"_path":441,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":443,"_path":444,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":446,"_path":447,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":449,"_path":450,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":452,"_path":453,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":455,"_path":456,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":458,"_path":459,"layout":13},"Core modules","/framework/core-modules",["Reactive",461],["Set"],["Reactive",463],{"module-navigation":464},null,true,1714695649651]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/about/what-is-ripple/_payload.json b/design-system/about/what-is-ripple/_payload.json
index 31fbaa58ba..7f87852787 100644
--- a/design-system/about/what-is-ripple/_payload.json
+++ b/design-system/about/what-is-ripple/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,22,38,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",true,[9,12,16,19],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":15,"items":-1},"/design-system/about/whos-it-for","Who's it for?",false,{"id":17,"text":18,"url":17,"active":15,"items":-1},"/design-system/about/getting-support","Support",{"id":20,"text":21,"url":20,"active":15,"items":-1},"/design-system/about/contributing","Contributing",{"id":23,"text":24,"url":23,"active":15,"items":25},"/design-system/design","Design",[26,29,32,35],{"id":27,"text":28,"url":27,"active":15,"items":-1},"/design-system/design/getting-started","Getting started",{"id":30,"text":31,"url":30,"active":15,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":33,"text":34,"url":33,"active":15,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":36,"text":37,"url":36,"active":15,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":39,"text":40,"url":39,"active":15,"items":41},"/design-system/develop","Develop",[42,44,46,49],{"id":43,"text":28,"url":43,"active":15,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":21,"url":45,"active":15,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":15,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":15,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":15,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":15,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":15,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":15,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":15,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":15,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":15,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":15,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":15,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":15,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":15,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":15,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":15,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":15,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":15,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":15,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":15,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":15,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":15,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":15,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":15,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":15,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":15,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":15,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":15,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":15,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":15,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":15,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":15,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":15,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":15,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":15,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":15,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":15,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":15,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":15,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":15,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":15,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":15,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":15,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":15,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":15,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":15,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":15,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":15,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":15,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":15,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":15,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":15,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":15,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":15,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":15,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":15,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":15,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":15,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":15,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":15,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":15,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":15,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":15,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":15,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":15,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":15,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":15,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":15,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695150844]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,22,38,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",true,[9,12,16,19],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":15,"items":-1},"/design-system/about/whos-it-for","Who's it for?",false,{"id":17,"text":18,"url":17,"active":15,"items":-1},"/design-system/about/getting-support","Support",{"id":20,"text":21,"url":20,"active":15,"items":-1},"/design-system/about/contributing","Contributing",{"id":23,"text":24,"url":23,"active":15,"items":25},"/design-system/design","Design",[26,29,32,35],{"id":27,"text":28,"url":27,"active":15,"items":-1},"/design-system/design/getting-started","Getting started",{"id":30,"text":31,"url":30,"active":15,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":33,"text":34,"url":33,"active":15,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":36,"text":37,"url":36,"active":15,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":39,"text":40,"url":39,"active":15,"items":41},"/design-system/develop","Develop",[42,44,46,49],{"id":43,"text":28,"url":43,"active":15,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":21,"url":45,"active":15,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":15,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":15,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":15,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":15,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":15,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":15,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":15,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":15,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":15,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":15,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":15,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":15,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":15,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":15,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":15,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":15,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":15,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":15,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":15,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":15,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":15,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":15,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":15,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":15,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":15,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":15,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":15,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":15,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":15,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":15,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":15,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":15,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":15,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":15,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":15,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":15,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":15,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":15,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":15,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":15,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":15,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":15,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":15,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":15,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":15,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":15,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":15,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":15,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":15,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":15,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":15,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":15,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":15,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":15,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":15,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":15,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":15,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":15,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":15,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":15,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":15,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":15,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":15,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":15,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":15,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":15,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":15,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695649094]
\ No newline at end of file
diff --git a/design-system/about/what-is-ripple/index.html b/design-system/about/what-is-ripple/index.html
index a78d441500..d744f397f3 100644
--- a/design-system/about/what-is-ripple/index.html
+++ b/design-system/about/what-is-ripple/index.html
@@ -23,61 +23,61 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.F9NVvvm4.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseImg.wgVpK8mn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.GmB4B_NE.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseImg.Wu9xgcX7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -89,8 +89,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>What is Ripple?</h1><p class="rpl-type-p-large" data-v-3163c6df>Ripple is the digital design system of the Victorian government</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->Ripple is a system of reusable styles, components, patterns and tools for building brand Victoria digital products.<!--]--></p><p><!--[-->Developed by the Single Digital Presence (SDP) team in the Department of Government Services, Ripple:<!--]--></p><ul><!--[--><li><!--[-->makes it easier for citizens to <strong><!--[-->find<!--]--></strong>, <strong><!--[-->understand<!--]--></strong> and <strong><!--[-->use<!--]--></strong> government information<!--]--></li><li><!--[-->makes creating Brand Victoria approved content, assets and sites easy<!--]--></li><li><!--[-->increases delivery speed for digital products and services.<!--]--></li><!--]--></ul><p><!--[-->Over 50 government websites use Ripple, including our main <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->vic.gov.au<!--]--><!--]--><!----><!--]--></a> platform. These sites attract millions of views per month.<!--]--></p><p><!--[--><img src="/assets/img/sites.png" alt="Screenshots of websites using SDP, vic.gov.au, police.vic.gov.au, health.vic.gov.au, legislation.vic.gov.au" class="docs-center-img"><!--]--></p><h2 class="rpl-type-h2 docs-h2" id="why-use-ripple" data-v-fff5b905><a href="#why-use-ripple" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Why use Ripple?<!--]--></a></h2><h2 class="rpl-type-h3 docs-h3" id="ripple-solves-the-hard-problems-so-you-dont-have-to" data-v-ea525968><a href="#ripple-solves-the-hard-problems-so-you-dont-have-to" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Ripple solves the hard problems so you don’t have to<!--]--></a></h2><p><!--[-->We spent the past 5 years refining Ripple based on user feedback to ensure it:<!--]--></p><ul><!--[--><li><!--[-->meets the publishing needs of government users<!--]--></li><li><!--[-->makes it easier for citizens to interact with government services.<!--]--></li><!--]--></ul><p><!--[-->Ripple users can be confident their site’s design and development is based on industry standards and best practices for:<!--]--></p><ul><!--[--><li><!--[-->accessibility<!--]--></li><li><!--[-->SEO<!--]--></li><li><!--[-->security<!--]--></li><li><!--[-->performance.<!--]--></li><!--]--></ul><p><!--[-->Users can easily navigate sites regardless of technical ability, location or device.<!--]--></p><p><!--[-->Designers and developers can create consistent digital experiences across Victorian Government sites.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="ripple-gives-you-efficient-and-reusable-digital-resources" data-v-ea525968><a href="#ripple-gives-you-efficient-and-reusable-digital-resources" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Ripple gives you efficient and reusable digital resources<!--]--></a></h2><p><!--[-->Ripple promotes efficiency and reuse by providing reusable styles, components and patterns.<!--]--></p><p><!--[-->It provides a set of standards to manage design at scale, to:<!--]--></p><ul><!--[--><li><!--[-->reduce redundancy<!--]--></li><li><!--[-->create a shared language<!--]--></li><li><!--[-->provide visual consistency.<!--]--></li><!--]--></ul><p><!--[-->Developer contributions can be shared across projects, adding value to all government departments. This results in reduced project development time and expense.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="ripple-is-by-government-for-government" data-v-ea525968><a href="#ripple-is-by-government-for-government" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Ripple is by government, for government<!--]--></a></h2><p><!--[-->The Ripple Design System has been made open-source to foster collaboration across government. By making the system open-source, departments and agencies can help improve the citizen experience across government. Ripple has been developed by government, for government and retains all intellectual property and expertise.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="who-can-use-ripple" data-v-fff5b905><a href="#who-can-use-ripple" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Who can use Ripple?<!--]--></a></h2><p><!--[-->Ripple is open to all departments or agencies that use Victorian Government branding. Visit the <a href="/design-system/about/whos-it-for" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Who&#39;s it for?<!--]--><!--]--><!----><!--]--></a> page for more information.<!--]--></p><p><!--[-->Ripple is a modular system, allowing it to be used separately from our other SDP products, Tide and Bay. Visit the <a href="/design-system/develop/usage" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Usage<!--]--><!--]--><!----><!--]--></a> page for more information.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="how-do-i-find-out-more" data-v-fff5b905><a href="#how-do-i-find-out-more" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->How do I find out more?<!--]--></a></h2><p><!--[-->If you are a Victorian Government department or agency wanting to use Ripple in a Brand Victoria digital product (or a vendor supporting them), please visit <a href="https://www.vic.gov.au/work-sdp" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.vic.gov.au/work-sdp<!--]--><!--]--><!----><!--]--></a> or contact <a href="mailto:digital@dpc.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->digital@dpc.vic.gov.au<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><p><!--[-->To find out more about the Single Digital Presence program, please visit <a href="https://www.vic.gov.au/single-digital-presence" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.vic.gov.au/single-digital-presence<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/1.about/1.what-is-ripple.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/about/what-is-ripple/_payload.json">[{"state":1,"once":640,"_errors":642,"serverRendered":645,"path":7,"prerenderedAt":646},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":305,"$sdd-globals":350,"$sdd-navigation":352},["ShallowRef",4],["ShallowReactive",5],{"/design-system/about/what-is-ripple":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":300,"_id":301,"_source":302,"_file":303,"_extension":304},"/design-system/about/what-is-ripple","about",false,"","What is Ripple?","Ripple is the digital design system of the Victorian government","page",{"type":15,"children":16,"toc":289},"root",[17,25,30,72,88,99,106,113,118,131,136,159,164,169,175,180,185,203,208,214,219,225,238,250,256,277],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22],{"type":23,"value":24},"text","Ripple is a system of reusable styles, components, patterns and tools for building brand Victoria digital products.",{"type":18,"tag":19,"props":26,"children":27},{},[28],{"type":23,"value":29},"Developed by the Single Digital Presence (SDP) team in the Department of Government Services, Ripple:",{"type":18,"tag":31,"props":32,"children":33},"ul",{},[34,62,67],{"type":18,"tag":35,"props":36,"children":37},"li",{},[38,40,46,48,53,55,60],{"type":23,"value":39},"makes it easier for citizens to ",{"type":18,"tag":41,"props":42,"children":43},"strong",{},[44],{"type":23,"value":45},"find",{"type":23,"value":47},", ",{"type":18,"tag":41,"props":49,"children":50},{},[51],{"type":23,"value":52},"understand",{"type":23,"value":54}," and ",{"type":18,"tag":41,"props":56,"children":57},{},[58],{"type":23,"value":59},"use",{"type":23,"value":61}," government information",{"type":18,"tag":35,"props":63,"children":64},{},[65],{"type":23,"value":66},"makes creating Brand Victoria approved content, assets and sites easy",{"type":18,"tag":35,"props":68,"children":69},{},[70],{"type":23,"value":71},"increases delivery speed for digital products and services.",{"type":18,"tag":19,"props":73,"children":74},{},[75,77,86],{"type":23,"value":76},"Over 50 government websites use Ripple, including our main ",{"type":18,"tag":78,"props":79,"children":83},"a",{"href":80,"rel":81},"https://www.vic.gov.au",[82],"nofollow",[84],{"type":23,"value":85},"vic.gov.au",{"type":23,"value":87}," platform. These sites attract millions of views per month.",{"type":18,"tag":19,"props":89,"children":90},{},[91],{"type":18,"tag":92,"props":93,"children":98},"img",{"alt":94,"className":95,"src":97},"Screenshots of websites using SDP, vic.gov.au, police.vic.gov.au, health.vic.gov.au, legislation.vic.gov.au",[96],"docs-center-img","/assets/img/sites.png",[],{"type":18,"tag":100,"props":101,"children":103},"h2",{"id":102},"why-use-ripple",[104],{"type":23,"value":105},"Why use Ripple?",{"type":18,"tag":107,"props":108,"children":110},"h3",{"id":109},"ripple-solves-the-hard-problems-so-you-dont-have-to",[111],{"type":23,"value":112},"Ripple solves the hard problems so you don’t have to",{"type":18,"tag":19,"props":114,"children":115},{},[116],{"type":23,"value":117},"We spent the past 5 years refining Ripple based on user feedback to ensure it:",{"type":18,"tag":31,"props":119,"children":120},{},[121,126],{"type":18,"tag":35,"props":122,"children":123},{},[124],{"type":23,"value":125},"meets the publishing needs of government users",{"type":18,"tag":35,"props":127,"children":128},{},[129],{"type":23,"value":130},"makes it easier for citizens to interact with government services.",{"type":18,"tag":19,"props":132,"children":133},{},[134],{"type":23,"value":135},"Ripple users can be confident their site’s design and development is based on industry standards and best practices for:",{"type":18,"tag":31,"props":137,"children":138},{},[139,144,149,154],{"type":18,"tag":35,"props":140,"children":141},{},[142],{"type":23,"value":143},"accessibility",{"type":18,"tag":35,"props":145,"children":146},{},[147],{"type":23,"value":148},"SEO",{"type":18,"tag":35,"props":150,"children":151},{},[152],{"type":23,"value":153},"security",{"type":18,"tag":35,"props":155,"children":156},{},[157],{"type":23,"value":158},"performance.",{"type":18,"tag":19,"props":160,"children":161},{},[162],{"type":23,"value":163},"Users can easily navigate sites regardless of technical ability, location or device.",{"type":18,"tag":19,"props":165,"children":166},{},[167],{"type":23,"value":168},"Designers and developers can create consistent digital experiences across Victorian Government sites.",{"type":18,"tag":107,"props":170,"children":172},{"id":171},"ripple-gives-you-efficient-and-reusable-digital-resources",[173],{"type":23,"value":174},"Ripple gives you efficient and reusable digital resources",{"type":18,"tag":19,"props":176,"children":177},{},[178],{"type":23,"value":179},"Ripple promotes efficiency and reuse by providing reusable styles, components and patterns.",{"type":18,"tag":19,"props":181,"children":182},{},[183],{"type":23,"value":184},"It provides a set of standards to manage design at scale, to:",{"type":18,"tag":31,"props":186,"children":187},{},[188,193,198],{"type":18,"tag":35,"props":189,"children":190},{},[191],{"type":23,"value":192},"reduce redundancy",{"type":18,"tag":35,"props":194,"children":195},{},[196],{"type":23,"value":197},"create a shared language",{"type":18,"tag":35,"props":199,"children":200},{},[201],{"type":23,"value":202},"provide visual consistency.",{"type":18,"tag":19,"props":204,"children":205},{},[206],{"type":23,"value":207},"Developer contributions can be shared across projects, adding value to all government departments. This results in reduced project development time and expense.",{"type":18,"tag":107,"props":209,"children":211},{"id":210},"ripple-is-by-government-for-government",[212],{"type":23,"value":213},"Ripple is by government, for government",{"type":18,"tag":19,"props":215,"children":216},{},[217],{"type":23,"value":218},"The Ripple Design System has been made open-source to foster collaboration across government. By making the system open-source, departments and agencies can help improve the citizen experience across government. Ripple has been developed by government, for government and retains all intellectual property and expertise.",{"type":18,"tag":100,"props":220,"children":222},{"id":221},"who-can-use-ripple",[223],{"type":23,"value":224},"Who can use Ripple?",{"type":18,"tag":19,"props":226,"children":227},{},[228,230,236],{"type":23,"value":229},"Ripple is open to all departments or agencies that use Victorian Government branding. Visit the ",{"type":18,"tag":78,"props":231,"children":233},{"href":232},"/design-system/about/whos-it-for",[234],{"type":23,"value":235},"Who's it for?",{"type":23,"value":237}," page for more information.",{"type":18,"tag":19,"props":239,"children":240},{},[241,243,249],{"type":23,"value":242},"Ripple is a modular system, allowing it to be used separately from our other SDP products, Tide and Bay. Visit the ",{"type":18,"tag":78,"props":244,"children":246},{"href":245},"/design-system/develop/usage",[247],{"type":23,"value":248},"Usage",{"type":23,"value":237},{"type":18,"tag":100,"props":251,"children":253},{"id":252},"how-do-i-find-out-more",[254],{"type":23,"value":255},"How do I find out more?",{"type":18,"tag":19,"props":257,"children":258},{},[259,261,267,269,275],{"type":23,"value":260},"If you are a Victorian Government department or agency wanting to use Ripple in a Brand Victoria digital product (or a vendor supporting them), please visit ",{"type":18,"tag":78,"props":262,"children":265},{"href":263,"rel":264},"https://www.vic.gov.au/work-sdp",[82],[266],{"type":23,"value":263},{"type":23,"value":268}," or contact ",{"type":18,"tag":78,"props":270,"children":272},{"href":271},"mailto:digital@dpc.vic.gov.au",[273],{"type":23,"value":274},"digital@dpc.vic.gov.au",{"type":23,"value":276},".",{"type":18,"tag":19,"props":278,"children":279},{},[280,282,288],{"type":23,"value":281},"To find out more about the Single Digital Presence program, please visit ",{"type":18,"tag":78,"props":283,"children":286},{"href":284,"rel":285},"https://www.vic.gov.au/single-digital-presence",[82],[287],{"type":23,"value":284},{"type":23,"value":276},{"title":10,"searchDepth":290,"depth":290,"links":291},2,[292,298,299],{"id":102,"depth":290,"text":105,"children":293},[294,296,297],{"id":109,"depth":295,"text":112},3,{"id":171,"depth":295,"text":174},{"id":210,"depth":295,"text":213},{"id":221,"depth":290,"text":224},{"id":252,"depth":290,"text":255},"markdown","content:design-system:1.about:1.what-is-ripple.md","content","design-system/1.about/1.what-is-ripple.md","md",["ShallowRef",306],["ShallowReactive",307],{"/design-system/about/what-is-ripple":308},[309,346],{"_path":310,"_dir":10,"_draft":9,"_partial":9,"_locale":10,"title":311,"description":312,"icon":313,"layout":314,"primaryCTA":315,"secondaryCTA":321,"modulesCTA":327,"quickLink1":331,"quickLink2":334,"quickLink3":337,"framework":341,"_type":300,"_id":344,"_source":302,"_file":345,"_extension":304},"/","Ripple Design System","Ripple is the design system for Victorian government digital products","carbon:home","home",{"title":316,"description":317,"image":318,"url":320},"For Designers","Information for designers using Ripple to create brand Victoria compliant digital experiences.",{"src":319},"/assets/img/for-designers.png","/design-system/design/getting-started",{"title":322,"description":323,"image":324,"url":326},"For Developers","How to get started implementing Ripple UI components in digital products.",{"src":325},"/assets/img/for-developers.png","/design-system/develop/getting-started",{"title":328,"description":329,"url":330},"Modules","Paragraph Default. Cards contain actionable content about a single topic. These are usually grouped as similar style sets.","/framework",{"title":332,"description":333,"url":7},"About Ripple","Ripple is a system of reusable styles, components, patterns and tools for creating Victorian government digital experiences.",{"title":335,"description":336,"url":232},"Who should use it","Ripple is built by government for government to deliver services Victorians trust and rely on.",{"title":338,"description":339,"url":340},"Design principles","The guiding principles that are the foundation of the Ripple Design System.","/design-system/design/our-design-principles",{"title":342,"description":343,"url":330},"Ripple framework","Ripple framework contains the tools for building SDP sites using Ripple design system components.","content:1.index.md","1.index.md",{"_path":232,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":235,"description":347,"layout":13,"_type":300,"_id":348,"_source":302,"_file":349,"_extension":304},"Built by government, for government.","content:design-system:1.about:2.whos-it-for.md","design-system/1.about/2.whos-it-for.md",["ShallowRef",351],{},[353,354,593],{"title":311,"_path":310,"icon":313,"layout":314},{"title":355,"_path":356,"children":357},"Design System","/design-system",[358,370,384,411,445],{"title":359,"_path":360,"children":361},"About","/design-system/about",[362,363,364,367],{"title":11,"_path":7,"layout":13},{"title":235,"_path":232,"layout":13},{"title":365,"_path":366,"layout":13},"Support","/design-system/about/getting-support",{"title":368,"_path":369,"layout":13},"Contributing","/design-system/about/contributing",{"title":371,"_path":372,"children":373},"Design","/design-system/design",[374,376,378,381],{"title":375,"_path":320,"layout":13},"Getting started",{"title":377,"_path":340,"layout":13},"Our design principles",{"title":379,"_path":380,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":382,"_path":383,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":385,"_path":386,"children":387},"Develop","/design-system/develop",[388,389,391,394],{"title":375,"_path":326,"layout":13},{"title":368,"_path":390,"layout":13},"/design-system/develop/contributing",{"title":392,"_path":393,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":248,"_path":245,"children":395,"layout":13},[396,399,402,405,408],{"title":397,"_path":398,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":400,"_path":401,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":403,"_path":404,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":406,"_path":407,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":409,"_path":410,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":412,"_path":413,"children":414},"Styles","/design-system/styles",[415,418,421,424,427,430,433,436,439,442],{"title":416,"_path":417,"layout":13},"Colour","/design-system/styles/colour",{"title":419,"_path":420,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":422,"_path":423,"layout":13},"Grid","/design-system/styles/grid",{"title":425,"_path":426,"layout":13},"Icons","/design-system/styles/icons",{"title":428,"_path":429,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":431,"_path":432,"layout":13},"Layout","/design-system/styles/layout",{"title":434,"_path":435,"layout":13},"Logo","/design-system/styles/logo",{"title":437,"_path":438,"layout":13},"Motion","/design-system/styles/motion",{"title":440,"_path":441,"layout":13},"Spacing","/design-system/styles/spacing",{"title":443,"_path":444,"layout":13},"Typography","/design-system/styles/typography",{"title":446,"_path":447,"children":448},"Components","/design-system/components",[449,452,455,458,461,464,467,470,473,476,479,482,485,488,491,494,497,500,503,506,509,512,515,518,521,524,527,530,533,536,539,542,545,548,551,554,557,560,563,566,569,572,575,578,581,584,587,590],{"title":450,"_path":451,"layout":13},"Accordion","/design-system/components/accordion",{"title":453,"_path":454,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":456,"_path":457,"layout":13},"Alert","/design-system/components/alert",{"title":459,"_path":460,"layout":13},"Block quote","/design-system/components/block-quote",{"title":462,"_path":463,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":465,"_path":466,"layout":13},"Button","/design-system/components/button",{"title":468,"_path":469,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":471,"_path":472,"layout":13},"Callout","/design-system/components/callout",{"title":474,"_path":475,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":477,"_path":478,"layout":13},"Card","/design-system/components/card",{"title":480,"_path":481,"layout":13},"Carousel","/design-system/components/carousel",{"title":483,"_path":484,"layout":13},"Category grid","/design-system/components/category-grid",{"title":486,"_path":487,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":489,"_path":490,"layout":13},"Chip","/design-system/components/chip",{"title":492,"_path":493,"layout":13},"Contact us","/design-system/components/contact-us",{"title":495,"_path":496,"layout":13},"Date input","/design-system/components/date-input",{"title":498,"_path":499,"layout":13},"Detail list","/design-system/components/detail-list",{"title":501,"_path":502,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":504,"_path":505,"layout":13},"File","/design-system/components/file",{"title":507,"_path":508,"layout":13},"Footer","/design-system/components/footer",{"title":510,"_path":511,"layout":13},"Form","/design-system/components/form",{"title":513,"_path":514,"layout":13},"Form alert","/design-system/components/form-alert",{"title":516,"_path":517,"layout":13},"Header","/design-system/components/header",{"title":519,"_path":520,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":522,"_path":523,"layout":13},"Input field","/design-system/components/input-field",{"title":525,"_path":526,"layout":13},"Key dates","/design-system/components/key-dates",{"title":528,"_path":529,"layout":13},"Media","/design-system/components/media",{"title":531,"_path":532,"layout":13},"Media embed","/design-system/components/media-embed",{"title":534,"_path":535,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":537,"_path":538,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":540,"_path":541,"layout":13},"Option button","/design-system/components/option-button",{"title":543,"_path":544,"layout":13},"Page action","/design-system/components/page-action",{"title":546,"_path":547,"layout":13},"Pagination","/design-system/components/pagination",{"title":549,"_path":550,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":552,"_path":553,"layout":13},"Profile","/design-system/components/profile",{"title":555,"_path":556,"layout":13},"Radio button","/design-system/components/radio-button",{"title":558,"_path":559,"layout":13},"Related links","/design-system/components/related-links",{"title":561,"_path":562,"layout":13},"Results listing","/design-system/components/results-listing",{"title":564,"_path":565,"layout":13},"Search bar","/design-system/components/search-bar",{"title":567,"_path":568,"layout":13},"Skip link","/design-system/components/skip-link",{"title":570,"_path":571,"layout":13},"Social share","/design-system/components/social-share",{"title":573,"_path":574,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":576,"_path":577,"layout":13},"Table","/design-system/components/table",{"title":579,"_path":580,"layout":13},"Tabs","/design-system/components/tabs",{"title":582,"_path":583,"layout":13},"Tag","/design-system/components/tag",{"title":585,"_path":586,"layout":13},"Text area","/design-system/components/text-area",{"title":588,"_path":589,"layout":13},"Timeline","/design-system/components/timeline",{"title":591,"_path":592,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":594,"_path":330,"children":595,"layout":13},"Ripple Framework",[596,597,615,637],{"title":594,"_path":330,"layout":13},{"title":598,"_path":599,"children":600},"Key Concepts","/framework/key-concepts",[601,603,606,609,612],{"title":403,"_path":602,"layout":13},"/framework/key-concepts/nuxt",{"title":604,"_path":605,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":607,"_path":608,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":610,"_path":611,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":613,"_path":614,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":616,"_path":617,"children":618},"Guides","/framework/guides",[619,622,625,628,631,634],{"title":620,"_path":621,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":623,"_path":624,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":626,"_path":627,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":629,"_path":630,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":632,"_path":633,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":635,"_path":636,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":638,"_path":639,"layout":13},"Core modules","/framework/core-modules",["Reactive",641],["Set"],["Reactive",643],{"module-navigation":644},null,true,1714695150844]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>What is Ripple?</h1><p class="rpl-type-p-large" data-v-3163c6df>Ripple is the digital design system of the Victorian government</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->Ripple is a system of reusable styles, components, patterns and tools for building brand Victoria digital products.<!--]--></p><p><!--[-->Developed by the Single Digital Presence (SDP) team in the Department of Government Services, Ripple:<!--]--></p><ul><!--[--><li><!--[-->makes it easier for citizens to <strong><!--[-->find<!--]--></strong>, <strong><!--[-->understand<!--]--></strong> and <strong><!--[-->use<!--]--></strong> government information<!--]--></li><li><!--[-->makes creating Brand Victoria approved content, assets and sites easy<!--]--></li><li><!--[-->increases delivery speed for digital products and services.<!--]--></li><!--]--></ul><p><!--[-->Over 50 government websites use Ripple, including our main <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->vic.gov.au<!--]--><!--]--><!----><!--]--></a> platform. These sites attract millions of views per month.<!--]--></p><p><!--[--><img src="/assets/img/sites.png" alt="Screenshots of websites using SDP, vic.gov.au, police.vic.gov.au, health.vic.gov.au, legislation.vic.gov.au" class="docs-center-img"><!--]--></p><h2 class="rpl-type-h2 docs-h2" id="why-use-ripple" data-v-fff5b905><a href="#why-use-ripple" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Why use Ripple?<!--]--></a></h2><h2 class="rpl-type-h3 docs-h3" id="ripple-solves-the-hard-problems-so-you-dont-have-to" data-v-ea525968><a href="#ripple-solves-the-hard-problems-so-you-dont-have-to" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Ripple solves the hard problems so you don’t have to<!--]--></a></h2><p><!--[-->We spent the past 5 years refining Ripple based on user feedback to ensure it:<!--]--></p><ul><!--[--><li><!--[-->meets the publishing needs of government users<!--]--></li><li><!--[-->makes it easier for citizens to interact with government services.<!--]--></li><!--]--></ul><p><!--[-->Ripple users can be confident their site’s design and development is based on industry standards and best practices for:<!--]--></p><ul><!--[--><li><!--[-->accessibility<!--]--></li><li><!--[-->SEO<!--]--></li><li><!--[-->security<!--]--></li><li><!--[-->performance.<!--]--></li><!--]--></ul><p><!--[-->Users can easily navigate sites regardless of technical ability, location or device.<!--]--></p><p><!--[-->Designers and developers can create consistent digital experiences across Victorian Government sites.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="ripple-gives-you-efficient-and-reusable-digital-resources" data-v-ea525968><a href="#ripple-gives-you-efficient-and-reusable-digital-resources" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Ripple gives you efficient and reusable digital resources<!--]--></a></h2><p><!--[-->Ripple promotes efficiency and reuse by providing reusable styles, components and patterns.<!--]--></p><p><!--[-->It provides a set of standards to manage design at scale, to:<!--]--></p><ul><!--[--><li><!--[-->reduce redundancy<!--]--></li><li><!--[-->create a shared language<!--]--></li><li><!--[-->provide visual consistency.<!--]--></li><!--]--></ul><p><!--[-->Developer contributions can be shared across projects, adding value to all government departments. This results in reduced project development time and expense.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="ripple-is-by-government-for-government" data-v-ea525968><a href="#ripple-is-by-government-for-government" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Ripple is by government, for government<!--]--></a></h2><p><!--[-->The Ripple Design System has been made open-source to foster collaboration across government. By making the system open-source, departments and agencies can help improve the citizen experience across government. Ripple has been developed by government, for government and retains all intellectual property and expertise.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="who-can-use-ripple" data-v-fff5b905><a href="#who-can-use-ripple" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Who can use Ripple?<!--]--></a></h2><p><!--[-->Ripple is open to all departments or agencies that use Victorian Government branding. Visit the <a href="/design-system/about/whos-it-for" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Who&#39;s it for?<!--]--><!--]--><!----><!--]--></a> page for more information.<!--]--></p><p><!--[-->Ripple is a modular system, allowing it to be used separately from our other SDP products, Tide and Bay. Visit the <a href="/design-system/develop/usage" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Usage<!--]--><!--]--><!----><!--]--></a> page for more information.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="how-do-i-find-out-more" data-v-fff5b905><a href="#how-do-i-find-out-more" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->How do I find out more?<!--]--></a></h2><p><!--[-->If you are a Victorian Government department or agency wanting to use Ripple in a Brand Victoria digital product (or a vendor supporting them), please visit <a href="https://www.vic.gov.au/work-sdp" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.vic.gov.au/work-sdp<!--]--><!--]--><!----><!--]--></a> or contact <a href="mailto:digital@dpc.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->digital@dpc.vic.gov.au<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><p><!--[-->To find out more about the Single Digital Presence program, please visit <a href="https://www.vic.gov.au/single-digital-presence" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.vic.gov.au/single-digital-presence<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/1.about/1.what-is-ripple.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/about/what-is-ripple/_payload.json">[{"state":1,"once":640,"_errors":642,"serverRendered":645,"path":7,"prerenderedAt":646},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":305,"$sdd-globals":350,"$sdd-navigation":352},["ShallowRef",4],["ShallowReactive",5],{"/design-system/about/what-is-ripple":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":300,"_id":301,"_source":302,"_file":303,"_extension":304},"/design-system/about/what-is-ripple","about",false,"","What is Ripple?","Ripple is the digital design system of the Victorian government","page",{"type":15,"children":16,"toc":289},"root",[17,25,30,72,88,99,106,113,118,131,136,159,164,169,175,180,185,203,208,214,219,225,238,250,256,277],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22],{"type":23,"value":24},"text","Ripple is a system of reusable styles, components, patterns and tools for building brand Victoria digital products.",{"type":18,"tag":19,"props":26,"children":27},{},[28],{"type":23,"value":29},"Developed by the Single Digital Presence (SDP) team in the Department of Government Services, Ripple:",{"type":18,"tag":31,"props":32,"children":33},"ul",{},[34,62,67],{"type":18,"tag":35,"props":36,"children":37},"li",{},[38,40,46,48,53,55,60],{"type":23,"value":39},"makes it easier for citizens to ",{"type":18,"tag":41,"props":42,"children":43},"strong",{},[44],{"type":23,"value":45},"find",{"type":23,"value":47},", ",{"type":18,"tag":41,"props":49,"children":50},{},[51],{"type":23,"value":52},"understand",{"type":23,"value":54}," and ",{"type":18,"tag":41,"props":56,"children":57},{},[58],{"type":23,"value":59},"use",{"type":23,"value":61}," government information",{"type":18,"tag":35,"props":63,"children":64},{},[65],{"type":23,"value":66},"makes creating Brand Victoria approved content, assets and sites easy",{"type":18,"tag":35,"props":68,"children":69},{},[70],{"type":23,"value":71},"increases delivery speed for digital products and services.",{"type":18,"tag":19,"props":73,"children":74},{},[75,77,86],{"type":23,"value":76},"Over 50 government websites use Ripple, including our main ",{"type":18,"tag":78,"props":79,"children":83},"a",{"href":80,"rel":81},"https://www.vic.gov.au",[82],"nofollow",[84],{"type":23,"value":85},"vic.gov.au",{"type":23,"value":87}," platform. These sites attract millions of views per month.",{"type":18,"tag":19,"props":89,"children":90},{},[91],{"type":18,"tag":92,"props":93,"children":98},"img",{"alt":94,"className":95,"src":97},"Screenshots of websites using SDP, vic.gov.au, police.vic.gov.au, health.vic.gov.au, legislation.vic.gov.au",[96],"docs-center-img","/assets/img/sites.png",[],{"type":18,"tag":100,"props":101,"children":103},"h2",{"id":102},"why-use-ripple",[104],{"type":23,"value":105},"Why use Ripple?",{"type":18,"tag":107,"props":108,"children":110},"h3",{"id":109},"ripple-solves-the-hard-problems-so-you-dont-have-to",[111],{"type":23,"value":112},"Ripple solves the hard problems so you don’t have to",{"type":18,"tag":19,"props":114,"children":115},{},[116],{"type":23,"value":117},"We spent the past 5 years refining Ripple based on user feedback to ensure it:",{"type":18,"tag":31,"props":119,"children":120},{},[121,126],{"type":18,"tag":35,"props":122,"children":123},{},[124],{"type":23,"value":125},"meets the publishing needs of government users",{"type":18,"tag":35,"props":127,"children":128},{},[129],{"type":23,"value":130},"makes it easier for citizens to interact with government services.",{"type":18,"tag":19,"props":132,"children":133},{},[134],{"type":23,"value":135},"Ripple users can be confident their site’s design and development is based on industry standards and best practices for:",{"type":18,"tag":31,"props":137,"children":138},{},[139,144,149,154],{"type":18,"tag":35,"props":140,"children":141},{},[142],{"type":23,"value":143},"accessibility",{"type":18,"tag":35,"props":145,"children":146},{},[147],{"type":23,"value":148},"SEO",{"type":18,"tag":35,"props":150,"children":151},{},[152],{"type":23,"value":153},"security",{"type":18,"tag":35,"props":155,"children":156},{},[157],{"type":23,"value":158},"performance.",{"type":18,"tag":19,"props":160,"children":161},{},[162],{"type":23,"value":163},"Users can easily navigate sites regardless of technical ability, location or device.",{"type":18,"tag":19,"props":165,"children":166},{},[167],{"type":23,"value":168},"Designers and developers can create consistent digital experiences across Victorian Government sites.",{"type":18,"tag":107,"props":170,"children":172},{"id":171},"ripple-gives-you-efficient-and-reusable-digital-resources",[173],{"type":23,"value":174},"Ripple gives you efficient and reusable digital resources",{"type":18,"tag":19,"props":176,"children":177},{},[178],{"type":23,"value":179},"Ripple promotes efficiency and reuse by providing reusable styles, components and patterns.",{"type":18,"tag":19,"props":181,"children":182},{},[183],{"type":23,"value":184},"It provides a set of standards to manage design at scale, to:",{"type":18,"tag":31,"props":186,"children":187},{},[188,193,198],{"type":18,"tag":35,"props":189,"children":190},{},[191],{"type":23,"value":192},"reduce redundancy",{"type":18,"tag":35,"props":194,"children":195},{},[196],{"type":23,"value":197},"create a shared language",{"type":18,"tag":35,"props":199,"children":200},{},[201],{"type":23,"value":202},"provide visual consistency.",{"type":18,"tag":19,"props":204,"children":205},{},[206],{"type":23,"value":207},"Developer contributions can be shared across projects, adding value to all government departments. This results in reduced project development time and expense.",{"type":18,"tag":107,"props":209,"children":211},{"id":210},"ripple-is-by-government-for-government",[212],{"type":23,"value":213},"Ripple is by government, for government",{"type":18,"tag":19,"props":215,"children":216},{},[217],{"type":23,"value":218},"The Ripple Design System has been made open-source to foster collaboration across government. By making the system open-source, departments and agencies can help improve the citizen experience across government. Ripple has been developed by government, for government and retains all intellectual property and expertise.",{"type":18,"tag":100,"props":220,"children":222},{"id":221},"who-can-use-ripple",[223],{"type":23,"value":224},"Who can use Ripple?",{"type":18,"tag":19,"props":226,"children":227},{},[228,230,236],{"type":23,"value":229},"Ripple is open to all departments or agencies that use Victorian Government branding. Visit the ",{"type":18,"tag":78,"props":231,"children":233},{"href":232},"/design-system/about/whos-it-for",[234],{"type":23,"value":235},"Who's it for?",{"type":23,"value":237}," page for more information.",{"type":18,"tag":19,"props":239,"children":240},{},[241,243,249],{"type":23,"value":242},"Ripple is a modular system, allowing it to be used separately from our other SDP products, Tide and Bay. Visit the ",{"type":18,"tag":78,"props":244,"children":246},{"href":245},"/design-system/develop/usage",[247],{"type":23,"value":248},"Usage",{"type":23,"value":237},{"type":18,"tag":100,"props":251,"children":253},{"id":252},"how-do-i-find-out-more",[254],{"type":23,"value":255},"How do I find out more?",{"type":18,"tag":19,"props":257,"children":258},{},[259,261,267,269,275],{"type":23,"value":260},"If you are a Victorian Government department or agency wanting to use Ripple in a Brand Victoria digital product (or a vendor supporting them), please visit ",{"type":18,"tag":78,"props":262,"children":265},{"href":263,"rel":264},"https://www.vic.gov.au/work-sdp",[82],[266],{"type":23,"value":263},{"type":23,"value":268}," or contact ",{"type":18,"tag":78,"props":270,"children":272},{"href":271},"mailto:digital@dpc.vic.gov.au",[273],{"type":23,"value":274},"digital@dpc.vic.gov.au",{"type":23,"value":276},".",{"type":18,"tag":19,"props":278,"children":279},{},[280,282,288],{"type":23,"value":281},"To find out more about the Single Digital Presence program, please visit ",{"type":18,"tag":78,"props":283,"children":286},{"href":284,"rel":285},"https://www.vic.gov.au/single-digital-presence",[82],[287],{"type":23,"value":284},{"type":23,"value":276},{"title":10,"searchDepth":290,"depth":290,"links":291},2,[292,298,299],{"id":102,"depth":290,"text":105,"children":293},[294,296,297],{"id":109,"depth":295,"text":112},3,{"id":171,"depth":295,"text":174},{"id":210,"depth":295,"text":213},{"id":221,"depth":290,"text":224},{"id":252,"depth":290,"text":255},"markdown","content:design-system:1.about:1.what-is-ripple.md","content","design-system/1.about/1.what-is-ripple.md","md",["ShallowRef",306],["ShallowReactive",307],{"/design-system/about/what-is-ripple":308},[309,346],{"_path":310,"_dir":10,"_draft":9,"_partial":9,"_locale":10,"title":311,"description":312,"icon":313,"layout":314,"primaryCTA":315,"secondaryCTA":321,"modulesCTA":327,"quickLink1":331,"quickLink2":334,"quickLink3":337,"framework":341,"_type":300,"_id":344,"_source":302,"_file":345,"_extension":304},"/","Ripple Design System","Ripple is the design system for Victorian government digital products","carbon:home","home",{"title":316,"description":317,"image":318,"url":320},"For Designers","Information for designers using Ripple to create brand Victoria compliant digital experiences.",{"src":319},"/assets/img/for-designers.png","/design-system/design/getting-started",{"title":322,"description":323,"image":324,"url":326},"For Developers","How to get started implementing Ripple UI components in digital products.",{"src":325},"/assets/img/for-developers.png","/design-system/develop/getting-started",{"title":328,"description":329,"url":330},"Modules","Paragraph Default. Cards contain actionable content about a single topic. These are usually grouped as similar style sets.","/framework",{"title":332,"description":333,"url":7},"About Ripple","Ripple is a system of reusable styles, components, patterns and tools for creating Victorian government digital experiences.",{"title":335,"description":336,"url":232},"Who should use it","Ripple is built by government for government to deliver services Victorians trust and rely on.",{"title":338,"description":339,"url":340},"Design principles","The guiding principles that are the foundation of the Ripple Design System.","/design-system/design/our-design-principles",{"title":342,"description":343,"url":330},"Ripple framework","Ripple framework contains the tools for building SDP sites using Ripple design system components.","content:1.index.md","1.index.md",{"_path":232,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":235,"description":347,"layout":13,"_type":300,"_id":348,"_source":302,"_file":349,"_extension":304},"Built by government, for government.","content:design-system:1.about:2.whos-it-for.md","design-system/1.about/2.whos-it-for.md",["ShallowRef",351],{},[353,354,593],{"title":311,"_path":310,"icon":313,"layout":314},{"title":355,"_path":356,"children":357},"Design System","/design-system",[358,370,384,411,445],{"title":359,"_path":360,"children":361},"About","/design-system/about",[362,363,364,367],{"title":11,"_path":7,"layout":13},{"title":235,"_path":232,"layout":13},{"title":365,"_path":366,"layout":13},"Support","/design-system/about/getting-support",{"title":368,"_path":369,"layout":13},"Contributing","/design-system/about/contributing",{"title":371,"_path":372,"children":373},"Design","/design-system/design",[374,376,378,381],{"title":375,"_path":320,"layout":13},"Getting started",{"title":377,"_path":340,"layout":13},"Our design principles",{"title":379,"_path":380,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":382,"_path":383,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":385,"_path":386,"children":387},"Develop","/design-system/develop",[388,389,391,394],{"title":375,"_path":326,"layout":13},{"title":368,"_path":390,"layout":13},"/design-system/develop/contributing",{"title":392,"_path":393,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":248,"_path":245,"children":395,"layout":13},[396,399,402,405,408],{"title":397,"_path":398,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":400,"_path":401,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":403,"_path":404,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":406,"_path":407,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":409,"_path":410,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":412,"_path":413,"children":414},"Styles","/design-system/styles",[415,418,421,424,427,430,433,436,439,442],{"title":416,"_path":417,"layout":13},"Colour","/design-system/styles/colour",{"title":419,"_path":420,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":422,"_path":423,"layout":13},"Grid","/design-system/styles/grid",{"title":425,"_path":426,"layout":13},"Icons","/design-system/styles/icons",{"title":428,"_path":429,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":431,"_path":432,"layout":13},"Layout","/design-system/styles/layout",{"title":434,"_path":435,"layout":13},"Logo","/design-system/styles/logo",{"title":437,"_path":438,"layout":13},"Motion","/design-system/styles/motion",{"title":440,"_path":441,"layout":13},"Spacing","/design-system/styles/spacing",{"title":443,"_path":444,"layout":13},"Typography","/design-system/styles/typography",{"title":446,"_path":447,"children":448},"Components","/design-system/components",[449,452,455,458,461,464,467,470,473,476,479,482,485,488,491,494,497,500,503,506,509,512,515,518,521,524,527,530,533,536,539,542,545,548,551,554,557,560,563,566,569,572,575,578,581,584,587,590],{"title":450,"_path":451,"layout":13},"Accordion","/design-system/components/accordion",{"title":453,"_path":454,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":456,"_path":457,"layout":13},"Alert","/design-system/components/alert",{"title":459,"_path":460,"layout":13},"Block quote","/design-system/components/block-quote",{"title":462,"_path":463,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":465,"_path":466,"layout":13},"Button","/design-system/components/button",{"title":468,"_path":469,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":471,"_path":472,"layout":13},"Callout","/design-system/components/callout",{"title":474,"_path":475,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":477,"_path":478,"layout":13},"Card","/design-system/components/card",{"title":480,"_path":481,"layout":13},"Carousel","/design-system/components/carousel",{"title":483,"_path":484,"layout":13},"Category grid","/design-system/components/category-grid",{"title":486,"_path":487,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":489,"_path":490,"layout":13},"Chip","/design-system/components/chip",{"title":492,"_path":493,"layout":13},"Contact us","/design-system/components/contact-us",{"title":495,"_path":496,"layout":13},"Date input","/design-system/components/date-input",{"title":498,"_path":499,"layout":13},"Detail list","/design-system/components/detail-list",{"title":501,"_path":502,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":504,"_path":505,"layout":13},"File","/design-system/components/file",{"title":507,"_path":508,"layout":13},"Footer","/design-system/components/footer",{"title":510,"_path":511,"layout":13},"Form","/design-system/components/form",{"title":513,"_path":514,"layout":13},"Form alert","/design-system/components/form-alert",{"title":516,"_path":517,"layout":13},"Header","/design-system/components/header",{"title":519,"_path":520,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":522,"_path":523,"layout":13},"Input field","/design-system/components/input-field",{"title":525,"_path":526,"layout":13},"Key dates","/design-system/components/key-dates",{"title":528,"_path":529,"layout":13},"Media","/design-system/components/media",{"title":531,"_path":532,"layout":13},"Media embed","/design-system/components/media-embed",{"title":534,"_path":535,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":537,"_path":538,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":540,"_path":541,"layout":13},"Option button","/design-system/components/option-button",{"title":543,"_path":544,"layout":13},"Page action","/design-system/components/page-action",{"title":546,"_path":547,"layout":13},"Pagination","/design-system/components/pagination",{"title":549,"_path":550,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":552,"_path":553,"layout":13},"Profile","/design-system/components/profile",{"title":555,"_path":556,"layout":13},"Radio button","/design-system/components/radio-button",{"title":558,"_path":559,"layout":13},"Related links","/design-system/components/related-links",{"title":561,"_path":562,"layout":13},"Results listing","/design-system/components/results-listing",{"title":564,"_path":565,"layout":13},"Search bar","/design-system/components/search-bar",{"title":567,"_path":568,"layout":13},"Skip link","/design-system/components/skip-link",{"title":570,"_path":571,"layout":13},"Social share","/design-system/components/social-share",{"title":573,"_path":574,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":576,"_path":577,"layout":13},"Table","/design-system/components/table",{"title":579,"_path":580,"layout":13},"Tabs","/design-system/components/tabs",{"title":582,"_path":583,"layout":13},"Tag","/design-system/components/tag",{"title":585,"_path":586,"layout":13},"Text area","/design-system/components/text-area",{"title":588,"_path":589,"layout":13},"Timeline","/design-system/components/timeline",{"title":591,"_path":592,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":594,"_path":330,"children":595,"layout":13},"Ripple Framework",[596,597,615,637],{"title":594,"_path":330,"layout":13},{"title":598,"_path":599,"children":600},"Key Concepts","/framework/key-concepts",[601,603,606,609,612],{"title":403,"_path":602,"layout":13},"/framework/key-concepts/nuxt",{"title":604,"_path":605,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":607,"_path":608,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":610,"_path":611,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":613,"_path":614,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":616,"_path":617,"children":618},"Guides","/framework/guides",[619,622,625,628,631,634],{"title":620,"_path":621,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":623,"_path":624,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":626,"_path":627,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":629,"_path":630,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":632,"_path":633,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":635,"_path":636,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":638,"_path":639,"layout":13},"Core modules","/framework/core-modules",["Reactive",641],["Set"],["Reactive",643],{"module-navigation":644},null,true,1714695649094]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/about/whos-it-for/_payload.json b/design-system/about/whos-it-for/_payload.json
index 1ff1235df3..e2bf23c835 100644
--- a/design-system/about/whos-it-for/_payload.json
+++ b/design-system/about/whos-it-for/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,22,38,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",true,[9,13,16,19],{"id":10,"text":11,"url":10,"active":12,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",false,{"id":14,"text":15,"url":14,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":17,"text":18,"url":17,"active":12,"items":-1},"/design-system/about/getting-support","Support",{"id":20,"text":21,"url":20,"active":12,"items":-1},"/design-system/about/contributing","Contributing",{"id":23,"text":24,"url":23,"active":12,"items":25},"/design-system/design","Design",[26,29,32,35],{"id":27,"text":28,"url":27,"active":12,"items":-1},"/design-system/design/getting-started","Getting started",{"id":30,"text":31,"url":30,"active":12,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":33,"text":34,"url":33,"active":12,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":36,"text":37,"url":36,"active":12,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":39,"text":40,"url":39,"active":12,"items":41},"/design-system/develop","Develop",[42,44,46,49],{"id":43,"text":28,"url":43,"active":12,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":21,"url":45,"active":12,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":12,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":12,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":12,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":12,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":12,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":12,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":12,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":12,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":12,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":12,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":12,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":12,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":12,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":12,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":12,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":12,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":12,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":12,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":12,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":12,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":12,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":12,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":12,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":12,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":12,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":12,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":12,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":12,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":12,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":12,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":12,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":12,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":12,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":12,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":12,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":12,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":12,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":12,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":12,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":12,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":12,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":12,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":12,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":12,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":12,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":12,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":12,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":12,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":12,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":12,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":12,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":12,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":12,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":12,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":12,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":12,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":12,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":12,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":12,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":12,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":12,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":12,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":12,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":12,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":12,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":12,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":12,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695150850]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,22,38,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",true,[9,13,16,19],{"id":10,"text":11,"url":10,"active":12,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",false,{"id":14,"text":15,"url":14,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":17,"text":18,"url":17,"active":12,"items":-1},"/design-system/about/getting-support","Support",{"id":20,"text":21,"url":20,"active":12,"items":-1},"/design-system/about/contributing","Contributing",{"id":23,"text":24,"url":23,"active":12,"items":25},"/design-system/design","Design",[26,29,32,35],{"id":27,"text":28,"url":27,"active":12,"items":-1},"/design-system/design/getting-started","Getting started",{"id":30,"text":31,"url":30,"active":12,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":33,"text":34,"url":33,"active":12,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":36,"text":37,"url":36,"active":12,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":39,"text":40,"url":39,"active":12,"items":41},"/design-system/develop","Develop",[42,44,46,49],{"id":43,"text":28,"url":43,"active":12,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":21,"url":45,"active":12,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":12,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":12,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":12,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":12,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":12,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":12,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":12,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":12,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":12,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":12,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":12,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":12,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":12,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":12,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":12,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":12,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":12,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":12,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":12,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":12,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":12,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":12,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":12,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":12,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":12,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":12,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":12,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":12,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":12,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":12,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":12,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":12,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":12,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":12,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":12,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":12,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":12,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":12,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":12,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":12,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":12,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":12,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":12,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":12,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":12,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":12,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":12,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":12,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":12,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":12,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":12,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":12,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":12,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":12,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":12,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":12,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":12,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":12,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":12,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":12,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":12,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":12,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":12,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":12,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":12,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":12,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":12,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695649100]
\ No newline at end of file
diff --git a/design-system/about/whos-it-for/index.html b/design-system/about/whos-it-for/index.html
index 14ca0d22d5..995cde37be 100644
--- a/design-system/about/whos-it-for/index.html
+++ b/design-system/about/whos-it-for/index.html
@@ -22,60 +22,60 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.F9NVvvm4.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.lp_k9Hpd.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.GmB4B_NE.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.Czpq-HHw.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -87,8 +87,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Who&#39;s it for?</h1><p class="rpl-type-p-large" data-v-3163c6df>Built by government, for government.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="who-can-use-ripple" data-v-fff5b905><a href="#who-can-use-ripple" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Who can use Ripple?<!--]--></a></h2><p><!--[-->Ripple is available to all departments and agencies that use Victorian Government branding.<!--]--></p><ul><!--[--><li><!--[--><strong><!--[-->Designers<!--]--></strong> can easily and quickly create wireframes, high-fidelity designs and prototypes.<!--]--></li><li><!--[--><strong><!--[-->Developers<!--]--></strong> can access technical specifications to create pixel-perfect code.<!--]--></li><li><!--[--><strong><!--[-->Content creators<!--]--></strong> can design page concepts, knowing their layouts will accurately reflect the finished product.<!--]--></li><li><!--[--><strong><!--[-->Product owners<!--]--></strong> and stakeholders can review designs and provide feedback.<!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="what-should-i-use-ripple-for" data-v-fff5b905><a href="#what-should-i-use-ripple-for" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->What should I use Ripple for?<!--]--></a></h2><p><!--[-->Ripple is designed to make websites that give Victorian citizens official information about their government. It is mainly used by Victorian Government departments and agencies to build websites using the <a href="https://www.vic.gov.au/single-digital-presence" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Single Digital Presence (SDP)<!--]--><!--]--><!----><!--]--></a> platform.<!--]--></p><p><!--[-->Ripple makes it easy to share government information with all Victorians in a clear, concise and accessible way.<!--]--></p><p><!--[-->Since it is only used to build government websites, Ripple has been designed to support Brand Victoria digital products. This opinionated design means Ripple automatically guides you to create a digital experience for citizens that is in line with Brand Victoria’s look, feel and vision.<!--]--></p><p><!--[-->It also means Ripple is not a general purpose design system for use outside of Brand Victoria.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[-->Ripple is for Victorian Government branded products only. Only use it to create communications that are approved to use the Victorian Government brand.<!--]--></p><!--]--></blockquote><h2 class="rpl-type-h2 docs-h2" id="how-do-i-use-ripple" data-v-fff5b905><a href="#how-do-i-use-ripple" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->How do I use Ripple?<!--]--></a></h2><p><!--[-->Ripple is a modular design system. This means Ripple lets you easily change and expand your website’s layout and content.<!--]--></p><p><!--[-->It also means you can use different parts of the Ripple Design System, like components or styles, separately. Departments that don’t use the SDP platform can still use Ripple in their own digital products. You can do this by:<!--]--></p><ul><!--[--><li><!--[-->building your own components<!--]--></li><li><!--[-->referencing the Ripple styles<!--]--></li><li><!--[-->importing the Ripple components.<!--]--></li><!--]--></ul><p><!--[-->Visit the <a href="/design-system/develop/usage" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Usage<!--]--><!--]--><!----><!--]--></a> page for instructions.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/1.about/2.whos-it-for.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/about/whos-it-for/_payload.json">[{"state":1,"once":494,"_errors":496,"serverRendered":499,"path":7,"prerenderedAt":500},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":182,"$sdd-globals":198,"$sdd-navigation":200},["ShallowRef",4],["ShallowReactive",5],{"/design-system/about/whos-it-for":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":177,"_id":178,"_source":179,"_file":180,"_extension":181},"/design-system/about/whos-it-for","about",false,"","Who's it for?","Built by government, for government.","page",{"type":15,"children":16,"toc":171},"root",[17,26,32,78,84,100,105,110,115,124,130,135,140,158],{"type":18,"tag":19,"props":20,"children":22},"element","h2",{"id":21},"who-can-use-ripple",[23],{"type":24,"value":25},"text","Who can use Ripple?",{"type":18,"tag":27,"props":28,"children":29},"p",{},[30],{"type":24,"value":31},"Ripple is available to all departments and agencies that use Victorian Government branding.",{"type":18,"tag":33,"props":34,"children":35},"ul",{},[36,48,58,68],{"type":18,"tag":37,"props":38,"children":39},"li",{},[40,46],{"type":18,"tag":41,"props":42,"children":43},"strong",{},[44],{"type":24,"value":45},"Designers",{"type":24,"value":47}," can easily and quickly create wireframes, high-fidelity designs and prototypes.",{"type":18,"tag":37,"props":49,"children":50},{},[51,56],{"type":18,"tag":41,"props":52,"children":53},{},[54],{"type":24,"value":55},"Developers",{"type":24,"value":57}," can access technical specifications to create pixel-perfect code.",{"type":18,"tag":37,"props":59,"children":60},{},[61,66],{"type":18,"tag":41,"props":62,"children":63},{},[64],{"type":24,"value":65},"Content creators",{"type":24,"value":67}," can design page concepts, knowing their layouts will accurately reflect the finished product.",{"type":18,"tag":37,"props":69,"children":70},{},[71,76],{"type":18,"tag":41,"props":72,"children":73},{},[74],{"type":24,"value":75},"Product owners",{"type":24,"value":77}," and stakeholders can review designs and provide feedback.",{"type":18,"tag":19,"props":79,"children":81},{"id":80},"what-should-i-use-ripple-for",[82],{"type":24,"value":83},"What should I use Ripple for?",{"type":18,"tag":27,"props":85,"children":86},{},[87,89,98],{"type":24,"value":88},"Ripple is designed to make websites that give Victorian citizens official information about their government. It is mainly used by Victorian Government departments and agencies to build websites using the ",{"type":18,"tag":90,"props":91,"children":95},"a",{"href":92,"rel":93},"https://www.vic.gov.au/single-digital-presence",[94],"nofollow",[96],{"type":24,"value":97},"Single Digital Presence (SDP)",{"type":24,"value":99}," platform.",{"type":18,"tag":27,"props":101,"children":102},{},[103],{"type":24,"value":104},"Ripple makes it easy to share government information with all Victorians in a clear, concise and accessible way.",{"type":18,"tag":27,"props":106,"children":107},{},[108],{"type":24,"value":109},"Since it is only used to build government websites, Ripple has been designed to support Brand Victoria digital products. This opinionated design means Ripple automatically guides you to create a digital experience for citizens that is in line with Brand Victoria’s look, feel and vision.",{"type":18,"tag":27,"props":111,"children":112},{},[113],{"type":24,"value":114},"It also means Ripple is not a general purpose design system for use outside of Brand Victoria.",{"type":18,"tag":116,"props":117,"children":118},"blockquote",{},[119],{"type":18,"tag":27,"props":120,"children":121},{},[122],{"type":24,"value":123},"Ripple is for Victorian Government branded products only. Only use it to create communications that are approved to use the Victorian Government brand.",{"type":18,"tag":19,"props":125,"children":127},{"id":126},"how-do-i-use-ripple",[128],{"type":24,"value":129},"How do I use Ripple?",{"type":18,"tag":27,"props":131,"children":132},{},[133],{"type":24,"value":134},"Ripple is a modular design system. This means Ripple lets you easily change and expand your website’s layout and content.",{"type":18,"tag":27,"props":136,"children":137},{},[138],{"type":24,"value":139},"It also means you can use different parts of the Ripple Design System, like components or styles, separately. Departments that don’t use the SDP platform can still use Ripple in their own digital products. You can do this by:",{"type":18,"tag":33,"props":141,"children":142},{},[143,148,153],{"type":18,"tag":37,"props":144,"children":145},{},[146],{"type":24,"value":147},"building your own components",{"type":18,"tag":37,"props":149,"children":150},{},[151],{"type":24,"value":152},"referencing the Ripple styles",{"type":18,"tag":37,"props":154,"children":155},{},[156],{"type":24,"value":157},"importing the Ripple components.",{"type":18,"tag":27,"props":159,"children":160},{},[161,163,169],{"type":24,"value":162},"Visit the ",{"type":18,"tag":90,"props":164,"children":166},{"href":165},"/design-system/develop/usage",[167],{"type":24,"value":168},"Usage",{"type":24,"value":170}," page for instructions.",{"title":10,"searchDepth":172,"depth":172,"links":173},2,[174,175,176],{"id":21,"depth":172,"text":25},{"id":80,"depth":172,"text":83},{"id":126,"depth":172,"text":129},"markdown","content:design-system:1.about:2.whos-it-for.md","content","design-system/1.about/2.whos-it-for.md","md",["ShallowRef",183],["ShallowReactive",184],{"/design-system/about/whos-it-for":185},[186,192],{"_path":187,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":188,"description":189,"layout":13,"_type":177,"_id":190,"_source":179,"_file":191,"_extension":181},"/design-system/about/what-is-ripple","What is Ripple?","Ripple is the digital design system of the Victorian government","content:design-system:1.about:1.what-is-ripple.md","design-system/1.about/1.what-is-ripple.md",{"_path":193,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":194,"description":195,"layout":13,"_type":177,"_id":196,"_source":179,"_file":197,"_extension":181},"/design-system/about/getting-support","Support","How to get help","content:design-system:1.about:3.getting-support.md","design-system/1.about/3.getting-support.md",["ShallowRef",199],{},[201,206,446],{"title":202,"_path":203,"icon":204,"layout":205},"Ripple Design System","/","carbon:home","home",{"title":207,"_path":208,"children":209},"Design System","/design-system",[210,220,236,264,298],{"title":211,"_path":212,"children":213},"About","/design-system/about",[214,215,216,217],{"title":188,"_path":187,"layout":13},{"title":11,"_path":7,"layout":13},{"title":194,"_path":193,"layout":13},{"title":218,"_path":219,"layout":13},"Contributing","/design-system/about/contributing",{"title":221,"_path":222,"children":223},"Design","/design-system/design",[224,227,230,233],{"title":225,"_path":226,"layout":13},"Getting started","/design-system/design/getting-started",{"title":228,"_path":229,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":231,"_path":232,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":234,"_path":235,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":237,"_path":238,"children":239},"Develop","/design-system/develop",[240,242,244,247],{"title":225,"_path":241,"layout":13},"/design-system/develop/getting-started",{"title":218,"_path":243,"layout":13},"/design-system/develop/contributing",{"title":245,"_path":246,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":168,"_path":165,"children":248,"layout":13},[249,252,255,258,261],{"title":250,"_path":251,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":253,"_path":254,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":256,"_path":257,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":259,"_path":260,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":262,"_path":263,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":265,"_path":266,"children":267},"Styles","/design-system/styles",[268,271,274,277,280,283,286,289,292,295],{"title":269,"_path":270,"layout":13},"Colour","/design-system/styles/colour",{"title":272,"_path":273,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":275,"_path":276,"layout":13},"Grid","/design-system/styles/grid",{"title":278,"_path":279,"layout":13},"Icons","/design-system/styles/icons",{"title":281,"_path":282,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":284,"_path":285,"layout":13},"Layout","/design-system/styles/layout",{"title":287,"_path":288,"layout":13},"Logo","/design-system/styles/logo",{"title":290,"_path":291,"layout":13},"Motion","/design-system/styles/motion",{"title":293,"_path":294,"layout":13},"Spacing","/design-system/styles/spacing",{"title":296,"_path":297,"layout":13},"Typography","/design-system/styles/typography",{"title":299,"_path":300,"children":301},"Components","/design-system/components",[302,305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440,443],{"title":303,"_path":304,"layout":13},"Accordion","/design-system/components/accordion",{"title":306,"_path":307,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":309,"_path":310,"layout":13},"Alert","/design-system/components/alert",{"title":312,"_path":313,"layout":13},"Block quote","/design-system/components/block-quote",{"title":315,"_path":316,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":318,"_path":319,"layout":13},"Button","/design-system/components/button",{"title":321,"_path":322,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":324,"_path":325,"layout":13},"Callout","/design-system/components/callout",{"title":327,"_path":328,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":330,"_path":331,"layout":13},"Card","/design-system/components/card",{"title":333,"_path":334,"layout":13},"Carousel","/design-system/components/carousel",{"title":336,"_path":337,"layout":13},"Category grid","/design-system/components/category-grid",{"title":339,"_path":340,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":342,"_path":343,"layout":13},"Chip","/design-system/components/chip",{"title":345,"_path":346,"layout":13},"Contact us","/design-system/components/contact-us",{"title":348,"_path":349,"layout":13},"Date input","/design-system/components/date-input",{"title":351,"_path":352,"layout":13},"Detail list","/design-system/components/detail-list",{"title":354,"_path":355,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":357,"_path":358,"layout":13},"File","/design-system/components/file",{"title":360,"_path":361,"layout":13},"Footer","/design-system/components/footer",{"title":363,"_path":364,"layout":13},"Form","/design-system/components/form",{"title":366,"_path":367,"layout":13},"Form alert","/design-system/components/form-alert",{"title":369,"_path":370,"layout":13},"Header","/design-system/components/header",{"title":372,"_path":373,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":375,"_path":376,"layout":13},"Input field","/design-system/components/input-field",{"title":378,"_path":379,"layout":13},"Key dates","/design-system/components/key-dates",{"title":381,"_path":382,"layout":13},"Media","/design-system/components/media",{"title":384,"_path":385,"layout":13},"Media embed","/design-system/components/media-embed",{"title":387,"_path":388,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":390,"_path":391,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":393,"_path":394,"layout":13},"Option button","/design-system/components/option-button",{"title":396,"_path":397,"layout":13},"Page action","/design-system/components/page-action",{"title":399,"_path":400,"layout":13},"Pagination","/design-system/components/pagination",{"title":402,"_path":403,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":405,"_path":406,"layout":13},"Profile","/design-system/components/profile",{"title":408,"_path":409,"layout":13},"Radio button","/design-system/components/radio-button",{"title":411,"_path":412,"layout":13},"Related links","/design-system/components/related-links",{"title":414,"_path":415,"layout":13},"Results listing","/design-system/components/results-listing",{"title":417,"_path":418,"layout":13},"Search bar","/design-system/components/search-bar",{"title":420,"_path":421,"layout":13},"Skip link","/design-system/components/skip-link",{"title":423,"_path":424,"layout":13},"Social share","/design-system/components/social-share",{"title":426,"_path":427,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":429,"_path":430,"layout":13},"Table","/design-system/components/table",{"title":432,"_path":433,"layout":13},"Tabs","/design-system/components/tabs",{"title":435,"_path":436,"layout":13},"Tag","/design-system/components/tag",{"title":438,"_path":439,"layout":13},"Text area","/design-system/components/text-area",{"title":441,"_path":442,"layout":13},"Timeline","/design-system/components/timeline",{"title":444,"_path":445,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":447,"_path":448,"children":449,"layout":13},"Ripple Framework","/framework",[450,451,469,491],{"title":447,"_path":448,"layout":13},{"title":452,"_path":453,"children":454},"Key Concepts","/framework/key-concepts",[455,457,460,463,466],{"title":256,"_path":456,"layout":13},"/framework/key-concepts/nuxt",{"title":458,"_path":459,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":461,"_path":462,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":464,"_path":465,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":467,"_path":468,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":470,"_path":471,"children":472},"Guides","/framework/guides",[473,476,479,482,485,488],{"title":474,"_path":475,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":477,"_path":478,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":480,"_path":481,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":483,"_path":484,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":486,"_path":487,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":489,"_path":490,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":492,"_path":493,"layout":13},"Core modules","/framework/core-modules",["Reactive",495],["Set"],["Reactive",497],{"module-navigation":498},null,true,1714695150850]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Who&#39;s it for?</h1><p class="rpl-type-p-large" data-v-3163c6df>Built by government, for government.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="who-can-use-ripple" data-v-fff5b905><a href="#who-can-use-ripple" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Who can use Ripple?<!--]--></a></h2><p><!--[-->Ripple is available to all departments and agencies that use Victorian Government branding.<!--]--></p><ul><!--[--><li><!--[--><strong><!--[-->Designers<!--]--></strong> can easily and quickly create wireframes, high-fidelity designs and prototypes.<!--]--></li><li><!--[--><strong><!--[-->Developers<!--]--></strong> can access technical specifications to create pixel-perfect code.<!--]--></li><li><!--[--><strong><!--[-->Content creators<!--]--></strong> can design page concepts, knowing their layouts will accurately reflect the finished product.<!--]--></li><li><!--[--><strong><!--[-->Product owners<!--]--></strong> and stakeholders can review designs and provide feedback.<!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="what-should-i-use-ripple-for" data-v-fff5b905><a href="#what-should-i-use-ripple-for" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->What should I use Ripple for?<!--]--></a></h2><p><!--[-->Ripple is designed to make websites that give Victorian citizens official information about their government. It is mainly used by Victorian Government departments and agencies to build websites using the <a href="https://www.vic.gov.au/single-digital-presence" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Single Digital Presence (SDP)<!--]--><!--]--><!----><!--]--></a> platform.<!--]--></p><p><!--[-->Ripple makes it easy to share government information with all Victorians in a clear, concise and accessible way.<!--]--></p><p><!--[-->Since it is only used to build government websites, Ripple has been designed to support Brand Victoria digital products. This opinionated design means Ripple automatically guides you to create a digital experience for citizens that is in line with Brand Victoria’s look, feel and vision.<!--]--></p><p><!--[-->It also means Ripple is not a general purpose design system for use outside of Brand Victoria.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[-->Ripple is for Victorian Government branded products only. Only use it to create communications that are approved to use the Victorian Government brand.<!--]--></p><!--]--></blockquote><h2 class="rpl-type-h2 docs-h2" id="how-do-i-use-ripple" data-v-fff5b905><a href="#how-do-i-use-ripple" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->How do I use Ripple?<!--]--></a></h2><p><!--[-->Ripple is a modular design system. This means Ripple lets you easily change and expand your website’s layout and content.<!--]--></p><p><!--[-->It also means you can use different parts of the Ripple Design System, like components or styles, separately. Departments that don’t use the SDP platform can still use Ripple in their own digital products. You can do this by:<!--]--></p><ul><!--[--><li><!--[-->building your own components<!--]--></li><li><!--[-->referencing the Ripple styles<!--]--></li><li><!--[-->importing the Ripple components.<!--]--></li><!--]--></ul><p><!--[-->Visit the <a href="/design-system/develop/usage" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Usage<!--]--><!--]--><!----><!--]--></a> page for instructions.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/1.about/2.whos-it-for.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/about/whos-it-for/_payload.json">[{"state":1,"once":494,"_errors":496,"serverRendered":499,"path":7,"prerenderedAt":500},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":182,"$sdd-globals":198,"$sdd-navigation":200},["ShallowRef",4],["ShallowReactive",5],{"/design-system/about/whos-it-for":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":177,"_id":178,"_source":179,"_file":180,"_extension":181},"/design-system/about/whos-it-for","about",false,"","Who's it for?","Built by government, for government.","page",{"type":15,"children":16,"toc":171},"root",[17,26,32,78,84,100,105,110,115,124,130,135,140,158],{"type":18,"tag":19,"props":20,"children":22},"element","h2",{"id":21},"who-can-use-ripple",[23],{"type":24,"value":25},"text","Who can use Ripple?",{"type":18,"tag":27,"props":28,"children":29},"p",{},[30],{"type":24,"value":31},"Ripple is available to all departments and agencies that use Victorian Government branding.",{"type":18,"tag":33,"props":34,"children":35},"ul",{},[36,48,58,68],{"type":18,"tag":37,"props":38,"children":39},"li",{},[40,46],{"type":18,"tag":41,"props":42,"children":43},"strong",{},[44],{"type":24,"value":45},"Designers",{"type":24,"value":47}," can easily and quickly create wireframes, high-fidelity designs and prototypes.",{"type":18,"tag":37,"props":49,"children":50},{},[51,56],{"type":18,"tag":41,"props":52,"children":53},{},[54],{"type":24,"value":55},"Developers",{"type":24,"value":57}," can access technical specifications to create pixel-perfect code.",{"type":18,"tag":37,"props":59,"children":60},{},[61,66],{"type":18,"tag":41,"props":62,"children":63},{},[64],{"type":24,"value":65},"Content creators",{"type":24,"value":67}," can design page concepts, knowing their layouts will accurately reflect the finished product.",{"type":18,"tag":37,"props":69,"children":70},{},[71,76],{"type":18,"tag":41,"props":72,"children":73},{},[74],{"type":24,"value":75},"Product owners",{"type":24,"value":77}," and stakeholders can review designs and provide feedback.",{"type":18,"tag":19,"props":79,"children":81},{"id":80},"what-should-i-use-ripple-for",[82],{"type":24,"value":83},"What should I use Ripple for?",{"type":18,"tag":27,"props":85,"children":86},{},[87,89,98],{"type":24,"value":88},"Ripple is designed to make websites that give Victorian citizens official information about their government. It is mainly used by Victorian Government departments and agencies to build websites using the ",{"type":18,"tag":90,"props":91,"children":95},"a",{"href":92,"rel":93},"https://www.vic.gov.au/single-digital-presence",[94],"nofollow",[96],{"type":24,"value":97},"Single Digital Presence (SDP)",{"type":24,"value":99}," platform.",{"type":18,"tag":27,"props":101,"children":102},{},[103],{"type":24,"value":104},"Ripple makes it easy to share government information with all Victorians in a clear, concise and accessible way.",{"type":18,"tag":27,"props":106,"children":107},{},[108],{"type":24,"value":109},"Since it is only used to build government websites, Ripple has been designed to support Brand Victoria digital products. This opinionated design means Ripple automatically guides you to create a digital experience for citizens that is in line with Brand Victoria’s look, feel and vision.",{"type":18,"tag":27,"props":111,"children":112},{},[113],{"type":24,"value":114},"It also means Ripple is not a general purpose design system for use outside of Brand Victoria.",{"type":18,"tag":116,"props":117,"children":118},"blockquote",{},[119],{"type":18,"tag":27,"props":120,"children":121},{},[122],{"type":24,"value":123},"Ripple is for Victorian Government branded products only. Only use it to create communications that are approved to use the Victorian Government brand.",{"type":18,"tag":19,"props":125,"children":127},{"id":126},"how-do-i-use-ripple",[128],{"type":24,"value":129},"How do I use Ripple?",{"type":18,"tag":27,"props":131,"children":132},{},[133],{"type":24,"value":134},"Ripple is a modular design system. This means Ripple lets you easily change and expand your website’s layout and content.",{"type":18,"tag":27,"props":136,"children":137},{},[138],{"type":24,"value":139},"It also means you can use different parts of the Ripple Design System, like components or styles, separately. Departments that don’t use the SDP platform can still use Ripple in their own digital products. You can do this by:",{"type":18,"tag":33,"props":141,"children":142},{},[143,148,153],{"type":18,"tag":37,"props":144,"children":145},{},[146],{"type":24,"value":147},"building your own components",{"type":18,"tag":37,"props":149,"children":150},{},[151],{"type":24,"value":152},"referencing the Ripple styles",{"type":18,"tag":37,"props":154,"children":155},{},[156],{"type":24,"value":157},"importing the Ripple components.",{"type":18,"tag":27,"props":159,"children":160},{},[161,163,169],{"type":24,"value":162},"Visit the ",{"type":18,"tag":90,"props":164,"children":166},{"href":165},"/design-system/develop/usage",[167],{"type":24,"value":168},"Usage",{"type":24,"value":170}," page for instructions.",{"title":10,"searchDepth":172,"depth":172,"links":173},2,[174,175,176],{"id":21,"depth":172,"text":25},{"id":80,"depth":172,"text":83},{"id":126,"depth":172,"text":129},"markdown","content:design-system:1.about:2.whos-it-for.md","content","design-system/1.about/2.whos-it-for.md","md",["ShallowRef",183],["ShallowReactive",184],{"/design-system/about/whos-it-for":185},[186,192],{"_path":187,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":188,"description":189,"layout":13,"_type":177,"_id":190,"_source":179,"_file":191,"_extension":181},"/design-system/about/what-is-ripple","What is Ripple?","Ripple is the digital design system of the Victorian government","content:design-system:1.about:1.what-is-ripple.md","design-system/1.about/1.what-is-ripple.md",{"_path":193,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":194,"description":195,"layout":13,"_type":177,"_id":196,"_source":179,"_file":197,"_extension":181},"/design-system/about/getting-support","Support","How to get help","content:design-system:1.about:3.getting-support.md","design-system/1.about/3.getting-support.md",["ShallowRef",199],{},[201,206,446],{"title":202,"_path":203,"icon":204,"layout":205},"Ripple Design System","/","carbon:home","home",{"title":207,"_path":208,"children":209},"Design System","/design-system",[210,220,236,264,298],{"title":211,"_path":212,"children":213},"About","/design-system/about",[214,215,216,217],{"title":188,"_path":187,"layout":13},{"title":11,"_path":7,"layout":13},{"title":194,"_path":193,"layout":13},{"title":218,"_path":219,"layout":13},"Contributing","/design-system/about/contributing",{"title":221,"_path":222,"children":223},"Design","/design-system/design",[224,227,230,233],{"title":225,"_path":226,"layout":13},"Getting started","/design-system/design/getting-started",{"title":228,"_path":229,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":231,"_path":232,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":234,"_path":235,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":237,"_path":238,"children":239},"Develop","/design-system/develop",[240,242,244,247],{"title":225,"_path":241,"layout":13},"/design-system/develop/getting-started",{"title":218,"_path":243,"layout":13},"/design-system/develop/contributing",{"title":245,"_path":246,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":168,"_path":165,"children":248,"layout":13},[249,252,255,258,261],{"title":250,"_path":251,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":253,"_path":254,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":256,"_path":257,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":259,"_path":260,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":262,"_path":263,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":265,"_path":266,"children":267},"Styles","/design-system/styles",[268,271,274,277,280,283,286,289,292,295],{"title":269,"_path":270,"layout":13},"Colour","/design-system/styles/colour",{"title":272,"_path":273,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":275,"_path":276,"layout":13},"Grid","/design-system/styles/grid",{"title":278,"_path":279,"layout":13},"Icons","/design-system/styles/icons",{"title":281,"_path":282,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":284,"_path":285,"layout":13},"Layout","/design-system/styles/layout",{"title":287,"_path":288,"layout":13},"Logo","/design-system/styles/logo",{"title":290,"_path":291,"layout":13},"Motion","/design-system/styles/motion",{"title":293,"_path":294,"layout":13},"Spacing","/design-system/styles/spacing",{"title":296,"_path":297,"layout":13},"Typography","/design-system/styles/typography",{"title":299,"_path":300,"children":301},"Components","/design-system/components",[302,305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440,443],{"title":303,"_path":304,"layout":13},"Accordion","/design-system/components/accordion",{"title":306,"_path":307,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":309,"_path":310,"layout":13},"Alert","/design-system/components/alert",{"title":312,"_path":313,"layout":13},"Block quote","/design-system/components/block-quote",{"title":315,"_path":316,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":318,"_path":319,"layout":13},"Button","/design-system/components/button",{"title":321,"_path":322,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":324,"_path":325,"layout":13},"Callout","/design-system/components/callout",{"title":327,"_path":328,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":330,"_path":331,"layout":13},"Card","/design-system/components/card",{"title":333,"_path":334,"layout":13},"Carousel","/design-system/components/carousel",{"title":336,"_path":337,"layout":13},"Category grid","/design-system/components/category-grid",{"title":339,"_path":340,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":342,"_path":343,"layout":13},"Chip","/design-system/components/chip",{"title":345,"_path":346,"layout":13},"Contact us","/design-system/components/contact-us",{"title":348,"_path":349,"layout":13},"Date input","/design-system/components/date-input",{"title":351,"_path":352,"layout":13},"Detail list","/design-system/components/detail-list",{"title":354,"_path":355,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":357,"_path":358,"layout":13},"File","/design-system/components/file",{"title":360,"_path":361,"layout":13},"Footer","/design-system/components/footer",{"title":363,"_path":364,"layout":13},"Form","/design-system/components/form",{"title":366,"_path":367,"layout":13},"Form alert","/design-system/components/form-alert",{"title":369,"_path":370,"layout":13},"Header","/design-system/components/header",{"title":372,"_path":373,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":375,"_path":376,"layout":13},"Input field","/design-system/components/input-field",{"title":378,"_path":379,"layout":13},"Key dates","/design-system/components/key-dates",{"title":381,"_path":382,"layout":13},"Media","/design-system/components/media",{"title":384,"_path":385,"layout":13},"Media embed","/design-system/components/media-embed",{"title":387,"_path":388,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":390,"_path":391,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":393,"_path":394,"layout":13},"Option button","/design-system/components/option-button",{"title":396,"_path":397,"layout":13},"Page action","/design-system/components/page-action",{"title":399,"_path":400,"layout":13},"Pagination","/design-system/components/pagination",{"title":402,"_path":403,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":405,"_path":406,"layout":13},"Profile","/design-system/components/profile",{"title":408,"_path":409,"layout":13},"Radio button","/design-system/components/radio-button",{"title":411,"_path":412,"layout":13},"Related links","/design-system/components/related-links",{"title":414,"_path":415,"layout":13},"Results listing","/design-system/components/results-listing",{"title":417,"_path":418,"layout":13},"Search bar","/design-system/components/search-bar",{"title":420,"_path":421,"layout":13},"Skip link","/design-system/components/skip-link",{"title":423,"_path":424,"layout":13},"Social share","/design-system/components/social-share",{"title":426,"_path":427,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":429,"_path":430,"layout":13},"Table","/design-system/components/table",{"title":432,"_path":433,"layout":13},"Tabs","/design-system/components/tabs",{"title":435,"_path":436,"layout":13},"Tag","/design-system/components/tag",{"title":438,"_path":439,"layout":13},"Text area","/design-system/components/text-area",{"title":441,"_path":442,"layout":13},"Timeline","/design-system/components/timeline",{"title":444,"_path":445,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":447,"_path":448,"children":449,"layout":13},"Ripple Framework","/framework",[450,451,469,491],{"title":447,"_path":448,"layout":13},{"title":452,"_path":453,"children":454},"Key Concepts","/framework/key-concepts",[455,457,460,463,466],{"title":256,"_path":456,"layout":13},"/framework/key-concepts/nuxt",{"title":458,"_path":459,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":461,"_path":462,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":464,"_path":465,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":467,"_path":468,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":470,"_path":471,"children":472},"Guides","/framework/guides",[473,476,479,482,485,488],{"title":474,"_path":475,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":477,"_path":478,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":480,"_path":481,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":483,"_path":484,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":486,"_path":487,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":489,"_path":490,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":492,"_path":493,"layout":13},"Core modules","/framework/core-modules",["Reactive",495],["Set"],["Reactive",497],{"module-navigation":498},null,true,1714695649100]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/accordion/_payload.json b/design-system/components/accordion/_payload.json
index d55b41598f..ce05cf3e7d 100644
--- a/design-system/components/accordion/_payload.json
+++ b/design-system/components/accordion/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":104,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695152671]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":104,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695650861]
\ No newline at end of file
diff --git a/design-system/components/accordion/index.html b/design-system/components/accordion/index.html
index c07e41c8b1..b4f8606a11 100644
--- a/design-system/components/accordion/index.html
+++ b/design-system/components/accordion/index.html
@@ -28,63 +28,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -96,8 +96,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Accordion</h1><p class="rpl-type-p-large" data-v-3163c6df>The Accordion component is a panel designed to save space by hiding and revealing content as required.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use accordions only if it will benefit the user. You should have evidence of this.<!--]--></p><p><!--[-->Using accordions will allow users to:<!--]--></p><ul><!--[--><li><!--[-->view related sections of content quickly<!--]--></li><li><!--[-->choose which content isn’t relevant to them by showing or hiding sections.<!--]--></li><!--]--></ul><p><!--[-->Always test accordions with users first. Depending on what the user needs, hiding content could present problems.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-accordion--accordion&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-accordion--accordion&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Fill the entire width of the content area.<!--]--></li><li><!--[-->Embed into the body content area of any landing page.<!--]--></li><li><!--[-->Use the &#39;numbered&#39; variant when a sequential order is important.<!--]--></li><li><!--[-->Include links and format text in accordions, as required.<!--]--></li><li><!--[-->Use to conceal content that may only apply to specific users who can choose to show or hide content.<!--]--></li><li><!--[-->Make sure accordion headings are descriptive and succinct.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Never use a single accordion.<!--]--></li><li><!--[-->Avoid putting all page content into accordions.<!--]--></li><li><!--[-->Don&#39;t use accordions for important information all users need to read.<!--]--></li><li><!--[-->Putting accordions in accordions can confuse the user.<!--]--></li><li><!--[-->Don&#39;t use an accordion if doing so will slow the page load time.<!--]--></li><li><!--[-->Don&#39;t disable sections.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="collapse-allexpand-all" data-v-ea525968><a href="#collapse-allexpand-all" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Collapse all/Expand all<!--]--></a></h2><p><!--[-->Being able to collapse or expand all lets users open or close all accordions with one click. This reduces the amount of clicks required to reach their content.<!--]--></p><p><!--[-->Don&#39;t use this feature to help users find information. Expanding all accordions at once could defeat the purpose of having them. If a user has to do this, consider more descriptive titles.<!--]--></p><p><!--[-->The other option is to remove the accordions and display the content without them.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->The accordion has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->numbered.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-accordion--accordion&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-accordion--accordion&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="numbered" data-v-ea525968><a href="#numbered" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Numbered<!--]--></a></h2><p><!--[-->Use the numbered variant when it is important the content is read in sequential order.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-accordion--accordion-numbered&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-accordion--accordion-numbered&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Accordions use colour to:<!--]--></p><ul><!--[--><li><!--[-->represent interactions such as hover and active states<!--]--></li><li><!--[-->give prominence to the active displayed content section.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-accordion--accordion&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-accordion--accordion&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/accordion.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/accordion/_payload.json">[{"state":1,"once":601,"_errors":603,"serverRendered":606,"path":7,"prerenderedAt":607},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":289,"$sdd-globals":306,"$sdd-navigation":308},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/accordion":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":284,"_id":285,"_source":286,"_file":287,"_extension":288},"/design-system/components/accordion","components",false,"","Accordion","The Accordion component is a panel designed to save space by hiding and revealing content as required.","page","Core",{"type":16,"children":17,"toc":270},"root",[18,27,33,38,53,58,63,70,103,109,142,148,153,158,163,167,173,178,191,196,199,205,210,214,217,223,228,241,248],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use accordions only if it will benefit the user. You should have evidence of this.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Using accordions will allow users to:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"view related sections of content quickly",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"choose which content isn’t relevant to them by showing or hiding sections.",{"type":19,"tag":28,"props":54,"children":55},{},[56],{"type":25,"value":57},"Always test accordions with users first. Depending on what the user needs, hiding content could present problems.",{"type":19,"tag":59,"props":60,"children":62},"docs-example",{"id":61},"core-containers-accordion--accordion",[],{"type":19,"tag":64,"props":65,"children":67},"h3",{"id":66},"when-and-how-to-use",[68],{"type":25,"value":69},"When and how to use",{"type":19,"tag":39,"props":71,"children":72},{},[73,78,83,88,93,98],{"type":19,"tag":43,"props":74,"children":75},{},[76],{"type":25,"value":77},"Fill the entire width of the content area.",{"type":19,"tag":43,"props":79,"children":80},{},[81],{"type":25,"value":82},"Embed into the body content area of any landing page.",{"type":19,"tag":43,"props":84,"children":85},{},[86],{"type":25,"value":87},"Use the 'numbered' variant when a sequential order is important.",{"type":19,"tag":43,"props":89,"children":90},{},[91],{"type":25,"value":92},"Include links and format text in accordions, as required.",{"type":19,"tag":43,"props":94,"children":95},{},[96],{"type":25,"value":97},"Use to conceal content that may only apply to specific users who can choose to show or hide content.",{"type":19,"tag":43,"props":99,"children":100},{},[101],{"type":25,"value":102},"Make sure accordion headings are descriptive and succinct.",{"type":19,"tag":64,"props":104,"children":106},{"id":105},"when-and-how-not-to-use",[107],{"type":25,"value":108},"When and how not to use",{"type":19,"tag":39,"props":110,"children":111},{},[112,117,122,127,132,137],{"type":19,"tag":43,"props":113,"children":114},{},[115],{"type":25,"value":116},"Never use a single accordion.",{"type":19,"tag":43,"props":118,"children":119},{},[120],{"type":25,"value":121},"Avoid putting all page content into accordions.",{"type":19,"tag":43,"props":123,"children":124},{},[125],{"type":25,"value":126},"Don't use accordions for important information all users need to read.",{"type":19,"tag":43,"props":128,"children":129},{},[130],{"type":25,"value":131},"Putting accordions in accordions can confuse the user.",{"type":19,"tag":43,"props":133,"children":134},{},[135],{"type":25,"value":136},"Don't use an accordion if doing so will slow the page load time.",{"type":19,"tag":43,"props":138,"children":139},{},[140],{"type":25,"value":141},"Don't disable sections.",{"type":19,"tag":64,"props":143,"children":145},{"id":144},"collapse-allexpand-all",[146],{"type":25,"value":147},"Collapse all/Expand all",{"type":19,"tag":28,"props":149,"children":150},{},[151],{"type":25,"value":152},"Being able to collapse or expand all lets users open or close all accordions with one click. This reduces the amount of clicks required to reach their content.",{"type":19,"tag":28,"props":154,"children":155},{},[156],{"type":25,"value":157},"Don't use this feature to help users find information. Expanding all accordions at once could defeat the purpose of having them. If a user has to do this, consider more descriptive titles.",{"type":19,"tag":28,"props":159,"children":160},{},[161],{"type":25,"value":162},"The other option is to remove the accordions and display the content without them.",{"type":19,"tag":164,"props":165,"children":166},"hr",{},[],{"type":19,"tag":20,"props":168,"children":170},{"id":169},"variants",[171],{"type":25,"value":172},"Variants",{"type":19,"tag":28,"props":174,"children":175},{},[176],{"type":25,"value":177},"The accordion has 2 variants:",{"type":19,"tag":39,"props":179,"children":180},{},[181,186],{"type":19,"tag":43,"props":182,"children":183},{},[184],{"type":25,"value":185},"default",{"type":19,"tag":43,"props":187,"children":188},{},[189],{"type":25,"value":190},"numbered.",{"type":19,"tag":64,"props":192,"children":193},{"id":185},[194],{"type":25,"value":195},"Default",{"type":19,"tag":59,"props":197,"children":198},{"id":61},[],{"type":19,"tag":64,"props":200,"children":202},{"id":201},"numbered",[203],{"type":25,"value":204},"Numbered",{"type":19,"tag":28,"props":206,"children":207},{},[208],{"type":25,"value":209},"Use the numbered variant when it is important the content is read in sequential order.",{"type":19,"tag":59,"props":211,"children":213},{"id":212},"core-containers-accordion--accordion-numbered",[],{"type":19,"tag":164,"props":215,"children":216},{},[],{"type":19,"tag":20,"props":218,"children":220},{"id":219},"theming",[221],{"type":25,"value":222},"Theming",{"type":19,"tag":28,"props":224,"children":225},{},[226],{"type":25,"value":227},"Accordions use colour to:",{"type":19,"tag":39,"props":229,"children":230},{},[231,236],{"type":19,"tag":43,"props":232,"children":233},{},[234],{"type":25,"value":235},"represent interactions such as hover and active states",{"type":19,"tag":43,"props":237,"children":238},{},[239],{"type":25,"value":240},"give prominence to the active displayed content section.",{"type":19,"tag":242,"props":243,"children":244},"docs-theme-chooser",{},[245],{"type":19,"tag":59,"props":246,"children":247},{"id":61},[],{"type":19,"tag":28,"props":249,"children":250},{},[251,253,260,262,268],{"type":25,"value":252},"To create your own theme see ",{"type":19,"tag":254,"props":255,"children":257},"a",{"href":256},"/design-system/design/theming-guidance-for-designers",[258],{"type":25,"value":259},"theming guidance for designers",{"type":25,"value":261}," or ",{"type":19,"tag":254,"props":263,"children":265},{"href":264},"/design-system/develop/theming",[266],{"type":25,"value":267},"theming guidance for developers",{"type":25,"value":269},".",{"title":10,"searchDepth":271,"depth":271,"links":272},2,[273,279,283],{"id":22,"depth":271,"text":26,"children":274},[275,277,278],{"id":66,"depth":276,"text":69},3,{"id":105,"depth":276,"text":108},{"id":144,"depth":276,"text":147},{"id":169,"depth":271,"text":172,"children":280},[281,282],{"id":185,"depth":276,"text":195},{"id":201,"depth":276,"text":204},{"id":219,"depth":271,"text":222},"markdown","content:design-system:5.components:accordion.md","content","design-system/5.components/accordion.md","md",["ShallowRef",290],["ShallowReactive",291],{"/design-system/components/accordion":292},[293,300],{"_path":294,"_dir":295,"_draft":9,"_partial":9,"_locale":10,"title":296,"description":297,"layout":13,"label":14,"_type":284,"_id":298,"_source":286,"_file":299,"_extension":288},"/design-system/styles/typography","styles","Typography","Type styles are used to present content clearly.","content:design-system:4.styles:typography.md","design-system/4.styles/typography.md",{"_path":301,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":302,"description":303,"layout":13,"label":14,"_type":284,"_id":304,"_source":286,"_file":305,"_extension":288},"/design-system/components/acknowledgment","Acknowledgement","The Acknowledgement component pays respect to the First Peoples of Victoria.","content:design-system:5.components:acknowledgment.md","design-system/5.components/acknowledgment.md",["ShallowRef",307],{},[309,314,553],{"title":310,"_path":311,"icon":312,"layout":313},"Ripple Design System","/","carbon:home","home",{"title":315,"_path":316,"children":317},"Design System","/design-system",[318,334,349,377,409],{"title":319,"_path":320,"children":321},"About","/design-system/about",[322,325,328,331],{"title":323,"_path":324,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":326,"_path":327,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":329,"_path":330,"layout":13},"Support","/design-system/about/getting-support",{"title":332,"_path":333,"layout":13},"Contributing","/design-system/about/contributing",{"title":335,"_path":336,"children":337},"Design","/design-system/design",[338,341,344,347],{"title":339,"_path":340,"layout":13},"Getting started","/design-system/design/getting-started",{"title":342,"_path":343,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":345,"_path":346,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":348,"_path":256,"layout":13},"Theming guidance for designers",{"title":350,"_path":351,"children":352},"Develop","/design-system/develop",[353,355,357,359],{"title":339,"_path":354,"layout":13},"/design-system/develop/getting-started",{"title":332,"_path":356,"layout":13},"/design-system/develop/contributing",{"title":358,"_path":264,"layout":13},"Theme and brand application",{"title":26,"_path":360,"children":361,"layout":13},"/design-system/develop/usage",[362,365,368,371,374],{"title":363,"_path":364,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":366,"_path":367,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":369,"_path":370,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":372,"_path":373,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":375,"_path":376,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":378,"_path":379,"children":380},"Styles","/design-system/styles",[381,384,387,390,393,396,399,402,405,408],{"title":382,"_path":383,"layout":13},"Colour","/design-system/styles/colour",{"title":385,"_path":386,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":388,"_path":389,"layout":13},"Grid","/design-system/styles/grid",{"title":391,"_path":392,"layout":13},"Icons","/design-system/styles/icons",{"title":394,"_path":395,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":397,"_path":398,"layout":13},"Layout","/design-system/styles/layout",{"title":400,"_path":401,"layout":13},"Logo","/design-system/styles/logo",{"title":403,"_path":404,"layout":13},"Motion","/design-system/styles/motion",{"title":406,"_path":407,"layout":13},"Spacing","/design-system/styles/spacing",{"title":296,"_path":294,"layout":13},{"title":410,"_path":411,"children":412},"Components","/design-system/components",[413,414,415,418,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,490,493,496,499,502,505,508,511,514,517,520,523,526,529,532,535,538,541,544,547,550],{"title":11,"_path":7,"layout":13},{"title":302,"_path":301,"layout":13},{"title":416,"_path":417,"layout":13},"Alert","/design-system/components/alert",{"title":419,"_path":420,"layout":13},"Block quote","/design-system/components/block-quote",{"title":422,"_path":423,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":425,"_path":426,"layout":13},"Button","/design-system/components/button",{"title":428,"_path":429,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":431,"_path":432,"layout":13},"Callout","/design-system/components/callout",{"title":434,"_path":435,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":437,"_path":438,"layout":13},"Card","/design-system/components/card",{"title":440,"_path":441,"layout":13},"Carousel","/design-system/components/carousel",{"title":443,"_path":444,"layout":13},"Category grid","/design-system/components/category-grid",{"title":446,"_path":447,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":449,"_path":450,"layout":13},"Chip","/design-system/components/chip",{"title":452,"_path":453,"layout":13},"Contact us","/design-system/components/contact-us",{"title":455,"_path":456,"layout":13},"Date input","/design-system/components/date-input",{"title":458,"_path":459,"layout":13},"Detail list","/design-system/components/detail-list",{"title":461,"_path":462,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":464,"_path":465,"layout":13},"File","/design-system/components/file",{"title":467,"_path":468,"layout":13},"Footer","/design-system/components/footer",{"title":470,"_path":471,"layout":13},"Form","/design-system/components/form",{"title":473,"_path":474,"layout":13},"Form alert","/design-system/components/form-alert",{"title":476,"_path":477,"layout":13},"Header","/design-system/components/header",{"title":479,"_path":480,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":482,"_path":483,"layout":13},"Input field","/design-system/components/input-field",{"title":485,"_path":486,"layout":13},"Key dates","/design-system/components/key-dates",{"title":488,"_path":489,"layout":13},"Media","/design-system/components/media",{"title":491,"_path":492,"layout":13},"Media embed","/design-system/components/media-embed",{"title":494,"_path":495,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":497,"_path":498,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":500,"_path":501,"layout":13},"Option button","/design-system/components/option-button",{"title":503,"_path":504,"layout":13},"Page action","/design-system/components/page-action",{"title":506,"_path":507,"layout":13},"Pagination","/design-system/components/pagination",{"title":509,"_path":510,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":512,"_path":513,"layout":13},"Profile","/design-system/components/profile",{"title":515,"_path":516,"layout":13},"Radio button","/design-system/components/radio-button",{"title":518,"_path":519,"layout":13},"Related links","/design-system/components/related-links",{"title":521,"_path":522,"layout":13},"Results listing","/design-system/components/results-listing",{"title":524,"_path":525,"layout":13},"Search bar","/design-system/components/search-bar",{"title":527,"_path":528,"layout":13},"Skip link","/design-system/components/skip-link",{"title":530,"_path":531,"layout":13},"Social share","/design-system/components/social-share",{"title":533,"_path":534,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":536,"_path":537,"layout":13},"Table","/design-system/components/table",{"title":539,"_path":540,"layout":13},"Tabs","/design-system/components/tabs",{"title":542,"_path":543,"layout":13},"Tag","/design-system/components/tag",{"title":545,"_path":546,"layout":13},"Text area","/design-system/components/text-area",{"title":548,"_path":549,"layout":13},"Timeline","/design-system/components/timeline",{"title":551,"_path":552,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":554,"_path":555,"children":556,"layout":13},"Ripple Framework","/framework",[557,558,576,598],{"title":554,"_path":555,"layout":13},{"title":559,"_path":560,"children":561},"Key Concepts","/framework/key-concepts",[562,564,567,570,573],{"title":369,"_path":563,"layout":13},"/framework/key-concepts/nuxt",{"title":565,"_path":566,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":568,"_path":569,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":571,"_path":572,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":574,"_path":575,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":577,"_path":578,"children":579},"Guides","/framework/guides",[580,583,586,589,592,595],{"title":581,"_path":582,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":584,"_path":585,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":587,"_path":588,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":590,"_path":591,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":593,"_path":594,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":596,"_path":597,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":599,"_path":600,"layout":13},"Core modules","/framework/core-modules",["Reactive",602],["Set"],["Reactive",604],{"module-navigation":605},null,true,1714695152671]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Accordion</h1><p class="rpl-type-p-large" data-v-3163c6df>The Accordion component is a panel designed to save space by hiding and revealing content as required.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use accordions only if it will benefit the user. You should have evidence of this.<!--]--></p><p><!--[-->Using accordions will allow users to:<!--]--></p><ul><!--[--><li><!--[-->view related sections of content quickly<!--]--></li><li><!--[-->choose which content isn’t relevant to them by showing or hiding sections.<!--]--></li><!--]--></ul><p><!--[-->Always test accordions with users first. Depending on what the user needs, hiding content could present problems.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-accordion--accordion&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-accordion--accordion&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Fill the entire width of the content area.<!--]--></li><li><!--[-->Embed into the body content area of any landing page.<!--]--></li><li><!--[-->Use the &#39;numbered&#39; variant when a sequential order is important.<!--]--></li><li><!--[-->Include links and format text in accordions, as required.<!--]--></li><li><!--[-->Use to conceal content that may only apply to specific users who can choose to show or hide content.<!--]--></li><li><!--[-->Make sure accordion headings are descriptive and succinct.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Never use a single accordion.<!--]--></li><li><!--[-->Avoid putting all page content into accordions.<!--]--></li><li><!--[-->Don&#39;t use accordions for important information all users need to read.<!--]--></li><li><!--[-->Putting accordions in accordions can confuse the user.<!--]--></li><li><!--[-->Don&#39;t use an accordion if doing so will slow the page load time.<!--]--></li><li><!--[-->Don&#39;t disable sections.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="collapse-allexpand-all" data-v-ea525968><a href="#collapse-allexpand-all" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Collapse all/Expand all<!--]--></a></h2><p><!--[-->Being able to collapse or expand all lets users open or close all accordions with one click. This reduces the amount of clicks required to reach their content.<!--]--></p><p><!--[-->Don&#39;t use this feature to help users find information. Expanding all accordions at once could defeat the purpose of having them. If a user has to do this, consider more descriptive titles.<!--]--></p><p><!--[-->The other option is to remove the accordions and display the content without them.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->The accordion has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->numbered.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-accordion--accordion&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-accordion--accordion&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="numbered" data-v-ea525968><a href="#numbered" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Numbered<!--]--></a></h2><p><!--[-->Use the numbered variant when it is important the content is read in sequential order.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-accordion--accordion-numbered&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-accordion--accordion-numbered&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Accordions use colour to:<!--]--></p><ul><!--[--><li><!--[-->represent interactions such as hover and active states<!--]--></li><li><!--[-->give prominence to the active displayed content section.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-accordion--accordion&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-accordion--accordion&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/accordion.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/accordion/_payload.json">[{"state":1,"once":601,"_errors":603,"serverRendered":606,"path":7,"prerenderedAt":607},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":289,"$sdd-globals":306,"$sdd-navigation":308},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/accordion":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":284,"_id":285,"_source":286,"_file":287,"_extension":288},"/design-system/components/accordion","components",false,"","Accordion","The Accordion component is a panel designed to save space by hiding and revealing content as required.","page","Core",{"type":16,"children":17,"toc":270},"root",[18,27,33,38,53,58,63,70,103,109,142,148,153,158,163,167,173,178,191,196,199,205,210,214,217,223,228,241,248],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use accordions only if it will benefit the user. You should have evidence of this.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Using accordions will allow users to:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"view related sections of content quickly",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"choose which content isn’t relevant to them by showing or hiding sections.",{"type":19,"tag":28,"props":54,"children":55},{},[56],{"type":25,"value":57},"Always test accordions with users first. Depending on what the user needs, hiding content could present problems.",{"type":19,"tag":59,"props":60,"children":62},"docs-example",{"id":61},"core-containers-accordion--accordion",[],{"type":19,"tag":64,"props":65,"children":67},"h3",{"id":66},"when-and-how-to-use",[68],{"type":25,"value":69},"When and how to use",{"type":19,"tag":39,"props":71,"children":72},{},[73,78,83,88,93,98],{"type":19,"tag":43,"props":74,"children":75},{},[76],{"type":25,"value":77},"Fill the entire width of the content area.",{"type":19,"tag":43,"props":79,"children":80},{},[81],{"type":25,"value":82},"Embed into the body content area of any landing page.",{"type":19,"tag":43,"props":84,"children":85},{},[86],{"type":25,"value":87},"Use the 'numbered' variant when a sequential order is important.",{"type":19,"tag":43,"props":89,"children":90},{},[91],{"type":25,"value":92},"Include links and format text in accordions, as required.",{"type":19,"tag":43,"props":94,"children":95},{},[96],{"type":25,"value":97},"Use to conceal content that may only apply to specific users who can choose to show or hide content.",{"type":19,"tag":43,"props":99,"children":100},{},[101],{"type":25,"value":102},"Make sure accordion headings are descriptive and succinct.",{"type":19,"tag":64,"props":104,"children":106},{"id":105},"when-and-how-not-to-use",[107],{"type":25,"value":108},"When and how not to use",{"type":19,"tag":39,"props":110,"children":111},{},[112,117,122,127,132,137],{"type":19,"tag":43,"props":113,"children":114},{},[115],{"type":25,"value":116},"Never use a single accordion.",{"type":19,"tag":43,"props":118,"children":119},{},[120],{"type":25,"value":121},"Avoid putting all page content into accordions.",{"type":19,"tag":43,"props":123,"children":124},{},[125],{"type":25,"value":126},"Don't use accordions for important information all users need to read.",{"type":19,"tag":43,"props":128,"children":129},{},[130],{"type":25,"value":131},"Putting accordions in accordions can confuse the user.",{"type":19,"tag":43,"props":133,"children":134},{},[135],{"type":25,"value":136},"Don't use an accordion if doing so will slow the page load time.",{"type":19,"tag":43,"props":138,"children":139},{},[140],{"type":25,"value":141},"Don't disable sections.",{"type":19,"tag":64,"props":143,"children":145},{"id":144},"collapse-allexpand-all",[146],{"type":25,"value":147},"Collapse all/Expand all",{"type":19,"tag":28,"props":149,"children":150},{},[151],{"type":25,"value":152},"Being able to collapse or expand all lets users open or close all accordions with one click. This reduces the amount of clicks required to reach their content.",{"type":19,"tag":28,"props":154,"children":155},{},[156],{"type":25,"value":157},"Don't use this feature to help users find information. Expanding all accordions at once could defeat the purpose of having them. If a user has to do this, consider more descriptive titles.",{"type":19,"tag":28,"props":159,"children":160},{},[161],{"type":25,"value":162},"The other option is to remove the accordions and display the content without them.",{"type":19,"tag":164,"props":165,"children":166},"hr",{},[],{"type":19,"tag":20,"props":168,"children":170},{"id":169},"variants",[171],{"type":25,"value":172},"Variants",{"type":19,"tag":28,"props":174,"children":175},{},[176],{"type":25,"value":177},"The accordion has 2 variants:",{"type":19,"tag":39,"props":179,"children":180},{},[181,186],{"type":19,"tag":43,"props":182,"children":183},{},[184],{"type":25,"value":185},"default",{"type":19,"tag":43,"props":187,"children":188},{},[189],{"type":25,"value":190},"numbered.",{"type":19,"tag":64,"props":192,"children":193},{"id":185},[194],{"type":25,"value":195},"Default",{"type":19,"tag":59,"props":197,"children":198},{"id":61},[],{"type":19,"tag":64,"props":200,"children":202},{"id":201},"numbered",[203],{"type":25,"value":204},"Numbered",{"type":19,"tag":28,"props":206,"children":207},{},[208],{"type":25,"value":209},"Use the numbered variant when it is important the content is read in sequential order.",{"type":19,"tag":59,"props":211,"children":213},{"id":212},"core-containers-accordion--accordion-numbered",[],{"type":19,"tag":164,"props":215,"children":216},{},[],{"type":19,"tag":20,"props":218,"children":220},{"id":219},"theming",[221],{"type":25,"value":222},"Theming",{"type":19,"tag":28,"props":224,"children":225},{},[226],{"type":25,"value":227},"Accordions use colour to:",{"type":19,"tag":39,"props":229,"children":230},{},[231,236],{"type":19,"tag":43,"props":232,"children":233},{},[234],{"type":25,"value":235},"represent interactions such as hover and active states",{"type":19,"tag":43,"props":237,"children":238},{},[239],{"type":25,"value":240},"give prominence to the active displayed content section.",{"type":19,"tag":242,"props":243,"children":244},"docs-theme-chooser",{},[245],{"type":19,"tag":59,"props":246,"children":247},{"id":61},[],{"type":19,"tag":28,"props":249,"children":250},{},[251,253,260,262,268],{"type":25,"value":252},"To create your own theme see ",{"type":19,"tag":254,"props":255,"children":257},"a",{"href":256},"/design-system/design/theming-guidance-for-designers",[258],{"type":25,"value":259},"theming guidance for designers",{"type":25,"value":261}," or ",{"type":19,"tag":254,"props":263,"children":265},{"href":264},"/design-system/develop/theming",[266],{"type":25,"value":267},"theming guidance for developers",{"type":25,"value":269},".",{"title":10,"searchDepth":271,"depth":271,"links":272},2,[273,279,283],{"id":22,"depth":271,"text":26,"children":274},[275,277,278],{"id":66,"depth":276,"text":69},3,{"id":105,"depth":276,"text":108},{"id":144,"depth":276,"text":147},{"id":169,"depth":271,"text":172,"children":280},[281,282],{"id":185,"depth":276,"text":195},{"id":201,"depth":276,"text":204},{"id":219,"depth":271,"text":222},"markdown","content:design-system:5.components:accordion.md","content","design-system/5.components/accordion.md","md",["ShallowRef",290],["ShallowReactive",291],{"/design-system/components/accordion":292},[293,300],{"_path":294,"_dir":295,"_draft":9,"_partial":9,"_locale":10,"title":296,"description":297,"layout":13,"label":14,"_type":284,"_id":298,"_source":286,"_file":299,"_extension":288},"/design-system/styles/typography","styles","Typography","Type styles are used to present content clearly.","content:design-system:4.styles:typography.md","design-system/4.styles/typography.md",{"_path":301,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":302,"description":303,"layout":13,"label":14,"_type":284,"_id":304,"_source":286,"_file":305,"_extension":288},"/design-system/components/acknowledgment","Acknowledgement","The Acknowledgement component pays respect to the First Peoples of Victoria.","content:design-system:5.components:acknowledgment.md","design-system/5.components/acknowledgment.md",["ShallowRef",307],{},[309,314,553],{"title":310,"_path":311,"icon":312,"layout":313},"Ripple Design System","/","carbon:home","home",{"title":315,"_path":316,"children":317},"Design System","/design-system",[318,334,349,377,409],{"title":319,"_path":320,"children":321},"About","/design-system/about",[322,325,328,331],{"title":323,"_path":324,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":326,"_path":327,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":329,"_path":330,"layout":13},"Support","/design-system/about/getting-support",{"title":332,"_path":333,"layout":13},"Contributing","/design-system/about/contributing",{"title":335,"_path":336,"children":337},"Design","/design-system/design",[338,341,344,347],{"title":339,"_path":340,"layout":13},"Getting started","/design-system/design/getting-started",{"title":342,"_path":343,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":345,"_path":346,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":348,"_path":256,"layout":13},"Theming guidance for designers",{"title":350,"_path":351,"children":352},"Develop","/design-system/develop",[353,355,357,359],{"title":339,"_path":354,"layout":13},"/design-system/develop/getting-started",{"title":332,"_path":356,"layout":13},"/design-system/develop/contributing",{"title":358,"_path":264,"layout":13},"Theme and brand application",{"title":26,"_path":360,"children":361,"layout":13},"/design-system/develop/usage",[362,365,368,371,374],{"title":363,"_path":364,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":366,"_path":367,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":369,"_path":370,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":372,"_path":373,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":375,"_path":376,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":378,"_path":379,"children":380},"Styles","/design-system/styles",[381,384,387,390,393,396,399,402,405,408],{"title":382,"_path":383,"layout":13},"Colour","/design-system/styles/colour",{"title":385,"_path":386,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":388,"_path":389,"layout":13},"Grid","/design-system/styles/grid",{"title":391,"_path":392,"layout":13},"Icons","/design-system/styles/icons",{"title":394,"_path":395,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":397,"_path":398,"layout":13},"Layout","/design-system/styles/layout",{"title":400,"_path":401,"layout":13},"Logo","/design-system/styles/logo",{"title":403,"_path":404,"layout":13},"Motion","/design-system/styles/motion",{"title":406,"_path":407,"layout":13},"Spacing","/design-system/styles/spacing",{"title":296,"_path":294,"layout":13},{"title":410,"_path":411,"children":412},"Components","/design-system/components",[413,414,415,418,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,490,493,496,499,502,505,508,511,514,517,520,523,526,529,532,535,538,541,544,547,550],{"title":11,"_path":7,"layout":13},{"title":302,"_path":301,"layout":13},{"title":416,"_path":417,"layout":13},"Alert","/design-system/components/alert",{"title":419,"_path":420,"layout":13},"Block quote","/design-system/components/block-quote",{"title":422,"_path":423,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":425,"_path":426,"layout":13},"Button","/design-system/components/button",{"title":428,"_path":429,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":431,"_path":432,"layout":13},"Callout","/design-system/components/callout",{"title":434,"_path":435,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":437,"_path":438,"layout":13},"Card","/design-system/components/card",{"title":440,"_path":441,"layout":13},"Carousel","/design-system/components/carousel",{"title":443,"_path":444,"layout":13},"Category grid","/design-system/components/category-grid",{"title":446,"_path":447,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":449,"_path":450,"layout":13},"Chip","/design-system/components/chip",{"title":452,"_path":453,"layout":13},"Contact us","/design-system/components/contact-us",{"title":455,"_path":456,"layout":13},"Date input","/design-system/components/date-input",{"title":458,"_path":459,"layout":13},"Detail list","/design-system/components/detail-list",{"title":461,"_path":462,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":464,"_path":465,"layout":13},"File","/design-system/components/file",{"title":467,"_path":468,"layout":13},"Footer","/design-system/components/footer",{"title":470,"_path":471,"layout":13},"Form","/design-system/components/form",{"title":473,"_path":474,"layout":13},"Form alert","/design-system/components/form-alert",{"title":476,"_path":477,"layout":13},"Header","/design-system/components/header",{"title":479,"_path":480,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":482,"_path":483,"layout":13},"Input field","/design-system/components/input-field",{"title":485,"_path":486,"layout":13},"Key dates","/design-system/components/key-dates",{"title":488,"_path":489,"layout":13},"Media","/design-system/components/media",{"title":491,"_path":492,"layout":13},"Media embed","/design-system/components/media-embed",{"title":494,"_path":495,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":497,"_path":498,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":500,"_path":501,"layout":13},"Option button","/design-system/components/option-button",{"title":503,"_path":504,"layout":13},"Page action","/design-system/components/page-action",{"title":506,"_path":507,"layout":13},"Pagination","/design-system/components/pagination",{"title":509,"_path":510,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":512,"_path":513,"layout":13},"Profile","/design-system/components/profile",{"title":515,"_path":516,"layout":13},"Radio button","/design-system/components/radio-button",{"title":518,"_path":519,"layout":13},"Related links","/design-system/components/related-links",{"title":521,"_path":522,"layout":13},"Results listing","/design-system/components/results-listing",{"title":524,"_path":525,"layout":13},"Search bar","/design-system/components/search-bar",{"title":527,"_path":528,"layout":13},"Skip link","/design-system/components/skip-link",{"title":530,"_path":531,"layout":13},"Social share","/design-system/components/social-share",{"title":533,"_path":534,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":536,"_path":537,"layout":13},"Table","/design-system/components/table",{"title":539,"_path":540,"layout":13},"Tabs","/design-system/components/tabs",{"title":542,"_path":543,"layout":13},"Tag","/design-system/components/tag",{"title":545,"_path":546,"layout":13},"Text area","/design-system/components/text-area",{"title":548,"_path":549,"layout":13},"Timeline","/design-system/components/timeline",{"title":551,"_path":552,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":554,"_path":555,"children":556,"layout":13},"Ripple Framework","/framework",[557,558,576,598],{"title":554,"_path":555,"layout":13},{"title":559,"_path":560,"children":561},"Key Concepts","/framework/key-concepts",[562,564,567,570,573],{"title":369,"_path":563,"layout":13},"/framework/key-concepts/nuxt",{"title":565,"_path":566,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":568,"_path":569,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":571,"_path":572,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":574,"_path":575,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":577,"_path":578,"children":579},"Guides","/framework/guides",[580,583,586,589,592,595],{"title":581,"_path":582,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":584,"_path":585,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":587,"_path":588,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":590,"_path":591,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":593,"_path":594,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":596,"_path":597,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":599,"_path":600,"layout":13},"Core modules","/framework/core-modules",["Reactive",602],["Set"],["Reactive",604],{"module-navigation":605},null,true,1714695650861]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/acknowledgment/_payload.json b/design-system/components/acknowledgment/_payload.json
index bd61444e56..9010740c46 100644
--- a/design-system/components/acknowledgment/_payload.json
+++ b/design-system/components/acknowledgment/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":104,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695152675]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":104,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695650865]
\ No newline at end of file
diff --git a/design-system/components/acknowledgment/index.html b/design-system/components/acknowledgment/index.html
index 082ca88bca..0c4f18392a 100644
--- a/design-system/components/acknowledgment/index.html
+++ b/design-system/components/acknowledgment/index.html
@@ -26,59 +26,59 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -90,8 +90,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Acknowledgement</h1><p class="rpl-type-p-large" data-v-3163c6df>The Acknowledgement component pays respect to the First Peoples of Victoria.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->The Acknowledgement of Traditional Owners message:<!--]--></p><ul><!--[--><li><!--[-->displays alongside the Aboriginal and Torres Strait Islander flags<!--]--></li><li><!--[-->is used in the footer.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-acknowledgement--acknowledgement&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-acknowledgement--acknowledgement&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use this component to display the Acknowledgement of Traditional Owners message.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><p><!--[-->Do not change the:<!--]--></p><ul><!--[--><li><!--[-->Aboriginal and Torres Strait Islander flags<!--]--></li><li><!--[-->Acknowledgement of Traditional Owners wording.<!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/acknowledgment.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/acknowledgment/_payload.json">[{"state":1,"once":418,"_errors":420,"serverRendered":423,"path":7,"prerenderedAt":424},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":105,"$sdd-globals":121,"$sdd-navigation":123},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/acknowledgment":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":100,"_id":101,"_source":102,"_file":103,"_extension":104},"/design-system/components/acknowledgment","components",false,"","Acknowledgement","The Acknowledgement component pays respect to the First Peoples of Victoria.","page","Core",{"type":16,"children":17,"toc":92},"root",[18,27,33,48,53,60,68,74,79],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"The Acknowledgement of Traditional Owners message:",{"type":19,"tag":34,"props":35,"children":36},"ul",{},[37,43],{"type":19,"tag":38,"props":39,"children":40},"li",{},[41],{"type":25,"value":42},"displays alongside the Aboriginal and Torres Strait Islander flags",{"type":19,"tag":38,"props":44,"children":45},{},[46],{"type":25,"value":47},"is used in the footer.",{"type":19,"tag":49,"props":50,"children":52},"docs-example",{"id":51},"core-containers-acknowledgement--acknowledgement",[],{"type":19,"tag":54,"props":55,"children":57},"h3",{"id":56},"when-and-how-to-use",[58],{"type":25,"value":59},"When and how to use",{"type":19,"tag":34,"props":61,"children":62},{},[63],{"type":19,"tag":38,"props":64,"children":65},{},[66],{"type":25,"value":67},"Use this component to display the Acknowledgement of Traditional Owners message.",{"type":19,"tag":54,"props":69,"children":71},{"id":70},"when-and-how-not-to-use",[72],{"type":25,"value":73},"When and how not to use",{"type":19,"tag":28,"props":75,"children":76},{},[77],{"type":25,"value":78},"Do not change the:",{"type":19,"tag":34,"props":80,"children":81},{},[82,87],{"type":19,"tag":38,"props":83,"children":84},{},[85],{"type":25,"value":86},"Aboriginal and Torres Strait Islander flags",{"type":19,"tag":38,"props":88,"children":89},{},[90],{"type":25,"value":91},"Acknowledgement of Traditional Owners wording.",{"title":10,"searchDepth":93,"depth":93,"links":94},2,[95],{"id":22,"depth":93,"text":26,"children":96},[97,99],{"id":56,"depth":98,"text":59},3,{"id":70,"depth":98,"text":73},"markdown","content:design-system:5.components:acknowledgment.md","content","design-system/5.components/acknowledgment.md","md",["ShallowRef",106],["ShallowReactive",107],{"/design-system/components/acknowledgment":108},[109,115],{"_path":110,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":111,"description":112,"layout":13,"label":14,"_type":100,"_id":113,"_source":102,"_file":114,"_extension":104},"/design-system/components/accordion","Accordion","The Accordion component is a panel designed to save space by hiding and revealing content as required.","content:design-system:5.components:accordion.md","design-system/5.components/accordion.md",{"_path":116,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":117,"description":118,"layout":13,"label":14,"_type":100,"_id":119,"_source":102,"_file":120,"_extension":104},"/design-system/components/alert","Alert","The Alert component display required actions or important messages to users.","content:design-system:5.components:alert.md","design-system/5.components/alert.md",["ShallowRef",122],{},[124,129,370],{"title":125,"_path":126,"icon":127,"layout":128},"Ripple Design System","/","carbon:home","home",{"title":130,"_path":131,"children":132},"Design System","/design-system",[133,149,165,194,228],{"title":134,"_path":135,"children":136},"About","/design-system/about",[137,140,143,146],{"title":138,"_path":139,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":141,"_path":142,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":144,"_path":145,"layout":13},"Support","/design-system/about/getting-support",{"title":147,"_path":148,"layout":13},"Contributing","/design-system/about/contributing",{"title":150,"_path":151,"children":152},"Design","/design-system/design",[153,156,159,162],{"title":154,"_path":155,"layout":13},"Getting started","/design-system/design/getting-started",{"title":157,"_path":158,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":160,"_path":161,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":163,"_path":164,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":166,"_path":167,"children":168},"Develop","/design-system/develop",[169,171,173,176],{"title":154,"_path":170,"layout":13},"/design-system/develop/getting-started",{"title":147,"_path":172,"layout":13},"/design-system/develop/contributing",{"title":174,"_path":175,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":177,"children":178,"layout":13},"/design-system/develop/usage",[179,182,185,188,191],{"title":180,"_path":181,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":183,"_path":184,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":186,"_path":187,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":189,"_path":190,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":192,"_path":193,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":195,"_path":196,"children":197},"Styles","/design-system/styles",[198,201,204,207,210,213,216,219,222,225],{"title":199,"_path":200,"layout":13},"Colour","/design-system/styles/colour",{"title":202,"_path":203,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":205,"_path":206,"layout":13},"Grid","/design-system/styles/grid",{"title":208,"_path":209,"layout":13},"Icons","/design-system/styles/icons",{"title":211,"_path":212,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":214,"_path":215,"layout":13},"Layout","/design-system/styles/layout",{"title":217,"_path":218,"layout":13},"Logo","/design-system/styles/logo",{"title":220,"_path":221,"layout":13},"Motion","/design-system/styles/motion",{"title":223,"_path":224,"layout":13},"Spacing","/design-system/styles/spacing",{"title":226,"_path":227,"layout":13},"Typography","/design-system/styles/typography",{"title":229,"_path":230,"children":231},"Components","/design-system/components",[232,233,234,235,238,241,244,247,250,253,256,259,262,265,268,271,274,277,280,283,286,289,292,295,298,301,304,307,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367],{"title":111,"_path":110,"layout":13},{"title":11,"_path":7,"layout":13},{"title":117,"_path":116,"layout":13},{"title":236,"_path":237,"layout":13},"Block quote","/design-system/components/block-quote",{"title":239,"_path":240,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":242,"_path":243,"layout":13},"Button","/design-system/components/button",{"title":245,"_path":246,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":248,"_path":249,"layout":13},"Callout","/design-system/components/callout",{"title":251,"_path":252,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":254,"_path":255,"layout":13},"Card","/design-system/components/card",{"title":257,"_path":258,"layout":13},"Carousel","/design-system/components/carousel",{"title":260,"_path":261,"layout":13},"Category grid","/design-system/components/category-grid",{"title":263,"_path":264,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":266,"_path":267,"layout":13},"Chip","/design-system/components/chip",{"title":269,"_path":270,"layout":13},"Contact us","/design-system/components/contact-us",{"title":272,"_path":273,"layout":13},"Date input","/design-system/components/date-input",{"title":275,"_path":276,"layout":13},"Detail list","/design-system/components/detail-list",{"title":278,"_path":279,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":281,"_path":282,"layout":13},"File","/design-system/components/file",{"title":284,"_path":285,"layout":13},"Footer","/design-system/components/footer",{"title":287,"_path":288,"layout":13},"Form","/design-system/components/form",{"title":290,"_path":291,"layout":13},"Form alert","/design-system/components/form-alert",{"title":293,"_path":294,"layout":13},"Header","/design-system/components/header",{"title":296,"_path":297,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":299,"_path":300,"layout":13},"Input field","/design-system/components/input-field",{"title":302,"_path":303,"layout":13},"Key dates","/design-system/components/key-dates",{"title":305,"_path":306,"layout":13},"Media","/design-system/components/media",{"title":308,"_path":309,"layout":13},"Media embed","/design-system/components/media-embed",{"title":311,"_path":312,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":314,"_path":315,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":317,"_path":318,"layout":13},"Option button","/design-system/components/option-button",{"title":320,"_path":321,"layout":13},"Page action","/design-system/components/page-action",{"title":323,"_path":324,"layout":13},"Pagination","/design-system/components/pagination",{"title":326,"_path":327,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":329,"_path":330,"layout":13},"Profile","/design-system/components/profile",{"title":332,"_path":333,"layout":13},"Radio button","/design-system/components/radio-button",{"title":335,"_path":336,"layout":13},"Related links","/design-system/components/related-links",{"title":338,"_path":339,"layout":13},"Results listing","/design-system/components/results-listing",{"title":341,"_path":342,"layout":13},"Search bar","/design-system/components/search-bar",{"title":344,"_path":345,"layout":13},"Skip link","/design-system/components/skip-link",{"title":347,"_path":348,"layout":13},"Social share","/design-system/components/social-share",{"title":350,"_path":351,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":353,"_path":354,"layout":13},"Table","/design-system/components/table",{"title":356,"_path":357,"layout":13},"Tabs","/design-system/components/tabs",{"title":359,"_path":360,"layout":13},"Tag","/design-system/components/tag",{"title":362,"_path":363,"layout":13},"Text area","/design-system/components/text-area",{"title":365,"_path":366,"layout":13},"Timeline","/design-system/components/timeline",{"title":368,"_path":369,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":371,"_path":372,"children":373,"layout":13},"Ripple Framework","/framework",[374,375,393,415],{"title":371,"_path":372,"layout":13},{"title":376,"_path":377,"children":378},"Key Concepts","/framework/key-concepts",[379,381,384,387,390],{"title":186,"_path":380,"layout":13},"/framework/key-concepts/nuxt",{"title":382,"_path":383,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":385,"_path":386,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":388,"_path":389,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":391,"_path":392,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":394,"_path":395,"children":396},"Guides","/framework/guides",[397,400,403,406,409,412],{"title":398,"_path":399,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":401,"_path":402,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":404,"_path":405,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":407,"_path":408,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":410,"_path":411,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":413,"_path":414,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":416,"_path":417,"layout":13},"Core modules","/framework/core-modules",["Reactive",419],["Set"],["Reactive",421],{"module-navigation":422},null,true,1714695152675]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Acknowledgement</h1><p class="rpl-type-p-large" data-v-3163c6df>The Acknowledgement component pays respect to the First Peoples of Victoria.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->The Acknowledgement of Traditional Owners message:<!--]--></p><ul><!--[--><li><!--[-->displays alongside the Aboriginal and Torres Strait Islander flags<!--]--></li><li><!--[-->is used in the footer.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-acknowledgement--acknowledgement&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-acknowledgement--acknowledgement&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use this component to display the Acknowledgement of Traditional Owners message.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><p><!--[-->Do not change the:<!--]--></p><ul><!--[--><li><!--[-->Aboriginal and Torres Strait Islander flags<!--]--></li><li><!--[-->Acknowledgement of Traditional Owners wording.<!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/acknowledgment.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/acknowledgment/_payload.json">[{"state":1,"once":418,"_errors":420,"serverRendered":423,"path":7,"prerenderedAt":424},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":105,"$sdd-globals":121,"$sdd-navigation":123},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/acknowledgment":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":100,"_id":101,"_source":102,"_file":103,"_extension":104},"/design-system/components/acknowledgment","components",false,"","Acknowledgement","The Acknowledgement component pays respect to the First Peoples of Victoria.","page","Core",{"type":16,"children":17,"toc":92},"root",[18,27,33,48,53,60,68,74,79],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"The Acknowledgement of Traditional Owners message:",{"type":19,"tag":34,"props":35,"children":36},"ul",{},[37,43],{"type":19,"tag":38,"props":39,"children":40},"li",{},[41],{"type":25,"value":42},"displays alongside the Aboriginal and Torres Strait Islander flags",{"type":19,"tag":38,"props":44,"children":45},{},[46],{"type":25,"value":47},"is used in the footer.",{"type":19,"tag":49,"props":50,"children":52},"docs-example",{"id":51},"core-containers-acknowledgement--acknowledgement",[],{"type":19,"tag":54,"props":55,"children":57},"h3",{"id":56},"when-and-how-to-use",[58],{"type":25,"value":59},"When and how to use",{"type":19,"tag":34,"props":61,"children":62},{},[63],{"type":19,"tag":38,"props":64,"children":65},{},[66],{"type":25,"value":67},"Use this component to display the Acknowledgement of Traditional Owners message.",{"type":19,"tag":54,"props":69,"children":71},{"id":70},"when-and-how-not-to-use",[72],{"type":25,"value":73},"When and how not to use",{"type":19,"tag":28,"props":75,"children":76},{},[77],{"type":25,"value":78},"Do not change the:",{"type":19,"tag":34,"props":80,"children":81},{},[82,87],{"type":19,"tag":38,"props":83,"children":84},{},[85],{"type":25,"value":86},"Aboriginal and Torres Strait Islander flags",{"type":19,"tag":38,"props":88,"children":89},{},[90],{"type":25,"value":91},"Acknowledgement of Traditional Owners wording.",{"title":10,"searchDepth":93,"depth":93,"links":94},2,[95],{"id":22,"depth":93,"text":26,"children":96},[97,99],{"id":56,"depth":98,"text":59},3,{"id":70,"depth":98,"text":73},"markdown","content:design-system:5.components:acknowledgment.md","content","design-system/5.components/acknowledgment.md","md",["ShallowRef",106],["ShallowReactive",107],{"/design-system/components/acknowledgment":108},[109,115],{"_path":110,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":111,"description":112,"layout":13,"label":14,"_type":100,"_id":113,"_source":102,"_file":114,"_extension":104},"/design-system/components/accordion","Accordion","The Accordion component is a panel designed to save space by hiding and revealing content as required.","content:design-system:5.components:accordion.md","design-system/5.components/accordion.md",{"_path":116,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":117,"description":118,"layout":13,"label":14,"_type":100,"_id":119,"_source":102,"_file":120,"_extension":104},"/design-system/components/alert","Alert","The Alert component display required actions or important messages to users.","content:design-system:5.components:alert.md","design-system/5.components/alert.md",["ShallowRef",122],{},[124,129,370],{"title":125,"_path":126,"icon":127,"layout":128},"Ripple Design System","/","carbon:home","home",{"title":130,"_path":131,"children":132},"Design System","/design-system",[133,149,165,194,228],{"title":134,"_path":135,"children":136},"About","/design-system/about",[137,140,143,146],{"title":138,"_path":139,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":141,"_path":142,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":144,"_path":145,"layout":13},"Support","/design-system/about/getting-support",{"title":147,"_path":148,"layout":13},"Contributing","/design-system/about/contributing",{"title":150,"_path":151,"children":152},"Design","/design-system/design",[153,156,159,162],{"title":154,"_path":155,"layout":13},"Getting started","/design-system/design/getting-started",{"title":157,"_path":158,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":160,"_path":161,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":163,"_path":164,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":166,"_path":167,"children":168},"Develop","/design-system/develop",[169,171,173,176],{"title":154,"_path":170,"layout":13},"/design-system/develop/getting-started",{"title":147,"_path":172,"layout":13},"/design-system/develop/contributing",{"title":174,"_path":175,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":177,"children":178,"layout":13},"/design-system/develop/usage",[179,182,185,188,191],{"title":180,"_path":181,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":183,"_path":184,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":186,"_path":187,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":189,"_path":190,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":192,"_path":193,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":195,"_path":196,"children":197},"Styles","/design-system/styles",[198,201,204,207,210,213,216,219,222,225],{"title":199,"_path":200,"layout":13},"Colour","/design-system/styles/colour",{"title":202,"_path":203,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":205,"_path":206,"layout":13},"Grid","/design-system/styles/grid",{"title":208,"_path":209,"layout":13},"Icons","/design-system/styles/icons",{"title":211,"_path":212,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":214,"_path":215,"layout":13},"Layout","/design-system/styles/layout",{"title":217,"_path":218,"layout":13},"Logo","/design-system/styles/logo",{"title":220,"_path":221,"layout":13},"Motion","/design-system/styles/motion",{"title":223,"_path":224,"layout":13},"Spacing","/design-system/styles/spacing",{"title":226,"_path":227,"layout":13},"Typography","/design-system/styles/typography",{"title":229,"_path":230,"children":231},"Components","/design-system/components",[232,233,234,235,238,241,244,247,250,253,256,259,262,265,268,271,274,277,280,283,286,289,292,295,298,301,304,307,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367],{"title":111,"_path":110,"layout":13},{"title":11,"_path":7,"layout":13},{"title":117,"_path":116,"layout":13},{"title":236,"_path":237,"layout":13},"Block quote","/design-system/components/block-quote",{"title":239,"_path":240,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":242,"_path":243,"layout":13},"Button","/design-system/components/button",{"title":245,"_path":246,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":248,"_path":249,"layout":13},"Callout","/design-system/components/callout",{"title":251,"_path":252,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":254,"_path":255,"layout":13},"Card","/design-system/components/card",{"title":257,"_path":258,"layout":13},"Carousel","/design-system/components/carousel",{"title":260,"_path":261,"layout":13},"Category grid","/design-system/components/category-grid",{"title":263,"_path":264,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":266,"_path":267,"layout":13},"Chip","/design-system/components/chip",{"title":269,"_path":270,"layout":13},"Contact us","/design-system/components/contact-us",{"title":272,"_path":273,"layout":13},"Date input","/design-system/components/date-input",{"title":275,"_path":276,"layout":13},"Detail list","/design-system/components/detail-list",{"title":278,"_path":279,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":281,"_path":282,"layout":13},"File","/design-system/components/file",{"title":284,"_path":285,"layout":13},"Footer","/design-system/components/footer",{"title":287,"_path":288,"layout":13},"Form","/design-system/components/form",{"title":290,"_path":291,"layout":13},"Form alert","/design-system/components/form-alert",{"title":293,"_path":294,"layout":13},"Header","/design-system/components/header",{"title":296,"_path":297,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":299,"_path":300,"layout":13},"Input field","/design-system/components/input-field",{"title":302,"_path":303,"layout":13},"Key dates","/design-system/components/key-dates",{"title":305,"_path":306,"layout":13},"Media","/design-system/components/media",{"title":308,"_path":309,"layout":13},"Media embed","/design-system/components/media-embed",{"title":311,"_path":312,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":314,"_path":315,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":317,"_path":318,"layout":13},"Option button","/design-system/components/option-button",{"title":320,"_path":321,"layout":13},"Page action","/design-system/components/page-action",{"title":323,"_path":324,"layout":13},"Pagination","/design-system/components/pagination",{"title":326,"_path":327,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":329,"_path":330,"layout":13},"Profile","/design-system/components/profile",{"title":332,"_path":333,"layout":13},"Radio button","/design-system/components/radio-button",{"title":335,"_path":336,"layout":13},"Related links","/design-system/components/related-links",{"title":338,"_path":339,"layout":13},"Results listing","/design-system/components/results-listing",{"title":341,"_path":342,"layout":13},"Search bar","/design-system/components/search-bar",{"title":344,"_path":345,"layout":13},"Skip link","/design-system/components/skip-link",{"title":347,"_path":348,"layout":13},"Social share","/design-system/components/social-share",{"title":350,"_path":351,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":353,"_path":354,"layout":13},"Table","/design-system/components/table",{"title":356,"_path":357,"layout":13},"Tabs","/design-system/components/tabs",{"title":359,"_path":360,"layout":13},"Tag","/design-system/components/tag",{"title":362,"_path":363,"layout":13},"Text area","/design-system/components/text-area",{"title":365,"_path":366,"layout":13},"Timeline","/design-system/components/timeline",{"title":368,"_path":369,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":371,"_path":372,"children":373,"layout":13},"Ripple Framework","/framework",[374,375,393,415],{"title":371,"_path":372,"layout":13},{"title":376,"_path":377,"children":378},"Key Concepts","/framework/key-concepts",[379,381,384,387,390],{"title":186,"_path":380,"layout":13},"/framework/key-concepts/nuxt",{"title":382,"_path":383,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":385,"_path":386,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":388,"_path":389,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":391,"_path":392,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":394,"_path":395,"children":396},"Guides","/framework/guides",[397,400,403,406,409,412],{"title":398,"_path":399,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":401,"_path":402,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":404,"_path":405,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":407,"_path":408,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":410,"_path":411,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":413,"_path":414,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":416,"_path":417,"layout":13},"Core modules","/framework/core-modules",["Reactive",419],["Set"],["Reactive",421],{"module-navigation":422},null,true,1714695650865]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/alert/_payload.json b/design-system/components/alert/_payload.json
index 5247dde3ab..43ca4d05b4 100644
--- a/design-system/components/alert/_payload.json
+++ b/design-system/components/alert/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":104,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695152714]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":104,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695650916]
\ No newline at end of file
diff --git a/design-system/components/alert/index.html b/design-system/components/alert/index.html
index c3952bbf89..196333c648 100644
--- a/design-system/components/alert/index.html
+++ b/design-system/components/alert/index.html
@@ -27,61 +27,61 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseOl.jzxVYZcz.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseOl.f55gcGCc.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -93,8 +93,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Alert</h1><p class="rpl-type-p-large" data-v-3163c6df>The Alert component display required actions or important messages to users.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Alerts attract a user&#39;s attention with important messages or required actions. They appear at the top of pages.<!--]--></p><p><!--[-->Alerts are:<!--]--></p><ul><!--[--><li><!--[-->intrusive by design<!--]--></li><li><!--[-->created on purpose<!--]--></li><li><!--[-->dismissible by a user<!--]--></li><li><!--[-->not triggered by user action or back-end event.<!--]--></li><!--]--></ul><p><!--[-->Alerts sit flush at the top of pages above the header. Users can still interact with the page below an alert.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-alert--information&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-alert--information&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Only use an alert if its message or action applies to an entire product or site.<!--]--></li><li><!--[-->Write the alert in plain language that&#39;s clean and concise to minimise a user&#39;s cognitive load.<!--]--></li><li><!--[-->If the user needs more information or to complete an action, use link text for the call to action.<!--]--></li><li><!--[-->Place the alert at the top of the screen before the header.<!--]--></li><li><!--[-->Only use the critical alert setting for messages or actions that warrant it.<!--]--></li><li><!--[-->Limit actions to one per alert banner.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t use an alert if its message applies only to that feature or page.<!--]--></li><li><!--[-->Alerts shouldn&#39;t cover other components, only pushing down page content.<!--]--></li><li><!--[-->Don&#39;t use alerts for actions initiated by the user or backend.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->An alert’s styling is according to its meaning and uses semantic colours.<!--]--></p><p><!--[-->Alert colours include:<!--]--></p><ul><!--[--><li><!--[-->grey for general information<!--]--></li><li><!--[-->orange for a minor warning<!--]--></li><li><!--[-->red for a critical error or expected dangerous event.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="information" data-v-ea525968><a href="#information" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Information<!--]--></a></h2><ul><!--[--><li><!--[-->To communicate general information to users.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-alert--information&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-alert--information&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="warning" data-v-ea525968><a href="#warning" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Warning<!--]--></a></h2><ul><!--[--><li><!--[-->To communicate a minor warnings to users.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-alert--warning&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-alert--warning&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="critical" data-v-ea525968><a href="#critical" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Critical<!--]--></a></h2><ul><!--[--><li><!--[-->To communicate a critical error has occurred or dangerous event is expected to users.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-alert--danger&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-alert--danger&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="alert-ordering" data-v-fff5b905><a href="#alert-ordering" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Alert ordering<!--]--></a></h2><p><!--[-->So that users view alerts in order of importance, they appear in priority order:<!--]--></p><ol><!--[--><li><!--[-->Critical.<!--]--></li><li><!--[-->Warning.<!--]--></li><li><!--[-->Information.<!--]--></li><!--]--></ol><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-alert--stacked&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-alert--stacked&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/alert.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/alert/_payload.json">[{"state":1,"once":597,"_errors":599,"serverRendered":602,"path":7,"prerenderedAt":603},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":284,"$sdd-globals":300,"$sdd-navigation":302},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/alert":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":279,"_id":280,"_source":281,"_file":282,"_extension":283},"/design-system/components/alert","components",false,"","Alert","The Alert component display required actions or important messages to users.","page","Core",{"type":16,"children":17,"toc":265},"root",[18,27,33,38,63,68,73,80,113,119,137,141,147,152,157,175,181,189,192,198,206,210,216,224,228,231,237,242,261],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Alerts attract a user's attention with important messages or required actions. They appear at the top of pages.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Alerts are:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48,53,58],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"intrusive by design",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"created on purpose",{"type":19,"tag":43,"props":54,"children":55},{},[56],{"type":25,"value":57},"dismissible by a user",{"type":19,"tag":43,"props":59,"children":60},{},[61],{"type":25,"value":62},"not triggered by user action or back-end event.",{"type":19,"tag":28,"props":64,"children":65},{},[66],{"type":25,"value":67},"Alerts sit flush at the top of pages above the header. Users can still interact with the page below an alert.",{"type":19,"tag":69,"props":70,"children":72},"docs-example",{"id":71},"core-containers-alert--information",[],{"type":19,"tag":74,"props":75,"children":77},"h3",{"id":76},"when-and-how-to-use",[78],{"type":25,"value":79},"When and how to use",{"type":19,"tag":39,"props":81,"children":82},{},[83,88,93,98,103,108],{"type":19,"tag":43,"props":84,"children":85},{},[86],{"type":25,"value":87},"Only use an alert if its message or action applies to an entire product or site.",{"type":19,"tag":43,"props":89,"children":90},{},[91],{"type":25,"value":92},"Write the alert in plain language that's clean and concise to minimise a user's cognitive load.",{"type":19,"tag":43,"props":94,"children":95},{},[96],{"type":25,"value":97},"If the user needs more information or to complete an action, use link text for the call to action.",{"type":19,"tag":43,"props":99,"children":100},{},[101],{"type":25,"value":102},"Place the alert at the top of the screen before the header.",{"type":19,"tag":43,"props":104,"children":105},{},[106],{"type":25,"value":107},"Only use the critical alert setting for messages or actions that warrant it.",{"type":19,"tag":43,"props":109,"children":110},{},[111],{"type":25,"value":112},"Limit actions to one per alert banner.",{"type":19,"tag":74,"props":114,"children":116},{"id":115},"when-and-how-not-to-use",[117],{"type":25,"value":118},"When and how not to use",{"type":19,"tag":39,"props":120,"children":121},{},[122,127,132],{"type":19,"tag":43,"props":123,"children":124},{},[125],{"type":25,"value":126},"Don’t use an alert if its message applies only to that feature or page.",{"type":19,"tag":43,"props":128,"children":129},{},[130],{"type":25,"value":131},"Alerts shouldn't cover other components, only pushing down page content.",{"type":19,"tag":43,"props":133,"children":134},{},[135],{"type":25,"value":136},"Don't use alerts for actions initiated by the user or backend.",{"type":19,"tag":138,"props":139,"children":140},"hr",{},[],{"type":19,"tag":20,"props":142,"children":144},{"id":143},"variants",[145],{"type":25,"value":146},"Variants",{"type":19,"tag":28,"props":148,"children":149},{},[150],{"type":25,"value":151},"An alert’s styling is according to its meaning and uses semantic colours.",{"type":19,"tag":28,"props":153,"children":154},{},[155],{"type":25,"value":156},"Alert colours include:",{"type":19,"tag":39,"props":158,"children":159},{},[160,165,170],{"type":19,"tag":43,"props":161,"children":162},{},[163],{"type":25,"value":164},"grey for general information",{"type":19,"tag":43,"props":166,"children":167},{},[168],{"type":25,"value":169},"orange for a minor warning",{"type":19,"tag":43,"props":171,"children":172},{},[173],{"type":25,"value":174},"red for a critical error or expected dangerous event.",{"type":19,"tag":74,"props":176,"children":178},{"id":177},"information",[179],{"type":25,"value":180},"Information",{"type":19,"tag":39,"props":182,"children":183},{},[184],{"type":19,"tag":43,"props":185,"children":186},{},[187],{"type":25,"value":188},"To communicate general information to users.",{"type":19,"tag":69,"props":190,"children":191},{"id":71},[],{"type":19,"tag":74,"props":193,"children":195},{"id":194},"warning",[196],{"type":25,"value":197},"Warning",{"type":19,"tag":39,"props":199,"children":200},{},[201],{"type":19,"tag":43,"props":202,"children":203},{},[204],{"type":25,"value":205},"To communicate a minor warnings to users.",{"type":19,"tag":69,"props":207,"children":209},{"id":208},"core-containers-alert--warning",[],{"type":19,"tag":74,"props":211,"children":213},{"id":212},"critical",[214],{"type":25,"value":215},"Critical",{"type":19,"tag":39,"props":217,"children":218},{},[219],{"type":19,"tag":43,"props":220,"children":221},{},[222],{"type":25,"value":223},"To communicate a critical error has occurred or dangerous event is expected to users.",{"type":19,"tag":69,"props":225,"children":227},{"id":226},"core-containers-alert--danger",[],{"type":19,"tag":138,"props":229,"children":230},{},[],{"type":19,"tag":20,"props":232,"children":234},{"id":233},"alert-ordering",[235],{"type":25,"value":236},"Alert ordering",{"type":19,"tag":28,"props":238,"children":239},{},[240],{"type":25,"value":241},"So that users view alerts in order of importance, they appear in priority order:",{"type":19,"tag":243,"props":244,"children":245},"ol",{},[246,251,256],{"type":19,"tag":43,"props":247,"children":248},{},[249],{"type":25,"value":250},"Critical.",{"type":19,"tag":43,"props":252,"children":253},{},[254],{"type":25,"value":255},"Warning.",{"type":19,"tag":43,"props":257,"children":258},{},[259],{"type":25,"value":260},"Information.",{"type":19,"tag":69,"props":262,"children":264},{"id":263},"core-containers-alert--stacked",[],{"title":10,"searchDepth":266,"depth":266,"links":267},2,[268,273,278],{"id":22,"depth":266,"text":26,"children":269},[270,272],{"id":76,"depth":271,"text":79},3,{"id":115,"depth":271,"text":118},{"id":143,"depth":266,"text":146,"children":274},[275,276,277],{"id":177,"depth":271,"text":180},{"id":194,"depth":271,"text":197},{"id":212,"depth":271,"text":215},{"id":233,"depth":266,"text":236},"markdown","content:design-system:5.components:alert.md","content","design-system/5.components/alert.md","md",["ShallowRef",285],["ShallowReactive",286],{"/design-system/components/alert":287},[288,294],{"_path":289,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":290,"description":291,"layout":13,"label":14,"_type":279,"_id":292,"_source":281,"_file":293,"_extension":283},"/design-system/components/acknowledgment","Acknowledgement","The Acknowledgement component pays respect to the First Peoples of Victoria.","content:design-system:5.components:acknowledgment.md","design-system/5.components/acknowledgment.md",{"_path":295,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":296,"description":297,"layout":13,"label":14,"_type":279,"_id":298,"_source":281,"_file":299,"_extension":283},"/design-system/components/block-quote","Block quote","The Block quote component adds emphasis to a quote.","content:design-system:5.components:block-quote.md","design-system/5.components/block-quote.md",["ShallowRef",301],{},[303,308,549],{"title":304,"_path":305,"icon":306,"layout":307},"Ripple Design System","/","carbon:home","home",{"title":309,"_path":310,"children":311},"Design System","/design-system",[312,328,344,373,407],{"title":313,"_path":314,"children":315},"About","/design-system/about",[316,319,322,325],{"title":317,"_path":318,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":320,"_path":321,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":323,"_path":324,"layout":13},"Support","/design-system/about/getting-support",{"title":326,"_path":327,"layout":13},"Contributing","/design-system/about/contributing",{"title":329,"_path":330,"children":331},"Design","/design-system/design",[332,335,338,341],{"title":333,"_path":334,"layout":13},"Getting started","/design-system/design/getting-started",{"title":336,"_path":337,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":339,"_path":340,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":342,"_path":343,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":345,"_path":346,"children":347},"Develop","/design-system/develop",[348,350,352,355],{"title":333,"_path":349,"layout":13},"/design-system/develop/getting-started",{"title":326,"_path":351,"layout":13},"/design-system/develop/contributing",{"title":353,"_path":354,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":356,"children":357,"layout":13},"/design-system/develop/usage",[358,361,364,367,370],{"title":359,"_path":360,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":362,"_path":363,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":365,"_path":366,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":368,"_path":369,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":371,"_path":372,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":374,"_path":375,"children":376},"Styles","/design-system/styles",[377,380,383,386,389,392,395,398,401,404],{"title":378,"_path":379,"layout":13},"Colour","/design-system/styles/colour",{"title":381,"_path":382,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":384,"_path":385,"layout":13},"Grid","/design-system/styles/grid",{"title":387,"_path":388,"layout":13},"Icons","/design-system/styles/icons",{"title":390,"_path":391,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":393,"_path":394,"layout":13},"Layout","/design-system/styles/layout",{"title":396,"_path":397,"layout":13},"Logo","/design-system/styles/logo",{"title":399,"_path":400,"layout":13},"Motion","/design-system/styles/motion",{"title":402,"_path":403,"layout":13},"Spacing","/design-system/styles/spacing",{"title":405,"_path":406,"layout":13},"Typography","/design-system/styles/typography",{"title":408,"_path":409,"children":410},"Components","/design-system/components",[411,414,415,416,417,420,423,426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543,546],{"title":412,"_path":413,"layout":13},"Accordion","/design-system/components/accordion",{"title":290,"_path":289,"layout":13},{"title":11,"_path":7,"layout":13},{"title":296,"_path":295,"layout":13},{"title":418,"_path":419,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":421,"_path":422,"layout":13},"Button","/design-system/components/button",{"title":424,"_path":425,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":427,"_path":428,"layout":13},"Callout","/design-system/components/callout",{"title":430,"_path":431,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":433,"_path":434,"layout":13},"Card","/design-system/components/card",{"title":436,"_path":437,"layout":13},"Carousel","/design-system/components/carousel",{"title":439,"_path":440,"layout":13},"Category grid","/design-system/components/category-grid",{"title":442,"_path":443,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":445,"_path":446,"layout":13},"Chip","/design-system/components/chip",{"title":448,"_path":449,"layout":13},"Contact us","/design-system/components/contact-us",{"title":451,"_path":452,"layout":13},"Date input","/design-system/components/date-input",{"title":454,"_path":455,"layout":13},"Detail list","/design-system/components/detail-list",{"title":457,"_path":458,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":460,"_path":461,"layout":13},"File","/design-system/components/file",{"title":463,"_path":464,"layout":13},"Footer","/design-system/components/footer",{"title":466,"_path":467,"layout":13},"Form","/design-system/components/form",{"title":469,"_path":470,"layout":13},"Form alert","/design-system/components/form-alert",{"title":472,"_path":473,"layout":13},"Header","/design-system/components/header",{"title":475,"_path":476,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":478,"_path":479,"layout":13},"Input field","/design-system/components/input-field",{"title":481,"_path":482,"layout":13},"Key dates","/design-system/components/key-dates",{"title":484,"_path":485,"layout":13},"Media","/design-system/components/media",{"title":487,"_path":488,"layout":13},"Media embed","/design-system/components/media-embed",{"title":490,"_path":491,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":493,"_path":494,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":496,"_path":497,"layout":13},"Option button","/design-system/components/option-button",{"title":499,"_path":500,"layout":13},"Page action","/design-system/components/page-action",{"title":502,"_path":503,"layout":13},"Pagination","/design-system/components/pagination",{"title":505,"_path":506,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":508,"_path":509,"layout":13},"Profile","/design-system/components/profile",{"title":511,"_path":512,"layout":13},"Radio button","/design-system/components/radio-button",{"title":514,"_path":515,"layout":13},"Related links","/design-system/components/related-links",{"title":517,"_path":518,"layout":13},"Results listing","/design-system/components/results-listing",{"title":520,"_path":521,"layout":13},"Search bar","/design-system/components/search-bar",{"title":523,"_path":524,"layout":13},"Skip link","/design-system/components/skip-link",{"title":526,"_path":527,"layout":13},"Social share","/design-system/components/social-share",{"title":529,"_path":530,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":532,"_path":533,"layout":13},"Table","/design-system/components/table",{"title":535,"_path":536,"layout":13},"Tabs","/design-system/components/tabs",{"title":538,"_path":539,"layout":13},"Tag","/design-system/components/tag",{"title":541,"_path":542,"layout":13},"Text area","/design-system/components/text-area",{"title":544,"_path":545,"layout":13},"Timeline","/design-system/components/timeline",{"title":547,"_path":548,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":550,"_path":551,"children":552,"layout":13},"Ripple Framework","/framework",[553,554,572,594],{"title":550,"_path":551,"layout":13},{"title":555,"_path":556,"children":557},"Key Concepts","/framework/key-concepts",[558,560,563,566,569],{"title":365,"_path":559,"layout":13},"/framework/key-concepts/nuxt",{"title":561,"_path":562,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":564,"_path":565,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":567,"_path":568,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":570,"_path":571,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":573,"_path":574,"children":575},"Guides","/framework/guides",[576,579,582,585,588,591],{"title":577,"_path":578,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":580,"_path":581,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":583,"_path":584,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":586,"_path":587,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":589,"_path":590,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":592,"_path":593,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":595,"_path":596,"layout":13},"Core modules","/framework/core-modules",["Reactive",598],["Set"],["Reactive",600],{"module-navigation":601},null,true,1714695152714]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Alert</h1><p class="rpl-type-p-large" data-v-3163c6df>The Alert component display required actions or important messages to users.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Alerts attract a user&#39;s attention with important messages or required actions. They appear at the top of pages.<!--]--></p><p><!--[-->Alerts are:<!--]--></p><ul><!--[--><li><!--[-->intrusive by design<!--]--></li><li><!--[-->created on purpose<!--]--></li><li><!--[-->dismissible by a user<!--]--></li><li><!--[-->not triggered by user action or back-end event.<!--]--></li><!--]--></ul><p><!--[-->Alerts sit flush at the top of pages above the header. Users can still interact with the page below an alert.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-alert--information&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-alert--information&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Only use an alert if its message or action applies to an entire product or site.<!--]--></li><li><!--[-->Write the alert in plain language that&#39;s clean and concise to minimise a user&#39;s cognitive load.<!--]--></li><li><!--[-->If the user needs more information or to complete an action, use link text for the call to action.<!--]--></li><li><!--[-->Place the alert at the top of the screen before the header.<!--]--></li><li><!--[-->Only use the critical alert setting for messages or actions that warrant it.<!--]--></li><li><!--[-->Limit actions to one per alert banner.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t use an alert if its message applies only to that feature or page.<!--]--></li><li><!--[-->Alerts shouldn&#39;t cover other components, only pushing down page content.<!--]--></li><li><!--[-->Don&#39;t use alerts for actions initiated by the user or backend.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->An alert’s styling is according to its meaning and uses semantic colours.<!--]--></p><p><!--[-->Alert colours include:<!--]--></p><ul><!--[--><li><!--[-->grey for general information<!--]--></li><li><!--[-->orange for a minor warning<!--]--></li><li><!--[-->red for a critical error or expected dangerous event.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="information" data-v-ea525968><a href="#information" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Information<!--]--></a></h2><ul><!--[--><li><!--[-->To communicate general information to users.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-alert--information&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-alert--information&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="warning" data-v-ea525968><a href="#warning" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Warning<!--]--></a></h2><ul><!--[--><li><!--[-->To communicate a minor warnings to users.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-alert--warning&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-alert--warning&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="critical" data-v-ea525968><a href="#critical" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Critical<!--]--></a></h2><ul><!--[--><li><!--[-->To communicate a critical error has occurred or dangerous event is expected to users.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-alert--danger&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-alert--danger&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="alert-ordering" data-v-fff5b905><a href="#alert-ordering" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Alert ordering<!--]--></a></h2><p><!--[-->So that users view alerts in order of importance, they appear in priority order:<!--]--></p><ol><!--[--><li><!--[-->Critical.<!--]--></li><li><!--[-->Warning.<!--]--></li><li><!--[-->Information.<!--]--></li><!--]--></ol><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-alert--stacked&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-alert--stacked&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/alert.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/alert/_payload.json">[{"state":1,"once":597,"_errors":599,"serverRendered":602,"path":7,"prerenderedAt":603},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":284,"$sdd-globals":300,"$sdd-navigation":302},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/alert":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":279,"_id":280,"_source":281,"_file":282,"_extension":283},"/design-system/components/alert","components",false,"","Alert","The Alert component display required actions or important messages to users.","page","Core",{"type":16,"children":17,"toc":265},"root",[18,27,33,38,63,68,73,80,113,119,137,141,147,152,157,175,181,189,192,198,206,210,216,224,228,231,237,242,261],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Alerts attract a user's attention with important messages or required actions. They appear at the top of pages.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Alerts are:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48,53,58],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"intrusive by design",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"created on purpose",{"type":19,"tag":43,"props":54,"children":55},{},[56],{"type":25,"value":57},"dismissible by a user",{"type":19,"tag":43,"props":59,"children":60},{},[61],{"type":25,"value":62},"not triggered by user action or back-end event.",{"type":19,"tag":28,"props":64,"children":65},{},[66],{"type":25,"value":67},"Alerts sit flush at the top of pages above the header. Users can still interact with the page below an alert.",{"type":19,"tag":69,"props":70,"children":72},"docs-example",{"id":71},"core-containers-alert--information",[],{"type":19,"tag":74,"props":75,"children":77},"h3",{"id":76},"when-and-how-to-use",[78],{"type":25,"value":79},"When and how to use",{"type":19,"tag":39,"props":81,"children":82},{},[83,88,93,98,103,108],{"type":19,"tag":43,"props":84,"children":85},{},[86],{"type":25,"value":87},"Only use an alert if its message or action applies to an entire product or site.",{"type":19,"tag":43,"props":89,"children":90},{},[91],{"type":25,"value":92},"Write the alert in plain language that's clean and concise to minimise a user's cognitive load.",{"type":19,"tag":43,"props":94,"children":95},{},[96],{"type":25,"value":97},"If the user needs more information or to complete an action, use link text for the call to action.",{"type":19,"tag":43,"props":99,"children":100},{},[101],{"type":25,"value":102},"Place the alert at the top of the screen before the header.",{"type":19,"tag":43,"props":104,"children":105},{},[106],{"type":25,"value":107},"Only use the critical alert setting for messages or actions that warrant it.",{"type":19,"tag":43,"props":109,"children":110},{},[111],{"type":25,"value":112},"Limit actions to one per alert banner.",{"type":19,"tag":74,"props":114,"children":116},{"id":115},"when-and-how-not-to-use",[117],{"type":25,"value":118},"When and how not to use",{"type":19,"tag":39,"props":120,"children":121},{},[122,127,132],{"type":19,"tag":43,"props":123,"children":124},{},[125],{"type":25,"value":126},"Don’t use an alert if its message applies only to that feature or page.",{"type":19,"tag":43,"props":128,"children":129},{},[130],{"type":25,"value":131},"Alerts shouldn't cover other components, only pushing down page content.",{"type":19,"tag":43,"props":133,"children":134},{},[135],{"type":25,"value":136},"Don't use alerts for actions initiated by the user or backend.",{"type":19,"tag":138,"props":139,"children":140},"hr",{},[],{"type":19,"tag":20,"props":142,"children":144},{"id":143},"variants",[145],{"type":25,"value":146},"Variants",{"type":19,"tag":28,"props":148,"children":149},{},[150],{"type":25,"value":151},"An alert’s styling is according to its meaning and uses semantic colours.",{"type":19,"tag":28,"props":153,"children":154},{},[155],{"type":25,"value":156},"Alert colours include:",{"type":19,"tag":39,"props":158,"children":159},{},[160,165,170],{"type":19,"tag":43,"props":161,"children":162},{},[163],{"type":25,"value":164},"grey for general information",{"type":19,"tag":43,"props":166,"children":167},{},[168],{"type":25,"value":169},"orange for a minor warning",{"type":19,"tag":43,"props":171,"children":172},{},[173],{"type":25,"value":174},"red for a critical error or expected dangerous event.",{"type":19,"tag":74,"props":176,"children":178},{"id":177},"information",[179],{"type":25,"value":180},"Information",{"type":19,"tag":39,"props":182,"children":183},{},[184],{"type":19,"tag":43,"props":185,"children":186},{},[187],{"type":25,"value":188},"To communicate general information to users.",{"type":19,"tag":69,"props":190,"children":191},{"id":71},[],{"type":19,"tag":74,"props":193,"children":195},{"id":194},"warning",[196],{"type":25,"value":197},"Warning",{"type":19,"tag":39,"props":199,"children":200},{},[201],{"type":19,"tag":43,"props":202,"children":203},{},[204],{"type":25,"value":205},"To communicate a minor warnings to users.",{"type":19,"tag":69,"props":207,"children":209},{"id":208},"core-containers-alert--warning",[],{"type":19,"tag":74,"props":211,"children":213},{"id":212},"critical",[214],{"type":25,"value":215},"Critical",{"type":19,"tag":39,"props":217,"children":218},{},[219],{"type":19,"tag":43,"props":220,"children":221},{},[222],{"type":25,"value":223},"To communicate a critical error has occurred or dangerous event is expected to users.",{"type":19,"tag":69,"props":225,"children":227},{"id":226},"core-containers-alert--danger",[],{"type":19,"tag":138,"props":229,"children":230},{},[],{"type":19,"tag":20,"props":232,"children":234},{"id":233},"alert-ordering",[235],{"type":25,"value":236},"Alert ordering",{"type":19,"tag":28,"props":238,"children":239},{},[240],{"type":25,"value":241},"So that users view alerts in order of importance, they appear in priority order:",{"type":19,"tag":243,"props":244,"children":245},"ol",{},[246,251,256],{"type":19,"tag":43,"props":247,"children":248},{},[249],{"type":25,"value":250},"Critical.",{"type":19,"tag":43,"props":252,"children":253},{},[254],{"type":25,"value":255},"Warning.",{"type":19,"tag":43,"props":257,"children":258},{},[259],{"type":25,"value":260},"Information.",{"type":19,"tag":69,"props":262,"children":264},{"id":263},"core-containers-alert--stacked",[],{"title":10,"searchDepth":266,"depth":266,"links":267},2,[268,273,278],{"id":22,"depth":266,"text":26,"children":269},[270,272],{"id":76,"depth":271,"text":79},3,{"id":115,"depth":271,"text":118},{"id":143,"depth":266,"text":146,"children":274},[275,276,277],{"id":177,"depth":271,"text":180},{"id":194,"depth":271,"text":197},{"id":212,"depth":271,"text":215},{"id":233,"depth":266,"text":236},"markdown","content:design-system:5.components:alert.md","content","design-system/5.components/alert.md","md",["ShallowRef",285],["ShallowReactive",286],{"/design-system/components/alert":287},[288,294],{"_path":289,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":290,"description":291,"layout":13,"label":14,"_type":279,"_id":292,"_source":281,"_file":293,"_extension":283},"/design-system/components/acknowledgment","Acknowledgement","The Acknowledgement component pays respect to the First Peoples of Victoria.","content:design-system:5.components:acknowledgment.md","design-system/5.components/acknowledgment.md",{"_path":295,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":296,"description":297,"layout":13,"label":14,"_type":279,"_id":298,"_source":281,"_file":299,"_extension":283},"/design-system/components/block-quote","Block quote","The Block quote component adds emphasis to a quote.","content:design-system:5.components:block-quote.md","design-system/5.components/block-quote.md",["ShallowRef",301],{},[303,308,549],{"title":304,"_path":305,"icon":306,"layout":307},"Ripple Design System","/","carbon:home","home",{"title":309,"_path":310,"children":311},"Design System","/design-system",[312,328,344,373,407],{"title":313,"_path":314,"children":315},"About","/design-system/about",[316,319,322,325],{"title":317,"_path":318,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":320,"_path":321,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":323,"_path":324,"layout":13},"Support","/design-system/about/getting-support",{"title":326,"_path":327,"layout":13},"Contributing","/design-system/about/contributing",{"title":329,"_path":330,"children":331},"Design","/design-system/design",[332,335,338,341],{"title":333,"_path":334,"layout":13},"Getting started","/design-system/design/getting-started",{"title":336,"_path":337,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":339,"_path":340,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":342,"_path":343,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":345,"_path":346,"children":347},"Develop","/design-system/develop",[348,350,352,355],{"title":333,"_path":349,"layout":13},"/design-system/develop/getting-started",{"title":326,"_path":351,"layout":13},"/design-system/develop/contributing",{"title":353,"_path":354,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":356,"children":357,"layout":13},"/design-system/develop/usage",[358,361,364,367,370],{"title":359,"_path":360,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":362,"_path":363,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":365,"_path":366,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":368,"_path":369,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":371,"_path":372,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":374,"_path":375,"children":376},"Styles","/design-system/styles",[377,380,383,386,389,392,395,398,401,404],{"title":378,"_path":379,"layout":13},"Colour","/design-system/styles/colour",{"title":381,"_path":382,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":384,"_path":385,"layout":13},"Grid","/design-system/styles/grid",{"title":387,"_path":388,"layout":13},"Icons","/design-system/styles/icons",{"title":390,"_path":391,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":393,"_path":394,"layout":13},"Layout","/design-system/styles/layout",{"title":396,"_path":397,"layout":13},"Logo","/design-system/styles/logo",{"title":399,"_path":400,"layout":13},"Motion","/design-system/styles/motion",{"title":402,"_path":403,"layout":13},"Spacing","/design-system/styles/spacing",{"title":405,"_path":406,"layout":13},"Typography","/design-system/styles/typography",{"title":408,"_path":409,"children":410},"Components","/design-system/components",[411,414,415,416,417,420,423,426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543,546],{"title":412,"_path":413,"layout":13},"Accordion","/design-system/components/accordion",{"title":290,"_path":289,"layout":13},{"title":11,"_path":7,"layout":13},{"title":296,"_path":295,"layout":13},{"title":418,"_path":419,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":421,"_path":422,"layout":13},"Button","/design-system/components/button",{"title":424,"_path":425,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":427,"_path":428,"layout":13},"Callout","/design-system/components/callout",{"title":430,"_path":431,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":433,"_path":434,"layout":13},"Card","/design-system/components/card",{"title":436,"_path":437,"layout":13},"Carousel","/design-system/components/carousel",{"title":439,"_path":440,"layout":13},"Category grid","/design-system/components/category-grid",{"title":442,"_path":443,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":445,"_path":446,"layout":13},"Chip","/design-system/components/chip",{"title":448,"_path":449,"layout":13},"Contact us","/design-system/components/contact-us",{"title":451,"_path":452,"layout":13},"Date input","/design-system/components/date-input",{"title":454,"_path":455,"layout":13},"Detail list","/design-system/components/detail-list",{"title":457,"_path":458,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":460,"_path":461,"layout":13},"File","/design-system/components/file",{"title":463,"_path":464,"layout":13},"Footer","/design-system/components/footer",{"title":466,"_path":467,"layout":13},"Form","/design-system/components/form",{"title":469,"_path":470,"layout":13},"Form alert","/design-system/components/form-alert",{"title":472,"_path":473,"layout":13},"Header","/design-system/components/header",{"title":475,"_path":476,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":478,"_path":479,"layout":13},"Input field","/design-system/components/input-field",{"title":481,"_path":482,"layout":13},"Key dates","/design-system/components/key-dates",{"title":484,"_path":485,"layout":13},"Media","/design-system/components/media",{"title":487,"_path":488,"layout":13},"Media embed","/design-system/components/media-embed",{"title":490,"_path":491,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":493,"_path":494,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":496,"_path":497,"layout":13},"Option button","/design-system/components/option-button",{"title":499,"_path":500,"layout":13},"Page action","/design-system/components/page-action",{"title":502,"_path":503,"layout":13},"Pagination","/design-system/components/pagination",{"title":505,"_path":506,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":508,"_path":509,"layout":13},"Profile","/design-system/components/profile",{"title":511,"_path":512,"layout":13},"Radio button","/design-system/components/radio-button",{"title":514,"_path":515,"layout":13},"Related links","/design-system/components/related-links",{"title":517,"_path":518,"layout":13},"Results listing","/design-system/components/results-listing",{"title":520,"_path":521,"layout":13},"Search bar","/design-system/components/search-bar",{"title":523,"_path":524,"layout":13},"Skip link","/design-system/components/skip-link",{"title":526,"_path":527,"layout":13},"Social share","/design-system/components/social-share",{"title":529,"_path":530,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":532,"_path":533,"layout":13},"Table","/design-system/components/table",{"title":535,"_path":536,"layout":13},"Tabs","/design-system/components/tabs",{"title":538,"_path":539,"layout":13},"Tag","/design-system/components/tag",{"title":541,"_path":542,"layout":13},"Text area","/design-system/components/text-area",{"title":544,"_path":545,"layout":13},"Timeline","/design-system/components/timeline",{"title":547,"_path":548,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":550,"_path":551,"children":552,"layout":13},"Ripple Framework","/framework",[553,554,572,594],{"title":550,"_path":551,"layout":13},{"title":555,"_path":556,"children":557},"Key Concepts","/framework/key-concepts",[558,560,563,566,569],{"title":365,"_path":559,"layout":13},"/framework/key-concepts/nuxt",{"title":561,"_path":562,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":564,"_path":565,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":567,"_path":568,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":570,"_path":571,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":573,"_path":574,"children":575},"Guides","/framework/guides",[576,579,582,585,588,591],{"title":577,"_path":578,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":580,"_path":581,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":583,"_path":584,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":586,"_path":587,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":589,"_path":590,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":592,"_path":593,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":595,"_path":596,"layout":13},"Core modules","/framework/core-modules",["Reactive",598],["Set"],["Reactive",600],{"module-navigation":601},null,true,1714695650916]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/block-quote/_payload.json b/design-system/components/block-quote/_payload.json
index 1766f5eeb4..2ae3e2d73e 100644
--- a/design-system/components/block-quote/_payload.json
+++ b/design-system/components/block-quote/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":104,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695152721]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":104,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695650942]
\ No newline at end of file
diff --git a/design-system/components/block-quote/index.html b/design-system/components/block-quote/index.html
index e89336ffc5..a57ec3e850 100644
--- a/design-system/components/block-quote/index.html
+++ b/design-system/components/block-quote/index.html
@@ -28,63 +28,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -96,8 +96,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Block quote</h1><p class="rpl-type-p-large" data-v-3163c6df>The Block quote component adds emphasis to a quote.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use block quotes to emphasise:<!--]--></p><ul><!--[--><li><!--[-->important information<!--]--></li><li><!--[-->excerpts from a source.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-content--blockquote&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--blockquote&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Only use text in block quotes.<!--]--></li><li><!--[-->Always put all the quoted text inside opening and closing quotation marks (&#39; &#39;).<!--]--></li><li><!--[-->Include optional author metadata.<!--]--></li><li><!--[-->You can feature more than one quote by a single author.<!--]--></li><li><!--[-->Only use in content sections.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Do not repeat metadata across different quotes.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->The block quote uses colour to add subtle visual prominence.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-content--blockquote&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--blockquote&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/block-quote.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/block-quote/_payload.json">[{"state":1,"once":475,"_errors":477,"serverRendered":480,"path":7,"prerenderedAt":481},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":162,"$sdd-globals":178,"$sdd-navigation":180},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/block-quote":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":157,"_id":158,"_source":159,"_file":160,"_extension":161},"/design-system/components/block-quote","components",false,"","Block quote","The Block quote component adds emphasis to a quote.","page","Core",{"type":16,"children":17,"toc":148},"root",[18,27,33,48,53,60,88,94,102,106,112,117,124],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use block quotes to emphasise:",{"type":19,"tag":34,"props":35,"children":36},"ul",{},[37,43],{"type":19,"tag":38,"props":39,"children":40},"li",{},[41],{"type":25,"value":42},"important information",{"type":19,"tag":38,"props":44,"children":45},{},[46],{"type":25,"value":47},"excerpts from a source.",{"type":19,"tag":49,"props":50,"children":52},"docs-example",{"id":51},"core-containers-content--blockquote",[],{"type":19,"tag":54,"props":55,"children":57},"h3",{"id":56},"when-and-how-to-use",[58],{"type":25,"value":59},"When and how to use",{"type":19,"tag":34,"props":61,"children":62},{},[63,68,73,78,83],{"type":19,"tag":38,"props":64,"children":65},{},[66],{"type":25,"value":67},"Only use text in block quotes.",{"type":19,"tag":38,"props":69,"children":70},{},[71],{"type":25,"value":72},"Always put all the quoted text inside opening and closing quotation marks (' ').",{"type":19,"tag":38,"props":74,"children":75},{},[76],{"type":25,"value":77},"Include optional author metadata.",{"type":19,"tag":38,"props":79,"children":80},{},[81],{"type":25,"value":82},"You can feature more than one quote by a single author.",{"type":19,"tag":38,"props":84,"children":85},{},[86],{"type":25,"value":87},"Only use in content sections.",{"type":19,"tag":54,"props":89,"children":91},{"id":90},"when-and-how-not-to-use",[92],{"type":25,"value":93},"When and how not to use",{"type":19,"tag":34,"props":95,"children":96},{},[97],{"type":19,"tag":38,"props":98,"children":99},{},[100],{"type":25,"value":101},"Do not repeat metadata across different quotes.",{"type":19,"tag":103,"props":104,"children":105},"hr",{},[],{"type":19,"tag":20,"props":107,"children":109},{"id":108},"theming",[110],{"type":25,"value":111},"Theming",{"type":19,"tag":28,"props":113,"children":114},{},[115],{"type":25,"value":116},"The block quote uses colour to add subtle visual prominence.",{"type":19,"tag":118,"props":119,"children":120},"docs-theme-chooser",{},[121],{"type":19,"tag":49,"props":122,"children":123},{"id":51},[],{"type":19,"tag":28,"props":125,"children":126},{},[127,129,138,140,146],{"type":25,"value":128},"To create your own theme, see ",{"type":19,"tag":130,"props":131,"children":135},"a",{"href":132,"rel":133},"https://www.vic.gov.au",[134],"nofollow",[136],{"type":25,"value":137},"theming guidance for designers",{"type":25,"value":139}," or ",{"type":19,"tag":130,"props":141,"children":143},{"href":132,"rel":142},[134],[144],{"type":25,"value":145},"theming guidance for developers",{"type":25,"value":147},".",{"title":10,"searchDepth":149,"depth":149,"links":150},2,[151,156],{"id":22,"depth":149,"text":26,"children":152},[153,155],{"id":56,"depth":154,"text":59},3,{"id":90,"depth":154,"text":93},{"id":108,"depth":149,"text":111},"markdown","content:design-system:5.components:block-quote.md","content","design-system/5.components/block-quote.md","md",["ShallowRef",163],["ShallowReactive",164],{"/design-system/components/block-quote":165},[166,172],{"_path":167,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":168,"description":169,"layout":13,"label":14,"_type":157,"_id":170,"_source":159,"_file":171,"_extension":161},"/design-system/components/alert","Alert","The Alert component display required actions or important messages to users.","content:design-system:5.components:alert.md","design-system/5.components/alert.md",{"_path":173,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":174,"description":175,"layout":13,"label":14,"_type":157,"_id":176,"_source":159,"_file":177,"_extension":161},"/design-system/components/breadcrumb","Breadcrumb","The Breadcrumb component shows a user their location on a website. This allows quick navigation between page levels.","content:design-system:5.components:breadcrumb.md","design-system/5.components/breadcrumb.md",["ShallowRef",179],{},[181,186,427],{"title":182,"_path":183,"icon":184,"layout":185},"Ripple Design System","/","carbon:home","home",{"title":187,"_path":188,"children":189},"Design System","/design-system",[190,206,222,251,285],{"title":191,"_path":192,"children":193},"About","/design-system/about",[194,197,200,203],{"title":195,"_path":196,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":198,"_path":199,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":201,"_path":202,"layout":13},"Support","/design-system/about/getting-support",{"title":204,"_path":205,"layout":13},"Contributing","/design-system/about/contributing",{"title":207,"_path":208,"children":209},"Design","/design-system/design",[210,213,216,219],{"title":211,"_path":212,"layout":13},"Getting started","/design-system/design/getting-started",{"title":214,"_path":215,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":217,"_path":218,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":220,"_path":221,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":223,"_path":224,"children":225},"Develop","/design-system/develop",[226,228,230,233],{"title":211,"_path":227,"layout":13},"/design-system/develop/getting-started",{"title":204,"_path":229,"layout":13},"/design-system/develop/contributing",{"title":231,"_path":232,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":234,"children":235,"layout":13},"/design-system/develop/usage",[236,239,242,245,248],{"title":237,"_path":238,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":240,"_path":241,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":243,"_path":244,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":246,"_path":247,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":249,"_path":250,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":252,"_path":253,"children":254},"Styles","/design-system/styles",[255,258,261,264,267,270,273,276,279,282],{"title":256,"_path":257,"layout":13},"Colour","/design-system/styles/colour",{"title":259,"_path":260,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":262,"_path":263,"layout":13},"Grid","/design-system/styles/grid",{"title":265,"_path":266,"layout":13},"Icons","/design-system/styles/icons",{"title":268,"_path":269,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":271,"_path":272,"layout":13},"Layout","/design-system/styles/layout",{"title":274,"_path":275,"layout":13},"Logo","/design-system/styles/logo",{"title":277,"_path":278,"layout":13},"Motion","/design-system/styles/motion",{"title":280,"_path":281,"layout":13},"Spacing","/design-system/styles/spacing",{"title":283,"_path":284,"layout":13},"Typography","/design-system/styles/typography",{"title":286,"_path":287,"children":288},"Components","/design-system/components",[289,292,295,296,297,298,301,304,307,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424],{"title":290,"_path":291,"layout":13},"Accordion","/design-system/components/accordion",{"title":293,"_path":294,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":168,"_path":167,"layout":13},{"title":11,"_path":7,"layout":13},{"title":174,"_path":173,"layout":13},{"title":299,"_path":300,"layout":13},"Button","/design-system/components/button",{"title":302,"_path":303,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":305,"_path":306,"layout":13},"Callout","/design-system/components/callout",{"title":308,"_path":309,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":311,"_path":312,"layout":13},"Card","/design-system/components/card",{"title":314,"_path":315,"layout":13},"Carousel","/design-system/components/carousel",{"title":317,"_path":318,"layout":13},"Category grid","/design-system/components/category-grid",{"title":320,"_path":321,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":323,"_path":324,"layout":13},"Chip","/design-system/components/chip",{"title":326,"_path":327,"layout":13},"Contact us","/design-system/components/contact-us",{"title":329,"_path":330,"layout":13},"Date input","/design-system/components/date-input",{"title":332,"_path":333,"layout":13},"Detail list","/design-system/components/detail-list",{"title":335,"_path":336,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":338,"_path":339,"layout":13},"File","/design-system/components/file",{"title":341,"_path":342,"layout":13},"Footer","/design-system/components/footer",{"title":344,"_path":345,"layout":13},"Form","/design-system/components/form",{"title":347,"_path":348,"layout":13},"Form alert","/design-system/components/form-alert",{"title":350,"_path":351,"layout":13},"Header","/design-system/components/header",{"title":353,"_path":354,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":356,"_path":357,"layout":13},"Input field","/design-system/components/input-field",{"title":359,"_path":360,"layout":13},"Key dates","/design-system/components/key-dates",{"title":362,"_path":363,"layout":13},"Media","/design-system/components/media",{"title":365,"_path":366,"layout":13},"Media embed","/design-system/components/media-embed",{"title":368,"_path":369,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":371,"_path":372,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":374,"_path":375,"layout":13},"Option button","/design-system/components/option-button",{"title":377,"_path":378,"layout":13},"Page action","/design-system/components/page-action",{"title":380,"_path":381,"layout":13},"Pagination","/design-system/components/pagination",{"title":383,"_path":384,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":386,"_path":387,"layout":13},"Profile","/design-system/components/profile",{"title":389,"_path":390,"layout":13},"Radio button","/design-system/components/radio-button",{"title":392,"_path":393,"layout":13},"Related links","/design-system/components/related-links",{"title":395,"_path":396,"layout":13},"Results listing","/design-system/components/results-listing",{"title":398,"_path":399,"layout":13},"Search bar","/design-system/components/search-bar",{"title":401,"_path":402,"layout":13},"Skip link","/design-system/components/skip-link",{"title":404,"_path":405,"layout":13},"Social share","/design-system/components/social-share",{"title":407,"_path":408,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":410,"_path":411,"layout":13},"Table","/design-system/components/table",{"title":413,"_path":414,"layout":13},"Tabs","/design-system/components/tabs",{"title":416,"_path":417,"layout":13},"Tag","/design-system/components/tag",{"title":419,"_path":420,"layout":13},"Text area","/design-system/components/text-area",{"title":422,"_path":423,"layout":13},"Timeline","/design-system/components/timeline",{"title":425,"_path":426,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":428,"_path":429,"children":430,"layout":13},"Ripple Framework","/framework",[431,432,450,472],{"title":428,"_path":429,"layout":13},{"title":433,"_path":434,"children":435},"Key Concepts","/framework/key-concepts",[436,438,441,444,447],{"title":243,"_path":437,"layout":13},"/framework/key-concepts/nuxt",{"title":439,"_path":440,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":442,"_path":443,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":445,"_path":446,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":448,"_path":449,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":451,"_path":452,"children":453},"Guides","/framework/guides",[454,457,460,463,466,469],{"title":455,"_path":456,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":458,"_path":459,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":461,"_path":462,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":464,"_path":465,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":467,"_path":468,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":470,"_path":471,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":473,"_path":474,"layout":13},"Core modules","/framework/core-modules",["Reactive",476],["Set"],["Reactive",478],{"module-navigation":479},null,true,1714695152721]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Block quote</h1><p class="rpl-type-p-large" data-v-3163c6df>The Block quote component adds emphasis to a quote.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use block quotes to emphasise:<!--]--></p><ul><!--[--><li><!--[-->important information<!--]--></li><li><!--[-->excerpts from a source.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-content--blockquote&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--blockquote&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Only use text in block quotes.<!--]--></li><li><!--[-->Always put all the quoted text inside opening and closing quotation marks (&#39; &#39;).<!--]--></li><li><!--[-->Include optional author metadata.<!--]--></li><li><!--[-->You can feature more than one quote by a single author.<!--]--></li><li><!--[-->Only use in content sections.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Do not repeat metadata across different quotes.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->The block quote uses colour to add subtle visual prominence.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-content--blockquote&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--blockquote&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/block-quote.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/block-quote/_payload.json">[{"state":1,"once":475,"_errors":477,"serverRendered":480,"path":7,"prerenderedAt":481},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":162,"$sdd-globals":178,"$sdd-navigation":180},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/block-quote":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":157,"_id":158,"_source":159,"_file":160,"_extension":161},"/design-system/components/block-quote","components",false,"","Block quote","The Block quote component adds emphasis to a quote.","page","Core",{"type":16,"children":17,"toc":148},"root",[18,27,33,48,53,60,88,94,102,106,112,117,124],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use block quotes to emphasise:",{"type":19,"tag":34,"props":35,"children":36},"ul",{},[37,43],{"type":19,"tag":38,"props":39,"children":40},"li",{},[41],{"type":25,"value":42},"important information",{"type":19,"tag":38,"props":44,"children":45},{},[46],{"type":25,"value":47},"excerpts from a source.",{"type":19,"tag":49,"props":50,"children":52},"docs-example",{"id":51},"core-containers-content--blockquote",[],{"type":19,"tag":54,"props":55,"children":57},"h3",{"id":56},"when-and-how-to-use",[58],{"type":25,"value":59},"When and how to use",{"type":19,"tag":34,"props":61,"children":62},{},[63,68,73,78,83],{"type":19,"tag":38,"props":64,"children":65},{},[66],{"type":25,"value":67},"Only use text in block quotes.",{"type":19,"tag":38,"props":69,"children":70},{},[71],{"type":25,"value":72},"Always put all the quoted text inside opening and closing quotation marks (' ').",{"type":19,"tag":38,"props":74,"children":75},{},[76],{"type":25,"value":77},"Include optional author metadata.",{"type":19,"tag":38,"props":79,"children":80},{},[81],{"type":25,"value":82},"You can feature more than one quote by a single author.",{"type":19,"tag":38,"props":84,"children":85},{},[86],{"type":25,"value":87},"Only use in content sections.",{"type":19,"tag":54,"props":89,"children":91},{"id":90},"when-and-how-not-to-use",[92],{"type":25,"value":93},"When and how not to use",{"type":19,"tag":34,"props":95,"children":96},{},[97],{"type":19,"tag":38,"props":98,"children":99},{},[100],{"type":25,"value":101},"Do not repeat metadata across different quotes.",{"type":19,"tag":103,"props":104,"children":105},"hr",{},[],{"type":19,"tag":20,"props":107,"children":109},{"id":108},"theming",[110],{"type":25,"value":111},"Theming",{"type":19,"tag":28,"props":113,"children":114},{},[115],{"type":25,"value":116},"The block quote uses colour to add subtle visual prominence.",{"type":19,"tag":118,"props":119,"children":120},"docs-theme-chooser",{},[121],{"type":19,"tag":49,"props":122,"children":123},{"id":51},[],{"type":19,"tag":28,"props":125,"children":126},{},[127,129,138,140,146],{"type":25,"value":128},"To create your own theme, see ",{"type":19,"tag":130,"props":131,"children":135},"a",{"href":132,"rel":133},"https://www.vic.gov.au",[134],"nofollow",[136],{"type":25,"value":137},"theming guidance for designers",{"type":25,"value":139}," or ",{"type":19,"tag":130,"props":141,"children":143},{"href":132,"rel":142},[134],[144],{"type":25,"value":145},"theming guidance for developers",{"type":25,"value":147},".",{"title":10,"searchDepth":149,"depth":149,"links":150},2,[151,156],{"id":22,"depth":149,"text":26,"children":152},[153,155],{"id":56,"depth":154,"text":59},3,{"id":90,"depth":154,"text":93},{"id":108,"depth":149,"text":111},"markdown","content:design-system:5.components:block-quote.md","content","design-system/5.components/block-quote.md","md",["ShallowRef",163],["ShallowReactive",164],{"/design-system/components/block-quote":165},[166,172],{"_path":167,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":168,"description":169,"layout":13,"label":14,"_type":157,"_id":170,"_source":159,"_file":171,"_extension":161},"/design-system/components/alert","Alert","The Alert component display required actions or important messages to users.","content:design-system:5.components:alert.md","design-system/5.components/alert.md",{"_path":173,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":174,"description":175,"layout":13,"label":14,"_type":157,"_id":176,"_source":159,"_file":177,"_extension":161},"/design-system/components/breadcrumb","Breadcrumb","The Breadcrumb component shows a user their location on a website. This allows quick navigation between page levels.","content:design-system:5.components:breadcrumb.md","design-system/5.components/breadcrumb.md",["ShallowRef",179],{},[181,186,427],{"title":182,"_path":183,"icon":184,"layout":185},"Ripple Design System","/","carbon:home","home",{"title":187,"_path":188,"children":189},"Design System","/design-system",[190,206,222,251,285],{"title":191,"_path":192,"children":193},"About","/design-system/about",[194,197,200,203],{"title":195,"_path":196,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":198,"_path":199,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":201,"_path":202,"layout":13},"Support","/design-system/about/getting-support",{"title":204,"_path":205,"layout":13},"Contributing","/design-system/about/contributing",{"title":207,"_path":208,"children":209},"Design","/design-system/design",[210,213,216,219],{"title":211,"_path":212,"layout":13},"Getting started","/design-system/design/getting-started",{"title":214,"_path":215,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":217,"_path":218,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":220,"_path":221,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":223,"_path":224,"children":225},"Develop","/design-system/develop",[226,228,230,233],{"title":211,"_path":227,"layout":13},"/design-system/develop/getting-started",{"title":204,"_path":229,"layout":13},"/design-system/develop/contributing",{"title":231,"_path":232,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":234,"children":235,"layout":13},"/design-system/develop/usage",[236,239,242,245,248],{"title":237,"_path":238,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":240,"_path":241,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":243,"_path":244,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":246,"_path":247,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":249,"_path":250,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":252,"_path":253,"children":254},"Styles","/design-system/styles",[255,258,261,264,267,270,273,276,279,282],{"title":256,"_path":257,"layout":13},"Colour","/design-system/styles/colour",{"title":259,"_path":260,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":262,"_path":263,"layout":13},"Grid","/design-system/styles/grid",{"title":265,"_path":266,"layout":13},"Icons","/design-system/styles/icons",{"title":268,"_path":269,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":271,"_path":272,"layout":13},"Layout","/design-system/styles/layout",{"title":274,"_path":275,"layout":13},"Logo","/design-system/styles/logo",{"title":277,"_path":278,"layout":13},"Motion","/design-system/styles/motion",{"title":280,"_path":281,"layout":13},"Spacing","/design-system/styles/spacing",{"title":283,"_path":284,"layout":13},"Typography","/design-system/styles/typography",{"title":286,"_path":287,"children":288},"Components","/design-system/components",[289,292,295,296,297,298,301,304,307,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424],{"title":290,"_path":291,"layout":13},"Accordion","/design-system/components/accordion",{"title":293,"_path":294,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":168,"_path":167,"layout":13},{"title":11,"_path":7,"layout":13},{"title":174,"_path":173,"layout":13},{"title":299,"_path":300,"layout":13},"Button","/design-system/components/button",{"title":302,"_path":303,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":305,"_path":306,"layout":13},"Callout","/design-system/components/callout",{"title":308,"_path":309,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":311,"_path":312,"layout":13},"Card","/design-system/components/card",{"title":314,"_path":315,"layout":13},"Carousel","/design-system/components/carousel",{"title":317,"_path":318,"layout":13},"Category grid","/design-system/components/category-grid",{"title":320,"_path":321,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":323,"_path":324,"layout":13},"Chip","/design-system/components/chip",{"title":326,"_path":327,"layout":13},"Contact us","/design-system/components/contact-us",{"title":329,"_path":330,"layout":13},"Date input","/design-system/components/date-input",{"title":332,"_path":333,"layout":13},"Detail list","/design-system/components/detail-list",{"title":335,"_path":336,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":338,"_path":339,"layout":13},"File","/design-system/components/file",{"title":341,"_path":342,"layout":13},"Footer","/design-system/components/footer",{"title":344,"_path":345,"layout":13},"Form","/design-system/components/form",{"title":347,"_path":348,"layout":13},"Form alert","/design-system/components/form-alert",{"title":350,"_path":351,"layout":13},"Header","/design-system/components/header",{"title":353,"_path":354,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":356,"_path":357,"layout":13},"Input field","/design-system/components/input-field",{"title":359,"_path":360,"layout":13},"Key dates","/design-system/components/key-dates",{"title":362,"_path":363,"layout":13},"Media","/design-system/components/media",{"title":365,"_path":366,"layout":13},"Media embed","/design-system/components/media-embed",{"title":368,"_path":369,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":371,"_path":372,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":374,"_path":375,"layout":13},"Option button","/design-system/components/option-button",{"title":377,"_path":378,"layout":13},"Page action","/design-system/components/page-action",{"title":380,"_path":381,"layout":13},"Pagination","/design-system/components/pagination",{"title":383,"_path":384,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":386,"_path":387,"layout":13},"Profile","/design-system/components/profile",{"title":389,"_path":390,"layout":13},"Radio button","/design-system/components/radio-button",{"title":392,"_path":393,"layout":13},"Related links","/design-system/components/related-links",{"title":395,"_path":396,"layout":13},"Results listing","/design-system/components/results-listing",{"title":398,"_path":399,"layout":13},"Search bar","/design-system/components/search-bar",{"title":401,"_path":402,"layout":13},"Skip link","/design-system/components/skip-link",{"title":404,"_path":405,"layout":13},"Social share","/design-system/components/social-share",{"title":407,"_path":408,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":410,"_path":411,"layout":13},"Table","/design-system/components/table",{"title":413,"_path":414,"layout":13},"Tabs","/design-system/components/tabs",{"title":416,"_path":417,"layout":13},"Tag","/design-system/components/tag",{"title":419,"_path":420,"layout":13},"Text area","/design-system/components/text-area",{"title":422,"_path":423,"layout":13},"Timeline","/design-system/components/timeline",{"title":425,"_path":426,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":428,"_path":429,"children":430,"layout":13},"Ripple Framework","/framework",[431,432,450,472],{"title":428,"_path":429,"layout":13},{"title":433,"_path":434,"children":435},"Key Concepts","/framework/key-concepts",[436,438,441,444,447],{"title":243,"_path":437,"layout":13},"/framework/key-concepts/nuxt",{"title":439,"_path":440,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":442,"_path":443,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":445,"_path":446,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":448,"_path":449,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":451,"_path":452,"children":453},"Guides","/framework/guides",[454,457,460,463,466,469],{"title":455,"_path":456,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":458,"_path":459,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":461,"_path":462,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":464,"_path":465,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":467,"_path":468,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":470,"_path":471,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":473,"_path":474,"layout":13},"Core modules","/framework/core-modules",["Reactive",476],["Set"],["Reactive",478],{"module-navigation":479},null,true,1714695650942]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/breadcrumb/_payload.json b/design-system/components/breadcrumb/_payload.json
index 2b2a443be8..fb1849cc21 100644
--- a/design-system/components/breadcrumb/_payload.json
+++ b/design-system/components/breadcrumb/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":104,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695152735]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":104,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695650946]
\ No newline at end of file
diff --git a/design-system/components/breadcrumb/index.html b/design-system/components/breadcrumb/index.html
index ec64c75edb..d4aa099185 100644
--- a/design-system/components/breadcrumb/index.html
+++ b/design-system/components/breadcrumb/index.html
@@ -28,63 +28,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -96,8 +96,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Breadcrumb</h1><p class="rpl-type-p-large" data-v-3163c6df>The Breadcrumb component shows a user their location on a website. This allows quick navigation between page levels.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use breadcrumbs to help users understand where they are within a website’s structure. A breadcrumb shows as a series of links and icons in a line.<!--]--></p><p><!--[-->A breadcrumb displays the parent page, icons and the current page.<!--]--></p><ul><!--[--><li><!--[-->Parent page: this links to the page above the current page in the information architecture.<!--]--></li><li><!--[-->Icons: chevrons (v-shaped icons) sitting between the parent and current pages are designed to visualise site hierarchy.<!--]--></li><li><!--[-->Current page: this is the page the user is currently on.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-breadcrumbs--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-breadcrumbs--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Display the breadcrumb at the top left of a page, below the main navigation but above the page title.<!--]--></li><li><!--[-->Always start the breadcrumb with the parent page.<!--]--></li><li><!--[-->Always end the breadcrumb with the current page.<!--]--></li><li><!--[-->Truncate longer names if you&#39;ve reached the maximum amount of links.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->The breadcrumb does not replace primary navigation.<!--]--></li><li><!--[-->Do not use the breadcrumb to show progress through a linear journey.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="how-the-breadcrumb-works" data-v-fff5b905><a href="#how-the-breadcrumb-works" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->How the Breadcrumb works<!--]--></a></h2><p><!--[-->On devices with a page resolution under 768px, the breadcrumb displays the parent link only.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->The Breadcrumb uses colour to:<!--]--></p><ul><!--[--><li><!--[-->represent possible interactions<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-breadcrumbs--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-breadcrumbs--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/breadcrumb.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/breadcrumb/_payload.json">[{"state":1,"once":513,"_errors":515,"serverRendered":518,"path":7,"prerenderedAt":519},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":200,"$sdd-globals":216,"$sdd-navigation":218},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/breadcrumb":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":195,"_id":196,"_source":197,"_file":198,"_extension":199},"/design-system/components/breadcrumb","components",false,"","Breadcrumb","The Breadcrumb component shows a user their location on a website. This allows quick navigation between page levels.","page","Core",{"type":16,"children":17,"toc":185},"root",[18,27,33,38,58,63,70,93,99,112,116,122,127,130,136,141,154,161],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use breadcrumbs to help users understand where they are within a website’s structure. A breadcrumb shows as a series of links and icons in a line.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"A breadcrumb displays the parent page, icons and the current page.",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48,53],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"Parent page: this links to the page above the current page in the information architecture.",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"Icons: chevrons (v-shaped icons) sitting between the parent and current pages are designed to visualise site hierarchy.",{"type":19,"tag":43,"props":54,"children":55},{},[56],{"type":25,"value":57},"Current page: this is the page the user is currently on.",{"type":19,"tag":59,"props":60,"children":62},"docs-example",{"id":61},"core-navigation-breadcrumbs--default-story",[],{"type":19,"tag":64,"props":65,"children":67},"h3",{"id":66},"when-and-how-to-use",[68],{"type":25,"value":69},"When and how to use",{"type":19,"tag":39,"props":71,"children":72},{},[73,78,83,88],{"type":19,"tag":43,"props":74,"children":75},{},[76],{"type":25,"value":77},"Display the breadcrumb at the top left of a page, below the main navigation but above the page title.",{"type":19,"tag":43,"props":79,"children":80},{},[81],{"type":25,"value":82},"Always start the breadcrumb with the parent page.",{"type":19,"tag":43,"props":84,"children":85},{},[86],{"type":25,"value":87},"Always end the breadcrumb with the current page.",{"type":19,"tag":43,"props":89,"children":90},{},[91],{"type":25,"value":92},"Truncate longer names if you've reached the maximum amount of links.",{"type":19,"tag":64,"props":94,"children":96},{"id":95},"when-and-how-not-to-use",[97],{"type":25,"value":98},"When and how not to use",{"type":19,"tag":39,"props":100,"children":101},{},[102,107],{"type":19,"tag":43,"props":103,"children":104},{},[105],{"type":25,"value":106},"The breadcrumb does not replace primary navigation.",{"type":19,"tag":43,"props":108,"children":109},{},[110],{"type":25,"value":111},"Do not use the breadcrumb to show progress through a linear journey.",{"type":19,"tag":113,"props":114,"children":115},"hr",{},[],{"type":19,"tag":20,"props":117,"children":119},{"id":118},"how-the-breadcrumb-works",[120],{"type":25,"value":121},"How the Breadcrumb works",{"type":19,"tag":28,"props":123,"children":124},{},[125],{"type":25,"value":126},"On devices with a page resolution under 768px, the breadcrumb displays the parent link only.",{"type":19,"tag":113,"props":128,"children":129},{},[],{"type":19,"tag":20,"props":131,"children":133},{"id":132},"theming",[134],{"type":25,"value":135},"Theming",{"type":19,"tag":28,"props":137,"children":138},{},[139],{"type":25,"value":140},"The Breadcrumb uses colour to:",{"type":19,"tag":39,"props":142,"children":143},{},[144,149],{"type":19,"tag":43,"props":145,"children":146},{},[147],{"type":25,"value":148},"represent possible interactions",{"type":19,"tag":43,"props":150,"children":151},{},[152],{"type":25,"value":153},"interactive states.",{"type":19,"tag":155,"props":156,"children":157},"docs-theme-chooser",{},[158],{"type":19,"tag":59,"props":159,"children":160},{"id":61},[],{"type":19,"tag":28,"props":162,"children":163},{},[164,166,175,177,183],{"type":25,"value":165},"To create your own theme, see ",{"type":19,"tag":167,"props":168,"children":172},"a",{"href":169,"rel":170},"https://www.vic.gov.au",[171],"nofollow",[173],{"type":25,"value":174},"theming guidance for designers",{"type":25,"value":176}," or ",{"type":19,"tag":167,"props":178,"children":180},{"href":169,"rel":179},[171],[181],{"type":25,"value":182},"theming guidance for developers",{"type":25,"value":184},".",{"title":10,"searchDepth":186,"depth":186,"links":187},2,[188,193,194],{"id":22,"depth":186,"text":26,"children":189},[190,192],{"id":66,"depth":191,"text":69},3,{"id":95,"depth":191,"text":98},{"id":118,"depth":186,"text":121},{"id":132,"depth":186,"text":135},"markdown","content:design-system:5.components:breadcrumb.md","content","design-system/5.components/breadcrumb.md","md",["ShallowRef",201],["ShallowReactive",202],{"/design-system/components/breadcrumb":203},[204,210],{"_path":205,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":206,"description":207,"layout":13,"label":14,"_type":195,"_id":208,"_source":197,"_file":209,"_extension":199},"/design-system/components/block-quote","Block quote","The Block quote component adds emphasis to a quote.","content:design-system:5.components:block-quote.md","design-system/5.components/block-quote.md",{"_path":211,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":212,"description":213,"layout":13,"label":14,"_type":195,"_id":214,"_source":197,"_file":215,"_extension":199},"/design-system/components/button","Button","The Button component helps a user to carry out an action.","content:design-system:5.components:button.md","design-system/5.components/button.md",["ShallowRef",217],{},[219,224,465],{"title":220,"_path":221,"icon":222,"layout":223},"Ripple Design System","/","carbon:home","home",{"title":225,"_path":226,"children":227},"Design System","/design-system",[228,244,260,289,323],{"title":229,"_path":230,"children":231},"About","/design-system/about",[232,235,238,241],{"title":233,"_path":234,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":236,"_path":237,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":239,"_path":240,"layout":13},"Support","/design-system/about/getting-support",{"title":242,"_path":243,"layout":13},"Contributing","/design-system/about/contributing",{"title":245,"_path":246,"children":247},"Design","/design-system/design",[248,251,254,257],{"title":249,"_path":250,"layout":13},"Getting started","/design-system/design/getting-started",{"title":252,"_path":253,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":255,"_path":256,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":258,"_path":259,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":261,"_path":262,"children":263},"Develop","/design-system/develop",[264,266,268,271],{"title":249,"_path":265,"layout":13},"/design-system/develop/getting-started",{"title":242,"_path":267,"layout":13},"/design-system/develop/contributing",{"title":269,"_path":270,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":272,"children":273,"layout":13},"/design-system/develop/usage",[274,277,280,283,286],{"title":275,"_path":276,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":278,"_path":279,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":281,"_path":282,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":284,"_path":285,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":287,"_path":288,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":290,"_path":291,"children":292},"Styles","/design-system/styles",[293,296,299,302,305,308,311,314,317,320],{"title":294,"_path":295,"layout":13},"Colour","/design-system/styles/colour",{"title":297,"_path":298,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":300,"_path":301,"layout":13},"Grid","/design-system/styles/grid",{"title":303,"_path":304,"layout":13},"Icons","/design-system/styles/icons",{"title":306,"_path":307,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":309,"_path":310,"layout":13},"Layout","/design-system/styles/layout",{"title":312,"_path":313,"layout":13},"Logo","/design-system/styles/logo",{"title":315,"_path":316,"layout":13},"Motion","/design-system/styles/motion",{"title":318,"_path":319,"layout":13},"Spacing","/design-system/styles/spacing",{"title":321,"_path":322,"layout":13},"Typography","/design-system/styles/typography",{"title":324,"_path":325,"children":326},"Components","/design-system/components",[327,330,333,336,337,338,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,441,444,447,450,453,456,459,462],{"title":328,"_path":329,"layout":13},"Accordion","/design-system/components/accordion",{"title":331,"_path":332,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":334,"_path":335,"layout":13},"Alert","/design-system/components/alert",{"title":206,"_path":205,"layout":13},{"title":11,"_path":7,"layout":13},{"title":212,"_path":211,"layout":13},{"title":340,"_path":341,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":343,"_path":344,"layout":13},"Callout","/design-system/components/callout",{"title":346,"_path":347,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":349,"_path":350,"layout":13},"Card","/design-system/components/card",{"title":352,"_path":353,"layout":13},"Carousel","/design-system/components/carousel",{"title":355,"_path":356,"layout":13},"Category grid","/design-system/components/category-grid",{"title":358,"_path":359,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":361,"_path":362,"layout":13},"Chip","/design-system/components/chip",{"title":364,"_path":365,"layout":13},"Contact us","/design-system/components/contact-us",{"title":367,"_path":368,"layout":13},"Date input","/design-system/components/date-input",{"title":370,"_path":371,"layout":13},"Detail list","/design-system/components/detail-list",{"title":373,"_path":374,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":376,"_path":377,"layout":13},"File","/design-system/components/file",{"title":379,"_path":380,"layout":13},"Footer","/design-system/components/footer",{"title":382,"_path":383,"layout":13},"Form","/design-system/components/form",{"title":385,"_path":386,"layout":13},"Form alert","/design-system/components/form-alert",{"title":388,"_path":389,"layout":13},"Header","/design-system/components/header",{"title":391,"_path":392,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":394,"_path":395,"layout":13},"Input field","/design-system/components/input-field",{"title":397,"_path":398,"layout":13},"Key dates","/design-system/components/key-dates",{"title":400,"_path":401,"layout":13},"Media","/design-system/components/media",{"title":403,"_path":404,"layout":13},"Media embed","/design-system/components/media-embed",{"title":406,"_path":407,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":409,"_path":410,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":412,"_path":413,"layout":13},"Option button","/design-system/components/option-button",{"title":415,"_path":416,"layout":13},"Page action","/design-system/components/page-action",{"title":418,"_path":419,"layout":13},"Pagination","/design-system/components/pagination",{"title":421,"_path":422,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":424,"_path":425,"layout":13},"Profile","/design-system/components/profile",{"title":427,"_path":428,"layout":13},"Radio button","/design-system/components/radio-button",{"title":430,"_path":431,"layout":13},"Related links","/design-system/components/related-links",{"title":433,"_path":434,"layout":13},"Results listing","/design-system/components/results-listing",{"title":436,"_path":437,"layout":13},"Search bar","/design-system/components/search-bar",{"title":439,"_path":440,"layout":13},"Skip link","/design-system/components/skip-link",{"title":442,"_path":443,"layout":13},"Social share","/design-system/components/social-share",{"title":445,"_path":446,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":448,"_path":449,"layout":13},"Table","/design-system/components/table",{"title":451,"_path":452,"layout":13},"Tabs","/design-system/components/tabs",{"title":454,"_path":455,"layout":13},"Tag","/design-system/components/tag",{"title":457,"_path":458,"layout":13},"Text area","/design-system/components/text-area",{"title":460,"_path":461,"layout":13},"Timeline","/design-system/components/timeline",{"title":463,"_path":464,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":466,"_path":467,"children":468,"layout":13},"Ripple Framework","/framework",[469,470,488,510],{"title":466,"_path":467,"layout":13},{"title":471,"_path":472,"children":473},"Key Concepts","/framework/key-concepts",[474,476,479,482,485],{"title":281,"_path":475,"layout":13},"/framework/key-concepts/nuxt",{"title":477,"_path":478,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":480,"_path":481,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":483,"_path":484,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":486,"_path":487,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":489,"_path":490,"children":491},"Guides","/framework/guides",[492,495,498,501,504,507],{"title":493,"_path":494,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":496,"_path":497,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":499,"_path":500,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":502,"_path":503,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":505,"_path":506,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":508,"_path":509,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":511,"_path":512,"layout":13},"Core modules","/framework/core-modules",["Reactive",514],["Set"],["Reactive",516],{"module-navigation":517},null,true,1714695152735]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Breadcrumb</h1><p class="rpl-type-p-large" data-v-3163c6df>The Breadcrumb component shows a user their location on a website. This allows quick navigation between page levels.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use breadcrumbs to help users understand where they are within a website’s structure. A breadcrumb shows as a series of links and icons in a line.<!--]--></p><p><!--[-->A breadcrumb displays the parent page, icons and the current page.<!--]--></p><ul><!--[--><li><!--[-->Parent page: this links to the page above the current page in the information architecture.<!--]--></li><li><!--[-->Icons: chevrons (v-shaped icons) sitting between the parent and current pages are designed to visualise site hierarchy.<!--]--></li><li><!--[-->Current page: this is the page the user is currently on.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-breadcrumbs--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-breadcrumbs--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Display the breadcrumb at the top left of a page, below the main navigation but above the page title.<!--]--></li><li><!--[-->Always start the breadcrumb with the parent page.<!--]--></li><li><!--[-->Always end the breadcrumb with the current page.<!--]--></li><li><!--[-->Truncate longer names if you&#39;ve reached the maximum amount of links.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->The breadcrumb does not replace primary navigation.<!--]--></li><li><!--[-->Do not use the breadcrumb to show progress through a linear journey.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="how-the-breadcrumb-works" data-v-fff5b905><a href="#how-the-breadcrumb-works" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->How the Breadcrumb works<!--]--></a></h2><p><!--[-->On devices with a page resolution under 768px, the breadcrumb displays the parent link only.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->The Breadcrumb uses colour to:<!--]--></p><ul><!--[--><li><!--[-->represent possible interactions<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-breadcrumbs--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-breadcrumbs--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/breadcrumb.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/breadcrumb/_payload.json">[{"state":1,"once":513,"_errors":515,"serverRendered":518,"path":7,"prerenderedAt":519},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":200,"$sdd-globals":216,"$sdd-navigation":218},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/breadcrumb":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":195,"_id":196,"_source":197,"_file":198,"_extension":199},"/design-system/components/breadcrumb","components",false,"","Breadcrumb","The Breadcrumb component shows a user their location on a website. This allows quick navigation between page levels.","page","Core",{"type":16,"children":17,"toc":185},"root",[18,27,33,38,58,63,70,93,99,112,116,122,127,130,136,141,154,161],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use breadcrumbs to help users understand where they are within a website’s structure. A breadcrumb shows as a series of links and icons in a line.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"A breadcrumb displays the parent page, icons and the current page.",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48,53],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"Parent page: this links to the page above the current page in the information architecture.",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"Icons: chevrons (v-shaped icons) sitting between the parent and current pages are designed to visualise site hierarchy.",{"type":19,"tag":43,"props":54,"children":55},{},[56],{"type":25,"value":57},"Current page: this is the page the user is currently on.",{"type":19,"tag":59,"props":60,"children":62},"docs-example",{"id":61},"core-navigation-breadcrumbs--default-story",[],{"type":19,"tag":64,"props":65,"children":67},"h3",{"id":66},"when-and-how-to-use",[68],{"type":25,"value":69},"When and how to use",{"type":19,"tag":39,"props":71,"children":72},{},[73,78,83,88],{"type":19,"tag":43,"props":74,"children":75},{},[76],{"type":25,"value":77},"Display the breadcrumb at the top left of a page, below the main navigation but above the page title.",{"type":19,"tag":43,"props":79,"children":80},{},[81],{"type":25,"value":82},"Always start the breadcrumb with the parent page.",{"type":19,"tag":43,"props":84,"children":85},{},[86],{"type":25,"value":87},"Always end the breadcrumb with the current page.",{"type":19,"tag":43,"props":89,"children":90},{},[91],{"type":25,"value":92},"Truncate longer names if you've reached the maximum amount of links.",{"type":19,"tag":64,"props":94,"children":96},{"id":95},"when-and-how-not-to-use",[97],{"type":25,"value":98},"When and how not to use",{"type":19,"tag":39,"props":100,"children":101},{},[102,107],{"type":19,"tag":43,"props":103,"children":104},{},[105],{"type":25,"value":106},"The breadcrumb does not replace primary navigation.",{"type":19,"tag":43,"props":108,"children":109},{},[110],{"type":25,"value":111},"Do not use the breadcrumb to show progress through a linear journey.",{"type":19,"tag":113,"props":114,"children":115},"hr",{},[],{"type":19,"tag":20,"props":117,"children":119},{"id":118},"how-the-breadcrumb-works",[120],{"type":25,"value":121},"How the Breadcrumb works",{"type":19,"tag":28,"props":123,"children":124},{},[125],{"type":25,"value":126},"On devices with a page resolution under 768px, the breadcrumb displays the parent link only.",{"type":19,"tag":113,"props":128,"children":129},{},[],{"type":19,"tag":20,"props":131,"children":133},{"id":132},"theming",[134],{"type":25,"value":135},"Theming",{"type":19,"tag":28,"props":137,"children":138},{},[139],{"type":25,"value":140},"The Breadcrumb uses colour to:",{"type":19,"tag":39,"props":142,"children":143},{},[144,149],{"type":19,"tag":43,"props":145,"children":146},{},[147],{"type":25,"value":148},"represent possible interactions",{"type":19,"tag":43,"props":150,"children":151},{},[152],{"type":25,"value":153},"interactive states.",{"type":19,"tag":155,"props":156,"children":157},"docs-theme-chooser",{},[158],{"type":19,"tag":59,"props":159,"children":160},{"id":61},[],{"type":19,"tag":28,"props":162,"children":163},{},[164,166,175,177,183],{"type":25,"value":165},"To create your own theme, see ",{"type":19,"tag":167,"props":168,"children":172},"a",{"href":169,"rel":170},"https://www.vic.gov.au",[171],"nofollow",[173],{"type":25,"value":174},"theming guidance for designers",{"type":25,"value":176}," or ",{"type":19,"tag":167,"props":178,"children":180},{"href":169,"rel":179},[171],[181],{"type":25,"value":182},"theming guidance for developers",{"type":25,"value":184},".",{"title":10,"searchDepth":186,"depth":186,"links":187},2,[188,193,194],{"id":22,"depth":186,"text":26,"children":189},[190,192],{"id":66,"depth":191,"text":69},3,{"id":95,"depth":191,"text":98},{"id":118,"depth":186,"text":121},{"id":132,"depth":186,"text":135},"markdown","content:design-system:5.components:breadcrumb.md","content","design-system/5.components/breadcrumb.md","md",["ShallowRef",201],["ShallowReactive",202],{"/design-system/components/breadcrumb":203},[204,210],{"_path":205,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":206,"description":207,"layout":13,"label":14,"_type":195,"_id":208,"_source":197,"_file":209,"_extension":199},"/design-system/components/block-quote","Block quote","The Block quote component adds emphasis to a quote.","content:design-system:5.components:block-quote.md","design-system/5.components/block-quote.md",{"_path":211,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":212,"description":213,"layout":13,"label":14,"_type":195,"_id":214,"_source":197,"_file":215,"_extension":199},"/design-system/components/button","Button","The Button component helps a user to carry out an action.","content:design-system:5.components:button.md","design-system/5.components/button.md",["ShallowRef",217],{},[219,224,465],{"title":220,"_path":221,"icon":222,"layout":223},"Ripple Design System","/","carbon:home","home",{"title":225,"_path":226,"children":227},"Design System","/design-system",[228,244,260,289,323],{"title":229,"_path":230,"children":231},"About","/design-system/about",[232,235,238,241],{"title":233,"_path":234,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":236,"_path":237,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":239,"_path":240,"layout":13},"Support","/design-system/about/getting-support",{"title":242,"_path":243,"layout":13},"Contributing","/design-system/about/contributing",{"title":245,"_path":246,"children":247},"Design","/design-system/design",[248,251,254,257],{"title":249,"_path":250,"layout":13},"Getting started","/design-system/design/getting-started",{"title":252,"_path":253,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":255,"_path":256,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":258,"_path":259,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":261,"_path":262,"children":263},"Develop","/design-system/develop",[264,266,268,271],{"title":249,"_path":265,"layout":13},"/design-system/develop/getting-started",{"title":242,"_path":267,"layout":13},"/design-system/develop/contributing",{"title":269,"_path":270,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":272,"children":273,"layout":13},"/design-system/develop/usage",[274,277,280,283,286],{"title":275,"_path":276,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":278,"_path":279,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":281,"_path":282,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":284,"_path":285,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":287,"_path":288,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":290,"_path":291,"children":292},"Styles","/design-system/styles",[293,296,299,302,305,308,311,314,317,320],{"title":294,"_path":295,"layout":13},"Colour","/design-system/styles/colour",{"title":297,"_path":298,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":300,"_path":301,"layout":13},"Grid","/design-system/styles/grid",{"title":303,"_path":304,"layout":13},"Icons","/design-system/styles/icons",{"title":306,"_path":307,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":309,"_path":310,"layout":13},"Layout","/design-system/styles/layout",{"title":312,"_path":313,"layout":13},"Logo","/design-system/styles/logo",{"title":315,"_path":316,"layout":13},"Motion","/design-system/styles/motion",{"title":318,"_path":319,"layout":13},"Spacing","/design-system/styles/spacing",{"title":321,"_path":322,"layout":13},"Typography","/design-system/styles/typography",{"title":324,"_path":325,"children":326},"Components","/design-system/components",[327,330,333,336,337,338,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,441,444,447,450,453,456,459,462],{"title":328,"_path":329,"layout":13},"Accordion","/design-system/components/accordion",{"title":331,"_path":332,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":334,"_path":335,"layout":13},"Alert","/design-system/components/alert",{"title":206,"_path":205,"layout":13},{"title":11,"_path":7,"layout":13},{"title":212,"_path":211,"layout":13},{"title":340,"_path":341,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":343,"_path":344,"layout":13},"Callout","/design-system/components/callout",{"title":346,"_path":347,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":349,"_path":350,"layout":13},"Card","/design-system/components/card",{"title":352,"_path":353,"layout":13},"Carousel","/design-system/components/carousel",{"title":355,"_path":356,"layout":13},"Category grid","/design-system/components/category-grid",{"title":358,"_path":359,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":361,"_path":362,"layout":13},"Chip","/design-system/components/chip",{"title":364,"_path":365,"layout":13},"Contact us","/design-system/components/contact-us",{"title":367,"_path":368,"layout":13},"Date input","/design-system/components/date-input",{"title":370,"_path":371,"layout":13},"Detail list","/design-system/components/detail-list",{"title":373,"_path":374,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":376,"_path":377,"layout":13},"File","/design-system/components/file",{"title":379,"_path":380,"layout":13},"Footer","/design-system/components/footer",{"title":382,"_path":383,"layout":13},"Form","/design-system/components/form",{"title":385,"_path":386,"layout":13},"Form alert","/design-system/components/form-alert",{"title":388,"_path":389,"layout":13},"Header","/design-system/components/header",{"title":391,"_path":392,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":394,"_path":395,"layout":13},"Input field","/design-system/components/input-field",{"title":397,"_path":398,"layout":13},"Key dates","/design-system/components/key-dates",{"title":400,"_path":401,"layout":13},"Media","/design-system/components/media",{"title":403,"_path":404,"layout":13},"Media embed","/design-system/components/media-embed",{"title":406,"_path":407,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":409,"_path":410,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":412,"_path":413,"layout":13},"Option button","/design-system/components/option-button",{"title":415,"_path":416,"layout":13},"Page action","/design-system/components/page-action",{"title":418,"_path":419,"layout":13},"Pagination","/design-system/components/pagination",{"title":421,"_path":422,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":424,"_path":425,"layout":13},"Profile","/design-system/components/profile",{"title":427,"_path":428,"layout":13},"Radio button","/design-system/components/radio-button",{"title":430,"_path":431,"layout":13},"Related links","/design-system/components/related-links",{"title":433,"_path":434,"layout":13},"Results listing","/design-system/components/results-listing",{"title":436,"_path":437,"layout":13},"Search bar","/design-system/components/search-bar",{"title":439,"_path":440,"layout":13},"Skip link","/design-system/components/skip-link",{"title":442,"_path":443,"layout":13},"Social share","/design-system/components/social-share",{"title":445,"_path":446,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":448,"_path":449,"layout":13},"Table","/design-system/components/table",{"title":451,"_path":452,"layout":13},"Tabs","/design-system/components/tabs",{"title":454,"_path":455,"layout":13},"Tag","/design-system/components/tag",{"title":457,"_path":458,"layout":13},"Text area","/design-system/components/text-area",{"title":460,"_path":461,"layout":13},"Timeline","/design-system/components/timeline",{"title":463,"_path":464,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":466,"_path":467,"children":468,"layout":13},"Ripple Framework","/framework",[469,470,488,510],{"title":466,"_path":467,"layout":13},{"title":471,"_path":472,"children":473},"Key Concepts","/framework/key-concepts",[474,476,479,482,485],{"title":281,"_path":475,"layout":13},"/framework/key-concepts/nuxt",{"title":477,"_path":478,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":480,"_path":481,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":483,"_path":484,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":486,"_path":487,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":489,"_path":490,"children":491},"Guides","/framework/guides",[492,495,498,501,504,507],{"title":493,"_path":494,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":496,"_path":497,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":499,"_path":500,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":502,"_path":503,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":505,"_path":506,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":508,"_path":509,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":511,"_path":512,"layout":13},"Core modules","/framework/core-modules",["Reactive",514],["Set"],["Reactive",516],{"module-navigation":517},null,true,1714695650946]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/button/_payload.json b/design-system/components/button/_payload.json
index e234d668ef..db00397ac7 100644
--- a/design-system/components/button/_payload.json
+++ b/design-system/components/button/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":104,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695152802]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":104,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695651021]
\ No newline at end of file
diff --git a/design-system/components/button/index.html b/design-system/components/button/index.html
index d7ebf71a0b..eb8078a908 100644
--- a/design-system/components/button/index.html
+++ b/design-system/components/button/index.html
@@ -28,65 +28,65 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.lp_k9Hpd.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.CwUV-MIb.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.Czpq-HHw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.gK7ORMEc.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -102,8 +102,8 @@
 <ul><!--[--><li><!--[-->A page should only have one call to action, otherwise they lose impact.<!--]--></li><li><!--[-->Having more than one also results in a dilemma of choice for the user.<!--]--></li><!--]--></ul><!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--default-filled&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-filled&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="outlined" data-v-ea525968><a href="#outlined" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Outlined<!--]--></a></h2><ul><!--[--><li><!--[-->The outlined variant is for secondary actions.<!--]--></li><li><!--[-->Like the filled variant, don&#39;t use more than one outlined button.
 <ul><!--[--><li><!--[-->If you find you&#39;re adding lots of secondary buttons, you may need to simplify your content.<!--]--></li><!--]--></ul><!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--default-outlined&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-outlined&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="white" data-v-ea525968><a href="#white" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->White<!--]--></a></h2><ul><!--[--><li><!--[-->The white variant is for tertiary actions when an action is less prominent.
 <ul><!--[--><li><!--[-->It should be obvious that it is lower priority than primary or secondary buttons.<!--]--></li><!--]--></ul><!--]--></li><li><!--[-->The white variant is styled with an underline by default, to align with links.
-<ul><!--[--><li><!--[-->This helps meet accessibility requirements and is consistent with other link types.<!--]--></li><!--]--></ul><!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--default-white&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-white&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="elevated" data-v-ea525968><a href="#elevated" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Elevated<!--]--></a></h2><ul><!--[--><li><!--[-->The elevated variant acts as a &#39;back-to-the-top&#39; button.<!--]--></li><li><!--[-->We&#39;ve added elevation to show the where the button will sit as a &#39;layer&#39; on the page (its CSS z-index value).<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--default-elevated&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-elevated&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="destructive" data-v-ea525968><a href="#destructive" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Destructive<!--]--></a></h2><ul><!--[--><li><!--[-->Use the destructive variant for destructive actions, such as permanently deleting information, across the site.<!--]--></li><li><!--[-->The destructive variant has a semantic meaning and uses semantic colour.<!--]--></li><li><!--[-->Destructive buttons only work if not used often.<!--]--></li><li><!--[-->It’s uncommon for most sites to need one.<!--]--></li><li><!--[-->Only use the destructive variant if an action has destructive consequences because they are not easy to undo.<!--]--></li><!--]--></ul><blockquote class="rpl-callout"><!--[--><p><!--[-->Never rely on colour only to communicate a serious action. For example, don&#39;t rely on red only as a warning to the user. Some users cannot see all colours and will miss meaning. What will happen when the user clicks the button must be obvious from context button text.<!--]--></p><!--]--></blockquote><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--default-destructive&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-destructive&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h3 docs-h3" id="loading-spinner" data-v-ea525968><a href="#loading-spinner" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Loading spinner<!--]--></a></h2><p><!--[-->Loading spinners are used to indicate to users that an action is being processed. Spinners animate as soon as the user initiates an action and disappear once content shows.<!--]--></p><p><!--[-->A user may double-click a button because:<!--]--></p><ul><!--[--><li><!--[-->their main operating system uses double click<!--]--></li><li><!--[-->they have a slow connection which results in delayed action feedback<!--]--></li><li><!--[-->they click the button by accident due to motor impairments like hand tremors.<!--]--></li><!--]--></ul><p><!--[-->Clicking a button twice can mean the information gets sent 2 times.<!--]--></p><p><!--[-->Try to show the user that their click has worked. For example, show a loading spinner once they&#39;ve clicked.<!--]--></p><p><!--[-->When a button is in the loading state, the button label is hidden and a spinner is shown in its place. The button will keep the same width it had when the text was visible.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--busy-state&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--busy-state&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Buttons can be themed in the following 2 ways:<!--]--></p><ul><!--[--><li><!--[-->site colour palette<!--]--></li><li><!--[-->neutral colour palette.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="site-theme" data-v-ea525968><a href="#site-theme" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Site theme<!--]--></a></h2><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--default-filled&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-filled&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--default-outlined&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-outlined&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--default-elevated&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-elevated&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="https:www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https:www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="neutral-theme" data-v-ea525968><a href="#neutral-theme" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Neutral theme<!--]--></a></h2><p><!--[-->Implemented at a site level, the neutral buttons have predefined neutral colour values. You are unable to edit or customise these colours.<!--]--></p><p><!--[-->There is no filled button variant available if you use the neutral theme. Buttons will automatically display as the next level down of button styling. For example, you&#39;ll use the outlined button variant for the neutral theme.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="outlined-1"><!--[-->Outlined<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--neutral-outlined&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--neutral-outlined&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="white-1"><!--[-->White<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--neutral-white&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--neutral-white&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="elevated-1"><!--[-->Elevated<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--neutral-elevated&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--neutral-elevated&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="rationale" data-v-fff5b905><a href="#rationale" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Rationale<!--]--></a></h2><p><!--[-->To enhance visual weight and aim to confirm with <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->WCAG 2.0 Criterion 1.4.1<!--]--><!--]--><!----><!--]--></a>, Ripple buttons use underlined text by default on white buttons.<!--]--></p><p><!--[-->This underline shows users there is an interaction that they can perform.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[-->1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)<!--]--></p><!--]--></blockquote><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/button.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/button/_payload.json">[{"state":1,"once":871,"_errors":873,"serverRendered":876,"path":877,"prerenderedAt":878},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":558,"$sdd-globals":574,"$sdd-navigation":576},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/button":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":553,"_id":554,"_source":555,"_file":556,"_extension":557},"/design-system/components/button","components",false,"","Button","The Button component helps a user to carry out an action.","page","Core",{"type":16,"children":17,"toc":532},"root",[18,27,33,38,43,50,75,81,99,108,112,118,123,151,156,187,190,195,216,220,225,254,258,263,276,280,286,314,322,326,329,335,340,345,363,368,373,378,382,385,391,396,409,415,428,452,458,463,468,474,478,483,487,492,496,499,505,519,524],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use a button to indicate an action a user can take and to let them start carrying it out. Button labels say what action will occur when the user interacts with it.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Only use a button when the page has a call to action. Don't use buttons when sending users to other locations on the page or to other pages or sites.",{"type":19,"tag":39,"props":40,"children":42},"docs-example",{"id":41},"core-navigation-button--default-filled",[],{"type":19,"tag":44,"props":45,"children":47},"h3",{"id":46},"when-and-how-to-use",[48],{"type":25,"value":49},"When and how to use",{"type":19,"tag":51,"props":52,"children":53},"ul",{},[54,60,65,70],{"type":19,"tag":55,"props":56,"children":57},"li",{},[58],{"type":25,"value":59},"Highlight a key call to action.",{"type":19,"tag":55,"props":61,"children":62},{},[63],{"type":25,"value":64},"So long as it also helps users carry out its identified action, a button can link to internal and external pages.",{"type":19,"tag":55,"props":66,"children":67},{},[68],{"type":25,"value":69},"Add to any basic content component.",{"type":19,"tag":55,"props":71,"children":72},{},[73],{"type":25,"value":74},"Use verbs in the button label, for example, 'Submit now', 'Cancel booking', etc.",{"type":19,"tag":44,"props":76,"children":78},{"id":77},"when-not-to-use",[79],{"type":25,"value":80},"When not to use",{"type":19,"tag":51,"props":82,"children":83},{},[84,89,94],{"type":19,"tag":55,"props":85,"children":86},{},[87],{"type":25,"value":88},"Limit primary buttons to one per page.",{"type":19,"tag":55,"props":90,"children":91},{},[92],{"type":25,"value":93},"Don't use more than 4 words in the button label.",{"type":19,"tag":55,"props":95,"children":96},{},[97],{"type":25,"value":98},"Avoid using inactive buttons.",{"type":19,"tag":100,"props":101,"children":102},"blockquote",{},[103],{"type":19,"tag":28,"props":104,"children":105},{},[106],{"type":25,"value":107},"Limit using buttons to one per page. The more you use them, the less a user will notice them.",{"type":19,"tag":109,"props":110,"children":111},"hr",{},[],{"type":19,"tag":20,"props":113,"children":115},{"id":114},"variants",[116],{"type":25,"value":117},"Variants",{"type":19,"tag":28,"props":119,"children":120},{},[121],{"type":25,"value":122},"Buttons are styled for their specific purposes. Button variants include:",{"type":19,"tag":51,"props":124,"children":125},{},[126,131,136,141,146],{"type":19,"tag":55,"props":127,"children":128},{},[129],{"type":25,"value":130},"filled",{"type":19,"tag":55,"props":132,"children":133},{},[134],{"type":25,"value":135},"outlined",{"type":19,"tag":55,"props":137,"children":138},{},[139],{"type":25,"value":140},"white",{"type":19,"tag":55,"props":142,"children":143},{},[144],{"type":25,"value":145},"elevated",{"type":19,"tag":55,"props":147,"children":148},{},[149],{"type":25,"value":150},"destructive.",{"type":19,"tag":44,"props":152,"children":153},{"id":130},[154],{"type":25,"value":155},"Filled",{"type":19,"tag":51,"props":157,"children":158},{},[159,164,169],{"type":19,"tag":55,"props":160,"children":161},{},[162],{"type":25,"value":163},"Use the filled variant for primary actions, known as calls to action.",{"type":19,"tag":55,"props":165,"children":166},{},[167],{"type":25,"value":168},"Use the primary colour.",{"type":19,"tag":55,"props":170,"children":171},{},[172,174],{"type":25,"value":173},"Don't use more than one filled button per page.\n",{"type":19,"tag":51,"props":175,"children":176},{},[177,182],{"type":19,"tag":55,"props":178,"children":179},{},[180],{"type":25,"value":181},"A page should only have one call to action, otherwise they lose impact.",{"type":19,"tag":55,"props":183,"children":184},{},[185],{"type":25,"value":186},"Having more than one also results in a dilemma of choice for the user.",{"type":19,"tag":39,"props":188,"children":189},{"id":41},[],{"type":19,"tag":44,"props":191,"children":192},{"id":135},[193],{"type":25,"value":194},"Outlined",{"type":19,"tag":51,"props":196,"children":197},{},[198,203],{"type":19,"tag":55,"props":199,"children":200},{},[201],{"type":25,"value":202},"The outlined variant is for secondary actions.",{"type":19,"tag":55,"props":204,"children":205},{},[206,208],{"type":25,"value":207},"Like the filled variant, don't use more than one outlined button.\n",{"type":19,"tag":51,"props":209,"children":210},{},[211],{"type":19,"tag":55,"props":212,"children":213},{},[214],{"type":25,"value":215},"If you find you're adding lots of secondary buttons, you may need to simplify your content.",{"type":19,"tag":39,"props":217,"children":219},{"id":218},"core-navigation-button--default-outlined",[],{"type":19,"tag":44,"props":221,"children":222},{"id":140},[223],{"type":25,"value":224},"White",{"type":19,"tag":51,"props":226,"children":227},{},[228,241],{"type":19,"tag":55,"props":229,"children":230},{},[231,233],{"type":25,"value":232},"The white variant is for tertiary actions when an action is less prominent.\n",{"type":19,"tag":51,"props":234,"children":235},{},[236],{"type":19,"tag":55,"props":237,"children":238},{},[239],{"type":25,"value":240},"It should be obvious that it is lower priority than primary or secondary buttons.",{"type":19,"tag":55,"props":242,"children":243},{},[244,246],{"type":25,"value":245},"The white variant is styled with an underline by default, to align with links.\n",{"type":19,"tag":51,"props":247,"children":248},{},[249],{"type":19,"tag":55,"props":250,"children":251},{},[252],{"type":25,"value":253},"This helps meet accessibility requirements and is consistent with other link types.",{"type":19,"tag":39,"props":255,"children":257},{"id":256},"core-navigation-button--default-white",[],{"type":19,"tag":44,"props":259,"children":260},{"id":145},[261],{"type":25,"value":262},"Elevated",{"type":19,"tag":51,"props":264,"children":265},{},[266,271],{"type":19,"tag":55,"props":267,"children":268},{},[269],{"type":25,"value":270},"The elevated variant acts as a 'back-to-the-top' button.",{"type":19,"tag":55,"props":272,"children":273},{},[274],{"type":25,"value":275},"We've added elevation to show the where the button will sit as a 'layer' on the page (its CSS z-index value).",{"type":19,"tag":39,"props":277,"children":279},{"id":278},"core-navigation-button--default-elevated",[],{"type":19,"tag":44,"props":281,"children":283},{"id":282},"destructive",[284],{"type":25,"value":285},"Destructive",{"type":19,"tag":51,"props":287,"children":288},{},[289,294,299,304,309],{"type":19,"tag":55,"props":290,"children":291},{},[292],{"type":25,"value":293},"Use the destructive variant for destructive actions, such as permanently deleting information, across the site.",{"type":19,"tag":55,"props":295,"children":296},{},[297],{"type":25,"value":298},"The destructive variant has a semantic meaning and uses semantic colour.",{"type":19,"tag":55,"props":300,"children":301},{},[302],{"type":25,"value":303},"Destructive buttons only work if not used often.",{"type":19,"tag":55,"props":305,"children":306},{},[307],{"type":25,"value":308},"It’s uncommon for most sites to need one.",{"type":19,"tag":55,"props":310,"children":311},{},[312],{"type":25,"value":313},"Only use the destructive variant if an action has destructive consequences because they are not easy to undo.",{"type":19,"tag":100,"props":315,"children":316},{},[317],{"type":19,"tag":28,"props":318,"children":319},{},[320],{"type":25,"value":321},"Never rely on colour only to communicate a serious action. For example, don't rely on red only as a warning to the user. Some users cannot see all colours and will miss meaning. What will happen when the user clicks the button must be obvious from context button text.",{"type":19,"tag":39,"props":323,"children":325},{"id":324},"core-navigation-button--default-destructive",[],{"type":19,"tag":109,"props":327,"children":328},{},[],{"type":19,"tag":44,"props":330,"children":332},{"id":331},"loading-spinner",[333],{"type":25,"value":334},"Loading spinner",{"type":19,"tag":28,"props":336,"children":337},{},[338],{"type":25,"value":339},"Loading spinners are used to indicate to users that an action is being processed. Spinners animate as soon as the user initiates an action and disappear once content shows.",{"type":19,"tag":28,"props":341,"children":342},{},[343],{"type":25,"value":344},"A user may double-click a button because:",{"type":19,"tag":51,"props":346,"children":347},{},[348,353,358],{"type":19,"tag":55,"props":349,"children":350},{},[351],{"type":25,"value":352},"their main operating system uses double click",{"type":19,"tag":55,"props":354,"children":355},{},[356],{"type":25,"value":357},"they have a slow connection which results in delayed action feedback",{"type":19,"tag":55,"props":359,"children":360},{},[361],{"type":25,"value":362},"they click the button by accident due to motor impairments like hand tremors.",{"type":19,"tag":28,"props":364,"children":365},{},[366],{"type":25,"value":367},"Clicking a button twice can mean the information gets sent 2 times.",{"type":19,"tag":28,"props":369,"children":370},{},[371],{"type":25,"value":372},"Try to show the user that their click has worked. For example, show a loading spinner once they've clicked.",{"type":19,"tag":28,"props":374,"children":375},{},[376],{"type":25,"value":377},"When a button is in the loading state, the button label is hidden and a spinner is shown in its place. The button will keep the same width it had when the text was visible.",{"type":19,"tag":39,"props":379,"children":381},{"id":380},"core-navigation-button--busy-state",[],{"type":19,"tag":109,"props":383,"children":384},{},[],{"type":19,"tag":20,"props":386,"children":388},{"id":387},"theming",[389],{"type":25,"value":390},"Theming",{"type":19,"tag":28,"props":392,"children":393},{},[394],{"type":25,"value":395},"Buttons can be themed in the following 2 ways:",{"type":19,"tag":51,"props":397,"children":398},{},[399,404],{"type":19,"tag":55,"props":400,"children":401},{},[402],{"type":25,"value":403},"site colour palette",{"type":19,"tag":55,"props":405,"children":406},{},[407],{"type":25,"value":408},"neutral colour palette.",{"type":19,"tag":44,"props":410,"children":412},{"id":411},"site-theme",[413],{"type":25,"value":414},"Site theme",{"type":19,"tag":416,"props":417,"children":418},"docs-theme-chooser",{},[419,422,425],{"type":19,"tag":39,"props":420,"children":421},{"id":41},[],{"type":19,"tag":39,"props":423,"children":424},{"id":218},[],{"type":19,"tag":39,"props":426,"children":427},{"id":278},[],{"type":19,"tag":28,"props":429,"children":430},{},[431,433,442,444,450],{"type":25,"value":432},"To create your own theme see ",{"type":19,"tag":434,"props":435,"children":439},"a",{"href":436,"rel":437},"https:www.vic.gov.au",[438],"nofollow",[440],{"type":25,"value":441},"theming guidance for designers",{"type":25,"value":443}," or ",{"type":19,"tag":434,"props":445,"children":447},{"href":436,"rel":446},[438],[448],{"type":25,"value":449},"theming guidance for developers",{"type":25,"value":451},".",{"type":19,"tag":44,"props":453,"children":455},{"id":454},"neutral-theme",[456],{"type":25,"value":457},"Neutral theme",{"type":19,"tag":28,"props":459,"children":460},{},[461],{"type":25,"value":462},"Implemented at a site level, the neutral buttons have predefined neutral colour values. You are unable to edit or customise these colours.",{"type":19,"tag":28,"props":464,"children":465},{},[466],{"type":25,"value":467},"There is no filled button variant available if you use the neutral theme. Buttons will automatically display as the next level down of button styling. For example, you'll use the outlined button variant for the neutral theme.",{"type":19,"tag":469,"props":470,"children":472},"h4",{"id":471},"outlined-1",[473],{"type":25,"value":194},{"type":19,"tag":39,"props":475,"children":477},{"id":476},"core-navigation-button--neutral-outlined",[],{"type":19,"tag":469,"props":479,"children":481},{"id":480},"white-1",[482],{"type":25,"value":224},{"type":19,"tag":39,"props":484,"children":486},{"id":485},"core-navigation-button--neutral-white",[],{"type":19,"tag":469,"props":488,"children":490},{"id":489},"elevated-1",[491],{"type":25,"value":262},{"type":19,"tag":39,"props":493,"children":495},{"id":494},"core-navigation-button--neutral-elevated",[],{"type":19,"tag":109,"props":497,"children":498},{},[],{"type":19,"tag":20,"props":500,"children":502},{"id":501},"rationale",[503],{"type":25,"value":504},"Rationale",{"type":19,"tag":28,"props":506,"children":507},{},[508,510,517],{"type":25,"value":509},"To enhance visual weight and aim to confirm with ",{"type":19,"tag":434,"props":511,"children":514},{"href":512,"rel":513},"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html",[438],[515],{"type":25,"value":516},"WCAG 2.0 Criterion 1.4.1",{"type":25,"value":518},", Ripple buttons use underlined text by default on white buttons.",{"type":19,"tag":28,"props":520,"children":521},{},[522],{"type":25,"value":523},"This underline shows users there is an interaction that they can perform.",{"type":19,"tag":100,"props":525,"children":526},{},[527],{"type":19,"tag":28,"props":528,"children":529},{},[530],{"type":25,"value":531},"1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)",{"title":10,"searchDepth":533,"depth":533,"links":534},2,[535,540,548,552],{"id":22,"depth":533,"text":26,"children":536},[537,539],{"id":46,"depth":538,"text":49},3,{"id":77,"depth":538,"text":80},{"id":114,"depth":533,"text":117,"children":541},[542,543,544,545,546,547],{"id":130,"depth":538,"text":155},{"id":135,"depth":538,"text":194},{"id":140,"depth":538,"text":224},{"id":145,"depth":538,"text":262},{"id":282,"depth":538,"text":285},{"id":331,"depth":538,"text":334},{"id":387,"depth":533,"text":390,"children":549},[550,551],{"id":411,"depth":538,"text":414},{"id":454,"depth":538,"text":457},{"id":501,"depth":533,"text":504},"markdown","content:design-system:5.components:button.md","content","design-system/5.components/button.md","md",["ShallowRef",559],["ShallowReactive",560],{"/design-system/components/button":561},[562,568],{"_path":563,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":564,"description":565,"layout":13,"label":14,"_type":553,"_id":566,"_source":555,"_file":567,"_extension":557},"/design-system/components/breadcrumb","Breadcrumb","The Breadcrumb component shows a user their location on a website. This allows quick navigation between page levels.","content:design-system:5.components:breadcrumb.md","design-system/5.components/breadcrumb.md",{"_path":569,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":570,"description":571,"layout":13,"label":14,"_type":553,"_id":572,"_source":555,"_file":573,"_extension":557},"/design-system/components/call-to-action","Call to action","The Call to action component is a card promoting a specific piece of content and featuring a button highlighting the call to action.","content:design-system:5.components:call-to-action.md","design-system/5.components/call-to-action.md",["ShallowRef",575],{},[577,582,823],{"title":578,"_path":579,"icon":580,"layout":581},"Ripple Design System","/","carbon:home","home",{"title":583,"_path":584,"children":585},"Design System","/design-system",[586,602,618,647,681],{"title":587,"_path":588,"children":589},"About","/design-system/about",[590,593,596,599],{"title":591,"_path":592,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":594,"_path":595,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":597,"_path":598,"layout":13},"Support","/design-system/about/getting-support",{"title":600,"_path":601,"layout":13},"Contributing","/design-system/about/contributing",{"title":603,"_path":604,"children":605},"Design","/design-system/design",[606,609,612,615],{"title":607,"_path":608,"layout":13},"Getting started","/design-system/design/getting-started",{"title":610,"_path":611,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":613,"_path":614,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":616,"_path":617,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":619,"_path":620,"children":621},"Develop","/design-system/develop",[622,624,626,629],{"title":607,"_path":623,"layout":13},"/design-system/develop/getting-started",{"title":600,"_path":625,"layout":13},"/design-system/develop/contributing",{"title":627,"_path":628,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":630,"children":631,"layout":13},"/design-system/develop/usage",[632,635,638,641,644],{"title":633,"_path":634,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":636,"_path":637,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":639,"_path":640,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":642,"_path":643,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":645,"_path":646,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":648,"_path":649,"children":650},"Styles","/design-system/styles",[651,654,657,660,663,666,669,672,675,678],{"title":652,"_path":653,"layout":13},"Colour","/design-system/styles/colour",{"title":655,"_path":656,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":658,"_path":659,"layout":13},"Grid","/design-system/styles/grid",{"title":661,"_path":662,"layout":13},"Icons","/design-system/styles/icons",{"title":664,"_path":665,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":667,"_path":668,"layout":13},"Layout","/design-system/styles/layout",{"title":670,"_path":671,"layout":13},"Logo","/design-system/styles/logo",{"title":673,"_path":674,"layout":13},"Motion","/design-system/styles/motion",{"title":676,"_path":677,"layout":13},"Spacing","/design-system/styles/spacing",{"title":679,"_path":680,"layout":13},"Typography","/design-system/styles/typography",{"title":682,"_path":683,"children":684},"Components","/design-system/components",[685,688,691,694,697,698,699,700,703,706,709,712,715,718,721,724,727,730,733,736,739,742,745,748,751,754,757,760,763,766,769,772,775,778,781,784,787,790,793,796,799,802,805,808,811,814,817,820],{"title":686,"_path":687,"layout":13},"Accordion","/design-system/components/accordion",{"title":689,"_path":690,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":692,"_path":693,"layout":13},"Alert","/design-system/components/alert",{"title":695,"_path":696,"layout":13},"Block quote","/design-system/components/block-quote",{"title":564,"_path":563,"layout":13},{"title":11,"_path":7,"layout":13},{"title":570,"_path":569,"layout":13},{"title":701,"_path":702,"layout":13},"Callout","/design-system/components/callout",{"title":704,"_path":705,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":707,"_path":708,"layout":13},"Card","/design-system/components/card",{"title":710,"_path":711,"layout":13},"Carousel","/design-system/components/carousel",{"title":713,"_path":714,"layout":13},"Category grid","/design-system/components/category-grid",{"title":716,"_path":717,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":719,"_path":720,"layout":13},"Chip","/design-system/components/chip",{"title":722,"_path":723,"layout":13},"Contact us","/design-system/components/contact-us",{"title":725,"_path":726,"layout":13},"Date input","/design-system/components/date-input",{"title":728,"_path":729,"layout":13},"Detail list","/design-system/components/detail-list",{"title":731,"_path":732,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":734,"_path":735,"layout":13},"File","/design-system/components/file",{"title":737,"_path":738,"layout":13},"Footer","/design-system/components/footer",{"title":740,"_path":741,"layout":13},"Form","/design-system/components/form",{"title":743,"_path":744,"layout":13},"Form alert","/design-system/components/form-alert",{"title":746,"_path":747,"layout":13},"Header","/design-system/components/header",{"title":749,"_path":750,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":752,"_path":753,"layout":13},"Input field","/design-system/components/input-field",{"title":755,"_path":756,"layout":13},"Key dates","/design-system/components/key-dates",{"title":758,"_path":759,"layout":13},"Media","/design-system/components/media",{"title":761,"_path":762,"layout":13},"Media embed","/design-system/components/media-embed",{"title":764,"_path":765,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":767,"_path":768,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":770,"_path":771,"layout":13},"Option button","/design-system/components/option-button",{"title":773,"_path":774,"layout":13},"Page action","/design-system/components/page-action",{"title":776,"_path":777,"layout":13},"Pagination","/design-system/components/pagination",{"title":779,"_path":780,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":782,"_path":783,"layout":13},"Profile","/design-system/components/profile",{"title":785,"_path":786,"layout":13},"Radio button","/design-system/components/radio-button",{"title":788,"_path":789,"layout":13},"Related links","/design-system/components/related-links",{"title":791,"_path":792,"layout":13},"Results listing","/design-system/components/results-listing",{"title":794,"_path":795,"layout":13},"Search bar","/design-system/components/search-bar",{"title":797,"_path":798,"layout":13},"Skip link","/design-system/components/skip-link",{"title":800,"_path":801,"layout":13},"Social share","/design-system/components/social-share",{"title":803,"_path":804,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":806,"_path":807,"layout":13},"Table","/design-system/components/table",{"title":809,"_path":810,"layout":13},"Tabs","/design-system/components/tabs",{"title":812,"_path":813,"layout":13},"Tag","/design-system/components/tag",{"title":815,"_path":816,"layout":13},"Text area","/design-system/components/text-area",{"title":818,"_path":819,"layout":13},"Timeline","/design-system/components/timeline",{"title":821,"_path":822,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":824,"_path":825,"children":826,"layout":13},"Ripple Framework","/framework",[827,828,846,868],{"title":824,"_path":825,"layout":13},{"title":829,"_path":830,"children":831},"Key Concepts","/framework/key-concepts",[832,834,837,840,843],{"title":639,"_path":833,"layout":13},"/framework/key-concepts/nuxt",{"title":835,"_path":836,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":838,"_path":839,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":841,"_path":842,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":844,"_path":845,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":847,"_path":848,"children":849},"Guides","/framework/guides",[850,853,856,859,862,865],{"title":851,"_path":852,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":854,"_path":855,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":857,"_path":858,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":860,"_path":861,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":863,"_path":864,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":866,"_path":867,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":869,"_path":870,"layout":13},"Core modules","/framework/core-modules",["Reactive",872],["Set"],["Reactive",874],{"module-navigation":875},null,true,"/design-system/components/button/",1714695156451]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+<ul><!--[--><li><!--[-->This helps meet accessibility requirements and is consistent with other link types.<!--]--></li><!--]--></ul><!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--default-white&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-white&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="elevated" data-v-ea525968><a href="#elevated" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Elevated<!--]--></a></h2><ul><!--[--><li><!--[-->The elevated variant acts as a &#39;back-to-the-top&#39; button.<!--]--></li><li><!--[-->We&#39;ve added elevation to show the where the button will sit as a &#39;layer&#39; on the page (its CSS z-index value).<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--default-elevated&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-elevated&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="destructive" data-v-ea525968><a href="#destructive" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Destructive<!--]--></a></h2><ul><!--[--><li><!--[-->Use the destructive variant for destructive actions, such as permanently deleting information, across the site.<!--]--></li><li><!--[-->The destructive variant has a semantic meaning and uses semantic colour.<!--]--></li><li><!--[-->Destructive buttons only work if not used often.<!--]--></li><li><!--[-->It’s uncommon for most sites to need one.<!--]--></li><li><!--[-->Only use the destructive variant if an action has destructive consequences because they are not easy to undo.<!--]--></li><!--]--></ul><blockquote class="rpl-callout"><!--[--><p><!--[-->Never rely on colour only to communicate a serious action. For example, don&#39;t rely on red only as a warning to the user. Some users cannot see all colours and will miss meaning. What will happen when the user clicks the button must be obvious from context button text.<!--]--></p><!--]--></blockquote><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--default-destructive&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-destructive&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h3 docs-h3" id="loading-spinner" data-v-ea525968><a href="#loading-spinner" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Loading spinner<!--]--></a></h2><p><!--[-->Loading spinners are used to indicate to users that an action is being processed. Spinners animate as soon as the user initiates an action and disappear once content shows.<!--]--></p><p><!--[-->A user may double-click a button because:<!--]--></p><ul><!--[--><li><!--[-->their main operating system uses double click<!--]--></li><li><!--[-->they have a slow connection which results in delayed action feedback<!--]--></li><li><!--[-->they click the button by accident due to motor impairments like hand tremors.<!--]--></li><!--]--></ul><p><!--[-->Clicking a button twice can mean the information gets sent 2 times.<!--]--></p><p><!--[-->Try to show the user that their click has worked. For example, show a loading spinner once they&#39;ve clicked.<!--]--></p><p><!--[-->When a button is in the loading state, the button label is hidden and a spinner is shown in its place. The button will keep the same width it had when the text was visible.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--busy-state&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--busy-state&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Buttons can be themed in the following 2 ways:<!--]--></p><ul><!--[--><li><!--[-->site colour palette<!--]--></li><li><!--[-->neutral colour palette.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="site-theme" data-v-ea525968><a href="#site-theme" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Site theme<!--]--></a></h2><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--default-filled&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-filled&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--default-outlined&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-outlined&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--default-elevated&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-elevated&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="https:www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https:www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="neutral-theme" data-v-ea525968><a href="#neutral-theme" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Neutral theme<!--]--></a></h2><p><!--[-->Implemented at a site level, the neutral buttons have predefined neutral colour values. You are unable to edit or customise these colours.<!--]--></p><p><!--[-->There is no filled button variant available if you use the neutral theme. Buttons will automatically display as the next level down of button styling. For example, you&#39;ll use the outlined button variant for the neutral theme.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="outlined-1"><!--[-->Outlined<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--neutral-outlined&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--neutral-outlined&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="white-1"><!--[-->White<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--neutral-white&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--neutral-white&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="elevated-1"><!--[-->Elevated<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--neutral-elevated&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--neutral-elevated&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="rationale" data-v-fff5b905><a href="#rationale" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Rationale<!--]--></a></h2><p><!--[-->To enhance visual weight and aim to confirm with <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->WCAG 2.0 Criterion 1.4.1<!--]--><!--]--><!----><!--]--></a>, Ripple buttons use underlined text by default on white buttons.<!--]--></p><p><!--[-->This underline shows users there is an interaction that they can perform.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[-->1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)<!--]--></p><!--]--></blockquote><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/button.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/button/_payload.json">[{"state":1,"once":871,"_errors":873,"serverRendered":876,"path":877,"prerenderedAt":878},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":558,"$sdd-globals":574,"$sdd-navigation":576},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/button":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":553,"_id":554,"_source":555,"_file":556,"_extension":557},"/design-system/components/button","components",false,"","Button","The Button component helps a user to carry out an action.","page","Core",{"type":16,"children":17,"toc":532},"root",[18,27,33,38,43,50,75,81,99,108,112,118,123,151,156,187,190,195,216,220,225,254,258,263,276,280,286,314,322,326,329,335,340,345,363,368,373,378,382,385,391,396,409,415,428,452,458,463,468,474,478,483,487,492,496,499,505,519,524],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use a button to indicate an action a user can take and to let them start carrying it out. Button labels say what action will occur when the user interacts with it.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Only use a button when the page has a call to action. Don't use buttons when sending users to other locations on the page or to other pages or sites.",{"type":19,"tag":39,"props":40,"children":42},"docs-example",{"id":41},"core-navigation-button--default-filled",[],{"type":19,"tag":44,"props":45,"children":47},"h3",{"id":46},"when-and-how-to-use",[48],{"type":25,"value":49},"When and how to use",{"type":19,"tag":51,"props":52,"children":53},"ul",{},[54,60,65,70],{"type":19,"tag":55,"props":56,"children":57},"li",{},[58],{"type":25,"value":59},"Highlight a key call to action.",{"type":19,"tag":55,"props":61,"children":62},{},[63],{"type":25,"value":64},"So long as it also helps users carry out its identified action, a button can link to internal and external pages.",{"type":19,"tag":55,"props":66,"children":67},{},[68],{"type":25,"value":69},"Add to any basic content component.",{"type":19,"tag":55,"props":71,"children":72},{},[73],{"type":25,"value":74},"Use verbs in the button label, for example, 'Submit now', 'Cancel booking', etc.",{"type":19,"tag":44,"props":76,"children":78},{"id":77},"when-not-to-use",[79],{"type":25,"value":80},"When not to use",{"type":19,"tag":51,"props":82,"children":83},{},[84,89,94],{"type":19,"tag":55,"props":85,"children":86},{},[87],{"type":25,"value":88},"Limit primary buttons to one per page.",{"type":19,"tag":55,"props":90,"children":91},{},[92],{"type":25,"value":93},"Don't use more than 4 words in the button label.",{"type":19,"tag":55,"props":95,"children":96},{},[97],{"type":25,"value":98},"Avoid using inactive buttons.",{"type":19,"tag":100,"props":101,"children":102},"blockquote",{},[103],{"type":19,"tag":28,"props":104,"children":105},{},[106],{"type":25,"value":107},"Limit using buttons to one per page. The more you use them, the less a user will notice them.",{"type":19,"tag":109,"props":110,"children":111},"hr",{},[],{"type":19,"tag":20,"props":113,"children":115},{"id":114},"variants",[116],{"type":25,"value":117},"Variants",{"type":19,"tag":28,"props":119,"children":120},{},[121],{"type":25,"value":122},"Buttons are styled for their specific purposes. Button variants include:",{"type":19,"tag":51,"props":124,"children":125},{},[126,131,136,141,146],{"type":19,"tag":55,"props":127,"children":128},{},[129],{"type":25,"value":130},"filled",{"type":19,"tag":55,"props":132,"children":133},{},[134],{"type":25,"value":135},"outlined",{"type":19,"tag":55,"props":137,"children":138},{},[139],{"type":25,"value":140},"white",{"type":19,"tag":55,"props":142,"children":143},{},[144],{"type":25,"value":145},"elevated",{"type":19,"tag":55,"props":147,"children":148},{},[149],{"type":25,"value":150},"destructive.",{"type":19,"tag":44,"props":152,"children":153},{"id":130},[154],{"type":25,"value":155},"Filled",{"type":19,"tag":51,"props":157,"children":158},{},[159,164,169],{"type":19,"tag":55,"props":160,"children":161},{},[162],{"type":25,"value":163},"Use the filled variant for primary actions, known as calls to action.",{"type":19,"tag":55,"props":165,"children":166},{},[167],{"type":25,"value":168},"Use the primary colour.",{"type":19,"tag":55,"props":170,"children":171},{},[172,174],{"type":25,"value":173},"Don't use more than one filled button per page.\n",{"type":19,"tag":51,"props":175,"children":176},{},[177,182],{"type":19,"tag":55,"props":178,"children":179},{},[180],{"type":25,"value":181},"A page should only have one call to action, otherwise they lose impact.",{"type":19,"tag":55,"props":183,"children":184},{},[185],{"type":25,"value":186},"Having more than one also results in a dilemma of choice for the user.",{"type":19,"tag":39,"props":188,"children":189},{"id":41},[],{"type":19,"tag":44,"props":191,"children":192},{"id":135},[193],{"type":25,"value":194},"Outlined",{"type":19,"tag":51,"props":196,"children":197},{},[198,203],{"type":19,"tag":55,"props":199,"children":200},{},[201],{"type":25,"value":202},"The outlined variant is for secondary actions.",{"type":19,"tag":55,"props":204,"children":205},{},[206,208],{"type":25,"value":207},"Like the filled variant, don't use more than one outlined button.\n",{"type":19,"tag":51,"props":209,"children":210},{},[211],{"type":19,"tag":55,"props":212,"children":213},{},[214],{"type":25,"value":215},"If you find you're adding lots of secondary buttons, you may need to simplify your content.",{"type":19,"tag":39,"props":217,"children":219},{"id":218},"core-navigation-button--default-outlined",[],{"type":19,"tag":44,"props":221,"children":222},{"id":140},[223],{"type":25,"value":224},"White",{"type":19,"tag":51,"props":226,"children":227},{},[228,241],{"type":19,"tag":55,"props":229,"children":230},{},[231,233],{"type":25,"value":232},"The white variant is for tertiary actions when an action is less prominent.\n",{"type":19,"tag":51,"props":234,"children":235},{},[236],{"type":19,"tag":55,"props":237,"children":238},{},[239],{"type":25,"value":240},"It should be obvious that it is lower priority than primary or secondary buttons.",{"type":19,"tag":55,"props":242,"children":243},{},[244,246],{"type":25,"value":245},"The white variant is styled with an underline by default, to align with links.\n",{"type":19,"tag":51,"props":247,"children":248},{},[249],{"type":19,"tag":55,"props":250,"children":251},{},[252],{"type":25,"value":253},"This helps meet accessibility requirements and is consistent with other link types.",{"type":19,"tag":39,"props":255,"children":257},{"id":256},"core-navigation-button--default-white",[],{"type":19,"tag":44,"props":259,"children":260},{"id":145},[261],{"type":25,"value":262},"Elevated",{"type":19,"tag":51,"props":264,"children":265},{},[266,271],{"type":19,"tag":55,"props":267,"children":268},{},[269],{"type":25,"value":270},"The elevated variant acts as a 'back-to-the-top' button.",{"type":19,"tag":55,"props":272,"children":273},{},[274],{"type":25,"value":275},"We've added elevation to show the where the button will sit as a 'layer' on the page (its CSS z-index value).",{"type":19,"tag":39,"props":277,"children":279},{"id":278},"core-navigation-button--default-elevated",[],{"type":19,"tag":44,"props":281,"children":283},{"id":282},"destructive",[284],{"type":25,"value":285},"Destructive",{"type":19,"tag":51,"props":287,"children":288},{},[289,294,299,304,309],{"type":19,"tag":55,"props":290,"children":291},{},[292],{"type":25,"value":293},"Use the destructive variant for destructive actions, such as permanently deleting information, across the site.",{"type":19,"tag":55,"props":295,"children":296},{},[297],{"type":25,"value":298},"The destructive variant has a semantic meaning and uses semantic colour.",{"type":19,"tag":55,"props":300,"children":301},{},[302],{"type":25,"value":303},"Destructive buttons only work if not used often.",{"type":19,"tag":55,"props":305,"children":306},{},[307],{"type":25,"value":308},"It’s uncommon for most sites to need one.",{"type":19,"tag":55,"props":310,"children":311},{},[312],{"type":25,"value":313},"Only use the destructive variant if an action has destructive consequences because they are not easy to undo.",{"type":19,"tag":100,"props":315,"children":316},{},[317],{"type":19,"tag":28,"props":318,"children":319},{},[320],{"type":25,"value":321},"Never rely on colour only to communicate a serious action. For example, don't rely on red only as a warning to the user. Some users cannot see all colours and will miss meaning. What will happen when the user clicks the button must be obvious from context button text.",{"type":19,"tag":39,"props":323,"children":325},{"id":324},"core-navigation-button--default-destructive",[],{"type":19,"tag":109,"props":327,"children":328},{},[],{"type":19,"tag":44,"props":330,"children":332},{"id":331},"loading-spinner",[333],{"type":25,"value":334},"Loading spinner",{"type":19,"tag":28,"props":336,"children":337},{},[338],{"type":25,"value":339},"Loading spinners are used to indicate to users that an action is being processed. Spinners animate as soon as the user initiates an action and disappear once content shows.",{"type":19,"tag":28,"props":341,"children":342},{},[343],{"type":25,"value":344},"A user may double-click a button because:",{"type":19,"tag":51,"props":346,"children":347},{},[348,353,358],{"type":19,"tag":55,"props":349,"children":350},{},[351],{"type":25,"value":352},"their main operating system uses double click",{"type":19,"tag":55,"props":354,"children":355},{},[356],{"type":25,"value":357},"they have a slow connection which results in delayed action feedback",{"type":19,"tag":55,"props":359,"children":360},{},[361],{"type":25,"value":362},"they click the button by accident due to motor impairments like hand tremors.",{"type":19,"tag":28,"props":364,"children":365},{},[366],{"type":25,"value":367},"Clicking a button twice can mean the information gets sent 2 times.",{"type":19,"tag":28,"props":369,"children":370},{},[371],{"type":25,"value":372},"Try to show the user that their click has worked. For example, show a loading spinner once they've clicked.",{"type":19,"tag":28,"props":374,"children":375},{},[376],{"type":25,"value":377},"When a button is in the loading state, the button label is hidden and a spinner is shown in its place. The button will keep the same width it had when the text was visible.",{"type":19,"tag":39,"props":379,"children":381},{"id":380},"core-navigation-button--busy-state",[],{"type":19,"tag":109,"props":383,"children":384},{},[],{"type":19,"tag":20,"props":386,"children":388},{"id":387},"theming",[389],{"type":25,"value":390},"Theming",{"type":19,"tag":28,"props":392,"children":393},{},[394],{"type":25,"value":395},"Buttons can be themed in the following 2 ways:",{"type":19,"tag":51,"props":397,"children":398},{},[399,404],{"type":19,"tag":55,"props":400,"children":401},{},[402],{"type":25,"value":403},"site colour palette",{"type":19,"tag":55,"props":405,"children":406},{},[407],{"type":25,"value":408},"neutral colour palette.",{"type":19,"tag":44,"props":410,"children":412},{"id":411},"site-theme",[413],{"type":25,"value":414},"Site theme",{"type":19,"tag":416,"props":417,"children":418},"docs-theme-chooser",{},[419,422,425],{"type":19,"tag":39,"props":420,"children":421},{"id":41},[],{"type":19,"tag":39,"props":423,"children":424},{"id":218},[],{"type":19,"tag":39,"props":426,"children":427},{"id":278},[],{"type":19,"tag":28,"props":429,"children":430},{},[431,433,442,444,450],{"type":25,"value":432},"To create your own theme see ",{"type":19,"tag":434,"props":435,"children":439},"a",{"href":436,"rel":437},"https:www.vic.gov.au",[438],"nofollow",[440],{"type":25,"value":441},"theming guidance for designers",{"type":25,"value":443}," or ",{"type":19,"tag":434,"props":445,"children":447},{"href":436,"rel":446},[438],[448],{"type":25,"value":449},"theming guidance for developers",{"type":25,"value":451},".",{"type":19,"tag":44,"props":453,"children":455},{"id":454},"neutral-theme",[456],{"type":25,"value":457},"Neutral theme",{"type":19,"tag":28,"props":459,"children":460},{},[461],{"type":25,"value":462},"Implemented at a site level, the neutral buttons have predefined neutral colour values. You are unable to edit or customise these colours.",{"type":19,"tag":28,"props":464,"children":465},{},[466],{"type":25,"value":467},"There is no filled button variant available if you use the neutral theme. Buttons will automatically display as the next level down of button styling. For example, you'll use the outlined button variant for the neutral theme.",{"type":19,"tag":469,"props":470,"children":472},"h4",{"id":471},"outlined-1",[473],{"type":25,"value":194},{"type":19,"tag":39,"props":475,"children":477},{"id":476},"core-navigation-button--neutral-outlined",[],{"type":19,"tag":469,"props":479,"children":481},{"id":480},"white-1",[482],{"type":25,"value":224},{"type":19,"tag":39,"props":484,"children":486},{"id":485},"core-navigation-button--neutral-white",[],{"type":19,"tag":469,"props":488,"children":490},{"id":489},"elevated-1",[491],{"type":25,"value":262},{"type":19,"tag":39,"props":493,"children":495},{"id":494},"core-navigation-button--neutral-elevated",[],{"type":19,"tag":109,"props":497,"children":498},{},[],{"type":19,"tag":20,"props":500,"children":502},{"id":501},"rationale",[503],{"type":25,"value":504},"Rationale",{"type":19,"tag":28,"props":506,"children":507},{},[508,510,517],{"type":25,"value":509},"To enhance visual weight and aim to confirm with ",{"type":19,"tag":434,"props":511,"children":514},{"href":512,"rel":513},"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html",[438],[515],{"type":25,"value":516},"WCAG 2.0 Criterion 1.4.1",{"type":25,"value":518},", Ripple buttons use underlined text by default on white buttons.",{"type":19,"tag":28,"props":520,"children":521},{},[522],{"type":25,"value":523},"This underline shows users there is an interaction that they can perform.",{"type":19,"tag":100,"props":525,"children":526},{},[527],{"type":19,"tag":28,"props":528,"children":529},{},[530],{"type":25,"value":531},"1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)",{"title":10,"searchDepth":533,"depth":533,"links":534},2,[535,540,548,552],{"id":22,"depth":533,"text":26,"children":536},[537,539],{"id":46,"depth":538,"text":49},3,{"id":77,"depth":538,"text":80},{"id":114,"depth":533,"text":117,"children":541},[542,543,544,545,546,547],{"id":130,"depth":538,"text":155},{"id":135,"depth":538,"text":194},{"id":140,"depth":538,"text":224},{"id":145,"depth":538,"text":262},{"id":282,"depth":538,"text":285},{"id":331,"depth":538,"text":334},{"id":387,"depth":533,"text":390,"children":549},[550,551],{"id":411,"depth":538,"text":414},{"id":454,"depth":538,"text":457},{"id":501,"depth":533,"text":504},"markdown","content:design-system:5.components:button.md","content","design-system/5.components/button.md","md",["ShallowRef",559],["ShallowReactive",560],{"/design-system/components/button":561},[562,568],{"_path":563,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":564,"description":565,"layout":13,"label":14,"_type":553,"_id":566,"_source":555,"_file":567,"_extension":557},"/design-system/components/breadcrumb","Breadcrumb","The Breadcrumb component shows a user their location on a website. This allows quick navigation between page levels.","content:design-system:5.components:breadcrumb.md","design-system/5.components/breadcrumb.md",{"_path":569,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":570,"description":571,"layout":13,"label":14,"_type":553,"_id":572,"_source":555,"_file":573,"_extension":557},"/design-system/components/call-to-action","Call to action","The Call to action component is a card promoting a specific piece of content and featuring a button highlighting the call to action.","content:design-system:5.components:call-to-action.md","design-system/5.components/call-to-action.md",["ShallowRef",575],{},[577,582,823],{"title":578,"_path":579,"icon":580,"layout":581},"Ripple Design System","/","carbon:home","home",{"title":583,"_path":584,"children":585},"Design System","/design-system",[586,602,618,647,681],{"title":587,"_path":588,"children":589},"About","/design-system/about",[590,593,596,599],{"title":591,"_path":592,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":594,"_path":595,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":597,"_path":598,"layout":13},"Support","/design-system/about/getting-support",{"title":600,"_path":601,"layout":13},"Contributing","/design-system/about/contributing",{"title":603,"_path":604,"children":605},"Design","/design-system/design",[606,609,612,615],{"title":607,"_path":608,"layout":13},"Getting started","/design-system/design/getting-started",{"title":610,"_path":611,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":613,"_path":614,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":616,"_path":617,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":619,"_path":620,"children":621},"Develop","/design-system/develop",[622,624,626,629],{"title":607,"_path":623,"layout":13},"/design-system/develop/getting-started",{"title":600,"_path":625,"layout":13},"/design-system/develop/contributing",{"title":627,"_path":628,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":630,"children":631,"layout":13},"/design-system/develop/usage",[632,635,638,641,644],{"title":633,"_path":634,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":636,"_path":637,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":639,"_path":640,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":642,"_path":643,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":645,"_path":646,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":648,"_path":649,"children":650},"Styles","/design-system/styles",[651,654,657,660,663,666,669,672,675,678],{"title":652,"_path":653,"layout":13},"Colour","/design-system/styles/colour",{"title":655,"_path":656,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":658,"_path":659,"layout":13},"Grid","/design-system/styles/grid",{"title":661,"_path":662,"layout":13},"Icons","/design-system/styles/icons",{"title":664,"_path":665,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":667,"_path":668,"layout":13},"Layout","/design-system/styles/layout",{"title":670,"_path":671,"layout":13},"Logo","/design-system/styles/logo",{"title":673,"_path":674,"layout":13},"Motion","/design-system/styles/motion",{"title":676,"_path":677,"layout":13},"Spacing","/design-system/styles/spacing",{"title":679,"_path":680,"layout":13},"Typography","/design-system/styles/typography",{"title":682,"_path":683,"children":684},"Components","/design-system/components",[685,688,691,694,697,698,699,700,703,706,709,712,715,718,721,724,727,730,733,736,739,742,745,748,751,754,757,760,763,766,769,772,775,778,781,784,787,790,793,796,799,802,805,808,811,814,817,820],{"title":686,"_path":687,"layout":13},"Accordion","/design-system/components/accordion",{"title":689,"_path":690,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":692,"_path":693,"layout":13},"Alert","/design-system/components/alert",{"title":695,"_path":696,"layout":13},"Block quote","/design-system/components/block-quote",{"title":564,"_path":563,"layout":13},{"title":11,"_path":7,"layout":13},{"title":570,"_path":569,"layout":13},{"title":701,"_path":702,"layout":13},"Callout","/design-system/components/callout",{"title":704,"_path":705,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":707,"_path":708,"layout":13},"Card","/design-system/components/card",{"title":710,"_path":711,"layout":13},"Carousel","/design-system/components/carousel",{"title":713,"_path":714,"layout":13},"Category grid","/design-system/components/category-grid",{"title":716,"_path":717,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":719,"_path":720,"layout":13},"Chip","/design-system/components/chip",{"title":722,"_path":723,"layout":13},"Contact us","/design-system/components/contact-us",{"title":725,"_path":726,"layout":13},"Date input","/design-system/components/date-input",{"title":728,"_path":729,"layout":13},"Detail list","/design-system/components/detail-list",{"title":731,"_path":732,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":734,"_path":735,"layout":13},"File","/design-system/components/file",{"title":737,"_path":738,"layout":13},"Footer","/design-system/components/footer",{"title":740,"_path":741,"layout":13},"Form","/design-system/components/form",{"title":743,"_path":744,"layout":13},"Form alert","/design-system/components/form-alert",{"title":746,"_path":747,"layout":13},"Header","/design-system/components/header",{"title":749,"_path":750,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":752,"_path":753,"layout":13},"Input field","/design-system/components/input-field",{"title":755,"_path":756,"layout":13},"Key dates","/design-system/components/key-dates",{"title":758,"_path":759,"layout":13},"Media","/design-system/components/media",{"title":761,"_path":762,"layout":13},"Media embed","/design-system/components/media-embed",{"title":764,"_path":765,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":767,"_path":768,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":770,"_path":771,"layout":13},"Option button","/design-system/components/option-button",{"title":773,"_path":774,"layout":13},"Page action","/design-system/components/page-action",{"title":776,"_path":777,"layout":13},"Pagination","/design-system/components/pagination",{"title":779,"_path":780,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":782,"_path":783,"layout":13},"Profile","/design-system/components/profile",{"title":785,"_path":786,"layout":13},"Radio button","/design-system/components/radio-button",{"title":788,"_path":789,"layout":13},"Related links","/design-system/components/related-links",{"title":791,"_path":792,"layout":13},"Results listing","/design-system/components/results-listing",{"title":794,"_path":795,"layout":13},"Search bar","/design-system/components/search-bar",{"title":797,"_path":798,"layout":13},"Skip link","/design-system/components/skip-link",{"title":800,"_path":801,"layout":13},"Social share","/design-system/components/social-share",{"title":803,"_path":804,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":806,"_path":807,"layout":13},"Table","/design-system/components/table",{"title":809,"_path":810,"layout":13},"Tabs","/design-system/components/tabs",{"title":812,"_path":813,"layout":13},"Tag","/design-system/components/tag",{"title":815,"_path":816,"layout":13},"Text area","/design-system/components/text-area",{"title":818,"_path":819,"layout":13},"Timeline","/design-system/components/timeline",{"title":821,"_path":822,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":824,"_path":825,"children":826,"layout":13},"Ripple Framework","/framework",[827,828,846,868],{"title":824,"_path":825,"layout":13},{"title":829,"_path":830,"children":831},"Key Concepts","/framework/key-concepts",[832,834,837,840,843],{"title":639,"_path":833,"layout":13},"/framework/key-concepts/nuxt",{"title":835,"_path":836,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":838,"_path":839,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":841,"_path":842,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":844,"_path":845,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":847,"_path":848,"children":849},"Guides","/framework/guides",[850,853,856,859,862,865],{"title":851,"_path":852,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":854,"_path":855,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":857,"_path":858,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":860,"_path":861,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":863,"_path":864,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":866,"_path":867,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":869,"_path":870,"layout":13},"Core modules","/framework/core-modules",["Reactive",872],["Set"],["Reactive",874],{"module-navigation":875},null,true,"/design-system/components/button/",1714695654515]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/call-to-action/_payload.json b/design-system/components/call-to-action/_payload.json
index 713b36cae5..c9c9760460 100644
--- a/design-system/components/call-to-action/_payload.json
+++ b/design-system/components/call-to-action/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":104,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695152829]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":104,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695651057]
\ No newline at end of file
diff --git a/design-system/components/call-to-action/index.html b/design-system/components/call-to-action/index.html
index fdb2b91719..b07c9fc44f 100644
--- a/design-system/components/call-to-action/index.html
+++ b/design-system/components/call-to-action/index.html
@@ -28,63 +28,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -96,8 +96,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Call to action</h1><p class="rpl-type-p-large" data-v-3163c6df>The Call to action component is a card promoting a specific piece of content and featuring a button highlighting the call to action.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the call to action card to give a brief summary of content or a task. The call to action card features a button highlighting the call to action.<!--]--></p><p><!--[-->Use it to give your call to action more visual prominence. The call to action card can guide users to perform a preferred action.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--call-to-action&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--call-to-action&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use clear and concise content.<!--]--></li><li><!--[-->Ensure content is relevant to the action or destination.<!--]--></li><li><!--[-->Embed in any body content area of a content page.<!--]--></li><li><!--[-->Use with a relevant image or graphic.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t use without an image or graphic.<!--]--></li><li><!--[-->Don’t overload it with content.<!--]--></li><li><!--[-->Don’t use when a large amount of text is needed for more context.<!--]--></li><li><!--[-->Don’t use other interactive elements, like links.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->The call to action card adopts its theming from your button component’s settings.<!--]--></p><p><!--[-->If you choose neutral button for your site, the call to action card will display buttons in the neutral theme.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--call-to-action&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--call-to-action&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/call-to-action.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/call-to-action/_payload.json">[{"state":1,"once":478,"_errors":480,"serverRendered":483,"path":7,"prerenderedAt":484},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":165,"$sdd-globals":181,"$sdd-navigation":183},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/call-to-action":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":160,"_id":161,"_source":162,"_file":163,"_extension":164},"/design-system/components/call-to-action","components",false,"","Call to action","The Call to action component is a card promoting a specific piece of content and featuring a button highlighting the call to action.","page","Core",{"type":16,"children":17,"toc":151},"root",[18,27,33,38,43,50,75,81,104,108,114,119,124,131],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use the call to action card to give a brief summary of content or a task. The call to action card features a button highlighting the call to action.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Use it to give your call to action more visual prominence. The call to action card can guide users to perform a preferred action.",{"type":19,"tag":39,"props":40,"children":42},"docs-example",{"id":41},"core-navigation-card--call-to-action",[],{"type":19,"tag":44,"props":45,"children":47},"h3",{"id":46},"when-and-how-to-use",[48],{"type":25,"value":49},"When and how to use",{"type":19,"tag":51,"props":52,"children":53},"ul",{},[54,60,65,70],{"type":19,"tag":55,"props":56,"children":57},"li",{},[58],{"type":25,"value":59},"Use clear and concise content.",{"type":19,"tag":55,"props":61,"children":62},{},[63],{"type":25,"value":64},"Ensure content is relevant to the action or destination.",{"type":19,"tag":55,"props":66,"children":67},{},[68],{"type":25,"value":69},"Embed in any body content area of a content page.",{"type":19,"tag":55,"props":71,"children":72},{},[73],{"type":25,"value":74},"Use with a relevant image or graphic.",{"type":19,"tag":44,"props":76,"children":78},{"id":77},"when-and-how-not-to-use",[79],{"type":25,"value":80},"When and how not to use",{"type":19,"tag":51,"props":82,"children":83},{},[84,89,94,99],{"type":19,"tag":55,"props":85,"children":86},{},[87],{"type":25,"value":88},"Don’t use without an image or graphic.",{"type":19,"tag":55,"props":90,"children":91},{},[92],{"type":25,"value":93},"Don’t overload it with content.",{"type":19,"tag":55,"props":95,"children":96},{},[97],{"type":25,"value":98},"Don’t use when a large amount of text is needed for more context.",{"type":19,"tag":55,"props":100,"children":101},{},[102],{"type":25,"value":103},"Don’t use other interactive elements, like links.",{"type":19,"tag":105,"props":106,"children":107},"hr",{},[],{"type":19,"tag":20,"props":109,"children":111},{"id":110},"theming",[112],{"type":25,"value":113},"Theming",{"type":19,"tag":28,"props":115,"children":116},{},[117],{"type":25,"value":118},"The call to action card adopts its theming from your button component’s settings.",{"type":19,"tag":28,"props":120,"children":121},{},[122],{"type":25,"value":123},"If you choose neutral button for your site, the call to action card will display buttons in the neutral theme.",{"type":19,"tag":125,"props":126,"children":127},"docs-theme-chooser",{},[128],{"type":19,"tag":39,"props":129,"children":130},{"id":41},[],{"type":19,"tag":28,"props":132,"children":133},{},[134,136,142,144,149],{"type":25,"value":135},"To create your own theme, see ",{"type":19,"tag":137,"props":138,"children":139},"a",{"href":10},[140],{"type":25,"value":141},"theming guidance for designers",{"type":25,"value":143}," or ",{"type":19,"tag":137,"props":145,"children":146},{"href":10},[147],{"type":25,"value":148},"theming guidance for developers",{"type":25,"value":150},".",{"title":10,"searchDepth":152,"depth":152,"links":153},2,[154,159],{"id":22,"depth":152,"text":26,"children":155},[156,158],{"id":46,"depth":157,"text":49},3,{"id":77,"depth":157,"text":80},{"id":110,"depth":152,"text":113},"markdown","content:design-system:5.components:call-to-action.md","content","design-system/5.components/call-to-action.md","md",["ShallowRef",166],["ShallowReactive",167],{"/design-system/components/call-to-action":168},[169,175],{"_path":170,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":171,"description":172,"layout":13,"label":14,"_type":160,"_id":173,"_source":162,"_file":174,"_extension":164},"/design-system/components/button","Button","The Button component helps a user to carry out an action.","content:design-system:5.components:button.md","design-system/5.components/button.md",{"_path":176,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":177,"description":178,"layout":13,"label":14,"_type":160,"_id":179,"_source":162,"_file":180,"_extension":164},"/design-system/components/callout","Callout","The Callout component is a text excerpt that draws attention to specific or important content.","content:design-system:5.components:callout.md","design-system/5.components/callout.md",["ShallowRef",182],{},[184,189,430],{"title":185,"_path":186,"icon":187,"layout":188},"Ripple Design System","/","carbon:home","home",{"title":190,"_path":191,"children":192},"Design System","/design-system",[193,209,225,254,288],{"title":194,"_path":195,"children":196},"About","/design-system/about",[197,200,203,206],{"title":198,"_path":199,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":201,"_path":202,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":204,"_path":205,"layout":13},"Support","/design-system/about/getting-support",{"title":207,"_path":208,"layout":13},"Contributing","/design-system/about/contributing",{"title":210,"_path":211,"children":212},"Design","/design-system/design",[213,216,219,222],{"title":214,"_path":215,"layout":13},"Getting started","/design-system/design/getting-started",{"title":217,"_path":218,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":220,"_path":221,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":223,"_path":224,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":226,"_path":227,"children":228},"Develop","/design-system/develop",[229,231,233,236],{"title":214,"_path":230,"layout":13},"/design-system/develop/getting-started",{"title":207,"_path":232,"layout":13},"/design-system/develop/contributing",{"title":234,"_path":235,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":237,"children":238,"layout":13},"/design-system/develop/usage",[239,242,245,248,251],{"title":240,"_path":241,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":243,"_path":244,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":246,"_path":247,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":249,"_path":250,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":252,"_path":253,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":255,"_path":256,"children":257},"Styles","/design-system/styles",[258,261,264,267,270,273,276,279,282,285],{"title":259,"_path":260,"layout":13},"Colour","/design-system/styles/colour",{"title":262,"_path":263,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":265,"_path":266,"layout":13},"Grid","/design-system/styles/grid",{"title":268,"_path":269,"layout":13},"Icons","/design-system/styles/icons",{"title":271,"_path":272,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":274,"_path":275,"layout":13},"Layout","/design-system/styles/layout",{"title":277,"_path":278,"layout":13},"Logo","/design-system/styles/logo",{"title":280,"_path":281,"layout":13},"Motion","/design-system/styles/motion",{"title":283,"_path":284,"layout":13},"Spacing","/design-system/styles/spacing",{"title":286,"_path":287,"layout":13},"Typography","/design-system/styles/typography",{"title":289,"_path":290,"children":291},"Components","/design-system/components",[292,295,298,301,304,307,308,309,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427],{"title":293,"_path":294,"layout":13},"Accordion","/design-system/components/accordion",{"title":296,"_path":297,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":299,"_path":300,"layout":13},"Alert","/design-system/components/alert",{"title":302,"_path":303,"layout":13},"Block quote","/design-system/components/block-quote",{"title":305,"_path":306,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":171,"_path":170,"layout":13},{"title":11,"_path":7,"layout":13},{"title":177,"_path":176,"layout":13},{"title":311,"_path":312,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":314,"_path":315,"layout":13},"Card","/design-system/components/card",{"title":317,"_path":318,"layout":13},"Carousel","/design-system/components/carousel",{"title":320,"_path":321,"layout":13},"Category grid","/design-system/components/category-grid",{"title":323,"_path":324,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":326,"_path":327,"layout":13},"Chip","/design-system/components/chip",{"title":329,"_path":330,"layout":13},"Contact us","/design-system/components/contact-us",{"title":332,"_path":333,"layout":13},"Date input","/design-system/components/date-input",{"title":335,"_path":336,"layout":13},"Detail list","/design-system/components/detail-list",{"title":338,"_path":339,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":341,"_path":342,"layout":13},"File","/design-system/components/file",{"title":344,"_path":345,"layout":13},"Footer","/design-system/components/footer",{"title":347,"_path":348,"layout":13},"Form","/design-system/components/form",{"title":350,"_path":351,"layout":13},"Form alert","/design-system/components/form-alert",{"title":353,"_path":354,"layout":13},"Header","/design-system/components/header",{"title":356,"_path":357,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":359,"_path":360,"layout":13},"Input field","/design-system/components/input-field",{"title":362,"_path":363,"layout":13},"Key dates","/design-system/components/key-dates",{"title":365,"_path":366,"layout":13},"Media","/design-system/components/media",{"title":368,"_path":369,"layout":13},"Media embed","/design-system/components/media-embed",{"title":371,"_path":372,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":374,"_path":375,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":377,"_path":378,"layout":13},"Option button","/design-system/components/option-button",{"title":380,"_path":381,"layout":13},"Page action","/design-system/components/page-action",{"title":383,"_path":384,"layout":13},"Pagination","/design-system/components/pagination",{"title":386,"_path":387,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":389,"_path":390,"layout":13},"Profile","/design-system/components/profile",{"title":392,"_path":393,"layout":13},"Radio button","/design-system/components/radio-button",{"title":395,"_path":396,"layout":13},"Related links","/design-system/components/related-links",{"title":398,"_path":399,"layout":13},"Results listing","/design-system/components/results-listing",{"title":401,"_path":402,"layout":13},"Search bar","/design-system/components/search-bar",{"title":404,"_path":405,"layout":13},"Skip link","/design-system/components/skip-link",{"title":407,"_path":408,"layout":13},"Social share","/design-system/components/social-share",{"title":410,"_path":411,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":413,"_path":414,"layout":13},"Table","/design-system/components/table",{"title":416,"_path":417,"layout":13},"Tabs","/design-system/components/tabs",{"title":419,"_path":420,"layout":13},"Tag","/design-system/components/tag",{"title":422,"_path":423,"layout":13},"Text area","/design-system/components/text-area",{"title":425,"_path":426,"layout":13},"Timeline","/design-system/components/timeline",{"title":428,"_path":429,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":431,"_path":432,"children":433,"layout":13},"Ripple Framework","/framework",[434,435,453,475],{"title":431,"_path":432,"layout":13},{"title":436,"_path":437,"children":438},"Key Concepts","/framework/key-concepts",[439,441,444,447,450],{"title":246,"_path":440,"layout":13},"/framework/key-concepts/nuxt",{"title":442,"_path":443,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":445,"_path":446,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":448,"_path":449,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":451,"_path":452,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":454,"_path":455,"children":456},"Guides","/framework/guides",[457,460,463,466,469,472],{"title":458,"_path":459,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":461,"_path":462,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":464,"_path":465,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":467,"_path":468,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":470,"_path":471,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":473,"_path":474,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":476,"_path":477,"layout":13},"Core modules","/framework/core-modules",["Reactive",479],["Set"],["Reactive",481],{"module-navigation":482},null,true,1714695152829]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Call to action</h1><p class="rpl-type-p-large" data-v-3163c6df>The Call to action component is a card promoting a specific piece of content and featuring a button highlighting the call to action.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the call to action card to give a brief summary of content or a task. The call to action card features a button highlighting the call to action.<!--]--></p><p><!--[-->Use it to give your call to action more visual prominence. The call to action card can guide users to perform a preferred action.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--call-to-action&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--call-to-action&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use clear and concise content.<!--]--></li><li><!--[-->Ensure content is relevant to the action or destination.<!--]--></li><li><!--[-->Embed in any body content area of a content page.<!--]--></li><li><!--[-->Use with a relevant image or graphic.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t use without an image or graphic.<!--]--></li><li><!--[-->Don’t overload it with content.<!--]--></li><li><!--[-->Don’t use when a large amount of text is needed for more context.<!--]--></li><li><!--[-->Don’t use other interactive elements, like links.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->The call to action card adopts its theming from your button component’s settings.<!--]--></p><p><!--[-->If you choose neutral button for your site, the call to action card will display buttons in the neutral theme.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--call-to-action&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--call-to-action&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/call-to-action.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/call-to-action/_payload.json">[{"state":1,"once":478,"_errors":480,"serverRendered":483,"path":7,"prerenderedAt":484},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":165,"$sdd-globals":181,"$sdd-navigation":183},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/call-to-action":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":160,"_id":161,"_source":162,"_file":163,"_extension":164},"/design-system/components/call-to-action","components",false,"","Call to action","The Call to action component is a card promoting a specific piece of content and featuring a button highlighting the call to action.","page","Core",{"type":16,"children":17,"toc":151},"root",[18,27,33,38,43,50,75,81,104,108,114,119,124,131],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use the call to action card to give a brief summary of content or a task. The call to action card features a button highlighting the call to action.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Use it to give your call to action more visual prominence. The call to action card can guide users to perform a preferred action.",{"type":19,"tag":39,"props":40,"children":42},"docs-example",{"id":41},"core-navigation-card--call-to-action",[],{"type":19,"tag":44,"props":45,"children":47},"h3",{"id":46},"when-and-how-to-use",[48],{"type":25,"value":49},"When and how to use",{"type":19,"tag":51,"props":52,"children":53},"ul",{},[54,60,65,70],{"type":19,"tag":55,"props":56,"children":57},"li",{},[58],{"type":25,"value":59},"Use clear and concise content.",{"type":19,"tag":55,"props":61,"children":62},{},[63],{"type":25,"value":64},"Ensure content is relevant to the action or destination.",{"type":19,"tag":55,"props":66,"children":67},{},[68],{"type":25,"value":69},"Embed in any body content area of a content page.",{"type":19,"tag":55,"props":71,"children":72},{},[73],{"type":25,"value":74},"Use with a relevant image or graphic.",{"type":19,"tag":44,"props":76,"children":78},{"id":77},"when-and-how-not-to-use",[79],{"type":25,"value":80},"When and how not to use",{"type":19,"tag":51,"props":82,"children":83},{},[84,89,94,99],{"type":19,"tag":55,"props":85,"children":86},{},[87],{"type":25,"value":88},"Don’t use without an image or graphic.",{"type":19,"tag":55,"props":90,"children":91},{},[92],{"type":25,"value":93},"Don’t overload it with content.",{"type":19,"tag":55,"props":95,"children":96},{},[97],{"type":25,"value":98},"Don’t use when a large amount of text is needed for more context.",{"type":19,"tag":55,"props":100,"children":101},{},[102],{"type":25,"value":103},"Don’t use other interactive elements, like links.",{"type":19,"tag":105,"props":106,"children":107},"hr",{},[],{"type":19,"tag":20,"props":109,"children":111},{"id":110},"theming",[112],{"type":25,"value":113},"Theming",{"type":19,"tag":28,"props":115,"children":116},{},[117],{"type":25,"value":118},"The call to action card adopts its theming from your button component’s settings.",{"type":19,"tag":28,"props":120,"children":121},{},[122],{"type":25,"value":123},"If you choose neutral button for your site, the call to action card will display buttons in the neutral theme.",{"type":19,"tag":125,"props":126,"children":127},"docs-theme-chooser",{},[128],{"type":19,"tag":39,"props":129,"children":130},{"id":41},[],{"type":19,"tag":28,"props":132,"children":133},{},[134,136,142,144,149],{"type":25,"value":135},"To create your own theme, see ",{"type":19,"tag":137,"props":138,"children":139},"a",{"href":10},[140],{"type":25,"value":141},"theming guidance for designers",{"type":25,"value":143}," or ",{"type":19,"tag":137,"props":145,"children":146},{"href":10},[147],{"type":25,"value":148},"theming guidance for developers",{"type":25,"value":150},".",{"title":10,"searchDepth":152,"depth":152,"links":153},2,[154,159],{"id":22,"depth":152,"text":26,"children":155},[156,158],{"id":46,"depth":157,"text":49},3,{"id":77,"depth":157,"text":80},{"id":110,"depth":152,"text":113},"markdown","content:design-system:5.components:call-to-action.md","content","design-system/5.components/call-to-action.md","md",["ShallowRef",166],["ShallowReactive",167],{"/design-system/components/call-to-action":168},[169,175],{"_path":170,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":171,"description":172,"layout":13,"label":14,"_type":160,"_id":173,"_source":162,"_file":174,"_extension":164},"/design-system/components/button","Button","The Button component helps a user to carry out an action.","content:design-system:5.components:button.md","design-system/5.components/button.md",{"_path":176,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":177,"description":178,"layout":13,"label":14,"_type":160,"_id":179,"_source":162,"_file":180,"_extension":164},"/design-system/components/callout","Callout","The Callout component is a text excerpt that draws attention to specific or important content.","content:design-system:5.components:callout.md","design-system/5.components/callout.md",["ShallowRef",182],{},[184,189,430],{"title":185,"_path":186,"icon":187,"layout":188},"Ripple Design System","/","carbon:home","home",{"title":190,"_path":191,"children":192},"Design System","/design-system",[193,209,225,254,288],{"title":194,"_path":195,"children":196},"About","/design-system/about",[197,200,203,206],{"title":198,"_path":199,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":201,"_path":202,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":204,"_path":205,"layout":13},"Support","/design-system/about/getting-support",{"title":207,"_path":208,"layout":13},"Contributing","/design-system/about/contributing",{"title":210,"_path":211,"children":212},"Design","/design-system/design",[213,216,219,222],{"title":214,"_path":215,"layout":13},"Getting started","/design-system/design/getting-started",{"title":217,"_path":218,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":220,"_path":221,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":223,"_path":224,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":226,"_path":227,"children":228},"Develop","/design-system/develop",[229,231,233,236],{"title":214,"_path":230,"layout":13},"/design-system/develop/getting-started",{"title":207,"_path":232,"layout":13},"/design-system/develop/contributing",{"title":234,"_path":235,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":237,"children":238,"layout":13},"/design-system/develop/usage",[239,242,245,248,251],{"title":240,"_path":241,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":243,"_path":244,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":246,"_path":247,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":249,"_path":250,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":252,"_path":253,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":255,"_path":256,"children":257},"Styles","/design-system/styles",[258,261,264,267,270,273,276,279,282,285],{"title":259,"_path":260,"layout":13},"Colour","/design-system/styles/colour",{"title":262,"_path":263,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":265,"_path":266,"layout":13},"Grid","/design-system/styles/grid",{"title":268,"_path":269,"layout":13},"Icons","/design-system/styles/icons",{"title":271,"_path":272,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":274,"_path":275,"layout":13},"Layout","/design-system/styles/layout",{"title":277,"_path":278,"layout":13},"Logo","/design-system/styles/logo",{"title":280,"_path":281,"layout":13},"Motion","/design-system/styles/motion",{"title":283,"_path":284,"layout":13},"Spacing","/design-system/styles/spacing",{"title":286,"_path":287,"layout":13},"Typography","/design-system/styles/typography",{"title":289,"_path":290,"children":291},"Components","/design-system/components",[292,295,298,301,304,307,308,309,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427],{"title":293,"_path":294,"layout":13},"Accordion","/design-system/components/accordion",{"title":296,"_path":297,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":299,"_path":300,"layout":13},"Alert","/design-system/components/alert",{"title":302,"_path":303,"layout":13},"Block quote","/design-system/components/block-quote",{"title":305,"_path":306,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":171,"_path":170,"layout":13},{"title":11,"_path":7,"layout":13},{"title":177,"_path":176,"layout":13},{"title":311,"_path":312,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":314,"_path":315,"layout":13},"Card","/design-system/components/card",{"title":317,"_path":318,"layout":13},"Carousel","/design-system/components/carousel",{"title":320,"_path":321,"layout":13},"Category grid","/design-system/components/category-grid",{"title":323,"_path":324,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":326,"_path":327,"layout":13},"Chip","/design-system/components/chip",{"title":329,"_path":330,"layout":13},"Contact us","/design-system/components/contact-us",{"title":332,"_path":333,"layout":13},"Date input","/design-system/components/date-input",{"title":335,"_path":336,"layout":13},"Detail list","/design-system/components/detail-list",{"title":338,"_path":339,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":341,"_path":342,"layout":13},"File","/design-system/components/file",{"title":344,"_path":345,"layout":13},"Footer","/design-system/components/footer",{"title":347,"_path":348,"layout":13},"Form","/design-system/components/form",{"title":350,"_path":351,"layout":13},"Form alert","/design-system/components/form-alert",{"title":353,"_path":354,"layout":13},"Header","/design-system/components/header",{"title":356,"_path":357,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":359,"_path":360,"layout":13},"Input field","/design-system/components/input-field",{"title":362,"_path":363,"layout":13},"Key dates","/design-system/components/key-dates",{"title":365,"_path":366,"layout":13},"Media","/design-system/components/media",{"title":368,"_path":369,"layout":13},"Media embed","/design-system/components/media-embed",{"title":371,"_path":372,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":374,"_path":375,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":377,"_path":378,"layout":13},"Option button","/design-system/components/option-button",{"title":380,"_path":381,"layout":13},"Page action","/design-system/components/page-action",{"title":383,"_path":384,"layout":13},"Pagination","/design-system/components/pagination",{"title":386,"_path":387,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":389,"_path":390,"layout":13},"Profile","/design-system/components/profile",{"title":392,"_path":393,"layout":13},"Radio button","/design-system/components/radio-button",{"title":395,"_path":396,"layout":13},"Related links","/design-system/components/related-links",{"title":398,"_path":399,"layout":13},"Results listing","/design-system/components/results-listing",{"title":401,"_path":402,"layout":13},"Search bar","/design-system/components/search-bar",{"title":404,"_path":405,"layout":13},"Skip link","/design-system/components/skip-link",{"title":407,"_path":408,"layout":13},"Social share","/design-system/components/social-share",{"title":410,"_path":411,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":413,"_path":414,"layout":13},"Table","/design-system/components/table",{"title":416,"_path":417,"layout":13},"Tabs","/design-system/components/tabs",{"title":419,"_path":420,"layout":13},"Tag","/design-system/components/tag",{"title":422,"_path":423,"layout":13},"Text area","/design-system/components/text-area",{"title":425,"_path":426,"layout":13},"Timeline","/design-system/components/timeline",{"title":428,"_path":429,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":431,"_path":432,"children":433,"layout":13},"Ripple Framework","/framework",[434,435,453,475],{"title":431,"_path":432,"layout":13},{"title":436,"_path":437,"children":438},"Key Concepts","/framework/key-concepts",[439,441,444,447,450],{"title":246,"_path":440,"layout":13},"/framework/key-concepts/nuxt",{"title":442,"_path":443,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":445,"_path":446,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":448,"_path":449,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":451,"_path":452,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":454,"_path":455,"children":456},"Guides","/framework/guides",[457,460,463,466,469,472],{"title":458,"_path":459,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":461,"_path":462,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":464,"_path":465,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":467,"_path":468,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":470,"_path":471,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":473,"_path":474,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":476,"_path":477,"layout":13},"Core modules","/framework/core-modules",["Reactive",479],["Set"],["Reactive",481],{"module-navigation":482},null,true,1714695651057]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/callout/_payload.json b/design-system/components/callout/_payload.json
index 9b930c435e..7af0e71787 100644
--- a/design-system/components/callout/_payload.json
+++ b/design-system/components/callout/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":104,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695152873]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":104,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695651100]
\ No newline at end of file
diff --git a/design-system/components/callout/index.html b/design-system/components/callout/index.html
index c1bfda2b11..7bcd6c6c4f 100644
--- a/design-system/components/callout/index.html
+++ b/design-system/components/callout/index.html
@@ -28,64 +28,64 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.lp_k9Hpd.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.Czpq-HHw.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -97,8 +97,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Callout</h1><p class="rpl-type-p-large" data-v-3163c6df>The Callout component is a text excerpt that draws attention to specific or important content.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use callouts to:<!--]--></p><ul><!--[--><li><!--[-->draw a user&#39;s attention<!--]--></li><li><!--[-->add emphasis to the content<!--]--></li><li><!--[-->provide a user with more information.<!--]--></li><!--]--></ul><p><!--[-->A callout repeats and highlights content already on the page. Use callouts sparingly. To maintain effectiveness, consider weaving this information into the page&#39;s main content.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-content--callout&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--callout&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Highlight important information vital to the user.<!--]--></li><li><!--[-->Place a callout in a prominent position on the page.<!--]--></li><li><!--[-->Use with text only.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Only feature one callout per page.<!--]--></li><li><!--[-->Use no more than 2 paragraphs per callout.<!--]--></li><li><!--[-->Don&#39;t put the callout at the bottom of the page.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->To allow for different levels of emphasis, a callout has 2 styles:<!--]--></p><ul><!--[--><li><!--[-->accent<!--]--></li><li><!--[-->neutral.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="accent" data-v-ea525968><a href="#accent" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Accent<!--]--></a></h2><p><!--[-->Use the accent variant to add a high level of emphasis to the selected content. The callout accent can adopt any WYSIWYG type styles you choose.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-content--callout&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--callout&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="neutral" data-v-ea525968><a href="#neutral" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Neutral<!--]--></a></h2><p><!--[-->Use the neutral variant to give content a medium level of emphasis. The neutral callout uses a predefined type style that you cannot change.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-content--callout-neutral&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--callout-neutral&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->The accent variant uses the site accent colour to:<!--]--></p><ul><!--[--><li><!--[-->add visual prominence to the content<!--]--></li><li><!--[-->aid hierarchy in the content area.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-content--callout&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--callout&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="rationale" data-v-fff5b905><a href="#rationale" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Rationale<!--]--></a></h2><p><!--[-->To enhance visual weight and aim to conform with <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->WCAG2.0 Criterion 1.4.1<!--]--><!--]--><!----><!--]--></a>, Ripple callouts use:<!--]--></p><ul><!--[--><li><!--[-->a thick left-hand border<!--]--></li><li><!--[-->background colours<!--]--></li><li><!--[-->padding.<!--]--></li><!--]--></ul><blockquote class="rpl-callout"><!--[--><p><!--[-->1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)<!--]--></p><!--]--></blockquote><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/callout.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/callout/_payload.json">[{"state":1,"once":605,"_errors":607,"serverRendered":610,"path":7,"prerenderedAt":611},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":292,"$sdd-globals":308,"$sdd-navigation":310},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/callout":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":287,"_id":288,"_source":289,"_file":290,"_extension":291},"/design-system/components/callout","components",false,"","Callout","The Callout component is a text excerpt that draws attention to specific or important content.","page","Core",{"type":16,"children":17,"toc":273},"root",[18,27,33,53,58,63,70,88,94,112,116,122,127,140,145,150,153,159,164,168,171,177,182,195,202,222,225,231,246,264],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use callouts to:",{"type":19,"tag":34,"props":35,"children":36},"ul",{},[37,43,48],{"type":19,"tag":38,"props":39,"children":40},"li",{},[41],{"type":25,"value":42},"draw a user's attention",{"type":19,"tag":38,"props":44,"children":45},{},[46],{"type":25,"value":47},"add emphasis to the content",{"type":19,"tag":38,"props":49,"children":50},{},[51],{"type":25,"value":52},"provide a user with more information.",{"type":19,"tag":28,"props":54,"children":55},{},[56],{"type":25,"value":57},"A callout repeats and highlights content already on the page. Use callouts sparingly. To maintain effectiveness, consider weaving this information into the page's main content.",{"type":19,"tag":59,"props":60,"children":62},"docs-example",{"id":61},"core-containers-content--callout",[],{"type":19,"tag":64,"props":65,"children":67},"h3",{"id":66},"when-and-how-to-use",[68],{"type":25,"value":69},"When and how to use",{"type":19,"tag":34,"props":71,"children":72},{},[73,78,83],{"type":19,"tag":38,"props":74,"children":75},{},[76],{"type":25,"value":77},"Highlight important information vital to the user.",{"type":19,"tag":38,"props":79,"children":80},{},[81],{"type":25,"value":82},"Place a callout in a prominent position on the page.",{"type":19,"tag":38,"props":84,"children":85},{},[86],{"type":25,"value":87},"Use with text only.",{"type":19,"tag":64,"props":89,"children":91},{"id":90},"when-and-how-not-to-use",[92],{"type":25,"value":93},"When and how not to use",{"type":19,"tag":34,"props":95,"children":96},{},[97,102,107],{"type":19,"tag":38,"props":98,"children":99},{},[100],{"type":25,"value":101},"Only feature one callout per page.",{"type":19,"tag":38,"props":103,"children":104},{},[105],{"type":25,"value":106},"Use no more than 2 paragraphs per callout.",{"type":19,"tag":38,"props":108,"children":109},{},[110],{"type":25,"value":111},"Don't put the callout at the bottom of the page.",{"type":19,"tag":113,"props":114,"children":115},"hr",{},[],{"type":19,"tag":20,"props":117,"children":119},{"id":118},"variants",[120],{"type":25,"value":121},"Variants",{"type":19,"tag":28,"props":123,"children":124},{},[125],{"type":25,"value":126},"To allow for different levels of emphasis, a callout has 2 styles:",{"type":19,"tag":34,"props":128,"children":129},{},[130,135],{"type":19,"tag":38,"props":131,"children":132},{},[133],{"type":25,"value":134},"accent",{"type":19,"tag":38,"props":136,"children":137},{},[138],{"type":25,"value":139},"neutral.",{"type":19,"tag":64,"props":141,"children":142},{"id":134},[143],{"type":25,"value":144},"Accent",{"type":19,"tag":28,"props":146,"children":147},{},[148],{"type":25,"value":149},"Use the accent variant to add a high level of emphasis to the selected content. The callout accent can adopt any WYSIWYG type styles you choose.",{"type":19,"tag":59,"props":151,"children":152},{"id":61},[],{"type":19,"tag":64,"props":154,"children":156},{"id":155},"neutral",[157],{"type":25,"value":158},"Neutral",{"type":19,"tag":28,"props":160,"children":161},{},[162],{"type":25,"value":163},"Use the neutral variant to give content a medium level of emphasis. The neutral callout uses a predefined type style that you cannot change.",{"type":19,"tag":59,"props":165,"children":167},{"id":166},"core-containers-content--callout-neutral",[],{"type":19,"tag":113,"props":169,"children":170},{},[],{"type":19,"tag":20,"props":172,"children":174},{"id":173},"theming",[175],{"type":25,"value":176},"Theming",{"type":19,"tag":28,"props":178,"children":179},{},[180],{"type":25,"value":181},"The accent variant uses the site accent colour to:",{"type":19,"tag":34,"props":183,"children":184},{},[185,190],{"type":19,"tag":38,"props":186,"children":187},{},[188],{"type":25,"value":189},"add visual prominence to the content",{"type":19,"tag":38,"props":191,"children":192},{},[193],{"type":25,"value":194},"aid hierarchy in the content area.",{"type":19,"tag":196,"props":197,"children":198},"docs-theme-chooser",{},[199],{"type":19,"tag":59,"props":200,"children":201},{"id":61},[],{"type":19,"tag":28,"props":203,"children":204},{},[205,207,213,215,220],{"type":25,"value":206},"To create your own theme, see ",{"type":19,"tag":208,"props":209,"children":210},"a",{"href":10},[211],{"type":25,"value":212},"theming guidance for designers",{"type":25,"value":214}," or ",{"type":19,"tag":208,"props":216,"children":217},{"href":10},[218],{"type":25,"value":219},"theming guidance for developers",{"type":25,"value":221},".",{"type":19,"tag":113,"props":223,"children":224},{},[],{"type":19,"tag":20,"props":226,"children":228},{"id":227},"rationale",[229],{"type":25,"value":230},"Rationale",{"type":19,"tag":28,"props":232,"children":233},{},[234,236,244],{"type":25,"value":235},"To enhance visual weight and aim to conform with ",{"type":19,"tag":208,"props":237,"children":241},{"href":238,"rel":239},"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html",[240],"nofollow",[242],{"type":25,"value":243},"WCAG2.0 Criterion 1.4.1",{"type":25,"value":245},", Ripple callouts use:",{"type":19,"tag":34,"props":247,"children":248},{},[249,254,259],{"type":19,"tag":38,"props":250,"children":251},{},[252],{"type":25,"value":253},"a thick left-hand border",{"type":19,"tag":38,"props":255,"children":256},{},[257],{"type":25,"value":258},"background colours",{"type":19,"tag":38,"props":260,"children":261},{},[262],{"type":25,"value":263},"padding.",{"type":19,"tag":265,"props":266,"children":267},"blockquote",{},[268],{"type":19,"tag":28,"props":269,"children":270},{},[271],{"type":25,"value":272},"1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)",{"title":10,"searchDepth":274,"depth":274,"links":275},2,[276,281,285,286],{"id":22,"depth":274,"text":26,"children":277},[278,280],{"id":66,"depth":279,"text":69},3,{"id":90,"depth":279,"text":93},{"id":118,"depth":274,"text":121,"children":282},[283,284],{"id":134,"depth":279,"text":144},{"id":155,"depth":279,"text":158},{"id":173,"depth":274,"text":176},{"id":227,"depth":274,"text":230},"markdown","content:design-system:5.components:callout.md","content","design-system/5.components/callout.md","md",["ShallowRef",293],["ShallowReactive",294],{"/design-system/components/callout":295},[296,302],{"_path":297,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":298,"description":299,"layout":13,"label":14,"_type":287,"_id":300,"_source":289,"_file":301,"_extension":291},"/design-system/components/call-to-action","Call to action","The Call to action component is a card promoting a specific piece of content and featuring a button highlighting the call to action.","content:design-system:5.components:call-to-action.md","design-system/5.components/call-to-action.md",{"_path":303,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":304,"description":305,"layout":13,"label":14,"_type":287,"_id":306,"_source":289,"_file":307,"_extension":291},"/design-system/components/campaign-banner","Campaign banner","The Campaign banner component draws a user's attention to promoted content.","content:design-system:5.components:campaign-banner.md","design-system/5.components/campaign-banner.md",["ShallowRef",309],{},[311,316,557],{"title":312,"_path":313,"icon":314,"layout":315},"Ripple Design System","/","carbon:home","home",{"title":317,"_path":318,"children":319},"Design System","/design-system",[320,336,352,381,415],{"title":321,"_path":322,"children":323},"About","/design-system/about",[324,327,330,333],{"title":325,"_path":326,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":328,"_path":329,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":331,"_path":332,"layout":13},"Support","/design-system/about/getting-support",{"title":334,"_path":335,"layout":13},"Contributing","/design-system/about/contributing",{"title":337,"_path":338,"children":339},"Design","/design-system/design",[340,343,346,349],{"title":341,"_path":342,"layout":13},"Getting started","/design-system/design/getting-started",{"title":344,"_path":345,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":347,"_path":348,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":350,"_path":351,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":353,"_path":354,"children":355},"Develop","/design-system/develop",[356,358,360,363],{"title":341,"_path":357,"layout":13},"/design-system/develop/getting-started",{"title":334,"_path":359,"layout":13},"/design-system/develop/contributing",{"title":361,"_path":362,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":364,"children":365,"layout":13},"/design-system/develop/usage",[366,369,372,375,378],{"title":367,"_path":368,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":370,"_path":371,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":373,"_path":374,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":376,"_path":377,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":379,"_path":380,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":382,"_path":383,"children":384},"Styles","/design-system/styles",[385,388,391,394,397,400,403,406,409,412],{"title":386,"_path":387,"layout":13},"Colour","/design-system/styles/colour",{"title":389,"_path":390,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":392,"_path":393,"layout":13},"Grid","/design-system/styles/grid",{"title":395,"_path":396,"layout":13},"Icons","/design-system/styles/icons",{"title":398,"_path":399,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":401,"_path":402,"layout":13},"Layout","/design-system/styles/layout",{"title":404,"_path":405,"layout":13},"Logo","/design-system/styles/logo",{"title":407,"_path":408,"layout":13},"Motion","/design-system/styles/motion",{"title":410,"_path":411,"layout":13},"Spacing","/design-system/styles/spacing",{"title":413,"_path":414,"layout":13},"Typography","/design-system/styles/typography",{"title":416,"_path":417,"children":418},"Components","/design-system/components",[419,422,425,428,431,434,437,438,439,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482,485,488,491,494,497,500,503,506,509,512,515,518,521,524,527,530,533,536,539,542,545,548,551,554],{"title":420,"_path":421,"layout":13},"Accordion","/design-system/components/accordion",{"title":423,"_path":424,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":426,"_path":427,"layout":13},"Alert","/design-system/components/alert",{"title":429,"_path":430,"layout":13},"Block quote","/design-system/components/block-quote",{"title":432,"_path":433,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":435,"_path":436,"layout":13},"Button","/design-system/components/button",{"title":298,"_path":297,"layout":13},{"title":11,"_path":7,"layout":13},{"title":304,"_path":303,"layout":13},{"title":441,"_path":442,"layout":13},"Card","/design-system/components/card",{"title":444,"_path":445,"layout":13},"Carousel","/design-system/components/carousel",{"title":447,"_path":448,"layout":13},"Category grid","/design-system/components/category-grid",{"title":450,"_path":451,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":453,"_path":454,"layout":13},"Chip","/design-system/components/chip",{"title":456,"_path":457,"layout":13},"Contact us","/design-system/components/contact-us",{"title":459,"_path":460,"layout":13},"Date input","/design-system/components/date-input",{"title":462,"_path":463,"layout":13},"Detail list","/design-system/components/detail-list",{"title":465,"_path":466,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":468,"_path":469,"layout":13},"File","/design-system/components/file",{"title":471,"_path":472,"layout":13},"Footer","/design-system/components/footer",{"title":474,"_path":475,"layout":13},"Form","/design-system/components/form",{"title":477,"_path":478,"layout":13},"Form alert","/design-system/components/form-alert",{"title":480,"_path":481,"layout":13},"Header","/design-system/components/header",{"title":483,"_path":484,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":486,"_path":487,"layout":13},"Input field","/design-system/components/input-field",{"title":489,"_path":490,"layout":13},"Key dates","/design-system/components/key-dates",{"title":492,"_path":493,"layout":13},"Media","/design-system/components/media",{"title":495,"_path":496,"layout":13},"Media embed","/design-system/components/media-embed",{"title":498,"_path":499,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":501,"_path":502,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":504,"_path":505,"layout":13},"Option button","/design-system/components/option-button",{"title":507,"_path":508,"layout":13},"Page action","/design-system/components/page-action",{"title":510,"_path":511,"layout":13},"Pagination","/design-system/components/pagination",{"title":513,"_path":514,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":516,"_path":517,"layout":13},"Profile","/design-system/components/profile",{"title":519,"_path":520,"layout":13},"Radio button","/design-system/components/radio-button",{"title":522,"_path":523,"layout":13},"Related links","/design-system/components/related-links",{"title":525,"_path":526,"layout":13},"Results listing","/design-system/components/results-listing",{"title":528,"_path":529,"layout":13},"Search bar","/design-system/components/search-bar",{"title":531,"_path":532,"layout":13},"Skip link","/design-system/components/skip-link",{"title":534,"_path":535,"layout":13},"Social share","/design-system/components/social-share",{"title":537,"_path":538,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":540,"_path":541,"layout":13},"Table","/design-system/components/table",{"title":543,"_path":544,"layout":13},"Tabs","/design-system/components/tabs",{"title":546,"_path":547,"layout":13},"Tag","/design-system/components/tag",{"title":549,"_path":550,"layout":13},"Text area","/design-system/components/text-area",{"title":552,"_path":553,"layout":13},"Timeline","/design-system/components/timeline",{"title":555,"_path":556,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":558,"_path":559,"children":560,"layout":13},"Ripple Framework","/framework",[561,562,580,602],{"title":558,"_path":559,"layout":13},{"title":563,"_path":564,"children":565},"Key Concepts","/framework/key-concepts",[566,568,571,574,577],{"title":373,"_path":567,"layout":13},"/framework/key-concepts/nuxt",{"title":569,"_path":570,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":572,"_path":573,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":575,"_path":576,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":578,"_path":579,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":581,"_path":582,"children":583},"Guides","/framework/guides",[584,587,590,593,596,599],{"title":585,"_path":586,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":588,"_path":589,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":591,"_path":592,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":594,"_path":595,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":597,"_path":598,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":600,"_path":601,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":603,"_path":604,"layout":13},"Core modules","/framework/core-modules",["Reactive",606],["Set"],["Reactive",608],{"module-navigation":609},null,true,1714695152873]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Callout</h1><p class="rpl-type-p-large" data-v-3163c6df>The Callout component is a text excerpt that draws attention to specific or important content.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use callouts to:<!--]--></p><ul><!--[--><li><!--[-->draw a user&#39;s attention<!--]--></li><li><!--[-->add emphasis to the content<!--]--></li><li><!--[-->provide a user with more information.<!--]--></li><!--]--></ul><p><!--[-->A callout repeats and highlights content already on the page. Use callouts sparingly. To maintain effectiveness, consider weaving this information into the page&#39;s main content.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-content--callout&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--callout&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Highlight important information vital to the user.<!--]--></li><li><!--[-->Place a callout in a prominent position on the page.<!--]--></li><li><!--[-->Use with text only.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Only feature one callout per page.<!--]--></li><li><!--[-->Use no more than 2 paragraphs per callout.<!--]--></li><li><!--[-->Don&#39;t put the callout at the bottom of the page.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->To allow for different levels of emphasis, a callout has 2 styles:<!--]--></p><ul><!--[--><li><!--[-->accent<!--]--></li><li><!--[-->neutral.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="accent" data-v-ea525968><a href="#accent" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Accent<!--]--></a></h2><p><!--[-->Use the accent variant to add a high level of emphasis to the selected content. The callout accent can adopt any WYSIWYG type styles you choose.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-content--callout&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--callout&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="neutral" data-v-ea525968><a href="#neutral" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Neutral<!--]--></a></h2><p><!--[-->Use the neutral variant to give content a medium level of emphasis. The neutral callout uses a predefined type style that you cannot change.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-content--callout-neutral&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--callout-neutral&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->The accent variant uses the site accent colour to:<!--]--></p><ul><!--[--><li><!--[-->add visual prominence to the content<!--]--></li><li><!--[-->aid hierarchy in the content area.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-content--callout&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--callout&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="rationale" data-v-fff5b905><a href="#rationale" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Rationale<!--]--></a></h2><p><!--[-->To enhance visual weight and aim to conform with <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->WCAG2.0 Criterion 1.4.1<!--]--><!--]--><!----><!--]--></a>, Ripple callouts use:<!--]--></p><ul><!--[--><li><!--[-->a thick left-hand border<!--]--></li><li><!--[-->background colours<!--]--></li><li><!--[-->padding.<!--]--></li><!--]--></ul><blockquote class="rpl-callout"><!--[--><p><!--[-->1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)<!--]--></p><!--]--></blockquote><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/callout.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/callout/_payload.json">[{"state":1,"once":605,"_errors":607,"serverRendered":610,"path":7,"prerenderedAt":611},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":292,"$sdd-globals":308,"$sdd-navigation":310},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/callout":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":287,"_id":288,"_source":289,"_file":290,"_extension":291},"/design-system/components/callout","components",false,"","Callout","The Callout component is a text excerpt that draws attention to specific or important content.","page","Core",{"type":16,"children":17,"toc":273},"root",[18,27,33,53,58,63,70,88,94,112,116,122,127,140,145,150,153,159,164,168,171,177,182,195,202,222,225,231,246,264],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use callouts to:",{"type":19,"tag":34,"props":35,"children":36},"ul",{},[37,43,48],{"type":19,"tag":38,"props":39,"children":40},"li",{},[41],{"type":25,"value":42},"draw a user's attention",{"type":19,"tag":38,"props":44,"children":45},{},[46],{"type":25,"value":47},"add emphasis to the content",{"type":19,"tag":38,"props":49,"children":50},{},[51],{"type":25,"value":52},"provide a user with more information.",{"type":19,"tag":28,"props":54,"children":55},{},[56],{"type":25,"value":57},"A callout repeats and highlights content already on the page. Use callouts sparingly. To maintain effectiveness, consider weaving this information into the page's main content.",{"type":19,"tag":59,"props":60,"children":62},"docs-example",{"id":61},"core-containers-content--callout",[],{"type":19,"tag":64,"props":65,"children":67},"h3",{"id":66},"when-and-how-to-use",[68],{"type":25,"value":69},"When and how to use",{"type":19,"tag":34,"props":71,"children":72},{},[73,78,83],{"type":19,"tag":38,"props":74,"children":75},{},[76],{"type":25,"value":77},"Highlight important information vital to the user.",{"type":19,"tag":38,"props":79,"children":80},{},[81],{"type":25,"value":82},"Place a callout in a prominent position on the page.",{"type":19,"tag":38,"props":84,"children":85},{},[86],{"type":25,"value":87},"Use with text only.",{"type":19,"tag":64,"props":89,"children":91},{"id":90},"when-and-how-not-to-use",[92],{"type":25,"value":93},"When and how not to use",{"type":19,"tag":34,"props":95,"children":96},{},[97,102,107],{"type":19,"tag":38,"props":98,"children":99},{},[100],{"type":25,"value":101},"Only feature one callout per page.",{"type":19,"tag":38,"props":103,"children":104},{},[105],{"type":25,"value":106},"Use no more than 2 paragraphs per callout.",{"type":19,"tag":38,"props":108,"children":109},{},[110],{"type":25,"value":111},"Don't put the callout at the bottom of the page.",{"type":19,"tag":113,"props":114,"children":115},"hr",{},[],{"type":19,"tag":20,"props":117,"children":119},{"id":118},"variants",[120],{"type":25,"value":121},"Variants",{"type":19,"tag":28,"props":123,"children":124},{},[125],{"type":25,"value":126},"To allow for different levels of emphasis, a callout has 2 styles:",{"type":19,"tag":34,"props":128,"children":129},{},[130,135],{"type":19,"tag":38,"props":131,"children":132},{},[133],{"type":25,"value":134},"accent",{"type":19,"tag":38,"props":136,"children":137},{},[138],{"type":25,"value":139},"neutral.",{"type":19,"tag":64,"props":141,"children":142},{"id":134},[143],{"type":25,"value":144},"Accent",{"type":19,"tag":28,"props":146,"children":147},{},[148],{"type":25,"value":149},"Use the accent variant to add a high level of emphasis to the selected content. The callout accent can adopt any WYSIWYG type styles you choose.",{"type":19,"tag":59,"props":151,"children":152},{"id":61},[],{"type":19,"tag":64,"props":154,"children":156},{"id":155},"neutral",[157],{"type":25,"value":158},"Neutral",{"type":19,"tag":28,"props":160,"children":161},{},[162],{"type":25,"value":163},"Use the neutral variant to give content a medium level of emphasis. The neutral callout uses a predefined type style that you cannot change.",{"type":19,"tag":59,"props":165,"children":167},{"id":166},"core-containers-content--callout-neutral",[],{"type":19,"tag":113,"props":169,"children":170},{},[],{"type":19,"tag":20,"props":172,"children":174},{"id":173},"theming",[175],{"type":25,"value":176},"Theming",{"type":19,"tag":28,"props":178,"children":179},{},[180],{"type":25,"value":181},"The accent variant uses the site accent colour to:",{"type":19,"tag":34,"props":183,"children":184},{},[185,190],{"type":19,"tag":38,"props":186,"children":187},{},[188],{"type":25,"value":189},"add visual prominence to the content",{"type":19,"tag":38,"props":191,"children":192},{},[193],{"type":25,"value":194},"aid hierarchy in the content area.",{"type":19,"tag":196,"props":197,"children":198},"docs-theme-chooser",{},[199],{"type":19,"tag":59,"props":200,"children":201},{"id":61},[],{"type":19,"tag":28,"props":203,"children":204},{},[205,207,213,215,220],{"type":25,"value":206},"To create your own theme, see ",{"type":19,"tag":208,"props":209,"children":210},"a",{"href":10},[211],{"type":25,"value":212},"theming guidance for designers",{"type":25,"value":214}," or ",{"type":19,"tag":208,"props":216,"children":217},{"href":10},[218],{"type":25,"value":219},"theming guidance for developers",{"type":25,"value":221},".",{"type":19,"tag":113,"props":223,"children":224},{},[],{"type":19,"tag":20,"props":226,"children":228},{"id":227},"rationale",[229],{"type":25,"value":230},"Rationale",{"type":19,"tag":28,"props":232,"children":233},{},[234,236,244],{"type":25,"value":235},"To enhance visual weight and aim to conform with ",{"type":19,"tag":208,"props":237,"children":241},{"href":238,"rel":239},"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html",[240],"nofollow",[242],{"type":25,"value":243},"WCAG2.0 Criterion 1.4.1",{"type":25,"value":245},", Ripple callouts use:",{"type":19,"tag":34,"props":247,"children":248},{},[249,254,259],{"type":19,"tag":38,"props":250,"children":251},{},[252],{"type":25,"value":253},"a thick left-hand border",{"type":19,"tag":38,"props":255,"children":256},{},[257],{"type":25,"value":258},"background colours",{"type":19,"tag":38,"props":260,"children":261},{},[262],{"type":25,"value":263},"padding.",{"type":19,"tag":265,"props":266,"children":267},"blockquote",{},[268],{"type":19,"tag":28,"props":269,"children":270},{},[271],{"type":25,"value":272},"1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)",{"title":10,"searchDepth":274,"depth":274,"links":275},2,[276,281,285,286],{"id":22,"depth":274,"text":26,"children":277},[278,280],{"id":66,"depth":279,"text":69},3,{"id":90,"depth":279,"text":93},{"id":118,"depth":274,"text":121,"children":282},[283,284],{"id":134,"depth":279,"text":144},{"id":155,"depth":279,"text":158},{"id":173,"depth":274,"text":176},{"id":227,"depth":274,"text":230},"markdown","content:design-system:5.components:callout.md","content","design-system/5.components/callout.md","md",["ShallowRef",293],["ShallowReactive",294],{"/design-system/components/callout":295},[296,302],{"_path":297,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":298,"description":299,"layout":13,"label":14,"_type":287,"_id":300,"_source":289,"_file":301,"_extension":291},"/design-system/components/call-to-action","Call to action","The Call to action component is a card promoting a specific piece of content and featuring a button highlighting the call to action.","content:design-system:5.components:call-to-action.md","design-system/5.components/call-to-action.md",{"_path":303,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":304,"description":305,"layout":13,"label":14,"_type":287,"_id":306,"_source":289,"_file":307,"_extension":291},"/design-system/components/campaign-banner","Campaign banner","The Campaign banner component draws a user's attention to promoted content.","content:design-system:5.components:campaign-banner.md","design-system/5.components/campaign-banner.md",["ShallowRef",309],{},[311,316,557],{"title":312,"_path":313,"icon":314,"layout":315},"Ripple Design System","/","carbon:home","home",{"title":317,"_path":318,"children":319},"Design System","/design-system",[320,336,352,381,415],{"title":321,"_path":322,"children":323},"About","/design-system/about",[324,327,330,333],{"title":325,"_path":326,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":328,"_path":329,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":331,"_path":332,"layout":13},"Support","/design-system/about/getting-support",{"title":334,"_path":335,"layout":13},"Contributing","/design-system/about/contributing",{"title":337,"_path":338,"children":339},"Design","/design-system/design",[340,343,346,349],{"title":341,"_path":342,"layout":13},"Getting started","/design-system/design/getting-started",{"title":344,"_path":345,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":347,"_path":348,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":350,"_path":351,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":353,"_path":354,"children":355},"Develop","/design-system/develop",[356,358,360,363],{"title":341,"_path":357,"layout":13},"/design-system/develop/getting-started",{"title":334,"_path":359,"layout":13},"/design-system/develop/contributing",{"title":361,"_path":362,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":364,"children":365,"layout":13},"/design-system/develop/usage",[366,369,372,375,378],{"title":367,"_path":368,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":370,"_path":371,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":373,"_path":374,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":376,"_path":377,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":379,"_path":380,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":382,"_path":383,"children":384},"Styles","/design-system/styles",[385,388,391,394,397,400,403,406,409,412],{"title":386,"_path":387,"layout":13},"Colour","/design-system/styles/colour",{"title":389,"_path":390,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":392,"_path":393,"layout":13},"Grid","/design-system/styles/grid",{"title":395,"_path":396,"layout":13},"Icons","/design-system/styles/icons",{"title":398,"_path":399,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":401,"_path":402,"layout":13},"Layout","/design-system/styles/layout",{"title":404,"_path":405,"layout":13},"Logo","/design-system/styles/logo",{"title":407,"_path":408,"layout":13},"Motion","/design-system/styles/motion",{"title":410,"_path":411,"layout":13},"Spacing","/design-system/styles/spacing",{"title":413,"_path":414,"layout":13},"Typography","/design-system/styles/typography",{"title":416,"_path":417,"children":418},"Components","/design-system/components",[419,422,425,428,431,434,437,438,439,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482,485,488,491,494,497,500,503,506,509,512,515,518,521,524,527,530,533,536,539,542,545,548,551,554],{"title":420,"_path":421,"layout":13},"Accordion","/design-system/components/accordion",{"title":423,"_path":424,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":426,"_path":427,"layout":13},"Alert","/design-system/components/alert",{"title":429,"_path":430,"layout":13},"Block quote","/design-system/components/block-quote",{"title":432,"_path":433,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":435,"_path":436,"layout":13},"Button","/design-system/components/button",{"title":298,"_path":297,"layout":13},{"title":11,"_path":7,"layout":13},{"title":304,"_path":303,"layout":13},{"title":441,"_path":442,"layout":13},"Card","/design-system/components/card",{"title":444,"_path":445,"layout":13},"Carousel","/design-system/components/carousel",{"title":447,"_path":448,"layout":13},"Category grid","/design-system/components/category-grid",{"title":450,"_path":451,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":453,"_path":454,"layout":13},"Chip","/design-system/components/chip",{"title":456,"_path":457,"layout":13},"Contact us","/design-system/components/contact-us",{"title":459,"_path":460,"layout":13},"Date input","/design-system/components/date-input",{"title":462,"_path":463,"layout":13},"Detail list","/design-system/components/detail-list",{"title":465,"_path":466,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":468,"_path":469,"layout":13},"File","/design-system/components/file",{"title":471,"_path":472,"layout":13},"Footer","/design-system/components/footer",{"title":474,"_path":475,"layout":13},"Form","/design-system/components/form",{"title":477,"_path":478,"layout":13},"Form alert","/design-system/components/form-alert",{"title":480,"_path":481,"layout":13},"Header","/design-system/components/header",{"title":483,"_path":484,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":486,"_path":487,"layout":13},"Input field","/design-system/components/input-field",{"title":489,"_path":490,"layout":13},"Key dates","/design-system/components/key-dates",{"title":492,"_path":493,"layout":13},"Media","/design-system/components/media",{"title":495,"_path":496,"layout":13},"Media embed","/design-system/components/media-embed",{"title":498,"_path":499,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":501,"_path":502,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":504,"_path":505,"layout":13},"Option button","/design-system/components/option-button",{"title":507,"_path":508,"layout":13},"Page action","/design-system/components/page-action",{"title":510,"_path":511,"layout":13},"Pagination","/design-system/components/pagination",{"title":513,"_path":514,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":516,"_path":517,"layout":13},"Profile","/design-system/components/profile",{"title":519,"_path":520,"layout":13},"Radio button","/design-system/components/radio-button",{"title":522,"_path":523,"layout":13},"Related links","/design-system/components/related-links",{"title":525,"_path":526,"layout":13},"Results listing","/design-system/components/results-listing",{"title":528,"_path":529,"layout":13},"Search bar","/design-system/components/search-bar",{"title":531,"_path":532,"layout":13},"Skip link","/design-system/components/skip-link",{"title":534,"_path":535,"layout":13},"Social share","/design-system/components/social-share",{"title":537,"_path":538,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":540,"_path":541,"layout":13},"Table","/design-system/components/table",{"title":543,"_path":544,"layout":13},"Tabs","/design-system/components/tabs",{"title":546,"_path":547,"layout":13},"Tag","/design-system/components/tag",{"title":549,"_path":550,"layout":13},"Text area","/design-system/components/text-area",{"title":552,"_path":553,"layout":13},"Timeline","/design-system/components/timeline",{"title":555,"_path":556,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":558,"_path":559,"children":560,"layout":13},"Ripple Framework","/framework",[561,562,580,602],{"title":558,"_path":559,"layout":13},{"title":563,"_path":564,"children":565},"Key Concepts","/framework/key-concepts",[566,568,571,574,577],{"title":373,"_path":567,"layout":13},"/framework/key-concepts/nuxt",{"title":569,"_path":570,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":572,"_path":573,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":575,"_path":576,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":578,"_path":579,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":581,"_path":582,"children":583},"Guides","/framework/guides",[584,587,590,593,596,599],{"title":585,"_path":586,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":588,"_path":589,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":591,"_path":592,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":594,"_path":595,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":597,"_path":598,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":600,"_path":601,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":603,"_path":604,"layout":13},"Core modules","/framework/core-modules",["Reactive",606],["Set"],["Reactive",608],{"module-navigation":609},null,true,1714695651100]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/campaign-banner/_payload.json b/design-system/components/campaign-banner/_payload.json
index 158a80b1bd..fcdb77b904 100644
--- a/design-system/components/campaign-banner/_payload.json
+++ b/design-system/components/campaign-banner/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":104,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695152930]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":104,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695651106]
\ No newline at end of file
diff --git a/design-system/components/campaign-banner/index.html b/design-system/components/campaign-banner/index.html
index 10ef7843e7..4dac32f1fb 100644
--- a/design-system/components/campaign-banner/index.html
+++ b/design-system/components/campaign-banner/index.html
@@ -28,63 +28,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -96,8 +96,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Campaign banner</h1><p class="rpl-type-p-large" data-v-3163c6df>The Campaign banner component draws a user&#39;s attention to promoted content.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use campaign banners to promote content. They include a feature image and have an optional call to action.<!--]--></p><p><!--[-->The banner has a headline and short summary text. These point users to promoted content and guide them to a call to action contained in a button.<!--]--></p><p><!--[-->Campaign banners can be used at the top or bottom of a page, under the header or above the footer.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-campaign-banner--primary-image&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-campaign-banner--primary-image&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Promote a campaign or related page content.<!--]--></li><li><!--[-->Add an optional image.<!--]--></li><li><!--[-->Use with an optional call to action.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t overload with content.<!--]--></li><li><!--[-->Don’t use an unrelated image.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->The campaign banner has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->featured, which appears at the top of the page, below the header<!--]--></li><li><!--[-->image inset, which appears at the bottom of the page above the footer.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="featured" data-v-ea525968><a href="#featured" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Featured<!--]--></a></h2><p><!--[-->A featured campaign banner goes at the top of the page underneath the header. When on larger screens, the image is cropped in a shape and can overlap the component above (the header).<!--]--></p><p><!--[-->There is an option to include metadata for the image if required.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-campaign-banner--primary-image&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-campaign-banner--primary-image&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="image-inset" data-v-ea525968><a href="#image-inset" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Image inset<!--]--></a></h2><p><!--[-->The image inset variant sits above the footer at the bottom of the page. This should be used for less prominent campaigns. For featured campaigns, we recommend using the featured variant at the top of the page.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-campaign-banner--secondary-image&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-campaign-banner--secondary-image&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->The campaign banner adopts its theming from the button component.<!--]--></p><p><!--[-->If you choose the neutral button variant for your site, the campaign banner will display buttons in the neutral theme.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-campaign-banner--primary-image&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-campaign-banner--primary-image&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/campaign-banner.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/campaign-banner/_payload.json">[{"state":1,"once":533,"_errors":535,"serverRendered":538,"path":7,"prerenderedAt":539},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":220,"$sdd-globals":236,"$sdd-navigation":238},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/campaign-banner":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":215,"_id":216,"_source":217,"_file":218,"_extension":219},"/design-system/components/campaign-banner","components",false,"","Campaign banner","The Campaign banner component draws a user's attention to promoted content.","page","Core",{"type":16,"children":17,"toc":202},"root",[18,27,33,38,43,48,55,75,81,94,98,104,109,122,128,133,138,141,147,152,156,159,165,170,175,182],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use campaign banners to promote content. They include a feature image and have an optional call to action.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"The banner has a headline and short summary text. These point users to promoted content and guide them to a call to action contained in a button.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Campaign banners can be used at the top or bottom of a page, under the header or above the footer.",{"type":19,"tag":44,"props":45,"children":47},"docs-example",{"id":46},"core-navigation-campaign-banner--primary-image",[],{"type":19,"tag":49,"props":50,"children":52},"h3",{"id":51},"when-and-how-to-use",[53],{"type":25,"value":54},"When and how to use",{"type":19,"tag":56,"props":57,"children":58},"ul",{},[59,65,70],{"type":19,"tag":60,"props":61,"children":62},"li",{},[63],{"type":25,"value":64},"Promote a campaign or related page content.",{"type":19,"tag":60,"props":66,"children":67},{},[68],{"type":25,"value":69},"Add an optional image.",{"type":19,"tag":60,"props":71,"children":72},{},[73],{"type":25,"value":74},"Use with an optional call to action.",{"type":19,"tag":49,"props":76,"children":78},{"id":77},"when-and-how-not-to-use",[79],{"type":25,"value":80},"When and how not to use",{"type":19,"tag":56,"props":82,"children":83},{},[84,89],{"type":19,"tag":60,"props":85,"children":86},{},[87],{"type":25,"value":88},"Don’t overload with content.",{"type":19,"tag":60,"props":90,"children":91},{},[92],{"type":25,"value":93},"Don’t use an unrelated image.",{"type":19,"tag":95,"props":96,"children":97},"hr",{},[],{"type":19,"tag":20,"props":99,"children":101},{"id":100},"variants",[102],{"type":25,"value":103},"Variants",{"type":19,"tag":28,"props":105,"children":106},{},[107],{"type":25,"value":108},"The campaign banner has 2 variants:",{"type":19,"tag":56,"props":110,"children":111},{},[112,117],{"type":19,"tag":60,"props":113,"children":114},{},[115],{"type":25,"value":116},"featured, which appears at the top of the page, below the header",{"type":19,"tag":60,"props":118,"children":119},{},[120],{"type":25,"value":121},"image inset, which appears at the bottom of the page above the footer.",{"type":19,"tag":49,"props":123,"children":125},{"id":124},"featured",[126],{"type":25,"value":127},"Featured",{"type":19,"tag":28,"props":129,"children":130},{},[131],{"type":25,"value":132},"A featured campaign banner goes at the top of the page underneath the header. When on larger screens, the image is cropped in a shape and can overlap the component above (the header).",{"type":19,"tag":28,"props":134,"children":135},{},[136],{"type":25,"value":137},"There is an option to include metadata for the image if required.",{"type":19,"tag":44,"props":139,"children":140},{"id":46},[],{"type":19,"tag":49,"props":142,"children":144},{"id":143},"image-inset",[145],{"type":25,"value":146},"Image inset",{"type":19,"tag":28,"props":148,"children":149},{},[150],{"type":25,"value":151},"The image inset variant sits above the footer at the bottom of the page. This should be used for less prominent campaigns. For featured campaigns, we recommend using the featured variant at the top of the page.",{"type":19,"tag":44,"props":153,"children":155},{"id":154},"core-navigation-campaign-banner--secondary-image",[],{"type":19,"tag":95,"props":157,"children":158},{},[],{"type":19,"tag":20,"props":160,"children":162},{"id":161},"theming",[163],{"type":25,"value":164},"Theming",{"type":19,"tag":28,"props":166,"children":167},{},[168],{"type":25,"value":169},"The campaign banner adopts its theming from the button component.",{"type":19,"tag":28,"props":171,"children":172},{},[173],{"type":25,"value":174},"If you choose the neutral button variant for your site, the campaign banner will display buttons in the neutral theme.",{"type":19,"tag":176,"props":177,"children":178},"docs-theme-chooser",{},[179],{"type":19,"tag":44,"props":180,"children":181},{"id":46},[],{"type":19,"tag":28,"props":183,"children":184},{},[185,187,193,195,200],{"type":25,"value":186},"To create your own theme, see ",{"type":19,"tag":188,"props":189,"children":190},"a",{"href":10},[191],{"type":25,"value":192},"theming guidance for designers",{"type":25,"value":194}," or ",{"type":19,"tag":188,"props":196,"children":197},{"href":10},[198],{"type":25,"value":199},"theming guidance for developers",{"type":25,"value":201},".",{"title":10,"searchDepth":203,"depth":203,"links":204},2,[205,210,214],{"id":22,"depth":203,"text":26,"children":206},[207,209],{"id":51,"depth":208,"text":54},3,{"id":77,"depth":208,"text":80},{"id":100,"depth":203,"text":103,"children":211},[212,213],{"id":124,"depth":208,"text":127},{"id":143,"depth":208,"text":146},{"id":161,"depth":203,"text":164},"markdown","content:design-system:5.components:campaign-banner.md","content","design-system/5.components/campaign-banner.md","md",["ShallowRef",221],["ShallowReactive",222],{"/design-system/components/campaign-banner":223},[224,230],{"_path":225,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":226,"description":227,"layout":13,"label":14,"_type":215,"_id":228,"_source":217,"_file":229,"_extension":219},"/design-system/components/callout","Callout","The Callout component is a text excerpt that draws attention to specific or important content.","content:design-system:5.components:callout.md","design-system/5.components/callout.md",{"_path":231,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":232,"description":233,"layout":13,"label":14,"_type":215,"_id":234,"_source":217,"_file":235,"_extension":219},"/design-system/components/card","Card","The Card component shows content about another page, event or topic. They help users find relevant information.","content:design-system:5.components:card.md","design-system/5.components/card.md",["ShallowRef",237],{},[239,244,485],{"title":240,"_path":241,"icon":242,"layout":243},"Ripple Design System","/","carbon:home","home",{"title":245,"_path":246,"children":247},"Design System","/design-system",[248,264,280,309,343],{"title":249,"_path":250,"children":251},"About","/design-system/about",[252,255,258,261],{"title":253,"_path":254,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":256,"_path":257,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":259,"_path":260,"layout":13},"Support","/design-system/about/getting-support",{"title":262,"_path":263,"layout":13},"Contributing","/design-system/about/contributing",{"title":265,"_path":266,"children":267},"Design","/design-system/design",[268,271,274,277],{"title":269,"_path":270,"layout":13},"Getting started","/design-system/design/getting-started",{"title":272,"_path":273,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":275,"_path":276,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":278,"_path":279,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":281,"_path":282,"children":283},"Develop","/design-system/develop",[284,286,288,291],{"title":269,"_path":285,"layout":13},"/design-system/develop/getting-started",{"title":262,"_path":287,"layout":13},"/design-system/develop/contributing",{"title":289,"_path":290,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":292,"children":293,"layout":13},"/design-system/develop/usage",[294,297,300,303,306],{"title":295,"_path":296,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":298,"_path":299,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":301,"_path":302,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":304,"_path":305,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":307,"_path":308,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":310,"_path":311,"children":312},"Styles","/design-system/styles",[313,316,319,322,325,328,331,334,337,340],{"title":314,"_path":315,"layout":13},"Colour","/design-system/styles/colour",{"title":317,"_path":318,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":320,"_path":321,"layout":13},"Grid","/design-system/styles/grid",{"title":323,"_path":324,"layout":13},"Icons","/design-system/styles/icons",{"title":326,"_path":327,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":329,"_path":330,"layout":13},"Layout","/design-system/styles/layout",{"title":332,"_path":333,"layout":13},"Logo","/design-system/styles/logo",{"title":335,"_path":336,"layout":13},"Motion","/design-system/styles/motion",{"title":338,"_path":339,"layout":13},"Spacing","/design-system/styles/spacing",{"title":341,"_path":342,"layout":13},"Typography","/design-system/styles/typography",{"title":344,"_path":345,"children":346},"Components","/design-system/components",[347,350,353,356,359,362,365,368,369,370,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482],{"title":348,"_path":349,"layout":13},"Accordion","/design-system/components/accordion",{"title":351,"_path":352,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":354,"_path":355,"layout":13},"Alert","/design-system/components/alert",{"title":357,"_path":358,"layout":13},"Block quote","/design-system/components/block-quote",{"title":360,"_path":361,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":363,"_path":364,"layout":13},"Button","/design-system/components/button",{"title":366,"_path":367,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":226,"_path":225,"layout":13},{"title":11,"_path":7,"layout":13},{"title":232,"_path":231,"layout":13},{"title":372,"_path":373,"layout":13},"Carousel","/design-system/components/carousel",{"title":375,"_path":376,"layout":13},"Category grid","/design-system/components/category-grid",{"title":378,"_path":379,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":381,"_path":382,"layout":13},"Chip","/design-system/components/chip",{"title":384,"_path":385,"layout":13},"Contact us","/design-system/components/contact-us",{"title":387,"_path":388,"layout":13},"Date input","/design-system/components/date-input",{"title":390,"_path":391,"layout":13},"Detail list","/design-system/components/detail-list",{"title":393,"_path":394,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":396,"_path":397,"layout":13},"File","/design-system/components/file",{"title":399,"_path":400,"layout":13},"Footer","/design-system/components/footer",{"title":402,"_path":403,"layout":13},"Form","/design-system/components/form",{"title":405,"_path":406,"layout":13},"Form alert","/design-system/components/form-alert",{"title":408,"_path":409,"layout":13},"Header","/design-system/components/header",{"title":411,"_path":412,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":414,"_path":415,"layout":13},"Input field","/design-system/components/input-field",{"title":417,"_path":418,"layout":13},"Key dates","/design-system/components/key-dates",{"title":420,"_path":421,"layout":13},"Media","/design-system/components/media",{"title":423,"_path":424,"layout":13},"Media embed","/design-system/components/media-embed",{"title":426,"_path":427,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":429,"_path":430,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":432,"_path":433,"layout":13},"Option button","/design-system/components/option-button",{"title":435,"_path":436,"layout":13},"Page action","/design-system/components/page-action",{"title":438,"_path":439,"layout":13},"Pagination","/design-system/components/pagination",{"title":441,"_path":442,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":444,"_path":445,"layout":13},"Profile","/design-system/components/profile",{"title":447,"_path":448,"layout":13},"Radio button","/design-system/components/radio-button",{"title":450,"_path":451,"layout":13},"Related links","/design-system/components/related-links",{"title":453,"_path":454,"layout":13},"Results listing","/design-system/components/results-listing",{"title":456,"_path":457,"layout":13},"Search bar","/design-system/components/search-bar",{"title":459,"_path":460,"layout":13},"Skip link","/design-system/components/skip-link",{"title":462,"_path":463,"layout":13},"Social share","/design-system/components/social-share",{"title":465,"_path":466,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":468,"_path":469,"layout":13},"Table","/design-system/components/table",{"title":471,"_path":472,"layout":13},"Tabs","/design-system/components/tabs",{"title":474,"_path":475,"layout":13},"Tag","/design-system/components/tag",{"title":477,"_path":478,"layout":13},"Text area","/design-system/components/text-area",{"title":480,"_path":481,"layout":13},"Timeline","/design-system/components/timeline",{"title":483,"_path":484,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":486,"_path":487,"children":488,"layout":13},"Ripple Framework","/framework",[489,490,508,530],{"title":486,"_path":487,"layout":13},{"title":491,"_path":492,"children":493},"Key Concepts","/framework/key-concepts",[494,496,499,502,505],{"title":301,"_path":495,"layout":13},"/framework/key-concepts/nuxt",{"title":497,"_path":498,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":500,"_path":501,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":503,"_path":504,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":506,"_path":507,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":509,"_path":510,"children":511},"Guides","/framework/guides",[512,515,518,521,524,527],{"title":513,"_path":514,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":516,"_path":517,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":519,"_path":520,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":522,"_path":523,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":525,"_path":526,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":528,"_path":529,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":531,"_path":532,"layout":13},"Core modules","/framework/core-modules",["Reactive",534],["Set"],["Reactive",536],{"module-navigation":537},null,true,1714695152930]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Campaign banner</h1><p class="rpl-type-p-large" data-v-3163c6df>The Campaign banner component draws a user&#39;s attention to promoted content.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use campaign banners to promote content. They include a feature image and have an optional call to action.<!--]--></p><p><!--[-->The banner has a headline and short summary text. These point users to promoted content and guide them to a call to action contained in a button.<!--]--></p><p><!--[-->Campaign banners can be used at the top or bottom of a page, under the header or above the footer.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-campaign-banner--primary-image&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-campaign-banner--primary-image&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Promote a campaign or related page content.<!--]--></li><li><!--[-->Add an optional image.<!--]--></li><li><!--[-->Use with an optional call to action.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t overload with content.<!--]--></li><li><!--[-->Don’t use an unrelated image.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->The campaign banner has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->featured, which appears at the top of the page, below the header<!--]--></li><li><!--[-->image inset, which appears at the bottom of the page above the footer.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="featured" data-v-ea525968><a href="#featured" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Featured<!--]--></a></h2><p><!--[-->A featured campaign banner goes at the top of the page underneath the header. When on larger screens, the image is cropped in a shape and can overlap the component above (the header).<!--]--></p><p><!--[-->There is an option to include metadata for the image if required.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-campaign-banner--primary-image&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-campaign-banner--primary-image&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="image-inset" data-v-ea525968><a href="#image-inset" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Image inset<!--]--></a></h2><p><!--[-->The image inset variant sits above the footer at the bottom of the page. This should be used for less prominent campaigns. For featured campaigns, we recommend using the featured variant at the top of the page.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-campaign-banner--secondary-image&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-campaign-banner--secondary-image&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->The campaign banner adopts its theming from the button component.<!--]--></p><p><!--[-->If you choose the neutral button variant for your site, the campaign banner will display buttons in the neutral theme.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-campaign-banner--primary-image&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-campaign-banner--primary-image&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/campaign-banner.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/campaign-banner/_payload.json">[{"state":1,"once":533,"_errors":535,"serverRendered":538,"path":7,"prerenderedAt":539},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":220,"$sdd-globals":236,"$sdd-navigation":238},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/campaign-banner":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":215,"_id":216,"_source":217,"_file":218,"_extension":219},"/design-system/components/campaign-banner","components",false,"","Campaign banner","The Campaign banner component draws a user's attention to promoted content.","page","Core",{"type":16,"children":17,"toc":202},"root",[18,27,33,38,43,48,55,75,81,94,98,104,109,122,128,133,138,141,147,152,156,159,165,170,175,182],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use campaign banners to promote content. They include a feature image and have an optional call to action.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"The banner has a headline and short summary text. These point users to promoted content and guide them to a call to action contained in a button.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Campaign banners can be used at the top or bottom of a page, under the header or above the footer.",{"type":19,"tag":44,"props":45,"children":47},"docs-example",{"id":46},"core-navigation-campaign-banner--primary-image",[],{"type":19,"tag":49,"props":50,"children":52},"h3",{"id":51},"when-and-how-to-use",[53],{"type":25,"value":54},"When and how to use",{"type":19,"tag":56,"props":57,"children":58},"ul",{},[59,65,70],{"type":19,"tag":60,"props":61,"children":62},"li",{},[63],{"type":25,"value":64},"Promote a campaign or related page content.",{"type":19,"tag":60,"props":66,"children":67},{},[68],{"type":25,"value":69},"Add an optional image.",{"type":19,"tag":60,"props":71,"children":72},{},[73],{"type":25,"value":74},"Use with an optional call to action.",{"type":19,"tag":49,"props":76,"children":78},{"id":77},"when-and-how-not-to-use",[79],{"type":25,"value":80},"When and how not to use",{"type":19,"tag":56,"props":82,"children":83},{},[84,89],{"type":19,"tag":60,"props":85,"children":86},{},[87],{"type":25,"value":88},"Don’t overload with content.",{"type":19,"tag":60,"props":90,"children":91},{},[92],{"type":25,"value":93},"Don’t use an unrelated image.",{"type":19,"tag":95,"props":96,"children":97},"hr",{},[],{"type":19,"tag":20,"props":99,"children":101},{"id":100},"variants",[102],{"type":25,"value":103},"Variants",{"type":19,"tag":28,"props":105,"children":106},{},[107],{"type":25,"value":108},"The campaign banner has 2 variants:",{"type":19,"tag":56,"props":110,"children":111},{},[112,117],{"type":19,"tag":60,"props":113,"children":114},{},[115],{"type":25,"value":116},"featured, which appears at the top of the page, below the header",{"type":19,"tag":60,"props":118,"children":119},{},[120],{"type":25,"value":121},"image inset, which appears at the bottom of the page above the footer.",{"type":19,"tag":49,"props":123,"children":125},{"id":124},"featured",[126],{"type":25,"value":127},"Featured",{"type":19,"tag":28,"props":129,"children":130},{},[131],{"type":25,"value":132},"A featured campaign banner goes at the top of the page underneath the header. When on larger screens, the image is cropped in a shape and can overlap the component above (the header).",{"type":19,"tag":28,"props":134,"children":135},{},[136],{"type":25,"value":137},"There is an option to include metadata for the image if required.",{"type":19,"tag":44,"props":139,"children":140},{"id":46},[],{"type":19,"tag":49,"props":142,"children":144},{"id":143},"image-inset",[145],{"type":25,"value":146},"Image inset",{"type":19,"tag":28,"props":148,"children":149},{},[150],{"type":25,"value":151},"The image inset variant sits above the footer at the bottom of the page. This should be used for less prominent campaigns. For featured campaigns, we recommend using the featured variant at the top of the page.",{"type":19,"tag":44,"props":153,"children":155},{"id":154},"core-navigation-campaign-banner--secondary-image",[],{"type":19,"tag":95,"props":157,"children":158},{},[],{"type":19,"tag":20,"props":160,"children":162},{"id":161},"theming",[163],{"type":25,"value":164},"Theming",{"type":19,"tag":28,"props":166,"children":167},{},[168],{"type":25,"value":169},"The campaign banner adopts its theming from the button component.",{"type":19,"tag":28,"props":171,"children":172},{},[173],{"type":25,"value":174},"If you choose the neutral button variant for your site, the campaign banner will display buttons in the neutral theme.",{"type":19,"tag":176,"props":177,"children":178},"docs-theme-chooser",{},[179],{"type":19,"tag":44,"props":180,"children":181},{"id":46},[],{"type":19,"tag":28,"props":183,"children":184},{},[185,187,193,195,200],{"type":25,"value":186},"To create your own theme, see ",{"type":19,"tag":188,"props":189,"children":190},"a",{"href":10},[191],{"type":25,"value":192},"theming guidance for designers",{"type":25,"value":194}," or ",{"type":19,"tag":188,"props":196,"children":197},{"href":10},[198],{"type":25,"value":199},"theming guidance for developers",{"type":25,"value":201},".",{"title":10,"searchDepth":203,"depth":203,"links":204},2,[205,210,214],{"id":22,"depth":203,"text":26,"children":206},[207,209],{"id":51,"depth":208,"text":54},3,{"id":77,"depth":208,"text":80},{"id":100,"depth":203,"text":103,"children":211},[212,213],{"id":124,"depth":208,"text":127},{"id":143,"depth":208,"text":146},{"id":161,"depth":203,"text":164},"markdown","content:design-system:5.components:campaign-banner.md","content","design-system/5.components/campaign-banner.md","md",["ShallowRef",221],["ShallowReactive",222],{"/design-system/components/campaign-banner":223},[224,230],{"_path":225,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":226,"description":227,"layout":13,"label":14,"_type":215,"_id":228,"_source":217,"_file":229,"_extension":219},"/design-system/components/callout","Callout","The Callout component is a text excerpt that draws attention to specific or important content.","content:design-system:5.components:callout.md","design-system/5.components/callout.md",{"_path":231,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":232,"description":233,"layout":13,"label":14,"_type":215,"_id":234,"_source":217,"_file":235,"_extension":219},"/design-system/components/card","Card","The Card component shows content about another page, event or topic. They help users find relevant information.","content:design-system:5.components:card.md","design-system/5.components/card.md",["ShallowRef",237],{},[239,244,485],{"title":240,"_path":241,"icon":242,"layout":243},"Ripple Design System","/","carbon:home","home",{"title":245,"_path":246,"children":247},"Design System","/design-system",[248,264,280,309,343],{"title":249,"_path":250,"children":251},"About","/design-system/about",[252,255,258,261],{"title":253,"_path":254,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":256,"_path":257,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":259,"_path":260,"layout":13},"Support","/design-system/about/getting-support",{"title":262,"_path":263,"layout":13},"Contributing","/design-system/about/contributing",{"title":265,"_path":266,"children":267},"Design","/design-system/design",[268,271,274,277],{"title":269,"_path":270,"layout":13},"Getting started","/design-system/design/getting-started",{"title":272,"_path":273,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":275,"_path":276,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":278,"_path":279,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":281,"_path":282,"children":283},"Develop","/design-system/develop",[284,286,288,291],{"title":269,"_path":285,"layout":13},"/design-system/develop/getting-started",{"title":262,"_path":287,"layout":13},"/design-system/develop/contributing",{"title":289,"_path":290,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":292,"children":293,"layout":13},"/design-system/develop/usage",[294,297,300,303,306],{"title":295,"_path":296,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":298,"_path":299,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":301,"_path":302,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":304,"_path":305,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":307,"_path":308,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":310,"_path":311,"children":312},"Styles","/design-system/styles",[313,316,319,322,325,328,331,334,337,340],{"title":314,"_path":315,"layout":13},"Colour","/design-system/styles/colour",{"title":317,"_path":318,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":320,"_path":321,"layout":13},"Grid","/design-system/styles/grid",{"title":323,"_path":324,"layout":13},"Icons","/design-system/styles/icons",{"title":326,"_path":327,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":329,"_path":330,"layout":13},"Layout","/design-system/styles/layout",{"title":332,"_path":333,"layout":13},"Logo","/design-system/styles/logo",{"title":335,"_path":336,"layout":13},"Motion","/design-system/styles/motion",{"title":338,"_path":339,"layout":13},"Spacing","/design-system/styles/spacing",{"title":341,"_path":342,"layout":13},"Typography","/design-system/styles/typography",{"title":344,"_path":345,"children":346},"Components","/design-system/components",[347,350,353,356,359,362,365,368,369,370,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482],{"title":348,"_path":349,"layout":13},"Accordion","/design-system/components/accordion",{"title":351,"_path":352,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":354,"_path":355,"layout":13},"Alert","/design-system/components/alert",{"title":357,"_path":358,"layout":13},"Block quote","/design-system/components/block-quote",{"title":360,"_path":361,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":363,"_path":364,"layout":13},"Button","/design-system/components/button",{"title":366,"_path":367,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":226,"_path":225,"layout":13},{"title":11,"_path":7,"layout":13},{"title":232,"_path":231,"layout":13},{"title":372,"_path":373,"layout":13},"Carousel","/design-system/components/carousel",{"title":375,"_path":376,"layout":13},"Category grid","/design-system/components/category-grid",{"title":378,"_path":379,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":381,"_path":382,"layout":13},"Chip","/design-system/components/chip",{"title":384,"_path":385,"layout":13},"Contact us","/design-system/components/contact-us",{"title":387,"_path":388,"layout":13},"Date input","/design-system/components/date-input",{"title":390,"_path":391,"layout":13},"Detail list","/design-system/components/detail-list",{"title":393,"_path":394,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":396,"_path":397,"layout":13},"File","/design-system/components/file",{"title":399,"_path":400,"layout":13},"Footer","/design-system/components/footer",{"title":402,"_path":403,"layout":13},"Form","/design-system/components/form",{"title":405,"_path":406,"layout":13},"Form alert","/design-system/components/form-alert",{"title":408,"_path":409,"layout":13},"Header","/design-system/components/header",{"title":411,"_path":412,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":414,"_path":415,"layout":13},"Input field","/design-system/components/input-field",{"title":417,"_path":418,"layout":13},"Key dates","/design-system/components/key-dates",{"title":420,"_path":421,"layout":13},"Media","/design-system/components/media",{"title":423,"_path":424,"layout":13},"Media embed","/design-system/components/media-embed",{"title":426,"_path":427,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":429,"_path":430,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":432,"_path":433,"layout":13},"Option button","/design-system/components/option-button",{"title":435,"_path":436,"layout":13},"Page action","/design-system/components/page-action",{"title":438,"_path":439,"layout":13},"Pagination","/design-system/components/pagination",{"title":441,"_path":442,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":444,"_path":445,"layout":13},"Profile","/design-system/components/profile",{"title":447,"_path":448,"layout":13},"Radio button","/design-system/components/radio-button",{"title":450,"_path":451,"layout":13},"Related links","/design-system/components/related-links",{"title":453,"_path":454,"layout":13},"Results listing","/design-system/components/results-listing",{"title":456,"_path":457,"layout":13},"Search bar","/design-system/components/search-bar",{"title":459,"_path":460,"layout":13},"Skip link","/design-system/components/skip-link",{"title":462,"_path":463,"layout":13},"Social share","/design-system/components/social-share",{"title":465,"_path":466,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":468,"_path":469,"layout":13},"Table","/design-system/components/table",{"title":471,"_path":472,"layout":13},"Tabs","/design-system/components/tabs",{"title":474,"_path":475,"layout":13},"Tag","/design-system/components/tag",{"title":477,"_path":478,"layout":13},"Text area","/design-system/components/text-area",{"title":480,"_path":481,"layout":13},"Timeline","/design-system/components/timeline",{"title":483,"_path":484,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":486,"_path":487,"children":488,"layout":13},"Ripple Framework","/framework",[489,490,508,530],{"title":486,"_path":487,"layout":13},{"title":491,"_path":492,"children":493},"Key Concepts","/framework/key-concepts",[494,496,499,502,505],{"title":301,"_path":495,"layout":13},"/framework/key-concepts/nuxt",{"title":497,"_path":498,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":500,"_path":501,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":503,"_path":504,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":506,"_path":507,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":509,"_path":510,"children":511},"Guides","/framework/guides",[512,515,518,521,524,527],{"title":513,"_path":514,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":516,"_path":517,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":519,"_path":520,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":522,"_path":523,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":525,"_path":526,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":528,"_path":529,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":531,"_path":532,"layout":13},"Core modules","/framework/core-modules",["Reactive",534],["Set"],["Reactive",536],{"module-navigation":537},null,true,1714695651106]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/card/_payload.json b/design-system/components/card/_payload.json
index 84ef90e90d..55c4f7e47e 100644
--- a/design-system/components/card/_payload.json
+++ b/design-system/components/card/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695155875]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695653996]
\ No newline at end of file
diff --git a/design-system/components/card/index.html b/design-system/components/card/index.html
index 6bf3847cca..027fadda77 100644
--- a/design-system/components/card/index.html
+++ b/design-system/components/card/index.html
@@ -28,64 +28,64 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.CwUV-MIb.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.gK7ORMEc.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -97,8 +97,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Card</h1><p class="rpl-type-p-large" data-v-3163c6df>The Card component shows content about another page, event or topic. They help users find relevant information.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use cards to help users find the right information quickly.<!--]--></p><p><!--[-->They can combine a variety of content, including text, media and links.<!--]--></p><p><!--[-->Cards are best used on a landing page to highlight any related pages, events or ongoing campaigns.<!--]--></p><p><!--[-->Ensure headings are direct and summaries are concise.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--promo&amp;args=graphicElement:None&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--promo&amp;args=graphicElement:None&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="how-this-component-works" data-v-ea525968><a href="#how-this-component-works" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->How this component works<!--]--></a></h2><p><!--[-->Cards can be made up of:<!--]--></p><ul><!--[--><li><!--[-->metadata, to show supplementary data to give the user more information (for example, date, topic, status, etc.)<!--]--></li><li><!--[-->headline, to provide a snapshot of the content<!--]--></li><li><!--[-->summary, to provide further details<!--]--></li><li><!--[-->visual elements, to provide visual prominence.<!--]--></li><!--]--></ul><p><!--[-->You only need a headline and a summary for a card. All other elements are optional and will depend on a user&#39;s needs.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="metadata"><!--[-->Metadata<!--]--></h4><p><!--[-->All cards have optional metadata. Use metadata to display a combination of:<!--]--></p><ul><!--[--><li><!--[-->topic/tag - categories for when a user needs to group content (for example, departments, agencies, services, etc.)<!--]--></li><li><!--[-->date - how old the content is, for when this information is important to the user<!--]--></li><li><!--[-->status - where a component or action is sitting within a process.<!--]--></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="visual-elements"><!--[-->Visual elements<!--]--></h4><p><!--[-->Visual elements in cards allow for different content to stand out. They can also provide additional context.<!--]--></p><p><!--[-->Elements that can provide visual prominence include:<!--]--></p><ul><!--[--><li><!--[-->an image<!--]--></li><li><!--[-->a highlight border<!--]--></li><li><!--[-->a blocked headline type.<!--]--></li><!--]--></ul><p><!--[-->Use visual elements carefully. Only use a visual element if it:<!--]--></p><ul><!--[--><li><!--[-->is meaningful to the user journey<!--]--></li><li><!--[-->supports what is already in the content<!--]--></li><li><!--[-->can help the user differentiate content from other content<!--]--></li><li><!--[-->can be easily identified<!--]--></li><li><!--[-->is informative and not only decorative.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Group together cards with similar content.<!--]--></li><li><!--[-->Use only a single style of card within a set of cards.<!--]--></li><li><!--[-->Keep the content clear and concise.<!--]--></li><li><!--[-->Only use one piece of information per card.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t mix different card variants in a group.<!--]--></li><li><!--[-->Never use a single card only.<!--]--></li><li><!--[-->Never repeat content in a group of cards.<!--]--></li><li><!--[-->Don&#39;t overload cards with content.<!--]--></li><li><!--[-->Don&#39;t include other interactive elements, like links, inside the card.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->A card has 2 main variants and is styled for its purpose.<!--]--></p><ul><!--[--><li><!--[-->Promotion Cards, which is used to highlight important content.<!--]--></li><li><!--[-->Navigation Cards, which is used for larger groups of content.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="promotion-cards" data-v-ea525968><a href="#promotion-cards" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Promotion cards<!--]--></a></h2><p><!--[-->Promotion cards provide an eye-catching way to promote links to other pages on your site (or external sites).<!--]--></p><p><!--[-->Promotion cards stack in a grid when used in a collection.<!--]--></p><p><!--[-->Promotion cards have 4 variants:<!--]--></p><ul><!--[--><li><!--[-->standard<!--]--></li><li><!--[-->highlight<!--]--></li><li><!--[-->image full bleed<!--]--></li><li><!--[-->avatar.<!--]--></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="standard"><!--[-->Standard<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--promo&amp;args=graphicElement:None&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--promo&amp;args=graphicElement:None&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="highlight"><!--[-->Highlight<!--]--></h4><p><!--[-->The highlight variant gives the card more visual prominence. Use this to guide users to the content.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--promo&amp;args=graphicElement:Highlight&amp;viewMode=story&amp;globals=theme:docsTheme2;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--promo&amp;args=graphicElement:Highlight&amp;viewMode=story&amp;globals=theme:docsTheme2;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="image-full-bleed"><!--[-->Image full bleed<!--]--></h4><p><!--[-->The image full bleed variant gives the option to add a relevant image to grab the user’s attention.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--promo&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--promo&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="avatar"><!--[-->Avatar<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--avatar&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--avatar&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="navigation-cards" data-v-ea525968><a href="#navigation-cards" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Navigation cards<!--]--></a></h2><p><!--[-->Navigation cards are useful for displaying and breaking down large groups of content options.<!--]--></p><p><!--[-->On landing pages, they are used to highlight all the different sections of that site.<!--]--></p><p><!--[-->Navigation cards fill the full width of the content area. They will always stack vertically.<!--]--></p><p><!--[-->There are 3 variants of navigation cards:<!--]--></p><ul><!--[--><li><!--[-->standard<!--]--></li><li><!--[-->image inset<!--]--></li><li><!--[-->heading highlight.<!--]--></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="standard-1"><!--[-->Standard<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--nav&amp;args=graphicElement:None&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--nav&amp;args=graphicElement:None&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="image-inset"><!--[-->Image inset<!--]--></h4><p><!--[-->A related image can increase a card&#39;s visual prominence.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--nav&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--nav&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="heading-highlight"><!--[-->Heading highlight<!--]--></h4><p><!--[-->To draw attention to the heading and highlight the content, use a heading highlight.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--nav&amp;args=graphicElement:Heading+highlighted&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--nav&amp;args=graphicElement:Heading+highlighted&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Cards use colour for:<!--]--></p><ul><!--[--><li><!--[-->interaction states<!--]--></li><li><!--[-->adding visual prominence to some elements.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--promo&amp;args=graphicElement:Highlight&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--promo&amp;args=graphicElement:Highlight&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--nav&amp;args=graphicElement:Heading+highlighted&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--nav&amp;args=graphicElement:Heading+highlighted&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/card.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/card/_payload.json">[{"state":1,"once":845,"_errors":847,"serverRendered":850,"path":851,"prerenderedAt":852},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":532,"$sdd-globals":548,"$sdd-navigation":550},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/card":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":527,"_id":528,"_source":529,"_file":530,"_extension":531},"/design-system/components/card","components",false,"","Card","The Card component shows content about another page, event or topic. They help users find relevant information.","page","Core",{"type":16,"children":17,"toc":513},"root",[18,27,33,38,43,48,54,61,66,91,96,103,108,126,132,137,142,160,165,193,199,222,228,256,260,266,271,284,290,295,300,305,328,333,336,341,346,351,357,362,365,371,375,381,386,391,396,401,418,423,427,433,438,441,447,452,456,459,465,470,483,493],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use cards to help users find the right information quickly.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"They can combine a variety of content, including text, media and links.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Cards are best used on a landing page to highlight any related pages, events or ongoing campaigns.",{"type":19,"tag":28,"props":44,"children":45},{},[46],{"type":25,"value":47},"Ensure headings are direct and summaries are concise.",{"type":19,"tag":49,"props":50,"children":53},"docs-example",{"id":51,"argsString":52},"core-navigation-card--promo","graphicElement:None",[],{"type":19,"tag":55,"props":56,"children":58},"h3",{"id":57},"how-this-component-works",[59],{"type":25,"value":60},"How this component works",{"type":19,"tag":28,"props":62,"children":63},{},[64],{"type":25,"value":65},"Cards can be made up of:",{"type":19,"tag":67,"props":68,"children":69},"ul",{},[70,76,81,86],{"type":19,"tag":71,"props":72,"children":73},"li",{},[74],{"type":25,"value":75},"metadata, to show supplementary data to give the user more information (for example, date, topic, status, etc.)",{"type":19,"tag":71,"props":77,"children":78},{},[79],{"type":25,"value":80},"headline, to provide a snapshot of the content",{"type":19,"tag":71,"props":82,"children":83},{},[84],{"type":25,"value":85},"summary, to provide further details",{"type":19,"tag":71,"props":87,"children":88},{},[89],{"type":25,"value":90},"visual elements, to provide visual prominence.",{"type":19,"tag":28,"props":92,"children":93},{},[94],{"type":25,"value":95},"You only need a headline and a summary for a card. All other elements are optional and will depend on a user's needs.",{"type":19,"tag":97,"props":98,"children":100},"h4",{"id":99},"metadata",[101],{"type":25,"value":102},"Metadata",{"type":19,"tag":28,"props":104,"children":105},{},[106],{"type":25,"value":107},"All cards have optional metadata. Use metadata to display a combination of:",{"type":19,"tag":67,"props":109,"children":110},{},[111,116,121],{"type":19,"tag":71,"props":112,"children":113},{},[114],{"type":25,"value":115},"topic/tag - categories for when a user needs to group content (for example, departments, agencies, services, etc.)",{"type":19,"tag":71,"props":117,"children":118},{},[119],{"type":25,"value":120},"date - how old the content is, for when this information is important to the user",{"type":19,"tag":71,"props":122,"children":123},{},[124],{"type":25,"value":125},"status - where a component or action is sitting within a process.",{"type":19,"tag":97,"props":127,"children":129},{"id":128},"visual-elements",[130],{"type":25,"value":131},"Visual elements",{"type":19,"tag":28,"props":133,"children":134},{},[135],{"type":25,"value":136},"Visual elements in cards allow for different content to stand out. They can also provide additional context.",{"type":19,"tag":28,"props":138,"children":139},{},[140],{"type":25,"value":141},"Elements that can provide visual prominence include:",{"type":19,"tag":67,"props":143,"children":144},{},[145,150,155],{"type":19,"tag":71,"props":146,"children":147},{},[148],{"type":25,"value":149},"an image",{"type":19,"tag":71,"props":151,"children":152},{},[153],{"type":25,"value":154},"a highlight border",{"type":19,"tag":71,"props":156,"children":157},{},[158],{"type":25,"value":159},"a blocked headline type.",{"type":19,"tag":28,"props":161,"children":162},{},[163],{"type":25,"value":164},"Use visual elements carefully. Only use a visual element if it:",{"type":19,"tag":67,"props":166,"children":167},{},[168,173,178,183,188],{"type":19,"tag":71,"props":169,"children":170},{},[171],{"type":25,"value":172},"is meaningful to the user journey",{"type":19,"tag":71,"props":174,"children":175},{},[176],{"type":25,"value":177},"supports what is already in the content",{"type":19,"tag":71,"props":179,"children":180},{},[181],{"type":25,"value":182},"can help the user differentiate content from other content",{"type":19,"tag":71,"props":184,"children":185},{},[186],{"type":25,"value":187},"can be easily identified",{"type":19,"tag":71,"props":189,"children":190},{},[191],{"type":25,"value":192},"is informative and not only decorative.",{"type":19,"tag":55,"props":194,"children":196},{"id":195},"when-and-how-to-use",[197],{"type":25,"value":198},"When and how to use",{"type":19,"tag":67,"props":200,"children":201},{},[202,207,212,217],{"type":19,"tag":71,"props":203,"children":204},{},[205],{"type":25,"value":206},"Group together cards with similar content.",{"type":19,"tag":71,"props":208,"children":209},{},[210],{"type":25,"value":211},"Use only a single style of card within a set of cards.",{"type":19,"tag":71,"props":213,"children":214},{},[215],{"type":25,"value":216},"Keep the content clear and concise.",{"type":19,"tag":71,"props":218,"children":219},{},[220],{"type":25,"value":221},"Only use one piece of information per card.",{"type":19,"tag":55,"props":223,"children":225},{"id":224},"when-and-how-not-to-use",[226],{"type":25,"value":227},"When and how not to use",{"type":19,"tag":67,"props":229,"children":230},{},[231,236,241,246,251],{"type":19,"tag":71,"props":232,"children":233},{},[234],{"type":25,"value":235},"Don't mix different card variants in a group.",{"type":19,"tag":71,"props":237,"children":238},{},[239],{"type":25,"value":240},"Never use a single card only.",{"type":19,"tag":71,"props":242,"children":243},{},[244],{"type":25,"value":245},"Never repeat content in a group of cards.",{"type":19,"tag":71,"props":247,"children":248},{},[249],{"type":25,"value":250},"Don't overload cards with content.",{"type":19,"tag":71,"props":252,"children":253},{},[254],{"type":25,"value":255},"Don't include other interactive elements, like links, inside the card.",{"type":19,"tag":257,"props":258,"children":259},"hr",{},[],{"type":19,"tag":20,"props":261,"children":263},{"id":262},"variants",[264],{"type":25,"value":265},"Variants",{"type":19,"tag":28,"props":267,"children":268},{},[269],{"type":25,"value":270},"A card has 2 main variants and is styled for its purpose.",{"type":19,"tag":67,"props":272,"children":273},{},[274,279],{"type":19,"tag":71,"props":275,"children":276},{},[277],{"type":25,"value":278},"Promotion Cards, which is used to highlight important content.",{"type":19,"tag":71,"props":280,"children":281},{},[282],{"type":25,"value":283},"Navigation Cards, which is used for larger groups of content.",{"type":19,"tag":55,"props":285,"children":287},{"id":286},"promotion-cards",[288],{"type":25,"value":289},"Promotion cards",{"type":19,"tag":28,"props":291,"children":292},{},[293],{"type":25,"value":294},"Promotion cards provide an eye-catching way to promote links to other pages on your site (or external sites).",{"type":19,"tag":28,"props":296,"children":297},{},[298],{"type":25,"value":299},"Promotion cards stack in a grid when used in a collection.",{"type":19,"tag":28,"props":301,"children":302},{},[303],{"type":25,"value":304},"Promotion cards have 4 variants:",{"type":19,"tag":67,"props":306,"children":307},{},[308,313,318,323],{"type":19,"tag":71,"props":309,"children":310},{},[311],{"type":25,"value":312},"standard",{"type":19,"tag":71,"props":314,"children":315},{},[316],{"type":25,"value":317},"highlight",{"type":19,"tag":71,"props":319,"children":320},{},[321],{"type":25,"value":322},"image full bleed",{"type":19,"tag":71,"props":324,"children":325},{},[326],{"type":25,"value":327},"avatar.",{"type":19,"tag":97,"props":329,"children":330},{"id":312},[331],{"type":25,"value":332},"Standard",{"type":19,"tag":49,"props":334,"children":335},{"id":51,"argsString":52},[],{"type":19,"tag":97,"props":337,"children":338},{"id":317},[339],{"type":25,"value":340},"Highlight",{"type":19,"tag":28,"props":342,"children":343},{},[344],{"type":25,"value":345},"The highlight variant gives the card more visual prominence. Use this to guide users to the content.",{"type":19,"tag":49,"props":347,"children":350},{"id":51,"argsString":348,"theme":349},"graphicElement:Highlight","docsTheme2",[],{"type":19,"tag":97,"props":352,"children":354},{"id":353},"image-full-bleed",[355],{"type":25,"value":356},"Image full bleed",{"type":19,"tag":28,"props":358,"children":359},{},[360],{"type":25,"value":361},"The image full bleed variant gives the option to add a relevant image to grab the user’s attention.",{"type":19,"tag":49,"props":363,"children":364},{"id":51},[],{"type":19,"tag":97,"props":366,"children":368},{"id":367},"avatar",[369],{"type":25,"value":370},"Avatar",{"type":19,"tag":49,"props":372,"children":374},{"id":373},"core-navigation-card--avatar",[],{"type":19,"tag":55,"props":376,"children":378},{"id":377},"navigation-cards",[379],{"type":25,"value":380},"Navigation cards",{"type":19,"tag":28,"props":382,"children":383},{},[384],{"type":25,"value":385},"Navigation cards are useful for displaying and breaking down large groups of content options.",{"type":19,"tag":28,"props":387,"children":388},{},[389],{"type":25,"value":390},"On landing pages, they are used to highlight all the different sections of that site.",{"type":19,"tag":28,"props":392,"children":393},{},[394],{"type":25,"value":395},"Navigation cards fill the full width of the content area. They will always stack vertically.",{"type":19,"tag":28,"props":397,"children":398},{},[399],{"type":25,"value":400},"There are 3 variants of navigation cards:",{"type":19,"tag":67,"props":402,"children":403},{},[404,408,413],{"type":19,"tag":71,"props":405,"children":406},{},[407],{"type":25,"value":312},{"type":19,"tag":71,"props":409,"children":410},{},[411],{"type":25,"value":412},"image inset",{"type":19,"tag":71,"props":414,"children":415},{},[416],{"type":25,"value":417},"heading highlight.",{"type":19,"tag":97,"props":419,"children":421},{"id":420},"standard-1",[422],{"type":25,"value":332},{"type":19,"tag":49,"props":424,"children":426},{"id":425,"argsString":52},"core-navigation-card--nav",[],{"type":19,"tag":97,"props":428,"children":430},{"id":429},"image-inset",[431],{"type":25,"value":432},"Image inset",{"type":19,"tag":28,"props":434,"children":435},{},[436],{"type":25,"value":437},"A related image can increase a card's visual prominence.",{"type":19,"tag":49,"props":439,"children":440},{"id":425},[],{"type":19,"tag":97,"props":442,"children":444},{"id":443},"heading-highlight",[445],{"type":25,"value":446},"Heading highlight",{"type":19,"tag":28,"props":448,"children":449},{},[450],{"type":25,"value":451},"To draw attention to the heading and highlight the content, use a heading highlight.",{"type":19,"tag":49,"props":453,"children":455},{"id":425,"argsString":454},"graphicElement:Heading+highlighted",[],{"type":19,"tag":257,"props":457,"children":458},{},[],{"type":19,"tag":20,"props":460,"children":462},{"id":461},"theming",[463],{"type":25,"value":464},"Theming",{"type":19,"tag":28,"props":466,"children":467},{},[468],{"type":25,"value":469},"Cards use colour for:",{"type":19,"tag":67,"props":471,"children":472},{},[473,478],{"type":19,"tag":71,"props":474,"children":475},{},[476],{"type":25,"value":477},"interaction states",{"type":19,"tag":71,"props":479,"children":480},{},[481],{"type":25,"value":482},"adding visual prominence to some elements.",{"type":19,"tag":484,"props":485,"children":486},"docs-theme-chooser",{},[487,490],{"type":19,"tag":49,"props":488,"children":489},{"id":51,"argsString":348},[],{"type":19,"tag":49,"props":491,"children":492},{"id":425,"argsString":454},[],{"type":19,"tag":28,"props":494,"children":495},{},[496,498,504,506,511],{"type":25,"value":497},"To create your own theme, see ",{"type":19,"tag":499,"props":500,"children":501},"a",{"href":10},[502],{"type":25,"value":503},"theming guidance for designers",{"type":25,"value":505}," or ",{"type":19,"tag":499,"props":507,"children":508},{"href":10},[509],{"type":25,"value":510},"theming guidance for developers",{"type":25,"value":512},".",{"title":10,"searchDepth":514,"depth":514,"links":515},2,[516,522,526],{"id":22,"depth":514,"text":26,"children":517},[518,520,521],{"id":57,"depth":519,"text":60},3,{"id":195,"depth":519,"text":198},{"id":224,"depth":519,"text":227},{"id":262,"depth":514,"text":265,"children":523},[524,525],{"id":286,"depth":519,"text":289},{"id":377,"depth":519,"text":380},{"id":461,"depth":514,"text":464},"markdown","content:design-system:5.components:card.md","content","design-system/5.components/card.md","md",["ShallowRef",533],["ShallowReactive",534],{"/design-system/components/card":535},[536,542],{"_path":537,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":538,"description":539,"layout":13,"label":14,"_type":527,"_id":540,"_source":529,"_file":541,"_extension":531},"/design-system/components/campaign-banner","Campaign banner","The Campaign banner component draws a user's attention to promoted content.","content:design-system:5.components:campaign-banner.md","design-system/5.components/campaign-banner.md",{"_path":543,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":544,"description":545,"layout":13,"label":14,"_type":527,"_id":546,"_source":529,"_file":547,"_extension":531},"/design-system/components/carousel","Carousel","The Carousel component is a set of related cards that users can side-scroll through.","content:design-system:5.components:carousel.md","design-system/5.components/carousel.md",["ShallowRef",549],{},[551,556,797],{"title":552,"_path":553,"icon":554,"layout":555},"Ripple Design System","/","carbon:home","home",{"title":557,"_path":558,"children":559},"Design System","/design-system",[560,576,592,621,655],{"title":561,"_path":562,"children":563},"About","/design-system/about",[564,567,570,573],{"title":565,"_path":566,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":568,"_path":569,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":571,"_path":572,"layout":13},"Support","/design-system/about/getting-support",{"title":574,"_path":575,"layout":13},"Contributing","/design-system/about/contributing",{"title":577,"_path":578,"children":579},"Design","/design-system/design",[580,583,586,589],{"title":581,"_path":582,"layout":13},"Getting started","/design-system/design/getting-started",{"title":584,"_path":585,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":587,"_path":588,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":590,"_path":591,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":593,"_path":594,"children":595},"Develop","/design-system/develop",[596,598,600,603],{"title":581,"_path":597,"layout":13},"/design-system/develop/getting-started",{"title":574,"_path":599,"layout":13},"/design-system/develop/contributing",{"title":601,"_path":602,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":604,"children":605,"layout":13},"/design-system/develop/usage",[606,609,612,615,618],{"title":607,"_path":608,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":610,"_path":611,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":613,"_path":614,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":616,"_path":617,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":619,"_path":620,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":622,"_path":623,"children":624},"Styles","/design-system/styles",[625,628,631,634,637,640,643,646,649,652],{"title":626,"_path":627,"layout":13},"Colour","/design-system/styles/colour",{"title":629,"_path":630,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":632,"_path":633,"layout":13},"Grid","/design-system/styles/grid",{"title":635,"_path":636,"layout":13},"Icons","/design-system/styles/icons",{"title":638,"_path":639,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":641,"_path":642,"layout":13},"Layout","/design-system/styles/layout",{"title":644,"_path":645,"layout":13},"Logo","/design-system/styles/logo",{"title":647,"_path":648,"layout":13},"Motion","/design-system/styles/motion",{"title":650,"_path":651,"layout":13},"Spacing","/design-system/styles/spacing",{"title":653,"_path":654,"layout":13},"Typography","/design-system/styles/typography",{"title":656,"_path":657,"children":658},"Components","/design-system/components",[659,662,665,668,671,674,677,680,683,684,685,686,689,692,695,698,701,704,707,710,713,716,719,722,725,728,731,734,737,740,743,746,749,752,755,758,761,764,767,770,773,776,779,782,785,788,791,794],{"title":660,"_path":661,"layout":13},"Accordion","/design-system/components/accordion",{"title":663,"_path":664,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":666,"_path":667,"layout":13},"Alert","/design-system/components/alert",{"title":669,"_path":670,"layout":13},"Block quote","/design-system/components/block-quote",{"title":672,"_path":673,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":675,"_path":676,"layout":13},"Button","/design-system/components/button",{"title":678,"_path":679,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":681,"_path":682,"layout":13},"Callout","/design-system/components/callout",{"title":538,"_path":537,"layout":13},{"title":11,"_path":7,"layout":13},{"title":544,"_path":543,"layout":13},{"title":687,"_path":688,"layout":13},"Category grid","/design-system/components/category-grid",{"title":690,"_path":691,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":693,"_path":694,"layout":13},"Chip","/design-system/components/chip",{"title":696,"_path":697,"layout":13},"Contact us","/design-system/components/contact-us",{"title":699,"_path":700,"layout":13},"Date input","/design-system/components/date-input",{"title":702,"_path":703,"layout":13},"Detail list","/design-system/components/detail-list",{"title":705,"_path":706,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":708,"_path":709,"layout":13},"File","/design-system/components/file",{"title":711,"_path":712,"layout":13},"Footer","/design-system/components/footer",{"title":714,"_path":715,"layout":13},"Form","/design-system/components/form",{"title":717,"_path":718,"layout":13},"Form alert","/design-system/components/form-alert",{"title":720,"_path":721,"layout":13},"Header","/design-system/components/header",{"title":723,"_path":724,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":726,"_path":727,"layout":13},"Input field","/design-system/components/input-field",{"title":729,"_path":730,"layout":13},"Key dates","/design-system/components/key-dates",{"title":732,"_path":733,"layout":13},"Media","/design-system/components/media",{"title":735,"_path":736,"layout":13},"Media embed","/design-system/components/media-embed",{"title":738,"_path":739,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":741,"_path":742,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":744,"_path":745,"layout":13},"Option button","/design-system/components/option-button",{"title":747,"_path":748,"layout":13},"Page action","/design-system/components/page-action",{"title":750,"_path":751,"layout":13},"Pagination","/design-system/components/pagination",{"title":753,"_path":754,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":756,"_path":757,"layout":13},"Profile","/design-system/components/profile",{"title":759,"_path":760,"layout":13},"Radio button","/design-system/components/radio-button",{"title":762,"_path":763,"layout":13},"Related links","/design-system/components/related-links",{"title":765,"_path":766,"layout":13},"Results listing","/design-system/components/results-listing",{"title":768,"_path":769,"layout":13},"Search bar","/design-system/components/search-bar",{"title":771,"_path":772,"layout":13},"Skip link","/design-system/components/skip-link",{"title":774,"_path":775,"layout":13},"Social share","/design-system/components/social-share",{"title":777,"_path":778,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":780,"_path":781,"layout":13},"Table","/design-system/components/table",{"title":783,"_path":784,"layout":13},"Tabs","/design-system/components/tabs",{"title":786,"_path":787,"layout":13},"Tag","/design-system/components/tag",{"title":789,"_path":790,"layout":13},"Text area","/design-system/components/text-area",{"title":792,"_path":793,"layout":13},"Timeline","/design-system/components/timeline",{"title":795,"_path":796,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":798,"_path":799,"children":800,"layout":13},"Ripple Framework","/framework",[801,802,820,842],{"title":798,"_path":799,"layout":13},{"title":803,"_path":804,"children":805},"Key Concepts","/framework/key-concepts",[806,808,811,814,817],{"title":613,"_path":807,"layout":13},"/framework/key-concepts/nuxt",{"title":809,"_path":810,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":812,"_path":813,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":815,"_path":816,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":818,"_path":819,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":821,"_path":822,"children":823},"Guides","/framework/guides",[824,827,830,833,836,839],{"title":825,"_path":826,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":828,"_path":829,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":831,"_path":832,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":834,"_path":835,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":837,"_path":838,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":840,"_path":841,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":843,"_path":844,"layout":13},"Core modules","/framework/core-modules",["Reactive",846],["Set"],["Reactive",848],{"module-navigation":849},null,true,"/design-system/components/card/",1714695155875]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Card</h1><p class="rpl-type-p-large" data-v-3163c6df>The Card component shows content about another page, event or topic. They help users find relevant information.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use cards to help users find the right information quickly.<!--]--></p><p><!--[-->They can combine a variety of content, including text, media and links.<!--]--></p><p><!--[-->Cards are best used on a landing page to highlight any related pages, events or ongoing campaigns.<!--]--></p><p><!--[-->Ensure headings are direct and summaries are concise.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--promo&amp;args=graphicElement:None&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--promo&amp;args=graphicElement:None&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="how-this-component-works" data-v-ea525968><a href="#how-this-component-works" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->How this component works<!--]--></a></h2><p><!--[-->Cards can be made up of:<!--]--></p><ul><!--[--><li><!--[-->metadata, to show supplementary data to give the user more information (for example, date, topic, status, etc.)<!--]--></li><li><!--[-->headline, to provide a snapshot of the content<!--]--></li><li><!--[-->summary, to provide further details<!--]--></li><li><!--[-->visual elements, to provide visual prominence.<!--]--></li><!--]--></ul><p><!--[-->You only need a headline and a summary for a card. All other elements are optional and will depend on a user&#39;s needs.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="metadata"><!--[-->Metadata<!--]--></h4><p><!--[-->All cards have optional metadata. Use metadata to display a combination of:<!--]--></p><ul><!--[--><li><!--[-->topic/tag - categories for when a user needs to group content (for example, departments, agencies, services, etc.)<!--]--></li><li><!--[-->date - how old the content is, for when this information is important to the user<!--]--></li><li><!--[-->status - where a component or action is sitting within a process.<!--]--></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="visual-elements"><!--[-->Visual elements<!--]--></h4><p><!--[-->Visual elements in cards allow for different content to stand out. They can also provide additional context.<!--]--></p><p><!--[-->Elements that can provide visual prominence include:<!--]--></p><ul><!--[--><li><!--[-->an image<!--]--></li><li><!--[-->a highlight border<!--]--></li><li><!--[-->a blocked headline type.<!--]--></li><!--]--></ul><p><!--[-->Use visual elements carefully. Only use a visual element if it:<!--]--></p><ul><!--[--><li><!--[-->is meaningful to the user journey<!--]--></li><li><!--[-->supports what is already in the content<!--]--></li><li><!--[-->can help the user differentiate content from other content<!--]--></li><li><!--[-->can be easily identified<!--]--></li><li><!--[-->is informative and not only decorative.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Group together cards with similar content.<!--]--></li><li><!--[-->Use only a single style of card within a set of cards.<!--]--></li><li><!--[-->Keep the content clear and concise.<!--]--></li><li><!--[-->Only use one piece of information per card.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t mix different card variants in a group.<!--]--></li><li><!--[-->Never use a single card only.<!--]--></li><li><!--[-->Never repeat content in a group of cards.<!--]--></li><li><!--[-->Don&#39;t overload cards with content.<!--]--></li><li><!--[-->Don&#39;t include other interactive elements, like links, inside the card.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->A card has 2 main variants and is styled for its purpose.<!--]--></p><ul><!--[--><li><!--[-->Promotion Cards, which is used to highlight important content.<!--]--></li><li><!--[-->Navigation Cards, which is used for larger groups of content.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="promotion-cards" data-v-ea525968><a href="#promotion-cards" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Promotion cards<!--]--></a></h2><p><!--[-->Promotion cards provide an eye-catching way to promote links to other pages on your site (or external sites).<!--]--></p><p><!--[-->Promotion cards stack in a grid when used in a collection.<!--]--></p><p><!--[-->Promotion cards have 4 variants:<!--]--></p><ul><!--[--><li><!--[-->standard<!--]--></li><li><!--[-->highlight<!--]--></li><li><!--[-->image full bleed<!--]--></li><li><!--[-->avatar.<!--]--></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="standard"><!--[-->Standard<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--promo&amp;args=graphicElement:None&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--promo&amp;args=graphicElement:None&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="highlight"><!--[-->Highlight<!--]--></h4><p><!--[-->The highlight variant gives the card more visual prominence. Use this to guide users to the content.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--promo&amp;args=graphicElement:Highlight&amp;viewMode=story&amp;globals=theme:docsTheme2;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--promo&amp;args=graphicElement:Highlight&amp;viewMode=story&amp;globals=theme:docsTheme2;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="image-full-bleed"><!--[-->Image full bleed<!--]--></h4><p><!--[-->The image full bleed variant gives the option to add a relevant image to grab the user’s attention.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--promo&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--promo&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="avatar"><!--[-->Avatar<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--avatar&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--avatar&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="navigation-cards" data-v-ea525968><a href="#navigation-cards" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Navigation cards<!--]--></a></h2><p><!--[-->Navigation cards are useful for displaying and breaking down large groups of content options.<!--]--></p><p><!--[-->On landing pages, they are used to highlight all the different sections of that site.<!--]--></p><p><!--[-->Navigation cards fill the full width of the content area. They will always stack vertically.<!--]--></p><p><!--[-->There are 3 variants of navigation cards:<!--]--></p><ul><!--[--><li><!--[-->standard<!--]--></li><li><!--[-->image inset<!--]--></li><li><!--[-->heading highlight.<!--]--></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="standard-1"><!--[-->Standard<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--nav&amp;args=graphicElement:None&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--nav&amp;args=graphicElement:None&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="image-inset"><!--[-->Image inset<!--]--></h4><p><!--[-->A related image can increase a card&#39;s visual prominence.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--nav&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--nav&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="heading-highlight"><!--[-->Heading highlight<!--]--></h4><p><!--[-->To draw attention to the heading and highlight the content, use a heading highlight.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--nav&amp;args=graphicElement:Heading+highlighted&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--nav&amp;args=graphicElement:Heading+highlighted&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Cards use colour for:<!--]--></p><ul><!--[--><li><!--[-->interaction states<!--]--></li><li><!--[-->adding visual prominence to some elements.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--promo&amp;args=graphicElement:Highlight&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--promo&amp;args=graphicElement:Highlight&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--nav&amp;args=graphicElement:Heading+highlighted&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--nav&amp;args=graphicElement:Heading+highlighted&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/card.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/card/_payload.json">[{"state":1,"once":845,"_errors":847,"serverRendered":850,"path":851,"prerenderedAt":852},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":532,"$sdd-globals":548,"$sdd-navigation":550},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/card":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":527,"_id":528,"_source":529,"_file":530,"_extension":531},"/design-system/components/card","components",false,"","Card","The Card component shows content about another page, event or topic. They help users find relevant information.","page","Core",{"type":16,"children":17,"toc":513},"root",[18,27,33,38,43,48,54,61,66,91,96,103,108,126,132,137,142,160,165,193,199,222,228,256,260,266,271,284,290,295,300,305,328,333,336,341,346,351,357,362,365,371,375,381,386,391,396,401,418,423,427,433,438,441,447,452,456,459,465,470,483,493],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use cards to help users find the right information quickly.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"They can combine a variety of content, including text, media and links.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Cards are best used on a landing page to highlight any related pages, events or ongoing campaigns.",{"type":19,"tag":28,"props":44,"children":45},{},[46],{"type":25,"value":47},"Ensure headings are direct and summaries are concise.",{"type":19,"tag":49,"props":50,"children":53},"docs-example",{"id":51,"argsString":52},"core-navigation-card--promo","graphicElement:None",[],{"type":19,"tag":55,"props":56,"children":58},"h3",{"id":57},"how-this-component-works",[59],{"type":25,"value":60},"How this component works",{"type":19,"tag":28,"props":62,"children":63},{},[64],{"type":25,"value":65},"Cards can be made up of:",{"type":19,"tag":67,"props":68,"children":69},"ul",{},[70,76,81,86],{"type":19,"tag":71,"props":72,"children":73},"li",{},[74],{"type":25,"value":75},"metadata, to show supplementary data to give the user more information (for example, date, topic, status, etc.)",{"type":19,"tag":71,"props":77,"children":78},{},[79],{"type":25,"value":80},"headline, to provide a snapshot of the content",{"type":19,"tag":71,"props":82,"children":83},{},[84],{"type":25,"value":85},"summary, to provide further details",{"type":19,"tag":71,"props":87,"children":88},{},[89],{"type":25,"value":90},"visual elements, to provide visual prominence.",{"type":19,"tag":28,"props":92,"children":93},{},[94],{"type":25,"value":95},"You only need a headline and a summary for a card. All other elements are optional and will depend on a user's needs.",{"type":19,"tag":97,"props":98,"children":100},"h4",{"id":99},"metadata",[101],{"type":25,"value":102},"Metadata",{"type":19,"tag":28,"props":104,"children":105},{},[106],{"type":25,"value":107},"All cards have optional metadata. Use metadata to display a combination of:",{"type":19,"tag":67,"props":109,"children":110},{},[111,116,121],{"type":19,"tag":71,"props":112,"children":113},{},[114],{"type":25,"value":115},"topic/tag - categories for when a user needs to group content (for example, departments, agencies, services, etc.)",{"type":19,"tag":71,"props":117,"children":118},{},[119],{"type":25,"value":120},"date - how old the content is, for when this information is important to the user",{"type":19,"tag":71,"props":122,"children":123},{},[124],{"type":25,"value":125},"status - where a component or action is sitting within a process.",{"type":19,"tag":97,"props":127,"children":129},{"id":128},"visual-elements",[130],{"type":25,"value":131},"Visual elements",{"type":19,"tag":28,"props":133,"children":134},{},[135],{"type":25,"value":136},"Visual elements in cards allow for different content to stand out. They can also provide additional context.",{"type":19,"tag":28,"props":138,"children":139},{},[140],{"type":25,"value":141},"Elements that can provide visual prominence include:",{"type":19,"tag":67,"props":143,"children":144},{},[145,150,155],{"type":19,"tag":71,"props":146,"children":147},{},[148],{"type":25,"value":149},"an image",{"type":19,"tag":71,"props":151,"children":152},{},[153],{"type":25,"value":154},"a highlight border",{"type":19,"tag":71,"props":156,"children":157},{},[158],{"type":25,"value":159},"a blocked headline type.",{"type":19,"tag":28,"props":161,"children":162},{},[163],{"type":25,"value":164},"Use visual elements carefully. Only use a visual element if it:",{"type":19,"tag":67,"props":166,"children":167},{},[168,173,178,183,188],{"type":19,"tag":71,"props":169,"children":170},{},[171],{"type":25,"value":172},"is meaningful to the user journey",{"type":19,"tag":71,"props":174,"children":175},{},[176],{"type":25,"value":177},"supports what is already in the content",{"type":19,"tag":71,"props":179,"children":180},{},[181],{"type":25,"value":182},"can help the user differentiate content from other content",{"type":19,"tag":71,"props":184,"children":185},{},[186],{"type":25,"value":187},"can be easily identified",{"type":19,"tag":71,"props":189,"children":190},{},[191],{"type":25,"value":192},"is informative and not only decorative.",{"type":19,"tag":55,"props":194,"children":196},{"id":195},"when-and-how-to-use",[197],{"type":25,"value":198},"When and how to use",{"type":19,"tag":67,"props":200,"children":201},{},[202,207,212,217],{"type":19,"tag":71,"props":203,"children":204},{},[205],{"type":25,"value":206},"Group together cards with similar content.",{"type":19,"tag":71,"props":208,"children":209},{},[210],{"type":25,"value":211},"Use only a single style of card within a set of cards.",{"type":19,"tag":71,"props":213,"children":214},{},[215],{"type":25,"value":216},"Keep the content clear and concise.",{"type":19,"tag":71,"props":218,"children":219},{},[220],{"type":25,"value":221},"Only use one piece of information per card.",{"type":19,"tag":55,"props":223,"children":225},{"id":224},"when-and-how-not-to-use",[226],{"type":25,"value":227},"When and how not to use",{"type":19,"tag":67,"props":229,"children":230},{},[231,236,241,246,251],{"type":19,"tag":71,"props":232,"children":233},{},[234],{"type":25,"value":235},"Don't mix different card variants in a group.",{"type":19,"tag":71,"props":237,"children":238},{},[239],{"type":25,"value":240},"Never use a single card only.",{"type":19,"tag":71,"props":242,"children":243},{},[244],{"type":25,"value":245},"Never repeat content in a group of cards.",{"type":19,"tag":71,"props":247,"children":248},{},[249],{"type":25,"value":250},"Don't overload cards with content.",{"type":19,"tag":71,"props":252,"children":253},{},[254],{"type":25,"value":255},"Don't include other interactive elements, like links, inside the card.",{"type":19,"tag":257,"props":258,"children":259},"hr",{},[],{"type":19,"tag":20,"props":261,"children":263},{"id":262},"variants",[264],{"type":25,"value":265},"Variants",{"type":19,"tag":28,"props":267,"children":268},{},[269],{"type":25,"value":270},"A card has 2 main variants and is styled for its purpose.",{"type":19,"tag":67,"props":272,"children":273},{},[274,279],{"type":19,"tag":71,"props":275,"children":276},{},[277],{"type":25,"value":278},"Promotion Cards, which is used to highlight important content.",{"type":19,"tag":71,"props":280,"children":281},{},[282],{"type":25,"value":283},"Navigation Cards, which is used for larger groups of content.",{"type":19,"tag":55,"props":285,"children":287},{"id":286},"promotion-cards",[288],{"type":25,"value":289},"Promotion cards",{"type":19,"tag":28,"props":291,"children":292},{},[293],{"type":25,"value":294},"Promotion cards provide an eye-catching way to promote links to other pages on your site (or external sites).",{"type":19,"tag":28,"props":296,"children":297},{},[298],{"type":25,"value":299},"Promotion cards stack in a grid when used in a collection.",{"type":19,"tag":28,"props":301,"children":302},{},[303],{"type":25,"value":304},"Promotion cards have 4 variants:",{"type":19,"tag":67,"props":306,"children":307},{},[308,313,318,323],{"type":19,"tag":71,"props":309,"children":310},{},[311],{"type":25,"value":312},"standard",{"type":19,"tag":71,"props":314,"children":315},{},[316],{"type":25,"value":317},"highlight",{"type":19,"tag":71,"props":319,"children":320},{},[321],{"type":25,"value":322},"image full bleed",{"type":19,"tag":71,"props":324,"children":325},{},[326],{"type":25,"value":327},"avatar.",{"type":19,"tag":97,"props":329,"children":330},{"id":312},[331],{"type":25,"value":332},"Standard",{"type":19,"tag":49,"props":334,"children":335},{"id":51,"argsString":52},[],{"type":19,"tag":97,"props":337,"children":338},{"id":317},[339],{"type":25,"value":340},"Highlight",{"type":19,"tag":28,"props":342,"children":343},{},[344],{"type":25,"value":345},"The highlight variant gives the card more visual prominence. Use this to guide users to the content.",{"type":19,"tag":49,"props":347,"children":350},{"id":51,"argsString":348,"theme":349},"graphicElement:Highlight","docsTheme2",[],{"type":19,"tag":97,"props":352,"children":354},{"id":353},"image-full-bleed",[355],{"type":25,"value":356},"Image full bleed",{"type":19,"tag":28,"props":358,"children":359},{},[360],{"type":25,"value":361},"The image full bleed variant gives the option to add a relevant image to grab the user’s attention.",{"type":19,"tag":49,"props":363,"children":364},{"id":51},[],{"type":19,"tag":97,"props":366,"children":368},{"id":367},"avatar",[369],{"type":25,"value":370},"Avatar",{"type":19,"tag":49,"props":372,"children":374},{"id":373},"core-navigation-card--avatar",[],{"type":19,"tag":55,"props":376,"children":378},{"id":377},"navigation-cards",[379],{"type":25,"value":380},"Navigation cards",{"type":19,"tag":28,"props":382,"children":383},{},[384],{"type":25,"value":385},"Navigation cards are useful for displaying and breaking down large groups of content options.",{"type":19,"tag":28,"props":387,"children":388},{},[389],{"type":25,"value":390},"On landing pages, they are used to highlight all the different sections of that site.",{"type":19,"tag":28,"props":392,"children":393},{},[394],{"type":25,"value":395},"Navigation cards fill the full width of the content area. They will always stack vertically.",{"type":19,"tag":28,"props":397,"children":398},{},[399],{"type":25,"value":400},"There are 3 variants of navigation cards:",{"type":19,"tag":67,"props":402,"children":403},{},[404,408,413],{"type":19,"tag":71,"props":405,"children":406},{},[407],{"type":25,"value":312},{"type":19,"tag":71,"props":409,"children":410},{},[411],{"type":25,"value":412},"image inset",{"type":19,"tag":71,"props":414,"children":415},{},[416],{"type":25,"value":417},"heading highlight.",{"type":19,"tag":97,"props":419,"children":421},{"id":420},"standard-1",[422],{"type":25,"value":332},{"type":19,"tag":49,"props":424,"children":426},{"id":425,"argsString":52},"core-navigation-card--nav",[],{"type":19,"tag":97,"props":428,"children":430},{"id":429},"image-inset",[431],{"type":25,"value":432},"Image inset",{"type":19,"tag":28,"props":434,"children":435},{},[436],{"type":25,"value":437},"A related image can increase a card's visual prominence.",{"type":19,"tag":49,"props":439,"children":440},{"id":425},[],{"type":19,"tag":97,"props":442,"children":444},{"id":443},"heading-highlight",[445],{"type":25,"value":446},"Heading highlight",{"type":19,"tag":28,"props":448,"children":449},{},[450],{"type":25,"value":451},"To draw attention to the heading and highlight the content, use a heading highlight.",{"type":19,"tag":49,"props":453,"children":455},{"id":425,"argsString":454},"graphicElement:Heading+highlighted",[],{"type":19,"tag":257,"props":457,"children":458},{},[],{"type":19,"tag":20,"props":460,"children":462},{"id":461},"theming",[463],{"type":25,"value":464},"Theming",{"type":19,"tag":28,"props":466,"children":467},{},[468],{"type":25,"value":469},"Cards use colour for:",{"type":19,"tag":67,"props":471,"children":472},{},[473,478],{"type":19,"tag":71,"props":474,"children":475},{},[476],{"type":25,"value":477},"interaction states",{"type":19,"tag":71,"props":479,"children":480},{},[481],{"type":25,"value":482},"adding visual prominence to some elements.",{"type":19,"tag":484,"props":485,"children":486},"docs-theme-chooser",{},[487,490],{"type":19,"tag":49,"props":488,"children":489},{"id":51,"argsString":348},[],{"type":19,"tag":49,"props":491,"children":492},{"id":425,"argsString":454},[],{"type":19,"tag":28,"props":494,"children":495},{},[496,498,504,506,511],{"type":25,"value":497},"To create your own theme, see ",{"type":19,"tag":499,"props":500,"children":501},"a",{"href":10},[502],{"type":25,"value":503},"theming guidance for designers",{"type":25,"value":505}," or ",{"type":19,"tag":499,"props":507,"children":508},{"href":10},[509],{"type":25,"value":510},"theming guidance for developers",{"type":25,"value":512},".",{"title":10,"searchDepth":514,"depth":514,"links":515},2,[516,522,526],{"id":22,"depth":514,"text":26,"children":517},[518,520,521],{"id":57,"depth":519,"text":60},3,{"id":195,"depth":519,"text":198},{"id":224,"depth":519,"text":227},{"id":262,"depth":514,"text":265,"children":523},[524,525],{"id":286,"depth":519,"text":289},{"id":377,"depth":519,"text":380},{"id":461,"depth":514,"text":464},"markdown","content:design-system:5.components:card.md","content","design-system/5.components/card.md","md",["ShallowRef",533],["ShallowReactive",534],{"/design-system/components/card":535},[536,542],{"_path":537,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":538,"description":539,"layout":13,"label":14,"_type":527,"_id":540,"_source":529,"_file":541,"_extension":531},"/design-system/components/campaign-banner","Campaign banner","The Campaign banner component draws a user's attention to promoted content.","content:design-system:5.components:campaign-banner.md","design-system/5.components/campaign-banner.md",{"_path":543,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":544,"description":545,"layout":13,"label":14,"_type":527,"_id":546,"_source":529,"_file":547,"_extension":531},"/design-system/components/carousel","Carousel","The Carousel component is a set of related cards that users can side-scroll through.","content:design-system:5.components:carousel.md","design-system/5.components/carousel.md",["ShallowRef",549],{},[551,556,797],{"title":552,"_path":553,"icon":554,"layout":555},"Ripple Design System","/","carbon:home","home",{"title":557,"_path":558,"children":559},"Design System","/design-system",[560,576,592,621,655],{"title":561,"_path":562,"children":563},"About","/design-system/about",[564,567,570,573],{"title":565,"_path":566,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":568,"_path":569,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":571,"_path":572,"layout":13},"Support","/design-system/about/getting-support",{"title":574,"_path":575,"layout":13},"Contributing","/design-system/about/contributing",{"title":577,"_path":578,"children":579},"Design","/design-system/design",[580,583,586,589],{"title":581,"_path":582,"layout":13},"Getting started","/design-system/design/getting-started",{"title":584,"_path":585,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":587,"_path":588,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":590,"_path":591,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":593,"_path":594,"children":595},"Develop","/design-system/develop",[596,598,600,603],{"title":581,"_path":597,"layout":13},"/design-system/develop/getting-started",{"title":574,"_path":599,"layout":13},"/design-system/develop/contributing",{"title":601,"_path":602,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":604,"children":605,"layout":13},"/design-system/develop/usage",[606,609,612,615,618],{"title":607,"_path":608,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":610,"_path":611,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":613,"_path":614,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":616,"_path":617,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":619,"_path":620,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":622,"_path":623,"children":624},"Styles","/design-system/styles",[625,628,631,634,637,640,643,646,649,652],{"title":626,"_path":627,"layout":13},"Colour","/design-system/styles/colour",{"title":629,"_path":630,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":632,"_path":633,"layout":13},"Grid","/design-system/styles/grid",{"title":635,"_path":636,"layout":13},"Icons","/design-system/styles/icons",{"title":638,"_path":639,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":641,"_path":642,"layout":13},"Layout","/design-system/styles/layout",{"title":644,"_path":645,"layout":13},"Logo","/design-system/styles/logo",{"title":647,"_path":648,"layout":13},"Motion","/design-system/styles/motion",{"title":650,"_path":651,"layout":13},"Spacing","/design-system/styles/spacing",{"title":653,"_path":654,"layout":13},"Typography","/design-system/styles/typography",{"title":656,"_path":657,"children":658},"Components","/design-system/components",[659,662,665,668,671,674,677,680,683,684,685,686,689,692,695,698,701,704,707,710,713,716,719,722,725,728,731,734,737,740,743,746,749,752,755,758,761,764,767,770,773,776,779,782,785,788,791,794],{"title":660,"_path":661,"layout":13},"Accordion","/design-system/components/accordion",{"title":663,"_path":664,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":666,"_path":667,"layout":13},"Alert","/design-system/components/alert",{"title":669,"_path":670,"layout":13},"Block quote","/design-system/components/block-quote",{"title":672,"_path":673,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":675,"_path":676,"layout":13},"Button","/design-system/components/button",{"title":678,"_path":679,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":681,"_path":682,"layout":13},"Callout","/design-system/components/callout",{"title":538,"_path":537,"layout":13},{"title":11,"_path":7,"layout":13},{"title":544,"_path":543,"layout":13},{"title":687,"_path":688,"layout":13},"Category grid","/design-system/components/category-grid",{"title":690,"_path":691,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":693,"_path":694,"layout":13},"Chip","/design-system/components/chip",{"title":696,"_path":697,"layout":13},"Contact us","/design-system/components/contact-us",{"title":699,"_path":700,"layout":13},"Date input","/design-system/components/date-input",{"title":702,"_path":703,"layout":13},"Detail list","/design-system/components/detail-list",{"title":705,"_path":706,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":708,"_path":709,"layout":13},"File","/design-system/components/file",{"title":711,"_path":712,"layout":13},"Footer","/design-system/components/footer",{"title":714,"_path":715,"layout":13},"Form","/design-system/components/form",{"title":717,"_path":718,"layout":13},"Form alert","/design-system/components/form-alert",{"title":720,"_path":721,"layout":13},"Header","/design-system/components/header",{"title":723,"_path":724,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":726,"_path":727,"layout":13},"Input field","/design-system/components/input-field",{"title":729,"_path":730,"layout":13},"Key dates","/design-system/components/key-dates",{"title":732,"_path":733,"layout":13},"Media","/design-system/components/media",{"title":735,"_path":736,"layout":13},"Media embed","/design-system/components/media-embed",{"title":738,"_path":739,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":741,"_path":742,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":744,"_path":745,"layout":13},"Option button","/design-system/components/option-button",{"title":747,"_path":748,"layout":13},"Page action","/design-system/components/page-action",{"title":750,"_path":751,"layout":13},"Pagination","/design-system/components/pagination",{"title":753,"_path":754,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":756,"_path":757,"layout":13},"Profile","/design-system/components/profile",{"title":759,"_path":760,"layout":13},"Radio button","/design-system/components/radio-button",{"title":762,"_path":763,"layout":13},"Related links","/design-system/components/related-links",{"title":765,"_path":766,"layout":13},"Results listing","/design-system/components/results-listing",{"title":768,"_path":769,"layout":13},"Search bar","/design-system/components/search-bar",{"title":771,"_path":772,"layout":13},"Skip link","/design-system/components/skip-link",{"title":774,"_path":775,"layout":13},"Social share","/design-system/components/social-share",{"title":777,"_path":778,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":780,"_path":781,"layout":13},"Table","/design-system/components/table",{"title":783,"_path":784,"layout":13},"Tabs","/design-system/components/tabs",{"title":786,"_path":787,"layout":13},"Tag","/design-system/components/tag",{"title":789,"_path":790,"layout":13},"Text area","/design-system/components/text-area",{"title":792,"_path":793,"layout":13},"Timeline","/design-system/components/timeline",{"title":795,"_path":796,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":798,"_path":799,"children":800,"layout":13},"Ripple Framework","/framework",[801,802,820,842],{"title":798,"_path":799,"layout":13},{"title":803,"_path":804,"children":805},"Key Concepts","/framework/key-concepts",[806,808,811,814,817],{"title":613,"_path":807,"layout":13},"/framework/key-concepts/nuxt",{"title":809,"_path":810,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":812,"_path":813,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":815,"_path":816,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":818,"_path":819,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":821,"_path":822,"children":823},"Guides","/framework/guides",[824,827,830,833,836,839],{"title":825,"_path":826,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":828,"_path":829,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":831,"_path":832,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":834,"_path":835,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":837,"_path":838,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":840,"_path":841,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":843,"_path":844,"layout":13},"Core modules","/framework/core-modules",["Reactive",846],["Set"],["Reactive",848],{"module-navigation":849},null,true,"/design-system/components/card/",1714695653996]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/carousel/_payload.json b/design-system/components/carousel/_payload.json
index d7345bdba1..7cd433232a 100644
--- a/design-system/components/carousel/_payload.json
+++ b/design-system/components/carousel/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":104,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695153033]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":104,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695651277]
\ No newline at end of file
diff --git a/design-system/components/carousel/index.html b/design-system/components/carousel/index.html
index 29982a6a61..c0186162dd 100644
--- a/design-system/components/carousel/index.html
+++ b/design-system/components/carousel/index.html
@@ -28,63 +28,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -96,8 +96,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Carousel</h1><p class="rpl-type-p-large" data-v-3163c6df>The Carousel component is a set of related cards that users can side-scroll through.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a carousel to let users browse through a set of up to 9 cards with pagination controls.<!--]--></p><p><!--[-->The content in the carousel should be related in some way. This helps users to find related and relevant content.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-card-carousel--breakpoints&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-card-carousel--breakpoints&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use a combination of promotion cards.<!--]--></li><li><!--[-->Use when wanting to display a collection of cards with related content.<!--]--></li><li><!--[-->Add to any page type.<!--]--></li><li><!--[-->Include with an accompanying title to give context to users.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t use more than 9 cards or fewer than 3.<!--]--></li><li><!--[-->Don&#39;t use with navigation or other card types.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->The carousel adopts its theming from the card and pagination components.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-card-carousel--breakpoints&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-card-carousel--breakpoints&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/carousel.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/carousel/_payload.json">[{"state":1,"once":463,"_errors":465,"serverRendered":468,"path":469,"prerenderedAt":470},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":152,"$sdd-globals":168,"$sdd-navigation":170},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/carousel":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":147,"_id":148,"_source":149,"_file":150,"_extension":151},"/design-system/components/carousel","components",false,"","Carousel","The Carousel component is a set of related cards that users can side-scroll through.","page","Core",{"type":16,"children":17,"toc":138},"root",[18,27,33,38,43,50,75,81,94,98,104,109,116],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use a carousel to let users browse through a set of up to 9 cards with pagination controls.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"The content in the carousel should be related in some way. This helps users to find related and relevant content.",{"type":19,"tag":39,"props":40,"children":42},"docs-example",{"id":41},"core-containers-card-carousel--breakpoints",[],{"type":19,"tag":44,"props":45,"children":47},"h3",{"id":46},"when-and-how-to-use",[48],{"type":25,"value":49},"When and how to use",{"type":19,"tag":51,"props":52,"children":53},"ul",{},[54,60,65,70],{"type":19,"tag":55,"props":56,"children":57},"li",{},[58],{"type":25,"value":59},"Use a combination of promotion cards.",{"type":19,"tag":55,"props":61,"children":62},{},[63],{"type":25,"value":64},"Use when wanting to display a collection of cards with related content.",{"type":19,"tag":55,"props":66,"children":67},{},[68],{"type":25,"value":69},"Add to any page type.",{"type":19,"tag":55,"props":71,"children":72},{},[73],{"type":25,"value":74},"Include with an accompanying title to give context to users.",{"type":19,"tag":44,"props":76,"children":78},{"id":77},"when-and-how-not-to-use",[79],{"type":25,"value":80},"When and how not to use",{"type":19,"tag":51,"props":82,"children":83},{},[84,89],{"type":19,"tag":55,"props":85,"children":86},{},[87],{"type":25,"value":88},"Don’t use more than 9 cards or fewer than 3.",{"type":19,"tag":55,"props":90,"children":91},{},[92],{"type":25,"value":93},"Don't use with navigation or other card types.",{"type":19,"tag":95,"props":96,"children":97},"hr",{},[],{"type":19,"tag":20,"props":99,"children":101},{"id":100},"theming",[102],{"type":25,"value":103},"Theming",{"type":19,"tag":28,"props":105,"children":106},{},[107],{"type":25,"value":108},"The carousel adopts its theming from the card and pagination components.",{"type":19,"tag":110,"props":111,"children":112},"docs-theme-chooser",{},[113],{"type":19,"tag":39,"props":114,"children":115},{"id":41},[],{"type":19,"tag":28,"props":117,"children":118},{},[119,121,128,130,136],{"type":25,"value":120},"To create your own theme see ",{"type":19,"tag":122,"props":123,"children":125},"a",{"href":124},"/design-system/design/theming-guidance-for-designers",[126],{"type":25,"value":127},"theming guidance for designers",{"type":25,"value":129}," or ",{"type":19,"tag":122,"props":131,"children":133},{"href":132},"/design-system/develop/theming",[134],{"type":25,"value":135},"theming guidance for developers",{"type":25,"value":137},".",{"title":10,"searchDepth":139,"depth":139,"links":140},2,[141,146],{"id":22,"depth":139,"text":26,"children":142},[143,145],{"id":46,"depth":144,"text":49},3,{"id":77,"depth":144,"text":80},{"id":100,"depth":139,"text":103},"markdown","content:design-system:5.components:carousel.md","content","design-system/5.components/carousel.md","md",["ShallowRef",153],["ShallowReactive",154],{"/design-system/components/carousel":155},[156,162],{"_path":157,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":158,"description":159,"layout":13,"label":14,"_type":147,"_id":160,"_source":149,"_file":161,"_extension":151},"/design-system/components/card","Card","The Card component shows content about another page, event or topic. They help users find relevant information.","content:design-system:5.components:card.md","design-system/5.components/card.md",{"_path":163,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":164,"description":165,"layout":13,"label":14,"_type":147,"_id":166,"_source":149,"_file":167,"_extension":151},"/design-system/components/category-grid","Category grid","The Category grid component shows multiple cards laid out in a grid, allowing users to browse a collection of categories.","content:design-system:5.components:category-grid.md","design-system/5.components/category-grid.md",["ShallowRef",169],{},[171,176,415],{"title":172,"_path":173,"icon":174,"layout":175},"Ripple Design System","/","carbon:home","home",{"title":177,"_path":178,"children":179},"Design System","/design-system",[180,196,211,239,273],{"title":181,"_path":182,"children":183},"About","/design-system/about",[184,187,190,193],{"title":185,"_path":186,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":188,"_path":189,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":191,"_path":192,"layout":13},"Support","/design-system/about/getting-support",{"title":194,"_path":195,"layout":13},"Contributing","/design-system/about/contributing",{"title":197,"_path":198,"children":199},"Design","/design-system/design",[200,203,206,209],{"title":201,"_path":202,"layout":13},"Getting started","/design-system/design/getting-started",{"title":204,"_path":205,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":207,"_path":208,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":210,"_path":124,"layout":13},"Theming guidance for designers",{"title":212,"_path":213,"children":214},"Develop","/design-system/develop",[215,217,219,221],{"title":201,"_path":216,"layout":13},"/design-system/develop/getting-started",{"title":194,"_path":218,"layout":13},"/design-system/develop/contributing",{"title":220,"_path":132,"layout":13},"Theme and brand application",{"title":26,"_path":222,"children":223,"layout":13},"/design-system/develop/usage",[224,227,230,233,236],{"title":225,"_path":226,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":228,"_path":229,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":231,"_path":232,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":234,"_path":235,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":237,"_path":238,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":240,"_path":241,"children":242},"Styles","/design-system/styles",[243,246,249,252,255,258,261,264,267,270],{"title":244,"_path":245,"layout":13},"Colour","/design-system/styles/colour",{"title":247,"_path":248,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":250,"_path":251,"layout":13},"Grid","/design-system/styles/grid",{"title":253,"_path":254,"layout":13},"Icons","/design-system/styles/icons",{"title":256,"_path":257,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":259,"_path":260,"layout":13},"Layout","/design-system/styles/layout",{"title":262,"_path":263,"layout":13},"Logo","/design-system/styles/logo",{"title":265,"_path":266,"layout":13},"Motion","/design-system/styles/motion",{"title":268,"_path":269,"layout":13},"Spacing","/design-system/styles/spacing",{"title":271,"_path":272,"layout":13},"Typography","/design-system/styles/typography",{"title":274,"_path":275,"children":276},"Components","/design-system/components",[277,280,283,286,289,292,295,298,301,304,305,306,307,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412],{"title":278,"_path":279,"layout":13},"Accordion","/design-system/components/accordion",{"title":281,"_path":282,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":284,"_path":285,"layout":13},"Alert","/design-system/components/alert",{"title":287,"_path":288,"layout":13},"Block quote","/design-system/components/block-quote",{"title":290,"_path":291,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":293,"_path":294,"layout":13},"Button","/design-system/components/button",{"title":296,"_path":297,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":299,"_path":300,"layout":13},"Callout","/design-system/components/callout",{"title":302,"_path":303,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":158,"_path":157,"layout":13},{"title":11,"_path":7,"layout":13},{"title":164,"_path":163,"layout":13},{"title":308,"_path":309,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":311,"_path":312,"layout":13},"Chip","/design-system/components/chip",{"title":314,"_path":315,"layout":13},"Contact us","/design-system/components/contact-us",{"title":317,"_path":318,"layout":13},"Date input","/design-system/components/date-input",{"title":320,"_path":321,"layout":13},"Detail list","/design-system/components/detail-list",{"title":323,"_path":324,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":326,"_path":327,"layout":13},"File","/design-system/components/file",{"title":329,"_path":330,"layout":13},"Footer","/design-system/components/footer",{"title":332,"_path":333,"layout":13},"Form","/design-system/components/form",{"title":335,"_path":336,"layout":13},"Form alert","/design-system/components/form-alert",{"title":338,"_path":339,"layout":13},"Header","/design-system/components/header",{"title":341,"_path":342,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":344,"_path":345,"layout":13},"Input field","/design-system/components/input-field",{"title":347,"_path":348,"layout":13},"Key dates","/design-system/components/key-dates",{"title":350,"_path":351,"layout":13},"Media","/design-system/components/media",{"title":353,"_path":354,"layout":13},"Media embed","/design-system/components/media-embed",{"title":356,"_path":357,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":359,"_path":360,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":362,"_path":363,"layout":13},"Option button","/design-system/components/option-button",{"title":365,"_path":366,"layout":13},"Page action","/design-system/components/page-action",{"title":368,"_path":369,"layout":13},"Pagination","/design-system/components/pagination",{"title":371,"_path":372,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":374,"_path":375,"layout":13},"Profile","/design-system/components/profile",{"title":377,"_path":378,"layout":13},"Radio button","/design-system/components/radio-button",{"title":380,"_path":381,"layout":13},"Related links","/design-system/components/related-links",{"title":383,"_path":384,"layout":13},"Results listing","/design-system/components/results-listing",{"title":386,"_path":387,"layout":13},"Search bar","/design-system/components/search-bar",{"title":389,"_path":390,"layout":13},"Skip link","/design-system/components/skip-link",{"title":392,"_path":393,"layout":13},"Social share","/design-system/components/social-share",{"title":395,"_path":396,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":398,"_path":399,"layout":13},"Table","/design-system/components/table",{"title":401,"_path":402,"layout":13},"Tabs","/design-system/components/tabs",{"title":404,"_path":405,"layout":13},"Tag","/design-system/components/tag",{"title":407,"_path":408,"layout":13},"Text area","/design-system/components/text-area",{"title":410,"_path":411,"layout":13},"Timeline","/design-system/components/timeline",{"title":413,"_path":414,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":416,"_path":417,"children":418,"layout":13},"Ripple Framework","/framework",[419,420,438,460],{"title":416,"_path":417,"layout":13},{"title":421,"_path":422,"children":423},"Key Concepts","/framework/key-concepts",[424,426,429,432,435],{"title":231,"_path":425,"layout":13},"/framework/key-concepts/nuxt",{"title":427,"_path":428,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":430,"_path":431,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":433,"_path":434,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":436,"_path":437,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":439,"_path":440,"children":441},"Guides","/framework/guides",[442,445,448,451,454,457],{"title":443,"_path":444,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":446,"_path":447,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":449,"_path":450,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":452,"_path":453,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":455,"_path":456,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":458,"_path":459,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":461,"_path":462,"layout":13},"Core modules","/framework/core-modules",["Reactive",464],["Set"],["Reactive",466],{"module-navigation":467},null,true,"/design-system/components/carousel/",1714695156989]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Carousel</h1><p class="rpl-type-p-large" data-v-3163c6df>The Carousel component is a set of related cards that users can side-scroll through.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a carousel to let users browse through a set of up to 9 cards with pagination controls.<!--]--></p><p><!--[-->The content in the carousel should be related in some way. This helps users to find related and relevant content.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-card-carousel--breakpoints&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-card-carousel--breakpoints&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use a combination of promotion cards.<!--]--></li><li><!--[-->Use when wanting to display a collection of cards with related content.<!--]--></li><li><!--[-->Add to any page type.<!--]--></li><li><!--[-->Include with an accompanying title to give context to users.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t use more than 9 cards or fewer than 3.<!--]--></li><li><!--[-->Don&#39;t use with navigation or other card types.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->The carousel adopts its theming from the card and pagination components.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-card-carousel--breakpoints&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-card-carousel--breakpoints&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/carousel.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/carousel/_payload.json">[{"state":1,"once":463,"_errors":465,"serverRendered":468,"path":469,"prerenderedAt":470},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":152,"$sdd-globals":168,"$sdd-navigation":170},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/carousel":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":147,"_id":148,"_source":149,"_file":150,"_extension":151},"/design-system/components/carousel","components",false,"","Carousel","The Carousel component is a set of related cards that users can side-scroll through.","page","Core",{"type":16,"children":17,"toc":138},"root",[18,27,33,38,43,50,75,81,94,98,104,109,116],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use a carousel to let users browse through a set of up to 9 cards with pagination controls.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"The content in the carousel should be related in some way. This helps users to find related and relevant content.",{"type":19,"tag":39,"props":40,"children":42},"docs-example",{"id":41},"core-containers-card-carousel--breakpoints",[],{"type":19,"tag":44,"props":45,"children":47},"h3",{"id":46},"when-and-how-to-use",[48],{"type":25,"value":49},"When and how to use",{"type":19,"tag":51,"props":52,"children":53},"ul",{},[54,60,65,70],{"type":19,"tag":55,"props":56,"children":57},"li",{},[58],{"type":25,"value":59},"Use a combination of promotion cards.",{"type":19,"tag":55,"props":61,"children":62},{},[63],{"type":25,"value":64},"Use when wanting to display a collection of cards with related content.",{"type":19,"tag":55,"props":66,"children":67},{},[68],{"type":25,"value":69},"Add to any page type.",{"type":19,"tag":55,"props":71,"children":72},{},[73],{"type":25,"value":74},"Include with an accompanying title to give context to users.",{"type":19,"tag":44,"props":76,"children":78},{"id":77},"when-and-how-not-to-use",[79],{"type":25,"value":80},"When and how not to use",{"type":19,"tag":51,"props":82,"children":83},{},[84,89],{"type":19,"tag":55,"props":85,"children":86},{},[87],{"type":25,"value":88},"Don’t use more than 9 cards or fewer than 3.",{"type":19,"tag":55,"props":90,"children":91},{},[92],{"type":25,"value":93},"Don't use with navigation or other card types.",{"type":19,"tag":95,"props":96,"children":97},"hr",{},[],{"type":19,"tag":20,"props":99,"children":101},{"id":100},"theming",[102],{"type":25,"value":103},"Theming",{"type":19,"tag":28,"props":105,"children":106},{},[107],{"type":25,"value":108},"The carousel adopts its theming from the card and pagination components.",{"type":19,"tag":110,"props":111,"children":112},"docs-theme-chooser",{},[113],{"type":19,"tag":39,"props":114,"children":115},{"id":41},[],{"type":19,"tag":28,"props":117,"children":118},{},[119,121,128,130,136],{"type":25,"value":120},"To create your own theme see ",{"type":19,"tag":122,"props":123,"children":125},"a",{"href":124},"/design-system/design/theming-guidance-for-designers",[126],{"type":25,"value":127},"theming guidance for designers",{"type":25,"value":129}," or ",{"type":19,"tag":122,"props":131,"children":133},{"href":132},"/design-system/develop/theming",[134],{"type":25,"value":135},"theming guidance for developers",{"type":25,"value":137},".",{"title":10,"searchDepth":139,"depth":139,"links":140},2,[141,146],{"id":22,"depth":139,"text":26,"children":142},[143,145],{"id":46,"depth":144,"text":49},3,{"id":77,"depth":144,"text":80},{"id":100,"depth":139,"text":103},"markdown","content:design-system:5.components:carousel.md","content","design-system/5.components/carousel.md","md",["ShallowRef",153],["ShallowReactive",154],{"/design-system/components/carousel":155},[156,162],{"_path":157,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":158,"description":159,"layout":13,"label":14,"_type":147,"_id":160,"_source":149,"_file":161,"_extension":151},"/design-system/components/card","Card","The Card component shows content about another page, event or topic. They help users find relevant information.","content:design-system:5.components:card.md","design-system/5.components/card.md",{"_path":163,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":164,"description":165,"layout":13,"label":14,"_type":147,"_id":166,"_source":149,"_file":167,"_extension":151},"/design-system/components/category-grid","Category grid","The Category grid component shows multiple cards laid out in a grid, allowing users to browse a collection of categories.","content:design-system:5.components:category-grid.md","design-system/5.components/category-grid.md",["ShallowRef",169],{},[171,176,415],{"title":172,"_path":173,"icon":174,"layout":175},"Ripple Design System","/","carbon:home","home",{"title":177,"_path":178,"children":179},"Design System","/design-system",[180,196,211,239,273],{"title":181,"_path":182,"children":183},"About","/design-system/about",[184,187,190,193],{"title":185,"_path":186,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":188,"_path":189,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":191,"_path":192,"layout":13},"Support","/design-system/about/getting-support",{"title":194,"_path":195,"layout":13},"Contributing","/design-system/about/contributing",{"title":197,"_path":198,"children":199},"Design","/design-system/design",[200,203,206,209],{"title":201,"_path":202,"layout":13},"Getting started","/design-system/design/getting-started",{"title":204,"_path":205,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":207,"_path":208,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":210,"_path":124,"layout":13},"Theming guidance for designers",{"title":212,"_path":213,"children":214},"Develop","/design-system/develop",[215,217,219,221],{"title":201,"_path":216,"layout":13},"/design-system/develop/getting-started",{"title":194,"_path":218,"layout":13},"/design-system/develop/contributing",{"title":220,"_path":132,"layout":13},"Theme and brand application",{"title":26,"_path":222,"children":223,"layout":13},"/design-system/develop/usage",[224,227,230,233,236],{"title":225,"_path":226,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":228,"_path":229,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":231,"_path":232,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":234,"_path":235,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":237,"_path":238,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":240,"_path":241,"children":242},"Styles","/design-system/styles",[243,246,249,252,255,258,261,264,267,270],{"title":244,"_path":245,"layout":13},"Colour","/design-system/styles/colour",{"title":247,"_path":248,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":250,"_path":251,"layout":13},"Grid","/design-system/styles/grid",{"title":253,"_path":254,"layout":13},"Icons","/design-system/styles/icons",{"title":256,"_path":257,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":259,"_path":260,"layout":13},"Layout","/design-system/styles/layout",{"title":262,"_path":263,"layout":13},"Logo","/design-system/styles/logo",{"title":265,"_path":266,"layout":13},"Motion","/design-system/styles/motion",{"title":268,"_path":269,"layout":13},"Spacing","/design-system/styles/spacing",{"title":271,"_path":272,"layout":13},"Typography","/design-system/styles/typography",{"title":274,"_path":275,"children":276},"Components","/design-system/components",[277,280,283,286,289,292,295,298,301,304,305,306,307,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412],{"title":278,"_path":279,"layout":13},"Accordion","/design-system/components/accordion",{"title":281,"_path":282,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":284,"_path":285,"layout":13},"Alert","/design-system/components/alert",{"title":287,"_path":288,"layout":13},"Block quote","/design-system/components/block-quote",{"title":290,"_path":291,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":293,"_path":294,"layout":13},"Button","/design-system/components/button",{"title":296,"_path":297,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":299,"_path":300,"layout":13},"Callout","/design-system/components/callout",{"title":302,"_path":303,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":158,"_path":157,"layout":13},{"title":11,"_path":7,"layout":13},{"title":164,"_path":163,"layout":13},{"title":308,"_path":309,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":311,"_path":312,"layout":13},"Chip","/design-system/components/chip",{"title":314,"_path":315,"layout":13},"Contact us","/design-system/components/contact-us",{"title":317,"_path":318,"layout":13},"Date input","/design-system/components/date-input",{"title":320,"_path":321,"layout":13},"Detail list","/design-system/components/detail-list",{"title":323,"_path":324,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":326,"_path":327,"layout":13},"File","/design-system/components/file",{"title":329,"_path":330,"layout":13},"Footer","/design-system/components/footer",{"title":332,"_path":333,"layout":13},"Form","/design-system/components/form",{"title":335,"_path":336,"layout":13},"Form alert","/design-system/components/form-alert",{"title":338,"_path":339,"layout":13},"Header","/design-system/components/header",{"title":341,"_path":342,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":344,"_path":345,"layout":13},"Input field","/design-system/components/input-field",{"title":347,"_path":348,"layout":13},"Key dates","/design-system/components/key-dates",{"title":350,"_path":351,"layout":13},"Media","/design-system/components/media",{"title":353,"_path":354,"layout":13},"Media embed","/design-system/components/media-embed",{"title":356,"_path":357,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":359,"_path":360,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":362,"_path":363,"layout":13},"Option button","/design-system/components/option-button",{"title":365,"_path":366,"layout":13},"Page action","/design-system/components/page-action",{"title":368,"_path":369,"layout":13},"Pagination","/design-system/components/pagination",{"title":371,"_path":372,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":374,"_path":375,"layout":13},"Profile","/design-system/components/profile",{"title":377,"_path":378,"layout":13},"Radio button","/design-system/components/radio-button",{"title":380,"_path":381,"layout":13},"Related links","/design-system/components/related-links",{"title":383,"_path":384,"layout":13},"Results listing","/design-system/components/results-listing",{"title":386,"_path":387,"layout":13},"Search bar","/design-system/components/search-bar",{"title":389,"_path":390,"layout":13},"Skip link","/design-system/components/skip-link",{"title":392,"_path":393,"layout":13},"Social share","/design-system/components/social-share",{"title":395,"_path":396,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":398,"_path":399,"layout":13},"Table","/design-system/components/table",{"title":401,"_path":402,"layout":13},"Tabs","/design-system/components/tabs",{"title":404,"_path":405,"layout":13},"Tag","/design-system/components/tag",{"title":407,"_path":408,"layout":13},"Text area","/design-system/components/text-area",{"title":410,"_path":411,"layout":13},"Timeline","/design-system/components/timeline",{"title":413,"_path":414,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":416,"_path":417,"children":418,"layout":13},"Ripple Framework","/framework",[419,420,438,460],{"title":416,"_path":417,"layout":13},{"title":421,"_path":422,"children":423},"Key Concepts","/framework/key-concepts",[424,426,429,432,435],{"title":231,"_path":425,"layout":13},"/framework/key-concepts/nuxt",{"title":427,"_path":428,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":430,"_path":431,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":433,"_path":434,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":436,"_path":437,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":439,"_path":440,"children":441},"Guides","/framework/guides",[442,445,448,451,454,457],{"title":443,"_path":444,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":446,"_path":447,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":449,"_path":450,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":452,"_path":453,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":455,"_path":456,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":458,"_path":459,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":461,"_path":462,"layout":13},"Core modules","/framework/core-modules",["Reactive",464],["Set"],["Reactive",466],{"module-navigation":467},null,true,"/design-system/components/carousel/",1714695655022]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/category-grid/_payload.json b/design-system/components/category-grid/_payload.json
index 49c8e0effd..2d3ea0f302 100644
--- a/design-system/components/category-grid/_payload.json
+++ b/design-system/components/category-grid/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":104,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695153194]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":104,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695651412]
\ No newline at end of file
diff --git a/design-system/components/category-grid/index.html b/design-system/components/category-grid/index.html
index c0a821150d..5f420b553f 100644
--- a/design-system/components/category-grid/index.html
+++ b/design-system/components/category-grid/index.html
@@ -28,63 +28,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -96,8 +96,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Category grid</h1><p class="rpl-type-p-large" data-v-3163c6df>The Category grid component shows multiple cards laid out in a grid, allowing users to browse a collection of categories.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a category grid to help users browse a range of categories and content. Each card in a collection acts as a link to more information.<!--]--></p><p><!--[-->A category grid uses the text link style to indicate clickable elements. An accompanying media item, such as an icon or pictogram, is used to support the content for each category.<!--]--></p><p><!--[-->The media item you choose must be directly relevant to the card’s content, to support and reinforce the user’s understanding. The icon or pictogram should clearly show the difference in topics and should be easily identifiable.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--category-grid&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--category-grid&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use as a collection of cards only.<!--]--></li><li><!--[-->Include clear and concise content.<!--]--></li><li><!--[-->Use with icons or pictograms.<!--]--></li><li><!--[-->Be careful not to include too many cards.<!--]--></li><li><!--[-->Always use unique media items per card.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t use a single card only.<!--]--></li><li><!--[-->Don’t repeat content in the same a group of cards.<!--]--></li><li><!--[-->Don’t overload with content.<!--]--></li><li><!--[-->Don’t include with other interactive elements like links.<!--]--></li><li><!--[-->Don’t use without a media item.<!--]--></li><li><!--[-->Don’t use on pages with a sidebar.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->The category grid uses colour to indicate interaction states.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--category-grid&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--category-grid&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/category-grid.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/category-grid/_payload.json">[{"state":1,"once":493,"_errors":495,"serverRendered":498,"path":7,"prerenderedAt":499},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":182,"$sdd-globals":198,"$sdd-navigation":200},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/category-grid":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":177,"_id":178,"_source":179,"_file":180,"_extension":181},"/design-system/components/category-grid","components",false,"","Category grid","The Category grid component shows multiple cards laid out in a grid, allowing users to browse a collection of categories.","page","Core",{"type":16,"children":17,"toc":168},"root",[18,27,33,38,43,48,55,85,91,124,128,134,139,146],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use a category grid to help users browse a range of categories and content. Each card in a collection acts as a link to more information.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"A category grid uses the text link style to indicate clickable elements. An accompanying media item, such as an icon or pictogram, is used to support the content for each category.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"The media item you choose must be directly relevant to the card’s content, to support and reinforce the user’s understanding. The icon or pictogram should clearly show the difference in topics and should be easily identifiable.",{"type":19,"tag":44,"props":45,"children":47},"docs-example",{"id":46},"core-navigation-card--category-grid",[],{"type":19,"tag":49,"props":50,"children":52},"h3",{"id":51},"when-and-how-to-use",[53],{"type":25,"value":54},"When and how to use",{"type":19,"tag":56,"props":57,"children":58},"ul",{},[59,65,70,75,80],{"type":19,"tag":60,"props":61,"children":62},"li",{},[63],{"type":25,"value":64},"Use as a collection of cards only.",{"type":19,"tag":60,"props":66,"children":67},{},[68],{"type":25,"value":69},"Include clear and concise content.",{"type":19,"tag":60,"props":71,"children":72},{},[73],{"type":25,"value":74},"Use with icons or pictograms.",{"type":19,"tag":60,"props":76,"children":77},{},[78],{"type":25,"value":79},"Be careful not to include too many cards.",{"type":19,"tag":60,"props":81,"children":82},{},[83],{"type":25,"value":84},"Always use unique media items per card.",{"type":19,"tag":49,"props":86,"children":88},{"id":87},"when-and-how-not-to-use",[89],{"type":25,"value":90},"When and how not to use",{"type":19,"tag":56,"props":92,"children":93},{},[94,99,104,109,114,119],{"type":19,"tag":60,"props":95,"children":96},{},[97],{"type":25,"value":98},"Don’t use a single card only.",{"type":19,"tag":60,"props":100,"children":101},{},[102],{"type":25,"value":103},"Don’t repeat content in the same a group of cards.",{"type":19,"tag":60,"props":105,"children":106},{},[107],{"type":25,"value":108},"Don’t overload with content.",{"type":19,"tag":60,"props":110,"children":111},{},[112],{"type":25,"value":113},"Don’t include with other interactive elements like links.",{"type":19,"tag":60,"props":115,"children":116},{},[117],{"type":25,"value":118},"Don’t use without a media item.",{"type":19,"tag":60,"props":120,"children":121},{},[122],{"type":25,"value":123},"Don’t use on pages with a sidebar.",{"type":19,"tag":125,"props":126,"children":127},"hr",{},[],{"type":19,"tag":20,"props":129,"children":131},{"id":130},"theming",[132],{"type":25,"value":133},"Theming",{"type":19,"tag":28,"props":135,"children":136},{},[137],{"type":25,"value":138},"The category grid uses colour to indicate interaction states.",{"type":19,"tag":140,"props":141,"children":142},"docs-theme-chooser",{},[143],{"type":19,"tag":44,"props":144,"children":145},{"id":46},[],{"type":19,"tag":28,"props":147,"children":148},{},[149,151,158,160,166],{"type":25,"value":150},"To create your own theme see ",{"type":19,"tag":152,"props":153,"children":155},"a",{"href":154},"/design-system/design/theming-guidance-for-designers",[156],{"type":25,"value":157},"theming guidance for designers",{"type":25,"value":159}," or ",{"type":19,"tag":152,"props":161,"children":163},{"href":162},"/design-system/develop/theming",[164],{"type":25,"value":165},"theming guidance for developers",{"type":25,"value":167},".",{"title":10,"searchDepth":169,"depth":169,"links":170},2,[171,176],{"id":22,"depth":169,"text":26,"children":172},[173,175],{"id":51,"depth":174,"text":54},3,{"id":87,"depth":174,"text":90},{"id":130,"depth":169,"text":133},"markdown","content:design-system:5.components:category-grid.md","content","design-system/5.components/category-grid.md","md",["ShallowRef",183],["ShallowReactive",184],{"/design-system/components/category-grid":185},[186,192],{"_path":187,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":188,"description":189,"layout":13,"label":14,"_type":177,"_id":190,"_source":179,"_file":191,"_extension":181},"/design-system/components/carousel","Carousel","The Carousel component is a set of related cards that users can side-scroll through.","content:design-system:5.components:carousel.md","design-system/5.components/carousel.md",{"_path":193,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":194,"description":195,"layout":13,"label":14,"_type":177,"_id":196,"_source":179,"_file":197,"_extension":181},"/design-system/components/checkbox","Checkbox","The Checkbox component lets users select one or more options from a list.","content:design-system:5.components:checkbox.md","design-system/5.components/checkbox.md",["ShallowRef",199],{},[201,206,445],{"title":202,"_path":203,"icon":204,"layout":205},"Ripple Design System","/","carbon:home","home",{"title":207,"_path":208,"children":209},"Design System","/design-system",[210,226,241,269,303],{"title":211,"_path":212,"children":213},"About","/design-system/about",[214,217,220,223],{"title":215,"_path":216,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":218,"_path":219,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":221,"_path":222,"layout":13},"Support","/design-system/about/getting-support",{"title":224,"_path":225,"layout":13},"Contributing","/design-system/about/contributing",{"title":227,"_path":228,"children":229},"Design","/design-system/design",[230,233,236,239],{"title":231,"_path":232,"layout":13},"Getting started","/design-system/design/getting-started",{"title":234,"_path":235,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":237,"_path":238,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":240,"_path":154,"layout":13},"Theming guidance for designers",{"title":242,"_path":243,"children":244},"Develop","/design-system/develop",[245,247,249,251],{"title":231,"_path":246,"layout":13},"/design-system/develop/getting-started",{"title":224,"_path":248,"layout":13},"/design-system/develop/contributing",{"title":250,"_path":162,"layout":13},"Theme and brand application",{"title":26,"_path":252,"children":253,"layout":13},"/design-system/develop/usage",[254,257,260,263,266],{"title":255,"_path":256,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":258,"_path":259,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":261,"_path":262,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":264,"_path":265,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":267,"_path":268,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":270,"_path":271,"children":272},"Styles","/design-system/styles",[273,276,279,282,285,288,291,294,297,300],{"title":274,"_path":275,"layout":13},"Colour","/design-system/styles/colour",{"title":277,"_path":278,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":280,"_path":281,"layout":13},"Grid","/design-system/styles/grid",{"title":283,"_path":284,"layout":13},"Icons","/design-system/styles/icons",{"title":286,"_path":287,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":289,"_path":290,"layout":13},"Layout","/design-system/styles/layout",{"title":292,"_path":293,"layout":13},"Logo","/design-system/styles/logo",{"title":295,"_path":296,"layout":13},"Motion","/design-system/styles/motion",{"title":298,"_path":299,"layout":13},"Spacing","/design-system/styles/spacing",{"title":301,"_path":302,"layout":13},"Typography","/design-system/styles/typography",{"title":304,"_path":305,"children":306},"Components","/design-system/components",[307,310,313,316,319,322,325,328,331,334,337,338,339,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442],{"title":308,"_path":309,"layout":13},"Accordion","/design-system/components/accordion",{"title":311,"_path":312,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":314,"_path":315,"layout":13},"Alert","/design-system/components/alert",{"title":317,"_path":318,"layout":13},"Block quote","/design-system/components/block-quote",{"title":320,"_path":321,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":323,"_path":324,"layout":13},"Button","/design-system/components/button",{"title":326,"_path":327,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":329,"_path":330,"layout":13},"Callout","/design-system/components/callout",{"title":332,"_path":333,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":335,"_path":336,"layout":13},"Card","/design-system/components/card",{"title":188,"_path":187,"layout":13},{"title":11,"_path":7,"layout":13},{"title":194,"_path":193,"layout":13},{"title":341,"_path":342,"layout":13},"Chip","/design-system/components/chip",{"title":344,"_path":345,"layout":13},"Contact us","/design-system/components/contact-us",{"title":347,"_path":348,"layout":13},"Date input","/design-system/components/date-input",{"title":350,"_path":351,"layout":13},"Detail list","/design-system/components/detail-list",{"title":353,"_path":354,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":356,"_path":357,"layout":13},"File","/design-system/components/file",{"title":359,"_path":360,"layout":13},"Footer","/design-system/components/footer",{"title":362,"_path":363,"layout":13},"Form","/design-system/components/form",{"title":365,"_path":366,"layout":13},"Form alert","/design-system/components/form-alert",{"title":368,"_path":369,"layout":13},"Header","/design-system/components/header",{"title":371,"_path":372,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":374,"_path":375,"layout":13},"Input field","/design-system/components/input-field",{"title":377,"_path":378,"layout":13},"Key dates","/design-system/components/key-dates",{"title":380,"_path":381,"layout":13},"Media","/design-system/components/media",{"title":383,"_path":384,"layout":13},"Media embed","/design-system/components/media-embed",{"title":386,"_path":387,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":389,"_path":390,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":392,"_path":393,"layout":13},"Option button","/design-system/components/option-button",{"title":395,"_path":396,"layout":13},"Page action","/design-system/components/page-action",{"title":398,"_path":399,"layout":13},"Pagination","/design-system/components/pagination",{"title":401,"_path":402,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":404,"_path":405,"layout":13},"Profile","/design-system/components/profile",{"title":407,"_path":408,"layout":13},"Radio button","/design-system/components/radio-button",{"title":410,"_path":411,"layout":13},"Related links","/design-system/components/related-links",{"title":413,"_path":414,"layout":13},"Results listing","/design-system/components/results-listing",{"title":416,"_path":417,"layout":13},"Search bar","/design-system/components/search-bar",{"title":419,"_path":420,"layout":13},"Skip link","/design-system/components/skip-link",{"title":422,"_path":423,"layout":13},"Social share","/design-system/components/social-share",{"title":425,"_path":426,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":428,"_path":429,"layout":13},"Table","/design-system/components/table",{"title":431,"_path":432,"layout":13},"Tabs","/design-system/components/tabs",{"title":434,"_path":435,"layout":13},"Tag","/design-system/components/tag",{"title":437,"_path":438,"layout":13},"Text area","/design-system/components/text-area",{"title":440,"_path":441,"layout":13},"Timeline","/design-system/components/timeline",{"title":443,"_path":444,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":446,"_path":447,"children":448,"layout":13},"Ripple Framework","/framework",[449,450,468,490],{"title":446,"_path":447,"layout":13},{"title":451,"_path":452,"children":453},"Key Concepts","/framework/key-concepts",[454,456,459,462,465],{"title":261,"_path":455,"layout":13},"/framework/key-concepts/nuxt",{"title":457,"_path":458,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":460,"_path":461,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":463,"_path":464,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":466,"_path":467,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":469,"_path":470,"children":471},"Guides","/framework/guides",[472,475,478,481,484,487],{"title":473,"_path":474,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":476,"_path":477,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":479,"_path":480,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":482,"_path":483,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":485,"_path":486,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":488,"_path":489,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":491,"_path":492,"layout":13},"Core modules","/framework/core-modules",["Reactive",494],["Set"],["Reactive",496],{"module-navigation":497},null,true,1714695153194]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Category grid</h1><p class="rpl-type-p-large" data-v-3163c6df>The Category grid component shows multiple cards laid out in a grid, allowing users to browse a collection of categories.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a category grid to help users browse a range of categories and content. Each card in a collection acts as a link to more information.<!--]--></p><p><!--[-->A category grid uses the text link style to indicate clickable elements. An accompanying media item, such as an icon or pictogram, is used to support the content for each category.<!--]--></p><p><!--[-->The media item you choose must be directly relevant to the card’s content, to support and reinforce the user’s understanding. The icon or pictogram should clearly show the difference in topics and should be easily identifiable.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--category-grid&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--category-grid&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use as a collection of cards only.<!--]--></li><li><!--[-->Include clear and concise content.<!--]--></li><li><!--[-->Use with icons or pictograms.<!--]--></li><li><!--[-->Be careful not to include too many cards.<!--]--></li><li><!--[-->Always use unique media items per card.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t use a single card only.<!--]--></li><li><!--[-->Don’t repeat content in the same a group of cards.<!--]--></li><li><!--[-->Don’t overload with content.<!--]--></li><li><!--[-->Don’t include with other interactive elements like links.<!--]--></li><li><!--[-->Don’t use without a media item.<!--]--></li><li><!--[-->Don’t use on pages with a sidebar.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->The category grid uses colour to indicate interaction states.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--category-grid&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--category-grid&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/category-grid.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/category-grid/_payload.json">[{"state":1,"once":493,"_errors":495,"serverRendered":498,"path":7,"prerenderedAt":499},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":182,"$sdd-globals":198,"$sdd-navigation":200},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/category-grid":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":177,"_id":178,"_source":179,"_file":180,"_extension":181},"/design-system/components/category-grid","components",false,"","Category grid","The Category grid component shows multiple cards laid out in a grid, allowing users to browse a collection of categories.","page","Core",{"type":16,"children":17,"toc":168},"root",[18,27,33,38,43,48,55,85,91,124,128,134,139,146],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use a category grid to help users browse a range of categories and content. Each card in a collection acts as a link to more information.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"A category grid uses the text link style to indicate clickable elements. An accompanying media item, such as an icon or pictogram, is used to support the content for each category.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"The media item you choose must be directly relevant to the card’s content, to support and reinforce the user’s understanding. The icon or pictogram should clearly show the difference in topics and should be easily identifiable.",{"type":19,"tag":44,"props":45,"children":47},"docs-example",{"id":46},"core-navigation-card--category-grid",[],{"type":19,"tag":49,"props":50,"children":52},"h3",{"id":51},"when-and-how-to-use",[53],{"type":25,"value":54},"When and how to use",{"type":19,"tag":56,"props":57,"children":58},"ul",{},[59,65,70,75,80],{"type":19,"tag":60,"props":61,"children":62},"li",{},[63],{"type":25,"value":64},"Use as a collection of cards only.",{"type":19,"tag":60,"props":66,"children":67},{},[68],{"type":25,"value":69},"Include clear and concise content.",{"type":19,"tag":60,"props":71,"children":72},{},[73],{"type":25,"value":74},"Use with icons or pictograms.",{"type":19,"tag":60,"props":76,"children":77},{},[78],{"type":25,"value":79},"Be careful not to include too many cards.",{"type":19,"tag":60,"props":81,"children":82},{},[83],{"type":25,"value":84},"Always use unique media items per card.",{"type":19,"tag":49,"props":86,"children":88},{"id":87},"when-and-how-not-to-use",[89],{"type":25,"value":90},"When and how not to use",{"type":19,"tag":56,"props":92,"children":93},{},[94,99,104,109,114,119],{"type":19,"tag":60,"props":95,"children":96},{},[97],{"type":25,"value":98},"Don’t use a single card only.",{"type":19,"tag":60,"props":100,"children":101},{},[102],{"type":25,"value":103},"Don’t repeat content in the same a group of cards.",{"type":19,"tag":60,"props":105,"children":106},{},[107],{"type":25,"value":108},"Don’t overload with content.",{"type":19,"tag":60,"props":110,"children":111},{},[112],{"type":25,"value":113},"Don’t include with other interactive elements like links.",{"type":19,"tag":60,"props":115,"children":116},{},[117],{"type":25,"value":118},"Don’t use without a media item.",{"type":19,"tag":60,"props":120,"children":121},{},[122],{"type":25,"value":123},"Don’t use on pages with a sidebar.",{"type":19,"tag":125,"props":126,"children":127},"hr",{},[],{"type":19,"tag":20,"props":129,"children":131},{"id":130},"theming",[132],{"type":25,"value":133},"Theming",{"type":19,"tag":28,"props":135,"children":136},{},[137],{"type":25,"value":138},"The category grid uses colour to indicate interaction states.",{"type":19,"tag":140,"props":141,"children":142},"docs-theme-chooser",{},[143],{"type":19,"tag":44,"props":144,"children":145},{"id":46},[],{"type":19,"tag":28,"props":147,"children":148},{},[149,151,158,160,166],{"type":25,"value":150},"To create your own theme see ",{"type":19,"tag":152,"props":153,"children":155},"a",{"href":154},"/design-system/design/theming-guidance-for-designers",[156],{"type":25,"value":157},"theming guidance for designers",{"type":25,"value":159}," or ",{"type":19,"tag":152,"props":161,"children":163},{"href":162},"/design-system/develop/theming",[164],{"type":25,"value":165},"theming guidance for developers",{"type":25,"value":167},".",{"title":10,"searchDepth":169,"depth":169,"links":170},2,[171,176],{"id":22,"depth":169,"text":26,"children":172},[173,175],{"id":51,"depth":174,"text":54},3,{"id":87,"depth":174,"text":90},{"id":130,"depth":169,"text":133},"markdown","content:design-system:5.components:category-grid.md","content","design-system/5.components/category-grid.md","md",["ShallowRef",183],["ShallowReactive",184],{"/design-system/components/category-grid":185},[186,192],{"_path":187,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":188,"description":189,"layout":13,"label":14,"_type":177,"_id":190,"_source":179,"_file":191,"_extension":181},"/design-system/components/carousel","Carousel","The Carousel component is a set of related cards that users can side-scroll through.","content:design-system:5.components:carousel.md","design-system/5.components/carousel.md",{"_path":193,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":194,"description":195,"layout":13,"label":14,"_type":177,"_id":196,"_source":179,"_file":197,"_extension":181},"/design-system/components/checkbox","Checkbox","The Checkbox component lets users select one or more options from a list.","content:design-system:5.components:checkbox.md","design-system/5.components/checkbox.md",["ShallowRef",199],{},[201,206,445],{"title":202,"_path":203,"icon":204,"layout":205},"Ripple Design System","/","carbon:home","home",{"title":207,"_path":208,"children":209},"Design System","/design-system",[210,226,241,269,303],{"title":211,"_path":212,"children":213},"About","/design-system/about",[214,217,220,223],{"title":215,"_path":216,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":218,"_path":219,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":221,"_path":222,"layout":13},"Support","/design-system/about/getting-support",{"title":224,"_path":225,"layout":13},"Contributing","/design-system/about/contributing",{"title":227,"_path":228,"children":229},"Design","/design-system/design",[230,233,236,239],{"title":231,"_path":232,"layout":13},"Getting started","/design-system/design/getting-started",{"title":234,"_path":235,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":237,"_path":238,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":240,"_path":154,"layout":13},"Theming guidance for designers",{"title":242,"_path":243,"children":244},"Develop","/design-system/develop",[245,247,249,251],{"title":231,"_path":246,"layout":13},"/design-system/develop/getting-started",{"title":224,"_path":248,"layout":13},"/design-system/develop/contributing",{"title":250,"_path":162,"layout":13},"Theme and brand application",{"title":26,"_path":252,"children":253,"layout":13},"/design-system/develop/usage",[254,257,260,263,266],{"title":255,"_path":256,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":258,"_path":259,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":261,"_path":262,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":264,"_path":265,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":267,"_path":268,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":270,"_path":271,"children":272},"Styles","/design-system/styles",[273,276,279,282,285,288,291,294,297,300],{"title":274,"_path":275,"layout":13},"Colour","/design-system/styles/colour",{"title":277,"_path":278,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":280,"_path":281,"layout":13},"Grid","/design-system/styles/grid",{"title":283,"_path":284,"layout":13},"Icons","/design-system/styles/icons",{"title":286,"_path":287,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":289,"_path":290,"layout":13},"Layout","/design-system/styles/layout",{"title":292,"_path":293,"layout":13},"Logo","/design-system/styles/logo",{"title":295,"_path":296,"layout":13},"Motion","/design-system/styles/motion",{"title":298,"_path":299,"layout":13},"Spacing","/design-system/styles/spacing",{"title":301,"_path":302,"layout":13},"Typography","/design-system/styles/typography",{"title":304,"_path":305,"children":306},"Components","/design-system/components",[307,310,313,316,319,322,325,328,331,334,337,338,339,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442],{"title":308,"_path":309,"layout":13},"Accordion","/design-system/components/accordion",{"title":311,"_path":312,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":314,"_path":315,"layout":13},"Alert","/design-system/components/alert",{"title":317,"_path":318,"layout":13},"Block quote","/design-system/components/block-quote",{"title":320,"_path":321,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":323,"_path":324,"layout":13},"Button","/design-system/components/button",{"title":326,"_path":327,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":329,"_path":330,"layout":13},"Callout","/design-system/components/callout",{"title":332,"_path":333,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":335,"_path":336,"layout":13},"Card","/design-system/components/card",{"title":188,"_path":187,"layout":13},{"title":11,"_path":7,"layout":13},{"title":194,"_path":193,"layout":13},{"title":341,"_path":342,"layout":13},"Chip","/design-system/components/chip",{"title":344,"_path":345,"layout":13},"Contact us","/design-system/components/contact-us",{"title":347,"_path":348,"layout":13},"Date input","/design-system/components/date-input",{"title":350,"_path":351,"layout":13},"Detail list","/design-system/components/detail-list",{"title":353,"_path":354,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":356,"_path":357,"layout":13},"File","/design-system/components/file",{"title":359,"_path":360,"layout":13},"Footer","/design-system/components/footer",{"title":362,"_path":363,"layout":13},"Form","/design-system/components/form",{"title":365,"_path":366,"layout":13},"Form alert","/design-system/components/form-alert",{"title":368,"_path":369,"layout":13},"Header","/design-system/components/header",{"title":371,"_path":372,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":374,"_path":375,"layout":13},"Input field","/design-system/components/input-field",{"title":377,"_path":378,"layout":13},"Key dates","/design-system/components/key-dates",{"title":380,"_path":381,"layout":13},"Media","/design-system/components/media",{"title":383,"_path":384,"layout":13},"Media embed","/design-system/components/media-embed",{"title":386,"_path":387,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":389,"_path":390,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":392,"_path":393,"layout":13},"Option button","/design-system/components/option-button",{"title":395,"_path":396,"layout":13},"Page action","/design-system/components/page-action",{"title":398,"_path":399,"layout":13},"Pagination","/design-system/components/pagination",{"title":401,"_path":402,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":404,"_path":405,"layout":13},"Profile","/design-system/components/profile",{"title":407,"_path":408,"layout":13},"Radio button","/design-system/components/radio-button",{"title":410,"_path":411,"layout":13},"Related links","/design-system/components/related-links",{"title":413,"_path":414,"layout":13},"Results listing","/design-system/components/results-listing",{"title":416,"_path":417,"layout":13},"Search bar","/design-system/components/search-bar",{"title":419,"_path":420,"layout":13},"Skip link","/design-system/components/skip-link",{"title":422,"_path":423,"layout":13},"Social share","/design-system/components/social-share",{"title":425,"_path":426,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":428,"_path":429,"layout":13},"Table","/design-system/components/table",{"title":431,"_path":432,"layout":13},"Tabs","/design-system/components/tabs",{"title":434,"_path":435,"layout":13},"Tag","/design-system/components/tag",{"title":437,"_path":438,"layout":13},"Text area","/design-system/components/text-area",{"title":440,"_path":441,"layout":13},"Timeline","/design-system/components/timeline",{"title":443,"_path":444,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":446,"_path":447,"children":448,"layout":13},"Ripple Framework","/framework",[449,450,468,490],{"title":446,"_path":447,"layout":13},{"title":451,"_path":452,"children":453},"Key Concepts","/framework/key-concepts",[454,456,459,462,465],{"title":261,"_path":455,"layout":13},"/framework/key-concepts/nuxt",{"title":457,"_path":458,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":460,"_path":461,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":463,"_path":464,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":466,"_path":467,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":469,"_path":470,"children":471},"Guides","/framework/guides",[472,475,478,481,484,487],{"title":473,"_path":474,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":476,"_path":477,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":479,"_path":480,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":482,"_path":483,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":485,"_path":486,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":488,"_path":489,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":491,"_path":492,"layout":13},"Core modules","/framework/core-modules",["Reactive",494],["Set"],["Reactive",496],{"module-navigation":497},null,true,1714695651412]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/checkbox/_payload.json b/design-system/components/checkbox/_payload.json
index e66ee90308..02611b6ec2 100644
--- a/design-system/components/checkbox/_payload.json
+++ b/design-system/components/checkbox/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":104,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695153201]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":104,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695651416]
\ No newline at end of file
diff --git a/design-system/components/checkbox/index.html b/design-system/components/checkbox/index.html
index abb6fa8867..80e8581f79 100644
--- a/design-system/components/checkbox/index.html
+++ b/design-system/components/checkbox/index.html
@@ -28,65 +28,65 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.CwUV-MIb.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.F9NVvvm4.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.gK7ORMEc.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.GmB4B_NE.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -98,8 +98,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Checkbox</h1><p class="rpl-type-p-large" data-v-3163c6df>The Checkbox component lets users select one or more options from a list.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use checkboxes to allow users to:<!--]--></p><ul><!--[--><li><!--[-->select one or more list options<!--]--></li><li><!--[-->toggle one option on or off.<!--]--></li><!--]--></ul><p><!--[-->Don&#39;t use a checkbox if only one option is available or if you expect the user to only select one option. For this, use the radio button component instead.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-checkbox-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-checkbox-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="how-this-component-works" data-v-ea525968><a href="#how-this-component-works" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->How this component works<!--]--></a></h2><p><!--[-->Use checkboxes with a:<!--]--></p><ul><!--[--><li><!--[-->form label<!--]--></li><li><!--[-->optional requirement label<!--]--></li><li><!--[-->optional hint text<!--]--></li><li><!--[-->checkbox label.<!--]--></li><!--]--></ul><p><!--[-->Checkboxes should always have a form and checkbox label.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="single-checkbox"><!--[-->Single checkbox<!--]--></h4><p><!--[-->A single checkbox confirms a user&#39;s selection or preference. Examples include when a user is agreeing to terms and conditions or registering for a the only available option presented.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="checkbox-group"><!--[-->Checkbox group<!--]--></h4><p><!--[-->Checkbox groups provide a list of available items for the user to choose from. Always tell the user how many options they can select.<!--]--></p><p><!--[-->Always give checkbox groups a clear and descriptive label. The label should say what the options represent and should help the user to choose one. Doing so ensures good accessibility, as screen readers read each option&#39;s label.<!--]--></p><p><!--[-->Not all users will know the visual difference between a checkbox and a radio button. You can could add extra instructions to guide users, for example, ‘Select up to 3 options’.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use checkboxes for lists with more than one selectable option.<!--]--></li><li><!--[-->Use hints to inform users that more than one option can be selected, for example, &#39;Select all that apply&#39;.<!--]--></li><li><!--[-->Always position checkboxes to the left of their labels because this makes them easier to find, especially if using a screen magnifier.<!--]--></li><li><!--[-->Ensure you list the options in a logical and unbiased manner. It could be helpful to users if you order them from most common to least common.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t use checkboxes for a single selectable list option, use radio buttons for this.<!--]--></li><li><!--[-->Don&#39;t pre-select checkboxes because users may not realise they submitted the wrong answer or missed a question.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->Checkboxes have 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, used on white backgrounds<!--]--></li><li><!--[-->reverse, used on neutral backgrounds.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-checkbox-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-checkbox-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="reverse" data-v-ea525968><a href="#reverse" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Reverse<!--]--></a></h2><p><!--[-->Use the reverse variant when the chip appears on the primary colour.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-checkbox-group--reverse-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-checkbox-group--reverse-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="error" data-v-ea525968><a href="#error" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Error<!--]--></a></h2><p><!--[-->All form inputs share error state styling.<!--]--></p><p><!--[-->Make sure errors follow error message guidance. Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.<!--]--></p><p><!--[--><strong><!--[-->Error: nothing is selected and the question has options in it<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user to choose which options apply to them.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select if [options]’.<!--]--></li><li><!--[-->Example: ‘Select if you like summer, winter, autumn, and/or spring&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: nothing is selected and the question does not have options in it<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user to choose which options apply to them.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select [options]’.<!--]--></li><li><!--[-->Example: &#39;Select your favourite season&#39;.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-checkbox-group--invalid&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-checkbox-group--invalid&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->A checkbox uses colour for interactive states.<!--]--></p><p><!--[-->A checkbox in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a checkbox remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-checkbox-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-checkbox-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="rationale" data-v-fff5b905><a href="#rationale" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/checkbox.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/checkbox/_payload.json">[{"state":1,"once":702,"_errors":704,"serverRendered":707,"path":708,"prerenderedAt":709},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":391,"$sdd-globals":407,"$sdd-navigation":409},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/checkbox":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":386,"_id":387,"_source":388,"_file":389,"_extension":390},"/design-system/components/checkbox","components",false,"","Checkbox","The Checkbox component lets users select one or more options from a list.","page","Core",{"type":16,"children":17,"toc":370},"root",[18,27,33,48,53,58,65,70,93,98,105,110,116,121,126,131,137,160,166,179,183,189,194,207,213,216,222,227,231,237,242,247,256,261,274,282,286,299,303,306,312,317,322,329,351,354,360,365],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use checkboxes to allow users to:",{"type":19,"tag":34,"props":35,"children":36},"ul",{},[37,43],{"type":19,"tag":38,"props":39,"children":40},"li",{},[41],{"type":25,"value":42},"select one or more list options",{"type":19,"tag":38,"props":44,"children":45},{},[46],{"type":25,"value":47},"toggle one option on or off.",{"type":19,"tag":28,"props":49,"children":50},{},[51],{"type":25,"value":52},"Don't use a checkbox if only one option is available or if you expect the user to only select one option. For this, use the radio button component instead.",{"type":19,"tag":54,"props":55,"children":57},"docs-example",{"id":56},"forms-checkbox-group--default-variant",[],{"type":19,"tag":59,"props":60,"children":62},"h3",{"id":61},"how-this-component-works",[63],{"type":25,"value":64},"How this component works",{"type":19,"tag":28,"props":66,"children":67},{},[68],{"type":25,"value":69},"Use checkboxes with a:",{"type":19,"tag":34,"props":71,"children":72},{},[73,78,83,88],{"type":19,"tag":38,"props":74,"children":75},{},[76],{"type":25,"value":77},"form label",{"type":19,"tag":38,"props":79,"children":80},{},[81],{"type":25,"value":82},"optional requirement label",{"type":19,"tag":38,"props":84,"children":85},{},[86],{"type":25,"value":87},"optional hint text",{"type":19,"tag":38,"props":89,"children":90},{},[91],{"type":25,"value":92},"checkbox label.",{"type":19,"tag":28,"props":94,"children":95},{},[96],{"type":25,"value":97},"Checkboxes should always have a form and checkbox label.",{"type":19,"tag":99,"props":100,"children":102},"h4",{"id":101},"single-checkbox",[103],{"type":25,"value":104},"Single checkbox",{"type":19,"tag":28,"props":106,"children":107},{},[108],{"type":25,"value":109},"A single checkbox confirms a user's selection or preference. Examples include when a user is agreeing to terms and conditions or registering for a the only available option presented.",{"type":19,"tag":99,"props":111,"children":113},{"id":112},"checkbox-group",[114],{"type":25,"value":115},"Checkbox group",{"type":19,"tag":28,"props":117,"children":118},{},[119],{"type":25,"value":120},"Checkbox groups provide a list of available items for the user to choose from. Always tell the user how many options they can select.",{"type":19,"tag":28,"props":122,"children":123},{},[124],{"type":25,"value":125},"Always give checkbox groups a clear and descriptive label. The label should say what the options represent and should help the user to choose one. Doing so ensures good accessibility, as screen readers read each option's label.",{"type":19,"tag":28,"props":127,"children":128},{},[129],{"type":25,"value":130},"Not all users will know the visual difference between a checkbox and a radio button. You can could add extra instructions to guide users, for example, ‘Select up to 3 options’.",{"type":19,"tag":59,"props":132,"children":134},{"id":133},"when-and-how-to-use",[135],{"type":25,"value":136},"When and how to use",{"type":19,"tag":34,"props":138,"children":139},{},[140,145,150,155],{"type":19,"tag":38,"props":141,"children":142},{},[143],{"type":25,"value":144},"Use checkboxes for lists with more than one selectable option.",{"type":19,"tag":38,"props":146,"children":147},{},[148],{"type":25,"value":149},"Use hints to inform users that more than one option can be selected, for example, 'Select all that apply'.",{"type":19,"tag":38,"props":151,"children":152},{},[153],{"type":25,"value":154},"Always position checkboxes to the left of their labels because this makes them easier to find, especially if using a screen magnifier.",{"type":19,"tag":38,"props":156,"children":157},{},[158],{"type":25,"value":159},"Ensure you list the options in a logical and unbiased manner. It could be helpful to users if you order them from most common to least common.",{"type":19,"tag":59,"props":161,"children":163},{"id":162},"when-and-how-not-to-use",[164],{"type":25,"value":165},"When and how not to use",{"type":19,"tag":34,"props":167,"children":168},{},[169,174],{"type":19,"tag":38,"props":170,"children":171},{},[172],{"type":25,"value":173},"Don't use checkboxes for a single selectable list option, use radio buttons for this.",{"type":19,"tag":38,"props":175,"children":176},{},[177],{"type":25,"value":178},"Don't pre-select checkboxes because users may not realise they submitted the wrong answer or missed a question.",{"type":19,"tag":180,"props":181,"children":182},"hr",{},[],{"type":19,"tag":20,"props":184,"children":186},{"id":185},"variants",[187],{"type":25,"value":188},"Variants",{"type":19,"tag":28,"props":190,"children":191},{},[192],{"type":25,"value":193},"Checkboxes have 2 variants:",{"type":19,"tag":34,"props":195,"children":196},{},[197,202],{"type":19,"tag":38,"props":198,"children":199},{},[200],{"type":25,"value":201},"default, used on white backgrounds",{"type":19,"tag":38,"props":203,"children":204},{},[205],{"type":25,"value":206},"reverse, used on neutral backgrounds.",{"type":19,"tag":59,"props":208,"children":210},{"id":209},"default",[211],{"type":25,"value":212},"Default",{"type":19,"tag":54,"props":214,"children":215},{"id":56},[],{"type":19,"tag":59,"props":217,"children":219},{"id":218},"reverse",[220],{"type":25,"value":221},"Reverse",{"type":19,"tag":28,"props":223,"children":224},{},[225],{"type":25,"value":226},"Use the reverse variant when the chip appears on the primary colour.",{"type":19,"tag":54,"props":228,"children":230},{"id":229},"forms-checkbox-group--reverse-variant",[],{"type":19,"tag":59,"props":232,"children":234},{"id":233},"error",[235],{"type":25,"value":236},"Error",{"type":19,"tag":28,"props":238,"children":239},{},[240],{"type":25,"value":241},"All form inputs share error state styling.",{"type":19,"tag":28,"props":243,"children":244},{},[245],{"type":25,"value":246},"Make sure errors follow error message guidance. Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.",{"type":19,"tag":28,"props":248,"children":249},{},[250],{"type":19,"tag":251,"props":252,"children":253},"strong",{},[254],{"type":25,"value":255},"Error: nothing is selected and the question has options in it",{"type":19,"tag":28,"props":257,"children":258},{},[259],{"type":25,"value":260},"Structure this message to help the user to choose which options apply to them.",{"type":19,"tag":34,"props":262,"children":263},{},[264,269],{"type":19,"tag":38,"props":265,"children":266},{},[267],{"type":25,"value":268},"Error message: ‘Select if [options]’.",{"type":19,"tag":38,"props":270,"children":271},{},[272],{"type":25,"value":273},"Example: ‘Select if you like summer, winter, autumn, and/or spring'.",{"type":19,"tag":28,"props":275,"children":276},{},[277],{"type":19,"tag":251,"props":278,"children":279},{},[280],{"type":25,"value":281},"Error: nothing is selected and the question does not have options in it",{"type":19,"tag":28,"props":283,"children":284},{},[285],{"type":25,"value":260},{"type":19,"tag":34,"props":287,"children":288},{},[289,294],{"type":19,"tag":38,"props":290,"children":291},{},[292],{"type":25,"value":293},"Error message: ‘Select [options]’.",{"type":19,"tag":38,"props":295,"children":296},{},[297],{"type":25,"value":298},"Example: 'Select your favourite season'.",{"type":19,"tag":54,"props":300,"children":302},{"id":301},"forms-checkbox-group--invalid",[],{"type":19,"tag":180,"props":304,"children":305},{},[],{"type":19,"tag":20,"props":307,"children":309},{"id":308},"theming",[310],{"type":25,"value":311},"Theming",{"type":19,"tag":28,"props":313,"children":314},{},[315],{"type":25,"value":316},"A checkbox uses colour for interactive states.",{"type":19,"tag":28,"props":318,"children":319},{},[320],{"type":25,"value":321},"A checkbox in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a checkbox remains consistent while it transitions from a focus to an active state.",{"type":19,"tag":323,"props":324,"children":325},"docs-theme-chooser",{},[326],{"type":19,"tag":54,"props":327,"children":328},{"id":56},[],{"type":19,"tag":28,"props":330,"children":331},{},[332,334,341,343,349],{"type":25,"value":333},"To create your own theme see ",{"type":19,"tag":335,"props":336,"children":338},"a",{"href":337},"/design-system/design/theming-guidance-for-designers",[339],{"type":25,"value":340},"theming guidance for designers",{"type":25,"value":342}," or ",{"type":19,"tag":335,"props":344,"children":346},{"href":345},"/design-system/develop/theming",[347],{"type":25,"value":348},"theming guidance for developers",{"type":25,"value":350},".",{"type":19,"tag":180,"props":352,"children":353},{},[],{"type":19,"tag":20,"props":355,"children":357},{"id":356},"rationale",[358],{"type":25,"value":359},"Rationale",{"type":19,"tag":28,"props":361,"children":362},{},[363],{"type":25,"value":364},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":19,"tag":28,"props":366,"children":367},{},[368],{"type":25,"value":369},"This occurs across all form and input elements, for a consistent experience.",{"title":10,"searchDepth":371,"depth":371,"links":372},2,[373,379,384,385],{"id":22,"depth":371,"text":26,"children":374},[375,377,378],{"id":61,"depth":376,"text":64},3,{"id":133,"depth":376,"text":136},{"id":162,"depth":376,"text":165},{"id":185,"depth":371,"text":188,"children":380},[381,382,383],{"id":209,"depth":376,"text":212},{"id":218,"depth":376,"text":221},{"id":233,"depth":376,"text":236},{"id":308,"depth":371,"text":311},{"id":356,"depth":371,"text":359},"markdown","content:design-system:5.components:checkbox.md","content","design-system/5.components/checkbox.md","md",["ShallowRef",392],["ShallowReactive",393],{"/design-system/components/checkbox":394},[395,401],{"_path":396,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":397,"description":398,"layout":13,"label":14,"_type":386,"_id":399,"_source":388,"_file":400,"_extension":390},"/design-system/components/category-grid","Category grid","The Category grid component shows multiple cards laid out in a grid, allowing users to browse a collection of categories.","content:design-system:5.components:category-grid.md","design-system/5.components/category-grid.md",{"_path":402,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":403,"description":404,"layout":13,"label":14,"_type":386,"_id":405,"_source":388,"_file":406,"_extension":390},"/design-system/components/chip","Chip","The Chip component is an interactive element to draw a user’s user attention to a category.","content:design-system:5.components:chip.md","design-system/5.components/chip.md",["ShallowRef",408],{},[410,415,654],{"title":411,"_path":412,"icon":413,"layout":414},"Ripple Design System","/","carbon:home","home",{"title":416,"_path":417,"children":418},"Design System","/design-system",[419,435,450,478,512],{"title":420,"_path":421,"children":422},"About","/design-system/about",[423,426,429,432],{"title":424,"_path":425,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":427,"_path":428,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":430,"_path":431,"layout":13},"Support","/design-system/about/getting-support",{"title":433,"_path":434,"layout":13},"Contributing","/design-system/about/contributing",{"title":436,"_path":437,"children":438},"Design","/design-system/design",[439,442,445,448],{"title":440,"_path":441,"layout":13},"Getting started","/design-system/design/getting-started",{"title":443,"_path":444,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":446,"_path":447,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":449,"_path":337,"layout":13},"Theming guidance for designers",{"title":451,"_path":452,"children":453},"Develop","/design-system/develop",[454,456,458,460],{"title":440,"_path":455,"layout":13},"/design-system/develop/getting-started",{"title":433,"_path":457,"layout":13},"/design-system/develop/contributing",{"title":459,"_path":345,"layout":13},"Theme and brand application",{"title":26,"_path":461,"children":462,"layout":13},"/design-system/develop/usage",[463,466,469,472,475],{"title":464,"_path":465,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":467,"_path":468,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":470,"_path":471,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":473,"_path":474,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":476,"_path":477,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":479,"_path":480,"children":481},"Styles","/design-system/styles",[482,485,488,491,494,497,500,503,506,509],{"title":483,"_path":484,"layout":13},"Colour","/design-system/styles/colour",{"title":486,"_path":487,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":489,"_path":490,"layout":13},"Grid","/design-system/styles/grid",{"title":492,"_path":493,"layout":13},"Icons","/design-system/styles/icons",{"title":495,"_path":496,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":498,"_path":499,"layout":13},"Layout","/design-system/styles/layout",{"title":501,"_path":502,"layout":13},"Logo","/design-system/styles/logo",{"title":504,"_path":505,"layout":13},"Motion","/design-system/styles/motion",{"title":507,"_path":508,"layout":13},"Spacing","/design-system/styles/spacing",{"title":510,"_path":511,"layout":13},"Typography","/design-system/styles/typography",{"title":513,"_path":514,"children":515},"Components","/design-system/components",[516,519,522,525,528,531,534,537,540,543,546,549,550,551,552,555,558,561,564,567,570,573,576,579,582,585,588,591,594,597,600,603,606,609,612,615,618,621,624,627,630,633,636,639,642,645,648,651],{"title":517,"_path":518,"layout":13},"Accordion","/design-system/components/accordion",{"title":520,"_path":521,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":523,"_path":524,"layout":13},"Alert","/design-system/components/alert",{"title":526,"_path":527,"layout":13},"Block quote","/design-system/components/block-quote",{"title":529,"_path":530,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":532,"_path":533,"layout":13},"Button","/design-system/components/button",{"title":535,"_path":536,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":538,"_path":539,"layout":13},"Callout","/design-system/components/callout",{"title":541,"_path":542,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":544,"_path":545,"layout":13},"Card","/design-system/components/card",{"title":547,"_path":548,"layout":13},"Carousel","/design-system/components/carousel",{"title":397,"_path":396,"layout":13},{"title":11,"_path":7,"layout":13},{"title":403,"_path":402,"layout":13},{"title":553,"_path":554,"layout":13},"Contact us","/design-system/components/contact-us",{"title":556,"_path":557,"layout":13},"Date input","/design-system/components/date-input",{"title":559,"_path":560,"layout":13},"Detail list","/design-system/components/detail-list",{"title":562,"_path":563,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":565,"_path":566,"layout":13},"File","/design-system/components/file",{"title":568,"_path":569,"layout":13},"Footer","/design-system/components/footer",{"title":571,"_path":572,"layout":13},"Form","/design-system/components/form",{"title":574,"_path":575,"layout":13},"Form alert","/design-system/components/form-alert",{"title":577,"_path":578,"layout":13},"Header","/design-system/components/header",{"title":580,"_path":581,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":583,"_path":584,"layout":13},"Input field","/design-system/components/input-field",{"title":586,"_path":587,"layout":13},"Key dates","/design-system/components/key-dates",{"title":589,"_path":590,"layout":13},"Media","/design-system/components/media",{"title":592,"_path":593,"layout":13},"Media embed","/design-system/components/media-embed",{"title":595,"_path":596,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":598,"_path":599,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":601,"_path":602,"layout":13},"Option button","/design-system/components/option-button",{"title":604,"_path":605,"layout":13},"Page action","/design-system/components/page-action",{"title":607,"_path":608,"layout":13},"Pagination","/design-system/components/pagination",{"title":610,"_path":611,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":613,"_path":614,"layout":13},"Profile","/design-system/components/profile",{"title":616,"_path":617,"layout":13},"Radio button","/design-system/components/radio-button",{"title":619,"_path":620,"layout":13},"Related links","/design-system/components/related-links",{"title":622,"_path":623,"layout":13},"Results listing","/design-system/components/results-listing",{"title":625,"_path":626,"layout":13},"Search bar","/design-system/components/search-bar",{"title":628,"_path":629,"layout":13},"Skip link","/design-system/components/skip-link",{"title":631,"_path":632,"layout":13},"Social share","/design-system/components/social-share",{"title":634,"_path":635,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":637,"_path":638,"layout":13},"Table","/design-system/components/table",{"title":640,"_path":641,"layout":13},"Tabs","/design-system/components/tabs",{"title":643,"_path":644,"layout":13},"Tag","/design-system/components/tag",{"title":646,"_path":647,"layout":13},"Text area","/design-system/components/text-area",{"title":649,"_path":650,"layout":13},"Timeline","/design-system/components/timeline",{"title":652,"_path":653,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":655,"_path":656,"children":657,"layout":13},"Ripple Framework","/framework",[658,659,677,699],{"title":655,"_path":656,"layout":13},{"title":660,"_path":661,"children":662},"Key Concepts","/framework/key-concepts",[663,665,668,671,674],{"title":470,"_path":664,"layout":13},"/framework/key-concepts/nuxt",{"title":666,"_path":667,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":669,"_path":670,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":672,"_path":673,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":675,"_path":676,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":678,"_path":679,"children":680},"Guides","/framework/guides",[681,684,687,690,693,696],{"title":682,"_path":683,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":685,"_path":686,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":688,"_path":689,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":691,"_path":692,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":694,"_path":695,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":697,"_path":698,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":700,"_path":701,"layout":13},"Core modules","/framework/core-modules",["Reactive",703],["Set"],["Reactive",705],{"module-navigation":706},null,true,"/design-system/components/checkbox/",1714695156404]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Checkbox</h1><p class="rpl-type-p-large" data-v-3163c6df>The Checkbox component lets users select one or more options from a list.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use checkboxes to allow users to:<!--]--></p><ul><!--[--><li><!--[-->select one or more list options<!--]--></li><li><!--[-->toggle one option on or off.<!--]--></li><!--]--></ul><p><!--[-->Don&#39;t use a checkbox if only one option is available or if you expect the user to only select one option. For this, use the radio button component instead.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-checkbox-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-checkbox-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="how-this-component-works" data-v-ea525968><a href="#how-this-component-works" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->How this component works<!--]--></a></h2><p><!--[-->Use checkboxes with a:<!--]--></p><ul><!--[--><li><!--[-->form label<!--]--></li><li><!--[-->optional requirement label<!--]--></li><li><!--[-->optional hint text<!--]--></li><li><!--[-->checkbox label.<!--]--></li><!--]--></ul><p><!--[-->Checkboxes should always have a form and checkbox label.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="single-checkbox"><!--[-->Single checkbox<!--]--></h4><p><!--[-->A single checkbox confirms a user&#39;s selection or preference. Examples include when a user is agreeing to terms and conditions or registering for a the only available option presented.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="checkbox-group"><!--[-->Checkbox group<!--]--></h4><p><!--[-->Checkbox groups provide a list of available items for the user to choose from. Always tell the user how many options they can select.<!--]--></p><p><!--[-->Always give checkbox groups a clear and descriptive label. The label should say what the options represent and should help the user to choose one. Doing so ensures good accessibility, as screen readers read each option&#39;s label.<!--]--></p><p><!--[-->Not all users will know the visual difference between a checkbox and a radio button. You can could add extra instructions to guide users, for example, ‘Select up to 3 options’.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use checkboxes for lists with more than one selectable option.<!--]--></li><li><!--[-->Use hints to inform users that more than one option can be selected, for example, &#39;Select all that apply&#39;.<!--]--></li><li><!--[-->Always position checkboxes to the left of their labels because this makes them easier to find, especially if using a screen magnifier.<!--]--></li><li><!--[-->Ensure you list the options in a logical and unbiased manner. It could be helpful to users if you order them from most common to least common.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t use checkboxes for a single selectable list option, use radio buttons for this.<!--]--></li><li><!--[-->Don&#39;t pre-select checkboxes because users may not realise they submitted the wrong answer or missed a question.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->Checkboxes have 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, used on white backgrounds<!--]--></li><li><!--[-->reverse, used on neutral backgrounds.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-checkbox-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-checkbox-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="reverse" data-v-ea525968><a href="#reverse" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Reverse<!--]--></a></h2><p><!--[-->Use the reverse variant when the chip appears on the primary colour.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-checkbox-group--reverse-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-checkbox-group--reverse-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="error" data-v-ea525968><a href="#error" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Error<!--]--></a></h2><p><!--[-->All form inputs share error state styling.<!--]--></p><p><!--[-->Make sure errors follow error message guidance. Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.<!--]--></p><p><!--[--><strong><!--[-->Error: nothing is selected and the question has options in it<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user to choose which options apply to them.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select if [options]’.<!--]--></li><li><!--[-->Example: ‘Select if you like summer, winter, autumn, and/or spring&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: nothing is selected and the question does not have options in it<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user to choose which options apply to them.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select [options]’.<!--]--></li><li><!--[-->Example: &#39;Select your favourite season&#39;.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-checkbox-group--invalid&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-checkbox-group--invalid&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->A checkbox uses colour for interactive states.<!--]--></p><p><!--[-->A checkbox in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a checkbox remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-checkbox-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-checkbox-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="rationale" data-v-fff5b905><a href="#rationale" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/checkbox.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/checkbox/_payload.json">[{"state":1,"once":702,"_errors":704,"serverRendered":707,"path":708,"prerenderedAt":709},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":391,"$sdd-globals":407,"$sdd-navigation":409},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/checkbox":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":386,"_id":387,"_source":388,"_file":389,"_extension":390},"/design-system/components/checkbox","components",false,"","Checkbox","The Checkbox component lets users select one or more options from a list.","page","Core",{"type":16,"children":17,"toc":370},"root",[18,27,33,48,53,58,65,70,93,98,105,110,116,121,126,131,137,160,166,179,183,189,194,207,213,216,222,227,231,237,242,247,256,261,274,282,286,299,303,306,312,317,322,329,351,354,360,365],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use checkboxes to allow users to:",{"type":19,"tag":34,"props":35,"children":36},"ul",{},[37,43],{"type":19,"tag":38,"props":39,"children":40},"li",{},[41],{"type":25,"value":42},"select one or more list options",{"type":19,"tag":38,"props":44,"children":45},{},[46],{"type":25,"value":47},"toggle one option on or off.",{"type":19,"tag":28,"props":49,"children":50},{},[51],{"type":25,"value":52},"Don't use a checkbox if only one option is available or if you expect the user to only select one option. For this, use the radio button component instead.",{"type":19,"tag":54,"props":55,"children":57},"docs-example",{"id":56},"forms-checkbox-group--default-variant",[],{"type":19,"tag":59,"props":60,"children":62},"h3",{"id":61},"how-this-component-works",[63],{"type":25,"value":64},"How this component works",{"type":19,"tag":28,"props":66,"children":67},{},[68],{"type":25,"value":69},"Use checkboxes with a:",{"type":19,"tag":34,"props":71,"children":72},{},[73,78,83,88],{"type":19,"tag":38,"props":74,"children":75},{},[76],{"type":25,"value":77},"form label",{"type":19,"tag":38,"props":79,"children":80},{},[81],{"type":25,"value":82},"optional requirement label",{"type":19,"tag":38,"props":84,"children":85},{},[86],{"type":25,"value":87},"optional hint text",{"type":19,"tag":38,"props":89,"children":90},{},[91],{"type":25,"value":92},"checkbox label.",{"type":19,"tag":28,"props":94,"children":95},{},[96],{"type":25,"value":97},"Checkboxes should always have a form and checkbox label.",{"type":19,"tag":99,"props":100,"children":102},"h4",{"id":101},"single-checkbox",[103],{"type":25,"value":104},"Single checkbox",{"type":19,"tag":28,"props":106,"children":107},{},[108],{"type":25,"value":109},"A single checkbox confirms a user's selection or preference. Examples include when a user is agreeing to terms and conditions or registering for a the only available option presented.",{"type":19,"tag":99,"props":111,"children":113},{"id":112},"checkbox-group",[114],{"type":25,"value":115},"Checkbox group",{"type":19,"tag":28,"props":117,"children":118},{},[119],{"type":25,"value":120},"Checkbox groups provide a list of available items for the user to choose from. Always tell the user how many options they can select.",{"type":19,"tag":28,"props":122,"children":123},{},[124],{"type":25,"value":125},"Always give checkbox groups a clear and descriptive label. The label should say what the options represent and should help the user to choose one. Doing so ensures good accessibility, as screen readers read each option's label.",{"type":19,"tag":28,"props":127,"children":128},{},[129],{"type":25,"value":130},"Not all users will know the visual difference between a checkbox and a radio button. You can could add extra instructions to guide users, for example, ‘Select up to 3 options’.",{"type":19,"tag":59,"props":132,"children":134},{"id":133},"when-and-how-to-use",[135],{"type":25,"value":136},"When and how to use",{"type":19,"tag":34,"props":138,"children":139},{},[140,145,150,155],{"type":19,"tag":38,"props":141,"children":142},{},[143],{"type":25,"value":144},"Use checkboxes for lists with more than one selectable option.",{"type":19,"tag":38,"props":146,"children":147},{},[148],{"type":25,"value":149},"Use hints to inform users that more than one option can be selected, for example, 'Select all that apply'.",{"type":19,"tag":38,"props":151,"children":152},{},[153],{"type":25,"value":154},"Always position checkboxes to the left of their labels because this makes them easier to find, especially if using a screen magnifier.",{"type":19,"tag":38,"props":156,"children":157},{},[158],{"type":25,"value":159},"Ensure you list the options in a logical and unbiased manner. It could be helpful to users if you order them from most common to least common.",{"type":19,"tag":59,"props":161,"children":163},{"id":162},"when-and-how-not-to-use",[164],{"type":25,"value":165},"When and how not to use",{"type":19,"tag":34,"props":167,"children":168},{},[169,174],{"type":19,"tag":38,"props":170,"children":171},{},[172],{"type":25,"value":173},"Don't use checkboxes for a single selectable list option, use radio buttons for this.",{"type":19,"tag":38,"props":175,"children":176},{},[177],{"type":25,"value":178},"Don't pre-select checkboxes because users may not realise they submitted the wrong answer or missed a question.",{"type":19,"tag":180,"props":181,"children":182},"hr",{},[],{"type":19,"tag":20,"props":184,"children":186},{"id":185},"variants",[187],{"type":25,"value":188},"Variants",{"type":19,"tag":28,"props":190,"children":191},{},[192],{"type":25,"value":193},"Checkboxes have 2 variants:",{"type":19,"tag":34,"props":195,"children":196},{},[197,202],{"type":19,"tag":38,"props":198,"children":199},{},[200],{"type":25,"value":201},"default, used on white backgrounds",{"type":19,"tag":38,"props":203,"children":204},{},[205],{"type":25,"value":206},"reverse, used on neutral backgrounds.",{"type":19,"tag":59,"props":208,"children":210},{"id":209},"default",[211],{"type":25,"value":212},"Default",{"type":19,"tag":54,"props":214,"children":215},{"id":56},[],{"type":19,"tag":59,"props":217,"children":219},{"id":218},"reverse",[220],{"type":25,"value":221},"Reverse",{"type":19,"tag":28,"props":223,"children":224},{},[225],{"type":25,"value":226},"Use the reverse variant when the chip appears on the primary colour.",{"type":19,"tag":54,"props":228,"children":230},{"id":229},"forms-checkbox-group--reverse-variant",[],{"type":19,"tag":59,"props":232,"children":234},{"id":233},"error",[235],{"type":25,"value":236},"Error",{"type":19,"tag":28,"props":238,"children":239},{},[240],{"type":25,"value":241},"All form inputs share error state styling.",{"type":19,"tag":28,"props":243,"children":244},{},[245],{"type":25,"value":246},"Make sure errors follow error message guidance. Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.",{"type":19,"tag":28,"props":248,"children":249},{},[250],{"type":19,"tag":251,"props":252,"children":253},"strong",{},[254],{"type":25,"value":255},"Error: nothing is selected and the question has options in it",{"type":19,"tag":28,"props":257,"children":258},{},[259],{"type":25,"value":260},"Structure this message to help the user to choose which options apply to them.",{"type":19,"tag":34,"props":262,"children":263},{},[264,269],{"type":19,"tag":38,"props":265,"children":266},{},[267],{"type":25,"value":268},"Error message: ‘Select if [options]’.",{"type":19,"tag":38,"props":270,"children":271},{},[272],{"type":25,"value":273},"Example: ‘Select if you like summer, winter, autumn, and/or spring'.",{"type":19,"tag":28,"props":275,"children":276},{},[277],{"type":19,"tag":251,"props":278,"children":279},{},[280],{"type":25,"value":281},"Error: nothing is selected and the question does not have options in it",{"type":19,"tag":28,"props":283,"children":284},{},[285],{"type":25,"value":260},{"type":19,"tag":34,"props":287,"children":288},{},[289,294],{"type":19,"tag":38,"props":290,"children":291},{},[292],{"type":25,"value":293},"Error message: ‘Select [options]’.",{"type":19,"tag":38,"props":295,"children":296},{},[297],{"type":25,"value":298},"Example: 'Select your favourite season'.",{"type":19,"tag":54,"props":300,"children":302},{"id":301},"forms-checkbox-group--invalid",[],{"type":19,"tag":180,"props":304,"children":305},{},[],{"type":19,"tag":20,"props":307,"children":309},{"id":308},"theming",[310],{"type":25,"value":311},"Theming",{"type":19,"tag":28,"props":313,"children":314},{},[315],{"type":25,"value":316},"A checkbox uses colour for interactive states.",{"type":19,"tag":28,"props":318,"children":319},{},[320],{"type":25,"value":321},"A checkbox in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a checkbox remains consistent while it transitions from a focus to an active state.",{"type":19,"tag":323,"props":324,"children":325},"docs-theme-chooser",{},[326],{"type":19,"tag":54,"props":327,"children":328},{"id":56},[],{"type":19,"tag":28,"props":330,"children":331},{},[332,334,341,343,349],{"type":25,"value":333},"To create your own theme see ",{"type":19,"tag":335,"props":336,"children":338},"a",{"href":337},"/design-system/design/theming-guidance-for-designers",[339],{"type":25,"value":340},"theming guidance for designers",{"type":25,"value":342}," or ",{"type":19,"tag":335,"props":344,"children":346},{"href":345},"/design-system/develop/theming",[347],{"type":25,"value":348},"theming guidance for developers",{"type":25,"value":350},".",{"type":19,"tag":180,"props":352,"children":353},{},[],{"type":19,"tag":20,"props":355,"children":357},{"id":356},"rationale",[358],{"type":25,"value":359},"Rationale",{"type":19,"tag":28,"props":361,"children":362},{},[363],{"type":25,"value":364},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":19,"tag":28,"props":366,"children":367},{},[368],{"type":25,"value":369},"This occurs across all form and input elements, for a consistent experience.",{"title":10,"searchDepth":371,"depth":371,"links":372},2,[373,379,384,385],{"id":22,"depth":371,"text":26,"children":374},[375,377,378],{"id":61,"depth":376,"text":64},3,{"id":133,"depth":376,"text":136},{"id":162,"depth":376,"text":165},{"id":185,"depth":371,"text":188,"children":380},[381,382,383],{"id":209,"depth":376,"text":212},{"id":218,"depth":376,"text":221},{"id":233,"depth":376,"text":236},{"id":308,"depth":371,"text":311},{"id":356,"depth":371,"text":359},"markdown","content:design-system:5.components:checkbox.md","content","design-system/5.components/checkbox.md","md",["ShallowRef",392],["ShallowReactive",393],{"/design-system/components/checkbox":394},[395,401],{"_path":396,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":397,"description":398,"layout":13,"label":14,"_type":386,"_id":399,"_source":388,"_file":400,"_extension":390},"/design-system/components/category-grid","Category grid","The Category grid component shows multiple cards laid out in a grid, allowing users to browse a collection of categories.","content:design-system:5.components:category-grid.md","design-system/5.components/category-grid.md",{"_path":402,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":403,"description":404,"layout":13,"label":14,"_type":386,"_id":405,"_source":388,"_file":406,"_extension":390},"/design-system/components/chip","Chip","The Chip component is an interactive element to draw a user’s user attention to a category.","content:design-system:5.components:chip.md","design-system/5.components/chip.md",["ShallowRef",408],{},[410,415,654],{"title":411,"_path":412,"icon":413,"layout":414},"Ripple Design System","/","carbon:home","home",{"title":416,"_path":417,"children":418},"Design System","/design-system",[419,435,450,478,512],{"title":420,"_path":421,"children":422},"About","/design-system/about",[423,426,429,432],{"title":424,"_path":425,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":427,"_path":428,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":430,"_path":431,"layout":13},"Support","/design-system/about/getting-support",{"title":433,"_path":434,"layout":13},"Contributing","/design-system/about/contributing",{"title":436,"_path":437,"children":438},"Design","/design-system/design",[439,442,445,448],{"title":440,"_path":441,"layout":13},"Getting started","/design-system/design/getting-started",{"title":443,"_path":444,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":446,"_path":447,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":449,"_path":337,"layout":13},"Theming guidance for designers",{"title":451,"_path":452,"children":453},"Develop","/design-system/develop",[454,456,458,460],{"title":440,"_path":455,"layout":13},"/design-system/develop/getting-started",{"title":433,"_path":457,"layout":13},"/design-system/develop/contributing",{"title":459,"_path":345,"layout":13},"Theme and brand application",{"title":26,"_path":461,"children":462,"layout":13},"/design-system/develop/usage",[463,466,469,472,475],{"title":464,"_path":465,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":467,"_path":468,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":470,"_path":471,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":473,"_path":474,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":476,"_path":477,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":479,"_path":480,"children":481},"Styles","/design-system/styles",[482,485,488,491,494,497,500,503,506,509],{"title":483,"_path":484,"layout":13},"Colour","/design-system/styles/colour",{"title":486,"_path":487,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":489,"_path":490,"layout":13},"Grid","/design-system/styles/grid",{"title":492,"_path":493,"layout":13},"Icons","/design-system/styles/icons",{"title":495,"_path":496,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":498,"_path":499,"layout":13},"Layout","/design-system/styles/layout",{"title":501,"_path":502,"layout":13},"Logo","/design-system/styles/logo",{"title":504,"_path":505,"layout":13},"Motion","/design-system/styles/motion",{"title":507,"_path":508,"layout":13},"Spacing","/design-system/styles/spacing",{"title":510,"_path":511,"layout":13},"Typography","/design-system/styles/typography",{"title":513,"_path":514,"children":515},"Components","/design-system/components",[516,519,522,525,528,531,534,537,540,543,546,549,550,551,552,555,558,561,564,567,570,573,576,579,582,585,588,591,594,597,600,603,606,609,612,615,618,621,624,627,630,633,636,639,642,645,648,651],{"title":517,"_path":518,"layout":13},"Accordion","/design-system/components/accordion",{"title":520,"_path":521,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":523,"_path":524,"layout":13},"Alert","/design-system/components/alert",{"title":526,"_path":527,"layout":13},"Block quote","/design-system/components/block-quote",{"title":529,"_path":530,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":532,"_path":533,"layout":13},"Button","/design-system/components/button",{"title":535,"_path":536,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":538,"_path":539,"layout":13},"Callout","/design-system/components/callout",{"title":541,"_path":542,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":544,"_path":545,"layout":13},"Card","/design-system/components/card",{"title":547,"_path":548,"layout":13},"Carousel","/design-system/components/carousel",{"title":397,"_path":396,"layout":13},{"title":11,"_path":7,"layout":13},{"title":403,"_path":402,"layout":13},{"title":553,"_path":554,"layout":13},"Contact us","/design-system/components/contact-us",{"title":556,"_path":557,"layout":13},"Date input","/design-system/components/date-input",{"title":559,"_path":560,"layout":13},"Detail list","/design-system/components/detail-list",{"title":562,"_path":563,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":565,"_path":566,"layout":13},"File","/design-system/components/file",{"title":568,"_path":569,"layout":13},"Footer","/design-system/components/footer",{"title":571,"_path":572,"layout":13},"Form","/design-system/components/form",{"title":574,"_path":575,"layout":13},"Form alert","/design-system/components/form-alert",{"title":577,"_path":578,"layout":13},"Header","/design-system/components/header",{"title":580,"_path":581,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":583,"_path":584,"layout":13},"Input field","/design-system/components/input-field",{"title":586,"_path":587,"layout":13},"Key dates","/design-system/components/key-dates",{"title":589,"_path":590,"layout":13},"Media","/design-system/components/media",{"title":592,"_path":593,"layout":13},"Media embed","/design-system/components/media-embed",{"title":595,"_path":596,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":598,"_path":599,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":601,"_path":602,"layout":13},"Option button","/design-system/components/option-button",{"title":604,"_path":605,"layout":13},"Page action","/design-system/components/page-action",{"title":607,"_path":608,"layout":13},"Pagination","/design-system/components/pagination",{"title":610,"_path":611,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":613,"_path":614,"layout":13},"Profile","/design-system/components/profile",{"title":616,"_path":617,"layout":13},"Radio button","/design-system/components/radio-button",{"title":619,"_path":620,"layout":13},"Related links","/design-system/components/related-links",{"title":622,"_path":623,"layout":13},"Results listing","/design-system/components/results-listing",{"title":625,"_path":626,"layout":13},"Search bar","/design-system/components/search-bar",{"title":628,"_path":629,"layout":13},"Skip link","/design-system/components/skip-link",{"title":631,"_path":632,"layout":13},"Social share","/design-system/components/social-share",{"title":634,"_path":635,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":637,"_path":638,"layout":13},"Table","/design-system/components/table",{"title":640,"_path":641,"layout":13},"Tabs","/design-system/components/tabs",{"title":643,"_path":644,"layout":13},"Tag","/design-system/components/tag",{"title":646,"_path":647,"layout":13},"Text area","/design-system/components/text-area",{"title":649,"_path":650,"layout":13},"Timeline","/design-system/components/timeline",{"title":652,"_path":653,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":655,"_path":656,"children":657,"layout":13},"Ripple Framework","/framework",[658,659,677,699],{"title":655,"_path":656,"layout":13},{"title":660,"_path":661,"children":662},"Key Concepts","/framework/key-concepts",[663,665,668,671,674],{"title":470,"_path":664,"layout":13},"/framework/key-concepts/nuxt",{"title":666,"_path":667,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":669,"_path":670,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":672,"_path":673,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":675,"_path":676,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":678,"_path":679,"children":680},"Guides","/framework/guides",[681,684,687,690,693,696],{"title":682,"_path":683,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":685,"_path":686,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":688,"_path":689,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":691,"_path":692,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":694,"_path":695,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":697,"_path":698,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":700,"_path":701,"layout":13},"Core modules","/framework/core-modules",["Reactive",703],["Set"],["Reactive",705],{"module-navigation":706},null,true,"/design-system/components/checkbox/",1714695654479]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/chip/_payload.json b/design-system/components/chip/_payload.json
index d7d72ea53e..58d5d176ec 100644
--- a/design-system/components/chip/_payload.json
+++ b/design-system/components/chip/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":104,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695153352]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":104,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695651499]
\ No newline at end of file
diff --git a/design-system/components/chip/index.html b/design-system/components/chip/index.html
index 67f7e0de03..6b97fa5f3b 100644
--- a/design-system/components/chip/index.html
+++ b/design-system/components/chip/index.html
@@ -28,63 +28,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -96,8 +96,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Chip</h1><p class="rpl-type-p-large" data-v-3163c6df>The Chip component is an interactive element to draw a user’s user attention to a category.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use chips to represent options in a specific context. They are unlike buttons, which are persistent across contexts.<!--]--></p><p><!--[-->A chip labels or draws attention to categorised content. Chips can be interactive and help users navigate to relevant content easily.<!--]--></p><p><!--[-->When displaying multiple chips together, place them in a row.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-chip--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-chip--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Include keywords.<!--]--></li><li><!--[-->Use on any content page.<!--]--></li><li><!--[-->Link through to the topic page.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t include punctuation.<!--]--></li><li><!--[-->Don’t use as a heading.<!--]--></li><li><!--[-->Don’t include more than 4 words.<!--]--></li><li><!--[-->Don’t use without an interaction or link.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="chips-or-buttons" data-v-fff5b905><a href="#chips-or-buttons" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Chips or buttons?<!--]--></a></h2><p><!--[-->While chips and buttons both prompt calls to action, they are different.<!--]--></p><p><!--[-->Multiple chips should all sit together. Buttons should sit separately from each other.<!--]--></p><p><!--[-->Chips react to their context, but buttons are fixed and remain static.<!--]--></p><p><!--[-->Chips convey forking paths in a user experience, while buttons show a linear step.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->The chip has a default and reverse variant, allowing flexible use across a range of backgrounds.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-chip--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-chip--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="reverse" data-v-ea525968><a href="#reverse" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Reverse<!--]--></a></h2><p><!--[-->Use the reverse variant when the chip appears on the primary colour.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-chip--reversed&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-chip--reversed&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->The chip uses the primary and primary-accessible colour tokens. This is to meet colour contrast requirements when theming.<!--]--></p><p><!--[-->If the site primary colour is ‘light’, the chip content will display in the type-default colour. The border will always take on the site primary colour.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-chip--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-chip--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/chip.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/chip/_payload.json">[{"state":1,"once":550,"_errors":552,"serverRendered":555,"path":7,"prerenderedAt":556},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":239,"$sdd-globals":255,"$sdd-navigation":257},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/chip":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":234,"_id":235,"_source":236,"_file":237,"_extension":238},"/design-system/components/chip","components",false,"","Chip","The Chip component is an interactive element to draw a user’s user attention to a category.","page","Core",{"type":16,"children":17,"toc":220},"root",[18,27,33,38,43,48,55,75,81,104,108,114,119,124,129,134,137,143,148,154,157,163,168,172,175,181,186,191,198],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use chips to represent options in a specific context. They are unlike buttons, which are persistent across contexts.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"A chip labels or draws attention to categorised content. Chips can be interactive and help users navigate to relevant content easily.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"When displaying multiple chips together, place them in a row.",{"type":19,"tag":44,"props":45,"children":47},"docs-example",{"id":46},"core-navigation-chip--default-story",[],{"type":19,"tag":49,"props":50,"children":52},"h3",{"id":51},"when-and-how-to-use",[53],{"type":25,"value":54},"When and how to use",{"type":19,"tag":56,"props":57,"children":58},"ul",{},[59,65,70],{"type":19,"tag":60,"props":61,"children":62},"li",{},[63],{"type":25,"value":64},"Include keywords.",{"type":19,"tag":60,"props":66,"children":67},{},[68],{"type":25,"value":69},"Use on any content page.",{"type":19,"tag":60,"props":71,"children":72},{},[73],{"type":25,"value":74},"Link through to the topic page.",{"type":19,"tag":49,"props":76,"children":78},{"id":77},"when-and-how-not-to-use",[79],{"type":25,"value":80},"When and how not to use",{"type":19,"tag":56,"props":82,"children":83},{},[84,89,94,99],{"type":19,"tag":60,"props":85,"children":86},{},[87],{"type":25,"value":88},"Don’t include punctuation.",{"type":19,"tag":60,"props":90,"children":91},{},[92],{"type":25,"value":93},"Don’t use as a heading.",{"type":19,"tag":60,"props":95,"children":96},{},[97],{"type":25,"value":98},"Don’t include more than 4 words.",{"type":19,"tag":60,"props":100,"children":101},{},[102],{"type":25,"value":103},"Don’t use without an interaction or link.",{"type":19,"tag":105,"props":106,"children":107},"hr",{},[],{"type":19,"tag":20,"props":109,"children":111},{"id":110},"chips-or-buttons",[112],{"type":25,"value":113},"Chips or buttons?",{"type":19,"tag":28,"props":115,"children":116},{},[117],{"type":25,"value":118},"While chips and buttons both prompt calls to action, they are different.",{"type":19,"tag":28,"props":120,"children":121},{},[122],{"type":25,"value":123},"Multiple chips should all sit together. Buttons should sit separately from each other.",{"type":19,"tag":28,"props":125,"children":126},{},[127],{"type":25,"value":128},"Chips react to their context, but buttons are fixed and remain static.",{"type":19,"tag":28,"props":130,"children":131},{},[132],{"type":25,"value":133},"Chips convey forking paths in a user experience, while buttons show a linear step.",{"type":19,"tag":105,"props":135,"children":136},{},[],{"type":19,"tag":20,"props":138,"children":140},{"id":139},"variants",[141],{"type":25,"value":142},"Variants",{"type":19,"tag":28,"props":144,"children":145},{},[146],{"type":25,"value":147},"The chip has a default and reverse variant, allowing flexible use across a range of backgrounds.",{"type":19,"tag":49,"props":149,"children":151},{"id":150},"default",[152],{"type":25,"value":153},"Default",{"type":19,"tag":44,"props":155,"children":156},{"id":46},[],{"type":19,"tag":49,"props":158,"children":160},{"id":159},"reverse",[161],{"type":25,"value":162},"Reverse",{"type":19,"tag":28,"props":164,"children":165},{},[166],{"type":25,"value":167},"Use the reverse variant when the chip appears on the primary colour.",{"type":19,"tag":44,"props":169,"children":171},{"id":170},"core-navigation-chip--reversed",[],{"type":19,"tag":105,"props":173,"children":174},{},[],{"type":19,"tag":20,"props":176,"children":178},{"id":177},"theming",[179],{"type":25,"value":180},"Theming",{"type":19,"tag":28,"props":182,"children":183},{},[184],{"type":25,"value":185},"The chip uses the primary and primary-accessible colour tokens. This is to meet colour contrast requirements when theming.",{"type":19,"tag":28,"props":187,"children":188},{},[189],{"type":25,"value":190},"If the site primary colour is ‘light’, the chip content will display in the type-default colour. The border will always take on the site primary colour.",{"type":19,"tag":192,"props":193,"children":194},"docs-theme-chooser",{},[195],{"type":19,"tag":44,"props":196,"children":197},{"id":46},[],{"type":19,"tag":28,"props":199,"children":200},{},[201,203,210,212,218],{"type":25,"value":202},"To create your own theme see ",{"type":19,"tag":204,"props":205,"children":207},"a",{"href":206},"/design-system/design/theming-guidance-for-designers",[208],{"type":25,"value":209},"theming guidance for designers",{"type":25,"value":211}," or ",{"type":19,"tag":204,"props":213,"children":215},{"href":214},"/design-system/develop/theming",[216],{"type":25,"value":217},"theming guidance for developers",{"type":25,"value":219},".",{"title":10,"searchDepth":221,"depth":221,"links":222},2,[223,228,229,233],{"id":22,"depth":221,"text":26,"children":224},[225,227],{"id":51,"depth":226,"text":54},3,{"id":77,"depth":226,"text":80},{"id":110,"depth":221,"text":113},{"id":139,"depth":221,"text":142,"children":230},[231,232],{"id":150,"depth":226,"text":153},{"id":159,"depth":226,"text":162},{"id":177,"depth":221,"text":180},"markdown","content:design-system:5.components:chip.md","content","design-system/5.components/chip.md","md",["ShallowRef",240],["ShallowReactive",241],{"/design-system/components/chip":242},[243,249],{"_path":244,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":245,"description":246,"layout":13,"label":14,"_type":234,"_id":247,"_source":236,"_file":248,"_extension":238},"/design-system/components/checkbox","Checkbox","The Checkbox component lets users select one or more options from a list.","content:design-system:5.components:checkbox.md","design-system/5.components/checkbox.md",{"_path":250,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":251,"description":252,"layout":13,"label":14,"_type":234,"_id":253,"_source":236,"_file":254,"_extension":238},"/design-system/components/contact-us","Contact us","The Contact us component is a list of contact details and links to help the user get in touch with you.","content:design-system:5.components:contact-us.md","design-system/5.components/contact-us.md",["ShallowRef",256],{},[258,263,502],{"title":259,"_path":260,"icon":261,"layout":262},"Ripple Design System","/","carbon:home","home",{"title":264,"_path":265,"children":266},"Design System","/design-system",[267,283,298,326,360],{"title":268,"_path":269,"children":270},"About","/design-system/about",[271,274,277,280],{"title":272,"_path":273,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":275,"_path":276,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":278,"_path":279,"layout":13},"Support","/design-system/about/getting-support",{"title":281,"_path":282,"layout":13},"Contributing","/design-system/about/contributing",{"title":284,"_path":285,"children":286},"Design","/design-system/design",[287,290,293,296],{"title":288,"_path":289,"layout":13},"Getting started","/design-system/design/getting-started",{"title":291,"_path":292,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":294,"_path":295,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":297,"_path":206,"layout":13},"Theming guidance for designers",{"title":299,"_path":300,"children":301},"Develop","/design-system/develop",[302,304,306,308],{"title":288,"_path":303,"layout":13},"/design-system/develop/getting-started",{"title":281,"_path":305,"layout":13},"/design-system/develop/contributing",{"title":307,"_path":214,"layout":13},"Theme and brand application",{"title":26,"_path":309,"children":310,"layout":13},"/design-system/develop/usage",[311,314,317,320,323],{"title":312,"_path":313,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":315,"_path":316,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":318,"_path":319,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":321,"_path":322,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":324,"_path":325,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":327,"_path":328,"children":329},"Styles","/design-system/styles",[330,333,336,339,342,345,348,351,354,357],{"title":331,"_path":332,"layout":13},"Colour","/design-system/styles/colour",{"title":334,"_path":335,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":337,"_path":338,"layout":13},"Grid","/design-system/styles/grid",{"title":340,"_path":341,"layout":13},"Icons","/design-system/styles/icons",{"title":343,"_path":344,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":346,"_path":347,"layout":13},"Layout","/design-system/styles/layout",{"title":349,"_path":350,"layout":13},"Logo","/design-system/styles/logo",{"title":352,"_path":353,"layout":13},"Motion","/design-system/styles/motion",{"title":355,"_path":356,"layout":13},"Spacing","/design-system/styles/spacing",{"title":358,"_path":359,"layout":13},"Typography","/design-system/styles/typography",{"title":361,"_path":362,"children":363},"Components","/design-system/components",[364,367,370,373,376,379,382,385,388,391,394,397,400,401,402,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,490,493,496,499],{"title":365,"_path":366,"layout":13},"Accordion","/design-system/components/accordion",{"title":368,"_path":369,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":371,"_path":372,"layout":13},"Alert","/design-system/components/alert",{"title":374,"_path":375,"layout":13},"Block quote","/design-system/components/block-quote",{"title":377,"_path":378,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":380,"_path":381,"layout":13},"Button","/design-system/components/button",{"title":383,"_path":384,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":386,"_path":387,"layout":13},"Callout","/design-system/components/callout",{"title":389,"_path":390,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":392,"_path":393,"layout":13},"Card","/design-system/components/card",{"title":395,"_path":396,"layout":13},"Carousel","/design-system/components/carousel",{"title":398,"_path":399,"layout":13},"Category grid","/design-system/components/category-grid",{"title":245,"_path":244,"layout":13},{"title":11,"_path":7,"layout":13},{"title":251,"_path":250,"layout":13},{"title":404,"_path":405,"layout":13},"Date input","/design-system/components/date-input",{"title":407,"_path":408,"layout":13},"Detail list","/design-system/components/detail-list",{"title":410,"_path":411,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":413,"_path":414,"layout":13},"File","/design-system/components/file",{"title":416,"_path":417,"layout":13},"Footer","/design-system/components/footer",{"title":419,"_path":420,"layout":13},"Form","/design-system/components/form",{"title":422,"_path":423,"layout":13},"Form alert","/design-system/components/form-alert",{"title":425,"_path":426,"layout":13},"Header","/design-system/components/header",{"title":428,"_path":429,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":431,"_path":432,"layout":13},"Input field","/design-system/components/input-field",{"title":434,"_path":435,"layout":13},"Key dates","/design-system/components/key-dates",{"title":437,"_path":438,"layout":13},"Media","/design-system/components/media",{"title":440,"_path":441,"layout":13},"Media embed","/design-system/components/media-embed",{"title":443,"_path":444,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":446,"_path":447,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":449,"_path":450,"layout":13},"Option button","/design-system/components/option-button",{"title":452,"_path":453,"layout":13},"Page action","/design-system/components/page-action",{"title":455,"_path":456,"layout":13},"Pagination","/design-system/components/pagination",{"title":458,"_path":459,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":461,"_path":462,"layout":13},"Profile","/design-system/components/profile",{"title":464,"_path":465,"layout":13},"Radio button","/design-system/components/radio-button",{"title":467,"_path":468,"layout":13},"Related links","/design-system/components/related-links",{"title":470,"_path":471,"layout":13},"Results listing","/design-system/components/results-listing",{"title":473,"_path":474,"layout":13},"Search bar","/design-system/components/search-bar",{"title":476,"_path":477,"layout":13},"Skip link","/design-system/components/skip-link",{"title":479,"_path":480,"layout":13},"Social share","/design-system/components/social-share",{"title":482,"_path":483,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":485,"_path":486,"layout":13},"Table","/design-system/components/table",{"title":488,"_path":489,"layout":13},"Tabs","/design-system/components/tabs",{"title":491,"_path":492,"layout":13},"Tag","/design-system/components/tag",{"title":494,"_path":495,"layout":13},"Text area","/design-system/components/text-area",{"title":497,"_path":498,"layout":13},"Timeline","/design-system/components/timeline",{"title":500,"_path":501,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":503,"_path":504,"children":505,"layout":13},"Ripple Framework","/framework",[506,507,525,547],{"title":503,"_path":504,"layout":13},{"title":508,"_path":509,"children":510},"Key Concepts","/framework/key-concepts",[511,513,516,519,522],{"title":318,"_path":512,"layout":13},"/framework/key-concepts/nuxt",{"title":514,"_path":515,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":517,"_path":518,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":520,"_path":521,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":523,"_path":524,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":526,"_path":527,"children":528},"Guides","/framework/guides",[529,532,535,538,541,544],{"title":530,"_path":531,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":533,"_path":534,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":536,"_path":537,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":539,"_path":540,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":542,"_path":543,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":545,"_path":546,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":548,"_path":549,"layout":13},"Core modules","/framework/core-modules",["Reactive",551],["Set"],["Reactive",553],{"module-navigation":554},null,true,1714695153352]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Chip</h1><p class="rpl-type-p-large" data-v-3163c6df>The Chip component is an interactive element to draw a user’s user attention to a category.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use chips to represent options in a specific context. They are unlike buttons, which are persistent across contexts.<!--]--></p><p><!--[-->A chip labels or draws attention to categorised content. Chips can be interactive and help users navigate to relevant content easily.<!--]--></p><p><!--[-->When displaying multiple chips together, place them in a row.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-chip--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-chip--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Include keywords.<!--]--></li><li><!--[-->Use on any content page.<!--]--></li><li><!--[-->Link through to the topic page.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t include punctuation.<!--]--></li><li><!--[-->Don’t use as a heading.<!--]--></li><li><!--[-->Don’t include more than 4 words.<!--]--></li><li><!--[-->Don’t use without an interaction or link.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="chips-or-buttons" data-v-fff5b905><a href="#chips-or-buttons" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Chips or buttons?<!--]--></a></h2><p><!--[-->While chips and buttons both prompt calls to action, they are different.<!--]--></p><p><!--[-->Multiple chips should all sit together. Buttons should sit separately from each other.<!--]--></p><p><!--[-->Chips react to their context, but buttons are fixed and remain static.<!--]--></p><p><!--[-->Chips convey forking paths in a user experience, while buttons show a linear step.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->The chip has a default and reverse variant, allowing flexible use across a range of backgrounds.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-chip--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-chip--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="reverse" data-v-ea525968><a href="#reverse" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Reverse<!--]--></a></h2><p><!--[-->Use the reverse variant when the chip appears on the primary colour.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-chip--reversed&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-chip--reversed&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->The chip uses the primary and primary-accessible colour tokens. This is to meet colour contrast requirements when theming.<!--]--></p><p><!--[-->If the site primary colour is ‘light’, the chip content will display in the type-default colour. The border will always take on the site primary colour.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-chip--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-chip--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/chip.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/chip/_payload.json">[{"state":1,"once":550,"_errors":552,"serverRendered":555,"path":7,"prerenderedAt":556},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":239,"$sdd-globals":255,"$sdd-navigation":257},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/chip":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":234,"_id":235,"_source":236,"_file":237,"_extension":238},"/design-system/components/chip","components",false,"","Chip","The Chip component is an interactive element to draw a user’s user attention to a category.","page","Core",{"type":16,"children":17,"toc":220},"root",[18,27,33,38,43,48,55,75,81,104,108,114,119,124,129,134,137,143,148,154,157,163,168,172,175,181,186,191,198],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use chips to represent options in a specific context. They are unlike buttons, which are persistent across contexts.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"A chip labels or draws attention to categorised content. Chips can be interactive and help users navigate to relevant content easily.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"When displaying multiple chips together, place them in a row.",{"type":19,"tag":44,"props":45,"children":47},"docs-example",{"id":46},"core-navigation-chip--default-story",[],{"type":19,"tag":49,"props":50,"children":52},"h3",{"id":51},"when-and-how-to-use",[53],{"type":25,"value":54},"When and how to use",{"type":19,"tag":56,"props":57,"children":58},"ul",{},[59,65,70],{"type":19,"tag":60,"props":61,"children":62},"li",{},[63],{"type":25,"value":64},"Include keywords.",{"type":19,"tag":60,"props":66,"children":67},{},[68],{"type":25,"value":69},"Use on any content page.",{"type":19,"tag":60,"props":71,"children":72},{},[73],{"type":25,"value":74},"Link through to the topic page.",{"type":19,"tag":49,"props":76,"children":78},{"id":77},"when-and-how-not-to-use",[79],{"type":25,"value":80},"When and how not to use",{"type":19,"tag":56,"props":82,"children":83},{},[84,89,94,99],{"type":19,"tag":60,"props":85,"children":86},{},[87],{"type":25,"value":88},"Don’t include punctuation.",{"type":19,"tag":60,"props":90,"children":91},{},[92],{"type":25,"value":93},"Don’t use as a heading.",{"type":19,"tag":60,"props":95,"children":96},{},[97],{"type":25,"value":98},"Don’t include more than 4 words.",{"type":19,"tag":60,"props":100,"children":101},{},[102],{"type":25,"value":103},"Don’t use without an interaction or link.",{"type":19,"tag":105,"props":106,"children":107},"hr",{},[],{"type":19,"tag":20,"props":109,"children":111},{"id":110},"chips-or-buttons",[112],{"type":25,"value":113},"Chips or buttons?",{"type":19,"tag":28,"props":115,"children":116},{},[117],{"type":25,"value":118},"While chips and buttons both prompt calls to action, they are different.",{"type":19,"tag":28,"props":120,"children":121},{},[122],{"type":25,"value":123},"Multiple chips should all sit together. Buttons should sit separately from each other.",{"type":19,"tag":28,"props":125,"children":126},{},[127],{"type":25,"value":128},"Chips react to their context, but buttons are fixed and remain static.",{"type":19,"tag":28,"props":130,"children":131},{},[132],{"type":25,"value":133},"Chips convey forking paths in a user experience, while buttons show a linear step.",{"type":19,"tag":105,"props":135,"children":136},{},[],{"type":19,"tag":20,"props":138,"children":140},{"id":139},"variants",[141],{"type":25,"value":142},"Variants",{"type":19,"tag":28,"props":144,"children":145},{},[146],{"type":25,"value":147},"The chip has a default and reverse variant, allowing flexible use across a range of backgrounds.",{"type":19,"tag":49,"props":149,"children":151},{"id":150},"default",[152],{"type":25,"value":153},"Default",{"type":19,"tag":44,"props":155,"children":156},{"id":46},[],{"type":19,"tag":49,"props":158,"children":160},{"id":159},"reverse",[161],{"type":25,"value":162},"Reverse",{"type":19,"tag":28,"props":164,"children":165},{},[166],{"type":25,"value":167},"Use the reverse variant when the chip appears on the primary colour.",{"type":19,"tag":44,"props":169,"children":171},{"id":170},"core-navigation-chip--reversed",[],{"type":19,"tag":105,"props":173,"children":174},{},[],{"type":19,"tag":20,"props":176,"children":178},{"id":177},"theming",[179],{"type":25,"value":180},"Theming",{"type":19,"tag":28,"props":182,"children":183},{},[184],{"type":25,"value":185},"The chip uses the primary and primary-accessible colour tokens. This is to meet colour contrast requirements when theming.",{"type":19,"tag":28,"props":187,"children":188},{},[189],{"type":25,"value":190},"If the site primary colour is ‘light’, the chip content will display in the type-default colour. The border will always take on the site primary colour.",{"type":19,"tag":192,"props":193,"children":194},"docs-theme-chooser",{},[195],{"type":19,"tag":44,"props":196,"children":197},{"id":46},[],{"type":19,"tag":28,"props":199,"children":200},{},[201,203,210,212,218],{"type":25,"value":202},"To create your own theme see ",{"type":19,"tag":204,"props":205,"children":207},"a",{"href":206},"/design-system/design/theming-guidance-for-designers",[208],{"type":25,"value":209},"theming guidance for designers",{"type":25,"value":211}," or ",{"type":19,"tag":204,"props":213,"children":215},{"href":214},"/design-system/develop/theming",[216],{"type":25,"value":217},"theming guidance for developers",{"type":25,"value":219},".",{"title":10,"searchDepth":221,"depth":221,"links":222},2,[223,228,229,233],{"id":22,"depth":221,"text":26,"children":224},[225,227],{"id":51,"depth":226,"text":54},3,{"id":77,"depth":226,"text":80},{"id":110,"depth":221,"text":113},{"id":139,"depth":221,"text":142,"children":230},[231,232],{"id":150,"depth":226,"text":153},{"id":159,"depth":226,"text":162},{"id":177,"depth":221,"text":180},"markdown","content:design-system:5.components:chip.md","content","design-system/5.components/chip.md","md",["ShallowRef",240],["ShallowReactive",241],{"/design-system/components/chip":242},[243,249],{"_path":244,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":245,"description":246,"layout":13,"label":14,"_type":234,"_id":247,"_source":236,"_file":248,"_extension":238},"/design-system/components/checkbox","Checkbox","The Checkbox component lets users select one or more options from a list.","content:design-system:5.components:checkbox.md","design-system/5.components/checkbox.md",{"_path":250,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":251,"description":252,"layout":13,"label":14,"_type":234,"_id":253,"_source":236,"_file":254,"_extension":238},"/design-system/components/contact-us","Contact us","The Contact us component is a list of contact details and links to help the user get in touch with you.","content:design-system:5.components:contact-us.md","design-system/5.components/contact-us.md",["ShallowRef",256],{},[258,263,502],{"title":259,"_path":260,"icon":261,"layout":262},"Ripple Design System","/","carbon:home","home",{"title":264,"_path":265,"children":266},"Design System","/design-system",[267,283,298,326,360],{"title":268,"_path":269,"children":270},"About","/design-system/about",[271,274,277,280],{"title":272,"_path":273,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":275,"_path":276,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":278,"_path":279,"layout":13},"Support","/design-system/about/getting-support",{"title":281,"_path":282,"layout":13},"Contributing","/design-system/about/contributing",{"title":284,"_path":285,"children":286},"Design","/design-system/design",[287,290,293,296],{"title":288,"_path":289,"layout":13},"Getting started","/design-system/design/getting-started",{"title":291,"_path":292,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":294,"_path":295,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":297,"_path":206,"layout":13},"Theming guidance for designers",{"title":299,"_path":300,"children":301},"Develop","/design-system/develop",[302,304,306,308],{"title":288,"_path":303,"layout":13},"/design-system/develop/getting-started",{"title":281,"_path":305,"layout":13},"/design-system/develop/contributing",{"title":307,"_path":214,"layout":13},"Theme and brand application",{"title":26,"_path":309,"children":310,"layout":13},"/design-system/develop/usage",[311,314,317,320,323],{"title":312,"_path":313,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":315,"_path":316,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":318,"_path":319,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":321,"_path":322,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":324,"_path":325,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":327,"_path":328,"children":329},"Styles","/design-system/styles",[330,333,336,339,342,345,348,351,354,357],{"title":331,"_path":332,"layout":13},"Colour","/design-system/styles/colour",{"title":334,"_path":335,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":337,"_path":338,"layout":13},"Grid","/design-system/styles/grid",{"title":340,"_path":341,"layout":13},"Icons","/design-system/styles/icons",{"title":343,"_path":344,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":346,"_path":347,"layout":13},"Layout","/design-system/styles/layout",{"title":349,"_path":350,"layout":13},"Logo","/design-system/styles/logo",{"title":352,"_path":353,"layout":13},"Motion","/design-system/styles/motion",{"title":355,"_path":356,"layout":13},"Spacing","/design-system/styles/spacing",{"title":358,"_path":359,"layout":13},"Typography","/design-system/styles/typography",{"title":361,"_path":362,"children":363},"Components","/design-system/components",[364,367,370,373,376,379,382,385,388,391,394,397,400,401,402,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,490,493,496,499],{"title":365,"_path":366,"layout":13},"Accordion","/design-system/components/accordion",{"title":368,"_path":369,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":371,"_path":372,"layout":13},"Alert","/design-system/components/alert",{"title":374,"_path":375,"layout":13},"Block quote","/design-system/components/block-quote",{"title":377,"_path":378,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":380,"_path":381,"layout":13},"Button","/design-system/components/button",{"title":383,"_path":384,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":386,"_path":387,"layout":13},"Callout","/design-system/components/callout",{"title":389,"_path":390,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":392,"_path":393,"layout":13},"Card","/design-system/components/card",{"title":395,"_path":396,"layout":13},"Carousel","/design-system/components/carousel",{"title":398,"_path":399,"layout":13},"Category grid","/design-system/components/category-grid",{"title":245,"_path":244,"layout":13},{"title":11,"_path":7,"layout":13},{"title":251,"_path":250,"layout":13},{"title":404,"_path":405,"layout":13},"Date input","/design-system/components/date-input",{"title":407,"_path":408,"layout":13},"Detail list","/design-system/components/detail-list",{"title":410,"_path":411,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":413,"_path":414,"layout":13},"File","/design-system/components/file",{"title":416,"_path":417,"layout":13},"Footer","/design-system/components/footer",{"title":419,"_path":420,"layout":13},"Form","/design-system/components/form",{"title":422,"_path":423,"layout":13},"Form alert","/design-system/components/form-alert",{"title":425,"_path":426,"layout":13},"Header","/design-system/components/header",{"title":428,"_path":429,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":431,"_path":432,"layout":13},"Input field","/design-system/components/input-field",{"title":434,"_path":435,"layout":13},"Key dates","/design-system/components/key-dates",{"title":437,"_path":438,"layout":13},"Media","/design-system/components/media",{"title":440,"_path":441,"layout":13},"Media embed","/design-system/components/media-embed",{"title":443,"_path":444,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":446,"_path":447,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":449,"_path":450,"layout":13},"Option button","/design-system/components/option-button",{"title":452,"_path":453,"layout":13},"Page action","/design-system/components/page-action",{"title":455,"_path":456,"layout":13},"Pagination","/design-system/components/pagination",{"title":458,"_path":459,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":461,"_path":462,"layout":13},"Profile","/design-system/components/profile",{"title":464,"_path":465,"layout":13},"Radio button","/design-system/components/radio-button",{"title":467,"_path":468,"layout":13},"Related links","/design-system/components/related-links",{"title":470,"_path":471,"layout":13},"Results listing","/design-system/components/results-listing",{"title":473,"_path":474,"layout":13},"Search bar","/design-system/components/search-bar",{"title":476,"_path":477,"layout":13},"Skip link","/design-system/components/skip-link",{"title":479,"_path":480,"layout":13},"Social share","/design-system/components/social-share",{"title":482,"_path":483,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":485,"_path":486,"layout":13},"Table","/design-system/components/table",{"title":488,"_path":489,"layout":13},"Tabs","/design-system/components/tabs",{"title":491,"_path":492,"layout":13},"Tag","/design-system/components/tag",{"title":494,"_path":495,"layout":13},"Text area","/design-system/components/text-area",{"title":497,"_path":498,"layout":13},"Timeline","/design-system/components/timeline",{"title":500,"_path":501,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":503,"_path":504,"children":505,"layout":13},"Ripple Framework","/framework",[506,507,525,547],{"title":503,"_path":504,"layout":13},{"title":508,"_path":509,"children":510},"Key Concepts","/framework/key-concepts",[511,513,516,519,522],{"title":318,"_path":512,"layout":13},"/framework/key-concepts/nuxt",{"title":514,"_path":515,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":517,"_path":518,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":520,"_path":521,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":523,"_path":524,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":526,"_path":527,"children":528},"Guides","/framework/guides",[529,532,535,538,541,544],{"title":530,"_path":531,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":533,"_path":534,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":536,"_path":537,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":539,"_path":540,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":542,"_path":543,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":545,"_path":546,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":548,"_path":549,"layout":13},"Core modules","/framework/core-modules",["Reactive",551],["Set"],["Reactive",553],{"module-navigation":554},null,true,1714695651499]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/contact-us/_payload.json b/design-system/components/contact-us/_payload.json
index 864e0d4923..374794a186 100644
--- a/design-system/components/contact-us/_payload.json
+++ b/design-system/components/contact-us/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695155879]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695654000]
\ No newline at end of file
diff --git a/design-system/components/contact-us/index.html b/design-system/components/contact-us/index.html
index c543a2ed07..16b0287b5b 100644
--- a/design-system/components/contact-us/index.html
+++ b/design-system/components/contact-us/index.html
@@ -28,63 +28,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -96,8 +96,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Contact us</h1><p class="rpl-type-p-large" data-v-3163c6df>The Contact us component is a list of contact details and links to help the user get in touch with you.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the contact us component to show the user multiple pieces of contact information or actions. The details should be related to the page content and a single point of contact.<!--]--></p><p><!--[-->Contact us details can include a:<!--]--></p><ul><!--[--><li><!--[-->contact person<!--]--></li><li><!--[-->address<!--]--></li><li><!--[-->phone number<!--]--></li><li><!--[-->social media account.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-contact-us--contact-us&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-contact-us--contact-us&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Provide users with additional contact details relevant to the page.<!--]--></li><li><!--[-->Display any combination of physical and postal addresses, phone numbers, email addresses and common social media accounts.<!--]--></li><li><!--[-->Display in the sidebar of the page.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->If you add social media accounts to the contact us component, don’t add the social share component.<!--]--></li><li><!--[-->Never use unrelated contact details or social media accounts.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Contact us uses colour for:<!--]--></p><ul><!--[--><li><!--[-->visual prominence for key information<!--]--></li><li><!--[-->link icons.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-contact-us--contact-us&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-contact-us--contact-us&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/contact-us.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/contact-us/_payload.json">[{"state":1,"once":494,"_errors":496,"serverRendered":499,"path":500,"prerenderedAt":501},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":183,"$sdd-globals":199,"$sdd-navigation":201},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/contact-us":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":178,"_id":179,"_source":180,"_file":181,"_extension":182},"/design-system/components/contact-us","components",false,"","Contact us","The Contact us component is a list of contact details and links to help the user get in touch with you.","page","Core",{"type":16,"children":17,"toc":169},"root",[18,27,33,38,63,68,75,93,99,112,116,122,127,140,147],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use the contact us component to show the user multiple pieces of contact information or actions. The details should be related to the page content and a single point of contact.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Contact us details can include a:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48,53,58],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"contact person",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"address",{"type":19,"tag":43,"props":54,"children":55},{},[56],{"type":25,"value":57},"phone number",{"type":19,"tag":43,"props":59,"children":60},{},[61],{"type":25,"value":62},"social media account.",{"type":19,"tag":64,"props":65,"children":67},"docs-example",{"id":66},"core-containers-contact-us--contact-us",[],{"type":19,"tag":69,"props":70,"children":72},"h3",{"id":71},"when-and-how-to-use",[73],{"type":25,"value":74},"When and how to use",{"type":19,"tag":39,"props":76,"children":77},{},[78,83,88],{"type":19,"tag":43,"props":79,"children":80},{},[81],{"type":25,"value":82},"Provide users with additional contact details relevant to the page.",{"type":19,"tag":43,"props":84,"children":85},{},[86],{"type":25,"value":87},"Display any combination of physical and postal addresses, phone numbers, email addresses and common social media accounts.",{"type":19,"tag":43,"props":89,"children":90},{},[91],{"type":25,"value":92},"Display in the sidebar of the page.",{"type":19,"tag":69,"props":94,"children":96},{"id":95},"when-and-how-not-to-use",[97],{"type":25,"value":98},"When and how not to use",{"type":19,"tag":39,"props":100,"children":101},{},[102,107],{"type":19,"tag":43,"props":103,"children":104},{},[105],{"type":25,"value":106},"If you add social media accounts to the contact us component, don’t add the social share component.",{"type":19,"tag":43,"props":108,"children":109},{},[110],{"type":25,"value":111},"Never use unrelated contact details or social media accounts.",{"type":19,"tag":113,"props":114,"children":115},"hr",{},[],{"type":19,"tag":20,"props":117,"children":119},{"id":118},"theming",[120],{"type":25,"value":121},"Theming",{"type":19,"tag":28,"props":123,"children":124},{},[125],{"type":25,"value":126},"Contact us uses colour for:",{"type":19,"tag":39,"props":128,"children":129},{},[130,135],{"type":19,"tag":43,"props":131,"children":132},{},[133],{"type":25,"value":134},"visual prominence for key information",{"type":19,"tag":43,"props":136,"children":137},{},[138],{"type":25,"value":139},"link icons.",{"type":19,"tag":141,"props":142,"children":143},"docs-theme-chooser",{},[144],{"type":19,"tag":64,"props":145,"children":146},{"id":66},[],{"type":19,"tag":28,"props":148,"children":149},{},[150,152,159,161,167],{"type":25,"value":151},"To create your own theme see ",{"type":19,"tag":153,"props":154,"children":156},"a",{"href":155},"/design-system/design/theming-guidance-for-designers",[157],{"type":25,"value":158},"theming guidance for designers",{"type":25,"value":160}," or ",{"type":19,"tag":153,"props":162,"children":164},{"href":163},"/design-system/develop/theming",[165],{"type":25,"value":166},"theming guidance for developers",{"type":25,"value":168},".",{"title":10,"searchDepth":170,"depth":170,"links":171},2,[172,177],{"id":22,"depth":170,"text":26,"children":173},[174,176],{"id":71,"depth":175,"text":74},3,{"id":95,"depth":175,"text":98},{"id":118,"depth":170,"text":121},"markdown","content:design-system:5.components:contact-us.md","content","design-system/5.components/contact-us.md","md",["ShallowRef",184],["ShallowReactive",185],{"/design-system/components/contact-us":186},[187,193],{"_path":188,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":189,"description":190,"layout":13,"label":14,"_type":178,"_id":191,"_source":180,"_file":192,"_extension":182},"/design-system/components/chip","Chip","The Chip component is an interactive element to draw a user’s user attention to a category.","content:design-system:5.components:chip.md","design-system/5.components/chip.md",{"_path":194,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":195,"description":196,"layout":13,"label":14,"_type":178,"_id":197,"_source":180,"_file":198,"_extension":182},"/design-system/components/date-input","Date input","The Date input component helps users enter a date.","content:design-system:5.components:date-input.md","design-system/5.components/date-input.md",["ShallowRef",200],{},[202,207,446],{"title":203,"_path":204,"icon":205,"layout":206},"Ripple Design System","/","carbon:home","home",{"title":208,"_path":209,"children":210},"Design System","/design-system",[211,227,242,270,304],{"title":212,"_path":213,"children":214},"About","/design-system/about",[215,218,221,224],{"title":216,"_path":217,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":219,"_path":220,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":222,"_path":223,"layout":13},"Support","/design-system/about/getting-support",{"title":225,"_path":226,"layout":13},"Contributing","/design-system/about/contributing",{"title":228,"_path":229,"children":230},"Design","/design-system/design",[231,234,237,240],{"title":232,"_path":233,"layout":13},"Getting started","/design-system/design/getting-started",{"title":235,"_path":236,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":238,"_path":239,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":241,"_path":155,"layout":13},"Theming guidance for designers",{"title":243,"_path":244,"children":245},"Develop","/design-system/develop",[246,248,250,252],{"title":232,"_path":247,"layout":13},"/design-system/develop/getting-started",{"title":225,"_path":249,"layout":13},"/design-system/develop/contributing",{"title":251,"_path":163,"layout":13},"Theme and brand application",{"title":26,"_path":253,"children":254,"layout":13},"/design-system/develop/usage",[255,258,261,264,267],{"title":256,"_path":257,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":259,"_path":260,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":262,"_path":263,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":265,"_path":266,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":268,"_path":269,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":271,"_path":272,"children":273},"Styles","/design-system/styles",[274,277,280,283,286,289,292,295,298,301],{"title":275,"_path":276,"layout":13},"Colour","/design-system/styles/colour",{"title":278,"_path":279,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":281,"_path":282,"layout":13},"Grid","/design-system/styles/grid",{"title":284,"_path":285,"layout":13},"Icons","/design-system/styles/icons",{"title":287,"_path":288,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":290,"_path":291,"layout":13},"Layout","/design-system/styles/layout",{"title":293,"_path":294,"layout":13},"Logo","/design-system/styles/logo",{"title":296,"_path":297,"layout":13},"Motion","/design-system/styles/motion",{"title":299,"_path":300,"layout":13},"Spacing","/design-system/styles/spacing",{"title":302,"_path":303,"layout":13},"Typography","/design-system/styles/typography",{"title":305,"_path":306,"children":307},"Components","/design-system/components",[308,311,314,317,320,323,326,329,332,335,338,341,344,347,348,349,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440,443],{"title":309,"_path":310,"layout":13},"Accordion","/design-system/components/accordion",{"title":312,"_path":313,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":315,"_path":316,"layout":13},"Alert","/design-system/components/alert",{"title":318,"_path":319,"layout":13},"Block quote","/design-system/components/block-quote",{"title":321,"_path":322,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":324,"_path":325,"layout":13},"Button","/design-system/components/button",{"title":327,"_path":328,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":330,"_path":331,"layout":13},"Callout","/design-system/components/callout",{"title":333,"_path":334,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":336,"_path":337,"layout":13},"Card","/design-system/components/card",{"title":339,"_path":340,"layout":13},"Carousel","/design-system/components/carousel",{"title":342,"_path":343,"layout":13},"Category grid","/design-system/components/category-grid",{"title":345,"_path":346,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":189,"_path":188,"layout":13},{"title":11,"_path":7,"layout":13},{"title":195,"_path":194,"layout":13},{"title":351,"_path":352,"layout":13},"Detail list","/design-system/components/detail-list",{"title":354,"_path":355,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":357,"_path":358,"layout":13},"File","/design-system/components/file",{"title":360,"_path":361,"layout":13},"Footer","/design-system/components/footer",{"title":363,"_path":364,"layout":13},"Form","/design-system/components/form",{"title":366,"_path":367,"layout":13},"Form alert","/design-system/components/form-alert",{"title":369,"_path":370,"layout":13},"Header","/design-system/components/header",{"title":372,"_path":373,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":375,"_path":376,"layout":13},"Input field","/design-system/components/input-field",{"title":378,"_path":379,"layout":13},"Key dates","/design-system/components/key-dates",{"title":381,"_path":382,"layout":13},"Media","/design-system/components/media",{"title":384,"_path":385,"layout":13},"Media embed","/design-system/components/media-embed",{"title":387,"_path":388,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":390,"_path":391,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":393,"_path":394,"layout":13},"Option button","/design-system/components/option-button",{"title":396,"_path":397,"layout":13},"Page action","/design-system/components/page-action",{"title":399,"_path":400,"layout":13},"Pagination","/design-system/components/pagination",{"title":402,"_path":403,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":405,"_path":406,"layout":13},"Profile","/design-system/components/profile",{"title":408,"_path":409,"layout":13},"Radio button","/design-system/components/radio-button",{"title":411,"_path":412,"layout":13},"Related links","/design-system/components/related-links",{"title":414,"_path":415,"layout":13},"Results listing","/design-system/components/results-listing",{"title":417,"_path":418,"layout":13},"Search bar","/design-system/components/search-bar",{"title":420,"_path":421,"layout":13},"Skip link","/design-system/components/skip-link",{"title":423,"_path":424,"layout":13},"Social share","/design-system/components/social-share",{"title":426,"_path":427,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":429,"_path":430,"layout":13},"Table","/design-system/components/table",{"title":432,"_path":433,"layout":13},"Tabs","/design-system/components/tabs",{"title":435,"_path":436,"layout":13},"Tag","/design-system/components/tag",{"title":438,"_path":439,"layout":13},"Text area","/design-system/components/text-area",{"title":441,"_path":442,"layout":13},"Timeline","/design-system/components/timeline",{"title":444,"_path":445,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":447,"_path":448,"children":449,"layout":13},"Ripple Framework","/framework",[450,451,469,491],{"title":447,"_path":448,"layout":13},{"title":452,"_path":453,"children":454},"Key Concepts","/framework/key-concepts",[455,457,460,463,466],{"title":262,"_path":456,"layout":13},"/framework/key-concepts/nuxt",{"title":458,"_path":459,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":461,"_path":462,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":464,"_path":465,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":467,"_path":468,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":470,"_path":471,"children":472},"Guides","/framework/guides",[473,476,479,482,485,488],{"title":474,"_path":475,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":477,"_path":478,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":480,"_path":481,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":483,"_path":484,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":486,"_path":487,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":489,"_path":490,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":492,"_path":493,"layout":13},"Core modules","/framework/core-modules",["Reactive",495],["Set"],["Reactive",497],{"module-navigation":498},null,true,"/design-system/components/contact-us/",1714695155879]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Contact us</h1><p class="rpl-type-p-large" data-v-3163c6df>The Contact us component is a list of contact details and links to help the user get in touch with you.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the contact us component to show the user multiple pieces of contact information or actions. The details should be related to the page content and a single point of contact.<!--]--></p><p><!--[-->Contact us details can include a:<!--]--></p><ul><!--[--><li><!--[-->contact person<!--]--></li><li><!--[-->address<!--]--></li><li><!--[-->phone number<!--]--></li><li><!--[-->social media account.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-contact-us--contact-us&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-contact-us--contact-us&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Provide users with additional contact details relevant to the page.<!--]--></li><li><!--[-->Display any combination of physical and postal addresses, phone numbers, email addresses and common social media accounts.<!--]--></li><li><!--[-->Display in the sidebar of the page.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->If you add social media accounts to the contact us component, don’t add the social share component.<!--]--></li><li><!--[-->Never use unrelated contact details or social media accounts.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Contact us uses colour for:<!--]--></p><ul><!--[--><li><!--[-->visual prominence for key information<!--]--></li><li><!--[-->link icons.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-contact-us--contact-us&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-contact-us--contact-us&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/contact-us.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/contact-us/_payload.json">[{"state":1,"once":494,"_errors":496,"serverRendered":499,"path":500,"prerenderedAt":501},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":183,"$sdd-globals":199,"$sdd-navigation":201},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/contact-us":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":178,"_id":179,"_source":180,"_file":181,"_extension":182},"/design-system/components/contact-us","components",false,"","Contact us","The Contact us component is a list of contact details and links to help the user get in touch with you.","page","Core",{"type":16,"children":17,"toc":169},"root",[18,27,33,38,63,68,75,93,99,112,116,122,127,140,147],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use the contact us component to show the user multiple pieces of contact information or actions. The details should be related to the page content and a single point of contact.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Contact us details can include a:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48,53,58],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"contact person",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"address",{"type":19,"tag":43,"props":54,"children":55},{},[56],{"type":25,"value":57},"phone number",{"type":19,"tag":43,"props":59,"children":60},{},[61],{"type":25,"value":62},"social media account.",{"type":19,"tag":64,"props":65,"children":67},"docs-example",{"id":66},"core-containers-contact-us--contact-us",[],{"type":19,"tag":69,"props":70,"children":72},"h3",{"id":71},"when-and-how-to-use",[73],{"type":25,"value":74},"When and how to use",{"type":19,"tag":39,"props":76,"children":77},{},[78,83,88],{"type":19,"tag":43,"props":79,"children":80},{},[81],{"type":25,"value":82},"Provide users with additional contact details relevant to the page.",{"type":19,"tag":43,"props":84,"children":85},{},[86],{"type":25,"value":87},"Display any combination of physical and postal addresses, phone numbers, email addresses and common social media accounts.",{"type":19,"tag":43,"props":89,"children":90},{},[91],{"type":25,"value":92},"Display in the sidebar of the page.",{"type":19,"tag":69,"props":94,"children":96},{"id":95},"when-and-how-not-to-use",[97],{"type":25,"value":98},"When and how not to use",{"type":19,"tag":39,"props":100,"children":101},{},[102,107],{"type":19,"tag":43,"props":103,"children":104},{},[105],{"type":25,"value":106},"If you add social media accounts to the contact us component, don’t add the social share component.",{"type":19,"tag":43,"props":108,"children":109},{},[110],{"type":25,"value":111},"Never use unrelated contact details or social media accounts.",{"type":19,"tag":113,"props":114,"children":115},"hr",{},[],{"type":19,"tag":20,"props":117,"children":119},{"id":118},"theming",[120],{"type":25,"value":121},"Theming",{"type":19,"tag":28,"props":123,"children":124},{},[125],{"type":25,"value":126},"Contact us uses colour for:",{"type":19,"tag":39,"props":128,"children":129},{},[130,135],{"type":19,"tag":43,"props":131,"children":132},{},[133],{"type":25,"value":134},"visual prominence for key information",{"type":19,"tag":43,"props":136,"children":137},{},[138],{"type":25,"value":139},"link icons.",{"type":19,"tag":141,"props":142,"children":143},"docs-theme-chooser",{},[144],{"type":19,"tag":64,"props":145,"children":146},{"id":66},[],{"type":19,"tag":28,"props":148,"children":149},{},[150,152,159,161,167],{"type":25,"value":151},"To create your own theme see ",{"type":19,"tag":153,"props":154,"children":156},"a",{"href":155},"/design-system/design/theming-guidance-for-designers",[157],{"type":25,"value":158},"theming guidance for designers",{"type":25,"value":160}," or ",{"type":19,"tag":153,"props":162,"children":164},{"href":163},"/design-system/develop/theming",[165],{"type":25,"value":166},"theming guidance for developers",{"type":25,"value":168},".",{"title":10,"searchDepth":170,"depth":170,"links":171},2,[172,177],{"id":22,"depth":170,"text":26,"children":173},[174,176],{"id":71,"depth":175,"text":74},3,{"id":95,"depth":175,"text":98},{"id":118,"depth":170,"text":121},"markdown","content:design-system:5.components:contact-us.md","content","design-system/5.components/contact-us.md","md",["ShallowRef",184],["ShallowReactive",185],{"/design-system/components/contact-us":186},[187,193],{"_path":188,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":189,"description":190,"layout":13,"label":14,"_type":178,"_id":191,"_source":180,"_file":192,"_extension":182},"/design-system/components/chip","Chip","The Chip component is an interactive element to draw a user’s user attention to a category.","content:design-system:5.components:chip.md","design-system/5.components/chip.md",{"_path":194,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":195,"description":196,"layout":13,"label":14,"_type":178,"_id":197,"_source":180,"_file":198,"_extension":182},"/design-system/components/date-input","Date input","The Date input component helps users enter a date.","content:design-system:5.components:date-input.md","design-system/5.components/date-input.md",["ShallowRef",200],{},[202,207,446],{"title":203,"_path":204,"icon":205,"layout":206},"Ripple Design System","/","carbon:home","home",{"title":208,"_path":209,"children":210},"Design System","/design-system",[211,227,242,270,304],{"title":212,"_path":213,"children":214},"About","/design-system/about",[215,218,221,224],{"title":216,"_path":217,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":219,"_path":220,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":222,"_path":223,"layout":13},"Support","/design-system/about/getting-support",{"title":225,"_path":226,"layout":13},"Contributing","/design-system/about/contributing",{"title":228,"_path":229,"children":230},"Design","/design-system/design",[231,234,237,240],{"title":232,"_path":233,"layout":13},"Getting started","/design-system/design/getting-started",{"title":235,"_path":236,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":238,"_path":239,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":241,"_path":155,"layout":13},"Theming guidance for designers",{"title":243,"_path":244,"children":245},"Develop","/design-system/develop",[246,248,250,252],{"title":232,"_path":247,"layout":13},"/design-system/develop/getting-started",{"title":225,"_path":249,"layout":13},"/design-system/develop/contributing",{"title":251,"_path":163,"layout":13},"Theme and brand application",{"title":26,"_path":253,"children":254,"layout":13},"/design-system/develop/usage",[255,258,261,264,267],{"title":256,"_path":257,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":259,"_path":260,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":262,"_path":263,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":265,"_path":266,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":268,"_path":269,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":271,"_path":272,"children":273},"Styles","/design-system/styles",[274,277,280,283,286,289,292,295,298,301],{"title":275,"_path":276,"layout":13},"Colour","/design-system/styles/colour",{"title":278,"_path":279,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":281,"_path":282,"layout":13},"Grid","/design-system/styles/grid",{"title":284,"_path":285,"layout":13},"Icons","/design-system/styles/icons",{"title":287,"_path":288,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":290,"_path":291,"layout":13},"Layout","/design-system/styles/layout",{"title":293,"_path":294,"layout":13},"Logo","/design-system/styles/logo",{"title":296,"_path":297,"layout":13},"Motion","/design-system/styles/motion",{"title":299,"_path":300,"layout":13},"Spacing","/design-system/styles/spacing",{"title":302,"_path":303,"layout":13},"Typography","/design-system/styles/typography",{"title":305,"_path":306,"children":307},"Components","/design-system/components",[308,311,314,317,320,323,326,329,332,335,338,341,344,347,348,349,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440,443],{"title":309,"_path":310,"layout":13},"Accordion","/design-system/components/accordion",{"title":312,"_path":313,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":315,"_path":316,"layout":13},"Alert","/design-system/components/alert",{"title":318,"_path":319,"layout":13},"Block quote","/design-system/components/block-quote",{"title":321,"_path":322,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":324,"_path":325,"layout":13},"Button","/design-system/components/button",{"title":327,"_path":328,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":330,"_path":331,"layout":13},"Callout","/design-system/components/callout",{"title":333,"_path":334,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":336,"_path":337,"layout":13},"Card","/design-system/components/card",{"title":339,"_path":340,"layout":13},"Carousel","/design-system/components/carousel",{"title":342,"_path":343,"layout":13},"Category grid","/design-system/components/category-grid",{"title":345,"_path":346,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":189,"_path":188,"layout":13},{"title":11,"_path":7,"layout":13},{"title":195,"_path":194,"layout":13},{"title":351,"_path":352,"layout":13},"Detail list","/design-system/components/detail-list",{"title":354,"_path":355,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":357,"_path":358,"layout":13},"File","/design-system/components/file",{"title":360,"_path":361,"layout":13},"Footer","/design-system/components/footer",{"title":363,"_path":364,"layout":13},"Form","/design-system/components/form",{"title":366,"_path":367,"layout":13},"Form alert","/design-system/components/form-alert",{"title":369,"_path":370,"layout":13},"Header","/design-system/components/header",{"title":372,"_path":373,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":375,"_path":376,"layout":13},"Input field","/design-system/components/input-field",{"title":378,"_path":379,"layout":13},"Key dates","/design-system/components/key-dates",{"title":381,"_path":382,"layout":13},"Media","/design-system/components/media",{"title":384,"_path":385,"layout":13},"Media embed","/design-system/components/media-embed",{"title":387,"_path":388,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":390,"_path":391,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":393,"_path":394,"layout":13},"Option button","/design-system/components/option-button",{"title":396,"_path":397,"layout":13},"Page action","/design-system/components/page-action",{"title":399,"_path":400,"layout":13},"Pagination","/design-system/components/pagination",{"title":402,"_path":403,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":405,"_path":406,"layout":13},"Profile","/design-system/components/profile",{"title":408,"_path":409,"layout":13},"Radio button","/design-system/components/radio-button",{"title":411,"_path":412,"layout":13},"Related links","/design-system/components/related-links",{"title":414,"_path":415,"layout":13},"Results listing","/design-system/components/results-listing",{"title":417,"_path":418,"layout":13},"Search bar","/design-system/components/search-bar",{"title":420,"_path":421,"layout":13},"Skip link","/design-system/components/skip-link",{"title":423,"_path":424,"layout":13},"Social share","/design-system/components/social-share",{"title":426,"_path":427,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":429,"_path":430,"layout":13},"Table","/design-system/components/table",{"title":432,"_path":433,"layout":13},"Tabs","/design-system/components/tabs",{"title":435,"_path":436,"layout":13},"Tag","/design-system/components/tag",{"title":438,"_path":439,"layout":13},"Text area","/design-system/components/text-area",{"title":441,"_path":442,"layout":13},"Timeline","/design-system/components/timeline",{"title":444,"_path":445,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":447,"_path":448,"children":449,"layout":13},"Ripple Framework","/framework",[450,451,469,491],{"title":447,"_path":448,"layout":13},{"title":452,"_path":453,"children":454},"Key Concepts","/framework/key-concepts",[455,457,460,463,466],{"title":262,"_path":456,"layout":13},"/framework/key-concepts/nuxt",{"title":458,"_path":459,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":461,"_path":462,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":464,"_path":465,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":467,"_path":468,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":470,"_path":471,"children":472},"Guides","/framework/guides",[473,476,479,482,485,488],{"title":474,"_path":475,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":477,"_path":478,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":480,"_path":481,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":483,"_path":484,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":486,"_path":487,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":489,"_path":490,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":492,"_path":493,"layout":13},"Core modules","/framework/core-modules",["Reactive",495],["Set"],["Reactive",497],{"module-navigation":498},null,true,"/design-system/components/contact-us/",1714695654000]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/date-input/_payload.json b/design-system/components/date-input/_payload.json
index dbe68858db..98820151f0 100644
--- a/design-system/components/date-input/_payload.json
+++ b/design-system/components/date-input/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":104,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695153528]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":104,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695651693]
\ No newline at end of file
diff --git a/design-system/components/date-input/index.html b/design-system/components/date-input/index.html
index e040dfc4b0..d3fbacef9e 100644
--- a/design-system/components/date-input/index.html
+++ b/design-system/components/date-input/index.html
@@ -28,65 +28,65 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.CwUV-MIb.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.F9NVvvm4.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.gK7ORMEc.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.GmB4B_NE.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -98,8 +98,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Date input</h1><p class="rpl-type-p-large" data-v-3163c6df>The Date input component helps users enter a date.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use date input to let users to enter a date they already know, or a date they can enter without needing a calendar.<!--]--></p><p><!--[-->Date input has 3 fields: day, month and year.<!--]--></p><p><!--[-->Don’t set this component to automatically tab between these fields. This can be confusing and jarring for the user.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-date-input--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-date-input--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="how-to-use-this-component" data-v-ea525968><a href="#how-to-use-this-component" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->How to use this component<!--]--></a></h2><p><!--[-->You must use a form label with a date input.<!--]--></p><p><!--[-->You can use an date input with:<!--]--></p><ul><!--[--><li><!--[-->requirement label<!--]--></li><li><!--[-->hint text<!--]--></li><li><!--[-->placeholder text.<!--]--></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="avoid-placeholder-text"><!--[-->Avoid placeholder text<!--]--></h4><p><!--[-->Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.<!--]--></p><p><!--[-->If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="hint-text"><!--[-->Hint text<!--]--></h4><p><!--[-->Hint text can be used to tell the user what, or how, to successfully complete a date input.<!--]--></p><p><!--[-->For example, hint text can include specific formatting examples or requirements.<!--]--></p><p><!--[-->Only use hint text where it’s needed. Don’t use it just to keep the layout consistent with other fields in the form.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Always use date inputs with a label.<!--]--></li><li><!--[-->Write short and concise labels.<!--]--></li><li><!--[-->Use hint text to show the expected date format, for example, ‘07 11 2022’.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->If it’s not likely users will know the exact date, don’t use date input.<!--]--></li><li><!--[-->Don’t use without a form label or hint text specifying the expected date format.<!--]--></li><li><!--[-->Avoid placeholder text because it can cause accessibility issues.<!--]--></li><li><!--[-->Don’t disable copy and paste.<!--]--></li><li><!--[-->Don’t use placeholder text to give instructions or important examples.<!--]--></li><li><!--[-->Don’t write ambiguous error messages only stating what&#39;s wrong - explain how the user can fix it.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->The date input has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, used on white backgrounds<!--]--></li><li><!--[-->reverse, used on neutral backgrounds.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-date-input--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-date-input--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="reverse" data-v-ea525968><a href="#reverse" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Reverse<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-date-input--reverse&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-date-input--reverse&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="error" data-v-ea525968><a href="#error" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Error<!--]--></a></h2><p><!--[-->All form inputs share error state styling.<!--]--></p><p><!--[-->Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.<!--]--></p><p><!--[-->When creating an error message for a date input, use the wording below.<!--]--></p><p><!--[--><strong><!--[-->Error: whole date field is empty<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘Enter [the missing information]&#39;.<!--]--></li><li><!--[-->Example: ‘Enter your dog’s birthday&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: some of date field is empty or incomplete<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: relevant day, month and/or year fields.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must include a [name of empty or incomplete field]’.<!--]--></li><li><!--[-->Example: ‘Your dog’s birthday must include a month&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: impossible date entered<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: relevant day, month and/or year fields.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be a real date’.<!--]--></li><li><!--[-->Example: ‘Your dog’s birthday must be a real date&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: future date given when past date needed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be in the past’.<!--]--></li><li><!--[-->Example: ‘Your dog’s first playdate must be in the past&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: future date given when today or past date needed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be today or in the past’.<!--]--></li><li><!--[-->Example: ‘Your dog’s first beach visit must be today or in the past&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: past date given when future date needed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be in the future’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next raincoat purchase must be in the future&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: past date given when today or future date needed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be today or in the future’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next zoomies must be today or in the future&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date is not on or after another particular date<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be the same as or after [particular date and optional description]’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next holiday must be on or after 2 April 2027 when you go on a roadtrip&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date is not after another particular date<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be after [particular date and optional description]’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next blow-dry must be after 2 April 2026 when the groomer returns&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date is not the same as or before another particular date<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be on or before [particular date and optional description]’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next hike must be on or before 2 January 2025&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date is not before another particular date<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be before [particular date and optional description]’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next movie and pizza night must before 2 August 2027&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date is not between 2 other dates<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be between [earliest date] and [latest date and optional description]’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next cuddles must be between 2 September 2026 and 3 September 2026&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date uses known characters that aren’t allowed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: relevant day, month and/or year fields.<!--]--></li><li><!--[-->Error message: ‘The date must not include [characters]&#39;.<!--]--></li><li><!--[-->Example: ‘The date must not include + &amp; ~&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date uses unknown characters that aren’t allowed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: relevant day, month and/or year fields.<!--]--></li><li><!--[-->Error message: ‘The date must only include numbers&#39;.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-date-input--invalid&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-date-input--invalid&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Date input uses colour to show interactive states. A date input field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a date input field remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-date-input--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-date-input--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="rationale" data-v-fff5b905><a href="#rationale" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/date-input.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/date-input/_payload.json">[{"state":1,"once":1000,"_errors":1002,"serverRendered":1005,"path":1006,"prerenderedAt":1007},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":689,"$sdd-globals":705,"$sdd-navigation":707},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/date-input":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":684,"_id":685,"_source":686,"_file":687,"_extension":688},"/design-system/components/date-input","components",false,"","Date input","The Date input component helps users enter a date.","page","Core",{"type":16,"children":17,"toc":668},"root",[18,27,33,38,43,48,55,60,65,85,92,97,102,108,113,118,123,129,147,153,186,190,196,201,214,220,223,229,233,239,244,249,254,263,281,289,307,315,332,340,357,365,382,390,407,415,432,440,457,465,482,490,507,515,532,540,557,565,582,590,602,606,609,615,620,627,649,652,658,663],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use date input to let users to enter a date they already know, or a date they can enter without needing a calendar.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Date input has 3 fields: day, month and year.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Don’t set this component to automatically tab between these fields. This can be confusing and jarring for the user.",{"type":19,"tag":44,"props":45,"children":47},"docs-example",{"id":46},"forms-date-input--default-story",[],{"type":19,"tag":49,"props":50,"children":52},"h3",{"id":51},"how-to-use-this-component",[53],{"type":25,"value":54},"How to use this component",{"type":19,"tag":28,"props":56,"children":57},{},[58],{"type":25,"value":59},"You must use a form label with a date input.",{"type":19,"tag":28,"props":61,"children":62},{},[63],{"type":25,"value":64},"You can use an date input with:",{"type":19,"tag":66,"props":67,"children":68},"ul",{},[69,75,80],{"type":19,"tag":70,"props":71,"children":72},"li",{},[73],{"type":25,"value":74},"requirement label",{"type":19,"tag":70,"props":76,"children":77},{},[78],{"type":25,"value":79},"hint text",{"type":19,"tag":70,"props":81,"children":82},{},[83],{"type":25,"value":84},"placeholder text.",{"type":19,"tag":86,"props":87,"children":89},"h4",{"id":88},"avoid-placeholder-text",[90],{"type":25,"value":91},"Avoid placeholder text",{"type":19,"tag":28,"props":93,"children":94},{},[95],{"type":25,"value":96},"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.",{"type":19,"tag":28,"props":98,"children":99},{},[100],{"type":25,"value":101},"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.",{"type":19,"tag":86,"props":103,"children":105},{"id":104},"hint-text",[106],{"type":25,"value":107},"Hint text",{"type":19,"tag":28,"props":109,"children":110},{},[111],{"type":25,"value":112},"Hint text can be used to tell the user what, or how, to successfully complete a date input.",{"type":19,"tag":28,"props":114,"children":115},{},[116],{"type":25,"value":117},"For example, hint text can include specific formatting examples or requirements.",{"type":19,"tag":28,"props":119,"children":120},{},[121],{"type":25,"value":122},"Only use hint text where it’s needed. Don’t use it just to keep the layout consistent with other fields in the form.",{"type":19,"tag":49,"props":124,"children":126},{"id":125},"when-and-how-to-use",[127],{"type":25,"value":128},"When and how to use",{"type":19,"tag":66,"props":130,"children":131},{},[132,137,142],{"type":19,"tag":70,"props":133,"children":134},{},[135],{"type":25,"value":136},"Always use date inputs with a label.",{"type":19,"tag":70,"props":138,"children":139},{},[140],{"type":25,"value":141},"Write short and concise labels.",{"type":19,"tag":70,"props":143,"children":144},{},[145],{"type":25,"value":146},"Use hint text to show the expected date format, for example, ‘07 11 2022’.",{"type":19,"tag":49,"props":148,"children":150},{"id":149},"when-and-how-not-to-use",[151],{"type":25,"value":152},"When and how not to use",{"type":19,"tag":66,"props":154,"children":155},{},[156,161,166,171,176,181],{"type":19,"tag":70,"props":157,"children":158},{},[159],{"type":25,"value":160},"If it’s not likely users will know the exact date, don’t use date input.",{"type":19,"tag":70,"props":162,"children":163},{},[164],{"type":25,"value":165},"Don’t use without a form label or hint text specifying the expected date format.",{"type":19,"tag":70,"props":167,"children":168},{},[169],{"type":25,"value":170},"Avoid placeholder text because it can cause accessibility issues.",{"type":19,"tag":70,"props":172,"children":173},{},[174],{"type":25,"value":175},"Don’t disable copy and paste.",{"type":19,"tag":70,"props":177,"children":178},{},[179],{"type":25,"value":180},"Don’t use placeholder text to give instructions or important examples.",{"type":19,"tag":70,"props":182,"children":183},{},[184],{"type":25,"value":185},"Don’t write ambiguous error messages only stating what's wrong - explain how the user can fix it.",{"type":19,"tag":187,"props":188,"children":189},"hr",{},[],{"type":19,"tag":20,"props":191,"children":193},{"id":192},"variants",[194],{"type":25,"value":195},"Variants",{"type":19,"tag":28,"props":197,"children":198},{},[199],{"type":25,"value":200},"The date input has 2 variants:",{"type":19,"tag":66,"props":202,"children":203},{},[204,209],{"type":19,"tag":70,"props":205,"children":206},{},[207],{"type":25,"value":208},"default, used on white backgrounds",{"type":19,"tag":70,"props":210,"children":211},{},[212],{"type":25,"value":213},"reverse, used on neutral backgrounds.",{"type":19,"tag":49,"props":215,"children":217},{"id":216},"default",[218],{"type":25,"value":219},"Default",{"type":19,"tag":44,"props":221,"children":222},{"id":46},[],{"type":19,"tag":49,"props":224,"children":226},{"id":225},"reverse",[227],{"type":25,"value":228},"Reverse",{"type":19,"tag":44,"props":230,"children":232},{"id":231},"forms-date-input--reverse",[],{"type":19,"tag":49,"props":234,"children":236},{"id":235},"error",[237],{"type":25,"value":238},"Error",{"type":19,"tag":28,"props":240,"children":241},{},[242],{"type":25,"value":243},"All form inputs share error state styling.",{"type":19,"tag":28,"props":245,"children":246},{},[247],{"type":25,"value":248},"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.",{"type":19,"tag":28,"props":250,"children":251},{},[252],{"type":25,"value":253},"When creating an error message for a date input, use the wording below.",{"type":19,"tag":28,"props":255,"children":256},{},[257],{"type":19,"tag":258,"props":259,"children":260},"strong",{},[261],{"type":25,"value":262},"Error: whole date field is empty",{"type":19,"tag":66,"props":264,"children":265},{},[266,271,276],{"type":19,"tag":70,"props":267,"children":268},{},[269],{"type":25,"value":270},"Highlight area: entire date input.",{"type":19,"tag":70,"props":272,"children":273},{},[274],{"type":25,"value":275},"Error message: ‘Enter [the missing information]'.",{"type":19,"tag":70,"props":277,"children":278},{},[279],{"type":25,"value":280},"Example: ‘Enter your dog’s birthday'.",{"type":19,"tag":28,"props":282,"children":283},{},[284],{"type":19,"tag":258,"props":285,"children":286},{},[287],{"type":25,"value":288},"Error: some of date field is empty or incomplete",{"type":19,"tag":66,"props":290,"children":291},{},[292,297,302],{"type":19,"tag":70,"props":293,"children":294},{},[295],{"type":25,"value":296},"Highlight area: relevant day, month and/or year fields.",{"type":19,"tag":70,"props":298,"children":299},{},[300],{"type":25,"value":301},"Error message: ‘[Information requested] must include a [name of empty or incomplete field]’.",{"type":19,"tag":70,"props":303,"children":304},{},[305],{"type":25,"value":306},"Example: ‘Your dog’s birthday must include a month'.",{"type":19,"tag":28,"props":308,"children":309},{},[310],{"type":19,"tag":258,"props":311,"children":312},{},[313],{"type":25,"value":314},"Error: impossible date entered",{"type":19,"tag":66,"props":316,"children":317},{},[318,322,327],{"type":19,"tag":70,"props":319,"children":320},{},[321],{"type":25,"value":296},{"type":19,"tag":70,"props":323,"children":324},{},[325],{"type":25,"value":326},"Error message: ‘[Information requested] must be a real date’.",{"type":19,"tag":70,"props":328,"children":329},{},[330],{"type":25,"value":331},"Example: ‘Your dog’s birthday must be a real date'.",{"type":19,"tag":28,"props":333,"children":334},{},[335],{"type":19,"tag":258,"props":336,"children":337},{},[338],{"type":25,"value":339},"Error: future date given when past date needed",{"type":19,"tag":66,"props":341,"children":342},{},[343,347,352],{"type":19,"tag":70,"props":344,"children":345},{},[346],{"type":25,"value":270},{"type":19,"tag":70,"props":348,"children":349},{},[350],{"type":25,"value":351},"Error message: ‘[Information requested] must be in the past’.",{"type":19,"tag":70,"props":353,"children":354},{},[355],{"type":25,"value":356},"Example: ‘Your dog’s first playdate must be in the past'.",{"type":19,"tag":28,"props":358,"children":359},{},[360],{"type":19,"tag":258,"props":361,"children":362},{},[363],{"type":25,"value":364},"Error: future date given when today or past date needed",{"type":19,"tag":66,"props":366,"children":367},{},[368,372,377],{"type":19,"tag":70,"props":369,"children":370},{},[371],{"type":25,"value":270},{"type":19,"tag":70,"props":373,"children":374},{},[375],{"type":25,"value":376},"Error message: ‘[Information requested] must be today or in the past’.",{"type":19,"tag":70,"props":378,"children":379},{},[380],{"type":25,"value":381},"Example: ‘Your dog’s first beach visit must be today or in the past'.",{"type":19,"tag":28,"props":383,"children":384},{},[385],{"type":19,"tag":258,"props":386,"children":387},{},[388],{"type":25,"value":389},"Error: past date given when future date needed",{"type":19,"tag":66,"props":391,"children":392},{},[393,397,402],{"type":19,"tag":70,"props":394,"children":395},{},[396],{"type":25,"value":270},{"type":19,"tag":70,"props":398,"children":399},{},[400],{"type":25,"value":401},"Error message: ‘[Information requested] must be in the future’.",{"type":19,"tag":70,"props":403,"children":404},{},[405],{"type":25,"value":406},"Example: ‘Your dog’s next raincoat purchase must be in the future'.",{"type":19,"tag":28,"props":408,"children":409},{},[410],{"type":19,"tag":258,"props":411,"children":412},{},[413],{"type":25,"value":414},"Error: past date given when today or future date needed",{"type":19,"tag":66,"props":416,"children":417},{},[418,422,427],{"type":19,"tag":70,"props":419,"children":420},{},[421],{"type":25,"value":270},{"type":19,"tag":70,"props":423,"children":424},{},[425],{"type":25,"value":426},"Error message: ‘[Information requested] must be today or in the future’.",{"type":19,"tag":70,"props":428,"children":429},{},[430],{"type":25,"value":431},"Example: ‘Your dog’s next zoomies must be today or in the future'.",{"type":19,"tag":28,"props":433,"children":434},{},[435],{"type":19,"tag":258,"props":436,"children":437},{},[438],{"type":25,"value":439},"Error: date is not on or after another particular date",{"type":19,"tag":66,"props":441,"children":442},{},[443,447,452],{"type":19,"tag":70,"props":444,"children":445},{},[446],{"type":25,"value":270},{"type":19,"tag":70,"props":448,"children":449},{},[450],{"type":25,"value":451},"Error message: ‘[Information requested] must be the same as or after [particular date and optional description]’.",{"type":19,"tag":70,"props":453,"children":454},{},[455],{"type":25,"value":456},"Example: ‘Your dog’s next holiday must be on or after 2 April 2027 when you go on a roadtrip'.",{"type":19,"tag":28,"props":458,"children":459},{},[460],{"type":19,"tag":258,"props":461,"children":462},{},[463],{"type":25,"value":464},"Error: date is not after another particular date",{"type":19,"tag":66,"props":466,"children":467},{},[468,472,477],{"type":19,"tag":70,"props":469,"children":470},{},[471],{"type":25,"value":270},{"type":19,"tag":70,"props":473,"children":474},{},[475],{"type":25,"value":476},"Error message: ‘[Information requested] must be after [particular date and optional description]’.",{"type":19,"tag":70,"props":478,"children":479},{},[480],{"type":25,"value":481},"Example: ‘Your dog’s next blow-dry must be after 2 April 2026 when the groomer returns'.",{"type":19,"tag":28,"props":483,"children":484},{},[485],{"type":19,"tag":258,"props":486,"children":487},{},[488],{"type":25,"value":489},"Error: date is not the same as or before another particular date",{"type":19,"tag":66,"props":491,"children":492},{},[493,497,502],{"type":19,"tag":70,"props":494,"children":495},{},[496],{"type":25,"value":270},{"type":19,"tag":70,"props":498,"children":499},{},[500],{"type":25,"value":501},"Error message: ‘[Information requested] must be on or before [particular date and optional description]’.",{"type":19,"tag":70,"props":503,"children":504},{},[505],{"type":25,"value":506},"Example: ‘Your dog’s next hike must be on or before 2 January 2025'.",{"type":19,"tag":28,"props":508,"children":509},{},[510],{"type":19,"tag":258,"props":511,"children":512},{},[513],{"type":25,"value":514},"Error: date is not before another particular date",{"type":19,"tag":66,"props":516,"children":517},{},[518,522,527],{"type":19,"tag":70,"props":519,"children":520},{},[521],{"type":25,"value":270},{"type":19,"tag":70,"props":523,"children":524},{},[525],{"type":25,"value":526},"Error message: ‘[Information requested] must be before [particular date and optional description]’.",{"type":19,"tag":70,"props":528,"children":529},{},[530],{"type":25,"value":531},"Example: ‘Your dog’s next movie and pizza night must before 2 August 2027'.",{"type":19,"tag":28,"props":533,"children":534},{},[535],{"type":19,"tag":258,"props":536,"children":537},{},[538],{"type":25,"value":539},"Error: date is not between 2 other dates",{"type":19,"tag":66,"props":541,"children":542},{},[543,547,552],{"type":19,"tag":70,"props":544,"children":545},{},[546],{"type":25,"value":270},{"type":19,"tag":70,"props":548,"children":549},{},[550],{"type":25,"value":551},"Error message: ‘[Information requested] must be between [earliest date] and [latest date and optional description]’.",{"type":19,"tag":70,"props":553,"children":554},{},[555],{"type":25,"value":556},"Example: ‘Your dog’s next cuddles must be between 2 September 2026 and 3 September 2026'.",{"type":19,"tag":28,"props":558,"children":559},{},[560],{"type":19,"tag":258,"props":561,"children":562},{},[563],{"type":25,"value":564},"Error: date uses known characters that aren’t allowed",{"type":19,"tag":66,"props":566,"children":567},{},[568,572,577],{"type":19,"tag":70,"props":569,"children":570},{},[571],{"type":25,"value":296},{"type":19,"tag":70,"props":573,"children":574},{},[575],{"type":25,"value":576},"Error message: ‘The date must not include [characters]'.",{"type":19,"tag":70,"props":578,"children":579},{},[580],{"type":25,"value":581},"Example: ‘The date must not include + & ~'.",{"type":19,"tag":28,"props":583,"children":584},{},[585],{"type":19,"tag":258,"props":586,"children":587},{},[588],{"type":25,"value":589},"Error: date uses unknown characters that aren’t allowed",{"type":19,"tag":66,"props":591,"children":592},{},[593,597],{"type":19,"tag":70,"props":594,"children":595},{},[596],{"type":25,"value":296},{"type":19,"tag":70,"props":598,"children":599},{},[600],{"type":25,"value":601},"Error message: ‘The date must only include numbers'.",{"type":19,"tag":44,"props":603,"children":605},{"id":604},"forms-date-input--invalid",[],{"type":19,"tag":187,"props":607,"children":608},{},[],{"type":19,"tag":20,"props":610,"children":612},{"id":611},"theming",[613],{"type":25,"value":614},"Theming",{"type":19,"tag":28,"props":616,"children":617},{},[618],{"type":25,"value":619},"Date input uses colour to show interactive states. A date input field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a date input field remains consistent while it transitions from a focus to an active state.",{"type":19,"tag":621,"props":622,"children":623},"docs-theme-chooser",{},[624],{"type":19,"tag":44,"props":625,"children":626},{"id":46},[],{"type":19,"tag":28,"props":628,"children":629},{},[630,632,639,641,647],{"type":25,"value":631},"To create your own theme see ",{"type":19,"tag":633,"props":634,"children":636},"a",{"href":635},"/design-system/design/theming-guidance-for-designers",[637],{"type":25,"value":638},"theming guidance for designers",{"type":25,"value":640}," or ",{"type":19,"tag":633,"props":642,"children":644},{"href":643},"/design-system/develop/theming",[645],{"type":25,"value":646},"theming guidance for developers",{"type":25,"value":648},".",{"type":19,"tag":187,"props":650,"children":651},{},[],{"type":19,"tag":20,"props":653,"children":655},{"id":654},"rationale",[656],{"type":25,"value":657},"Rationale",{"type":19,"tag":28,"props":659,"children":660},{},[661],{"type":25,"value":662},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":19,"tag":28,"props":664,"children":665},{},[666],{"type":25,"value":667},"This occurs across all form and input elements, for a consistent experience.",{"title":10,"searchDepth":669,"depth":669,"links":670},2,[671,677,682,683],{"id":22,"depth":669,"text":26,"children":672},[673,675,676],{"id":51,"depth":674,"text":54},3,{"id":125,"depth":674,"text":128},{"id":149,"depth":674,"text":152},{"id":192,"depth":669,"text":195,"children":678},[679,680,681],{"id":216,"depth":674,"text":219},{"id":225,"depth":674,"text":228},{"id":235,"depth":674,"text":238},{"id":611,"depth":669,"text":614},{"id":654,"depth":669,"text":657},"markdown","content:design-system:5.components:date-input.md","content","design-system/5.components/date-input.md","md",["ShallowRef",690],["ShallowReactive",691],{"/design-system/components/date-input":692},[693,699],{"_path":694,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":695,"description":696,"layout":13,"label":14,"_type":684,"_id":697,"_source":686,"_file":698,"_extension":688},"/design-system/components/contact-us","Contact us","The Contact us component is a list of contact details and links to help the user get in touch with you.","content:design-system:5.components:contact-us.md","design-system/5.components/contact-us.md",{"_path":700,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":701,"description":702,"layout":13,"label":14,"_type":684,"_id":703,"_source":686,"_file":704,"_extension":688},"/design-system/components/detail-list","Detail list","The Detail list component shows a list of key information to users.","content:design-system:5.components:detail-list.md","design-system/5.components/detail-list.md",["ShallowRef",706],{},[708,713,952],{"title":709,"_path":710,"icon":711,"layout":712},"Ripple Design System","/","carbon:home","home",{"title":714,"_path":715,"children":716},"Design System","/design-system",[717,733,748,776,810],{"title":718,"_path":719,"children":720},"About","/design-system/about",[721,724,727,730],{"title":722,"_path":723,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":725,"_path":726,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":728,"_path":729,"layout":13},"Support","/design-system/about/getting-support",{"title":731,"_path":732,"layout":13},"Contributing","/design-system/about/contributing",{"title":734,"_path":735,"children":736},"Design","/design-system/design",[737,740,743,746],{"title":738,"_path":739,"layout":13},"Getting started","/design-system/design/getting-started",{"title":741,"_path":742,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":744,"_path":745,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":747,"_path":635,"layout":13},"Theming guidance for designers",{"title":749,"_path":750,"children":751},"Develop","/design-system/develop",[752,754,756,758],{"title":738,"_path":753,"layout":13},"/design-system/develop/getting-started",{"title":731,"_path":755,"layout":13},"/design-system/develop/contributing",{"title":757,"_path":643,"layout":13},"Theme and brand application",{"title":26,"_path":759,"children":760,"layout":13},"/design-system/develop/usage",[761,764,767,770,773],{"title":762,"_path":763,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":765,"_path":766,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":768,"_path":769,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":771,"_path":772,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":774,"_path":775,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":777,"_path":778,"children":779},"Styles","/design-system/styles",[780,783,786,789,792,795,798,801,804,807],{"title":781,"_path":782,"layout":13},"Colour","/design-system/styles/colour",{"title":784,"_path":785,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":787,"_path":788,"layout":13},"Grid","/design-system/styles/grid",{"title":790,"_path":791,"layout":13},"Icons","/design-system/styles/icons",{"title":793,"_path":794,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":796,"_path":797,"layout":13},"Layout","/design-system/styles/layout",{"title":799,"_path":800,"layout":13},"Logo","/design-system/styles/logo",{"title":802,"_path":803,"layout":13},"Motion","/design-system/styles/motion",{"title":805,"_path":806,"layout":13},"Spacing","/design-system/styles/spacing",{"title":808,"_path":809,"layout":13},"Typography","/design-system/styles/typography",{"title":811,"_path":812,"children":813},"Components","/design-system/components",[814,817,820,823,826,829,832,835,838,841,844,847,850,853,856,857,858,859,862,865,868,871,874,877,880,883,886,889,892,895,898,901,904,907,910,913,916,919,922,925,928,931,934,937,940,943,946,949],{"title":815,"_path":816,"layout":13},"Accordion","/design-system/components/accordion",{"title":818,"_path":819,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":821,"_path":822,"layout":13},"Alert","/design-system/components/alert",{"title":824,"_path":825,"layout":13},"Block quote","/design-system/components/block-quote",{"title":827,"_path":828,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":830,"_path":831,"layout":13},"Button","/design-system/components/button",{"title":833,"_path":834,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":836,"_path":837,"layout":13},"Callout","/design-system/components/callout",{"title":839,"_path":840,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":842,"_path":843,"layout":13},"Card","/design-system/components/card",{"title":845,"_path":846,"layout":13},"Carousel","/design-system/components/carousel",{"title":848,"_path":849,"layout":13},"Category grid","/design-system/components/category-grid",{"title":851,"_path":852,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":854,"_path":855,"layout":13},"Chip","/design-system/components/chip",{"title":695,"_path":694,"layout":13},{"title":11,"_path":7,"layout":13},{"title":701,"_path":700,"layout":13},{"title":860,"_path":861,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":863,"_path":864,"layout":13},"File","/design-system/components/file",{"title":866,"_path":867,"layout":13},"Footer","/design-system/components/footer",{"title":869,"_path":870,"layout":13},"Form","/design-system/components/form",{"title":872,"_path":873,"layout":13},"Form alert","/design-system/components/form-alert",{"title":875,"_path":876,"layout":13},"Header","/design-system/components/header",{"title":878,"_path":879,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":881,"_path":882,"layout":13},"Input field","/design-system/components/input-field",{"title":884,"_path":885,"layout":13},"Key dates","/design-system/components/key-dates",{"title":887,"_path":888,"layout":13},"Media","/design-system/components/media",{"title":890,"_path":891,"layout":13},"Media embed","/design-system/components/media-embed",{"title":893,"_path":894,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":896,"_path":897,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":899,"_path":900,"layout":13},"Option button","/design-system/components/option-button",{"title":902,"_path":903,"layout":13},"Page action","/design-system/components/page-action",{"title":905,"_path":906,"layout":13},"Pagination","/design-system/components/pagination",{"title":908,"_path":909,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":911,"_path":912,"layout":13},"Profile","/design-system/components/profile",{"title":914,"_path":915,"layout":13},"Radio button","/design-system/components/radio-button",{"title":917,"_path":918,"layout":13},"Related links","/design-system/components/related-links",{"title":920,"_path":921,"layout":13},"Results listing","/design-system/components/results-listing",{"title":923,"_path":924,"layout":13},"Search bar","/design-system/components/search-bar",{"title":926,"_path":927,"layout":13},"Skip link","/design-system/components/skip-link",{"title":929,"_path":930,"layout":13},"Social share","/design-system/components/social-share",{"title":932,"_path":933,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":935,"_path":936,"layout":13},"Table","/design-system/components/table",{"title":938,"_path":939,"layout":13},"Tabs","/design-system/components/tabs",{"title":941,"_path":942,"layout":13},"Tag","/design-system/components/tag",{"title":944,"_path":945,"layout":13},"Text area","/design-system/components/text-area",{"title":947,"_path":948,"layout":13},"Timeline","/design-system/components/timeline",{"title":950,"_path":951,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":953,"_path":954,"children":955,"layout":13},"Ripple Framework","/framework",[956,957,975,997],{"title":953,"_path":954,"layout":13},{"title":958,"_path":959,"children":960},"Key Concepts","/framework/key-concepts",[961,963,966,969,972],{"title":768,"_path":962,"layout":13},"/framework/key-concepts/nuxt",{"title":964,"_path":965,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":967,"_path":968,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":970,"_path":971,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":973,"_path":974,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":976,"_path":977,"children":978},"Guides","/framework/guides",[979,982,985,988,991,994],{"title":980,"_path":981,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":983,"_path":984,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":986,"_path":987,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":989,"_path":990,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":992,"_path":993,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":995,"_path":996,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":998,"_path":999,"layout":13},"Core modules","/framework/core-modules",["Reactive",1001],["Set"],["Reactive",1003],{"module-navigation":1004},null,true,"/design-system/components/date-input/",1714695156399]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Date input</h1><p class="rpl-type-p-large" data-v-3163c6df>The Date input component helps users enter a date.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use date input to let users to enter a date they already know, or a date they can enter without needing a calendar.<!--]--></p><p><!--[-->Date input has 3 fields: day, month and year.<!--]--></p><p><!--[-->Don’t set this component to automatically tab between these fields. This can be confusing and jarring for the user.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-date-input--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-date-input--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="how-to-use-this-component" data-v-ea525968><a href="#how-to-use-this-component" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->How to use this component<!--]--></a></h2><p><!--[-->You must use a form label with a date input.<!--]--></p><p><!--[-->You can use an date input with:<!--]--></p><ul><!--[--><li><!--[-->requirement label<!--]--></li><li><!--[-->hint text<!--]--></li><li><!--[-->placeholder text.<!--]--></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="avoid-placeholder-text"><!--[-->Avoid placeholder text<!--]--></h4><p><!--[-->Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.<!--]--></p><p><!--[-->If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="hint-text"><!--[-->Hint text<!--]--></h4><p><!--[-->Hint text can be used to tell the user what, or how, to successfully complete a date input.<!--]--></p><p><!--[-->For example, hint text can include specific formatting examples or requirements.<!--]--></p><p><!--[-->Only use hint text where it’s needed. Don’t use it just to keep the layout consistent with other fields in the form.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Always use date inputs with a label.<!--]--></li><li><!--[-->Write short and concise labels.<!--]--></li><li><!--[-->Use hint text to show the expected date format, for example, ‘07 11 2022’.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->If it’s not likely users will know the exact date, don’t use date input.<!--]--></li><li><!--[-->Don’t use without a form label or hint text specifying the expected date format.<!--]--></li><li><!--[-->Avoid placeholder text because it can cause accessibility issues.<!--]--></li><li><!--[-->Don’t disable copy and paste.<!--]--></li><li><!--[-->Don’t use placeholder text to give instructions or important examples.<!--]--></li><li><!--[-->Don’t write ambiguous error messages only stating what&#39;s wrong - explain how the user can fix it.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->The date input has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, used on white backgrounds<!--]--></li><li><!--[-->reverse, used on neutral backgrounds.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-date-input--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-date-input--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="reverse" data-v-ea525968><a href="#reverse" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Reverse<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-date-input--reverse&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-date-input--reverse&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="error" data-v-ea525968><a href="#error" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Error<!--]--></a></h2><p><!--[-->All form inputs share error state styling.<!--]--></p><p><!--[-->Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.<!--]--></p><p><!--[-->When creating an error message for a date input, use the wording below.<!--]--></p><p><!--[--><strong><!--[-->Error: whole date field is empty<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘Enter [the missing information]&#39;.<!--]--></li><li><!--[-->Example: ‘Enter your dog’s birthday&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: some of date field is empty or incomplete<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: relevant day, month and/or year fields.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must include a [name of empty or incomplete field]’.<!--]--></li><li><!--[-->Example: ‘Your dog’s birthday must include a month&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: impossible date entered<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: relevant day, month and/or year fields.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be a real date’.<!--]--></li><li><!--[-->Example: ‘Your dog’s birthday must be a real date&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: future date given when past date needed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be in the past’.<!--]--></li><li><!--[-->Example: ‘Your dog’s first playdate must be in the past&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: future date given when today or past date needed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be today or in the past’.<!--]--></li><li><!--[-->Example: ‘Your dog’s first beach visit must be today or in the past&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: past date given when future date needed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be in the future’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next raincoat purchase must be in the future&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: past date given when today or future date needed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be today or in the future’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next zoomies must be today or in the future&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date is not on or after another particular date<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be the same as or after [particular date and optional description]’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next holiday must be on or after 2 April 2027 when you go on a roadtrip&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date is not after another particular date<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be after [particular date and optional description]’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next blow-dry must be after 2 April 2026 when the groomer returns&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date is not the same as or before another particular date<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be on or before [particular date and optional description]’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next hike must be on or before 2 January 2025&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date is not before another particular date<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be before [particular date and optional description]’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next movie and pizza night must before 2 August 2027&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date is not between 2 other dates<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: entire date input.<!--]--></li><li><!--[-->Error message: ‘[Information requested] must be between [earliest date] and [latest date and optional description]’.<!--]--></li><li><!--[-->Example: ‘Your dog’s next cuddles must be between 2 September 2026 and 3 September 2026&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date uses known characters that aren’t allowed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: relevant day, month and/or year fields.<!--]--></li><li><!--[-->Error message: ‘The date must not include [characters]&#39;.<!--]--></li><li><!--[-->Example: ‘The date must not include + &amp; ~&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: date uses unknown characters that aren’t allowed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Highlight area: relevant day, month and/or year fields.<!--]--></li><li><!--[-->Error message: ‘The date must only include numbers&#39;.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-date-input--invalid&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-date-input--invalid&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Date input uses colour to show interactive states. A date input field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a date input field remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-date-input--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-date-input--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="rationale" data-v-fff5b905><a href="#rationale" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/date-input.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/date-input/_payload.json">[{"state":1,"once":1000,"_errors":1002,"serverRendered":1005,"path":1006,"prerenderedAt":1007},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":689,"$sdd-globals":705,"$sdd-navigation":707},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/date-input":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":684,"_id":685,"_source":686,"_file":687,"_extension":688},"/design-system/components/date-input","components",false,"","Date input","The Date input component helps users enter a date.","page","Core",{"type":16,"children":17,"toc":668},"root",[18,27,33,38,43,48,55,60,65,85,92,97,102,108,113,118,123,129,147,153,186,190,196,201,214,220,223,229,233,239,244,249,254,263,281,289,307,315,332,340,357,365,382,390,407,415,432,440,457,465,482,490,507,515,532,540,557,565,582,590,602,606,609,615,620,627,649,652,658,663],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use date input to let users to enter a date they already know, or a date they can enter without needing a calendar.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Date input has 3 fields: day, month and year.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Don’t set this component to automatically tab between these fields. This can be confusing and jarring for the user.",{"type":19,"tag":44,"props":45,"children":47},"docs-example",{"id":46},"forms-date-input--default-story",[],{"type":19,"tag":49,"props":50,"children":52},"h3",{"id":51},"how-to-use-this-component",[53],{"type":25,"value":54},"How to use this component",{"type":19,"tag":28,"props":56,"children":57},{},[58],{"type":25,"value":59},"You must use a form label with a date input.",{"type":19,"tag":28,"props":61,"children":62},{},[63],{"type":25,"value":64},"You can use an date input with:",{"type":19,"tag":66,"props":67,"children":68},"ul",{},[69,75,80],{"type":19,"tag":70,"props":71,"children":72},"li",{},[73],{"type":25,"value":74},"requirement label",{"type":19,"tag":70,"props":76,"children":77},{},[78],{"type":25,"value":79},"hint text",{"type":19,"tag":70,"props":81,"children":82},{},[83],{"type":25,"value":84},"placeholder text.",{"type":19,"tag":86,"props":87,"children":89},"h4",{"id":88},"avoid-placeholder-text",[90],{"type":25,"value":91},"Avoid placeholder text",{"type":19,"tag":28,"props":93,"children":94},{},[95],{"type":25,"value":96},"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.",{"type":19,"tag":28,"props":98,"children":99},{},[100],{"type":25,"value":101},"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.",{"type":19,"tag":86,"props":103,"children":105},{"id":104},"hint-text",[106],{"type":25,"value":107},"Hint text",{"type":19,"tag":28,"props":109,"children":110},{},[111],{"type":25,"value":112},"Hint text can be used to tell the user what, or how, to successfully complete a date input.",{"type":19,"tag":28,"props":114,"children":115},{},[116],{"type":25,"value":117},"For example, hint text can include specific formatting examples or requirements.",{"type":19,"tag":28,"props":119,"children":120},{},[121],{"type":25,"value":122},"Only use hint text where it’s needed. Don’t use it just to keep the layout consistent with other fields in the form.",{"type":19,"tag":49,"props":124,"children":126},{"id":125},"when-and-how-to-use",[127],{"type":25,"value":128},"When and how to use",{"type":19,"tag":66,"props":130,"children":131},{},[132,137,142],{"type":19,"tag":70,"props":133,"children":134},{},[135],{"type":25,"value":136},"Always use date inputs with a label.",{"type":19,"tag":70,"props":138,"children":139},{},[140],{"type":25,"value":141},"Write short and concise labels.",{"type":19,"tag":70,"props":143,"children":144},{},[145],{"type":25,"value":146},"Use hint text to show the expected date format, for example, ‘07 11 2022’.",{"type":19,"tag":49,"props":148,"children":150},{"id":149},"when-and-how-not-to-use",[151],{"type":25,"value":152},"When and how not to use",{"type":19,"tag":66,"props":154,"children":155},{},[156,161,166,171,176,181],{"type":19,"tag":70,"props":157,"children":158},{},[159],{"type":25,"value":160},"If it’s not likely users will know the exact date, don’t use date input.",{"type":19,"tag":70,"props":162,"children":163},{},[164],{"type":25,"value":165},"Don’t use without a form label or hint text specifying the expected date format.",{"type":19,"tag":70,"props":167,"children":168},{},[169],{"type":25,"value":170},"Avoid placeholder text because it can cause accessibility issues.",{"type":19,"tag":70,"props":172,"children":173},{},[174],{"type":25,"value":175},"Don’t disable copy and paste.",{"type":19,"tag":70,"props":177,"children":178},{},[179],{"type":25,"value":180},"Don’t use placeholder text to give instructions or important examples.",{"type":19,"tag":70,"props":182,"children":183},{},[184],{"type":25,"value":185},"Don’t write ambiguous error messages only stating what's wrong - explain how the user can fix it.",{"type":19,"tag":187,"props":188,"children":189},"hr",{},[],{"type":19,"tag":20,"props":191,"children":193},{"id":192},"variants",[194],{"type":25,"value":195},"Variants",{"type":19,"tag":28,"props":197,"children":198},{},[199],{"type":25,"value":200},"The date input has 2 variants:",{"type":19,"tag":66,"props":202,"children":203},{},[204,209],{"type":19,"tag":70,"props":205,"children":206},{},[207],{"type":25,"value":208},"default, used on white backgrounds",{"type":19,"tag":70,"props":210,"children":211},{},[212],{"type":25,"value":213},"reverse, used on neutral backgrounds.",{"type":19,"tag":49,"props":215,"children":217},{"id":216},"default",[218],{"type":25,"value":219},"Default",{"type":19,"tag":44,"props":221,"children":222},{"id":46},[],{"type":19,"tag":49,"props":224,"children":226},{"id":225},"reverse",[227],{"type":25,"value":228},"Reverse",{"type":19,"tag":44,"props":230,"children":232},{"id":231},"forms-date-input--reverse",[],{"type":19,"tag":49,"props":234,"children":236},{"id":235},"error",[237],{"type":25,"value":238},"Error",{"type":19,"tag":28,"props":240,"children":241},{},[242],{"type":25,"value":243},"All form inputs share error state styling.",{"type":19,"tag":28,"props":245,"children":246},{},[247],{"type":25,"value":248},"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.",{"type":19,"tag":28,"props":250,"children":251},{},[252],{"type":25,"value":253},"When creating an error message for a date input, use the wording below.",{"type":19,"tag":28,"props":255,"children":256},{},[257],{"type":19,"tag":258,"props":259,"children":260},"strong",{},[261],{"type":25,"value":262},"Error: whole date field is empty",{"type":19,"tag":66,"props":264,"children":265},{},[266,271,276],{"type":19,"tag":70,"props":267,"children":268},{},[269],{"type":25,"value":270},"Highlight area: entire date input.",{"type":19,"tag":70,"props":272,"children":273},{},[274],{"type":25,"value":275},"Error message: ‘Enter [the missing information]'.",{"type":19,"tag":70,"props":277,"children":278},{},[279],{"type":25,"value":280},"Example: ‘Enter your dog’s birthday'.",{"type":19,"tag":28,"props":282,"children":283},{},[284],{"type":19,"tag":258,"props":285,"children":286},{},[287],{"type":25,"value":288},"Error: some of date field is empty or incomplete",{"type":19,"tag":66,"props":290,"children":291},{},[292,297,302],{"type":19,"tag":70,"props":293,"children":294},{},[295],{"type":25,"value":296},"Highlight area: relevant day, month and/or year fields.",{"type":19,"tag":70,"props":298,"children":299},{},[300],{"type":25,"value":301},"Error message: ‘[Information requested] must include a [name of empty or incomplete field]’.",{"type":19,"tag":70,"props":303,"children":304},{},[305],{"type":25,"value":306},"Example: ‘Your dog’s birthday must include a month'.",{"type":19,"tag":28,"props":308,"children":309},{},[310],{"type":19,"tag":258,"props":311,"children":312},{},[313],{"type":25,"value":314},"Error: impossible date entered",{"type":19,"tag":66,"props":316,"children":317},{},[318,322,327],{"type":19,"tag":70,"props":319,"children":320},{},[321],{"type":25,"value":296},{"type":19,"tag":70,"props":323,"children":324},{},[325],{"type":25,"value":326},"Error message: ‘[Information requested] must be a real date’.",{"type":19,"tag":70,"props":328,"children":329},{},[330],{"type":25,"value":331},"Example: ‘Your dog’s birthday must be a real date'.",{"type":19,"tag":28,"props":333,"children":334},{},[335],{"type":19,"tag":258,"props":336,"children":337},{},[338],{"type":25,"value":339},"Error: future date given when past date needed",{"type":19,"tag":66,"props":341,"children":342},{},[343,347,352],{"type":19,"tag":70,"props":344,"children":345},{},[346],{"type":25,"value":270},{"type":19,"tag":70,"props":348,"children":349},{},[350],{"type":25,"value":351},"Error message: ‘[Information requested] must be in the past’.",{"type":19,"tag":70,"props":353,"children":354},{},[355],{"type":25,"value":356},"Example: ‘Your dog’s first playdate must be in the past'.",{"type":19,"tag":28,"props":358,"children":359},{},[360],{"type":19,"tag":258,"props":361,"children":362},{},[363],{"type":25,"value":364},"Error: future date given when today or past date needed",{"type":19,"tag":66,"props":366,"children":367},{},[368,372,377],{"type":19,"tag":70,"props":369,"children":370},{},[371],{"type":25,"value":270},{"type":19,"tag":70,"props":373,"children":374},{},[375],{"type":25,"value":376},"Error message: ‘[Information requested] must be today or in the past’.",{"type":19,"tag":70,"props":378,"children":379},{},[380],{"type":25,"value":381},"Example: ‘Your dog’s first beach visit must be today or in the past'.",{"type":19,"tag":28,"props":383,"children":384},{},[385],{"type":19,"tag":258,"props":386,"children":387},{},[388],{"type":25,"value":389},"Error: past date given when future date needed",{"type":19,"tag":66,"props":391,"children":392},{},[393,397,402],{"type":19,"tag":70,"props":394,"children":395},{},[396],{"type":25,"value":270},{"type":19,"tag":70,"props":398,"children":399},{},[400],{"type":25,"value":401},"Error message: ‘[Information requested] must be in the future’.",{"type":19,"tag":70,"props":403,"children":404},{},[405],{"type":25,"value":406},"Example: ‘Your dog’s next raincoat purchase must be in the future'.",{"type":19,"tag":28,"props":408,"children":409},{},[410],{"type":19,"tag":258,"props":411,"children":412},{},[413],{"type":25,"value":414},"Error: past date given when today or future date needed",{"type":19,"tag":66,"props":416,"children":417},{},[418,422,427],{"type":19,"tag":70,"props":419,"children":420},{},[421],{"type":25,"value":270},{"type":19,"tag":70,"props":423,"children":424},{},[425],{"type":25,"value":426},"Error message: ‘[Information requested] must be today or in the future’.",{"type":19,"tag":70,"props":428,"children":429},{},[430],{"type":25,"value":431},"Example: ‘Your dog’s next zoomies must be today or in the future'.",{"type":19,"tag":28,"props":433,"children":434},{},[435],{"type":19,"tag":258,"props":436,"children":437},{},[438],{"type":25,"value":439},"Error: date is not on or after another particular date",{"type":19,"tag":66,"props":441,"children":442},{},[443,447,452],{"type":19,"tag":70,"props":444,"children":445},{},[446],{"type":25,"value":270},{"type":19,"tag":70,"props":448,"children":449},{},[450],{"type":25,"value":451},"Error message: ‘[Information requested] must be the same as or after [particular date and optional description]’.",{"type":19,"tag":70,"props":453,"children":454},{},[455],{"type":25,"value":456},"Example: ‘Your dog’s next holiday must be on or after 2 April 2027 when you go on a roadtrip'.",{"type":19,"tag":28,"props":458,"children":459},{},[460],{"type":19,"tag":258,"props":461,"children":462},{},[463],{"type":25,"value":464},"Error: date is not after another particular date",{"type":19,"tag":66,"props":466,"children":467},{},[468,472,477],{"type":19,"tag":70,"props":469,"children":470},{},[471],{"type":25,"value":270},{"type":19,"tag":70,"props":473,"children":474},{},[475],{"type":25,"value":476},"Error message: ‘[Information requested] must be after [particular date and optional description]’.",{"type":19,"tag":70,"props":478,"children":479},{},[480],{"type":25,"value":481},"Example: ‘Your dog’s next blow-dry must be after 2 April 2026 when the groomer returns'.",{"type":19,"tag":28,"props":483,"children":484},{},[485],{"type":19,"tag":258,"props":486,"children":487},{},[488],{"type":25,"value":489},"Error: date is not the same as or before another particular date",{"type":19,"tag":66,"props":491,"children":492},{},[493,497,502],{"type":19,"tag":70,"props":494,"children":495},{},[496],{"type":25,"value":270},{"type":19,"tag":70,"props":498,"children":499},{},[500],{"type":25,"value":501},"Error message: ‘[Information requested] must be on or before [particular date and optional description]’.",{"type":19,"tag":70,"props":503,"children":504},{},[505],{"type":25,"value":506},"Example: ‘Your dog’s next hike must be on or before 2 January 2025'.",{"type":19,"tag":28,"props":508,"children":509},{},[510],{"type":19,"tag":258,"props":511,"children":512},{},[513],{"type":25,"value":514},"Error: date is not before another particular date",{"type":19,"tag":66,"props":516,"children":517},{},[518,522,527],{"type":19,"tag":70,"props":519,"children":520},{},[521],{"type":25,"value":270},{"type":19,"tag":70,"props":523,"children":524},{},[525],{"type":25,"value":526},"Error message: ‘[Information requested] must be before [particular date and optional description]’.",{"type":19,"tag":70,"props":528,"children":529},{},[530],{"type":25,"value":531},"Example: ‘Your dog’s next movie and pizza night must before 2 August 2027'.",{"type":19,"tag":28,"props":533,"children":534},{},[535],{"type":19,"tag":258,"props":536,"children":537},{},[538],{"type":25,"value":539},"Error: date is not between 2 other dates",{"type":19,"tag":66,"props":541,"children":542},{},[543,547,552],{"type":19,"tag":70,"props":544,"children":545},{},[546],{"type":25,"value":270},{"type":19,"tag":70,"props":548,"children":549},{},[550],{"type":25,"value":551},"Error message: ‘[Information requested] must be between [earliest date] and [latest date and optional description]’.",{"type":19,"tag":70,"props":553,"children":554},{},[555],{"type":25,"value":556},"Example: ‘Your dog’s next cuddles must be between 2 September 2026 and 3 September 2026'.",{"type":19,"tag":28,"props":558,"children":559},{},[560],{"type":19,"tag":258,"props":561,"children":562},{},[563],{"type":25,"value":564},"Error: date uses known characters that aren’t allowed",{"type":19,"tag":66,"props":566,"children":567},{},[568,572,577],{"type":19,"tag":70,"props":569,"children":570},{},[571],{"type":25,"value":296},{"type":19,"tag":70,"props":573,"children":574},{},[575],{"type":25,"value":576},"Error message: ‘The date must not include [characters]'.",{"type":19,"tag":70,"props":578,"children":579},{},[580],{"type":25,"value":581},"Example: ‘The date must not include + & ~'.",{"type":19,"tag":28,"props":583,"children":584},{},[585],{"type":19,"tag":258,"props":586,"children":587},{},[588],{"type":25,"value":589},"Error: date uses unknown characters that aren’t allowed",{"type":19,"tag":66,"props":591,"children":592},{},[593,597],{"type":19,"tag":70,"props":594,"children":595},{},[596],{"type":25,"value":296},{"type":19,"tag":70,"props":598,"children":599},{},[600],{"type":25,"value":601},"Error message: ‘The date must only include numbers'.",{"type":19,"tag":44,"props":603,"children":605},{"id":604},"forms-date-input--invalid",[],{"type":19,"tag":187,"props":607,"children":608},{},[],{"type":19,"tag":20,"props":610,"children":612},{"id":611},"theming",[613],{"type":25,"value":614},"Theming",{"type":19,"tag":28,"props":616,"children":617},{},[618],{"type":25,"value":619},"Date input uses colour to show interactive states. A date input field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a date input field remains consistent while it transitions from a focus to an active state.",{"type":19,"tag":621,"props":622,"children":623},"docs-theme-chooser",{},[624],{"type":19,"tag":44,"props":625,"children":626},{"id":46},[],{"type":19,"tag":28,"props":628,"children":629},{},[630,632,639,641,647],{"type":25,"value":631},"To create your own theme see ",{"type":19,"tag":633,"props":634,"children":636},"a",{"href":635},"/design-system/design/theming-guidance-for-designers",[637],{"type":25,"value":638},"theming guidance for designers",{"type":25,"value":640}," or ",{"type":19,"tag":633,"props":642,"children":644},{"href":643},"/design-system/develop/theming",[645],{"type":25,"value":646},"theming guidance for developers",{"type":25,"value":648},".",{"type":19,"tag":187,"props":650,"children":651},{},[],{"type":19,"tag":20,"props":653,"children":655},{"id":654},"rationale",[656],{"type":25,"value":657},"Rationale",{"type":19,"tag":28,"props":659,"children":660},{},[661],{"type":25,"value":662},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":19,"tag":28,"props":664,"children":665},{},[666],{"type":25,"value":667},"This occurs across all form and input elements, for a consistent experience.",{"title":10,"searchDepth":669,"depth":669,"links":670},2,[671,677,682,683],{"id":22,"depth":669,"text":26,"children":672},[673,675,676],{"id":51,"depth":674,"text":54},3,{"id":125,"depth":674,"text":128},{"id":149,"depth":674,"text":152},{"id":192,"depth":669,"text":195,"children":678},[679,680,681],{"id":216,"depth":674,"text":219},{"id":225,"depth":674,"text":228},{"id":235,"depth":674,"text":238},{"id":611,"depth":669,"text":614},{"id":654,"depth":669,"text":657},"markdown","content:design-system:5.components:date-input.md","content","design-system/5.components/date-input.md","md",["ShallowRef",690],["ShallowReactive",691],{"/design-system/components/date-input":692},[693,699],{"_path":694,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":695,"description":696,"layout":13,"label":14,"_type":684,"_id":697,"_source":686,"_file":698,"_extension":688},"/design-system/components/contact-us","Contact us","The Contact us component is a list of contact details and links to help the user get in touch with you.","content:design-system:5.components:contact-us.md","design-system/5.components/contact-us.md",{"_path":700,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":701,"description":702,"layout":13,"label":14,"_type":684,"_id":703,"_source":686,"_file":704,"_extension":688},"/design-system/components/detail-list","Detail list","The Detail list component shows a list of key information to users.","content:design-system:5.components:detail-list.md","design-system/5.components/detail-list.md",["ShallowRef",706],{},[708,713,952],{"title":709,"_path":710,"icon":711,"layout":712},"Ripple Design System","/","carbon:home","home",{"title":714,"_path":715,"children":716},"Design System","/design-system",[717,733,748,776,810],{"title":718,"_path":719,"children":720},"About","/design-system/about",[721,724,727,730],{"title":722,"_path":723,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":725,"_path":726,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":728,"_path":729,"layout":13},"Support","/design-system/about/getting-support",{"title":731,"_path":732,"layout":13},"Contributing","/design-system/about/contributing",{"title":734,"_path":735,"children":736},"Design","/design-system/design",[737,740,743,746],{"title":738,"_path":739,"layout":13},"Getting started","/design-system/design/getting-started",{"title":741,"_path":742,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":744,"_path":745,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":747,"_path":635,"layout":13},"Theming guidance for designers",{"title":749,"_path":750,"children":751},"Develop","/design-system/develop",[752,754,756,758],{"title":738,"_path":753,"layout":13},"/design-system/develop/getting-started",{"title":731,"_path":755,"layout":13},"/design-system/develop/contributing",{"title":757,"_path":643,"layout":13},"Theme and brand application",{"title":26,"_path":759,"children":760,"layout":13},"/design-system/develop/usage",[761,764,767,770,773],{"title":762,"_path":763,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":765,"_path":766,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":768,"_path":769,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":771,"_path":772,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":774,"_path":775,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":777,"_path":778,"children":779},"Styles","/design-system/styles",[780,783,786,789,792,795,798,801,804,807],{"title":781,"_path":782,"layout":13},"Colour","/design-system/styles/colour",{"title":784,"_path":785,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":787,"_path":788,"layout":13},"Grid","/design-system/styles/grid",{"title":790,"_path":791,"layout":13},"Icons","/design-system/styles/icons",{"title":793,"_path":794,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":796,"_path":797,"layout":13},"Layout","/design-system/styles/layout",{"title":799,"_path":800,"layout":13},"Logo","/design-system/styles/logo",{"title":802,"_path":803,"layout":13},"Motion","/design-system/styles/motion",{"title":805,"_path":806,"layout":13},"Spacing","/design-system/styles/spacing",{"title":808,"_path":809,"layout":13},"Typography","/design-system/styles/typography",{"title":811,"_path":812,"children":813},"Components","/design-system/components",[814,817,820,823,826,829,832,835,838,841,844,847,850,853,856,857,858,859,862,865,868,871,874,877,880,883,886,889,892,895,898,901,904,907,910,913,916,919,922,925,928,931,934,937,940,943,946,949],{"title":815,"_path":816,"layout":13},"Accordion","/design-system/components/accordion",{"title":818,"_path":819,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":821,"_path":822,"layout":13},"Alert","/design-system/components/alert",{"title":824,"_path":825,"layout":13},"Block quote","/design-system/components/block-quote",{"title":827,"_path":828,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":830,"_path":831,"layout":13},"Button","/design-system/components/button",{"title":833,"_path":834,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":836,"_path":837,"layout":13},"Callout","/design-system/components/callout",{"title":839,"_path":840,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":842,"_path":843,"layout":13},"Card","/design-system/components/card",{"title":845,"_path":846,"layout":13},"Carousel","/design-system/components/carousel",{"title":848,"_path":849,"layout":13},"Category grid","/design-system/components/category-grid",{"title":851,"_path":852,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":854,"_path":855,"layout":13},"Chip","/design-system/components/chip",{"title":695,"_path":694,"layout":13},{"title":11,"_path":7,"layout":13},{"title":701,"_path":700,"layout":13},{"title":860,"_path":861,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":863,"_path":864,"layout":13},"File","/design-system/components/file",{"title":866,"_path":867,"layout":13},"Footer","/design-system/components/footer",{"title":869,"_path":870,"layout":13},"Form","/design-system/components/form",{"title":872,"_path":873,"layout":13},"Form alert","/design-system/components/form-alert",{"title":875,"_path":876,"layout":13},"Header","/design-system/components/header",{"title":878,"_path":879,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":881,"_path":882,"layout":13},"Input field","/design-system/components/input-field",{"title":884,"_path":885,"layout":13},"Key dates","/design-system/components/key-dates",{"title":887,"_path":888,"layout":13},"Media","/design-system/components/media",{"title":890,"_path":891,"layout":13},"Media embed","/design-system/components/media-embed",{"title":893,"_path":894,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":896,"_path":897,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":899,"_path":900,"layout":13},"Option button","/design-system/components/option-button",{"title":902,"_path":903,"layout":13},"Page action","/design-system/components/page-action",{"title":905,"_path":906,"layout":13},"Pagination","/design-system/components/pagination",{"title":908,"_path":909,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":911,"_path":912,"layout":13},"Profile","/design-system/components/profile",{"title":914,"_path":915,"layout":13},"Radio button","/design-system/components/radio-button",{"title":917,"_path":918,"layout":13},"Related links","/design-system/components/related-links",{"title":920,"_path":921,"layout":13},"Results listing","/design-system/components/results-listing",{"title":923,"_path":924,"layout":13},"Search bar","/design-system/components/search-bar",{"title":926,"_path":927,"layout":13},"Skip link","/design-system/components/skip-link",{"title":929,"_path":930,"layout":13},"Social share","/design-system/components/social-share",{"title":932,"_path":933,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":935,"_path":936,"layout":13},"Table","/design-system/components/table",{"title":938,"_path":939,"layout":13},"Tabs","/design-system/components/tabs",{"title":941,"_path":942,"layout":13},"Tag","/design-system/components/tag",{"title":944,"_path":945,"layout":13},"Text area","/design-system/components/text-area",{"title":947,"_path":948,"layout":13},"Timeline","/design-system/components/timeline",{"title":950,"_path":951,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":953,"_path":954,"children":955,"layout":13},"Ripple Framework","/framework",[956,957,975,997],{"title":953,"_path":954,"layout":13},{"title":958,"_path":959,"children":960},"Key Concepts","/framework/key-concepts",[961,963,966,969,972],{"title":768,"_path":962,"layout":13},"/framework/key-concepts/nuxt",{"title":964,"_path":965,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":967,"_path":968,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":970,"_path":971,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":973,"_path":974,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":976,"_path":977,"children":978},"Guides","/framework/guides",[979,982,985,988,991,994],{"title":980,"_path":981,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":983,"_path":984,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":986,"_path":987,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":989,"_path":990,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":992,"_path":993,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":995,"_path":996,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":998,"_path":999,"layout":13},"Core modules","/framework/core-modules",["Reactive",1001],["Set"],["Reactive",1003],{"module-navigation":1004},null,true,"/design-system/components/date-input/",1714695654469]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/detail-list/_payload.json b/design-system/components/detail-list/_payload.json
index 4f221b2d23..d2aa3606e5 100644
--- a/design-system/components/detail-list/_payload.json
+++ b/design-system/components/detail-list/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":104,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695153551]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":104,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695651697]
\ No newline at end of file
diff --git a/design-system/components/detail-list/index.html b/design-system/components/detail-list/index.html
index 03c9586623..b651723eff 100644
--- a/design-system/components/detail-list/index.html
+++ b/design-system/components/detail-list/index.html
@@ -28,63 +28,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -96,8 +96,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Detail list</h1><p class="rpl-type-p-large" data-v-3163c6df>The Detail list component shows a list of key information to users.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the detail list to display a list with labels. This surfaces (retrieves and displays) and highlights key information to users.<!--]--></p><p><!--[-->Each row of the detail list comprises a:<!--]--></p><ul><!--[--><li><!--[-->label, a descriptive or informative label for your content, for example, &#39;Location&#39;<!--]--></li><li><!--[-->content, the piece of information itself, for example, &#39;East Gippsland&#39;.<!--]--></li><!--]--></ul><p><!--[-->The detail list is used to display:<!--]--></p><ul><!--[--><li><!--[-->metadata, for example, ‘Published date&#39; (which shows as &#39;22 March 2023’)<!--]--></li><li><!--[-->status, for example of a program or grant.<!--]--></li><!--]--></ul><p><!--[-->Only use the detail list for simple information. For data or complex information, consider using a table.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-description-list--with-link&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-description-list--with-link&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use single words only for the label.<!--]--></li><li><!--[-->Include a link if you need to.<!--]--></li><li><!--[-->Keep the summary content and labels clear and concise.<!--]--></li><li><!--[-->Align all summary content to the longest label.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t use labels for unrelated summary content.<!--]--></li><li><!--[-->Don&#39;t use it to surface information that is not important to users.<!--]--></li><li><!--[-->Don&#39;t use with complex or long form content.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->When a link is present, the detail list uses the link colour for interaction states.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-description-list--with-link&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-description-list--with-link&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/detail-list.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/detail-list/_payload.json">[{"state":1,"once":504,"_errors":506,"serverRendered":509,"path":7,"prerenderedAt":510},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":191,"$sdd-globals":207,"$sdd-navigation":209},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/detail-list":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":186,"_id":187,"_source":188,"_file":189,"_extension":190},"/design-system/components/detail-list","components",false,"","Detail list","The Detail list component shows a list of key information to users.","page","Core",{"type":16,"children":17,"toc":177},"root",[18,27,33,38,53,58,71,76,81,88,111,117,135,139,145,150,157],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use the detail list to display a list with labels. This surfaces (retrieves and displays) and highlights key information to users.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Each row of the detail list comprises a:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"label, a descriptive or informative label for your content, for example, 'Location'",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"content, the piece of information itself, for example, 'East Gippsland'.",{"type":19,"tag":28,"props":54,"children":55},{},[56],{"type":25,"value":57},"The detail list is used to display:",{"type":19,"tag":39,"props":59,"children":60},{},[61,66],{"type":19,"tag":43,"props":62,"children":63},{},[64],{"type":25,"value":65},"metadata, for example, ‘Published date' (which shows as '22 March 2023’)",{"type":19,"tag":43,"props":67,"children":68},{},[69],{"type":25,"value":70},"status, for example of a program or grant.",{"type":19,"tag":28,"props":72,"children":73},{},[74],{"type":25,"value":75},"Only use the detail list for simple information. For data or complex information, consider using a table.",{"type":19,"tag":77,"props":78,"children":80},"docs-example",{"id":79},"core-containers-description-list--with-link",[],{"type":19,"tag":82,"props":83,"children":85},"h3",{"id":84},"when-and-how-to-use",[86],{"type":25,"value":87},"When and how to use",{"type":19,"tag":39,"props":89,"children":90},{},[91,96,101,106],{"type":19,"tag":43,"props":92,"children":93},{},[94],{"type":25,"value":95},"Use single words only for the label.",{"type":19,"tag":43,"props":97,"children":98},{},[99],{"type":25,"value":100},"Include a link if you need to.",{"type":19,"tag":43,"props":102,"children":103},{},[104],{"type":25,"value":105},"Keep the summary content and labels clear and concise.",{"type":19,"tag":43,"props":107,"children":108},{},[109],{"type":25,"value":110},"Align all summary content to the longest label.",{"type":19,"tag":82,"props":112,"children":114},{"id":113},"when-and-how-not-to-use",[115],{"type":25,"value":116},"When and how not to use",{"type":19,"tag":39,"props":118,"children":119},{},[120,125,130],{"type":19,"tag":43,"props":121,"children":122},{},[123],{"type":25,"value":124},"Don't use labels for unrelated summary content.",{"type":19,"tag":43,"props":126,"children":127},{},[128],{"type":25,"value":129},"Don't use it to surface information that is not important to users.",{"type":19,"tag":43,"props":131,"children":132},{},[133],{"type":25,"value":134},"Don't use with complex or long form content.",{"type":19,"tag":136,"props":137,"children":138},"hr",{},[],{"type":19,"tag":20,"props":140,"children":142},{"id":141},"theming",[143],{"type":25,"value":144},"Theming",{"type":19,"tag":28,"props":146,"children":147},{},[148],{"type":25,"value":149},"When a link is present, the detail list uses the link colour for interaction states.",{"type":19,"tag":151,"props":152,"children":153},"docs-theme-chooser",{},[154],{"type":19,"tag":77,"props":155,"children":156},{"id":79},[],{"type":19,"tag":28,"props":158,"children":159},{},[160,162,168,170,175],{"type":25,"value":161},"To create your own theme, see ",{"type":19,"tag":163,"props":164,"children":165},"a",{"href":10},[166],{"type":25,"value":167},"theming guidance for designers",{"type":25,"value":169}," or ",{"type":19,"tag":163,"props":171,"children":172},{"href":10},[173],{"type":25,"value":174},"theming guidance for developers",{"type":25,"value":176},".",{"title":10,"searchDepth":178,"depth":178,"links":179},2,[180,185],{"id":22,"depth":178,"text":26,"children":181},[182,184],{"id":84,"depth":183,"text":87},3,{"id":113,"depth":183,"text":116},{"id":141,"depth":178,"text":144},"markdown","content:design-system:5.components:detail-list.md","content","design-system/5.components/detail-list.md","md",["ShallowRef",192],["ShallowReactive",193],{"/design-system/components/detail-list":194},[195,201],{"_path":196,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":197,"description":198,"layout":13,"label":14,"_type":186,"_id":199,"_source":188,"_file":200,"_extension":190},"/design-system/components/date-input","Date input","The Date input component helps users enter a date.","content:design-system:5.components:date-input.md","design-system/5.components/date-input.md",{"_path":202,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":203,"description":204,"layout":13,"label":14,"_type":186,"_id":205,"_source":188,"_file":206,"_extension":190},"/design-system/components/dropdown","Dropdown","The Dropdown component lets users see a list of available options and then select one or more options.","content:design-system:5.components:dropdown.md","design-system/5.components/dropdown.md",["ShallowRef",208],{},[210,215,456],{"title":211,"_path":212,"icon":213,"layout":214},"Ripple Design System","/","carbon:home","home",{"title":216,"_path":217,"children":218},"Design System","/design-system",[219,235,251,280,314],{"title":220,"_path":221,"children":222},"About","/design-system/about",[223,226,229,232],{"title":224,"_path":225,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":227,"_path":228,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":230,"_path":231,"layout":13},"Support","/design-system/about/getting-support",{"title":233,"_path":234,"layout":13},"Contributing","/design-system/about/contributing",{"title":236,"_path":237,"children":238},"Design","/design-system/design",[239,242,245,248],{"title":240,"_path":241,"layout":13},"Getting started","/design-system/design/getting-started",{"title":243,"_path":244,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":246,"_path":247,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":249,"_path":250,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":252,"_path":253,"children":254},"Develop","/design-system/develop",[255,257,259,262],{"title":240,"_path":256,"layout":13},"/design-system/develop/getting-started",{"title":233,"_path":258,"layout":13},"/design-system/develop/contributing",{"title":260,"_path":261,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":263,"children":264,"layout":13},"/design-system/develop/usage",[265,268,271,274,277],{"title":266,"_path":267,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":269,"_path":270,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":272,"_path":273,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":275,"_path":276,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":278,"_path":279,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":281,"_path":282,"children":283},"Styles","/design-system/styles",[284,287,290,293,296,299,302,305,308,311],{"title":285,"_path":286,"layout":13},"Colour","/design-system/styles/colour",{"title":288,"_path":289,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":291,"_path":292,"layout":13},"Grid","/design-system/styles/grid",{"title":294,"_path":295,"layout":13},"Icons","/design-system/styles/icons",{"title":297,"_path":298,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":300,"_path":301,"layout":13},"Layout","/design-system/styles/layout",{"title":303,"_path":304,"layout":13},"Logo","/design-system/styles/logo",{"title":306,"_path":307,"layout":13},"Motion","/design-system/styles/motion",{"title":309,"_path":310,"layout":13},"Spacing","/design-system/styles/spacing",{"title":312,"_path":313,"layout":13},"Typography","/design-system/styles/typography",{"title":315,"_path":316,"children":317},"Components","/design-system/components",[318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,364,365,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,441,444,447,450,453],{"title":319,"_path":320,"layout":13},"Accordion","/design-system/components/accordion",{"title":322,"_path":323,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":325,"_path":326,"layout":13},"Alert","/design-system/components/alert",{"title":328,"_path":329,"layout":13},"Block quote","/design-system/components/block-quote",{"title":331,"_path":332,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":334,"_path":335,"layout":13},"Button","/design-system/components/button",{"title":337,"_path":338,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":340,"_path":341,"layout":13},"Callout","/design-system/components/callout",{"title":343,"_path":344,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":346,"_path":347,"layout":13},"Card","/design-system/components/card",{"title":349,"_path":350,"layout":13},"Carousel","/design-system/components/carousel",{"title":352,"_path":353,"layout":13},"Category grid","/design-system/components/category-grid",{"title":355,"_path":356,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":358,"_path":359,"layout":13},"Chip","/design-system/components/chip",{"title":361,"_path":362,"layout":13},"Contact us","/design-system/components/contact-us",{"title":197,"_path":196,"layout":13},{"title":11,"_path":7,"layout":13},{"title":203,"_path":202,"layout":13},{"title":367,"_path":368,"layout":13},"File","/design-system/components/file",{"title":370,"_path":371,"layout":13},"Footer","/design-system/components/footer",{"title":373,"_path":374,"layout":13},"Form","/design-system/components/form",{"title":376,"_path":377,"layout":13},"Form alert","/design-system/components/form-alert",{"title":379,"_path":380,"layout":13},"Header","/design-system/components/header",{"title":382,"_path":383,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":385,"_path":386,"layout":13},"Input field","/design-system/components/input-field",{"title":388,"_path":389,"layout":13},"Key dates","/design-system/components/key-dates",{"title":391,"_path":392,"layout":13},"Media","/design-system/components/media",{"title":394,"_path":395,"layout":13},"Media embed","/design-system/components/media-embed",{"title":397,"_path":398,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":400,"_path":401,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":403,"_path":404,"layout":13},"Option button","/design-system/components/option-button",{"title":406,"_path":407,"layout":13},"Page action","/design-system/components/page-action",{"title":409,"_path":410,"layout":13},"Pagination","/design-system/components/pagination",{"title":412,"_path":413,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":415,"_path":416,"layout":13},"Profile","/design-system/components/profile",{"title":418,"_path":419,"layout":13},"Radio button","/design-system/components/radio-button",{"title":421,"_path":422,"layout":13},"Related links","/design-system/components/related-links",{"title":424,"_path":425,"layout":13},"Results listing","/design-system/components/results-listing",{"title":427,"_path":428,"layout":13},"Search bar","/design-system/components/search-bar",{"title":430,"_path":431,"layout":13},"Skip link","/design-system/components/skip-link",{"title":433,"_path":434,"layout":13},"Social share","/design-system/components/social-share",{"title":436,"_path":437,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":439,"_path":440,"layout":13},"Table","/design-system/components/table",{"title":442,"_path":443,"layout":13},"Tabs","/design-system/components/tabs",{"title":445,"_path":446,"layout":13},"Tag","/design-system/components/tag",{"title":448,"_path":449,"layout":13},"Text area","/design-system/components/text-area",{"title":451,"_path":452,"layout":13},"Timeline","/design-system/components/timeline",{"title":454,"_path":455,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":457,"_path":458,"children":459,"layout":13},"Ripple Framework","/framework",[460,461,479,501],{"title":457,"_path":458,"layout":13},{"title":462,"_path":463,"children":464},"Key Concepts","/framework/key-concepts",[465,467,470,473,476],{"title":272,"_path":466,"layout":13},"/framework/key-concepts/nuxt",{"title":468,"_path":469,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":471,"_path":472,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":474,"_path":475,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":477,"_path":478,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":480,"_path":481,"children":482},"Guides","/framework/guides",[483,486,489,492,495,498],{"title":484,"_path":485,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":487,"_path":488,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":490,"_path":491,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":493,"_path":494,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":496,"_path":497,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":499,"_path":500,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":502,"_path":503,"layout":13},"Core modules","/framework/core-modules",["Reactive",505],["Set"],["Reactive",507],{"module-navigation":508},null,true,1714695153551]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Detail list</h1><p class="rpl-type-p-large" data-v-3163c6df>The Detail list component shows a list of key information to users.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the detail list to display a list with labels. This surfaces (retrieves and displays) and highlights key information to users.<!--]--></p><p><!--[-->Each row of the detail list comprises a:<!--]--></p><ul><!--[--><li><!--[-->label, a descriptive or informative label for your content, for example, &#39;Location&#39;<!--]--></li><li><!--[-->content, the piece of information itself, for example, &#39;East Gippsland&#39;.<!--]--></li><!--]--></ul><p><!--[-->The detail list is used to display:<!--]--></p><ul><!--[--><li><!--[-->metadata, for example, ‘Published date&#39; (which shows as &#39;22 March 2023’)<!--]--></li><li><!--[-->status, for example of a program or grant.<!--]--></li><!--]--></ul><p><!--[-->Only use the detail list for simple information. For data or complex information, consider using a table.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-description-list--with-link&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-description-list--with-link&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use single words only for the label.<!--]--></li><li><!--[-->Include a link if you need to.<!--]--></li><li><!--[-->Keep the summary content and labels clear and concise.<!--]--></li><li><!--[-->Align all summary content to the longest label.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t use labels for unrelated summary content.<!--]--></li><li><!--[-->Don&#39;t use it to surface information that is not important to users.<!--]--></li><li><!--[-->Don&#39;t use with complex or long form content.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->When a link is present, the detail list uses the link colour for interaction states.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-description-list--with-link&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-description-list--with-link&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/detail-list.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/detail-list/_payload.json">[{"state":1,"once":504,"_errors":506,"serverRendered":509,"path":7,"prerenderedAt":510},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":191,"$sdd-globals":207,"$sdd-navigation":209},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/detail-list":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":186,"_id":187,"_source":188,"_file":189,"_extension":190},"/design-system/components/detail-list","components",false,"","Detail list","The Detail list component shows a list of key information to users.","page","Core",{"type":16,"children":17,"toc":177},"root",[18,27,33,38,53,58,71,76,81,88,111,117,135,139,145,150,157],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use the detail list to display a list with labels. This surfaces (retrieves and displays) and highlights key information to users.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Each row of the detail list comprises a:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"label, a descriptive or informative label for your content, for example, 'Location'",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"content, the piece of information itself, for example, 'East Gippsland'.",{"type":19,"tag":28,"props":54,"children":55},{},[56],{"type":25,"value":57},"The detail list is used to display:",{"type":19,"tag":39,"props":59,"children":60},{},[61,66],{"type":19,"tag":43,"props":62,"children":63},{},[64],{"type":25,"value":65},"metadata, for example, ‘Published date' (which shows as '22 March 2023’)",{"type":19,"tag":43,"props":67,"children":68},{},[69],{"type":25,"value":70},"status, for example of a program or grant.",{"type":19,"tag":28,"props":72,"children":73},{},[74],{"type":25,"value":75},"Only use the detail list for simple information. For data or complex information, consider using a table.",{"type":19,"tag":77,"props":78,"children":80},"docs-example",{"id":79},"core-containers-description-list--with-link",[],{"type":19,"tag":82,"props":83,"children":85},"h3",{"id":84},"when-and-how-to-use",[86],{"type":25,"value":87},"When and how to use",{"type":19,"tag":39,"props":89,"children":90},{},[91,96,101,106],{"type":19,"tag":43,"props":92,"children":93},{},[94],{"type":25,"value":95},"Use single words only for the label.",{"type":19,"tag":43,"props":97,"children":98},{},[99],{"type":25,"value":100},"Include a link if you need to.",{"type":19,"tag":43,"props":102,"children":103},{},[104],{"type":25,"value":105},"Keep the summary content and labels clear and concise.",{"type":19,"tag":43,"props":107,"children":108},{},[109],{"type":25,"value":110},"Align all summary content to the longest label.",{"type":19,"tag":82,"props":112,"children":114},{"id":113},"when-and-how-not-to-use",[115],{"type":25,"value":116},"When and how not to use",{"type":19,"tag":39,"props":118,"children":119},{},[120,125,130],{"type":19,"tag":43,"props":121,"children":122},{},[123],{"type":25,"value":124},"Don't use labels for unrelated summary content.",{"type":19,"tag":43,"props":126,"children":127},{},[128],{"type":25,"value":129},"Don't use it to surface information that is not important to users.",{"type":19,"tag":43,"props":131,"children":132},{},[133],{"type":25,"value":134},"Don't use with complex or long form content.",{"type":19,"tag":136,"props":137,"children":138},"hr",{},[],{"type":19,"tag":20,"props":140,"children":142},{"id":141},"theming",[143],{"type":25,"value":144},"Theming",{"type":19,"tag":28,"props":146,"children":147},{},[148],{"type":25,"value":149},"When a link is present, the detail list uses the link colour for interaction states.",{"type":19,"tag":151,"props":152,"children":153},"docs-theme-chooser",{},[154],{"type":19,"tag":77,"props":155,"children":156},{"id":79},[],{"type":19,"tag":28,"props":158,"children":159},{},[160,162,168,170,175],{"type":25,"value":161},"To create your own theme, see ",{"type":19,"tag":163,"props":164,"children":165},"a",{"href":10},[166],{"type":25,"value":167},"theming guidance for designers",{"type":25,"value":169}," or ",{"type":19,"tag":163,"props":171,"children":172},{"href":10},[173],{"type":25,"value":174},"theming guidance for developers",{"type":25,"value":176},".",{"title":10,"searchDepth":178,"depth":178,"links":179},2,[180,185],{"id":22,"depth":178,"text":26,"children":181},[182,184],{"id":84,"depth":183,"text":87},3,{"id":113,"depth":183,"text":116},{"id":141,"depth":178,"text":144},"markdown","content:design-system:5.components:detail-list.md","content","design-system/5.components/detail-list.md","md",["ShallowRef",192],["ShallowReactive",193],{"/design-system/components/detail-list":194},[195,201],{"_path":196,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":197,"description":198,"layout":13,"label":14,"_type":186,"_id":199,"_source":188,"_file":200,"_extension":190},"/design-system/components/date-input","Date input","The Date input component helps users enter a date.","content:design-system:5.components:date-input.md","design-system/5.components/date-input.md",{"_path":202,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":203,"description":204,"layout":13,"label":14,"_type":186,"_id":205,"_source":188,"_file":206,"_extension":190},"/design-system/components/dropdown","Dropdown","The Dropdown component lets users see a list of available options and then select one or more options.","content:design-system:5.components:dropdown.md","design-system/5.components/dropdown.md",["ShallowRef",208],{},[210,215,456],{"title":211,"_path":212,"icon":213,"layout":214},"Ripple Design System","/","carbon:home","home",{"title":216,"_path":217,"children":218},"Design System","/design-system",[219,235,251,280,314],{"title":220,"_path":221,"children":222},"About","/design-system/about",[223,226,229,232],{"title":224,"_path":225,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":227,"_path":228,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":230,"_path":231,"layout":13},"Support","/design-system/about/getting-support",{"title":233,"_path":234,"layout":13},"Contributing","/design-system/about/contributing",{"title":236,"_path":237,"children":238},"Design","/design-system/design",[239,242,245,248],{"title":240,"_path":241,"layout":13},"Getting started","/design-system/design/getting-started",{"title":243,"_path":244,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":246,"_path":247,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":249,"_path":250,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":252,"_path":253,"children":254},"Develop","/design-system/develop",[255,257,259,262],{"title":240,"_path":256,"layout":13},"/design-system/develop/getting-started",{"title":233,"_path":258,"layout":13},"/design-system/develop/contributing",{"title":260,"_path":261,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":263,"children":264,"layout":13},"/design-system/develop/usage",[265,268,271,274,277],{"title":266,"_path":267,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":269,"_path":270,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":272,"_path":273,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":275,"_path":276,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":278,"_path":279,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":281,"_path":282,"children":283},"Styles","/design-system/styles",[284,287,290,293,296,299,302,305,308,311],{"title":285,"_path":286,"layout":13},"Colour","/design-system/styles/colour",{"title":288,"_path":289,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":291,"_path":292,"layout":13},"Grid","/design-system/styles/grid",{"title":294,"_path":295,"layout":13},"Icons","/design-system/styles/icons",{"title":297,"_path":298,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":300,"_path":301,"layout":13},"Layout","/design-system/styles/layout",{"title":303,"_path":304,"layout":13},"Logo","/design-system/styles/logo",{"title":306,"_path":307,"layout":13},"Motion","/design-system/styles/motion",{"title":309,"_path":310,"layout":13},"Spacing","/design-system/styles/spacing",{"title":312,"_path":313,"layout":13},"Typography","/design-system/styles/typography",{"title":315,"_path":316,"children":317},"Components","/design-system/components",[318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,364,365,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,441,444,447,450,453],{"title":319,"_path":320,"layout":13},"Accordion","/design-system/components/accordion",{"title":322,"_path":323,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":325,"_path":326,"layout":13},"Alert","/design-system/components/alert",{"title":328,"_path":329,"layout":13},"Block quote","/design-system/components/block-quote",{"title":331,"_path":332,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":334,"_path":335,"layout":13},"Button","/design-system/components/button",{"title":337,"_path":338,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":340,"_path":341,"layout":13},"Callout","/design-system/components/callout",{"title":343,"_path":344,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":346,"_path":347,"layout":13},"Card","/design-system/components/card",{"title":349,"_path":350,"layout":13},"Carousel","/design-system/components/carousel",{"title":352,"_path":353,"layout":13},"Category grid","/design-system/components/category-grid",{"title":355,"_path":356,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":358,"_path":359,"layout":13},"Chip","/design-system/components/chip",{"title":361,"_path":362,"layout":13},"Contact us","/design-system/components/contact-us",{"title":197,"_path":196,"layout":13},{"title":11,"_path":7,"layout":13},{"title":203,"_path":202,"layout":13},{"title":367,"_path":368,"layout":13},"File","/design-system/components/file",{"title":370,"_path":371,"layout":13},"Footer","/design-system/components/footer",{"title":373,"_path":374,"layout":13},"Form","/design-system/components/form",{"title":376,"_path":377,"layout":13},"Form alert","/design-system/components/form-alert",{"title":379,"_path":380,"layout":13},"Header","/design-system/components/header",{"title":382,"_path":383,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":385,"_path":386,"layout":13},"Input field","/design-system/components/input-field",{"title":388,"_path":389,"layout":13},"Key dates","/design-system/components/key-dates",{"title":391,"_path":392,"layout":13},"Media","/design-system/components/media",{"title":394,"_path":395,"layout":13},"Media embed","/design-system/components/media-embed",{"title":397,"_path":398,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":400,"_path":401,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":403,"_path":404,"layout":13},"Option button","/design-system/components/option-button",{"title":406,"_path":407,"layout":13},"Page action","/design-system/components/page-action",{"title":409,"_path":410,"layout":13},"Pagination","/design-system/components/pagination",{"title":412,"_path":413,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":415,"_path":416,"layout":13},"Profile","/design-system/components/profile",{"title":418,"_path":419,"layout":13},"Radio button","/design-system/components/radio-button",{"title":421,"_path":422,"layout":13},"Related links","/design-system/components/related-links",{"title":424,"_path":425,"layout":13},"Results listing","/design-system/components/results-listing",{"title":427,"_path":428,"layout":13},"Search bar","/design-system/components/search-bar",{"title":430,"_path":431,"layout":13},"Skip link","/design-system/components/skip-link",{"title":433,"_path":434,"layout":13},"Social share","/design-system/components/social-share",{"title":436,"_path":437,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":439,"_path":440,"layout":13},"Table","/design-system/components/table",{"title":442,"_path":443,"layout":13},"Tabs","/design-system/components/tabs",{"title":445,"_path":446,"layout":13},"Tag","/design-system/components/tag",{"title":448,"_path":449,"layout":13},"Text area","/design-system/components/text-area",{"title":451,"_path":452,"layout":13},"Timeline","/design-system/components/timeline",{"title":454,"_path":455,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":457,"_path":458,"children":459,"layout":13},"Ripple Framework","/framework",[460,461,479,501],{"title":457,"_path":458,"layout":13},{"title":462,"_path":463,"children":464},"Key Concepts","/framework/key-concepts",[465,467,470,473,476],{"title":272,"_path":466,"layout":13},"/framework/key-concepts/nuxt",{"title":468,"_path":469,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":471,"_path":472,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":474,"_path":475,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":477,"_path":478,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":480,"_path":481,"children":482},"Guides","/framework/guides",[483,486,489,492,495,498],{"title":484,"_path":485,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":487,"_path":488,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":490,"_path":491,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":493,"_path":494,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":496,"_path":497,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":499,"_path":500,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":502,"_path":503,"layout":13},"Core modules","/framework/core-modules",["Reactive",505],["Set"],["Reactive",507],{"module-navigation":508},null,true,1714695651697]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/dropdown/_payload.json b/design-system/components/dropdown/_payload.json
index e1fef6ebf4..0fa5021c69 100644
--- a/design-system/components/dropdown/_payload.json
+++ b/design-system/components/dropdown/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":104,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695153555]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":104,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695651750]
\ No newline at end of file
diff --git a/design-system/components/dropdown/index.html b/design-system/components/dropdown/index.html
index 738ae4b3b5..41066ba80e 100644
--- a/design-system/components/dropdown/index.html
+++ b/design-system/components/dropdown/index.html
@@ -28,65 +28,65 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.CwUV-MIb.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.F9NVvvm4.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.gK7ORMEc.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.GmB4B_NE.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -98,8 +98,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Dropdown</h1><p class="rpl-type-p-large" data-v-3163c6df>The Dropdown component lets users see a list of available options and then select one or more options.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use this component to let users select one or more items from a dropdown list of available items.<!--]--></p><p><!--[-->It can be helpful when users need to choose from 6 or more options. It can also be used when listing all options in checkboxes or radio buttons is not viable.<!--]--></p><p><!--[-->Dropdowns should only be used as a last resort. For example, to find a compromise between usability and keeping the layout compact and clear.<!--]--></p><p><!--[-->Many users find dropdowns hard to use. Dropdowns hide content by default and create user confusion, cross-device issues and limited accessibility. Use radio buttons, checkboxes or input fields for most small lists instead.<!--]--></p><p><!--[-->A compromise might be needed for a long list of options (for example, all dog breeds). Or, when option description lengths vary or wrap over multiple lines. These situations also confuse users by creating layout issues for checkboxes, input fields or radio buttons.<!--]--></p><p><!--[-->A dropdown is often called a &#39;select&#39;.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-dropdown--single-select-many-items&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-dropdown--single-select-many-items&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="how-this-component-works" data-v-ea525968><a href="#how-this-component-works" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->How this component works<!--]--></a></h2><p><!--[-->You must use a form label with a dropdown.<!--]--></p><p><!--[-->You can use a dropdown with:<!--]--></p><ul><!--[--><li><!--[-->requirement label<!--]--></li><li><!--[-->hint text<!--]--></li><li><!--[-->placeholder text.<!--]--></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="single-select"><!--[-->Single select<!--]--></h4><p><!--[-->A single select dropdown is used when users can select only a single option.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="multi-select"><!--[-->Multi select<!--]--></h4><p><!--[-->If using a multi select dropdown, always tell the user how many menu options they can select. Add extra instructions in the hint text to guide them. For example, &#39;Select up to 3 options&#39;.<!--]--></p><p><!--[-->Even though users can choose multiple items in a multi select dropdown, they often find this confusing. checkboxes could be better.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="hint-text"><!--[-->Hint text<!--]--></h4><p><!--[-->Hint text can be used to tell the user what, or how, to successfully complete a dropdown.<!--]--></p><p><!--[-->For example, hint text can include:<!--]--></p><ul><!--[--><li><!--[-->an overall description of the dropdown<!--]--></li><li><!--[-->hints for what kind of information needs to be input<!--]--></li><li><!--[-->specific formatting examples or requirements.<!--]--></li><!--]--></ul><p><!--[-->Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="placeholder-text"><!--[-->Placeholder text<!--]--></h4><p><!--[-->Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.<!--]--></p><p><!--[-->If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information. Placeholder text for the dropdown trigger must clearly tell the user its purpose.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="selected-value"><!--[-->Selected value<!--]--></h4><p><!--[-->The selected value shows the option a user has selected.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="text-overflow"><!--[-->Text overflow<!--]--></h4><p><!--[-->When the field label and menu text are too long for the available horizontal space, they wrap to form another line.<!--]--></p><p><!--[-->The field text itself truncates at the end, but the text can be shown in full in the menu.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="menu-height"><!--[-->Menu height<!--]--></h4><p><!--[-->The dropdown menu has a maximum height of 288px or 6 single text-line options.<!--]--></p><p><!--[-->We recommend starting a scroll at the sixth option in the menu list. This may vary based on your specific use case.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use as a last resort component.<!--]--></li><li><!--[-->A label must be used with a dropdown.<!--]--></li><li><!--[-->Ensure dropdown item descriptions are short and concise.<!--]--></li><li><!--[-->Use when listing between 6 and (if possible) 15 items, if checkboxes or radio buttons can’t be used.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Never set the form to submit when a dropdown item is selected.<!--]--></li><li><!--[-->Don’t write long menu option descriptions.<!--]--></li><li><!--[-->Descriptions should not wrap over a single line.<!--]--></li><li><!--[-->Icons or decorative images should never be used in dropdowns.<!--]--></li><li><!--[-->Do not use a dropdown for listings less than 6 options, consider using radio buttons or checkboxes.<!--]--></li><li><!--[-->Do not use a dropdown without a label as it confuses users and is not accessible.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->Dropdown has 2 main variants:<!--]--></p><ul><!--[--><li><!--[-->single select<!--]--></li><li><!--[-->multi select.<!--]--></li><!--]--></ul><p><!--[-->Both variants have default and reverse sub-variants.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="single-select-1" data-v-ea525968><a href="#single-select-1" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Single select<!--]--></a></h2><p><!--[-->A single select dropdown is used when users can select only a single option.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="making-a-selection"><!--[-->Making a selection<!--]--></h4><ul><!--[--><li><!--[-->Placeholder text is shown by default in the field when the dropdown is closed.<!--]--></li><li><!--[-->Interacting with a closed field opens a menu of options.<!--]--></li><li><!--[-->The dropdown closes when an option is chosen.<!--]--></li><li><!--[-->The selection option replaces the placeholder text, but also remains in place if the menus is opened.<!--]--></li><li><!--[-->The selected option then has a tick to the left of the option in the open menu, to remind the user of the selected value.<!--]--></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="default"><!--[-->Default<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-dropdown--single-select-many-items&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-dropdown--single-select-many-items&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="reverse"><!--[-->Reverse<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-dropdown--reverse-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-dropdown--reverse-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="multi-select-1" data-v-ea525968><a href="#multi-select-1" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Multi select<!--]--></a></h2><p><!--[-->Users can choose multiple items in a list or to filter information.<!--]--></p><p><!--[-->If using a multi select dropdown, always tell the user how many menu options they can select.<!--]--></p><p><!--[-->Add extra instructions in the hint text to guide them. For example, &#39;Select up to 3 options&#39;.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="making-a-selection-1"><!--[-->Making a selection<!--]--></h4><ul><!--[--><li><!--[-->Placeholder text is shown by default in the field when the dropdown is closed.<!--]--></li><li><!--[-->When the menu is opened, each option shows a checkbox input to the left of its text.<!--]--></li><li><!--[-->When options are being selected, the menu stays open.<!--]--></li><li><!--[-->The selected options replaces the placeholder text. When selected options extend beyond the width of the field, the values truncate. A ‘+#’ appears to the right of the field, to show how many unseen options (#) are selected.<!--]--></li><li><!--[-->As multiple selections are possible, the user needs to interact outside the dropdown, or on the field, to close the menu.<!--]--></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="default-1"><!--[-->Default<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-dropdown--multi-select-many-items&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-dropdown--multi-select-many-items&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="reverse-1"><!--[-->Reverse<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-dropdown--reverse-variant&amp;args=multiple:true&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-dropdown--reverse-variant&amp;args=multiple:true&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="error" data-v-ea525968><a href="#error" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Error<!--]--></a></h2><p><!--[-->All form inputs share error state styling.<!--]--></p><p><!--[-->Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.<!--]--></p><p><!--[-->When creating an error message for a dropdown, use the wording below.<!--]--></p><p><!--[--><strong><!--[-->If nothing is selected and the question has options in it<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user to choose which options apply to them.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select if [options]’.<!--]--></li><li><!--[-->Example: ‘Select if you like summer, winter, autumn, and/or spring.&#39;<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->If nothing is selected and the question does not have options in it<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user to choose which options apply to them.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select <span>options</span>’.<!--]--></li><li><!--[-->Example: &#39;Select your favourite season&#39;.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=add storybook&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/add storybook&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Dropdown uses colour for:<!--]--></p><ul><!--[--><li><!--[-->interactive states<!--]--></li><li><!--[-->icons.<!--]--></li><!--]--></ul><p><!--[-->A dropdown in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a dropdown remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-dropdown--multi-select-many-items&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-dropdown--multi-select-many-items&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="rationale" data-v-fff5b905><a href="#rationale" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/dropdown.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/dropdown/_payload.json">[{"state":1,"once":956,"_errors":958,"serverRendered":961,"path":962,"prerenderedAt":963},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":645,"$sdd-globals":661,"$sdd-navigation":663},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/dropdown":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":640,"_id":641,"_source":642,"_file":643,"_extension":644},"/design-system/components/dropdown","components",false,"","Dropdown","The Dropdown component lets users see a list of available options and then select one or more options.","page","Core",{"type":16,"children":17,"toc":624},"root",[18,27,33,38,43,48,53,58,63,70,75,80,100,107,112,118,123,128,134,139,144,162,167,173,178,183,189,194,200,205,210,216,221,226,232,255,261,294,298,304,309,322,327,332,336,342,370,376,379,385,389,394,399,404,409,414,441,446,450,455,459,465,470,475,480,489,494,507,515,519,540,544,547,553,558,571,576,583,605,608,614,619],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use this component to let users select one or more items from a dropdown list of available items.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"It can be helpful when users need to choose from 6 or more options. It can also be used when listing all options in checkboxes or radio buttons is not viable.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Dropdowns should only be used as a last resort. For example, to find a compromise between usability and keeping the layout compact and clear.",{"type":19,"tag":28,"props":44,"children":45},{},[46],{"type":25,"value":47},"Many users find dropdowns hard to use. Dropdowns hide content by default and create user confusion, cross-device issues and limited accessibility. Use radio buttons, checkboxes or input fields for most small lists instead.",{"type":19,"tag":28,"props":49,"children":50},{},[51],{"type":25,"value":52},"A compromise might be needed for a long list of options (for example, all dog breeds). Or, when option description lengths vary or wrap over multiple lines. These situations also confuse users by creating layout issues for checkboxes, input fields or radio buttons.",{"type":19,"tag":28,"props":54,"children":55},{},[56],{"type":25,"value":57},"A dropdown is often called a 'select'.",{"type":19,"tag":59,"props":60,"children":62},"docs-example",{"id":61},"forms-dropdown--single-select-many-items",[],{"type":19,"tag":64,"props":65,"children":67},"h3",{"id":66},"how-this-component-works",[68],{"type":25,"value":69},"How this component works",{"type":19,"tag":28,"props":71,"children":72},{},[73],{"type":25,"value":74},"You must use a form label with a dropdown.",{"type":19,"tag":28,"props":76,"children":77},{},[78],{"type":25,"value":79},"You can use a dropdown with:",{"type":19,"tag":81,"props":82,"children":83},"ul",{},[84,90,95],{"type":19,"tag":85,"props":86,"children":87},"li",{},[88],{"type":25,"value":89},"requirement label",{"type":19,"tag":85,"props":91,"children":92},{},[93],{"type":25,"value":94},"hint text",{"type":19,"tag":85,"props":96,"children":97},{},[98],{"type":25,"value":99},"placeholder text.",{"type":19,"tag":101,"props":102,"children":104},"h4",{"id":103},"single-select",[105],{"type":25,"value":106},"Single select",{"type":19,"tag":28,"props":108,"children":109},{},[110],{"type":25,"value":111},"A single select dropdown is used when users can select only a single option.",{"type":19,"tag":101,"props":113,"children":115},{"id":114},"multi-select",[116],{"type":25,"value":117},"Multi select",{"type":19,"tag":28,"props":119,"children":120},{},[121],{"type":25,"value":122},"If using a multi select dropdown, always tell the user how many menu options they can select. Add extra instructions in the hint text to guide them. For example, 'Select up to 3 options'.",{"type":19,"tag":28,"props":124,"children":125},{},[126],{"type":25,"value":127},"Even though users can choose multiple items in a multi select dropdown, they often find this confusing. checkboxes could be better.",{"type":19,"tag":101,"props":129,"children":131},{"id":130},"hint-text",[132],{"type":25,"value":133},"Hint text",{"type":19,"tag":28,"props":135,"children":136},{},[137],{"type":25,"value":138},"Hint text can be used to tell the user what, or how, to successfully complete a dropdown.",{"type":19,"tag":28,"props":140,"children":141},{},[142],{"type":25,"value":143},"For example, hint text can include:",{"type":19,"tag":81,"props":145,"children":146},{},[147,152,157],{"type":19,"tag":85,"props":148,"children":149},{},[150],{"type":25,"value":151},"an overall description of the dropdown",{"type":19,"tag":85,"props":153,"children":154},{},[155],{"type":25,"value":156},"hints for what kind of information needs to be input",{"type":19,"tag":85,"props":158,"children":159},{},[160],{"type":25,"value":161},"specific formatting examples or requirements.",{"type":19,"tag":28,"props":163,"children":164},{},[165],{"type":25,"value":166},"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.",{"type":19,"tag":101,"props":168,"children":170},{"id":169},"placeholder-text",[171],{"type":25,"value":172},"Placeholder text",{"type":19,"tag":28,"props":174,"children":175},{},[176],{"type":25,"value":177},"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.",{"type":19,"tag":28,"props":179,"children":180},{},[181],{"type":25,"value":182},"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information. Placeholder text for the dropdown trigger must clearly tell the user its purpose.",{"type":19,"tag":101,"props":184,"children":186},{"id":185},"selected-value",[187],{"type":25,"value":188},"Selected value",{"type":19,"tag":28,"props":190,"children":191},{},[192],{"type":25,"value":193},"The selected value shows the option a user has selected.",{"type":19,"tag":101,"props":195,"children":197},{"id":196},"text-overflow",[198],{"type":25,"value":199},"Text overflow",{"type":19,"tag":28,"props":201,"children":202},{},[203],{"type":25,"value":204},"When the field label and menu text are too long for the available horizontal space, they wrap to form another line.",{"type":19,"tag":28,"props":206,"children":207},{},[208],{"type":25,"value":209},"The field text itself truncates at the end, but the text can be shown in full in the menu.",{"type":19,"tag":101,"props":211,"children":213},{"id":212},"menu-height",[214],{"type":25,"value":215},"Menu height",{"type":19,"tag":28,"props":217,"children":218},{},[219],{"type":25,"value":220},"The dropdown menu has a maximum height of 288px or 6 single text-line options.",{"type":19,"tag":28,"props":222,"children":223},{},[224],{"type":25,"value":225},"We recommend starting a scroll at the sixth option in the menu list. This may vary based on your specific use case.",{"type":19,"tag":64,"props":227,"children":229},{"id":228},"when-and-how-to-use",[230],{"type":25,"value":231},"When and how to use",{"type":19,"tag":81,"props":233,"children":234},{},[235,240,245,250],{"type":19,"tag":85,"props":236,"children":237},{},[238],{"type":25,"value":239},"Use as a last resort component.",{"type":19,"tag":85,"props":241,"children":242},{},[243],{"type":25,"value":244},"A label must be used with a dropdown.",{"type":19,"tag":85,"props":246,"children":247},{},[248],{"type":25,"value":249},"Ensure dropdown item descriptions are short and concise.",{"type":19,"tag":85,"props":251,"children":252},{},[253],{"type":25,"value":254},"Use when listing between 6 and (if possible) 15 items, if checkboxes or radio buttons can’t be used.",{"type":19,"tag":64,"props":256,"children":258},{"id":257},"when-and-how-not-to-use",[259],{"type":25,"value":260},"When and how not to use",{"type":19,"tag":81,"props":262,"children":263},{},[264,269,274,279,284,289],{"type":19,"tag":85,"props":265,"children":266},{},[267],{"type":25,"value":268},"Never set the form to submit when a dropdown item is selected.",{"type":19,"tag":85,"props":270,"children":271},{},[272],{"type":25,"value":273},"Don’t write long menu option descriptions.",{"type":19,"tag":85,"props":275,"children":276},{},[277],{"type":25,"value":278},"Descriptions should not wrap over a single line.",{"type":19,"tag":85,"props":280,"children":281},{},[282],{"type":25,"value":283},"Icons or decorative images should never be used in dropdowns.",{"type":19,"tag":85,"props":285,"children":286},{},[287],{"type":25,"value":288},"Do not use a dropdown for listings less than 6 options, consider using radio buttons or checkboxes.",{"type":19,"tag":85,"props":290,"children":291},{},[292],{"type":25,"value":293},"Do not use a dropdown without a label as it confuses users and is not accessible.",{"type":19,"tag":295,"props":296,"children":297},"hr",{},[],{"type":19,"tag":20,"props":299,"children":301},{"id":300},"variants",[302],{"type":25,"value":303},"Variants",{"type":19,"tag":28,"props":305,"children":306},{},[307],{"type":25,"value":308},"Dropdown has 2 main variants:",{"type":19,"tag":81,"props":310,"children":311},{},[312,317],{"type":19,"tag":85,"props":313,"children":314},{},[315],{"type":25,"value":316},"single select",{"type":19,"tag":85,"props":318,"children":319},{},[320],{"type":25,"value":321},"multi select.",{"type":19,"tag":28,"props":323,"children":324},{},[325],{"type":25,"value":326},"Both variants have default and reverse sub-variants.",{"type":19,"tag":64,"props":328,"children":330},{"id":329},"single-select-1",[331],{"type":25,"value":106},{"type":19,"tag":28,"props":333,"children":334},{},[335],{"type":25,"value":111},{"type":19,"tag":101,"props":337,"children":339},{"id":338},"making-a-selection",[340],{"type":25,"value":341},"Making a selection",{"type":19,"tag":81,"props":343,"children":344},{},[345,350,355,360,365],{"type":19,"tag":85,"props":346,"children":347},{},[348],{"type":25,"value":349},"Placeholder text is shown by default in the field when the dropdown is closed.",{"type":19,"tag":85,"props":351,"children":352},{},[353],{"type":25,"value":354},"Interacting with a closed field opens a menu of options.",{"type":19,"tag":85,"props":356,"children":357},{},[358],{"type":25,"value":359},"The dropdown closes when an option is chosen.",{"type":19,"tag":85,"props":361,"children":362},{},[363],{"type":25,"value":364},"The selection option replaces the placeholder text, but also remains in place if the menus is opened.",{"type":19,"tag":85,"props":366,"children":367},{},[368],{"type":25,"value":369},"The selected option then has a tick to the left of the option in the open menu, to remind the user of the selected value.",{"type":19,"tag":101,"props":371,"children":373},{"id":372},"default",[374],{"type":25,"value":375},"Default",{"type":19,"tag":59,"props":377,"children":378},{"id":61},[],{"type":19,"tag":101,"props":380,"children":382},{"id":381},"reverse",[383],{"type":25,"value":384},"Reverse",{"type":19,"tag":59,"props":386,"children":388},{"id":387},"forms-dropdown--reverse-variant",[],{"type":19,"tag":64,"props":390,"children":392},{"id":391},"multi-select-1",[393],{"type":25,"value":117},{"type":19,"tag":28,"props":395,"children":396},{},[397],{"type":25,"value":398},"Users can choose multiple items in a list or to filter information.",{"type":19,"tag":28,"props":400,"children":401},{},[402],{"type":25,"value":403},"If using a multi select dropdown, always tell the user how many menu options they can select.",{"type":19,"tag":28,"props":405,"children":406},{},[407],{"type":25,"value":408},"Add extra instructions in the hint text to guide them. For example, 'Select up to 3 options'.",{"type":19,"tag":101,"props":410,"children":412},{"id":411},"making-a-selection-1",[413],{"type":25,"value":341},{"type":19,"tag":81,"props":415,"children":416},{},[417,421,426,431,436],{"type":19,"tag":85,"props":418,"children":419},{},[420],{"type":25,"value":349},{"type":19,"tag":85,"props":422,"children":423},{},[424],{"type":25,"value":425},"When the menu is opened, each option shows a checkbox input to the left of its text.",{"type":19,"tag":85,"props":427,"children":428},{},[429],{"type":25,"value":430},"When options are being selected, the menu stays open.",{"type":19,"tag":85,"props":432,"children":433},{},[434],{"type":25,"value":435},"The selected options replaces the placeholder text. When selected options extend beyond the width of the field, the values truncate. A ‘+#’ appears to the right of the field, to show how many unseen options (#) are selected.",{"type":19,"tag":85,"props":437,"children":438},{},[439],{"type":25,"value":440},"As multiple selections are possible, the user needs to interact outside the dropdown, or on the field, to close the menu.",{"type":19,"tag":101,"props":442,"children":444},{"id":443},"default-1",[445],{"type":25,"value":375},{"type":19,"tag":59,"props":447,"children":449},{"id":448},"forms-dropdown--multi-select-many-items",[],{"type":19,"tag":101,"props":451,"children":453},{"id":452},"reverse-1",[454],{"type":25,"value":384},{"type":19,"tag":59,"props":456,"children":458},{"id":457},"forms-dropdown--reverse-variant&args=multiple:true",[],{"type":19,"tag":64,"props":460,"children":462},{"id":461},"error",[463],{"type":25,"value":464},"Error",{"type":19,"tag":28,"props":466,"children":467},{},[468],{"type":25,"value":469},"All form inputs share error state styling.",{"type":19,"tag":28,"props":471,"children":472},{},[473],{"type":25,"value":474},"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.",{"type":19,"tag":28,"props":476,"children":477},{},[478],{"type":25,"value":479},"When creating an error message for a dropdown, use the wording below.",{"type":19,"tag":28,"props":481,"children":482},{},[483],{"type":19,"tag":484,"props":485,"children":486},"strong",{},[487],{"type":25,"value":488},"If nothing is selected and the question has options in it",{"type":19,"tag":28,"props":490,"children":491},{},[492],{"type":25,"value":493},"Structure this message to help the user to choose which options apply to them.",{"type":19,"tag":81,"props":495,"children":496},{},[497,502],{"type":19,"tag":85,"props":498,"children":499},{},[500],{"type":25,"value":501},"Error message: ‘Select if [options]’.",{"type":19,"tag":85,"props":503,"children":504},{},[505],{"type":25,"value":506},"Example: ‘Select if you like summer, winter, autumn, and/or spring.'",{"type":19,"tag":28,"props":508,"children":509},{},[510],{"type":19,"tag":484,"props":511,"children":512},{},[513],{"type":25,"value":514},"If nothing is selected and the question does not have options in it",{"type":19,"tag":28,"props":516,"children":517},{},[518],{"type":25,"value":493},{"type":19,"tag":81,"props":520,"children":521},{},[522,535],{"type":19,"tag":85,"props":523,"children":524},{},[525,527,533],{"type":25,"value":526},"Error message: ‘Select ",{"type":19,"tag":528,"props":529,"children":530},"span",{},[531],{"type":25,"value":532},"options",{"type":25,"value":534},"’.",{"type":19,"tag":85,"props":536,"children":537},{},[538],{"type":25,"value":539},"Example: 'Select your favourite season'.",{"type":19,"tag":59,"props":541,"children":543},{"id":542},"add storybook",[],{"type":19,"tag":295,"props":545,"children":546},{},[],{"type":19,"tag":20,"props":548,"children":550},{"id":549},"theming",[551],{"type":25,"value":552},"Theming",{"type":19,"tag":28,"props":554,"children":555},{},[556],{"type":25,"value":557},"Dropdown uses colour for:",{"type":19,"tag":81,"props":559,"children":560},{},[561,566],{"type":19,"tag":85,"props":562,"children":563},{},[564],{"type":25,"value":565},"interactive states",{"type":19,"tag":85,"props":567,"children":568},{},[569],{"type":25,"value":570},"icons.",{"type":19,"tag":28,"props":572,"children":573},{},[574],{"type":25,"value":575},"A dropdown in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a dropdown remains consistent while it transitions from a focus to an active state.",{"type":19,"tag":577,"props":578,"children":579},"docs-theme-chooser",{},[580],{"type":19,"tag":59,"props":581,"children":582},{"id":448},[],{"type":19,"tag":28,"props":584,"children":585},{},[586,588,595,597,603],{"type":25,"value":587},"To create your own theme see ",{"type":19,"tag":589,"props":590,"children":592},"a",{"href":591},"/design-system/design/theming-guidance-for-designers",[593],{"type":25,"value":594},"theming guidance for designers",{"type":25,"value":596}," or ",{"type":19,"tag":589,"props":598,"children":600},{"href":599},"/design-system/develop/theming",[601],{"type":25,"value":602},"theming guidance for developers",{"type":25,"value":604},".",{"type":19,"tag":295,"props":606,"children":607},{},[],{"type":19,"tag":20,"props":609,"children":611},{"id":610},"rationale",[612],{"type":25,"value":613},"Rationale",{"type":19,"tag":28,"props":615,"children":616},{},[617],{"type":25,"value":618},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":19,"tag":28,"props":620,"children":621},{},[622],{"type":25,"value":623},"This occurs across all form and input elements, for a consistent experience.",{"title":10,"searchDepth":625,"depth":625,"links":626},2,[627,633,638,639],{"id":22,"depth":625,"text":26,"children":628},[629,631,632],{"id":66,"depth":630,"text":69},3,{"id":228,"depth":630,"text":231},{"id":257,"depth":630,"text":260},{"id":300,"depth":625,"text":303,"children":634},[635,636,637],{"id":329,"depth":630,"text":106},{"id":391,"depth":630,"text":117},{"id":461,"depth":630,"text":464},{"id":549,"depth":625,"text":552},{"id":610,"depth":625,"text":613},"markdown","content:design-system:5.components:dropdown.md","content","design-system/5.components/dropdown.md","md",["ShallowRef",646],["ShallowReactive",647],{"/design-system/components/dropdown":648},[649,655],{"_path":650,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":651,"description":652,"layout":13,"label":14,"_type":640,"_id":653,"_source":642,"_file":654,"_extension":644},"/design-system/components/detail-list","Detail list","The Detail list component shows a list of key information to users.","content:design-system:5.components:detail-list.md","design-system/5.components/detail-list.md",{"_path":656,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":657,"description":658,"layout":13,"label":14,"_type":640,"_id":659,"_source":642,"_file":660,"_extension":644},"/design-system/components/file","File","The File component shows a link, with additional metadata, and lets a user download a file attachment.","content:design-system:5.components:file.md","design-system/5.components/file.md",["ShallowRef",662],{},[664,669,908],{"title":665,"_path":666,"icon":667,"layout":668},"Ripple Design System","/","carbon:home","home",{"title":670,"_path":671,"children":672},"Design System","/design-system",[673,689,704,732,766],{"title":674,"_path":675,"children":676},"About","/design-system/about",[677,680,683,686],{"title":678,"_path":679,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":681,"_path":682,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":684,"_path":685,"layout":13},"Support","/design-system/about/getting-support",{"title":687,"_path":688,"layout":13},"Contributing","/design-system/about/contributing",{"title":690,"_path":691,"children":692},"Design","/design-system/design",[693,696,699,702],{"title":694,"_path":695,"layout":13},"Getting started","/design-system/design/getting-started",{"title":697,"_path":698,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":700,"_path":701,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":703,"_path":591,"layout":13},"Theming guidance for designers",{"title":705,"_path":706,"children":707},"Develop","/design-system/develop",[708,710,712,714],{"title":694,"_path":709,"layout":13},"/design-system/develop/getting-started",{"title":687,"_path":711,"layout":13},"/design-system/develop/contributing",{"title":713,"_path":599,"layout":13},"Theme and brand application",{"title":26,"_path":715,"children":716,"layout":13},"/design-system/develop/usage",[717,720,723,726,729],{"title":718,"_path":719,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":721,"_path":722,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":724,"_path":725,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":727,"_path":728,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":730,"_path":731,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":733,"_path":734,"children":735},"Styles","/design-system/styles",[736,739,742,745,748,751,754,757,760,763],{"title":737,"_path":738,"layout":13},"Colour","/design-system/styles/colour",{"title":740,"_path":741,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":743,"_path":744,"layout":13},"Grid","/design-system/styles/grid",{"title":746,"_path":747,"layout":13},"Icons","/design-system/styles/icons",{"title":749,"_path":750,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":752,"_path":753,"layout":13},"Layout","/design-system/styles/layout",{"title":755,"_path":756,"layout":13},"Logo","/design-system/styles/logo",{"title":758,"_path":759,"layout":13},"Motion","/design-system/styles/motion",{"title":761,"_path":762,"layout":13},"Spacing","/design-system/styles/spacing",{"title":764,"_path":765,"layout":13},"Typography","/design-system/styles/typography",{"title":767,"_path":768,"children":769},"Components","/design-system/components",[770,773,776,779,782,785,788,791,794,797,800,803,806,809,812,815,818,819,820,821,824,827,830,833,836,839,842,845,848,851,854,857,860,863,866,869,872,875,878,881,884,887,890,893,896,899,902,905],{"title":771,"_path":772,"layout":13},"Accordion","/design-system/components/accordion",{"title":774,"_path":775,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":777,"_path":778,"layout":13},"Alert","/design-system/components/alert",{"title":780,"_path":781,"layout":13},"Block quote","/design-system/components/block-quote",{"title":783,"_path":784,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":786,"_path":787,"layout":13},"Button","/design-system/components/button",{"title":789,"_path":790,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":792,"_path":793,"layout":13},"Callout","/design-system/components/callout",{"title":795,"_path":796,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":798,"_path":799,"layout":13},"Card","/design-system/components/card",{"title":801,"_path":802,"layout":13},"Carousel","/design-system/components/carousel",{"title":804,"_path":805,"layout":13},"Category grid","/design-system/components/category-grid",{"title":807,"_path":808,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":810,"_path":811,"layout":13},"Chip","/design-system/components/chip",{"title":813,"_path":814,"layout":13},"Contact us","/design-system/components/contact-us",{"title":816,"_path":817,"layout":13},"Date input","/design-system/components/date-input",{"title":651,"_path":650,"layout":13},{"title":11,"_path":7,"layout":13},{"title":657,"_path":656,"layout":13},{"title":822,"_path":823,"layout":13},"Footer","/design-system/components/footer",{"title":825,"_path":826,"layout":13},"Form","/design-system/components/form",{"title":828,"_path":829,"layout":13},"Form alert","/design-system/components/form-alert",{"title":831,"_path":832,"layout":13},"Header","/design-system/components/header",{"title":834,"_path":835,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":837,"_path":838,"layout":13},"Input field","/design-system/components/input-field",{"title":840,"_path":841,"layout":13},"Key dates","/design-system/components/key-dates",{"title":843,"_path":844,"layout":13},"Media","/design-system/components/media",{"title":846,"_path":847,"layout":13},"Media embed","/design-system/components/media-embed",{"title":849,"_path":850,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":852,"_path":853,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":855,"_path":856,"layout":13},"Option button","/design-system/components/option-button",{"title":858,"_path":859,"layout":13},"Page action","/design-system/components/page-action",{"title":861,"_path":862,"layout":13},"Pagination","/design-system/components/pagination",{"title":864,"_path":865,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":867,"_path":868,"layout":13},"Profile","/design-system/components/profile",{"title":870,"_path":871,"layout":13},"Radio button","/design-system/components/radio-button",{"title":873,"_path":874,"layout":13},"Related links","/design-system/components/related-links",{"title":876,"_path":877,"layout":13},"Results listing","/design-system/components/results-listing",{"title":879,"_path":880,"layout":13},"Search bar","/design-system/components/search-bar",{"title":882,"_path":883,"layout":13},"Skip link","/design-system/components/skip-link",{"title":885,"_path":886,"layout":13},"Social share","/design-system/components/social-share",{"title":888,"_path":889,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":891,"_path":892,"layout":13},"Table","/design-system/components/table",{"title":894,"_path":895,"layout":13},"Tabs","/design-system/components/tabs",{"title":897,"_path":898,"layout":13},"Tag","/design-system/components/tag",{"title":900,"_path":901,"layout":13},"Text area","/design-system/components/text-area",{"title":903,"_path":904,"layout":13},"Timeline","/design-system/components/timeline",{"title":906,"_path":907,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":909,"_path":910,"children":911,"layout":13},"Ripple Framework","/framework",[912,913,931,953],{"title":909,"_path":910,"layout":13},{"title":914,"_path":915,"children":916},"Key Concepts","/framework/key-concepts",[917,919,922,925,928],{"title":724,"_path":918,"layout":13},"/framework/key-concepts/nuxt",{"title":920,"_path":921,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":923,"_path":924,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":926,"_path":927,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":929,"_path":930,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":932,"_path":933,"children":934},"Guides","/framework/guides",[935,938,941,944,947,950],{"title":936,"_path":937,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":939,"_path":940,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":942,"_path":943,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":945,"_path":946,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":948,"_path":949,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":951,"_path":952,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":954,"_path":955,"layout":13},"Core modules","/framework/core-modules",["Reactive",957],["Set"],["Reactive",959],{"module-navigation":960},null,true,"/design-system/components/dropdown/",1714695156422]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Dropdown</h1><p class="rpl-type-p-large" data-v-3163c6df>The Dropdown component lets users see a list of available options and then select one or more options.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use this component to let users select one or more items from a dropdown list of available items.<!--]--></p><p><!--[-->It can be helpful when users need to choose from 6 or more options. It can also be used when listing all options in checkboxes or radio buttons is not viable.<!--]--></p><p><!--[-->Dropdowns should only be used as a last resort. For example, to find a compromise between usability and keeping the layout compact and clear.<!--]--></p><p><!--[-->Many users find dropdowns hard to use. Dropdowns hide content by default and create user confusion, cross-device issues and limited accessibility. Use radio buttons, checkboxes or input fields for most small lists instead.<!--]--></p><p><!--[-->A compromise might be needed for a long list of options (for example, all dog breeds). Or, when option description lengths vary or wrap over multiple lines. These situations also confuse users by creating layout issues for checkboxes, input fields or radio buttons.<!--]--></p><p><!--[-->A dropdown is often called a &#39;select&#39;.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-dropdown--single-select-many-items&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-dropdown--single-select-many-items&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="how-this-component-works" data-v-ea525968><a href="#how-this-component-works" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->How this component works<!--]--></a></h2><p><!--[-->You must use a form label with a dropdown.<!--]--></p><p><!--[-->You can use a dropdown with:<!--]--></p><ul><!--[--><li><!--[-->requirement label<!--]--></li><li><!--[-->hint text<!--]--></li><li><!--[-->placeholder text.<!--]--></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="single-select"><!--[-->Single select<!--]--></h4><p><!--[-->A single select dropdown is used when users can select only a single option.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="multi-select"><!--[-->Multi select<!--]--></h4><p><!--[-->If using a multi select dropdown, always tell the user how many menu options they can select. Add extra instructions in the hint text to guide them. For example, &#39;Select up to 3 options&#39;.<!--]--></p><p><!--[-->Even though users can choose multiple items in a multi select dropdown, they often find this confusing. checkboxes could be better.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="hint-text"><!--[-->Hint text<!--]--></h4><p><!--[-->Hint text can be used to tell the user what, or how, to successfully complete a dropdown.<!--]--></p><p><!--[-->For example, hint text can include:<!--]--></p><ul><!--[--><li><!--[-->an overall description of the dropdown<!--]--></li><li><!--[-->hints for what kind of information needs to be input<!--]--></li><li><!--[-->specific formatting examples or requirements.<!--]--></li><!--]--></ul><p><!--[-->Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="placeholder-text"><!--[-->Placeholder text<!--]--></h4><p><!--[-->Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.<!--]--></p><p><!--[-->If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information. Placeholder text for the dropdown trigger must clearly tell the user its purpose.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="selected-value"><!--[-->Selected value<!--]--></h4><p><!--[-->The selected value shows the option a user has selected.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="text-overflow"><!--[-->Text overflow<!--]--></h4><p><!--[-->When the field label and menu text are too long for the available horizontal space, they wrap to form another line.<!--]--></p><p><!--[-->The field text itself truncates at the end, but the text can be shown in full in the menu.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="menu-height"><!--[-->Menu height<!--]--></h4><p><!--[-->The dropdown menu has a maximum height of 288px or 6 single text-line options.<!--]--></p><p><!--[-->We recommend starting a scroll at the sixth option in the menu list. This may vary based on your specific use case.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use as a last resort component.<!--]--></li><li><!--[-->A label must be used with a dropdown.<!--]--></li><li><!--[-->Ensure dropdown item descriptions are short and concise.<!--]--></li><li><!--[-->Use when listing between 6 and (if possible) 15 items, if checkboxes or radio buttons can’t be used.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Never set the form to submit when a dropdown item is selected.<!--]--></li><li><!--[-->Don’t write long menu option descriptions.<!--]--></li><li><!--[-->Descriptions should not wrap over a single line.<!--]--></li><li><!--[-->Icons or decorative images should never be used in dropdowns.<!--]--></li><li><!--[-->Do not use a dropdown for listings less than 6 options, consider using radio buttons or checkboxes.<!--]--></li><li><!--[-->Do not use a dropdown without a label as it confuses users and is not accessible.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->Dropdown has 2 main variants:<!--]--></p><ul><!--[--><li><!--[-->single select<!--]--></li><li><!--[-->multi select.<!--]--></li><!--]--></ul><p><!--[-->Both variants have default and reverse sub-variants.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="single-select-1" data-v-ea525968><a href="#single-select-1" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Single select<!--]--></a></h2><p><!--[-->A single select dropdown is used when users can select only a single option.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="making-a-selection"><!--[-->Making a selection<!--]--></h4><ul><!--[--><li><!--[-->Placeholder text is shown by default in the field when the dropdown is closed.<!--]--></li><li><!--[-->Interacting with a closed field opens a menu of options.<!--]--></li><li><!--[-->The dropdown closes when an option is chosen.<!--]--></li><li><!--[-->The selection option replaces the placeholder text, but also remains in place if the menus is opened.<!--]--></li><li><!--[-->The selected option then has a tick to the left of the option in the open menu, to remind the user of the selected value.<!--]--></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="default"><!--[-->Default<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-dropdown--single-select-many-items&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-dropdown--single-select-many-items&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="reverse"><!--[-->Reverse<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-dropdown--reverse-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-dropdown--reverse-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="multi-select-1" data-v-ea525968><a href="#multi-select-1" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Multi select<!--]--></a></h2><p><!--[-->Users can choose multiple items in a list or to filter information.<!--]--></p><p><!--[-->If using a multi select dropdown, always tell the user how many menu options they can select.<!--]--></p><p><!--[-->Add extra instructions in the hint text to guide them. For example, &#39;Select up to 3 options&#39;.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="making-a-selection-1"><!--[-->Making a selection<!--]--></h4><ul><!--[--><li><!--[-->Placeholder text is shown by default in the field when the dropdown is closed.<!--]--></li><li><!--[-->When the menu is opened, each option shows a checkbox input to the left of its text.<!--]--></li><li><!--[-->When options are being selected, the menu stays open.<!--]--></li><li><!--[-->The selected options replaces the placeholder text. When selected options extend beyond the width of the field, the values truncate. A ‘+#’ appears to the right of the field, to show how many unseen options (#) are selected.<!--]--></li><li><!--[-->As multiple selections are possible, the user needs to interact outside the dropdown, or on the field, to close the menu.<!--]--></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="default-1"><!--[-->Default<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-dropdown--multi-select-many-items&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-dropdown--multi-select-many-items&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="reverse-1"><!--[-->Reverse<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-dropdown--reverse-variant&amp;args=multiple:true&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-dropdown--reverse-variant&amp;args=multiple:true&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="error" data-v-ea525968><a href="#error" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Error<!--]--></a></h2><p><!--[-->All form inputs share error state styling.<!--]--></p><p><!--[-->Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.<!--]--></p><p><!--[-->When creating an error message for a dropdown, use the wording below.<!--]--></p><p><!--[--><strong><!--[-->If nothing is selected and the question has options in it<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user to choose which options apply to them.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select if [options]’.<!--]--></li><li><!--[-->Example: ‘Select if you like summer, winter, autumn, and/or spring.&#39;<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->If nothing is selected and the question does not have options in it<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user to choose which options apply to them.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select <span>options</span>’.<!--]--></li><li><!--[-->Example: &#39;Select your favourite season&#39;.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=add storybook&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/add storybook&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Dropdown uses colour for:<!--]--></p><ul><!--[--><li><!--[-->interactive states<!--]--></li><li><!--[-->icons.<!--]--></li><!--]--></ul><p><!--[-->A dropdown in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a dropdown remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-dropdown--multi-select-many-items&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-dropdown--multi-select-many-items&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="rationale" data-v-fff5b905><a href="#rationale" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/dropdown.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/dropdown/_payload.json">[{"state":1,"once":956,"_errors":958,"serverRendered":961,"path":962,"prerenderedAt":963},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":645,"$sdd-globals":661,"$sdd-navigation":663},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/dropdown":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":640,"_id":641,"_source":642,"_file":643,"_extension":644},"/design-system/components/dropdown","components",false,"","Dropdown","The Dropdown component lets users see a list of available options and then select one or more options.","page","Core",{"type":16,"children":17,"toc":624},"root",[18,27,33,38,43,48,53,58,63,70,75,80,100,107,112,118,123,128,134,139,144,162,167,173,178,183,189,194,200,205,210,216,221,226,232,255,261,294,298,304,309,322,327,332,336,342,370,376,379,385,389,394,399,404,409,414,441,446,450,455,459,465,470,475,480,489,494,507,515,519,540,544,547,553,558,571,576,583,605,608,614,619],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use this component to let users select one or more items from a dropdown list of available items.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"It can be helpful when users need to choose from 6 or more options. It can also be used when listing all options in checkboxes or radio buttons is not viable.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Dropdowns should only be used as a last resort. For example, to find a compromise between usability and keeping the layout compact and clear.",{"type":19,"tag":28,"props":44,"children":45},{},[46],{"type":25,"value":47},"Many users find dropdowns hard to use. Dropdowns hide content by default and create user confusion, cross-device issues and limited accessibility. Use radio buttons, checkboxes or input fields for most small lists instead.",{"type":19,"tag":28,"props":49,"children":50},{},[51],{"type":25,"value":52},"A compromise might be needed for a long list of options (for example, all dog breeds). Or, when option description lengths vary or wrap over multiple lines. These situations also confuse users by creating layout issues for checkboxes, input fields or radio buttons.",{"type":19,"tag":28,"props":54,"children":55},{},[56],{"type":25,"value":57},"A dropdown is often called a 'select'.",{"type":19,"tag":59,"props":60,"children":62},"docs-example",{"id":61},"forms-dropdown--single-select-many-items",[],{"type":19,"tag":64,"props":65,"children":67},"h3",{"id":66},"how-this-component-works",[68],{"type":25,"value":69},"How this component works",{"type":19,"tag":28,"props":71,"children":72},{},[73],{"type":25,"value":74},"You must use a form label with a dropdown.",{"type":19,"tag":28,"props":76,"children":77},{},[78],{"type":25,"value":79},"You can use a dropdown with:",{"type":19,"tag":81,"props":82,"children":83},"ul",{},[84,90,95],{"type":19,"tag":85,"props":86,"children":87},"li",{},[88],{"type":25,"value":89},"requirement label",{"type":19,"tag":85,"props":91,"children":92},{},[93],{"type":25,"value":94},"hint text",{"type":19,"tag":85,"props":96,"children":97},{},[98],{"type":25,"value":99},"placeholder text.",{"type":19,"tag":101,"props":102,"children":104},"h4",{"id":103},"single-select",[105],{"type":25,"value":106},"Single select",{"type":19,"tag":28,"props":108,"children":109},{},[110],{"type":25,"value":111},"A single select dropdown is used when users can select only a single option.",{"type":19,"tag":101,"props":113,"children":115},{"id":114},"multi-select",[116],{"type":25,"value":117},"Multi select",{"type":19,"tag":28,"props":119,"children":120},{},[121],{"type":25,"value":122},"If using a multi select dropdown, always tell the user how many menu options they can select. Add extra instructions in the hint text to guide them. For example, 'Select up to 3 options'.",{"type":19,"tag":28,"props":124,"children":125},{},[126],{"type":25,"value":127},"Even though users can choose multiple items in a multi select dropdown, they often find this confusing. checkboxes could be better.",{"type":19,"tag":101,"props":129,"children":131},{"id":130},"hint-text",[132],{"type":25,"value":133},"Hint text",{"type":19,"tag":28,"props":135,"children":136},{},[137],{"type":25,"value":138},"Hint text can be used to tell the user what, or how, to successfully complete a dropdown.",{"type":19,"tag":28,"props":140,"children":141},{},[142],{"type":25,"value":143},"For example, hint text can include:",{"type":19,"tag":81,"props":145,"children":146},{},[147,152,157],{"type":19,"tag":85,"props":148,"children":149},{},[150],{"type":25,"value":151},"an overall description of the dropdown",{"type":19,"tag":85,"props":153,"children":154},{},[155],{"type":25,"value":156},"hints for what kind of information needs to be input",{"type":19,"tag":85,"props":158,"children":159},{},[160],{"type":25,"value":161},"specific formatting examples or requirements.",{"type":19,"tag":28,"props":163,"children":164},{},[165],{"type":25,"value":166},"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.",{"type":19,"tag":101,"props":168,"children":170},{"id":169},"placeholder-text",[171],{"type":25,"value":172},"Placeholder text",{"type":19,"tag":28,"props":174,"children":175},{},[176],{"type":25,"value":177},"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.",{"type":19,"tag":28,"props":179,"children":180},{},[181],{"type":25,"value":182},"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information. Placeholder text for the dropdown trigger must clearly tell the user its purpose.",{"type":19,"tag":101,"props":184,"children":186},{"id":185},"selected-value",[187],{"type":25,"value":188},"Selected value",{"type":19,"tag":28,"props":190,"children":191},{},[192],{"type":25,"value":193},"The selected value shows the option a user has selected.",{"type":19,"tag":101,"props":195,"children":197},{"id":196},"text-overflow",[198],{"type":25,"value":199},"Text overflow",{"type":19,"tag":28,"props":201,"children":202},{},[203],{"type":25,"value":204},"When the field label and menu text are too long for the available horizontal space, they wrap to form another line.",{"type":19,"tag":28,"props":206,"children":207},{},[208],{"type":25,"value":209},"The field text itself truncates at the end, but the text can be shown in full in the menu.",{"type":19,"tag":101,"props":211,"children":213},{"id":212},"menu-height",[214],{"type":25,"value":215},"Menu height",{"type":19,"tag":28,"props":217,"children":218},{},[219],{"type":25,"value":220},"The dropdown menu has a maximum height of 288px or 6 single text-line options.",{"type":19,"tag":28,"props":222,"children":223},{},[224],{"type":25,"value":225},"We recommend starting a scroll at the sixth option in the menu list. This may vary based on your specific use case.",{"type":19,"tag":64,"props":227,"children":229},{"id":228},"when-and-how-to-use",[230],{"type":25,"value":231},"When and how to use",{"type":19,"tag":81,"props":233,"children":234},{},[235,240,245,250],{"type":19,"tag":85,"props":236,"children":237},{},[238],{"type":25,"value":239},"Use as a last resort component.",{"type":19,"tag":85,"props":241,"children":242},{},[243],{"type":25,"value":244},"A label must be used with a dropdown.",{"type":19,"tag":85,"props":246,"children":247},{},[248],{"type":25,"value":249},"Ensure dropdown item descriptions are short and concise.",{"type":19,"tag":85,"props":251,"children":252},{},[253],{"type":25,"value":254},"Use when listing between 6 and (if possible) 15 items, if checkboxes or radio buttons can’t be used.",{"type":19,"tag":64,"props":256,"children":258},{"id":257},"when-and-how-not-to-use",[259],{"type":25,"value":260},"When and how not to use",{"type":19,"tag":81,"props":262,"children":263},{},[264,269,274,279,284,289],{"type":19,"tag":85,"props":265,"children":266},{},[267],{"type":25,"value":268},"Never set the form to submit when a dropdown item is selected.",{"type":19,"tag":85,"props":270,"children":271},{},[272],{"type":25,"value":273},"Don’t write long menu option descriptions.",{"type":19,"tag":85,"props":275,"children":276},{},[277],{"type":25,"value":278},"Descriptions should not wrap over a single line.",{"type":19,"tag":85,"props":280,"children":281},{},[282],{"type":25,"value":283},"Icons or decorative images should never be used in dropdowns.",{"type":19,"tag":85,"props":285,"children":286},{},[287],{"type":25,"value":288},"Do not use a dropdown for listings less than 6 options, consider using radio buttons or checkboxes.",{"type":19,"tag":85,"props":290,"children":291},{},[292],{"type":25,"value":293},"Do not use a dropdown without a label as it confuses users and is not accessible.",{"type":19,"tag":295,"props":296,"children":297},"hr",{},[],{"type":19,"tag":20,"props":299,"children":301},{"id":300},"variants",[302],{"type":25,"value":303},"Variants",{"type":19,"tag":28,"props":305,"children":306},{},[307],{"type":25,"value":308},"Dropdown has 2 main variants:",{"type":19,"tag":81,"props":310,"children":311},{},[312,317],{"type":19,"tag":85,"props":313,"children":314},{},[315],{"type":25,"value":316},"single select",{"type":19,"tag":85,"props":318,"children":319},{},[320],{"type":25,"value":321},"multi select.",{"type":19,"tag":28,"props":323,"children":324},{},[325],{"type":25,"value":326},"Both variants have default and reverse sub-variants.",{"type":19,"tag":64,"props":328,"children":330},{"id":329},"single-select-1",[331],{"type":25,"value":106},{"type":19,"tag":28,"props":333,"children":334},{},[335],{"type":25,"value":111},{"type":19,"tag":101,"props":337,"children":339},{"id":338},"making-a-selection",[340],{"type":25,"value":341},"Making a selection",{"type":19,"tag":81,"props":343,"children":344},{},[345,350,355,360,365],{"type":19,"tag":85,"props":346,"children":347},{},[348],{"type":25,"value":349},"Placeholder text is shown by default in the field when the dropdown is closed.",{"type":19,"tag":85,"props":351,"children":352},{},[353],{"type":25,"value":354},"Interacting with a closed field opens a menu of options.",{"type":19,"tag":85,"props":356,"children":357},{},[358],{"type":25,"value":359},"The dropdown closes when an option is chosen.",{"type":19,"tag":85,"props":361,"children":362},{},[363],{"type":25,"value":364},"The selection option replaces the placeholder text, but also remains in place if the menus is opened.",{"type":19,"tag":85,"props":366,"children":367},{},[368],{"type":25,"value":369},"The selected option then has a tick to the left of the option in the open menu, to remind the user of the selected value.",{"type":19,"tag":101,"props":371,"children":373},{"id":372},"default",[374],{"type":25,"value":375},"Default",{"type":19,"tag":59,"props":377,"children":378},{"id":61},[],{"type":19,"tag":101,"props":380,"children":382},{"id":381},"reverse",[383],{"type":25,"value":384},"Reverse",{"type":19,"tag":59,"props":386,"children":388},{"id":387},"forms-dropdown--reverse-variant",[],{"type":19,"tag":64,"props":390,"children":392},{"id":391},"multi-select-1",[393],{"type":25,"value":117},{"type":19,"tag":28,"props":395,"children":396},{},[397],{"type":25,"value":398},"Users can choose multiple items in a list or to filter information.",{"type":19,"tag":28,"props":400,"children":401},{},[402],{"type":25,"value":403},"If using a multi select dropdown, always tell the user how many menu options they can select.",{"type":19,"tag":28,"props":405,"children":406},{},[407],{"type":25,"value":408},"Add extra instructions in the hint text to guide them. For example, 'Select up to 3 options'.",{"type":19,"tag":101,"props":410,"children":412},{"id":411},"making-a-selection-1",[413],{"type":25,"value":341},{"type":19,"tag":81,"props":415,"children":416},{},[417,421,426,431,436],{"type":19,"tag":85,"props":418,"children":419},{},[420],{"type":25,"value":349},{"type":19,"tag":85,"props":422,"children":423},{},[424],{"type":25,"value":425},"When the menu is opened, each option shows a checkbox input to the left of its text.",{"type":19,"tag":85,"props":427,"children":428},{},[429],{"type":25,"value":430},"When options are being selected, the menu stays open.",{"type":19,"tag":85,"props":432,"children":433},{},[434],{"type":25,"value":435},"The selected options replaces the placeholder text. When selected options extend beyond the width of the field, the values truncate. A ‘+#’ appears to the right of the field, to show how many unseen options (#) are selected.",{"type":19,"tag":85,"props":437,"children":438},{},[439],{"type":25,"value":440},"As multiple selections are possible, the user needs to interact outside the dropdown, or on the field, to close the menu.",{"type":19,"tag":101,"props":442,"children":444},{"id":443},"default-1",[445],{"type":25,"value":375},{"type":19,"tag":59,"props":447,"children":449},{"id":448},"forms-dropdown--multi-select-many-items",[],{"type":19,"tag":101,"props":451,"children":453},{"id":452},"reverse-1",[454],{"type":25,"value":384},{"type":19,"tag":59,"props":456,"children":458},{"id":457},"forms-dropdown--reverse-variant&args=multiple:true",[],{"type":19,"tag":64,"props":460,"children":462},{"id":461},"error",[463],{"type":25,"value":464},"Error",{"type":19,"tag":28,"props":466,"children":467},{},[468],{"type":25,"value":469},"All form inputs share error state styling.",{"type":19,"tag":28,"props":471,"children":472},{},[473],{"type":25,"value":474},"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.",{"type":19,"tag":28,"props":476,"children":477},{},[478],{"type":25,"value":479},"When creating an error message for a dropdown, use the wording below.",{"type":19,"tag":28,"props":481,"children":482},{},[483],{"type":19,"tag":484,"props":485,"children":486},"strong",{},[487],{"type":25,"value":488},"If nothing is selected and the question has options in it",{"type":19,"tag":28,"props":490,"children":491},{},[492],{"type":25,"value":493},"Structure this message to help the user to choose which options apply to them.",{"type":19,"tag":81,"props":495,"children":496},{},[497,502],{"type":19,"tag":85,"props":498,"children":499},{},[500],{"type":25,"value":501},"Error message: ‘Select if [options]’.",{"type":19,"tag":85,"props":503,"children":504},{},[505],{"type":25,"value":506},"Example: ‘Select if you like summer, winter, autumn, and/or spring.'",{"type":19,"tag":28,"props":508,"children":509},{},[510],{"type":19,"tag":484,"props":511,"children":512},{},[513],{"type":25,"value":514},"If nothing is selected and the question does not have options in it",{"type":19,"tag":28,"props":516,"children":517},{},[518],{"type":25,"value":493},{"type":19,"tag":81,"props":520,"children":521},{},[522,535],{"type":19,"tag":85,"props":523,"children":524},{},[525,527,533],{"type":25,"value":526},"Error message: ‘Select ",{"type":19,"tag":528,"props":529,"children":530},"span",{},[531],{"type":25,"value":532},"options",{"type":25,"value":534},"’.",{"type":19,"tag":85,"props":536,"children":537},{},[538],{"type":25,"value":539},"Example: 'Select your favourite season'.",{"type":19,"tag":59,"props":541,"children":543},{"id":542},"add storybook",[],{"type":19,"tag":295,"props":545,"children":546},{},[],{"type":19,"tag":20,"props":548,"children":550},{"id":549},"theming",[551],{"type":25,"value":552},"Theming",{"type":19,"tag":28,"props":554,"children":555},{},[556],{"type":25,"value":557},"Dropdown uses colour for:",{"type":19,"tag":81,"props":559,"children":560},{},[561,566],{"type":19,"tag":85,"props":562,"children":563},{},[564],{"type":25,"value":565},"interactive states",{"type":19,"tag":85,"props":567,"children":568},{},[569],{"type":25,"value":570},"icons.",{"type":19,"tag":28,"props":572,"children":573},{},[574],{"type":25,"value":575},"A dropdown in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a dropdown remains consistent while it transitions from a focus to an active state.",{"type":19,"tag":577,"props":578,"children":579},"docs-theme-chooser",{},[580],{"type":19,"tag":59,"props":581,"children":582},{"id":448},[],{"type":19,"tag":28,"props":584,"children":585},{},[586,588,595,597,603],{"type":25,"value":587},"To create your own theme see ",{"type":19,"tag":589,"props":590,"children":592},"a",{"href":591},"/design-system/design/theming-guidance-for-designers",[593],{"type":25,"value":594},"theming guidance for designers",{"type":25,"value":596}," or ",{"type":19,"tag":589,"props":598,"children":600},{"href":599},"/design-system/develop/theming",[601],{"type":25,"value":602},"theming guidance for developers",{"type":25,"value":604},".",{"type":19,"tag":295,"props":606,"children":607},{},[],{"type":19,"tag":20,"props":609,"children":611},{"id":610},"rationale",[612],{"type":25,"value":613},"Rationale",{"type":19,"tag":28,"props":615,"children":616},{},[617],{"type":25,"value":618},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":19,"tag":28,"props":620,"children":621},{},[622],{"type":25,"value":623},"This occurs across all form and input elements, for a consistent experience.",{"title":10,"searchDepth":625,"depth":625,"links":626},2,[627,633,638,639],{"id":22,"depth":625,"text":26,"children":628},[629,631,632],{"id":66,"depth":630,"text":69},3,{"id":228,"depth":630,"text":231},{"id":257,"depth":630,"text":260},{"id":300,"depth":625,"text":303,"children":634},[635,636,637],{"id":329,"depth":630,"text":106},{"id":391,"depth":630,"text":117},{"id":461,"depth":630,"text":464},{"id":549,"depth":625,"text":552},{"id":610,"depth":625,"text":613},"markdown","content:design-system:5.components:dropdown.md","content","design-system/5.components/dropdown.md","md",["ShallowRef",646],["ShallowReactive",647],{"/design-system/components/dropdown":648},[649,655],{"_path":650,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":651,"description":652,"layout":13,"label":14,"_type":640,"_id":653,"_source":642,"_file":654,"_extension":644},"/design-system/components/detail-list","Detail list","The Detail list component shows a list of key information to users.","content:design-system:5.components:detail-list.md","design-system/5.components/detail-list.md",{"_path":656,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":657,"description":658,"layout":13,"label":14,"_type":640,"_id":659,"_source":642,"_file":660,"_extension":644},"/design-system/components/file","File","The File component shows a link, with additional metadata, and lets a user download a file attachment.","content:design-system:5.components:file.md","design-system/5.components/file.md",["ShallowRef",662],{},[664,669,908],{"title":665,"_path":666,"icon":667,"layout":668},"Ripple Design System","/","carbon:home","home",{"title":670,"_path":671,"children":672},"Design System","/design-system",[673,689,704,732,766],{"title":674,"_path":675,"children":676},"About","/design-system/about",[677,680,683,686],{"title":678,"_path":679,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":681,"_path":682,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":684,"_path":685,"layout":13},"Support","/design-system/about/getting-support",{"title":687,"_path":688,"layout":13},"Contributing","/design-system/about/contributing",{"title":690,"_path":691,"children":692},"Design","/design-system/design",[693,696,699,702],{"title":694,"_path":695,"layout":13},"Getting started","/design-system/design/getting-started",{"title":697,"_path":698,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":700,"_path":701,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":703,"_path":591,"layout":13},"Theming guidance for designers",{"title":705,"_path":706,"children":707},"Develop","/design-system/develop",[708,710,712,714],{"title":694,"_path":709,"layout":13},"/design-system/develop/getting-started",{"title":687,"_path":711,"layout":13},"/design-system/develop/contributing",{"title":713,"_path":599,"layout":13},"Theme and brand application",{"title":26,"_path":715,"children":716,"layout":13},"/design-system/develop/usage",[717,720,723,726,729],{"title":718,"_path":719,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":721,"_path":722,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":724,"_path":725,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":727,"_path":728,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":730,"_path":731,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":733,"_path":734,"children":735},"Styles","/design-system/styles",[736,739,742,745,748,751,754,757,760,763],{"title":737,"_path":738,"layout":13},"Colour","/design-system/styles/colour",{"title":740,"_path":741,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":743,"_path":744,"layout":13},"Grid","/design-system/styles/grid",{"title":746,"_path":747,"layout":13},"Icons","/design-system/styles/icons",{"title":749,"_path":750,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":752,"_path":753,"layout":13},"Layout","/design-system/styles/layout",{"title":755,"_path":756,"layout":13},"Logo","/design-system/styles/logo",{"title":758,"_path":759,"layout":13},"Motion","/design-system/styles/motion",{"title":761,"_path":762,"layout":13},"Spacing","/design-system/styles/spacing",{"title":764,"_path":765,"layout":13},"Typography","/design-system/styles/typography",{"title":767,"_path":768,"children":769},"Components","/design-system/components",[770,773,776,779,782,785,788,791,794,797,800,803,806,809,812,815,818,819,820,821,824,827,830,833,836,839,842,845,848,851,854,857,860,863,866,869,872,875,878,881,884,887,890,893,896,899,902,905],{"title":771,"_path":772,"layout":13},"Accordion","/design-system/components/accordion",{"title":774,"_path":775,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":777,"_path":778,"layout":13},"Alert","/design-system/components/alert",{"title":780,"_path":781,"layout":13},"Block quote","/design-system/components/block-quote",{"title":783,"_path":784,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":786,"_path":787,"layout":13},"Button","/design-system/components/button",{"title":789,"_path":790,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":792,"_path":793,"layout":13},"Callout","/design-system/components/callout",{"title":795,"_path":796,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":798,"_path":799,"layout":13},"Card","/design-system/components/card",{"title":801,"_path":802,"layout":13},"Carousel","/design-system/components/carousel",{"title":804,"_path":805,"layout":13},"Category grid","/design-system/components/category-grid",{"title":807,"_path":808,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":810,"_path":811,"layout":13},"Chip","/design-system/components/chip",{"title":813,"_path":814,"layout":13},"Contact us","/design-system/components/contact-us",{"title":816,"_path":817,"layout":13},"Date input","/design-system/components/date-input",{"title":651,"_path":650,"layout":13},{"title":11,"_path":7,"layout":13},{"title":657,"_path":656,"layout":13},{"title":822,"_path":823,"layout":13},"Footer","/design-system/components/footer",{"title":825,"_path":826,"layout":13},"Form","/design-system/components/form",{"title":828,"_path":829,"layout":13},"Form alert","/design-system/components/form-alert",{"title":831,"_path":832,"layout":13},"Header","/design-system/components/header",{"title":834,"_path":835,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":837,"_path":838,"layout":13},"Input field","/design-system/components/input-field",{"title":840,"_path":841,"layout":13},"Key dates","/design-system/components/key-dates",{"title":843,"_path":844,"layout":13},"Media","/design-system/components/media",{"title":846,"_path":847,"layout":13},"Media embed","/design-system/components/media-embed",{"title":849,"_path":850,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":852,"_path":853,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":855,"_path":856,"layout":13},"Option button","/design-system/components/option-button",{"title":858,"_path":859,"layout":13},"Page action","/design-system/components/page-action",{"title":861,"_path":862,"layout":13},"Pagination","/design-system/components/pagination",{"title":864,"_path":865,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":867,"_path":868,"layout":13},"Profile","/design-system/components/profile",{"title":870,"_path":871,"layout":13},"Radio button","/design-system/components/radio-button",{"title":873,"_path":874,"layout":13},"Related links","/design-system/components/related-links",{"title":876,"_path":877,"layout":13},"Results listing","/design-system/components/results-listing",{"title":879,"_path":880,"layout":13},"Search bar","/design-system/components/search-bar",{"title":882,"_path":883,"layout":13},"Skip link","/design-system/components/skip-link",{"title":885,"_path":886,"layout":13},"Social share","/design-system/components/social-share",{"title":888,"_path":889,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":891,"_path":892,"layout":13},"Table","/design-system/components/table",{"title":894,"_path":895,"layout":13},"Tabs","/design-system/components/tabs",{"title":897,"_path":898,"layout":13},"Tag","/design-system/components/tag",{"title":900,"_path":901,"layout":13},"Text area","/design-system/components/text-area",{"title":903,"_path":904,"layout":13},"Timeline","/design-system/components/timeline",{"title":906,"_path":907,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":909,"_path":910,"children":911,"layout":13},"Ripple Framework","/framework",[912,913,931,953],{"title":909,"_path":910,"layout":13},{"title":914,"_path":915,"children":916},"Key Concepts","/framework/key-concepts",[917,919,922,925,928],{"title":724,"_path":918,"layout":13},"/framework/key-concepts/nuxt",{"title":920,"_path":921,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":923,"_path":924,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":926,"_path":927,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":929,"_path":930,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":932,"_path":933,"children":934},"Guides","/framework/guides",[935,938,941,944,947,950],{"title":936,"_path":937,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":939,"_path":940,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":942,"_path":943,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":945,"_path":946,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":948,"_path":949,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":951,"_path":952,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":954,"_path":955,"layout":13},"Core modules","/framework/core-modules",["Reactive",957],["Set"],["Reactive",959],{"module-navigation":960},null,true,"/design-system/components/dropdown/",1714695654503]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/file/_payload.json b/design-system/components/file/_payload.json
index d7c0dbeb9a..891a4f315a 100644
--- a/design-system/components/file/_payload.json
+++ b/design-system/components/file/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":104,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695153559]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":104,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695651756]
\ No newline at end of file
diff --git a/design-system/components/file/index.html b/design-system/components/file/index.html
index 5a9560dfdf..379763d1ce 100644
--- a/design-system/components/file/index.html
+++ b/design-system/components/file/index.html
@@ -28,63 +28,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -96,8 +96,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>File</h1><p class="rpl-type-p-large" data-v-3163c6df>The File component shows a link, with additional metadata, and lets a user download a file attachment.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the File component to let users download an attachment. It is accompanied by an optional description so you can give the user more information.<!--]--></p><p><!--[-->File is made up of:<!--]--></p><ul><!--[--><li><!--[-->the file name<!--]--></li><li><!--[-->metadata including file type and size<!--]--></li><li><!--[-->a document description.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-file--with-caption&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-file--with-caption&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use on any page type.<!--]--></li><li><!--[-->Include in page content areas only.<!--]--></li><li><!--[-->Add an optional description.<!--]--></li><li><!--[-->Add optional updated data if it’s relevant to users.<!--]--></li><li><!--[-->Always include metadata.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t use with a non-descriptive file name.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->File uses colour for:<!--]--></p><ul><!--[--><li><!--[-->indicating to users that they may have an action to complete<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-content--file&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--file&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/file.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/file/_payload.json">[{"state":1,"once":499,"_errors":501,"serverRendered":504,"path":7,"prerenderedAt":505},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":186,"$sdd-globals":202,"$sdd-navigation":204},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/file":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":181,"_id":182,"_source":183,"_file":184,"_extension":185},"/design-system/components/file","components",false,"","File","The File component shows a link, with additional metadata, and lets a user download a file attachment.","page","Core",{"type":16,"children":17,"toc":172},"root",[18,27,33,38,58,63,70,98,104,112,116,122,127,140,148],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use the File component to let users download an attachment. It is accompanied by an optional description so you can give the user more information.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"File is made up of:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48,53],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"the file name",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"metadata including file type and size",{"type":19,"tag":43,"props":54,"children":55},{},[56],{"type":25,"value":57},"a document description.",{"type":19,"tag":59,"props":60,"children":62},"docs-example",{"id":61},"core-containers-file--with-caption",[],{"type":19,"tag":64,"props":65,"children":67},"h3",{"id":66},"when-and-how-to-use",[68],{"type":25,"value":69},"When and how to use",{"type":19,"tag":39,"props":71,"children":72},{},[73,78,83,88,93],{"type":19,"tag":43,"props":74,"children":75},{},[76],{"type":25,"value":77},"Use on any page type.",{"type":19,"tag":43,"props":79,"children":80},{},[81],{"type":25,"value":82},"Include in page content areas only.",{"type":19,"tag":43,"props":84,"children":85},{},[86],{"type":25,"value":87},"Add an optional description.",{"type":19,"tag":43,"props":89,"children":90},{},[91],{"type":25,"value":92},"Add optional updated data if it’s relevant to users.",{"type":19,"tag":43,"props":94,"children":95},{},[96],{"type":25,"value":97},"Always include metadata.",{"type":19,"tag":64,"props":99,"children":101},{"id":100},"when-and-how-not-to-use",[102],{"type":25,"value":103},"When and how not to use",{"type":19,"tag":39,"props":105,"children":106},{},[107],{"type":19,"tag":43,"props":108,"children":109},{},[110],{"type":25,"value":111},"Don’t use with a non-descriptive file name.",{"type":19,"tag":113,"props":114,"children":115},"hr",{},[],{"type":19,"tag":20,"props":117,"children":119},{"id":118},"theming",[120],{"type":25,"value":121},"Theming",{"type":19,"tag":28,"props":123,"children":124},{},[125],{"type":25,"value":126},"File uses colour for:",{"type":19,"tag":39,"props":128,"children":129},{},[130,135],{"type":19,"tag":43,"props":131,"children":132},{},[133],{"type":25,"value":134},"indicating to users that they may have an action to complete",{"type":19,"tag":43,"props":136,"children":137},{},[138],{"type":25,"value":139},"interactive states.",{"type":19,"tag":141,"props":142,"children":143},"docs-theme-chooser",{},[144],{"type":19,"tag":59,"props":145,"children":147},{"id":146},"core-containers-content--file",[],{"type":19,"tag":28,"props":149,"children":150},{},[151,153,162,164,170],{"type":25,"value":152},"To create your own theme, see ",{"type":19,"tag":154,"props":155,"children":159},"a",{"href":156,"rel":157},"https://www.vic.gov.au",[158],"nofollow",[160],{"type":25,"value":161},"theming guidance for designers",{"type":25,"value":163}," or ",{"type":19,"tag":154,"props":165,"children":167},{"href":156,"rel":166},[158],[168],{"type":25,"value":169},"theming guidance for developers",{"type":25,"value":171},".",{"title":10,"searchDepth":173,"depth":173,"links":174},2,[175,180],{"id":22,"depth":173,"text":26,"children":176},[177,179],{"id":66,"depth":178,"text":69},3,{"id":100,"depth":178,"text":103},{"id":118,"depth":173,"text":121},"markdown","content:design-system:5.components:file.md","content","design-system/5.components/file.md","md",["ShallowRef",187],["ShallowReactive",188],{"/design-system/components/file":189},[190,196],{"_path":191,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":192,"description":193,"layout":13,"label":14,"_type":181,"_id":194,"_source":183,"_file":195,"_extension":185},"/design-system/components/dropdown","Dropdown","The Dropdown component lets users see a list of available options and then select one or more options.","content:design-system:5.components:dropdown.md","design-system/5.components/dropdown.md",{"_path":197,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":198,"description":199,"layout":13,"label":14,"_type":181,"_id":200,"_source":183,"_file":201,"_extension":185},"/design-system/components/footer","Footer","The Footer component helps help users find information at the bottom of a page.","content:design-system:5.components:footer.md","design-system/5.components/footer.md",["ShallowRef",203],{},[205,210,451],{"title":206,"_path":207,"icon":208,"layout":209},"Ripple Design System","/","carbon:home","home",{"title":211,"_path":212,"children":213},"Design System","/design-system",[214,230,246,275,309],{"title":215,"_path":216,"children":217},"About","/design-system/about",[218,221,224,227],{"title":219,"_path":220,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":222,"_path":223,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":225,"_path":226,"layout":13},"Support","/design-system/about/getting-support",{"title":228,"_path":229,"layout":13},"Contributing","/design-system/about/contributing",{"title":231,"_path":232,"children":233},"Design","/design-system/design",[234,237,240,243],{"title":235,"_path":236,"layout":13},"Getting started","/design-system/design/getting-started",{"title":238,"_path":239,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":241,"_path":242,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":244,"_path":245,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":247,"_path":248,"children":249},"Develop","/design-system/develop",[250,252,254,257],{"title":235,"_path":251,"layout":13},"/design-system/develop/getting-started",{"title":228,"_path":253,"layout":13},"/design-system/develop/contributing",{"title":255,"_path":256,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":258,"children":259,"layout":13},"/design-system/develop/usage",[260,263,266,269,272],{"title":261,"_path":262,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":264,"_path":265,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":267,"_path":268,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":270,"_path":271,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":273,"_path":274,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":276,"_path":277,"children":278},"Styles","/design-system/styles",[279,282,285,288,291,294,297,300,303,306],{"title":280,"_path":281,"layout":13},"Colour","/design-system/styles/colour",{"title":283,"_path":284,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":286,"_path":287,"layout":13},"Grid","/design-system/styles/grid",{"title":289,"_path":290,"layout":13},"Icons","/design-system/styles/icons",{"title":292,"_path":293,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":295,"_path":296,"layout":13},"Layout","/design-system/styles/layout",{"title":298,"_path":299,"layout":13},"Logo","/design-system/styles/logo",{"title":301,"_path":302,"layout":13},"Motion","/design-system/styles/motion",{"title":304,"_path":305,"layout":13},"Spacing","/design-system/styles/spacing",{"title":307,"_path":308,"layout":13},"Typography","/design-system/styles/typography",{"title":310,"_path":311,"children":312},"Components","/design-system/components",[313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,365,366,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448],{"title":314,"_path":315,"layout":13},"Accordion","/design-system/components/accordion",{"title":317,"_path":318,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":320,"_path":321,"layout":13},"Alert","/design-system/components/alert",{"title":323,"_path":324,"layout":13},"Block quote","/design-system/components/block-quote",{"title":326,"_path":327,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":329,"_path":330,"layout":13},"Button","/design-system/components/button",{"title":332,"_path":333,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":335,"_path":336,"layout":13},"Callout","/design-system/components/callout",{"title":338,"_path":339,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":341,"_path":342,"layout":13},"Card","/design-system/components/card",{"title":344,"_path":345,"layout":13},"Carousel","/design-system/components/carousel",{"title":347,"_path":348,"layout":13},"Category grid","/design-system/components/category-grid",{"title":350,"_path":351,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":353,"_path":354,"layout":13},"Chip","/design-system/components/chip",{"title":356,"_path":357,"layout":13},"Contact us","/design-system/components/contact-us",{"title":359,"_path":360,"layout":13},"Date input","/design-system/components/date-input",{"title":362,"_path":363,"layout":13},"Detail list","/design-system/components/detail-list",{"title":192,"_path":191,"layout":13},{"title":11,"_path":7,"layout":13},{"title":198,"_path":197,"layout":13},{"title":368,"_path":369,"layout":13},"Form","/design-system/components/form",{"title":371,"_path":372,"layout":13},"Form alert","/design-system/components/form-alert",{"title":374,"_path":375,"layout":13},"Header","/design-system/components/header",{"title":377,"_path":378,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":380,"_path":381,"layout":13},"Input field","/design-system/components/input-field",{"title":383,"_path":384,"layout":13},"Key dates","/design-system/components/key-dates",{"title":386,"_path":387,"layout":13},"Media","/design-system/components/media",{"title":389,"_path":390,"layout":13},"Media embed","/design-system/components/media-embed",{"title":392,"_path":393,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":395,"_path":396,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":398,"_path":399,"layout":13},"Option button","/design-system/components/option-button",{"title":401,"_path":402,"layout":13},"Page action","/design-system/components/page-action",{"title":404,"_path":405,"layout":13},"Pagination","/design-system/components/pagination",{"title":407,"_path":408,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":410,"_path":411,"layout":13},"Profile","/design-system/components/profile",{"title":413,"_path":414,"layout":13},"Radio button","/design-system/components/radio-button",{"title":416,"_path":417,"layout":13},"Related links","/design-system/components/related-links",{"title":419,"_path":420,"layout":13},"Results listing","/design-system/components/results-listing",{"title":422,"_path":423,"layout":13},"Search bar","/design-system/components/search-bar",{"title":425,"_path":426,"layout":13},"Skip link","/design-system/components/skip-link",{"title":428,"_path":429,"layout":13},"Social share","/design-system/components/social-share",{"title":431,"_path":432,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":434,"_path":435,"layout":13},"Table","/design-system/components/table",{"title":437,"_path":438,"layout":13},"Tabs","/design-system/components/tabs",{"title":440,"_path":441,"layout":13},"Tag","/design-system/components/tag",{"title":443,"_path":444,"layout":13},"Text area","/design-system/components/text-area",{"title":446,"_path":447,"layout":13},"Timeline","/design-system/components/timeline",{"title":449,"_path":450,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":452,"_path":453,"children":454,"layout":13},"Ripple Framework","/framework",[455,456,474,496],{"title":452,"_path":453,"layout":13},{"title":457,"_path":458,"children":459},"Key Concepts","/framework/key-concepts",[460,462,465,468,471],{"title":267,"_path":461,"layout":13},"/framework/key-concepts/nuxt",{"title":463,"_path":464,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":466,"_path":467,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":469,"_path":470,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":472,"_path":473,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":475,"_path":476,"children":477},"Guides","/framework/guides",[478,481,484,487,490,493],{"title":479,"_path":480,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":482,"_path":483,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":485,"_path":486,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":488,"_path":489,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":491,"_path":492,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":494,"_path":495,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":497,"_path":498,"layout":13},"Core modules","/framework/core-modules",["Reactive",500],["Set"],["Reactive",502],{"module-navigation":503},null,true,1714695153559]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>File</h1><p class="rpl-type-p-large" data-v-3163c6df>The File component shows a link, with additional metadata, and lets a user download a file attachment.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the File component to let users download an attachment. It is accompanied by an optional description so you can give the user more information.<!--]--></p><p><!--[-->File is made up of:<!--]--></p><ul><!--[--><li><!--[-->the file name<!--]--></li><li><!--[-->metadata including file type and size<!--]--></li><li><!--[-->a document description.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-file--with-caption&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-file--with-caption&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use on any page type.<!--]--></li><li><!--[-->Include in page content areas only.<!--]--></li><li><!--[-->Add an optional description.<!--]--></li><li><!--[-->Add optional updated data if it’s relevant to users.<!--]--></li><li><!--[-->Always include metadata.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t use with a non-descriptive file name.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->File uses colour for:<!--]--></p><ul><!--[--><li><!--[-->indicating to users that they may have an action to complete<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-content--file&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--file&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/file.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/file/_payload.json">[{"state":1,"once":499,"_errors":501,"serverRendered":504,"path":7,"prerenderedAt":505},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":186,"$sdd-globals":202,"$sdd-navigation":204},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/file":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":181,"_id":182,"_source":183,"_file":184,"_extension":185},"/design-system/components/file","components",false,"","File","The File component shows a link, with additional metadata, and lets a user download a file attachment.","page","Core",{"type":16,"children":17,"toc":172},"root",[18,27,33,38,58,63,70,98,104,112,116,122,127,140,148],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use the File component to let users download an attachment. It is accompanied by an optional description so you can give the user more information.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"File is made up of:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48,53],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"the file name",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"metadata including file type and size",{"type":19,"tag":43,"props":54,"children":55},{},[56],{"type":25,"value":57},"a document description.",{"type":19,"tag":59,"props":60,"children":62},"docs-example",{"id":61},"core-containers-file--with-caption",[],{"type":19,"tag":64,"props":65,"children":67},"h3",{"id":66},"when-and-how-to-use",[68],{"type":25,"value":69},"When and how to use",{"type":19,"tag":39,"props":71,"children":72},{},[73,78,83,88,93],{"type":19,"tag":43,"props":74,"children":75},{},[76],{"type":25,"value":77},"Use on any page type.",{"type":19,"tag":43,"props":79,"children":80},{},[81],{"type":25,"value":82},"Include in page content areas only.",{"type":19,"tag":43,"props":84,"children":85},{},[86],{"type":25,"value":87},"Add an optional description.",{"type":19,"tag":43,"props":89,"children":90},{},[91],{"type":25,"value":92},"Add optional updated data if it’s relevant to users.",{"type":19,"tag":43,"props":94,"children":95},{},[96],{"type":25,"value":97},"Always include metadata.",{"type":19,"tag":64,"props":99,"children":101},{"id":100},"when-and-how-not-to-use",[102],{"type":25,"value":103},"When and how not to use",{"type":19,"tag":39,"props":105,"children":106},{},[107],{"type":19,"tag":43,"props":108,"children":109},{},[110],{"type":25,"value":111},"Don’t use with a non-descriptive file name.",{"type":19,"tag":113,"props":114,"children":115},"hr",{},[],{"type":19,"tag":20,"props":117,"children":119},{"id":118},"theming",[120],{"type":25,"value":121},"Theming",{"type":19,"tag":28,"props":123,"children":124},{},[125],{"type":25,"value":126},"File uses colour for:",{"type":19,"tag":39,"props":128,"children":129},{},[130,135],{"type":19,"tag":43,"props":131,"children":132},{},[133],{"type":25,"value":134},"indicating to users that they may have an action to complete",{"type":19,"tag":43,"props":136,"children":137},{},[138],{"type":25,"value":139},"interactive states.",{"type":19,"tag":141,"props":142,"children":143},"docs-theme-chooser",{},[144],{"type":19,"tag":59,"props":145,"children":147},{"id":146},"core-containers-content--file",[],{"type":19,"tag":28,"props":149,"children":150},{},[151,153,162,164,170],{"type":25,"value":152},"To create your own theme, see ",{"type":19,"tag":154,"props":155,"children":159},"a",{"href":156,"rel":157},"https://www.vic.gov.au",[158],"nofollow",[160],{"type":25,"value":161},"theming guidance for designers",{"type":25,"value":163}," or ",{"type":19,"tag":154,"props":165,"children":167},{"href":156,"rel":166},[158],[168],{"type":25,"value":169},"theming guidance for developers",{"type":25,"value":171},".",{"title":10,"searchDepth":173,"depth":173,"links":174},2,[175,180],{"id":22,"depth":173,"text":26,"children":176},[177,179],{"id":66,"depth":178,"text":69},3,{"id":100,"depth":178,"text":103},{"id":118,"depth":173,"text":121},"markdown","content:design-system:5.components:file.md","content","design-system/5.components/file.md","md",["ShallowRef",187],["ShallowReactive",188],{"/design-system/components/file":189},[190,196],{"_path":191,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":192,"description":193,"layout":13,"label":14,"_type":181,"_id":194,"_source":183,"_file":195,"_extension":185},"/design-system/components/dropdown","Dropdown","The Dropdown component lets users see a list of available options and then select one or more options.","content:design-system:5.components:dropdown.md","design-system/5.components/dropdown.md",{"_path":197,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":198,"description":199,"layout":13,"label":14,"_type":181,"_id":200,"_source":183,"_file":201,"_extension":185},"/design-system/components/footer","Footer","The Footer component helps help users find information at the bottom of a page.","content:design-system:5.components:footer.md","design-system/5.components/footer.md",["ShallowRef",203],{},[205,210,451],{"title":206,"_path":207,"icon":208,"layout":209},"Ripple Design System","/","carbon:home","home",{"title":211,"_path":212,"children":213},"Design System","/design-system",[214,230,246,275,309],{"title":215,"_path":216,"children":217},"About","/design-system/about",[218,221,224,227],{"title":219,"_path":220,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":222,"_path":223,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":225,"_path":226,"layout":13},"Support","/design-system/about/getting-support",{"title":228,"_path":229,"layout":13},"Contributing","/design-system/about/contributing",{"title":231,"_path":232,"children":233},"Design","/design-system/design",[234,237,240,243],{"title":235,"_path":236,"layout":13},"Getting started","/design-system/design/getting-started",{"title":238,"_path":239,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":241,"_path":242,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":244,"_path":245,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":247,"_path":248,"children":249},"Develop","/design-system/develop",[250,252,254,257],{"title":235,"_path":251,"layout":13},"/design-system/develop/getting-started",{"title":228,"_path":253,"layout":13},"/design-system/develop/contributing",{"title":255,"_path":256,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":258,"children":259,"layout":13},"/design-system/develop/usage",[260,263,266,269,272],{"title":261,"_path":262,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":264,"_path":265,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":267,"_path":268,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":270,"_path":271,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":273,"_path":274,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":276,"_path":277,"children":278},"Styles","/design-system/styles",[279,282,285,288,291,294,297,300,303,306],{"title":280,"_path":281,"layout":13},"Colour","/design-system/styles/colour",{"title":283,"_path":284,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":286,"_path":287,"layout":13},"Grid","/design-system/styles/grid",{"title":289,"_path":290,"layout":13},"Icons","/design-system/styles/icons",{"title":292,"_path":293,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":295,"_path":296,"layout":13},"Layout","/design-system/styles/layout",{"title":298,"_path":299,"layout":13},"Logo","/design-system/styles/logo",{"title":301,"_path":302,"layout":13},"Motion","/design-system/styles/motion",{"title":304,"_path":305,"layout":13},"Spacing","/design-system/styles/spacing",{"title":307,"_path":308,"layout":13},"Typography","/design-system/styles/typography",{"title":310,"_path":311,"children":312},"Components","/design-system/components",[313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,365,366,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448],{"title":314,"_path":315,"layout":13},"Accordion","/design-system/components/accordion",{"title":317,"_path":318,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":320,"_path":321,"layout":13},"Alert","/design-system/components/alert",{"title":323,"_path":324,"layout":13},"Block quote","/design-system/components/block-quote",{"title":326,"_path":327,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":329,"_path":330,"layout":13},"Button","/design-system/components/button",{"title":332,"_path":333,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":335,"_path":336,"layout":13},"Callout","/design-system/components/callout",{"title":338,"_path":339,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":341,"_path":342,"layout":13},"Card","/design-system/components/card",{"title":344,"_path":345,"layout":13},"Carousel","/design-system/components/carousel",{"title":347,"_path":348,"layout":13},"Category grid","/design-system/components/category-grid",{"title":350,"_path":351,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":353,"_path":354,"layout":13},"Chip","/design-system/components/chip",{"title":356,"_path":357,"layout":13},"Contact us","/design-system/components/contact-us",{"title":359,"_path":360,"layout":13},"Date input","/design-system/components/date-input",{"title":362,"_path":363,"layout":13},"Detail list","/design-system/components/detail-list",{"title":192,"_path":191,"layout":13},{"title":11,"_path":7,"layout":13},{"title":198,"_path":197,"layout":13},{"title":368,"_path":369,"layout":13},"Form","/design-system/components/form",{"title":371,"_path":372,"layout":13},"Form alert","/design-system/components/form-alert",{"title":374,"_path":375,"layout":13},"Header","/design-system/components/header",{"title":377,"_path":378,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":380,"_path":381,"layout":13},"Input field","/design-system/components/input-field",{"title":383,"_path":384,"layout":13},"Key dates","/design-system/components/key-dates",{"title":386,"_path":387,"layout":13},"Media","/design-system/components/media",{"title":389,"_path":390,"layout":13},"Media embed","/design-system/components/media-embed",{"title":392,"_path":393,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":395,"_path":396,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":398,"_path":399,"layout":13},"Option button","/design-system/components/option-button",{"title":401,"_path":402,"layout":13},"Page action","/design-system/components/page-action",{"title":404,"_path":405,"layout":13},"Pagination","/design-system/components/pagination",{"title":407,"_path":408,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":410,"_path":411,"layout":13},"Profile","/design-system/components/profile",{"title":413,"_path":414,"layout":13},"Radio button","/design-system/components/radio-button",{"title":416,"_path":417,"layout":13},"Related links","/design-system/components/related-links",{"title":419,"_path":420,"layout":13},"Results listing","/design-system/components/results-listing",{"title":422,"_path":423,"layout":13},"Search bar","/design-system/components/search-bar",{"title":425,"_path":426,"layout":13},"Skip link","/design-system/components/skip-link",{"title":428,"_path":429,"layout":13},"Social share","/design-system/components/social-share",{"title":431,"_path":432,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":434,"_path":435,"layout":13},"Table","/design-system/components/table",{"title":437,"_path":438,"layout":13},"Tabs","/design-system/components/tabs",{"title":440,"_path":441,"layout":13},"Tag","/design-system/components/tag",{"title":443,"_path":444,"layout":13},"Text area","/design-system/components/text-area",{"title":446,"_path":447,"layout":13},"Timeline","/design-system/components/timeline",{"title":449,"_path":450,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":452,"_path":453,"children":454,"layout":13},"Ripple Framework","/framework",[455,456,474,496],{"title":452,"_path":453,"layout":13},{"title":457,"_path":458,"children":459},"Key Concepts","/framework/key-concepts",[460,462,465,468,471],{"title":267,"_path":461,"layout":13},"/framework/key-concepts/nuxt",{"title":463,"_path":464,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":466,"_path":467,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":469,"_path":470,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":472,"_path":473,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":475,"_path":476,"children":477},"Guides","/framework/guides",[478,481,484,487,490,493],{"title":479,"_path":480,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":482,"_path":483,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":485,"_path":486,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":488,"_path":489,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":491,"_path":492,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":494,"_path":495,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":497,"_path":498,"layout":13},"Core modules","/framework/core-modules",["Reactive",500],["Set"],["Reactive",502],{"module-navigation":503},null,true,1714695651756]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/footer/_payload.json b/design-system/components/footer/_payload.json
index 9317ab6dae..087b05b834 100644
--- a/design-system/components/footer/_payload.json
+++ b/design-system/components/footer/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695155840]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695653946]
\ No newline at end of file
diff --git a/design-system/components/footer/index.html b/design-system/components/footer/index.html
index 1d7bc6b505..144b991325 100644
--- a/design-system/components/footer/index.html
+++ b/design-system/components/footer/index.html
@@ -28,63 +28,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -97,8 +97,8 @@
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Footer</h1><p class="rpl-type-p-large" data-v-3163c6df>The Footer component helps help users find information at the bottom of a page.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use footers to help users find what they need after scrolling to the bottom of a page. Footers provide supplementary information such as:<!--]--></p><ul><!--[--><li><!--[-->copyright<!--]--></li><li><!--[-->contact information<!--]--></li><li><!--[-->links to other pages within the website<!--]--></li><li><!--[-->social media links.<!--]--></li><!--]--></ul><p><!--[-->The footer must be used at the bottom of every page. It is separate from the primary navigation but is relevant to the entire site.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-footer--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-footer--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="how-this-component-works" data-v-ea525968><a href="#how-this-component-works" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->How this component works<!--]--></a></h2><p><!--[-->The footer is made up of:<!--]--></p><ul><!--[--><li><!--[-->optional section links, which help avoid dead ends by giving users a way to continue their journey through:
-<ul><!--[--><li><!--[-->additional links (internal and external)<!--]--></li><li><!--[-->bypassing main navigation<!--]--></li><!--]--></ul><!--]--></li><li><!--[-->optional social links, which can be used to link to social media accounts<!--]--></li><li><!--[-->core site links, which must always be used and include the privacy statement, contact information and terms of use<!--]--></li><li><!--[-->a copyright statement, which clarifies who owns the copyright and is specific to your agency or department (add the State Government of Victoria logo to vic.gov.au services, for sitewide consistency)<!--]--></li><li><!--[-->an Acknowledgement of Traditional Owners message (an acknowledgement component).<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use with an optional supporting logo relevant to the site content.<!--]--></li><li><!--[-->Use a consistently-themed footer across all pages of your site.<!--]--></li><li><!--[-->Use the optional neutral theme.<!--]--></li><li><!--[-->Use with an optional image credit for the header image.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t alter the required links in the core section of the footer.<!--]--></li><li><!--[-->Don’t change the text in the acknowledgement component.<!--]--></li><li><!--[-->Don’t use with links that are not relevant to your organisation.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->You can theme the footer in 3 ways:<!--]--></p><ul><!--[--><li><!--[-->site colour palette<!--]--></li><li><!--[-->neutral colour palette<!--]--></li><li><!--[-->custom colour palette (see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a>).<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="site-colour-palette" data-v-ea525968><a href="#site-colour-palette" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Site colour palette<!--]--></a></h2><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-footer--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-footer--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><h2 class="rpl-type-h3 docs-h3" id="neutral-colour-palette" data-v-ea525968><a href="#neutral-colour-palette" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Neutral colour palette<!--]--></a></h2><p><!--[-->Implemented at a site level, the footer has predefined neutral colour values. You are unable to edit or customise these colours.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-footer--neutral&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-footer--neutral&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="custom-colour-palette" data-v-ea525968><a href="#custom-colour-palette" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Custom colour palette<!--]--></a></h2><p><!--[-->The footer has its own colour tokens. Because of this, it&#39;s possible to apply a custom theme to your footer.<!--]--></p><p><!--[-->This is only recommended as a last resort.<!--]--></p><p><!--[-->See <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->component specific theming guidance for designers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-footer--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme3;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-footer--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme3;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/footer.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/footer/_payload.json">[{"state":1,"once":624,"_errors":626,"serverRendered":629,"path":630,"prerenderedAt":631},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":311,"$sdd-globals":327,"$sdd-navigation":329},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/footer":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":306,"_id":307,"_source":308,"_file":309,"_extension":310},"/design-system/components/footer","components",false,"","Footer","The Footer component helps help users find information at the bottom of a page.","page","Core",{"type":16,"children":17,"toc":292},"root",[18,27,33,58,63,68,75,80,121,127,150,156,174,178,184,189,215,221,228,234,239,243,249,254,259,271,275],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use footers to help users find what they need after scrolling to the bottom of a page. Footers provide supplementary information such as:",{"type":19,"tag":34,"props":35,"children":36},"ul",{},[37,43,48,53],{"type":19,"tag":38,"props":39,"children":40},"li",{},[41],{"type":25,"value":42},"copyright",{"type":19,"tag":38,"props":44,"children":45},{},[46],{"type":25,"value":47},"contact information",{"type":19,"tag":38,"props":49,"children":50},{},[51],{"type":25,"value":52},"links to other pages within the website",{"type":19,"tag":38,"props":54,"children":55},{},[56],{"type":25,"value":57},"social media links.",{"type":19,"tag":28,"props":59,"children":60},{},[61],{"type":25,"value":62},"The footer must be used at the bottom of every page. It is separate from the primary navigation but is relevant to the entire site.",{"type":19,"tag":64,"props":65,"children":67},"docs-example",{"id":66},"core-navigation-footer--default-story",[],{"type":19,"tag":69,"props":70,"children":72},"h3",{"id":71},"how-this-component-works",[73],{"type":25,"value":74},"How this component works",{"type":19,"tag":28,"props":76,"children":77},{},[78],{"type":25,"value":79},"The footer is made up of:",{"type":19,"tag":34,"props":81,"children":82},{},[83,101,106,111,116],{"type":19,"tag":38,"props":84,"children":85},{},[86,88],{"type":25,"value":87},"optional section links, which help avoid dead ends by giving users a way to continue their journey through:\n",{"type":19,"tag":34,"props":89,"children":90},{},[91,96],{"type":19,"tag":38,"props":92,"children":93},{},[94],{"type":25,"value":95},"additional links (internal and external)",{"type":19,"tag":38,"props":97,"children":98},{},[99],{"type":25,"value":100},"bypassing main navigation",{"type":19,"tag":38,"props":102,"children":103},{},[104],{"type":25,"value":105},"optional social links, which can be used to link to social media accounts",{"type":19,"tag":38,"props":107,"children":108},{},[109],{"type":25,"value":110},"core site links, which must always be used and include the privacy statement, contact information and terms of use",{"type":19,"tag":38,"props":112,"children":113},{},[114],{"type":25,"value":115},"a copyright statement, which clarifies who owns the copyright and is specific to your agency or department (add the State Government of Victoria logo to vic.gov.au services, for sitewide consistency)",{"type":19,"tag":38,"props":117,"children":118},{},[119],{"type":25,"value":120},"an Acknowledgement of Traditional Owners message (an acknowledgement component).",{"type":19,"tag":69,"props":122,"children":124},{"id":123},"when-and-how-to-use",[125],{"type":25,"value":126},"When and how to use",{"type":19,"tag":34,"props":128,"children":129},{},[130,135,140,145],{"type":19,"tag":38,"props":131,"children":132},{},[133],{"type":25,"value":134},"Use with an optional supporting logo relevant to the site content.",{"type":19,"tag":38,"props":136,"children":137},{},[138],{"type":25,"value":139},"Use a consistently-themed footer across all pages of your site.",{"type":19,"tag":38,"props":141,"children":142},{},[143],{"type":25,"value":144},"Use the optional neutral theme.",{"type":19,"tag":38,"props":146,"children":147},{},[148],{"type":25,"value":149},"Use with an optional image credit for the header image.",{"type":19,"tag":69,"props":151,"children":153},{"id":152},"when-and-how-not-to-use",[154],{"type":25,"value":155},"When and how not to use",{"type":19,"tag":34,"props":157,"children":158},{},[159,164,169],{"type":19,"tag":38,"props":160,"children":161},{},[162],{"type":25,"value":163},"Don’t alter the required links in the core section of the footer.",{"type":19,"tag":38,"props":165,"children":166},{},[167],{"type":25,"value":168},"Don’t change the text in the acknowledgement component.",{"type":19,"tag":38,"props":170,"children":171},{},[172],{"type":25,"value":173},"Don’t use with links that are not relevant to your organisation.",{"type":19,"tag":175,"props":176,"children":177},"hr",{},[],{"type":19,"tag":20,"props":179,"children":181},{"id":180},"theming",[182],{"type":25,"value":183},"Theming",{"type":19,"tag":28,"props":185,"children":186},{},[187],{"type":25,"value":188},"You can theme the footer in 3 ways:",{"type":19,"tag":34,"props":190,"children":191},{},[192,197,202],{"type":19,"tag":38,"props":193,"children":194},{},[195],{"type":25,"value":196},"site colour palette",{"type":19,"tag":38,"props":198,"children":199},{},[200],{"type":25,"value":201},"neutral colour palette",{"type":19,"tag":38,"props":203,"children":204},{},[205,207,213],{"type":25,"value":206},"custom colour palette (see ",{"type":19,"tag":208,"props":209,"children":210},"a",{"href":10},[211],{"type":25,"value":212},"theming guidance for designers",{"type":25,"value":214},").",{"type":19,"tag":69,"props":216,"children":218},{"id":217},"site-colour-palette",[219],{"type":25,"value":220},"Site colour palette",{"type":19,"tag":222,"props":223,"children":224},"docs-theme-chooser",{},[225],{"type":19,"tag":64,"props":226,"children":227},{"id":66},[],{"type":19,"tag":69,"props":229,"children":231},{"id":230},"neutral-colour-palette",[232],{"type":25,"value":233},"Neutral colour palette",{"type":19,"tag":28,"props":235,"children":236},{},[237],{"type":25,"value":238},"Implemented at a site level, the footer has predefined neutral colour values. You are unable to edit or customise these colours.",{"type":19,"tag":64,"props":240,"children":242},{"id":241},"core-navigation-footer--neutral",[],{"type":19,"tag":69,"props":244,"children":246},{"id":245},"custom-colour-palette",[247],{"type":25,"value":248},"Custom colour palette",{"type":19,"tag":28,"props":250,"children":251},{},[252],{"type":25,"value":253},"The footer has its own colour tokens. Because of this, it's possible to apply a custom theme to your footer.",{"type":19,"tag":28,"props":255,"children":256},{},[257],{"type":25,"value":258},"This is only recommended as a last resort.",{"type":19,"tag":28,"props":260,"children":261},{},[262,264,269],{"type":25,"value":263},"See ",{"type":19,"tag":208,"props":265,"children":266},{"href":10},[267],{"type":25,"value":268},"component specific theming guidance for designers",{"type":25,"value":270},".",{"type":19,"tag":64,"props":272,"children":274},{"id":66,"theme":273},"docsTheme3",[],{"type":19,"tag":28,"props":276,"children":277},{},[278,280,284,286,291],{"type":25,"value":279},"To create your own theme, see ",{"type":19,"tag":208,"props":281,"children":282},{"href":10},[283],{"type":25,"value":212},{"type":25,"value":285}," or ",{"type":19,"tag":208,"props":287,"children":288},{"href":10},[289],{"type":25,"value":290},"theming guidance for developers",{"type":25,"value":270},{"title":10,"searchDepth":293,"depth":293,"links":294},2,[295,301],{"id":22,"depth":293,"text":26,"children":296},[297,299,300],{"id":71,"depth":298,"text":74},3,{"id":123,"depth":298,"text":126},{"id":152,"depth":298,"text":155},{"id":180,"depth":293,"text":183,"children":302},[303,304,305],{"id":217,"depth":298,"text":220},{"id":230,"depth":298,"text":233},{"id":245,"depth":298,"text":248},"markdown","content:design-system:5.components:footer.md","content","design-system/5.components/footer.md","md",["ShallowRef",312],["ShallowReactive",313],{"/design-system/components/footer":314},[315,321],{"_path":316,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":317,"description":318,"layout":13,"label":14,"_type":306,"_id":319,"_source":308,"_file":320,"_extension":310},"/design-system/components/file","File","The File component shows a link, with additional metadata, and lets a user download a file attachment.","content:design-system:5.components:file.md","design-system/5.components/file.md",{"_path":322,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":323,"description":324,"layout":13,"label":14,"_type":306,"_id":325,"_source":308,"_file":326,"_extension":310},"/design-system/components/form-alert","Form alert","The Form alert component shows the user the outcome of a form submission or validation.","content:design-system:5.components:form-alert.md","design-system/5.components/form-alert.md",["ShallowRef",328],{},[330,335,576],{"title":331,"_path":332,"icon":333,"layout":334},"Ripple Design System","/","carbon:home","home",{"title":336,"_path":337,"children":338},"Design System","/design-system",[339,355,371,400,434],{"title":340,"_path":341,"children":342},"About","/design-system/about",[343,346,349,352],{"title":344,"_path":345,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":347,"_path":348,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":350,"_path":351,"layout":13},"Support","/design-system/about/getting-support",{"title":353,"_path":354,"layout":13},"Contributing","/design-system/about/contributing",{"title":356,"_path":357,"children":358},"Design","/design-system/design",[359,362,365,368],{"title":360,"_path":361,"layout":13},"Getting started","/design-system/design/getting-started",{"title":363,"_path":364,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":366,"_path":367,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":369,"_path":370,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":372,"_path":373,"children":374},"Develop","/design-system/develop",[375,377,379,382],{"title":360,"_path":376,"layout":13},"/design-system/develop/getting-started",{"title":353,"_path":378,"layout":13},"/design-system/develop/contributing",{"title":380,"_path":381,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":383,"children":384,"layout":13},"/design-system/develop/usage",[385,388,391,394,397],{"title":386,"_path":387,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":389,"_path":390,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":392,"_path":393,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":395,"_path":396,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":398,"_path":399,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":401,"_path":402,"children":403},"Styles","/design-system/styles",[404,407,410,413,416,419,422,425,428,431],{"title":405,"_path":406,"layout":13},"Colour","/design-system/styles/colour",{"title":408,"_path":409,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":411,"_path":412,"layout":13},"Grid","/design-system/styles/grid",{"title":414,"_path":415,"layout":13},"Icons","/design-system/styles/icons",{"title":417,"_path":418,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":420,"_path":421,"layout":13},"Layout","/design-system/styles/layout",{"title":423,"_path":424,"layout":13},"Logo","/design-system/styles/logo",{"title":426,"_path":427,"layout":13},"Motion","/design-system/styles/motion",{"title":429,"_path":430,"layout":13},"Spacing","/design-system/styles/spacing",{"title":432,"_path":433,"layout":13},"Typography","/design-system/styles/typography",{"title":435,"_path":436,"children":437},"Components","/design-system/components",[438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,493,494,497,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543,546,549,552,555,558,561,564,567,570,573],{"title":439,"_path":440,"layout":13},"Accordion","/design-system/components/accordion",{"title":442,"_path":443,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":445,"_path":446,"layout":13},"Alert","/design-system/components/alert",{"title":448,"_path":449,"layout":13},"Block quote","/design-system/components/block-quote",{"title":451,"_path":452,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":454,"_path":455,"layout":13},"Button","/design-system/components/button",{"title":457,"_path":458,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":460,"_path":461,"layout":13},"Callout","/design-system/components/callout",{"title":463,"_path":464,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":466,"_path":467,"layout":13},"Card","/design-system/components/card",{"title":469,"_path":470,"layout":13},"Carousel","/design-system/components/carousel",{"title":472,"_path":473,"layout":13},"Category grid","/design-system/components/category-grid",{"title":475,"_path":476,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":478,"_path":479,"layout":13},"Chip","/design-system/components/chip",{"title":481,"_path":482,"layout":13},"Contact us","/design-system/components/contact-us",{"title":484,"_path":485,"layout":13},"Date input","/design-system/components/date-input",{"title":487,"_path":488,"layout":13},"Detail list","/design-system/components/detail-list",{"title":490,"_path":491,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":317,"_path":316,"layout":13},{"title":11,"_path":7,"layout":13},{"title":495,"_path":496,"layout":13},"Form","/design-system/components/form",{"title":323,"_path":322,"layout":13},{"title":499,"_path":500,"layout":13},"Header","/design-system/components/header",{"title":502,"_path":503,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":505,"_path":506,"layout":13},"Input field","/design-system/components/input-field",{"title":508,"_path":509,"layout":13},"Key dates","/design-system/components/key-dates",{"title":511,"_path":512,"layout":13},"Media","/design-system/components/media",{"title":514,"_path":515,"layout":13},"Media embed","/design-system/components/media-embed",{"title":517,"_path":518,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":520,"_path":521,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":523,"_path":524,"layout":13},"Option button","/design-system/components/option-button",{"title":526,"_path":527,"layout":13},"Page action","/design-system/components/page-action",{"title":529,"_path":530,"layout":13},"Pagination","/design-system/components/pagination",{"title":532,"_path":533,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":535,"_path":536,"layout":13},"Profile","/design-system/components/profile",{"title":538,"_path":539,"layout":13},"Radio button","/design-system/components/radio-button",{"title":541,"_path":542,"layout":13},"Related links","/design-system/components/related-links",{"title":544,"_path":545,"layout":13},"Results listing","/design-system/components/results-listing",{"title":547,"_path":548,"layout":13},"Search bar","/design-system/components/search-bar",{"title":550,"_path":551,"layout":13},"Skip link","/design-system/components/skip-link",{"title":553,"_path":554,"layout":13},"Social share","/design-system/components/social-share",{"title":556,"_path":557,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":559,"_path":560,"layout":13},"Table","/design-system/components/table",{"title":562,"_path":563,"layout":13},"Tabs","/design-system/components/tabs",{"title":565,"_path":566,"layout":13},"Tag","/design-system/components/tag",{"title":568,"_path":569,"layout":13},"Text area","/design-system/components/text-area",{"title":571,"_path":572,"layout":13},"Timeline","/design-system/components/timeline",{"title":574,"_path":575,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":577,"_path":578,"children":579,"layout":13},"Ripple Framework","/framework",[580,581,599,621],{"title":577,"_path":578,"layout":13},{"title":582,"_path":583,"children":584},"Key Concepts","/framework/key-concepts",[585,587,590,593,596],{"title":392,"_path":586,"layout":13},"/framework/key-concepts/nuxt",{"title":588,"_path":589,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":591,"_path":592,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":594,"_path":595,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":597,"_path":598,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":600,"_path":601,"children":602},"Guides","/framework/guides",[603,606,609,612,615,618],{"title":604,"_path":605,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":607,"_path":608,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":610,"_path":611,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":613,"_path":614,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":616,"_path":617,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":619,"_path":620,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":622,"_path":623,"layout":13},"Core modules","/framework/core-modules",["Reactive",625],["Set"],["Reactive",627],{"module-navigation":628},null,true,"/design-system/components/footer/",1714695155840]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+<ul><!--[--><li><!--[-->additional links (internal and external)<!--]--></li><li><!--[-->bypassing main navigation<!--]--></li><!--]--></ul><!--]--></li><li><!--[-->optional social links, which can be used to link to social media accounts<!--]--></li><li><!--[-->core site links, which must always be used and include the privacy statement, contact information and terms of use<!--]--></li><li><!--[-->a copyright statement, which clarifies who owns the copyright and is specific to your agency or department (add the State Government of Victoria logo to vic.gov.au services, for sitewide consistency)<!--]--></li><li><!--[-->an Acknowledgement of Traditional Owners message (an acknowledgement component).<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use with an optional supporting logo relevant to the site content.<!--]--></li><li><!--[-->Use a consistently-themed footer across all pages of your site.<!--]--></li><li><!--[-->Use the optional neutral theme.<!--]--></li><li><!--[-->Use with an optional image credit for the header image.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t alter the required links in the core section of the footer.<!--]--></li><li><!--[-->Don’t change the text in the acknowledgement component.<!--]--></li><li><!--[-->Don’t use with links that are not relevant to your organisation.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->You can theme the footer in 3 ways:<!--]--></p><ul><!--[--><li><!--[-->site colour palette<!--]--></li><li><!--[-->neutral colour palette<!--]--></li><li><!--[-->custom colour palette (see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a>).<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="site-colour-palette" data-v-ea525968><a href="#site-colour-palette" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Site colour palette<!--]--></a></h2><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-footer--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-footer--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><h2 class="rpl-type-h3 docs-h3" id="neutral-colour-palette" data-v-ea525968><a href="#neutral-colour-palette" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Neutral colour palette<!--]--></a></h2><p><!--[-->Implemented at a site level, the footer has predefined neutral colour values. You are unable to edit or customise these colours.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-footer--neutral&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-footer--neutral&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="custom-colour-palette" data-v-ea525968><a href="#custom-colour-palette" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Custom colour palette<!--]--></a></h2><p><!--[-->The footer has its own colour tokens. Because of this, it&#39;s possible to apply a custom theme to your footer.<!--]--></p><p><!--[-->This is only recommended as a last resort.<!--]--></p><p><!--[-->See <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->component specific theming guidance for designers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-footer--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme3;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-footer--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme3;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/footer.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/footer/_payload.json">[{"state":1,"once":624,"_errors":626,"serverRendered":629,"path":630,"prerenderedAt":631},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":311,"$sdd-globals":327,"$sdd-navigation":329},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/footer":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":306,"_id":307,"_source":308,"_file":309,"_extension":310},"/design-system/components/footer","components",false,"","Footer","The Footer component helps help users find information at the bottom of a page.","page","Core",{"type":16,"children":17,"toc":292},"root",[18,27,33,58,63,68,75,80,121,127,150,156,174,178,184,189,215,221,228,234,239,243,249,254,259,271,275],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use footers to help users find what they need after scrolling to the bottom of a page. Footers provide supplementary information such as:",{"type":19,"tag":34,"props":35,"children":36},"ul",{},[37,43,48,53],{"type":19,"tag":38,"props":39,"children":40},"li",{},[41],{"type":25,"value":42},"copyright",{"type":19,"tag":38,"props":44,"children":45},{},[46],{"type":25,"value":47},"contact information",{"type":19,"tag":38,"props":49,"children":50},{},[51],{"type":25,"value":52},"links to other pages within the website",{"type":19,"tag":38,"props":54,"children":55},{},[56],{"type":25,"value":57},"social media links.",{"type":19,"tag":28,"props":59,"children":60},{},[61],{"type":25,"value":62},"The footer must be used at the bottom of every page. It is separate from the primary navigation but is relevant to the entire site.",{"type":19,"tag":64,"props":65,"children":67},"docs-example",{"id":66},"core-navigation-footer--default-story",[],{"type":19,"tag":69,"props":70,"children":72},"h3",{"id":71},"how-this-component-works",[73],{"type":25,"value":74},"How this component works",{"type":19,"tag":28,"props":76,"children":77},{},[78],{"type":25,"value":79},"The footer is made up of:",{"type":19,"tag":34,"props":81,"children":82},{},[83,101,106,111,116],{"type":19,"tag":38,"props":84,"children":85},{},[86,88],{"type":25,"value":87},"optional section links, which help avoid dead ends by giving users a way to continue their journey through:\n",{"type":19,"tag":34,"props":89,"children":90},{},[91,96],{"type":19,"tag":38,"props":92,"children":93},{},[94],{"type":25,"value":95},"additional links (internal and external)",{"type":19,"tag":38,"props":97,"children":98},{},[99],{"type":25,"value":100},"bypassing main navigation",{"type":19,"tag":38,"props":102,"children":103},{},[104],{"type":25,"value":105},"optional social links, which can be used to link to social media accounts",{"type":19,"tag":38,"props":107,"children":108},{},[109],{"type":25,"value":110},"core site links, which must always be used and include the privacy statement, contact information and terms of use",{"type":19,"tag":38,"props":112,"children":113},{},[114],{"type":25,"value":115},"a copyright statement, which clarifies who owns the copyright and is specific to your agency or department (add the State Government of Victoria logo to vic.gov.au services, for sitewide consistency)",{"type":19,"tag":38,"props":117,"children":118},{},[119],{"type":25,"value":120},"an Acknowledgement of Traditional Owners message (an acknowledgement component).",{"type":19,"tag":69,"props":122,"children":124},{"id":123},"when-and-how-to-use",[125],{"type":25,"value":126},"When and how to use",{"type":19,"tag":34,"props":128,"children":129},{},[130,135,140,145],{"type":19,"tag":38,"props":131,"children":132},{},[133],{"type":25,"value":134},"Use with an optional supporting logo relevant to the site content.",{"type":19,"tag":38,"props":136,"children":137},{},[138],{"type":25,"value":139},"Use a consistently-themed footer across all pages of your site.",{"type":19,"tag":38,"props":141,"children":142},{},[143],{"type":25,"value":144},"Use the optional neutral theme.",{"type":19,"tag":38,"props":146,"children":147},{},[148],{"type":25,"value":149},"Use with an optional image credit for the header image.",{"type":19,"tag":69,"props":151,"children":153},{"id":152},"when-and-how-not-to-use",[154],{"type":25,"value":155},"When and how not to use",{"type":19,"tag":34,"props":157,"children":158},{},[159,164,169],{"type":19,"tag":38,"props":160,"children":161},{},[162],{"type":25,"value":163},"Don’t alter the required links in the core section of the footer.",{"type":19,"tag":38,"props":165,"children":166},{},[167],{"type":25,"value":168},"Don’t change the text in the acknowledgement component.",{"type":19,"tag":38,"props":170,"children":171},{},[172],{"type":25,"value":173},"Don’t use with links that are not relevant to your organisation.",{"type":19,"tag":175,"props":176,"children":177},"hr",{},[],{"type":19,"tag":20,"props":179,"children":181},{"id":180},"theming",[182],{"type":25,"value":183},"Theming",{"type":19,"tag":28,"props":185,"children":186},{},[187],{"type":25,"value":188},"You can theme the footer in 3 ways:",{"type":19,"tag":34,"props":190,"children":191},{},[192,197,202],{"type":19,"tag":38,"props":193,"children":194},{},[195],{"type":25,"value":196},"site colour palette",{"type":19,"tag":38,"props":198,"children":199},{},[200],{"type":25,"value":201},"neutral colour palette",{"type":19,"tag":38,"props":203,"children":204},{},[205,207,213],{"type":25,"value":206},"custom colour palette (see ",{"type":19,"tag":208,"props":209,"children":210},"a",{"href":10},[211],{"type":25,"value":212},"theming guidance for designers",{"type":25,"value":214},").",{"type":19,"tag":69,"props":216,"children":218},{"id":217},"site-colour-palette",[219],{"type":25,"value":220},"Site colour palette",{"type":19,"tag":222,"props":223,"children":224},"docs-theme-chooser",{},[225],{"type":19,"tag":64,"props":226,"children":227},{"id":66},[],{"type":19,"tag":69,"props":229,"children":231},{"id":230},"neutral-colour-palette",[232],{"type":25,"value":233},"Neutral colour palette",{"type":19,"tag":28,"props":235,"children":236},{},[237],{"type":25,"value":238},"Implemented at a site level, the footer has predefined neutral colour values. You are unable to edit or customise these colours.",{"type":19,"tag":64,"props":240,"children":242},{"id":241},"core-navigation-footer--neutral",[],{"type":19,"tag":69,"props":244,"children":246},{"id":245},"custom-colour-palette",[247],{"type":25,"value":248},"Custom colour palette",{"type":19,"tag":28,"props":250,"children":251},{},[252],{"type":25,"value":253},"The footer has its own colour tokens. Because of this, it's possible to apply a custom theme to your footer.",{"type":19,"tag":28,"props":255,"children":256},{},[257],{"type":25,"value":258},"This is only recommended as a last resort.",{"type":19,"tag":28,"props":260,"children":261},{},[262,264,269],{"type":25,"value":263},"See ",{"type":19,"tag":208,"props":265,"children":266},{"href":10},[267],{"type":25,"value":268},"component specific theming guidance for designers",{"type":25,"value":270},".",{"type":19,"tag":64,"props":272,"children":274},{"id":66,"theme":273},"docsTheme3",[],{"type":19,"tag":28,"props":276,"children":277},{},[278,280,284,286,291],{"type":25,"value":279},"To create your own theme, see ",{"type":19,"tag":208,"props":281,"children":282},{"href":10},[283],{"type":25,"value":212},{"type":25,"value":285}," or ",{"type":19,"tag":208,"props":287,"children":288},{"href":10},[289],{"type":25,"value":290},"theming guidance for developers",{"type":25,"value":270},{"title":10,"searchDepth":293,"depth":293,"links":294},2,[295,301],{"id":22,"depth":293,"text":26,"children":296},[297,299,300],{"id":71,"depth":298,"text":74},3,{"id":123,"depth":298,"text":126},{"id":152,"depth":298,"text":155},{"id":180,"depth":293,"text":183,"children":302},[303,304,305],{"id":217,"depth":298,"text":220},{"id":230,"depth":298,"text":233},{"id":245,"depth":298,"text":248},"markdown","content:design-system:5.components:footer.md","content","design-system/5.components/footer.md","md",["ShallowRef",312],["ShallowReactive",313],{"/design-system/components/footer":314},[315,321],{"_path":316,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":317,"description":318,"layout":13,"label":14,"_type":306,"_id":319,"_source":308,"_file":320,"_extension":310},"/design-system/components/file","File","The File component shows a link, with additional metadata, and lets a user download a file attachment.","content:design-system:5.components:file.md","design-system/5.components/file.md",{"_path":322,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":323,"description":324,"layout":13,"label":14,"_type":306,"_id":325,"_source":308,"_file":326,"_extension":310},"/design-system/components/form-alert","Form alert","The Form alert component shows the user the outcome of a form submission or validation.","content:design-system:5.components:form-alert.md","design-system/5.components/form-alert.md",["ShallowRef",328],{},[330,335,576],{"title":331,"_path":332,"icon":333,"layout":334},"Ripple Design System","/","carbon:home","home",{"title":336,"_path":337,"children":338},"Design System","/design-system",[339,355,371,400,434],{"title":340,"_path":341,"children":342},"About","/design-system/about",[343,346,349,352],{"title":344,"_path":345,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":347,"_path":348,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":350,"_path":351,"layout":13},"Support","/design-system/about/getting-support",{"title":353,"_path":354,"layout":13},"Contributing","/design-system/about/contributing",{"title":356,"_path":357,"children":358},"Design","/design-system/design",[359,362,365,368],{"title":360,"_path":361,"layout":13},"Getting started","/design-system/design/getting-started",{"title":363,"_path":364,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":366,"_path":367,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":369,"_path":370,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":372,"_path":373,"children":374},"Develop","/design-system/develop",[375,377,379,382],{"title":360,"_path":376,"layout":13},"/design-system/develop/getting-started",{"title":353,"_path":378,"layout":13},"/design-system/develop/contributing",{"title":380,"_path":381,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":383,"children":384,"layout":13},"/design-system/develop/usage",[385,388,391,394,397],{"title":386,"_path":387,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":389,"_path":390,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":392,"_path":393,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":395,"_path":396,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":398,"_path":399,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":401,"_path":402,"children":403},"Styles","/design-system/styles",[404,407,410,413,416,419,422,425,428,431],{"title":405,"_path":406,"layout":13},"Colour","/design-system/styles/colour",{"title":408,"_path":409,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":411,"_path":412,"layout":13},"Grid","/design-system/styles/grid",{"title":414,"_path":415,"layout":13},"Icons","/design-system/styles/icons",{"title":417,"_path":418,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":420,"_path":421,"layout":13},"Layout","/design-system/styles/layout",{"title":423,"_path":424,"layout":13},"Logo","/design-system/styles/logo",{"title":426,"_path":427,"layout":13},"Motion","/design-system/styles/motion",{"title":429,"_path":430,"layout":13},"Spacing","/design-system/styles/spacing",{"title":432,"_path":433,"layout":13},"Typography","/design-system/styles/typography",{"title":435,"_path":436,"children":437},"Components","/design-system/components",[438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,493,494,497,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543,546,549,552,555,558,561,564,567,570,573],{"title":439,"_path":440,"layout":13},"Accordion","/design-system/components/accordion",{"title":442,"_path":443,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":445,"_path":446,"layout":13},"Alert","/design-system/components/alert",{"title":448,"_path":449,"layout":13},"Block quote","/design-system/components/block-quote",{"title":451,"_path":452,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":454,"_path":455,"layout":13},"Button","/design-system/components/button",{"title":457,"_path":458,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":460,"_path":461,"layout":13},"Callout","/design-system/components/callout",{"title":463,"_path":464,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":466,"_path":467,"layout":13},"Card","/design-system/components/card",{"title":469,"_path":470,"layout":13},"Carousel","/design-system/components/carousel",{"title":472,"_path":473,"layout":13},"Category grid","/design-system/components/category-grid",{"title":475,"_path":476,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":478,"_path":479,"layout":13},"Chip","/design-system/components/chip",{"title":481,"_path":482,"layout":13},"Contact us","/design-system/components/contact-us",{"title":484,"_path":485,"layout":13},"Date input","/design-system/components/date-input",{"title":487,"_path":488,"layout":13},"Detail list","/design-system/components/detail-list",{"title":490,"_path":491,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":317,"_path":316,"layout":13},{"title":11,"_path":7,"layout":13},{"title":495,"_path":496,"layout":13},"Form","/design-system/components/form",{"title":323,"_path":322,"layout":13},{"title":499,"_path":500,"layout":13},"Header","/design-system/components/header",{"title":502,"_path":503,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":505,"_path":506,"layout":13},"Input field","/design-system/components/input-field",{"title":508,"_path":509,"layout":13},"Key dates","/design-system/components/key-dates",{"title":511,"_path":512,"layout":13},"Media","/design-system/components/media",{"title":514,"_path":515,"layout":13},"Media embed","/design-system/components/media-embed",{"title":517,"_path":518,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":520,"_path":521,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":523,"_path":524,"layout":13},"Option button","/design-system/components/option-button",{"title":526,"_path":527,"layout":13},"Page action","/design-system/components/page-action",{"title":529,"_path":530,"layout":13},"Pagination","/design-system/components/pagination",{"title":532,"_path":533,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":535,"_path":536,"layout":13},"Profile","/design-system/components/profile",{"title":538,"_path":539,"layout":13},"Radio button","/design-system/components/radio-button",{"title":541,"_path":542,"layout":13},"Related links","/design-system/components/related-links",{"title":544,"_path":545,"layout":13},"Results listing","/design-system/components/results-listing",{"title":547,"_path":548,"layout":13},"Search bar","/design-system/components/search-bar",{"title":550,"_path":551,"layout":13},"Skip link","/design-system/components/skip-link",{"title":553,"_path":554,"layout":13},"Social share","/design-system/components/social-share",{"title":556,"_path":557,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":559,"_path":560,"layout":13},"Table","/design-system/components/table",{"title":562,"_path":563,"layout":13},"Tabs","/design-system/components/tabs",{"title":565,"_path":566,"layout":13},"Tag","/design-system/components/tag",{"title":568,"_path":569,"layout":13},"Text area","/design-system/components/text-area",{"title":571,"_path":572,"layout":13},"Timeline","/design-system/components/timeline",{"title":574,"_path":575,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":577,"_path":578,"children":579,"layout":13},"Ripple Framework","/framework",[580,581,599,621],{"title":577,"_path":578,"layout":13},{"title":582,"_path":583,"children":584},"Key Concepts","/framework/key-concepts",[585,587,590,593,596],{"title":392,"_path":586,"layout":13},"/framework/key-concepts/nuxt",{"title":588,"_path":589,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":591,"_path":592,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":594,"_path":595,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":597,"_path":598,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":600,"_path":601,"children":602},"Guides","/framework/guides",[603,606,609,612,615,618],{"title":604,"_path":605,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":607,"_path":608,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":610,"_path":611,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":613,"_path":614,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":616,"_path":617,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":619,"_path":620,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":622,"_path":623,"layout":13},"Core modules","/framework/core-modules",["Reactive",625],["Set"],["Reactive",627],{"module-navigation":628},null,true,"/design-system/components/footer/",1714695653946]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/form-alert/_payload.json b/design-system/components/form-alert/_payload.json
index 8f4f51703c..d6f6c85491 100644
--- a/design-system/components/form-alert/_payload.json
+++ b/design-system/components/form-alert/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":104,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695153678]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":104,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695651851]
\ No newline at end of file
diff --git a/design-system/components/form-alert/index.html b/design-system/components/form-alert/index.html
index b0f0becc2c..79f3f3ea5e 100644
--- a/design-system/components/form-alert/index.html
+++ b/design-system/components/form-alert/index.html
@@ -27,62 +27,62 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.CwUV-MIb.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.gK7ORMEc.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -94,8 +94,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Form alert</h1><p class="rpl-type-p-large" data-v-3163c6df>The Form alert component shows the user the outcome of a form submission or validation.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a form alert to tell the user if a form has been submitted, or if there were errors in the form that prevented submission.<!--]--></p><p><!--[-->The form alert appears at the top of the form and the user is automatically scrolled to it on submission.<!--]--></p><p><!--[-->There are 2 types of alerts:<!--]--></p><ul><!--[--><li><!--[-->success<!--]--></li><li><!--[-->error.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-form-alert--error&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-form-alert--error&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Show the validation outcome of a form submission.<!--]--></li><li><!--[-->If successful, use with relevant success message.<!--]--></li><li><!--[-->Write error messages for the alert summary exactly the same way they are worded for inline error messages (next to the inputs with the errors).<!--]--></li><li><!--[-->Include a custom error summary if required.<!--]--></li><li><!--[-->Make your error messages clear and concise.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Do not use the form alert without providing a summary of errors (if a submission is invalid).<!--]--></li><li><!--[-->Do not restyle with other colours or icons.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->Form alert has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->success<!--]--></li><li><!--[-->error.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="success" data-v-ea525968><a href="#success" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Success<!--]--></a></h2><p><!--[-->Success alerts tell users their form submissions worked. They are always static and stay until a user moves away from that page or view.<!--]--></p><p><!--[-->To help screen reader and other users notice it, ensure that on submission the focus is moved to the alert.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-form-alert--success&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-form-alert--success&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="error" data-v-ea525968><a href="#error" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Error<!--]--></a></h2><p><!--[-->If one or more form validation errors occur, they must always be presented using:<!--]--></p><ul><!--[--><li><!--[-->the error summary alert<!--]--></li><li><!--[-->individual error messages next to each form field with an error (inline).<!--]--></li><!--]--></ul><p><!--[-->Make your error messages clear and concise.<!--]--></p><p><!--[-->Error summary alerts tell the user everything they need to fix before they can submit the form. This goes above the form.<!--]--></p><p><!--[-->Inline error messages show a user where the errors happened.<!--]--></p><p><!--[-->On submission of the form, you must:<!--]--></p><ul><!--[--><li><!--[-->move the keyboard focus to the error summary<!--]--></li><li><!--[-->include the heading ‘There is a problem’ in the error summary<!--]--></li><li><!--[-->link to all answers with validation errors<!--]--></li><li><!--[-->write error messages for the summary alert exactly the same way they are worded for inline error messages.<!--]--></li><!--]--></ul><p><!--[-->As well as showing an error summary, follow the validation pattern. For example, add, ‘Error: ’ to the start of the page &lt;title&gt; so screen readers read it out as soon as possible.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="linking-from-the-error-summary-to-each-answer"><!--[-->Linking from the error summary to each answer<!--]--></h4><p><!--[-->Each error must be linked in the error summary to the form field (answer) causing it.<!--]--></p><p><!--[-->For questions where the user could choose one or more options as an answer, link to the first radio or checkbox field instead.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-form-alert--error&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-form-alert--error&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="error-messages"><!--[-->Error messages<!--]--></h4><p><!--[-->Specific error messages must be provided for specific error states. Style your error messages as directed by the ‘Error’ section on the pages for the following form components:<!--]--></p><ul><!--[--><li><!--[--><a href="/design-system/components/input-field/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->input field<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/text-area/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->text area<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/date-input/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->date input<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/checkbox/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->checkbox<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/radio-button/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->radio button<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/dropdown/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->dropdown<!--]--><!--]--><!----><!--]--></a>.<!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/form-alert.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/form-alert/_payload.json">[{"state":1,"once":654,"_errors":656,"serverRendered":659,"path":660,"prerenderedAt":661},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":341,"$sdd-globals":357,"$sdd-navigation":359},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/form-alert":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":336,"_id":337,"_source":338,"_file":339,"_extension":340},"/design-system/components/form-alert","components",false,"","Form alert","The Form alert component shows the user the outcome of a form submission or validation.","page","Core",{"type":16,"children":17,"toc":324},"root",[18,27,33,38,43,58,63,70,98,104,117,121,127,132,143,148,153,158,162,168,173,186,190,195,200,205,228,233,240,245,250,253,259,264],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use a form alert to tell the user if a form has been submitted, or if there were errors in the form that prevented submission.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"The form alert appears at the top of the form and the user is automatically scrolled to it on submission.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"There are 2 types of alerts:",{"type":19,"tag":44,"props":45,"children":46},"ul",{},[47,53],{"type":19,"tag":48,"props":49,"children":50},"li",{},[51],{"type":25,"value":52},"success",{"type":19,"tag":48,"props":54,"children":55},{},[56],{"type":25,"value":57},"error.",{"type":19,"tag":59,"props":60,"children":62},"docs-example",{"id":61},"forms-form-alert--error",[],{"type":19,"tag":64,"props":65,"children":67},"h3",{"id":66},"when-and-how-to-use",[68],{"type":25,"value":69},"When and how to use",{"type":19,"tag":44,"props":71,"children":72},{},[73,78,83,88,93],{"type":19,"tag":48,"props":74,"children":75},{},[76],{"type":25,"value":77},"Show the validation outcome of a form submission.",{"type":19,"tag":48,"props":79,"children":80},{},[81],{"type":25,"value":82},"If successful, use with relevant success message.",{"type":19,"tag":48,"props":84,"children":85},{},[86],{"type":25,"value":87},"Write error messages for the alert summary exactly the same way they are worded for inline error messages (next to the inputs with the errors).",{"type":19,"tag":48,"props":89,"children":90},{},[91],{"type":25,"value":92},"Include a custom error summary if required.",{"type":19,"tag":48,"props":94,"children":95},{},[96],{"type":25,"value":97},"Make your error messages clear and concise.",{"type":19,"tag":64,"props":99,"children":101},{"id":100},"when-and-how-not-to-use",[102],{"type":25,"value":103},"When and how not to use",{"type":19,"tag":44,"props":105,"children":106},{},[107,112],{"type":19,"tag":48,"props":108,"children":109},{},[110],{"type":25,"value":111},"Do not use the form alert without providing a summary of errors (if a submission is invalid).",{"type":19,"tag":48,"props":113,"children":114},{},[115],{"type":25,"value":116},"Do not restyle with other colours or icons.",{"type":19,"tag":118,"props":119,"children":120},"hr",{},[],{"type":19,"tag":20,"props":122,"children":124},{"id":123},"variants",[125],{"type":25,"value":126},"Variants",{"type":19,"tag":28,"props":128,"children":129},{},[130],{"type":25,"value":131},"Form alert has 2 variants:",{"type":19,"tag":44,"props":133,"children":134},{},[135,139],{"type":19,"tag":48,"props":136,"children":137},{},[138],{"type":25,"value":52},{"type":19,"tag":48,"props":140,"children":141},{},[142],{"type":25,"value":57},{"type":19,"tag":64,"props":144,"children":145},{"id":52},[146],{"type":25,"value":147},"Success",{"type":19,"tag":28,"props":149,"children":150},{},[151],{"type":25,"value":152},"Success alerts tell users their form submissions worked. They are always static and stay until a user moves away from that page or view.",{"type":19,"tag":28,"props":154,"children":155},{},[156],{"type":25,"value":157},"To help screen reader and other users notice it, ensure that on submission the focus is moved to the alert.",{"type":19,"tag":59,"props":159,"children":161},{"id":160},"forms-form-alert--success",[],{"type":19,"tag":64,"props":163,"children":165},{"id":164},"error",[166],{"type":25,"value":167},"Error",{"type":19,"tag":28,"props":169,"children":170},{},[171],{"type":25,"value":172},"If one or more form validation errors occur, they must always be presented using:",{"type":19,"tag":44,"props":174,"children":175},{},[176,181],{"type":19,"tag":48,"props":177,"children":178},{},[179],{"type":25,"value":180},"the error summary alert",{"type":19,"tag":48,"props":182,"children":183},{},[184],{"type":25,"value":185},"individual error messages next to each form field with an error (inline).",{"type":19,"tag":28,"props":187,"children":188},{},[189],{"type":25,"value":97},{"type":19,"tag":28,"props":191,"children":192},{},[193],{"type":25,"value":194},"Error summary alerts tell the user everything they need to fix before they can submit the form. This goes above the form.",{"type":19,"tag":28,"props":196,"children":197},{},[198],{"type":25,"value":199},"Inline error messages show a user where the errors happened.",{"type":19,"tag":28,"props":201,"children":202},{},[203],{"type":25,"value":204},"On submission of the form, you must:",{"type":19,"tag":44,"props":206,"children":207},{},[208,213,218,223],{"type":19,"tag":48,"props":209,"children":210},{},[211],{"type":25,"value":212},"move the keyboard focus to the error summary",{"type":19,"tag":48,"props":214,"children":215},{},[216],{"type":25,"value":217},"include the heading ‘There is a problem’ in the error summary",{"type":19,"tag":48,"props":219,"children":220},{},[221],{"type":25,"value":222},"link to all answers with validation errors",{"type":19,"tag":48,"props":224,"children":225},{},[226],{"type":25,"value":227},"write error messages for the summary alert exactly the same way they are worded for inline error messages.",{"type":19,"tag":28,"props":229,"children":230},{},[231],{"type":25,"value":232},"As well as showing an error summary, follow the validation pattern. For example, add, ‘Error: ’ to the start of the page \u003Ctitle> so screen readers read it out as soon as possible.",{"type":19,"tag":234,"props":235,"children":237},"h4",{"id":236},"linking-from-the-error-summary-to-each-answer",[238],{"type":25,"value":239},"Linking from the error summary to each answer",{"type":19,"tag":28,"props":241,"children":242},{},[243],{"type":25,"value":244},"Each error must be linked in the error summary to the form field (answer) causing it.",{"type":19,"tag":28,"props":246,"children":247},{},[248],{"type":25,"value":249},"For questions where the user could choose one or more options as an answer, link to the first radio or checkbox field instead.",{"type":19,"tag":59,"props":251,"children":252},{"id":61},[],{"type":19,"tag":234,"props":254,"children":256},{"id":255},"error-messages",[257],{"type":25,"value":258},"Error messages",{"type":19,"tag":28,"props":260,"children":261},{},[262],{"type":25,"value":263},"Specific error messages must be provided for specific error states. Style your error messages as directed by the ‘Error’ section on the pages for the following form components:",{"type":19,"tag":44,"props":265,"children":266},{},[267,277,286,295,304,313],{"type":19,"tag":48,"props":268,"children":269},{},[270],{"type":19,"tag":271,"props":272,"children":274},"a",{"href":273},"/design-system/components/input-field/",[275],{"type":25,"value":276},"input field",{"type":19,"tag":48,"props":278,"children":279},{},[280],{"type":19,"tag":271,"props":281,"children":283},{"href":282},"/design-system/components/text-area/",[284],{"type":25,"value":285},"text area",{"type":19,"tag":48,"props":287,"children":288},{},[289],{"type":19,"tag":271,"props":290,"children":292},{"href":291},"/design-system/components/date-input/",[293],{"type":25,"value":294},"date input",{"type":19,"tag":48,"props":296,"children":297},{},[298],{"type":19,"tag":271,"props":299,"children":301},{"href":300},"/design-system/components/checkbox/",[302],{"type":25,"value":303},"checkbox",{"type":19,"tag":48,"props":305,"children":306},{},[307],{"type":19,"tag":271,"props":308,"children":310},{"href":309},"/design-system/components/radio-button/",[311],{"type":25,"value":312},"radio button",{"type":19,"tag":48,"props":314,"children":315},{},[316,322],{"type":19,"tag":271,"props":317,"children":319},{"href":318},"/design-system/components/dropdown/",[320],{"type":25,"value":321},"dropdown",{"type":25,"value":323},".",{"title":10,"searchDepth":325,"depth":325,"links":326},2,[327,332],{"id":22,"depth":325,"text":26,"children":328},[329,331],{"id":66,"depth":330,"text":69},3,{"id":100,"depth":330,"text":103},{"id":123,"depth":325,"text":126,"children":333},[334,335],{"id":52,"depth":330,"text":147},{"id":164,"depth":330,"text":167},"markdown","content:design-system:5.components:form-alert.md","content","design-system/5.components/form-alert.md","md",["ShallowRef",342],["ShallowReactive",343],{"/design-system/components/form-alert":344},[345,351],{"_path":346,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":347,"description":348,"layout":13,"label":14,"_type":336,"_id":349,"_source":338,"_file":350,"_extension":340},"/design-system/components/footer","Footer","The Footer component helps help users find information at the bottom of a page.","content:design-system:5.components:footer.md","design-system/5.components/footer.md",{"_path":352,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":353,"description":354,"layout":13,"label":14,"_type":336,"_id":355,"_source":338,"_file":356,"_extension":340},"/design-system/components/form","Form","The Form component guides users to give information and consists of a group of related inputs or controls.","content:design-system:5.components:form.md","design-system/5.components/form.md",["ShallowRef",358],{},[360,365,606],{"title":361,"_path":362,"icon":363,"layout":364},"Ripple Design System","/","carbon:home","home",{"title":366,"_path":367,"children":368},"Design System","/design-system",[369,385,401,430,464],{"title":370,"_path":371,"children":372},"About","/design-system/about",[373,376,379,382],{"title":374,"_path":375,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":377,"_path":378,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":380,"_path":381,"layout":13},"Support","/design-system/about/getting-support",{"title":383,"_path":384,"layout":13},"Contributing","/design-system/about/contributing",{"title":386,"_path":387,"children":388},"Design","/design-system/design",[389,392,395,398],{"title":390,"_path":391,"layout":13},"Getting started","/design-system/design/getting-started",{"title":393,"_path":394,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":396,"_path":397,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":399,"_path":400,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":402,"_path":403,"children":404},"Develop","/design-system/develop",[405,407,409,412],{"title":390,"_path":406,"layout":13},"/design-system/develop/getting-started",{"title":383,"_path":408,"layout":13},"/design-system/develop/contributing",{"title":410,"_path":411,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":413,"children":414,"layout":13},"/design-system/develop/usage",[415,418,421,424,427],{"title":416,"_path":417,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":419,"_path":420,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":422,"_path":423,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":425,"_path":426,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":428,"_path":429,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":431,"_path":432,"children":433},"Styles","/design-system/styles",[434,437,440,443,446,449,452,455,458,461],{"title":435,"_path":436,"layout":13},"Colour","/design-system/styles/colour",{"title":438,"_path":439,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":441,"_path":442,"layout":13},"Grid","/design-system/styles/grid",{"title":444,"_path":445,"layout":13},"Icons","/design-system/styles/icons",{"title":447,"_path":448,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":450,"_path":451,"layout":13},"Layout","/design-system/styles/layout",{"title":453,"_path":454,"layout":13},"Logo","/design-system/styles/logo",{"title":456,"_path":457,"layout":13},"Motion","/design-system/styles/motion",{"title":459,"_path":460,"layout":13},"Spacing","/design-system/styles/spacing",{"title":462,"_path":463,"layout":13},"Typography","/design-system/styles/typography",{"title":465,"_path":466,"children":467},"Components","/design-system/components",[468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,526,527,528,531,534,537,540,543,546,549,552,555,558,561,564,567,570,573,576,579,582,585,588,591,594,597,600,603],{"title":469,"_path":470,"layout":13},"Accordion","/design-system/components/accordion",{"title":472,"_path":473,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":475,"_path":476,"layout":13},"Alert","/design-system/components/alert",{"title":478,"_path":479,"layout":13},"Block quote","/design-system/components/block-quote",{"title":481,"_path":482,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":484,"_path":485,"layout":13},"Button","/design-system/components/button",{"title":487,"_path":488,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":490,"_path":491,"layout":13},"Callout","/design-system/components/callout",{"title":493,"_path":494,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":496,"_path":497,"layout":13},"Card","/design-system/components/card",{"title":499,"_path":500,"layout":13},"Carousel","/design-system/components/carousel",{"title":502,"_path":503,"layout":13},"Category grid","/design-system/components/category-grid",{"title":505,"_path":506,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":508,"_path":509,"layout":13},"Chip","/design-system/components/chip",{"title":511,"_path":512,"layout":13},"Contact us","/design-system/components/contact-us",{"title":514,"_path":515,"layout":13},"Date input","/design-system/components/date-input",{"title":517,"_path":518,"layout":13},"Detail list","/design-system/components/detail-list",{"title":520,"_path":521,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":523,"_path":524,"layout":13},"File","/design-system/components/file",{"title":347,"_path":346,"layout":13},{"title":353,"_path":352,"layout":13},{"title":11,"_path":7,"layout":13},{"title":529,"_path":530,"layout":13},"Header","/design-system/components/header",{"title":532,"_path":533,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":535,"_path":536,"layout":13},"Input field","/design-system/components/input-field",{"title":538,"_path":539,"layout":13},"Key dates","/design-system/components/key-dates",{"title":541,"_path":542,"layout":13},"Media","/design-system/components/media",{"title":544,"_path":545,"layout":13},"Media embed","/design-system/components/media-embed",{"title":547,"_path":548,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":550,"_path":551,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":553,"_path":554,"layout":13},"Option button","/design-system/components/option-button",{"title":556,"_path":557,"layout":13},"Page action","/design-system/components/page-action",{"title":559,"_path":560,"layout":13},"Pagination","/design-system/components/pagination",{"title":562,"_path":563,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":565,"_path":566,"layout":13},"Profile","/design-system/components/profile",{"title":568,"_path":569,"layout":13},"Radio button","/design-system/components/radio-button",{"title":571,"_path":572,"layout":13},"Related links","/design-system/components/related-links",{"title":574,"_path":575,"layout":13},"Results listing","/design-system/components/results-listing",{"title":577,"_path":578,"layout":13},"Search bar","/design-system/components/search-bar",{"title":580,"_path":581,"layout":13},"Skip link","/design-system/components/skip-link",{"title":583,"_path":584,"layout":13},"Social share","/design-system/components/social-share",{"title":586,"_path":587,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":589,"_path":590,"layout":13},"Table","/design-system/components/table",{"title":592,"_path":593,"layout":13},"Tabs","/design-system/components/tabs",{"title":595,"_path":596,"layout":13},"Tag","/design-system/components/tag",{"title":598,"_path":599,"layout":13},"Text area","/design-system/components/text-area",{"title":601,"_path":602,"layout":13},"Timeline","/design-system/components/timeline",{"title":604,"_path":605,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":607,"_path":608,"children":609,"layout":13},"Ripple Framework","/framework",[610,611,629,651],{"title":607,"_path":608,"layout":13},{"title":612,"_path":613,"children":614},"Key Concepts","/framework/key-concepts",[615,617,620,623,626],{"title":422,"_path":616,"layout":13},"/framework/key-concepts/nuxt",{"title":618,"_path":619,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":621,"_path":622,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":624,"_path":625,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":627,"_path":628,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":630,"_path":631,"children":632},"Guides","/framework/guides",[633,636,639,642,645,648],{"title":634,"_path":635,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":637,"_path":638,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":640,"_path":641,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":643,"_path":644,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":646,"_path":647,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":649,"_path":650,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":652,"_path":653,"layout":13},"Core modules","/framework/core-modules",["Reactive",655],["Set"],["Reactive",657],{"module-navigation":658},null,true,"/design-system/components/form-alert/",1714695156432]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Form alert</h1><p class="rpl-type-p-large" data-v-3163c6df>The Form alert component shows the user the outcome of a form submission or validation.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a form alert to tell the user if a form has been submitted, or if there were errors in the form that prevented submission.<!--]--></p><p><!--[-->The form alert appears at the top of the form and the user is automatically scrolled to it on submission.<!--]--></p><p><!--[-->There are 2 types of alerts:<!--]--></p><ul><!--[--><li><!--[-->success<!--]--></li><li><!--[-->error.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-form-alert--error&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-form-alert--error&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Show the validation outcome of a form submission.<!--]--></li><li><!--[-->If successful, use with relevant success message.<!--]--></li><li><!--[-->Write error messages for the alert summary exactly the same way they are worded for inline error messages (next to the inputs with the errors).<!--]--></li><li><!--[-->Include a custom error summary if required.<!--]--></li><li><!--[-->Make your error messages clear and concise.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Do not use the form alert without providing a summary of errors (if a submission is invalid).<!--]--></li><li><!--[-->Do not restyle with other colours or icons.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->Form alert has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->success<!--]--></li><li><!--[-->error.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="success" data-v-ea525968><a href="#success" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Success<!--]--></a></h2><p><!--[-->Success alerts tell users their form submissions worked. They are always static and stay until a user moves away from that page or view.<!--]--></p><p><!--[-->To help screen reader and other users notice it, ensure that on submission the focus is moved to the alert.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-form-alert--success&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-form-alert--success&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="error" data-v-ea525968><a href="#error" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Error<!--]--></a></h2><p><!--[-->If one or more form validation errors occur, they must always be presented using:<!--]--></p><ul><!--[--><li><!--[-->the error summary alert<!--]--></li><li><!--[-->individual error messages next to each form field with an error (inline).<!--]--></li><!--]--></ul><p><!--[-->Make your error messages clear and concise.<!--]--></p><p><!--[-->Error summary alerts tell the user everything they need to fix before they can submit the form. This goes above the form.<!--]--></p><p><!--[-->Inline error messages show a user where the errors happened.<!--]--></p><p><!--[-->On submission of the form, you must:<!--]--></p><ul><!--[--><li><!--[-->move the keyboard focus to the error summary<!--]--></li><li><!--[-->include the heading ‘There is a problem’ in the error summary<!--]--></li><li><!--[-->link to all answers with validation errors<!--]--></li><li><!--[-->write error messages for the summary alert exactly the same way they are worded for inline error messages.<!--]--></li><!--]--></ul><p><!--[-->As well as showing an error summary, follow the validation pattern. For example, add, ‘Error: ’ to the start of the page &lt;title&gt; so screen readers read it out as soon as possible.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="linking-from-the-error-summary-to-each-answer"><!--[-->Linking from the error summary to each answer<!--]--></h4><p><!--[-->Each error must be linked in the error summary to the form field (answer) causing it.<!--]--></p><p><!--[-->For questions where the user could choose one or more options as an answer, link to the first radio or checkbox field instead.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-form-alert--error&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-form-alert--error&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="error-messages"><!--[-->Error messages<!--]--></h4><p><!--[-->Specific error messages must be provided for specific error states. Style your error messages as directed by the ‘Error’ section on the pages for the following form components:<!--]--></p><ul><!--[--><li><!--[--><a href="/design-system/components/input-field/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->input field<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/text-area/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->text area<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/date-input/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->date input<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/checkbox/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->checkbox<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/radio-button/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->radio button<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/dropdown/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->dropdown<!--]--><!--]--><!----><!--]--></a>.<!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/form-alert.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/form-alert/_payload.json">[{"state":1,"once":654,"_errors":656,"serverRendered":659,"path":660,"prerenderedAt":661},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":341,"$sdd-globals":357,"$sdd-navigation":359},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/form-alert":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":336,"_id":337,"_source":338,"_file":339,"_extension":340},"/design-system/components/form-alert","components",false,"","Form alert","The Form alert component shows the user the outcome of a form submission or validation.","page","Core",{"type":16,"children":17,"toc":324},"root",[18,27,33,38,43,58,63,70,98,104,117,121,127,132,143,148,153,158,162,168,173,186,190,195,200,205,228,233,240,245,250,253,259,264],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use a form alert to tell the user if a form has been submitted, or if there were errors in the form that prevented submission.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"The form alert appears at the top of the form and the user is automatically scrolled to it on submission.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"There are 2 types of alerts:",{"type":19,"tag":44,"props":45,"children":46},"ul",{},[47,53],{"type":19,"tag":48,"props":49,"children":50},"li",{},[51],{"type":25,"value":52},"success",{"type":19,"tag":48,"props":54,"children":55},{},[56],{"type":25,"value":57},"error.",{"type":19,"tag":59,"props":60,"children":62},"docs-example",{"id":61},"forms-form-alert--error",[],{"type":19,"tag":64,"props":65,"children":67},"h3",{"id":66},"when-and-how-to-use",[68],{"type":25,"value":69},"When and how to use",{"type":19,"tag":44,"props":71,"children":72},{},[73,78,83,88,93],{"type":19,"tag":48,"props":74,"children":75},{},[76],{"type":25,"value":77},"Show the validation outcome of a form submission.",{"type":19,"tag":48,"props":79,"children":80},{},[81],{"type":25,"value":82},"If successful, use with relevant success message.",{"type":19,"tag":48,"props":84,"children":85},{},[86],{"type":25,"value":87},"Write error messages for the alert summary exactly the same way they are worded for inline error messages (next to the inputs with the errors).",{"type":19,"tag":48,"props":89,"children":90},{},[91],{"type":25,"value":92},"Include a custom error summary if required.",{"type":19,"tag":48,"props":94,"children":95},{},[96],{"type":25,"value":97},"Make your error messages clear and concise.",{"type":19,"tag":64,"props":99,"children":101},{"id":100},"when-and-how-not-to-use",[102],{"type":25,"value":103},"When and how not to use",{"type":19,"tag":44,"props":105,"children":106},{},[107,112],{"type":19,"tag":48,"props":108,"children":109},{},[110],{"type":25,"value":111},"Do not use the form alert without providing a summary of errors (if a submission is invalid).",{"type":19,"tag":48,"props":113,"children":114},{},[115],{"type":25,"value":116},"Do not restyle with other colours or icons.",{"type":19,"tag":118,"props":119,"children":120},"hr",{},[],{"type":19,"tag":20,"props":122,"children":124},{"id":123},"variants",[125],{"type":25,"value":126},"Variants",{"type":19,"tag":28,"props":128,"children":129},{},[130],{"type":25,"value":131},"Form alert has 2 variants:",{"type":19,"tag":44,"props":133,"children":134},{},[135,139],{"type":19,"tag":48,"props":136,"children":137},{},[138],{"type":25,"value":52},{"type":19,"tag":48,"props":140,"children":141},{},[142],{"type":25,"value":57},{"type":19,"tag":64,"props":144,"children":145},{"id":52},[146],{"type":25,"value":147},"Success",{"type":19,"tag":28,"props":149,"children":150},{},[151],{"type":25,"value":152},"Success alerts tell users their form submissions worked. They are always static and stay until a user moves away from that page or view.",{"type":19,"tag":28,"props":154,"children":155},{},[156],{"type":25,"value":157},"To help screen reader and other users notice it, ensure that on submission the focus is moved to the alert.",{"type":19,"tag":59,"props":159,"children":161},{"id":160},"forms-form-alert--success",[],{"type":19,"tag":64,"props":163,"children":165},{"id":164},"error",[166],{"type":25,"value":167},"Error",{"type":19,"tag":28,"props":169,"children":170},{},[171],{"type":25,"value":172},"If one or more form validation errors occur, they must always be presented using:",{"type":19,"tag":44,"props":174,"children":175},{},[176,181],{"type":19,"tag":48,"props":177,"children":178},{},[179],{"type":25,"value":180},"the error summary alert",{"type":19,"tag":48,"props":182,"children":183},{},[184],{"type":25,"value":185},"individual error messages next to each form field with an error (inline).",{"type":19,"tag":28,"props":187,"children":188},{},[189],{"type":25,"value":97},{"type":19,"tag":28,"props":191,"children":192},{},[193],{"type":25,"value":194},"Error summary alerts tell the user everything they need to fix before they can submit the form. This goes above the form.",{"type":19,"tag":28,"props":196,"children":197},{},[198],{"type":25,"value":199},"Inline error messages show a user where the errors happened.",{"type":19,"tag":28,"props":201,"children":202},{},[203],{"type":25,"value":204},"On submission of the form, you must:",{"type":19,"tag":44,"props":206,"children":207},{},[208,213,218,223],{"type":19,"tag":48,"props":209,"children":210},{},[211],{"type":25,"value":212},"move the keyboard focus to the error summary",{"type":19,"tag":48,"props":214,"children":215},{},[216],{"type":25,"value":217},"include the heading ‘There is a problem’ in the error summary",{"type":19,"tag":48,"props":219,"children":220},{},[221],{"type":25,"value":222},"link to all answers with validation errors",{"type":19,"tag":48,"props":224,"children":225},{},[226],{"type":25,"value":227},"write error messages for the summary alert exactly the same way they are worded for inline error messages.",{"type":19,"tag":28,"props":229,"children":230},{},[231],{"type":25,"value":232},"As well as showing an error summary, follow the validation pattern. For example, add, ‘Error: ’ to the start of the page \u003Ctitle> so screen readers read it out as soon as possible.",{"type":19,"tag":234,"props":235,"children":237},"h4",{"id":236},"linking-from-the-error-summary-to-each-answer",[238],{"type":25,"value":239},"Linking from the error summary to each answer",{"type":19,"tag":28,"props":241,"children":242},{},[243],{"type":25,"value":244},"Each error must be linked in the error summary to the form field (answer) causing it.",{"type":19,"tag":28,"props":246,"children":247},{},[248],{"type":25,"value":249},"For questions where the user could choose one or more options as an answer, link to the first radio or checkbox field instead.",{"type":19,"tag":59,"props":251,"children":252},{"id":61},[],{"type":19,"tag":234,"props":254,"children":256},{"id":255},"error-messages",[257],{"type":25,"value":258},"Error messages",{"type":19,"tag":28,"props":260,"children":261},{},[262],{"type":25,"value":263},"Specific error messages must be provided for specific error states. Style your error messages as directed by the ‘Error’ section on the pages for the following form components:",{"type":19,"tag":44,"props":265,"children":266},{},[267,277,286,295,304,313],{"type":19,"tag":48,"props":268,"children":269},{},[270],{"type":19,"tag":271,"props":272,"children":274},"a",{"href":273},"/design-system/components/input-field/",[275],{"type":25,"value":276},"input field",{"type":19,"tag":48,"props":278,"children":279},{},[280],{"type":19,"tag":271,"props":281,"children":283},{"href":282},"/design-system/components/text-area/",[284],{"type":25,"value":285},"text area",{"type":19,"tag":48,"props":287,"children":288},{},[289],{"type":19,"tag":271,"props":290,"children":292},{"href":291},"/design-system/components/date-input/",[293],{"type":25,"value":294},"date input",{"type":19,"tag":48,"props":296,"children":297},{},[298],{"type":19,"tag":271,"props":299,"children":301},{"href":300},"/design-system/components/checkbox/",[302],{"type":25,"value":303},"checkbox",{"type":19,"tag":48,"props":305,"children":306},{},[307],{"type":19,"tag":271,"props":308,"children":310},{"href":309},"/design-system/components/radio-button/",[311],{"type":25,"value":312},"radio button",{"type":19,"tag":48,"props":314,"children":315},{},[316,322],{"type":19,"tag":271,"props":317,"children":319},{"href":318},"/design-system/components/dropdown/",[320],{"type":25,"value":321},"dropdown",{"type":25,"value":323},".",{"title":10,"searchDepth":325,"depth":325,"links":326},2,[327,332],{"id":22,"depth":325,"text":26,"children":328},[329,331],{"id":66,"depth":330,"text":69},3,{"id":100,"depth":330,"text":103},{"id":123,"depth":325,"text":126,"children":333},[334,335],{"id":52,"depth":330,"text":147},{"id":164,"depth":330,"text":167},"markdown","content:design-system:5.components:form-alert.md","content","design-system/5.components/form-alert.md","md",["ShallowRef",342],["ShallowReactive",343],{"/design-system/components/form-alert":344},[345,351],{"_path":346,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":347,"description":348,"layout":13,"label":14,"_type":336,"_id":349,"_source":338,"_file":350,"_extension":340},"/design-system/components/footer","Footer","The Footer component helps help users find information at the bottom of a page.","content:design-system:5.components:footer.md","design-system/5.components/footer.md",{"_path":352,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":353,"description":354,"layout":13,"label":14,"_type":336,"_id":355,"_source":338,"_file":356,"_extension":340},"/design-system/components/form","Form","The Form component guides users to give information and consists of a group of related inputs or controls.","content:design-system:5.components:form.md","design-system/5.components/form.md",["ShallowRef",358],{},[360,365,606],{"title":361,"_path":362,"icon":363,"layout":364},"Ripple Design System","/","carbon:home","home",{"title":366,"_path":367,"children":368},"Design System","/design-system",[369,385,401,430,464],{"title":370,"_path":371,"children":372},"About","/design-system/about",[373,376,379,382],{"title":374,"_path":375,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":377,"_path":378,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":380,"_path":381,"layout":13},"Support","/design-system/about/getting-support",{"title":383,"_path":384,"layout":13},"Contributing","/design-system/about/contributing",{"title":386,"_path":387,"children":388},"Design","/design-system/design",[389,392,395,398],{"title":390,"_path":391,"layout":13},"Getting started","/design-system/design/getting-started",{"title":393,"_path":394,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":396,"_path":397,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":399,"_path":400,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":402,"_path":403,"children":404},"Develop","/design-system/develop",[405,407,409,412],{"title":390,"_path":406,"layout":13},"/design-system/develop/getting-started",{"title":383,"_path":408,"layout":13},"/design-system/develop/contributing",{"title":410,"_path":411,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":413,"children":414,"layout":13},"/design-system/develop/usage",[415,418,421,424,427],{"title":416,"_path":417,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":419,"_path":420,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":422,"_path":423,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":425,"_path":426,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":428,"_path":429,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":431,"_path":432,"children":433},"Styles","/design-system/styles",[434,437,440,443,446,449,452,455,458,461],{"title":435,"_path":436,"layout":13},"Colour","/design-system/styles/colour",{"title":438,"_path":439,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":441,"_path":442,"layout":13},"Grid","/design-system/styles/grid",{"title":444,"_path":445,"layout":13},"Icons","/design-system/styles/icons",{"title":447,"_path":448,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":450,"_path":451,"layout":13},"Layout","/design-system/styles/layout",{"title":453,"_path":454,"layout":13},"Logo","/design-system/styles/logo",{"title":456,"_path":457,"layout":13},"Motion","/design-system/styles/motion",{"title":459,"_path":460,"layout":13},"Spacing","/design-system/styles/spacing",{"title":462,"_path":463,"layout":13},"Typography","/design-system/styles/typography",{"title":465,"_path":466,"children":467},"Components","/design-system/components",[468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,526,527,528,531,534,537,540,543,546,549,552,555,558,561,564,567,570,573,576,579,582,585,588,591,594,597,600,603],{"title":469,"_path":470,"layout":13},"Accordion","/design-system/components/accordion",{"title":472,"_path":473,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":475,"_path":476,"layout":13},"Alert","/design-system/components/alert",{"title":478,"_path":479,"layout":13},"Block quote","/design-system/components/block-quote",{"title":481,"_path":482,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":484,"_path":485,"layout":13},"Button","/design-system/components/button",{"title":487,"_path":488,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":490,"_path":491,"layout":13},"Callout","/design-system/components/callout",{"title":493,"_path":494,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":496,"_path":497,"layout":13},"Card","/design-system/components/card",{"title":499,"_path":500,"layout":13},"Carousel","/design-system/components/carousel",{"title":502,"_path":503,"layout":13},"Category grid","/design-system/components/category-grid",{"title":505,"_path":506,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":508,"_path":509,"layout":13},"Chip","/design-system/components/chip",{"title":511,"_path":512,"layout":13},"Contact us","/design-system/components/contact-us",{"title":514,"_path":515,"layout":13},"Date input","/design-system/components/date-input",{"title":517,"_path":518,"layout":13},"Detail list","/design-system/components/detail-list",{"title":520,"_path":521,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":523,"_path":524,"layout":13},"File","/design-system/components/file",{"title":347,"_path":346,"layout":13},{"title":353,"_path":352,"layout":13},{"title":11,"_path":7,"layout":13},{"title":529,"_path":530,"layout":13},"Header","/design-system/components/header",{"title":532,"_path":533,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":535,"_path":536,"layout":13},"Input field","/design-system/components/input-field",{"title":538,"_path":539,"layout":13},"Key dates","/design-system/components/key-dates",{"title":541,"_path":542,"layout":13},"Media","/design-system/components/media",{"title":544,"_path":545,"layout":13},"Media embed","/design-system/components/media-embed",{"title":547,"_path":548,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":550,"_path":551,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":553,"_path":554,"layout":13},"Option button","/design-system/components/option-button",{"title":556,"_path":557,"layout":13},"Page action","/design-system/components/page-action",{"title":559,"_path":560,"layout":13},"Pagination","/design-system/components/pagination",{"title":562,"_path":563,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":565,"_path":566,"layout":13},"Profile","/design-system/components/profile",{"title":568,"_path":569,"layout":13},"Radio button","/design-system/components/radio-button",{"title":571,"_path":572,"layout":13},"Related links","/design-system/components/related-links",{"title":574,"_path":575,"layout":13},"Results listing","/design-system/components/results-listing",{"title":577,"_path":578,"layout":13},"Search bar","/design-system/components/search-bar",{"title":580,"_path":581,"layout":13},"Skip link","/design-system/components/skip-link",{"title":583,"_path":584,"layout":13},"Social share","/design-system/components/social-share",{"title":586,"_path":587,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":589,"_path":590,"layout":13},"Table","/design-system/components/table",{"title":592,"_path":593,"layout":13},"Tabs","/design-system/components/tabs",{"title":595,"_path":596,"layout":13},"Tag","/design-system/components/tag",{"title":598,"_path":599,"layout":13},"Text area","/design-system/components/text-area",{"title":601,"_path":602,"layout":13},"Timeline","/design-system/components/timeline",{"title":604,"_path":605,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":607,"_path":608,"children":609,"layout":13},"Ripple Framework","/framework",[610,611,629,651],{"title":607,"_path":608,"layout":13},{"title":612,"_path":613,"children":614},"Key Concepts","/framework/key-concepts",[615,617,620,623,626],{"title":422,"_path":616,"layout":13},"/framework/key-concepts/nuxt",{"title":618,"_path":619,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":621,"_path":622,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":624,"_path":625,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":627,"_path":628,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":630,"_path":631,"children":632},"Guides","/framework/guides",[633,636,639,642,645,648],{"title":634,"_path":635,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":637,"_path":638,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":640,"_path":641,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":643,"_path":644,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":646,"_path":647,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":649,"_path":650,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":652,"_path":653,"layout":13},"Core modules","/framework/core-modules",["Reactive",655],["Set"],["Reactive",657],{"module-navigation":658},null,true,"/design-system/components/form-alert/",1714695654507]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/form/_payload.json b/design-system/components/form/_payload.json
index 259d7d1814..6e855b48c8 100644
--- a/design-system/components/form/_payload.json
+++ b/design-system/components/form/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":104,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695153671]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":104,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695651844]
\ No newline at end of file
diff --git a/design-system/components/form/index.html b/design-system/components/form/index.html
index fdcc4705e0..fc9c964194 100644
--- a/design-system/components/form/index.html
+++ b/design-system/components/form/index.html
@@ -28,64 +28,64 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.CwUV-MIb.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.gK7ORMEc.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -97,8 +97,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Form</h1><p class="rpl-type-p-large" data-v-3163c6df>The Form component guides users to give information and consists of a group of related inputs or controls.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a form and its form input components to capture data from users. A form consists of a group of related inputs or controls.<!--]--></p><p><!--[-->Common form components include the:<!--]--></p><ul><!--[--><li><!--[--><a href="/design-system/components/input-field/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->input field component<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/text-area/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->text area component<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/date-input/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->date input component<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/radio-button/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->radio button component<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/checkbox/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->checkbox component<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/dropdown/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->dropdown component<!--]--><!--]--><!----><!--]--></a>.<!--]--></li><!--]--></ul><p><!--[-->An input field) is for short (single-line) text entry. A text area is for longer text.<!--]--></p><p><!--[-->Other input types let a user select from predefined options. Use a radio button when a user needs to make only one selection. Use a checkbox for multiple selections.<!--]--></p><p><!--[-->Group related form components in logical chunks (fieldsets). A single form can have multiple fieldsets. For example, a fieldset with several input fields for an address, plus a fieldset with a date input and radio button for delivery preferences.<!--]--></p><p><!--[-->The user can submit a form when all fields are valid (see <a href="/design-system/components/form-alert/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->form alert<!--]--><!--]--><!----><!--]--></a>).<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-form--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-form--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="how-this-component-works" data-v-ea525968><a href="#how-this-component-works" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->How this component works<!--]--></a></h2><h4 class="rpl-type-h4 docs-h4" id="layout"><!--[-->Layout<!--]--></h4><p><!--[-->Use one form column to enable fast field comprehension. Users cannot scan easily if more columns are used.<!--]--></p><p><!--[-->Group related form components into logical chunks (fieldsets). This helps users understand the information they need to give.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="labels"><!--[-->Labels<!--]--></h4><p><!--[-->Each input must have a label.<!--]--></p><p><!--[-->Use short, descriptive labels. This helps users quickly understand the information needed. It makes the content accessible, as a screen reader will read out these labels.<!--]--></p><p><!--[-->Put a label above its component (top-aligned). Labels will then be consistently aligned left, with small spaces between inputs. This helps users scan and fill the form.<!--]--></p><p><!--[-->Placeholder text should not be used as a label.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="requirement-optional-vs-mandatory"><!--[-->Requirement - optional vs. mandatory<!--]--></h4><p><!--[-->Mark an input as ‘required’ if you do not want the form submission to work unless the user gives that information.<!--]--></p><p><!--[-->Most fields on a simple form will be required.<!--]--></p><p><!--[-->Where possible, don’t include a large number of optional fields.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="hint-text"><!--[-->Hint text<!--]--></h4><p><!--[-->Hint text can be used to tell the user what, or how, to successfully complete an input or text field.<!--]--></p><p><!--[-->For example, hint text can include:<!--]--></p><ul><!--[--><li><!--[-->an overall description of the input field<!--]--></li><li><!--[-->hints for what kind of information needs to be input<!--]--></li><li><!--[-->specific formatting examples or requirements.<!--]--></li><!--]--></ul><p><!--[-->Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="placeholder-text"><!--[-->Placeholder text<!--]--></h4><p><!--[--><a href="/design-system/components/form/#accessibility" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->See accessibility<!--]--><!--]--><!----><!--]--></a> (below).<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="error-messages"><!--[-->Error messages<!--]--></h4><p><!--[-->All form inputs share error state styling. When creating an error message, it must follow the guidance from the individual form component’s page.<!--]--></p><p><!--[-->Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid. See the individual form component pages for suggested error messages.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="buttons"><!--[-->Buttons<!--]--></h4><p><!--[-->Button labels should say what the button will do when a user interacts with it.<!--]--></p><p><!--[-->Ensure the main action button tells the user when the form is being submitted (see <a href="/design-system/components/button/#loading-spinner" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->button loading spinner<!--]--><!--]--><!----><!--]--></a>).<!--]--></p><p><!--[-->To avoid confusing users about how to submit the form, use only one main action button. Do not use a reset button.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="validation"><!--[-->Validation<!--]--></h4><p><!--[-->Form alert is used to tell the user the outcome of the form validation.<!--]--></p><p><!--[-->If the form has been submitted successfully, the success alert will replace the form.<!--]--></p><p><!--[-->If the form has errors, the error alert will be placed at the top of the form, with an error summary and anchor links to all inputs that returned errors and require user actions.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="accessibility"><!--[-->Accessibility<!--]--></h4><p><!--[-->All fields need a visible, accessible label. (Search fields are sometimes an exception to this.)<!--]--></p><p><!--[-->On devices such as mobiles, display the keyboard required for the input. For example, a number keyboard for a date input.<!--]--></p><p><!--[-->Never disable a submit button. Allow the user to submit the form and then display the error message. Use form alert to display the validation outcome.<!--]--></p><p><!--[-->Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.<!--]--></p><p><!--[-->If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.<!--]--></p><p><!--[-->Use autocomplete to reduce typing for users.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Keep to one column.<!--]--></li><li><!--[-->Use top-align labels.<!--]--></li><li><!--[-->Always mark form fields as ‘required’ or ‘optional’.<!--]--></li><li><!--[-->Make calls to action descriptive - state the intent of the action.<!--]--></li><li><!--[-->Write short, clear headings and form input labels.<!--]--></li><li><!--[-->Use hint text (instead of labels) to explain any specifications.<!--]--></li><li><!--[-->Use field length input constraints - for fields with a defined character count like phone numbers and postcodes.<!--]--></li><li><!--[-->Write clear error messages inline, in error summaries and in form alerts by specifying what went wrong, where and how to fix them.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t create a form without a submit button.<!--]--></li><li><!--[-->Don&#39;t use an input or control without a form label.<!--]--></li><li><!--[-->Avoid using all caps.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Forms use colour for:<!--]--></p><ul><!--[--><li><!--[-->interactive states<!--]--></li><li><!--[-->icons.<!--]--></li><!--]--></ul><p><!--[-->A form component in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that form and its components remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-form--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-form--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="rationale" data-v-fff5b905><a href="#rationale" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/form.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/form/_payload.json">[{"state":1,"once":839,"_errors":841,"serverRendered":844,"path":845,"prerenderedAt":846},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":529,"$sdd-globals":545,"$sdd-navigation":547},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/form":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":524,"_id":525,"_source":526,"_file":527,"_extension":528},"/design-system/components/form","components",false,"","Form","The Form component guides users to give information and consists of a group of related inputs or controls.","page","Core",{"type":16,"children":17,"toc":513},"root",[18,27,33,38,100,105,110,115,128,133,140,147,152,157,163,168,173,178,183,189,194,199,204,210,215,220,238,243,249,260,266,271,276,282,287,299,304,310,315,320,325,331,336,341,346,351,356,361,367,410,416,434,438,444,449,462,467,474,494,497,503,508],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use a form and its form input components to capture data from users. A form consists of a group of related inputs or controls.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Common form components include the:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,53,62,71,80,89],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":19,"tag":47,"props":48,"children":50},"a",{"href":49},"/design-system/components/input-field/",[51],{"type":25,"value":52},"input field component",{"type":19,"tag":43,"props":54,"children":55},{},[56],{"type":19,"tag":47,"props":57,"children":59},{"href":58},"/design-system/components/text-area/",[60],{"type":25,"value":61},"text area component",{"type":19,"tag":43,"props":63,"children":64},{},[65],{"type":19,"tag":47,"props":66,"children":68},{"href":67},"/design-system/components/date-input/",[69],{"type":25,"value":70},"date input component",{"type":19,"tag":43,"props":72,"children":73},{},[74],{"type":19,"tag":47,"props":75,"children":77},{"href":76},"/design-system/components/radio-button/",[78],{"type":25,"value":79},"radio button component",{"type":19,"tag":43,"props":81,"children":82},{},[83],{"type":19,"tag":47,"props":84,"children":86},{"href":85},"/design-system/components/checkbox/",[87],{"type":25,"value":88},"checkbox component",{"type":19,"tag":43,"props":90,"children":91},{},[92,98],{"type":19,"tag":47,"props":93,"children":95},{"href":94},"/design-system/components/dropdown/",[96],{"type":25,"value":97},"dropdown component",{"type":25,"value":99},".",{"type":19,"tag":28,"props":101,"children":102},{},[103],{"type":25,"value":104},"An input field) is for short (single-line) text entry. A text area is for longer text.",{"type":19,"tag":28,"props":106,"children":107},{},[108],{"type":25,"value":109},"Other input types let a user select from predefined options. Use a radio button when a user needs to make only one selection. Use a checkbox for multiple selections.",{"type":19,"tag":28,"props":111,"children":112},{},[113],{"type":25,"value":114},"Group related form components in logical chunks (fieldsets). A single form can have multiple fieldsets. For example, a fieldset with several input fields for an address, plus a fieldset with a date input and radio button for delivery preferences.",{"type":19,"tag":28,"props":116,"children":117},{},[118,120,126],{"type":25,"value":119},"The user can submit a form when all fields are valid (see ",{"type":19,"tag":47,"props":121,"children":123},{"href":122},"/design-system/components/form-alert/",[124],{"type":25,"value":125},"form alert",{"type":25,"value":127},").",{"type":19,"tag":129,"props":130,"children":132},"docs-example",{"id":131},"forms-form--default-story",[],{"type":19,"tag":134,"props":135,"children":137},"h3",{"id":136},"how-this-component-works",[138],{"type":25,"value":139},"How this component works",{"type":19,"tag":141,"props":142,"children":144},"h4",{"id":143},"layout",[145],{"type":25,"value":146},"Layout",{"type":19,"tag":28,"props":148,"children":149},{},[150],{"type":25,"value":151},"Use one form column to enable fast field comprehension. Users cannot scan easily if more columns are used.",{"type":19,"tag":28,"props":153,"children":154},{},[155],{"type":25,"value":156},"Group related form components into logical chunks (fieldsets). This helps users understand the information they need to give.",{"type":19,"tag":141,"props":158,"children":160},{"id":159},"labels",[161],{"type":25,"value":162},"Labels",{"type":19,"tag":28,"props":164,"children":165},{},[166],{"type":25,"value":167},"Each input must have a label.",{"type":19,"tag":28,"props":169,"children":170},{},[171],{"type":25,"value":172},"Use short, descriptive labels. This helps users quickly understand the information needed. It makes the content accessible, as a screen reader will read out these labels.",{"type":19,"tag":28,"props":174,"children":175},{},[176],{"type":25,"value":177},"Put a label above its component (top-aligned). Labels will then be consistently aligned left, with small spaces between inputs. This helps users scan and fill the form.",{"type":19,"tag":28,"props":179,"children":180},{},[181],{"type":25,"value":182},"Placeholder text should not be used as a label.",{"type":19,"tag":141,"props":184,"children":186},{"id":185},"requirement-optional-vs-mandatory",[187],{"type":25,"value":188},"Requirement - optional vs. mandatory",{"type":19,"tag":28,"props":190,"children":191},{},[192],{"type":25,"value":193},"Mark an input as ‘required’ if you do not want the form submission to work unless the user gives that information.",{"type":19,"tag":28,"props":195,"children":196},{},[197],{"type":25,"value":198},"Most fields on a simple form will be required.",{"type":19,"tag":28,"props":200,"children":201},{},[202],{"type":25,"value":203},"Where possible, don’t include a large number of optional fields.",{"type":19,"tag":141,"props":205,"children":207},{"id":206},"hint-text",[208],{"type":25,"value":209},"Hint text",{"type":19,"tag":28,"props":211,"children":212},{},[213],{"type":25,"value":214},"Hint text can be used to tell the user what, or how, to successfully complete an input or text field.",{"type":19,"tag":28,"props":216,"children":217},{},[218],{"type":25,"value":219},"For example, hint text can include:",{"type":19,"tag":39,"props":221,"children":222},{},[223,228,233],{"type":19,"tag":43,"props":224,"children":225},{},[226],{"type":25,"value":227},"an overall description of the input field",{"type":19,"tag":43,"props":229,"children":230},{},[231],{"type":25,"value":232},"hints for what kind of information needs to be input",{"type":19,"tag":43,"props":234,"children":235},{},[236],{"type":25,"value":237},"specific formatting examples or requirements.",{"type":19,"tag":28,"props":239,"children":240},{},[241],{"type":25,"value":242},"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.",{"type":19,"tag":141,"props":244,"children":246},{"id":245},"placeholder-text",[247],{"type":25,"value":248},"Placeholder text",{"type":19,"tag":28,"props":250,"children":251},{},[252,258],{"type":19,"tag":47,"props":253,"children":255},{"href":254},"/design-system/components/form/#accessibility",[256],{"type":25,"value":257},"See accessibility",{"type":25,"value":259}," (below).",{"type":19,"tag":141,"props":261,"children":263},{"id":262},"error-messages",[264],{"type":25,"value":265},"Error messages",{"type":19,"tag":28,"props":267,"children":268},{},[269],{"type":25,"value":270},"All form inputs share error state styling. When creating an error message, it must follow the guidance from the individual form component’s page.",{"type":19,"tag":28,"props":272,"children":273},{},[274],{"type":25,"value":275},"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid. See the individual form component pages for suggested error messages.",{"type":19,"tag":141,"props":277,"children":279},{"id":278},"buttons",[280],{"type":25,"value":281},"Buttons",{"type":19,"tag":28,"props":283,"children":284},{},[285],{"type":25,"value":286},"Button labels should say what the button will do when a user interacts with it.",{"type":19,"tag":28,"props":288,"children":289},{},[290,292,298],{"type":25,"value":291},"Ensure the main action button tells the user when the form is being submitted (see ",{"type":19,"tag":47,"props":293,"children":295},{"href":294},"/design-system/components/button/#loading-spinner",[296],{"type":25,"value":297},"button loading spinner",{"type":25,"value":127},{"type":19,"tag":28,"props":300,"children":301},{},[302],{"type":25,"value":303},"To avoid confusing users about how to submit the form, use only one main action button. Do not use a reset button.",{"type":19,"tag":141,"props":305,"children":307},{"id":306},"validation",[308],{"type":25,"value":309},"Validation",{"type":19,"tag":28,"props":311,"children":312},{},[313],{"type":25,"value":314},"Form alert is used to tell the user the outcome of the form validation.",{"type":19,"tag":28,"props":316,"children":317},{},[318],{"type":25,"value":319},"If the form has been submitted successfully, the success alert will replace the form.",{"type":19,"tag":28,"props":321,"children":322},{},[323],{"type":25,"value":324},"If the form has errors, the error alert will be placed at the top of the form, with an error summary and anchor links to all inputs that returned errors and require user actions.",{"type":19,"tag":141,"props":326,"children":328},{"id":327},"accessibility",[329],{"type":25,"value":330},"Accessibility",{"type":19,"tag":28,"props":332,"children":333},{},[334],{"type":25,"value":335},"All fields need a visible, accessible label. (Search fields are sometimes an exception to this.)",{"type":19,"tag":28,"props":337,"children":338},{},[339],{"type":25,"value":340},"On devices such as mobiles, display the keyboard required for the input. For example, a number keyboard for a date input.",{"type":19,"tag":28,"props":342,"children":343},{},[344],{"type":25,"value":345},"Never disable a submit button. Allow the user to submit the form and then display the error message. Use form alert to display the validation outcome.",{"type":19,"tag":28,"props":347,"children":348},{},[349],{"type":25,"value":350},"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.",{"type":19,"tag":28,"props":352,"children":353},{},[354],{"type":25,"value":355},"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.",{"type":19,"tag":28,"props":357,"children":358},{},[359],{"type":25,"value":360},"Use autocomplete to reduce typing for users.",{"type":19,"tag":134,"props":362,"children":364},{"id":363},"when-and-how-to-use",[365],{"type":25,"value":366},"When and how to use",{"type":19,"tag":39,"props":368,"children":369},{},[370,375,380,385,390,395,400,405],{"type":19,"tag":43,"props":371,"children":372},{},[373],{"type":25,"value":374},"Keep to one column.",{"type":19,"tag":43,"props":376,"children":377},{},[378],{"type":25,"value":379},"Use top-align labels.",{"type":19,"tag":43,"props":381,"children":382},{},[383],{"type":25,"value":384},"Always mark form fields as ‘required’ or ‘optional’.",{"type":19,"tag":43,"props":386,"children":387},{},[388],{"type":25,"value":389},"Make calls to action descriptive - state the intent of the action.",{"type":19,"tag":43,"props":391,"children":392},{},[393],{"type":25,"value":394},"Write short, clear headings and form input labels.",{"type":19,"tag":43,"props":396,"children":397},{},[398],{"type":25,"value":399},"Use hint text (instead of labels) to explain any specifications.",{"type":19,"tag":43,"props":401,"children":402},{},[403],{"type":25,"value":404},"Use field length input constraints - for fields with a defined character count like phone numbers and postcodes.",{"type":19,"tag":43,"props":406,"children":407},{},[408],{"type":25,"value":409},"Write clear error messages inline, in error summaries and in form alerts by specifying what went wrong, where and how to fix them.",{"type":19,"tag":134,"props":411,"children":413},{"id":412},"when-and-how-not-to-use",[414],{"type":25,"value":415},"When and how not to use",{"type":19,"tag":39,"props":417,"children":418},{},[419,424,429],{"type":19,"tag":43,"props":420,"children":421},{},[422],{"type":25,"value":423},"Don’t create a form without a submit button.",{"type":19,"tag":43,"props":425,"children":426},{},[427],{"type":25,"value":428},"Don't use an input or control without a form label.",{"type":19,"tag":43,"props":430,"children":431},{},[432],{"type":25,"value":433},"Avoid using all caps.",{"type":19,"tag":435,"props":436,"children":437},"hr",{},[],{"type":19,"tag":20,"props":439,"children":441},{"id":440},"theming",[442],{"type":25,"value":443},"Theming",{"type":19,"tag":28,"props":445,"children":446},{},[447],{"type":25,"value":448},"Forms use colour for:",{"type":19,"tag":39,"props":450,"children":451},{},[452,457],{"type":19,"tag":43,"props":453,"children":454},{},[455],{"type":25,"value":456},"interactive states",{"type":19,"tag":43,"props":458,"children":459},{},[460],{"type":25,"value":461},"icons.",{"type":19,"tag":28,"props":463,"children":464},{},[465],{"type":25,"value":466},"A form component in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that form and its components remains consistent while it transitions from a focus to an active state.",{"type":19,"tag":468,"props":469,"children":470},"docs-theme-chooser",{},[471],{"type":19,"tag":129,"props":472,"children":473},{"id":131},[],{"type":19,"tag":28,"props":475,"children":476},{},[477,479,485,487,493],{"type":25,"value":478},"To create your own theme see ",{"type":19,"tag":47,"props":480,"children":482},{"href":481},"/design-system/design/theming-guidance-for-designers",[483],{"type":25,"value":484},"theming guidance for designers",{"type":25,"value":486}," or ",{"type":19,"tag":47,"props":488,"children":490},{"href":489},"/design-system/develop/theming",[491],{"type":25,"value":492},"theming guidance for developers",{"type":25,"value":99},{"type":19,"tag":435,"props":495,"children":496},{},[],{"type":19,"tag":20,"props":498,"children":500},{"id":499},"rationale",[501],{"type":25,"value":502},"Rationale",{"type":19,"tag":28,"props":504,"children":505},{},[506],{"type":25,"value":507},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":19,"tag":28,"props":509,"children":510},{},[511],{"type":25,"value":512},"This occurs across all form and input elements, for a consistent experience.",{"title":10,"searchDepth":514,"depth":514,"links":515},2,[516,522,523],{"id":22,"depth":514,"text":26,"children":517},[518,520,521],{"id":136,"depth":519,"text":139},3,{"id":363,"depth":519,"text":366},{"id":412,"depth":519,"text":415},{"id":440,"depth":514,"text":443},{"id":499,"depth":514,"text":502},"markdown","content:design-system:5.components:form.md","content","design-system/5.components/form.md","md",["ShallowRef",530],["ShallowReactive",531],{"/design-system/components/form":532},[533,539],{"_path":534,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":535,"description":536,"layout":13,"label":14,"_type":524,"_id":537,"_source":526,"_file":538,"_extension":528},"/design-system/components/form-alert","Form alert","The Form alert component shows the user the outcome of a form submission or validation.","content:design-system:5.components:form-alert.md","design-system/5.components/form-alert.md",{"_path":540,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":541,"description":542,"layout":13,"label":14,"_type":524,"_id":543,"_source":526,"_file":544,"_extension":528},"/design-system/components/header","Header","The Header component introduces the purpose and content of a page.","content:design-system:5.components:header.md","design-system/5.components/header.md",["ShallowRef",546],{},[548,553,791],{"title":549,"_path":550,"icon":551,"layout":552},"Ripple Design System","/","carbon:home","home",{"title":554,"_path":555,"children":556},"Design System","/design-system",[557,573,588,616,649],{"title":558,"_path":559,"children":560},"About","/design-system/about",[561,564,567,570],{"title":562,"_path":563,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":565,"_path":566,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":568,"_path":569,"layout":13},"Support","/design-system/about/getting-support",{"title":571,"_path":572,"layout":13},"Contributing","/design-system/about/contributing",{"title":574,"_path":575,"children":576},"Design","/design-system/design",[577,580,583,586],{"title":578,"_path":579,"layout":13},"Getting started","/design-system/design/getting-started",{"title":581,"_path":582,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":584,"_path":585,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":587,"_path":481,"layout":13},"Theming guidance for designers",{"title":589,"_path":590,"children":591},"Develop","/design-system/develop",[592,594,596,598],{"title":578,"_path":593,"layout":13},"/design-system/develop/getting-started",{"title":571,"_path":595,"layout":13},"/design-system/develop/contributing",{"title":597,"_path":489,"layout":13},"Theme and brand application",{"title":26,"_path":599,"children":600,"layout":13},"/design-system/develop/usage",[601,604,607,610,613],{"title":602,"_path":603,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":605,"_path":606,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":608,"_path":609,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":611,"_path":612,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":614,"_path":615,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":617,"_path":618,"children":619},"Styles","/design-system/styles",[620,623,626,629,632,635,637,640,643,646],{"title":621,"_path":622,"layout":13},"Colour","/design-system/styles/colour",{"title":624,"_path":625,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":627,"_path":628,"layout":13},"Grid","/design-system/styles/grid",{"title":630,"_path":631,"layout":13},"Icons","/design-system/styles/icons",{"title":633,"_path":634,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":146,"_path":636,"layout":13},"/design-system/styles/layout",{"title":638,"_path":639,"layout":13},"Logo","/design-system/styles/logo",{"title":641,"_path":642,"layout":13},"Motion","/design-system/styles/motion",{"title":644,"_path":645,"layout":13},"Spacing","/design-system/styles/spacing",{"title":647,"_path":648,"layout":13},"Typography","/design-system/styles/typography",{"title":650,"_path":651,"children":652},"Components","/design-system/components",[653,656,659,662,665,668,671,674,677,680,683,686,689,692,695,698,701,704,707,710,713,714,715,716,719,722,725,728,731,734,737,740,743,746,749,752,755,758,761,764,767,770,773,776,779,782,785,788],{"title":654,"_path":655,"layout":13},"Accordion","/design-system/components/accordion",{"title":657,"_path":658,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":660,"_path":661,"layout":13},"Alert","/design-system/components/alert",{"title":663,"_path":664,"layout":13},"Block quote","/design-system/components/block-quote",{"title":666,"_path":667,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":669,"_path":670,"layout":13},"Button","/design-system/components/button",{"title":672,"_path":673,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":675,"_path":676,"layout":13},"Callout","/design-system/components/callout",{"title":678,"_path":679,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":681,"_path":682,"layout":13},"Card","/design-system/components/card",{"title":684,"_path":685,"layout":13},"Carousel","/design-system/components/carousel",{"title":687,"_path":688,"layout":13},"Category grid","/design-system/components/category-grid",{"title":690,"_path":691,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":693,"_path":694,"layout":13},"Chip","/design-system/components/chip",{"title":696,"_path":697,"layout":13},"Contact us","/design-system/components/contact-us",{"title":699,"_path":700,"layout":13},"Date input","/design-system/components/date-input",{"title":702,"_path":703,"layout":13},"Detail list","/design-system/components/detail-list",{"title":705,"_path":706,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":708,"_path":709,"layout":13},"File","/design-system/components/file",{"title":711,"_path":712,"layout":13},"Footer","/design-system/components/footer",{"title":11,"_path":7,"layout":13},{"title":535,"_path":534,"layout":13},{"title":541,"_path":540,"layout":13},{"title":717,"_path":718,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":720,"_path":721,"layout":13},"Input field","/design-system/components/input-field",{"title":723,"_path":724,"layout":13},"Key dates","/design-system/components/key-dates",{"title":726,"_path":727,"layout":13},"Media","/design-system/components/media",{"title":729,"_path":730,"layout":13},"Media embed","/design-system/components/media-embed",{"title":732,"_path":733,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":735,"_path":736,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":738,"_path":739,"layout":13},"Option button","/design-system/components/option-button",{"title":741,"_path":742,"layout":13},"Page action","/design-system/components/page-action",{"title":744,"_path":745,"layout":13},"Pagination","/design-system/components/pagination",{"title":747,"_path":748,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":750,"_path":751,"layout":13},"Profile","/design-system/components/profile",{"title":753,"_path":754,"layout":13},"Radio button","/design-system/components/radio-button",{"title":756,"_path":757,"layout":13},"Related links","/design-system/components/related-links",{"title":759,"_path":760,"layout":13},"Results listing","/design-system/components/results-listing",{"title":762,"_path":763,"layout":13},"Search bar","/design-system/components/search-bar",{"title":765,"_path":766,"layout":13},"Skip link","/design-system/components/skip-link",{"title":768,"_path":769,"layout":13},"Social share","/design-system/components/social-share",{"title":771,"_path":772,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":774,"_path":775,"layout":13},"Table","/design-system/components/table",{"title":777,"_path":778,"layout":13},"Tabs","/design-system/components/tabs",{"title":780,"_path":781,"layout":13},"Tag","/design-system/components/tag",{"title":783,"_path":784,"layout":13},"Text area","/design-system/components/text-area",{"title":786,"_path":787,"layout":13},"Timeline","/design-system/components/timeline",{"title":789,"_path":790,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":792,"_path":793,"children":794,"layout":13},"Ripple Framework","/framework",[795,796,814,836],{"title":792,"_path":793,"layout":13},{"title":797,"_path":798,"children":799},"Key Concepts","/framework/key-concepts",[800,802,805,808,811],{"title":608,"_path":801,"layout":13},"/framework/key-concepts/nuxt",{"title":803,"_path":804,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":806,"_path":807,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":809,"_path":810,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":812,"_path":813,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":815,"_path":816,"children":817},"Guides","/framework/guides",[818,821,824,827,830,833],{"title":819,"_path":820,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":822,"_path":823,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":825,"_path":826,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":828,"_path":829,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":831,"_path":832,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":834,"_path":835,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":837,"_path":838,"layout":13},"Core modules","/framework/core-modules",["Reactive",840],["Set"],["Reactive",842],{"module-navigation":843},null,true,"/design-system/components/form/",1714695156447]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Form</h1><p class="rpl-type-p-large" data-v-3163c6df>The Form component guides users to give information and consists of a group of related inputs or controls.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a form and its form input components to capture data from users. A form consists of a group of related inputs or controls.<!--]--></p><p><!--[-->Common form components include the:<!--]--></p><ul><!--[--><li><!--[--><a href="/design-system/components/input-field/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->input field component<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/text-area/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->text area component<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/date-input/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->date input component<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/radio-button/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->radio button component<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/checkbox/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->checkbox component<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/dropdown/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->dropdown component<!--]--><!--]--><!----><!--]--></a>.<!--]--></li><!--]--></ul><p><!--[-->An input field) is for short (single-line) text entry. A text area is for longer text.<!--]--></p><p><!--[-->Other input types let a user select from predefined options. Use a radio button when a user needs to make only one selection. Use a checkbox for multiple selections.<!--]--></p><p><!--[-->Group related form components in logical chunks (fieldsets). A single form can have multiple fieldsets. For example, a fieldset with several input fields for an address, plus a fieldset with a date input and radio button for delivery preferences.<!--]--></p><p><!--[-->The user can submit a form when all fields are valid (see <a href="/design-system/components/form-alert/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->form alert<!--]--><!--]--><!----><!--]--></a>).<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-form--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-form--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="how-this-component-works" data-v-ea525968><a href="#how-this-component-works" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->How this component works<!--]--></a></h2><h4 class="rpl-type-h4 docs-h4" id="layout"><!--[-->Layout<!--]--></h4><p><!--[-->Use one form column to enable fast field comprehension. Users cannot scan easily if more columns are used.<!--]--></p><p><!--[-->Group related form components into logical chunks (fieldsets). This helps users understand the information they need to give.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="labels"><!--[-->Labels<!--]--></h4><p><!--[-->Each input must have a label.<!--]--></p><p><!--[-->Use short, descriptive labels. This helps users quickly understand the information needed. It makes the content accessible, as a screen reader will read out these labels.<!--]--></p><p><!--[-->Put a label above its component (top-aligned). Labels will then be consistently aligned left, with small spaces between inputs. This helps users scan and fill the form.<!--]--></p><p><!--[-->Placeholder text should not be used as a label.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="requirement-optional-vs-mandatory"><!--[-->Requirement - optional vs. mandatory<!--]--></h4><p><!--[-->Mark an input as ‘required’ if you do not want the form submission to work unless the user gives that information.<!--]--></p><p><!--[-->Most fields on a simple form will be required.<!--]--></p><p><!--[-->Where possible, don’t include a large number of optional fields.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="hint-text"><!--[-->Hint text<!--]--></h4><p><!--[-->Hint text can be used to tell the user what, or how, to successfully complete an input or text field.<!--]--></p><p><!--[-->For example, hint text can include:<!--]--></p><ul><!--[--><li><!--[-->an overall description of the input field<!--]--></li><li><!--[-->hints for what kind of information needs to be input<!--]--></li><li><!--[-->specific formatting examples or requirements.<!--]--></li><!--]--></ul><p><!--[-->Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="placeholder-text"><!--[-->Placeholder text<!--]--></h4><p><!--[--><a href="/design-system/components/form/#accessibility" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->See accessibility<!--]--><!--]--><!----><!--]--></a> (below).<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="error-messages"><!--[-->Error messages<!--]--></h4><p><!--[-->All form inputs share error state styling. When creating an error message, it must follow the guidance from the individual form component’s page.<!--]--></p><p><!--[-->Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid. See the individual form component pages for suggested error messages.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="buttons"><!--[-->Buttons<!--]--></h4><p><!--[-->Button labels should say what the button will do when a user interacts with it.<!--]--></p><p><!--[-->Ensure the main action button tells the user when the form is being submitted (see <a href="/design-system/components/button/#loading-spinner" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->button loading spinner<!--]--><!--]--><!----><!--]--></a>).<!--]--></p><p><!--[-->To avoid confusing users about how to submit the form, use only one main action button. Do not use a reset button.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="validation"><!--[-->Validation<!--]--></h4><p><!--[-->Form alert is used to tell the user the outcome of the form validation.<!--]--></p><p><!--[-->If the form has been submitted successfully, the success alert will replace the form.<!--]--></p><p><!--[-->If the form has errors, the error alert will be placed at the top of the form, with an error summary and anchor links to all inputs that returned errors and require user actions.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="accessibility"><!--[-->Accessibility<!--]--></h4><p><!--[-->All fields need a visible, accessible label. (Search fields are sometimes an exception to this.)<!--]--></p><p><!--[-->On devices such as mobiles, display the keyboard required for the input. For example, a number keyboard for a date input.<!--]--></p><p><!--[-->Never disable a submit button. Allow the user to submit the form and then display the error message. Use form alert to display the validation outcome.<!--]--></p><p><!--[-->Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.<!--]--></p><p><!--[-->If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.<!--]--></p><p><!--[-->Use autocomplete to reduce typing for users.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Keep to one column.<!--]--></li><li><!--[-->Use top-align labels.<!--]--></li><li><!--[-->Always mark form fields as ‘required’ or ‘optional’.<!--]--></li><li><!--[-->Make calls to action descriptive - state the intent of the action.<!--]--></li><li><!--[-->Write short, clear headings and form input labels.<!--]--></li><li><!--[-->Use hint text (instead of labels) to explain any specifications.<!--]--></li><li><!--[-->Use field length input constraints - for fields with a defined character count like phone numbers and postcodes.<!--]--></li><li><!--[-->Write clear error messages inline, in error summaries and in form alerts by specifying what went wrong, where and how to fix them.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t create a form without a submit button.<!--]--></li><li><!--[-->Don&#39;t use an input or control without a form label.<!--]--></li><li><!--[-->Avoid using all caps.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Forms use colour for:<!--]--></p><ul><!--[--><li><!--[-->interactive states<!--]--></li><li><!--[-->icons.<!--]--></li><!--]--></ul><p><!--[-->A form component in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that form and its components remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-form--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-form--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="rationale" data-v-fff5b905><a href="#rationale" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/form.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/form/_payload.json">[{"state":1,"once":839,"_errors":841,"serverRendered":844,"path":845,"prerenderedAt":846},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":529,"$sdd-globals":545,"$sdd-navigation":547},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/form":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":524,"_id":525,"_source":526,"_file":527,"_extension":528},"/design-system/components/form","components",false,"","Form","The Form component guides users to give information and consists of a group of related inputs or controls.","page","Core",{"type":16,"children":17,"toc":513},"root",[18,27,33,38,100,105,110,115,128,133,140,147,152,157,163,168,173,178,183,189,194,199,204,210,215,220,238,243,249,260,266,271,276,282,287,299,304,310,315,320,325,331,336,341,346,351,356,361,367,410,416,434,438,444,449,462,467,474,494,497,503,508],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use a form and its form input components to capture data from users. A form consists of a group of related inputs or controls.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Common form components include the:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,53,62,71,80,89],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":19,"tag":47,"props":48,"children":50},"a",{"href":49},"/design-system/components/input-field/",[51],{"type":25,"value":52},"input field component",{"type":19,"tag":43,"props":54,"children":55},{},[56],{"type":19,"tag":47,"props":57,"children":59},{"href":58},"/design-system/components/text-area/",[60],{"type":25,"value":61},"text area component",{"type":19,"tag":43,"props":63,"children":64},{},[65],{"type":19,"tag":47,"props":66,"children":68},{"href":67},"/design-system/components/date-input/",[69],{"type":25,"value":70},"date input component",{"type":19,"tag":43,"props":72,"children":73},{},[74],{"type":19,"tag":47,"props":75,"children":77},{"href":76},"/design-system/components/radio-button/",[78],{"type":25,"value":79},"radio button component",{"type":19,"tag":43,"props":81,"children":82},{},[83],{"type":19,"tag":47,"props":84,"children":86},{"href":85},"/design-system/components/checkbox/",[87],{"type":25,"value":88},"checkbox component",{"type":19,"tag":43,"props":90,"children":91},{},[92,98],{"type":19,"tag":47,"props":93,"children":95},{"href":94},"/design-system/components/dropdown/",[96],{"type":25,"value":97},"dropdown component",{"type":25,"value":99},".",{"type":19,"tag":28,"props":101,"children":102},{},[103],{"type":25,"value":104},"An input field) is for short (single-line) text entry. A text area is for longer text.",{"type":19,"tag":28,"props":106,"children":107},{},[108],{"type":25,"value":109},"Other input types let a user select from predefined options. Use a radio button when a user needs to make only one selection. Use a checkbox for multiple selections.",{"type":19,"tag":28,"props":111,"children":112},{},[113],{"type":25,"value":114},"Group related form components in logical chunks (fieldsets). A single form can have multiple fieldsets. For example, a fieldset with several input fields for an address, plus a fieldset with a date input and radio button for delivery preferences.",{"type":19,"tag":28,"props":116,"children":117},{},[118,120,126],{"type":25,"value":119},"The user can submit a form when all fields are valid (see ",{"type":19,"tag":47,"props":121,"children":123},{"href":122},"/design-system/components/form-alert/",[124],{"type":25,"value":125},"form alert",{"type":25,"value":127},").",{"type":19,"tag":129,"props":130,"children":132},"docs-example",{"id":131},"forms-form--default-story",[],{"type":19,"tag":134,"props":135,"children":137},"h3",{"id":136},"how-this-component-works",[138],{"type":25,"value":139},"How this component works",{"type":19,"tag":141,"props":142,"children":144},"h4",{"id":143},"layout",[145],{"type":25,"value":146},"Layout",{"type":19,"tag":28,"props":148,"children":149},{},[150],{"type":25,"value":151},"Use one form column to enable fast field comprehension. Users cannot scan easily if more columns are used.",{"type":19,"tag":28,"props":153,"children":154},{},[155],{"type":25,"value":156},"Group related form components into logical chunks (fieldsets). This helps users understand the information they need to give.",{"type":19,"tag":141,"props":158,"children":160},{"id":159},"labels",[161],{"type":25,"value":162},"Labels",{"type":19,"tag":28,"props":164,"children":165},{},[166],{"type":25,"value":167},"Each input must have a label.",{"type":19,"tag":28,"props":169,"children":170},{},[171],{"type":25,"value":172},"Use short, descriptive labels. This helps users quickly understand the information needed. It makes the content accessible, as a screen reader will read out these labels.",{"type":19,"tag":28,"props":174,"children":175},{},[176],{"type":25,"value":177},"Put a label above its component (top-aligned). Labels will then be consistently aligned left, with small spaces between inputs. This helps users scan and fill the form.",{"type":19,"tag":28,"props":179,"children":180},{},[181],{"type":25,"value":182},"Placeholder text should not be used as a label.",{"type":19,"tag":141,"props":184,"children":186},{"id":185},"requirement-optional-vs-mandatory",[187],{"type":25,"value":188},"Requirement - optional vs. mandatory",{"type":19,"tag":28,"props":190,"children":191},{},[192],{"type":25,"value":193},"Mark an input as ‘required’ if you do not want the form submission to work unless the user gives that information.",{"type":19,"tag":28,"props":195,"children":196},{},[197],{"type":25,"value":198},"Most fields on a simple form will be required.",{"type":19,"tag":28,"props":200,"children":201},{},[202],{"type":25,"value":203},"Where possible, don’t include a large number of optional fields.",{"type":19,"tag":141,"props":205,"children":207},{"id":206},"hint-text",[208],{"type":25,"value":209},"Hint text",{"type":19,"tag":28,"props":211,"children":212},{},[213],{"type":25,"value":214},"Hint text can be used to tell the user what, or how, to successfully complete an input or text field.",{"type":19,"tag":28,"props":216,"children":217},{},[218],{"type":25,"value":219},"For example, hint text can include:",{"type":19,"tag":39,"props":221,"children":222},{},[223,228,233],{"type":19,"tag":43,"props":224,"children":225},{},[226],{"type":25,"value":227},"an overall description of the input field",{"type":19,"tag":43,"props":229,"children":230},{},[231],{"type":25,"value":232},"hints for what kind of information needs to be input",{"type":19,"tag":43,"props":234,"children":235},{},[236],{"type":25,"value":237},"specific formatting examples or requirements.",{"type":19,"tag":28,"props":239,"children":240},{},[241],{"type":25,"value":242},"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.",{"type":19,"tag":141,"props":244,"children":246},{"id":245},"placeholder-text",[247],{"type":25,"value":248},"Placeholder text",{"type":19,"tag":28,"props":250,"children":251},{},[252,258],{"type":19,"tag":47,"props":253,"children":255},{"href":254},"/design-system/components/form/#accessibility",[256],{"type":25,"value":257},"See accessibility",{"type":25,"value":259}," (below).",{"type":19,"tag":141,"props":261,"children":263},{"id":262},"error-messages",[264],{"type":25,"value":265},"Error messages",{"type":19,"tag":28,"props":267,"children":268},{},[269],{"type":25,"value":270},"All form inputs share error state styling. When creating an error message, it must follow the guidance from the individual form component’s page.",{"type":19,"tag":28,"props":272,"children":273},{},[274],{"type":25,"value":275},"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid. See the individual form component pages for suggested error messages.",{"type":19,"tag":141,"props":277,"children":279},{"id":278},"buttons",[280],{"type":25,"value":281},"Buttons",{"type":19,"tag":28,"props":283,"children":284},{},[285],{"type":25,"value":286},"Button labels should say what the button will do when a user interacts with it.",{"type":19,"tag":28,"props":288,"children":289},{},[290,292,298],{"type":25,"value":291},"Ensure the main action button tells the user when the form is being submitted (see ",{"type":19,"tag":47,"props":293,"children":295},{"href":294},"/design-system/components/button/#loading-spinner",[296],{"type":25,"value":297},"button loading spinner",{"type":25,"value":127},{"type":19,"tag":28,"props":300,"children":301},{},[302],{"type":25,"value":303},"To avoid confusing users about how to submit the form, use only one main action button. Do not use a reset button.",{"type":19,"tag":141,"props":305,"children":307},{"id":306},"validation",[308],{"type":25,"value":309},"Validation",{"type":19,"tag":28,"props":311,"children":312},{},[313],{"type":25,"value":314},"Form alert is used to tell the user the outcome of the form validation.",{"type":19,"tag":28,"props":316,"children":317},{},[318],{"type":25,"value":319},"If the form has been submitted successfully, the success alert will replace the form.",{"type":19,"tag":28,"props":321,"children":322},{},[323],{"type":25,"value":324},"If the form has errors, the error alert will be placed at the top of the form, with an error summary and anchor links to all inputs that returned errors and require user actions.",{"type":19,"tag":141,"props":326,"children":328},{"id":327},"accessibility",[329],{"type":25,"value":330},"Accessibility",{"type":19,"tag":28,"props":332,"children":333},{},[334],{"type":25,"value":335},"All fields need a visible, accessible label. (Search fields are sometimes an exception to this.)",{"type":19,"tag":28,"props":337,"children":338},{},[339],{"type":25,"value":340},"On devices such as mobiles, display the keyboard required for the input. For example, a number keyboard for a date input.",{"type":19,"tag":28,"props":342,"children":343},{},[344],{"type":25,"value":345},"Never disable a submit button. Allow the user to submit the form and then display the error message. Use form alert to display the validation outcome.",{"type":19,"tag":28,"props":347,"children":348},{},[349],{"type":25,"value":350},"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.",{"type":19,"tag":28,"props":352,"children":353},{},[354],{"type":25,"value":355},"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.",{"type":19,"tag":28,"props":357,"children":358},{},[359],{"type":25,"value":360},"Use autocomplete to reduce typing for users.",{"type":19,"tag":134,"props":362,"children":364},{"id":363},"when-and-how-to-use",[365],{"type":25,"value":366},"When and how to use",{"type":19,"tag":39,"props":368,"children":369},{},[370,375,380,385,390,395,400,405],{"type":19,"tag":43,"props":371,"children":372},{},[373],{"type":25,"value":374},"Keep to one column.",{"type":19,"tag":43,"props":376,"children":377},{},[378],{"type":25,"value":379},"Use top-align labels.",{"type":19,"tag":43,"props":381,"children":382},{},[383],{"type":25,"value":384},"Always mark form fields as ‘required’ or ‘optional’.",{"type":19,"tag":43,"props":386,"children":387},{},[388],{"type":25,"value":389},"Make calls to action descriptive - state the intent of the action.",{"type":19,"tag":43,"props":391,"children":392},{},[393],{"type":25,"value":394},"Write short, clear headings and form input labels.",{"type":19,"tag":43,"props":396,"children":397},{},[398],{"type":25,"value":399},"Use hint text (instead of labels) to explain any specifications.",{"type":19,"tag":43,"props":401,"children":402},{},[403],{"type":25,"value":404},"Use field length input constraints - for fields with a defined character count like phone numbers and postcodes.",{"type":19,"tag":43,"props":406,"children":407},{},[408],{"type":25,"value":409},"Write clear error messages inline, in error summaries and in form alerts by specifying what went wrong, where and how to fix them.",{"type":19,"tag":134,"props":411,"children":413},{"id":412},"when-and-how-not-to-use",[414],{"type":25,"value":415},"When and how not to use",{"type":19,"tag":39,"props":417,"children":418},{},[419,424,429],{"type":19,"tag":43,"props":420,"children":421},{},[422],{"type":25,"value":423},"Don’t create a form without a submit button.",{"type":19,"tag":43,"props":425,"children":426},{},[427],{"type":25,"value":428},"Don't use an input or control without a form label.",{"type":19,"tag":43,"props":430,"children":431},{},[432],{"type":25,"value":433},"Avoid using all caps.",{"type":19,"tag":435,"props":436,"children":437},"hr",{},[],{"type":19,"tag":20,"props":439,"children":441},{"id":440},"theming",[442],{"type":25,"value":443},"Theming",{"type":19,"tag":28,"props":445,"children":446},{},[447],{"type":25,"value":448},"Forms use colour for:",{"type":19,"tag":39,"props":450,"children":451},{},[452,457],{"type":19,"tag":43,"props":453,"children":454},{},[455],{"type":25,"value":456},"interactive states",{"type":19,"tag":43,"props":458,"children":459},{},[460],{"type":25,"value":461},"icons.",{"type":19,"tag":28,"props":463,"children":464},{},[465],{"type":25,"value":466},"A form component in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that form and its components remains consistent while it transitions from a focus to an active state.",{"type":19,"tag":468,"props":469,"children":470},"docs-theme-chooser",{},[471],{"type":19,"tag":129,"props":472,"children":473},{"id":131},[],{"type":19,"tag":28,"props":475,"children":476},{},[477,479,485,487,493],{"type":25,"value":478},"To create your own theme see ",{"type":19,"tag":47,"props":480,"children":482},{"href":481},"/design-system/design/theming-guidance-for-designers",[483],{"type":25,"value":484},"theming guidance for designers",{"type":25,"value":486}," or ",{"type":19,"tag":47,"props":488,"children":490},{"href":489},"/design-system/develop/theming",[491],{"type":25,"value":492},"theming guidance for developers",{"type":25,"value":99},{"type":19,"tag":435,"props":495,"children":496},{},[],{"type":19,"tag":20,"props":498,"children":500},{"id":499},"rationale",[501],{"type":25,"value":502},"Rationale",{"type":19,"tag":28,"props":504,"children":505},{},[506],{"type":25,"value":507},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":19,"tag":28,"props":509,"children":510},{},[511],{"type":25,"value":512},"This occurs across all form and input elements, for a consistent experience.",{"title":10,"searchDepth":514,"depth":514,"links":515},2,[516,522,523],{"id":22,"depth":514,"text":26,"children":517},[518,520,521],{"id":136,"depth":519,"text":139},3,{"id":363,"depth":519,"text":366},{"id":412,"depth":519,"text":415},{"id":440,"depth":514,"text":443},{"id":499,"depth":514,"text":502},"markdown","content:design-system:5.components:form.md","content","design-system/5.components/form.md","md",["ShallowRef",530],["ShallowReactive",531],{"/design-system/components/form":532},[533,539],{"_path":534,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":535,"description":536,"layout":13,"label":14,"_type":524,"_id":537,"_source":526,"_file":538,"_extension":528},"/design-system/components/form-alert","Form alert","The Form alert component shows the user the outcome of a form submission or validation.","content:design-system:5.components:form-alert.md","design-system/5.components/form-alert.md",{"_path":540,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":541,"description":542,"layout":13,"label":14,"_type":524,"_id":543,"_source":526,"_file":544,"_extension":528},"/design-system/components/header","Header","The Header component introduces the purpose and content of a page.","content:design-system:5.components:header.md","design-system/5.components/header.md",["ShallowRef",546],{},[548,553,791],{"title":549,"_path":550,"icon":551,"layout":552},"Ripple Design System","/","carbon:home","home",{"title":554,"_path":555,"children":556},"Design System","/design-system",[557,573,588,616,649],{"title":558,"_path":559,"children":560},"About","/design-system/about",[561,564,567,570],{"title":562,"_path":563,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":565,"_path":566,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":568,"_path":569,"layout":13},"Support","/design-system/about/getting-support",{"title":571,"_path":572,"layout":13},"Contributing","/design-system/about/contributing",{"title":574,"_path":575,"children":576},"Design","/design-system/design",[577,580,583,586],{"title":578,"_path":579,"layout":13},"Getting started","/design-system/design/getting-started",{"title":581,"_path":582,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":584,"_path":585,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":587,"_path":481,"layout":13},"Theming guidance for designers",{"title":589,"_path":590,"children":591},"Develop","/design-system/develop",[592,594,596,598],{"title":578,"_path":593,"layout":13},"/design-system/develop/getting-started",{"title":571,"_path":595,"layout":13},"/design-system/develop/contributing",{"title":597,"_path":489,"layout":13},"Theme and brand application",{"title":26,"_path":599,"children":600,"layout":13},"/design-system/develop/usage",[601,604,607,610,613],{"title":602,"_path":603,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":605,"_path":606,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":608,"_path":609,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":611,"_path":612,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":614,"_path":615,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":617,"_path":618,"children":619},"Styles","/design-system/styles",[620,623,626,629,632,635,637,640,643,646],{"title":621,"_path":622,"layout":13},"Colour","/design-system/styles/colour",{"title":624,"_path":625,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":627,"_path":628,"layout":13},"Grid","/design-system/styles/grid",{"title":630,"_path":631,"layout":13},"Icons","/design-system/styles/icons",{"title":633,"_path":634,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":146,"_path":636,"layout":13},"/design-system/styles/layout",{"title":638,"_path":639,"layout":13},"Logo","/design-system/styles/logo",{"title":641,"_path":642,"layout":13},"Motion","/design-system/styles/motion",{"title":644,"_path":645,"layout":13},"Spacing","/design-system/styles/spacing",{"title":647,"_path":648,"layout":13},"Typography","/design-system/styles/typography",{"title":650,"_path":651,"children":652},"Components","/design-system/components",[653,656,659,662,665,668,671,674,677,680,683,686,689,692,695,698,701,704,707,710,713,714,715,716,719,722,725,728,731,734,737,740,743,746,749,752,755,758,761,764,767,770,773,776,779,782,785,788],{"title":654,"_path":655,"layout":13},"Accordion","/design-system/components/accordion",{"title":657,"_path":658,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":660,"_path":661,"layout":13},"Alert","/design-system/components/alert",{"title":663,"_path":664,"layout":13},"Block quote","/design-system/components/block-quote",{"title":666,"_path":667,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":669,"_path":670,"layout":13},"Button","/design-system/components/button",{"title":672,"_path":673,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":675,"_path":676,"layout":13},"Callout","/design-system/components/callout",{"title":678,"_path":679,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":681,"_path":682,"layout":13},"Card","/design-system/components/card",{"title":684,"_path":685,"layout":13},"Carousel","/design-system/components/carousel",{"title":687,"_path":688,"layout":13},"Category grid","/design-system/components/category-grid",{"title":690,"_path":691,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":693,"_path":694,"layout":13},"Chip","/design-system/components/chip",{"title":696,"_path":697,"layout":13},"Contact us","/design-system/components/contact-us",{"title":699,"_path":700,"layout":13},"Date input","/design-system/components/date-input",{"title":702,"_path":703,"layout":13},"Detail list","/design-system/components/detail-list",{"title":705,"_path":706,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":708,"_path":709,"layout":13},"File","/design-system/components/file",{"title":711,"_path":712,"layout":13},"Footer","/design-system/components/footer",{"title":11,"_path":7,"layout":13},{"title":535,"_path":534,"layout":13},{"title":541,"_path":540,"layout":13},{"title":717,"_path":718,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":720,"_path":721,"layout":13},"Input field","/design-system/components/input-field",{"title":723,"_path":724,"layout":13},"Key dates","/design-system/components/key-dates",{"title":726,"_path":727,"layout":13},"Media","/design-system/components/media",{"title":729,"_path":730,"layout":13},"Media embed","/design-system/components/media-embed",{"title":732,"_path":733,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":735,"_path":736,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":738,"_path":739,"layout":13},"Option button","/design-system/components/option-button",{"title":741,"_path":742,"layout":13},"Page action","/design-system/components/page-action",{"title":744,"_path":745,"layout":13},"Pagination","/design-system/components/pagination",{"title":747,"_path":748,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":750,"_path":751,"layout":13},"Profile","/design-system/components/profile",{"title":753,"_path":754,"layout":13},"Radio button","/design-system/components/radio-button",{"title":756,"_path":757,"layout":13},"Related links","/design-system/components/related-links",{"title":759,"_path":760,"layout":13},"Results listing","/design-system/components/results-listing",{"title":762,"_path":763,"layout":13},"Search bar","/design-system/components/search-bar",{"title":765,"_path":766,"layout":13},"Skip link","/design-system/components/skip-link",{"title":768,"_path":769,"layout":13},"Social share","/design-system/components/social-share",{"title":771,"_path":772,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":774,"_path":775,"layout":13},"Table","/design-system/components/table",{"title":777,"_path":778,"layout":13},"Tabs","/design-system/components/tabs",{"title":780,"_path":781,"layout":13},"Tag","/design-system/components/tag",{"title":783,"_path":784,"layout":13},"Text area","/design-system/components/text-area",{"title":786,"_path":787,"layout":13},"Timeline","/design-system/components/timeline",{"title":789,"_path":790,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":792,"_path":793,"children":794,"layout":13},"Ripple Framework","/framework",[795,796,814,836],{"title":792,"_path":793,"layout":13},{"title":797,"_path":798,"children":799},"Key Concepts","/framework/key-concepts",[800,802,805,808,811],{"title":608,"_path":801,"layout":13},"/framework/key-concepts/nuxt",{"title":803,"_path":804,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":806,"_path":807,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":809,"_path":810,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":812,"_path":813,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":815,"_path":816,"children":817},"Guides","/framework/guides",[818,821,824,827,830,833],{"title":819,"_path":820,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":822,"_path":823,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":825,"_path":826,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":828,"_path":829,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":831,"_path":832,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":834,"_path":835,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":837,"_path":838,"layout":13},"Core modules","/framework/core-modules",["Reactive",840],["Set"],["Reactive",842],{"module-navigation":843},null,true,"/design-system/components/form/",1714695654511]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/header/_payload.json b/design-system/components/header/_payload.json
index b540f4d430..895733551b 100644
--- a/design-system/components/header/_payload.json
+++ b/design-system/components/header/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":104,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695153722]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":104,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695651905]
\ No newline at end of file
diff --git a/design-system/components/header/index.html b/design-system/components/header/index.html
index 4236d53666..7558e13a53 100644
--- a/design-system/components/header/index.html
+++ b/design-system/components/header/index.html
@@ -29,65 +29,65 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsImageExample.gzBXNxRI.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsImageExample.8UN1-6g4.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/node.uMQX-T_c.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -99,8 +99,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Header</h1><p class="rpl-type-p-large" data-v-3163c6df>The Header component introduces the purpose and content of a page.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use headers to inform the user of what is on the page. The header must be placed at the top of a page above the main body content and styled as an H1-level heading.<!--]--></p><p><!--[-->Headers include optional content such as introduction text, journey links, a call to action and an introduction banner.<!--]--></p><p><!--[-->Headers should feature a primary message and/or call to action. They can be accompanied by supporting content such as images or corner graphics.<!--]--></p><p><!--[-->The header can also support a campaign logo if required. This will display above the page title.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-header--default-journey-links&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--default-journey-links&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Keep the header simple and concise.<!--]--></li><li><!--[-->Use clear calls to action that align with the message or task.<!--]--></li><li><!--[-->Only use images that add value to the content and support the message.<!--]--></li><li><!--[-->Include with featured links and buttons to help users perform key tasks.<!--]--></li><li><!--[-->Include an optional campaign logo.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t use a mix of reverse and default page title and introduction text styling.<!--]--></li><li><!--[-->Don’t include the same links in the main and introduction banners.<!--]--></li><li><!--[-->Don’t use with more than 6 journey links.<!--]--></li><li><!--[-->Don’t overload with content.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->The header has 3 variants:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->reverse<!--]--></li><li><!--[-->image.<!--]--></li><!--]--></ul><p><!--[-->The default and reverse variants can be used with journey links or a call to action. These guide users to perform tasks or navigate to related information.<!--]--></p><p><!--[-->They can display corner images to enhance brand recognition and visual prominence. They can also display a supporting campaign logo if required.<!--]--></p><p><!--[-->The image variant displays a full background image with reverse blocked text. It only supports a page title and introduction text.<!--]--></p><p><!--[-->All variants can be used with the introduction banner.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-header--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-header--default-call-to-action&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--default-call-to-action&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="reverse" data-v-ea525968><a href="#reverse" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Reverse<!--]--></a></h2><p><!--[-->The reverse variant uses reversed blocked type for the title and introduction text. This adds visual prominence to the banner and its information.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-header--reverse-journey-links&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--reverse-journey-links&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-header--reverse-call-to-action&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--reverse-call-to-action&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="image" data-v-ea525968><a href="#image" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Image<!--]--></a></h2><p><!--[-->An image can be added as a full background image. The title and introduction copy will always display as the reversed blocked type.<!--]--></p><p><!--[-->Images should not be stretched or too low in resolution. They should also not be complex or include text.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-header--image-reverse&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--image-reverse&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="introduction-banner" data-v-ea525968><a href="#introduction-banner" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Introduction banner<!--]--></a></h2><p><!--[-->The introduction banner:<!--]--></p><ul><!--[--><li><!--[-->can be used to add content and journey links under the page title and introduction section in the main header banner<!--]--></li><li><!--[-->has an optional icon and journey links<!--]--></li><li><!--[-->should contain content relating to the content in the main header.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-header--intro-with-links&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--intro-with-links&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="interaction-with-other-components" data-v-fff5b905><a href="#interaction-with-other-components" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Interaction with other components<!--]--></a></h2><p><!--[-->When using a featured campaign banner with an image, the image can overlap the header, depending on the amount of content. By default, this will hide the header&#39;s bottom corner shape.<!--]--></p><p><!--[-->The bottom corner shape won&#39;t hide if an introduction banner is between the header and campaign banner.<!--]--></p><figure class="docs-example" data-v-d653ba7c><div class="docs-example-body" data-v-d653ba7c><img src="/assets/img/campaign-banner-behaviour.png" alt="A demonstration of the interaction between the Header component and the campaign banner, the campaign banner image slightly overlaps the header." data-v-d653ba7c></div><!----></figure><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Headers can be themed in 2 ways:<!--]--></p><ul><!--[--><li><!--[-->site colour palette<!--]--></li><li><!--[-->neutral colour palette.<!--]--></li><!--]--></ul><p><!--[-->It will also adopt theming from the button component when displaying the call to action.<!--]--></p><p><!--[-->If you choose neutral button for your site, the header will display buttons in the neutral theme.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-header--default-call-to-action&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--default-call-to-action&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-header--reverse-journey-links&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--reverse-journey-links&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-header--intro-with-links&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--intro-with-links&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><h2 class="rpl-type-h3 docs-h3" id="neutral-theme" data-v-ea525968><a href="#neutral-theme" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Neutral theme<!--]--></a></h2><p><!--[-->Implemented at a site level, headers can have a neutral theme option. This option is only applicable to the reverse blocked type. Neutral headers have predefined neutral colour values that must be used and cannot be edited or customised.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-header--image-neutral&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--image-neutral&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><p><!--[-->To create your own theme see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/header.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/header/_payload.json">[{"state":1,"once":706,"_errors":708,"serverRendered":711,"path":7,"prerenderedAt":712},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":393,"$sdd-globals":409,"$sdd-navigation":411},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/header":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":388,"_id":389,"_source":390,"_file":391,"_extension":392},"/design-system/components/header","components",false,"","Header","The Header component introduces the purpose and content of a page.","page","Core",{"type":16,"children":17,"toc":370},"root",[18,27,33,38,43,48,53,60,90,96,119,123,129,134,152,157,162,167,172,177,181,185,190,195,199,203,209,214,219,223,229,234,252,256,259,265,270,275,281,284,290,295,308,313,318,331,337,342,346],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use headers to inform the user of what is on the page. The header must be placed at the top of a page above the main body content and styled as an H1-level heading.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Headers include optional content such as introduction text, journey links, a call to action and an introduction banner.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Headers should feature a primary message and/or call to action. They can be accompanied by supporting content such as images or corner graphics.",{"type":19,"tag":28,"props":44,"children":45},{},[46],{"type":25,"value":47},"The header can also support a campaign logo if required. This will display above the page title.",{"type":19,"tag":49,"props":50,"children":52},"docs-example",{"id":51},"core-containers-header--default-journey-links",[],{"type":19,"tag":54,"props":55,"children":57},"h3",{"id":56},"when-and-how-to-use",[58],{"type":25,"value":59},"When and how to use",{"type":19,"tag":61,"props":62,"children":63},"ul",{},[64,70,75,80,85],{"type":19,"tag":65,"props":66,"children":67},"li",{},[68],{"type":25,"value":69},"Keep the header simple and concise.",{"type":19,"tag":65,"props":71,"children":72},{},[73],{"type":25,"value":74},"Use clear calls to action that align with the message or task.",{"type":19,"tag":65,"props":76,"children":77},{},[78],{"type":25,"value":79},"Only use images that add value to the content and support the message.",{"type":19,"tag":65,"props":81,"children":82},{},[83],{"type":25,"value":84},"Include with featured links and buttons to help users perform key tasks.",{"type":19,"tag":65,"props":86,"children":87},{},[88],{"type":25,"value":89},"Include an optional campaign logo.",{"type":19,"tag":54,"props":91,"children":93},{"id":92},"when-and-how-not-to-use",[94],{"type":25,"value":95},"When and how not to use",{"type":19,"tag":61,"props":97,"children":98},{},[99,104,109,114],{"type":19,"tag":65,"props":100,"children":101},{},[102],{"type":25,"value":103},"Don’t use a mix of reverse and default page title and introduction text styling.",{"type":19,"tag":65,"props":105,"children":106},{},[107],{"type":25,"value":108},"Don’t include the same links in the main and introduction banners.",{"type":19,"tag":65,"props":110,"children":111},{},[112],{"type":25,"value":113},"Don’t use with more than 6 journey links.",{"type":19,"tag":65,"props":115,"children":116},{},[117],{"type":25,"value":118},"Don’t overload with content.",{"type":19,"tag":120,"props":121,"children":122},"hr",{},[],{"type":19,"tag":20,"props":124,"children":126},{"id":125},"variants",[127],{"type":25,"value":128},"Variants",{"type":19,"tag":28,"props":130,"children":131},{},[132],{"type":25,"value":133},"The header has 3 variants:",{"type":19,"tag":61,"props":135,"children":136},{},[137,142,147],{"type":19,"tag":65,"props":138,"children":139},{},[140],{"type":25,"value":141},"default",{"type":19,"tag":65,"props":143,"children":144},{},[145],{"type":25,"value":146},"reverse",{"type":19,"tag":65,"props":148,"children":149},{},[150],{"type":25,"value":151},"image.",{"type":19,"tag":28,"props":153,"children":154},{},[155],{"type":25,"value":156},"The default and reverse variants can be used with journey links or a call to action. These guide users to perform tasks or navigate to related information.",{"type":19,"tag":28,"props":158,"children":159},{},[160],{"type":25,"value":161},"They can display corner images to enhance brand recognition and visual prominence. They can also display a supporting campaign logo if required.",{"type":19,"tag":28,"props":163,"children":164},{},[165],{"type":25,"value":166},"The image variant displays a full background image with reverse blocked text. It only supports a page title and introduction text.",{"type":19,"tag":28,"props":168,"children":169},{},[170],{"type":25,"value":171},"All variants can be used with the introduction banner.",{"type":19,"tag":54,"props":173,"children":174},{"id":141},[175],{"type":25,"value":176},"Default",{"type":19,"tag":49,"props":178,"children":180},{"id":179},"core-containers-header--default-story",[],{"type":19,"tag":49,"props":182,"children":184},{"id":183},"core-containers-header--default-call-to-action",[],{"type":19,"tag":54,"props":186,"children":187},{"id":146},[188],{"type":25,"value":189},"Reverse",{"type":19,"tag":28,"props":191,"children":192},{},[193],{"type":25,"value":194},"The reverse variant uses reversed blocked type for the title and introduction text. This adds visual prominence to the banner and its information.",{"type":19,"tag":49,"props":196,"children":198},{"id":197},"core-containers-header--reverse-journey-links",[],{"type":19,"tag":49,"props":200,"children":202},{"id":201},"core-containers-header--reverse-call-to-action",[],{"type":19,"tag":54,"props":204,"children":206},{"id":205},"image",[207],{"type":25,"value":208},"Image",{"type":19,"tag":28,"props":210,"children":211},{},[212],{"type":25,"value":213},"An image can be added as a full background image. The title and introduction copy will always display as the reversed blocked type.",{"type":19,"tag":28,"props":215,"children":216},{},[217],{"type":25,"value":218},"Images should not be stretched or too low in resolution. They should also not be complex or include text.",{"type":19,"tag":49,"props":220,"children":222},{"id":221},"core-containers-header--image-reverse",[],{"type":19,"tag":54,"props":224,"children":226},{"id":225},"introduction-banner",[227],{"type":25,"value":228},"Introduction banner",{"type":19,"tag":28,"props":230,"children":231},{},[232],{"type":25,"value":233},"The introduction banner:",{"type":19,"tag":61,"props":235,"children":236},{},[237,242,247],{"type":19,"tag":65,"props":238,"children":239},{},[240],{"type":25,"value":241},"can be used to add content and journey links under the page title and introduction section in the main header banner",{"type":19,"tag":65,"props":243,"children":244},{},[245],{"type":25,"value":246},"has an optional icon and journey links",{"type":19,"tag":65,"props":248,"children":249},{},[250],{"type":25,"value":251},"should contain content relating to the content in the main header.",{"type":19,"tag":49,"props":253,"children":255},{"id":254},"core-containers-header--intro-with-links",[],{"type":19,"tag":120,"props":257,"children":258},{},[],{"type":19,"tag":20,"props":260,"children":262},{"id":261},"interaction-with-other-components",[263],{"type":25,"value":264},"Interaction with other components",{"type":19,"tag":28,"props":266,"children":267},{},[268],{"type":25,"value":269},"When using a featured campaign banner with an image, the image can overlap the header, depending on the amount of content. By default, this will hide the header's bottom corner shape.",{"type":19,"tag":28,"props":271,"children":272},{},[273],{"type":25,"value":274},"The bottom corner shape won't hide if an introduction banner is between the header and campaign banner.",{"type":19,"tag":276,"props":277,"children":280},"docs-image-example",{"alt":278,"src":279},"A demonstration of the interaction between the Header component and the campaign banner, the campaign banner image slightly overlaps the header.","/assets/img/campaign-banner-behaviour.png",[],{"type":19,"tag":120,"props":282,"children":283},{},[],{"type":19,"tag":20,"props":285,"children":287},{"id":286},"theming",[288],{"type":25,"value":289},"Theming",{"type":19,"tag":28,"props":291,"children":292},{},[293],{"type":25,"value":294},"Headers can be themed in 2 ways:",{"type":19,"tag":61,"props":296,"children":297},{},[298,303],{"type":19,"tag":65,"props":299,"children":300},{},[301],{"type":25,"value":302},"site colour palette",{"type":19,"tag":65,"props":304,"children":305},{},[306],{"type":25,"value":307},"neutral colour palette.",{"type":19,"tag":28,"props":309,"children":310},{},[311],{"type":25,"value":312},"It will also adopt theming from the button component when displaying the call to action.",{"type":19,"tag":28,"props":314,"children":315},{},[316],{"type":25,"value":317},"If you choose neutral button for your site, the header will display buttons in the neutral theme.",{"type":19,"tag":319,"props":320,"children":321},"docs-theme-chooser",{},[322,325,328],{"type":19,"tag":49,"props":323,"children":324},{"id":183},[],{"type":19,"tag":49,"props":326,"children":327},{"id":197},[],{"type":19,"tag":49,"props":329,"children":330},{"id":254},[],{"type":19,"tag":54,"props":332,"children":334},{"id":333},"neutral-theme",[335],{"type":25,"value":336},"Neutral theme",{"type":19,"tag":28,"props":338,"children":339},{},[340],{"type":25,"value":341},"Implemented at a site level, headers can have a neutral theme option. This option is only applicable to the reverse blocked type. Neutral headers have predefined neutral colour values that must be used and cannot be edited or customised.",{"type":19,"tag":49,"props":343,"children":345},{"id":344},"core-containers-header--image-neutral",[],{"type":19,"tag":28,"props":347,"children":348},{},[349,351,360,362,368],{"type":25,"value":350},"To create your own theme see ",{"type":19,"tag":352,"props":353,"children":357},"a",{"href":354,"rel":355},"https://www.vic.gov.au",[356],"nofollow",[358],{"type":25,"value":359},"theming guidance for designers",{"type":25,"value":361}," or ",{"type":19,"tag":352,"props":363,"children":365},{"href":354,"rel":364},[356],[366],{"type":25,"value":367},"theming guidance for developers",{"type":25,"value":369},".",{"title":10,"searchDepth":371,"depth":371,"links":372},2,[373,378,384,385],{"id":22,"depth":371,"text":26,"children":374},[375,377],{"id":56,"depth":376,"text":59},3,{"id":92,"depth":376,"text":95},{"id":125,"depth":371,"text":128,"children":379},[380,381,382,383],{"id":141,"depth":376,"text":176},{"id":146,"depth":376,"text":189},{"id":205,"depth":376,"text":208},{"id":225,"depth":376,"text":228},{"id":261,"depth":371,"text":264},{"id":286,"depth":371,"text":289,"children":386},[387],{"id":333,"depth":376,"text":336},"markdown","content:design-system:5.components:header.md","content","design-system/5.components/header.md","md",["ShallowRef",394],["ShallowReactive",395],{"/design-system/components/header":396},[397,403],{"_path":398,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":399,"description":400,"layout":13,"label":14,"_type":388,"_id":401,"_source":390,"_file":402,"_extension":392},"/design-system/components/form","Form","The Form component guides users to give information and consists of a group of related inputs or controls.","content:design-system:5.components:form.md","design-system/5.components/form.md",{"_path":404,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":405,"description":406,"layout":13,"label":14,"_type":388,"_id":407,"_source":390,"_file":408,"_extension":392},"/design-system/components/in-page-navigation","In-page navigation","The In-page navigation component sits above a page’s main content and shows a set of links.","content:design-system:5.components:in-page-navigation.md","design-system/5.components/in-page-navigation.md",["ShallowRef",410],{},[412,417,658],{"title":413,"_path":414,"icon":415,"layout":416},"Ripple Design System","/","carbon:home","home",{"title":418,"_path":419,"children":420},"Design System","/design-system",[421,437,453,482,516],{"title":422,"_path":423,"children":424},"About","/design-system/about",[425,428,431,434],{"title":426,"_path":427,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":429,"_path":430,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":432,"_path":433,"layout":13},"Support","/design-system/about/getting-support",{"title":435,"_path":436,"layout":13},"Contributing","/design-system/about/contributing",{"title":438,"_path":439,"children":440},"Design","/design-system/design",[441,444,447,450],{"title":442,"_path":443,"layout":13},"Getting started","/design-system/design/getting-started",{"title":445,"_path":446,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":448,"_path":449,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":451,"_path":452,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":454,"_path":455,"children":456},"Develop","/design-system/develop",[457,459,461,464],{"title":442,"_path":458,"layout":13},"/design-system/develop/getting-started",{"title":435,"_path":460,"layout":13},"/design-system/develop/contributing",{"title":462,"_path":463,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":465,"children":466,"layout":13},"/design-system/develop/usage",[467,470,473,476,479],{"title":468,"_path":469,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":471,"_path":472,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":474,"_path":475,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":477,"_path":478,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":480,"_path":481,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":483,"_path":484,"children":485},"Styles","/design-system/styles",[486,489,492,495,498,501,504,507,510,513],{"title":487,"_path":488,"layout":13},"Colour","/design-system/styles/colour",{"title":490,"_path":491,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":493,"_path":494,"layout":13},"Grid","/design-system/styles/grid",{"title":496,"_path":497,"layout":13},"Icons","/design-system/styles/icons",{"title":499,"_path":500,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":502,"_path":503,"layout":13},"Layout","/design-system/styles/layout",{"title":505,"_path":506,"layout":13},"Logo","/design-system/styles/logo",{"title":508,"_path":509,"layout":13},"Motion","/design-system/styles/motion",{"title":511,"_path":512,"layout":13},"Spacing","/design-system/styles/spacing",{"title":514,"_path":515,"layout":13},"Typography","/design-system/styles/typography",{"title":517,"_path":518,"children":519},"Components","/design-system/components",[520,523,526,529,532,535,538,541,544,547,550,553,556,559,562,565,568,571,574,577,580,581,584,585,586,589,592,595,598,601,604,607,610,613,616,619,622,625,628,631,634,637,640,643,646,649,652,655],{"title":521,"_path":522,"layout":13},"Accordion","/design-system/components/accordion",{"title":524,"_path":525,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":527,"_path":528,"layout":13},"Alert","/design-system/components/alert",{"title":530,"_path":531,"layout":13},"Block quote","/design-system/components/block-quote",{"title":533,"_path":534,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":536,"_path":537,"layout":13},"Button","/design-system/components/button",{"title":539,"_path":540,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":542,"_path":543,"layout":13},"Callout","/design-system/components/callout",{"title":545,"_path":546,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":548,"_path":549,"layout":13},"Card","/design-system/components/card",{"title":551,"_path":552,"layout":13},"Carousel","/design-system/components/carousel",{"title":554,"_path":555,"layout":13},"Category grid","/design-system/components/category-grid",{"title":557,"_path":558,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":560,"_path":561,"layout":13},"Chip","/design-system/components/chip",{"title":563,"_path":564,"layout":13},"Contact us","/design-system/components/contact-us",{"title":566,"_path":567,"layout":13},"Date input","/design-system/components/date-input",{"title":569,"_path":570,"layout":13},"Detail list","/design-system/components/detail-list",{"title":572,"_path":573,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":575,"_path":576,"layout":13},"File","/design-system/components/file",{"title":578,"_path":579,"layout":13},"Footer","/design-system/components/footer",{"title":399,"_path":398,"layout":13},{"title":582,"_path":583,"layout":13},"Form alert","/design-system/components/form-alert",{"title":11,"_path":7,"layout":13},{"title":405,"_path":404,"layout":13},{"title":587,"_path":588,"layout":13},"Input field","/design-system/components/input-field",{"title":590,"_path":591,"layout":13},"Key dates","/design-system/components/key-dates",{"title":593,"_path":594,"layout":13},"Media","/design-system/components/media",{"title":596,"_path":597,"layout":13},"Media embed","/design-system/components/media-embed",{"title":599,"_path":600,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":602,"_path":603,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":605,"_path":606,"layout":13},"Option button","/design-system/components/option-button",{"title":608,"_path":609,"layout":13},"Page action","/design-system/components/page-action",{"title":611,"_path":612,"layout":13},"Pagination","/design-system/components/pagination",{"title":614,"_path":615,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":617,"_path":618,"layout":13},"Profile","/design-system/components/profile",{"title":620,"_path":621,"layout":13},"Radio button","/design-system/components/radio-button",{"title":623,"_path":624,"layout":13},"Related links","/design-system/components/related-links",{"title":626,"_path":627,"layout":13},"Results listing","/design-system/components/results-listing",{"title":629,"_path":630,"layout":13},"Search bar","/design-system/components/search-bar",{"title":632,"_path":633,"layout":13},"Skip link","/design-system/components/skip-link",{"title":635,"_path":636,"layout":13},"Social share","/design-system/components/social-share",{"title":638,"_path":639,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":641,"_path":642,"layout":13},"Table","/design-system/components/table",{"title":644,"_path":645,"layout":13},"Tabs","/design-system/components/tabs",{"title":647,"_path":648,"layout":13},"Tag","/design-system/components/tag",{"title":650,"_path":651,"layout":13},"Text area","/design-system/components/text-area",{"title":653,"_path":654,"layout":13},"Timeline","/design-system/components/timeline",{"title":656,"_path":657,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":659,"_path":660,"children":661,"layout":13},"Ripple Framework","/framework",[662,663,681,703],{"title":659,"_path":660,"layout":13},{"title":664,"_path":665,"children":666},"Key Concepts","/framework/key-concepts",[667,669,672,675,678],{"title":474,"_path":668,"layout":13},"/framework/key-concepts/nuxt",{"title":670,"_path":671,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":673,"_path":674,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":676,"_path":677,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":679,"_path":680,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":682,"_path":683,"children":684},"Guides","/framework/guides",[685,688,691,694,697,700],{"title":686,"_path":687,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":689,"_path":690,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":692,"_path":693,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":695,"_path":696,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":698,"_path":699,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":701,"_path":702,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":704,"_path":705,"layout":13},"Core modules","/framework/core-modules",["Reactive",707],["Set"],["Reactive",709],{"module-navigation":710},null,true,1714695153722]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Header</h1><p class="rpl-type-p-large" data-v-3163c6df>The Header component introduces the purpose and content of a page.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use headers to inform the user of what is on the page. The header must be placed at the top of a page above the main body content and styled as an H1-level heading.<!--]--></p><p><!--[-->Headers include optional content such as introduction text, journey links, a call to action and an introduction banner.<!--]--></p><p><!--[-->Headers should feature a primary message and/or call to action. They can be accompanied by supporting content such as images or corner graphics.<!--]--></p><p><!--[-->The header can also support a campaign logo if required. This will display above the page title.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-header--default-journey-links&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--default-journey-links&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Keep the header simple and concise.<!--]--></li><li><!--[-->Use clear calls to action that align with the message or task.<!--]--></li><li><!--[-->Only use images that add value to the content and support the message.<!--]--></li><li><!--[-->Include with featured links and buttons to help users perform key tasks.<!--]--></li><li><!--[-->Include an optional campaign logo.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t use a mix of reverse and default page title and introduction text styling.<!--]--></li><li><!--[-->Don’t include the same links in the main and introduction banners.<!--]--></li><li><!--[-->Don’t use with more than 6 journey links.<!--]--></li><li><!--[-->Don’t overload with content.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->The header has 3 variants:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->reverse<!--]--></li><li><!--[-->image.<!--]--></li><!--]--></ul><p><!--[-->The default and reverse variants can be used with journey links or a call to action. These guide users to perform tasks or navigate to related information.<!--]--></p><p><!--[-->They can display corner images to enhance brand recognition and visual prominence. They can also display a supporting campaign logo if required.<!--]--></p><p><!--[-->The image variant displays a full background image with reverse blocked text. It only supports a page title and introduction text.<!--]--></p><p><!--[-->All variants can be used with the introduction banner.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-header--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-header--default-call-to-action&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--default-call-to-action&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="reverse" data-v-ea525968><a href="#reverse" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Reverse<!--]--></a></h2><p><!--[-->The reverse variant uses reversed blocked type for the title and introduction text. This adds visual prominence to the banner and its information.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-header--reverse-journey-links&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--reverse-journey-links&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-header--reverse-call-to-action&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--reverse-call-to-action&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="image" data-v-ea525968><a href="#image" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Image<!--]--></a></h2><p><!--[-->An image can be added as a full background image. The title and introduction copy will always display as the reversed blocked type.<!--]--></p><p><!--[-->Images should not be stretched or too low in resolution. They should also not be complex or include text.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-header--image-reverse&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--image-reverse&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="introduction-banner" data-v-ea525968><a href="#introduction-banner" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Introduction banner<!--]--></a></h2><p><!--[-->The introduction banner:<!--]--></p><ul><!--[--><li><!--[-->can be used to add content and journey links under the page title and introduction section in the main header banner<!--]--></li><li><!--[-->has an optional icon and journey links<!--]--></li><li><!--[-->should contain content relating to the content in the main header.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-header--intro-with-links&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--intro-with-links&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="interaction-with-other-components" data-v-fff5b905><a href="#interaction-with-other-components" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Interaction with other components<!--]--></a></h2><p><!--[-->When using a featured campaign banner with an image, the image can overlap the header, depending on the amount of content. By default, this will hide the header&#39;s bottom corner shape.<!--]--></p><p><!--[-->The bottom corner shape won&#39;t hide if an introduction banner is between the header and campaign banner.<!--]--></p><figure class="docs-example" data-v-d653ba7c><div class="docs-example-body" data-v-d653ba7c><img src="/assets/img/campaign-banner-behaviour.png" alt="A demonstration of the interaction between the Header component and the campaign banner, the campaign banner image slightly overlaps the header." data-v-d653ba7c></div><!----></figure><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Headers can be themed in 2 ways:<!--]--></p><ul><!--[--><li><!--[-->site colour palette<!--]--></li><li><!--[-->neutral colour palette.<!--]--></li><!--]--></ul><p><!--[-->It will also adopt theming from the button component when displaying the call to action.<!--]--></p><p><!--[-->If you choose neutral button for your site, the header will display buttons in the neutral theme.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-header--default-call-to-action&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--default-call-to-action&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-header--reverse-journey-links&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--reverse-journey-links&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-header--intro-with-links&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--intro-with-links&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><h2 class="rpl-type-h3 docs-h3" id="neutral-theme" data-v-ea525968><a href="#neutral-theme" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Neutral theme<!--]--></a></h2><p><!--[-->Implemented at a site level, headers can have a neutral theme option. This option is only applicable to the reverse blocked type. Neutral headers have predefined neutral colour values that must be used and cannot be edited or customised.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-header--image-neutral&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-header--image-neutral&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><p><!--[-->To create your own theme see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/header.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/header/_payload.json">[{"state":1,"once":706,"_errors":708,"serverRendered":711,"path":7,"prerenderedAt":712},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":393,"$sdd-globals":409,"$sdd-navigation":411},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/header":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":388,"_id":389,"_source":390,"_file":391,"_extension":392},"/design-system/components/header","components",false,"","Header","The Header component introduces the purpose and content of a page.","page","Core",{"type":16,"children":17,"toc":370},"root",[18,27,33,38,43,48,53,60,90,96,119,123,129,134,152,157,162,167,172,177,181,185,190,195,199,203,209,214,219,223,229,234,252,256,259,265,270,275,281,284,290,295,308,313,318,331,337,342,346],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use headers to inform the user of what is on the page. The header must be placed at the top of a page above the main body content and styled as an H1-level heading.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Headers include optional content such as introduction text, journey links, a call to action and an introduction banner.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Headers should feature a primary message and/or call to action. They can be accompanied by supporting content such as images or corner graphics.",{"type":19,"tag":28,"props":44,"children":45},{},[46],{"type":25,"value":47},"The header can also support a campaign logo if required. This will display above the page title.",{"type":19,"tag":49,"props":50,"children":52},"docs-example",{"id":51},"core-containers-header--default-journey-links",[],{"type":19,"tag":54,"props":55,"children":57},"h3",{"id":56},"when-and-how-to-use",[58],{"type":25,"value":59},"When and how to use",{"type":19,"tag":61,"props":62,"children":63},"ul",{},[64,70,75,80,85],{"type":19,"tag":65,"props":66,"children":67},"li",{},[68],{"type":25,"value":69},"Keep the header simple and concise.",{"type":19,"tag":65,"props":71,"children":72},{},[73],{"type":25,"value":74},"Use clear calls to action that align with the message or task.",{"type":19,"tag":65,"props":76,"children":77},{},[78],{"type":25,"value":79},"Only use images that add value to the content and support the message.",{"type":19,"tag":65,"props":81,"children":82},{},[83],{"type":25,"value":84},"Include with featured links and buttons to help users perform key tasks.",{"type":19,"tag":65,"props":86,"children":87},{},[88],{"type":25,"value":89},"Include an optional campaign logo.",{"type":19,"tag":54,"props":91,"children":93},{"id":92},"when-and-how-not-to-use",[94],{"type":25,"value":95},"When and how not to use",{"type":19,"tag":61,"props":97,"children":98},{},[99,104,109,114],{"type":19,"tag":65,"props":100,"children":101},{},[102],{"type":25,"value":103},"Don’t use a mix of reverse and default page title and introduction text styling.",{"type":19,"tag":65,"props":105,"children":106},{},[107],{"type":25,"value":108},"Don’t include the same links in the main and introduction banners.",{"type":19,"tag":65,"props":110,"children":111},{},[112],{"type":25,"value":113},"Don’t use with more than 6 journey links.",{"type":19,"tag":65,"props":115,"children":116},{},[117],{"type":25,"value":118},"Don’t overload with content.",{"type":19,"tag":120,"props":121,"children":122},"hr",{},[],{"type":19,"tag":20,"props":124,"children":126},{"id":125},"variants",[127],{"type":25,"value":128},"Variants",{"type":19,"tag":28,"props":130,"children":131},{},[132],{"type":25,"value":133},"The header has 3 variants:",{"type":19,"tag":61,"props":135,"children":136},{},[137,142,147],{"type":19,"tag":65,"props":138,"children":139},{},[140],{"type":25,"value":141},"default",{"type":19,"tag":65,"props":143,"children":144},{},[145],{"type":25,"value":146},"reverse",{"type":19,"tag":65,"props":148,"children":149},{},[150],{"type":25,"value":151},"image.",{"type":19,"tag":28,"props":153,"children":154},{},[155],{"type":25,"value":156},"The default and reverse variants can be used with journey links or a call to action. These guide users to perform tasks or navigate to related information.",{"type":19,"tag":28,"props":158,"children":159},{},[160],{"type":25,"value":161},"They can display corner images to enhance brand recognition and visual prominence. They can also display a supporting campaign logo if required.",{"type":19,"tag":28,"props":163,"children":164},{},[165],{"type":25,"value":166},"The image variant displays a full background image with reverse blocked text. It only supports a page title and introduction text.",{"type":19,"tag":28,"props":168,"children":169},{},[170],{"type":25,"value":171},"All variants can be used with the introduction banner.",{"type":19,"tag":54,"props":173,"children":174},{"id":141},[175],{"type":25,"value":176},"Default",{"type":19,"tag":49,"props":178,"children":180},{"id":179},"core-containers-header--default-story",[],{"type":19,"tag":49,"props":182,"children":184},{"id":183},"core-containers-header--default-call-to-action",[],{"type":19,"tag":54,"props":186,"children":187},{"id":146},[188],{"type":25,"value":189},"Reverse",{"type":19,"tag":28,"props":191,"children":192},{},[193],{"type":25,"value":194},"The reverse variant uses reversed blocked type for the title and introduction text. This adds visual prominence to the banner and its information.",{"type":19,"tag":49,"props":196,"children":198},{"id":197},"core-containers-header--reverse-journey-links",[],{"type":19,"tag":49,"props":200,"children":202},{"id":201},"core-containers-header--reverse-call-to-action",[],{"type":19,"tag":54,"props":204,"children":206},{"id":205},"image",[207],{"type":25,"value":208},"Image",{"type":19,"tag":28,"props":210,"children":211},{},[212],{"type":25,"value":213},"An image can be added as a full background image. The title and introduction copy will always display as the reversed blocked type.",{"type":19,"tag":28,"props":215,"children":216},{},[217],{"type":25,"value":218},"Images should not be stretched or too low in resolution. They should also not be complex or include text.",{"type":19,"tag":49,"props":220,"children":222},{"id":221},"core-containers-header--image-reverse",[],{"type":19,"tag":54,"props":224,"children":226},{"id":225},"introduction-banner",[227],{"type":25,"value":228},"Introduction banner",{"type":19,"tag":28,"props":230,"children":231},{},[232],{"type":25,"value":233},"The introduction banner:",{"type":19,"tag":61,"props":235,"children":236},{},[237,242,247],{"type":19,"tag":65,"props":238,"children":239},{},[240],{"type":25,"value":241},"can be used to add content and journey links under the page title and introduction section in the main header banner",{"type":19,"tag":65,"props":243,"children":244},{},[245],{"type":25,"value":246},"has an optional icon and journey links",{"type":19,"tag":65,"props":248,"children":249},{},[250],{"type":25,"value":251},"should contain content relating to the content in the main header.",{"type":19,"tag":49,"props":253,"children":255},{"id":254},"core-containers-header--intro-with-links",[],{"type":19,"tag":120,"props":257,"children":258},{},[],{"type":19,"tag":20,"props":260,"children":262},{"id":261},"interaction-with-other-components",[263],{"type":25,"value":264},"Interaction with other components",{"type":19,"tag":28,"props":266,"children":267},{},[268],{"type":25,"value":269},"When using a featured campaign banner with an image, the image can overlap the header, depending on the amount of content. By default, this will hide the header's bottom corner shape.",{"type":19,"tag":28,"props":271,"children":272},{},[273],{"type":25,"value":274},"The bottom corner shape won't hide if an introduction banner is between the header and campaign banner.",{"type":19,"tag":276,"props":277,"children":280},"docs-image-example",{"alt":278,"src":279},"A demonstration of the interaction between the Header component and the campaign banner, the campaign banner image slightly overlaps the header.","/assets/img/campaign-banner-behaviour.png",[],{"type":19,"tag":120,"props":282,"children":283},{},[],{"type":19,"tag":20,"props":285,"children":287},{"id":286},"theming",[288],{"type":25,"value":289},"Theming",{"type":19,"tag":28,"props":291,"children":292},{},[293],{"type":25,"value":294},"Headers can be themed in 2 ways:",{"type":19,"tag":61,"props":296,"children":297},{},[298,303],{"type":19,"tag":65,"props":299,"children":300},{},[301],{"type":25,"value":302},"site colour palette",{"type":19,"tag":65,"props":304,"children":305},{},[306],{"type":25,"value":307},"neutral colour palette.",{"type":19,"tag":28,"props":309,"children":310},{},[311],{"type":25,"value":312},"It will also adopt theming from the button component when displaying the call to action.",{"type":19,"tag":28,"props":314,"children":315},{},[316],{"type":25,"value":317},"If you choose neutral button for your site, the header will display buttons in the neutral theme.",{"type":19,"tag":319,"props":320,"children":321},"docs-theme-chooser",{},[322,325,328],{"type":19,"tag":49,"props":323,"children":324},{"id":183},[],{"type":19,"tag":49,"props":326,"children":327},{"id":197},[],{"type":19,"tag":49,"props":329,"children":330},{"id":254},[],{"type":19,"tag":54,"props":332,"children":334},{"id":333},"neutral-theme",[335],{"type":25,"value":336},"Neutral theme",{"type":19,"tag":28,"props":338,"children":339},{},[340],{"type":25,"value":341},"Implemented at a site level, headers can have a neutral theme option. This option is only applicable to the reverse blocked type. Neutral headers have predefined neutral colour values that must be used and cannot be edited or customised.",{"type":19,"tag":49,"props":343,"children":345},{"id":344},"core-containers-header--image-neutral",[],{"type":19,"tag":28,"props":347,"children":348},{},[349,351,360,362,368],{"type":25,"value":350},"To create your own theme see ",{"type":19,"tag":352,"props":353,"children":357},"a",{"href":354,"rel":355},"https://www.vic.gov.au",[356],"nofollow",[358],{"type":25,"value":359},"theming guidance for designers",{"type":25,"value":361}," or ",{"type":19,"tag":352,"props":363,"children":365},{"href":354,"rel":364},[356],[366],{"type":25,"value":367},"theming guidance for developers",{"type":25,"value":369},".",{"title":10,"searchDepth":371,"depth":371,"links":372},2,[373,378,384,385],{"id":22,"depth":371,"text":26,"children":374},[375,377],{"id":56,"depth":376,"text":59},3,{"id":92,"depth":376,"text":95},{"id":125,"depth":371,"text":128,"children":379},[380,381,382,383],{"id":141,"depth":376,"text":176},{"id":146,"depth":376,"text":189},{"id":205,"depth":376,"text":208},{"id":225,"depth":376,"text":228},{"id":261,"depth":371,"text":264},{"id":286,"depth":371,"text":289,"children":386},[387],{"id":333,"depth":376,"text":336},"markdown","content:design-system:5.components:header.md","content","design-system/5.components/header.md","md",["ShallowRef",394],["ShallowReactive",395],{"/design-system/components/header":396},[397,403],{"_path":398,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":399,"description":400,"layout":13,"label":14,"_type":388,"_id":401,"_source":390,"_file":402,"_extension":392},"/design-system/components/form","Form","The Form component guides users to give information and consists of a group of related inputs or controls.","content:design-system:5.components:form.md","design-system/5.components/form.md",{"_path":404,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":405,"description":406,"layout":13,"label":14,"_type":388,"_id":407,"_source":390,"_file":408,"_extension":392},"/design-system/components/in-page-navigation","In-page navigation","The In-page navigation component sits above a page’s main content and shows a set of links.","content:design-system:5.components:in-page-navigation.md","design-system/5.components/in-page-navigation.md",["ShallowRef",410],{},[412,417,658],{"title":413,"_path":414,"icon":415,"layout":416},"Ripple Design System","/","carbon:home","home",{"title":418,"_path":419,"children":420},"Design System","/design-system",[421,437,453,482,516],{"title":422,"_path":423,"children":424},"About","/design-system/about",[425,428,431,434],{"title":426,"_path":427,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":429,"_path":430,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":432,"_path":433,"layout":13},"Support","/design-system/about/getting-support",{"title":435,"_path":436,"layout":13},"Contributing","/design-system/about/contributing",{"title":438,"_path":439,"children":440},"Design","/design-system/design",[441,444,447,450],{"title":442,"_path":443,"layout":13},"Getting started","/design-system/design/getting-started",{"title":445,"_path":446,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":448,"_path":449,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":451,"_path":452,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":454,"_path":455,"children":456},"Develop","/design-system/develop",[457,459,461,464],{"title":442,"_path":458,"layout":13},"/design-system/develop/getting-started",{"title":435,"_path":460,"layout":13},"/design-system/develop/contributing",{"title":462,"_path":463,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":465,"children":466,"layout":13},"/design-system/develop/usage",[467,470,473,476,479],{"title":468,"_path":469,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":471,"_path":472,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":474,"_path":475,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":477,"_path":478,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":480,"_path":481,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":483,"_path":484,"children":485},"Styles","/design-system/styles",[486,489,492,495,498,501,504,507,510,513],{"title":487,"_path":488,"layout":13},"Colour","/design-system/styles/colour",{"title":490,"_path":491,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":493,"_path":494,"layout":13},"Grid","/design-system/styles/grid",{"title":496,"_path":497,"layout":13},"Icons","/design-system/styles/icons",{"title":499,"_path":500,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":502,"_path":503,"layout":13},"Layout","/design-system/styles/layout",{"title":505,"_path":506,"layout":13},"Logo","/design-system/styles/logo",{"title":508,"_path":509,"layout":13},"Motion","/design-system/styles/motion",{"title":511,"_path":512,"layout":13},"Spacing","/design-system/styles/spacing",{"title":514,"_path":515,"layout":13},"Typography","/design-system/styles/typography",{"title":517,"_path":518,"children":519},"Components","/design-system/components",[520,523,526,529,532,535,538,541,544,547,550,553,556,559,562,565,568,571,574,577,580,581,584,585,586,589,592,595,598,601,604,607,610,613,616,619,622,625,628,631,634,637,640,643,646,649,652,655],{"title":521,"_path":522,"layout":13},"Accordion","/design-system/components/accordion",{"title":524,"_path":525,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":527,"_path":528,"layout":13},"Alert","/design-system/components/alert",{"title":530,"_path":531,"layout":13},"Block quote","/design-system/components/block-quote",{"title":533,"_path":534,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":536,"_path":537,"layout":13},"Button","/design-system/components/button",{"title":539,"_path":540,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":542,"_path":543,"layout":13},"Callout","/design-system/components/callout",{"title":545,"_path":546,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":548,"_path":549,"layout":13},"Card","/design-system/components/card",{"title":551,"_path":552,"layout":13},"Carousel","/design-system/components/carousel",{"title":554,"_path":555,"layout":13},"Category grid","/design-system/components/category-grid",{"title":557,"_path":558,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":560,"_path":561,"layout":13},"Chip","/design-system/components/chip",{"title":563,"_path":564,"layout":13},"Contact us","/design-system/components/contact-us",{"title":566,"_path":567,"layout":13},"Date input","/design-system/components/date-input",{"title":569,"_path":570,"layout":13},"Detail list","/design-system/components/detail-list",{"title":572,"_path":573,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":575,"_path":576,"layout":13},"File","/design-system/components/file",{"title":578,"_path":579,"layout":13},"Footer","/design-system/components/footer",{"title":399,"_path":398,"layout":13},{"title":582,"_path":583,"layout":13},"Form alert","/design-system/components/form-alert",{"title":11,"_path":7,"layout":13},{"title":405,"_path":404,"layout":13},{"title":587,"_path":588,"layout":13},"Input field","/design-system/components/input-field",{"title":590,"_path":591,"layout":13},"Key dates","/design-system/components/key-dates",{"title":593,"_path":594,"layout":13},"Media","/design-system/components/media",{"title":596,"_path":597,"layout":13},"Media embed","/design-system/components/media-embed",{"title":599,"_path":600,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":602,"_path":603,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":605,"_path":606,"layout":13},"Option button","/design-system/components/option-button",{"title":608,"_path":609,"layout":13},"Page action","/design-system/components/page-action",{"title":611,"_path":612,"layout":13},"Pagination","/design-system/components/pagination",{"title":614,"_path":615,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":617,"_path":618,"layout":13},"Profile","/design-system/components/profile",{"title":620,"_path":621,"layout":13},"Radio button","/design-system/components/radio-button",{"title":623,"_path":624,"layout":13},"Related links","/design-system/components/related-links",{"title":626,"_path":627,"layout":13},"Results listing","/design-system/components/results-listing",{"title":629,"_path":630,"layout":13},"Search bar","/design-system/components/search-bar",{"title":632,"_path":633,"layout":13},"Skip link","/design-system/components/skip-link",{"title":635,"_path":636,"layout":13},"Social share","/design-system/components/social-share",{"title":638,"_path":639,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":641,"_path":642,"layout":13},"Table","/design-system/components/table",{"title":644,"_path":645,"layout":13},"Tabs","/design-system/components/tabs",{"title":647,"_path":648,"layout":13},"Tag","/design-system/components/tag",{"title":650,"_path":651,"layout":13},"Text area","/design-system/components/text-area",{"title":653,"_path":654,"layout":13},"Timeline","/design-system/components/timeline",{"title":656,"_path":657,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":659,"_path":660,"children":661,"layout":13},"Ripple Framework","/framework",[662,663,681,703],{"title":659,"_path":660,"layout":13},{"title":664,"_path":665,"children":666},"Key Concepts","/framework/key-concepts",[667,669,672,675,678],{"title":474,"_path":668,"layout":13},"/framework/key-concepts/nuxt",{"title":670,"_path":671,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":673,"_path":674,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":676,"_path":677,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":679,"_path":680,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":682,"_path":683,"children":684},"Guides","/framework/guides",[685,688,691,694,697,700],{"title":686,"_path":687,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":689,"_path":690,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":692,"_path":693,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":695,"_path":696,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":698,"_path":699,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":701,"_path":702,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":704,"_path":705,"layout":13},"Core modules","/framework/core-modules",["Reactive",707],["Set"],["Reactive",709],{"module-navigation":710},null,true,1714695651905]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/in-page-navigation/_payload.json b/design-system/components/in-page-navigation/_payload.json
index 4118bbc992..42b4c98189 100644
--- a/design-system/components/in-page-navigation/_payload.json
+++ b/design-system/components/in-page-navigation/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695155870]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695653992]
\ No newline at end of file
diff --git a/design-system/components/in-page-navigation/index.html b/design-system/components/in-page-navigation/index.html
index 084ca54100..8ea7b4907c 100644
--- a/design-system/components/in-page-navigation/index.html
+++ b/design-system/components/in-page-navigation/index.html
@@ -28,63 +28,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -96,8 +96,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>In-page navigation</h1><p class="rpl-type-p-large" data-v-3163c6df>The In-page navigation component sits above a page’s main content and shows a set of links.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use in-page navigation to make scanning and navigating within a single page quicker for users. This component shows links to headings that are on the current page. It sits at the top of the page.<!--]--></p><p><!--[-->Use in-page navigation for longer content pages. It acts as a table of contents, providing users with a summary and quick navigation across the page.<!--]--></p><p><!--[-->The left-hand highlight bar:<!--]--></p><ul><!--[--><li><!--[-->separates the component from the page content<!--]--></li><li><!--[-->groups the navigation.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-in-page-navigation&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-in-page-navigation&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->In-page Navigation is ideal for pages with a lot of content. This will help users find their relevant content.<!--]--></li><li><!--[-->Use headings throughout your content, such as headings level 2 (H2) and 3 (H3). You can use these as navigation links at the start of the page, like a table of contents.<!--]--></li><li><!--[-->Use subheadings as indented navigation links from the page.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t link to other pages, including on external sites.<!--]--></li><li><!--[-->Never use colons in the heading.<!--]--></li><li><!--[-->Don&#39;t use it if you have less than 2 navigation links.<!--]--></li><li><!--[-->Don&#39;t use it with component headings, such as accordion item headings.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Ripple’s theming applies colour to in-page navigation so that the user understands:<!--]--></p><ul><!--[--><li><!--[-->its links and navigation heading relate to each other<!--]--></li><li><!--[-->they are deliberately separated from the main content.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-in-page-navigation&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-in-page-navigation&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/in-page-navigation.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/in-page-navigation/_payload.json">[{"state":1,"once":503,"_errors":505,"serverRendered":508,"path":509,"prerenderedAt":510},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":190,"$sdd-globals":206,"$sdd-navigation":208},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/in-page-navigation":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":185,"_id":186,"_source":187,"_file":188,"_extension":189},"/design-system/components/in-page-navigation","components",false,"","In-page navigation","The In-page navigation component sits above a page’s main content and shows a set of links.","page","Core",{"type":16,"children":17,"toc":176},"root",[18,27,33,38,43,58,63,70,88,94,117,121,127,132,145,152],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use in-page navigation to make scanning and navigating within a single page quicker for users. This component shows links to headings that are on the current page. It sits at the top of the page.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Use in-page navigation for longer content pages. It acts as a table of contents, providing users with a summary and quick navigation across the page.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"The left-hand highlight bar:",{"type":19,"tag":44,"props":45,"children":46},"ul",{},[47,53],{"type":19,"tag":48,"props":49,"children":50},"li",{},[51],{"type":25,"value":52},"separates the component from the page content",{"type":19,"tag":48,"props":54,"children":55},{},[56],{"type":25,"value":57},"groups the navigation.",{"type":19,"tag":59,"props":60,"children":62},"docs-example",{"id":61},"core-navigation-in-page-navigation",[],{"type":19,"tag":64,"props":65,"children":67},"h3",{"id":66},"when-and-how-to-use",[68],{"type":25,"value":69},"When and how to use",{"type":19,"tag":44,"props":71,"children":72},{},[73,78,83],{"type":19,"tag":48,"props":74,"children":75},{},[76],{"type":25,"value":77},"In-page Navigation is ideal for pages with a lot of content. This will help users find their relevant content.",{"type":19,"tag":48,"props":79,"children":80},{},[81],{"type":25,"value":82},"Use headings throughout your content, such as headings level 2 (H2) and 3 (H3). You can use these as navigation links at the start of the page, like a table of contents.",{"type":19,"tag":48,"props":84,"children":85},{},[86],{"type":25,"value":87},"Use subheadings as indented navigation links from the page.",{"type":19,"tag":64,"props":89,"children":91},{"id":90},"when-and-how-not-to-use",[92],{"type":25,"value":93},"When and how not to use",{"type":19,"tag":44,"props":95,"children":96},{},[97,102,107,112],{"type":19,"tag":48,"props":98,"children":99},{},[100],{"type":25,"value":101},"Don't link to other pages, including on external sites.",{"type":19,"tag":48,"props":103,"children":104},{},[105],{"type":25,"value":106},"Never use colons in the heading.",{"type":19,"tag":48,"props":108,"children":109},{},[110],{"type":25,"value":111},"Don't use it if you have less than 2 navigation links.",{"type":19,"tag":48,"props":113,"children":114},{},[115],{"type":25,"value":116},"Don't use it with component headings, such as accordion item headings.",{"type":19,"tag":118,"props":119,"children":120},"hr",{},[],{"type":19,"tag":20,"props":122,"children":124},{"id":123},"theming",[125],{"type":25,"value":126},"Theming",{"type":19,"tag":28,"props":128,"children":129},{},[130],{"type":25,"value":131},"Ripple’s theming applies colour to in-page navigation so that the user understands:",{"type":19,"tag":44,"props":133,"children":134},{},[135,140],{"type":19,"tag":48,"props":136,"children":137},{},[138],{"type":25,"value":139},"its links and navigation heading relate to each other",{"type":19,"tag":48,"props":141,"children":142},{},[143],{"type":25,"value":144},"they are deliberately separated from the main content.",{"type":19,"tag":146,"props":147,"children":148},"docs-theme-chooser",{},[149],{"type":19,"tag":59,"props":150,"children":151},{"id":61},[],{"type":19,"tag":28,"props":153,"children":154},{},[155,157,166,168,174],{"type":25,"value":156},"To create your own theme, see ",{"type":19,"tag":158,"props":159,"children":163},"a",{"href":160,"rel":161},"https://www.vic.gov.au",[162],"nofollow",[164],{"type":25,"value":165},"theming guidance for designers",{"type":25,"value":167}," or ",{"type":19,"tag":158,"props":169,"children":171},{"href":160,"rel":170},[162],[172],{"type":25,"value":173},"theming guidance for developers",{"type":25,"value":175},".",{"title":10,"searchDepth":177,"depth":177,"links":178},2,[179,184],{"id":22,"depth":177,"text":26,"children":180},[181,183],{"id":66,"depth":182,"text":69},3,{"id":90,"depth":182,"text":93},{"id":123,"depth":177,"text":126},"markdown","content:design-system:5.components:in-page-navigation.md","content","design-system/5.components/in-page-navigation.md","md",["ShallowRef",191],["ShallowReactive",192],{"/design-system/components/in-page-navigation":193},[194,200],{"_path":195,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":196,"description":197,"layout":13,"label":14,"_type":185,"_id":198,"_source":187,"_file":199,"_extension":189},"/design-system/components/header","Header","The Header component introduces the purpose and content of a page.","content:design-system:5.components:header.md","design-system/5.components/header.md",{"_path":201,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":202,"description":203,"layout":13,"label":14,"_type":185,"_id":204,"_source":187,"_file":205,"_extension":189},"/design-system/components/input-field","Input field","The Input field component lets users input a short amount of text.","content:design-system:5.components:input-field.md","design-system/5.components/input-field.md",["ShallowRef",207],{},[209,214,455],{"title":210,"_path":211,"icon":212,"layout":213},"Ripple Design System","/","carbon:home","home",{"title":215,"_path":216,"children":217},"Design System","/design-system",[218,234,250,279,313],{"title":219,"_path":220,"children":221},"About","/design-system/about",[222,225,228,231],{"title":223,"_path":224,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":226,"_path":227,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":229,"_path":230,"layout":13},"Support","/design-system/about/getting-support",{"title":232,"_path":233,"layout":13},"Contributing","/design-system/about/contributing",{"title":235,"_path":236,"children":237},"Design","/design-system/design",[238,241,244,247],{"title":239,"_path":240,"layout":13},"Getting started","/design-system/design/getting-started",{"title":242,"_path":243,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":245,"_path":246,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":248,"_path":249,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":251,"_path":252,"children":253},"Develop","/design-system/develop",[254,256,258,261],{"title":239,"_path":255,"layout":13},"/design-system/develop/getting-started",{"title":232,"_path":257,"layout":13},"/design-system/develop/contributing",{"title":259,"_path":260,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":262,"children":263,"layout":13},"/design-system/develop/usage",[264,267,270,273,276],{"title":265,"_path":266,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":268,"_path":269,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":271,"_path":272,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":274,"_path":275,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":277,"_path":278,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":280,"_path":281,"children":282},"Styles","/design-system/styles",[283,286,289,292,295,298,301,304,307,310],{"title":284,"_path":285,"layout":13},"Colour","/design-system/styles/colour",{"title":287,"_path":288,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":290,"_path":291,"layout":13},"Grid","/design-system/styles/grid",{"title":293,"_path":294,"layout":13},"Icons","/design-system/styles/icons",{"title":296,"_path":297,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":299,"_path":300,"layout":13},"Layout","/design-system/styles/layout",{"title":302,"_path":303,"layout":13},"Logo","/design-system/styles/logo",{"title":305,"_path":306,"layout":13},"Motion","/design-system/styles/motion",{"title":308,"_path":309,"layout":13},"Spacing","/design-system/styles/spacing",{"title":311,"_path":312,"layout":13},"Typography","/design-system/styles/typography",{"title":314,"_path":315,"children":316},"Components","/design-system/components",[317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,384,385,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440,443,446,449,452],{"title":318,"_path":319,"layout":13},"Accordion","/design-system/components/accordion",{"title":321,"_path":322,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":324,"_path":325,"layout":13},"Alert","/design-system/components/alert",{"title":327,"_path":328,"layout":13},"Block quote","/design-system/components/block-quote",{"title":330,"_path":331,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":333,"_path":334,"layout":13},"Button","/design-system/components/button",{"title":336,"_path":337,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":339,"_path":340,"layout":13},"Callout","/design-system/components/callout",{"title":342,"_path":343,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":345,"_path":346,"layout":13},"Card","/design-system/components/card",{"title":348,"_path":349,"layout":13},"Carousel","/design-system/components/carousel",{"title":351,"_path":352,"layout":13},"Category grid","/design-system/components/category-grid",{"title":354,"_path":355,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":357,"_path":358,"layout":13},"Chip","/design-system/components/chip",{"title":360,"_path":361,"layout":13},"Contact us","/design-system/components/contact-us",{"title":363,"_path":364,"layout":13},"Date input","/design-system/components/date-input",{"title":366,"_path":367,"layout":13},"Detail list","/design-system/components/detail-list",{"title":369,"_path":370,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":372,"_path":373,"layout":13},"File","/design-system/components/file",{"title":375,"_path":376,"layout":13},"Footer","/design-system/components/footer",{"title":378,"_path":379,"layout":13},"Form","/design-system/components/form",{"title":381,"_path":382,"layout":13},"Form alert","/design-system/components/form-alert",{"title":196,"_path":195,"layout":13},{"title":11,"_path":7,"layout":13},{"title":202,"_path":201,"layout":13},{"title":387,"_path":388,"layout":13},"Key dates","/design-system/components/key-dates",{"title":390,"_path":391,"layout":13},"Media","/design-system/components/media",{"title":393,"_path":394,"layout":13},"Media embed","/design-system/components/media-embed",{"title":396,"_path":397,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":399,"_path":400,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":402,"_path":403,"layout":13},"Option button","/design-system/components/option-button",{"title":405,"_path":406,"layout":13},"Page action","/design-system/components/page-action",{"title":408,"_path":409,"layout":13},"Pagination","/design-system/components/pagination",{"title":411,"_path":412,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":414,"_path":415,"layout":13},"Profile","/design-system/components/profile",{"title":417,"_path":418,"layout":13},"Radio button","/design-system/components/radio-button",{"title":420,"_path":421,"layout":13},"Related links","/design-system/components/related-links",{"title":423,"_path":424,"layout":13},"Results listing","/design-system/components/results-listing",{"title":426,"_path":427,"layout":13},"Search bar","/design-system/components/search-bar",{"title":429,"_path":430,"layout":13},"Skip link","/design-system/components/skip-link",{"title":432,"_path":433,"layout":13},"Social share","/design-system/components/social-share",{"title":435,"_path":436,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":438,"_path":439,"layout":13},"Table","/design-system/components/table",{"title":441,"_path":442,"layout":13},"Tabs","/design-system/components/tabs",{"title":444,"_path":445,"layout":13},"Tag","/design-system/components/tag",{"title":447,"_path":448,"layout":13},"Text area","/design-system/components/text-area",{"title":450,"_path":451,"layout":13},"Timeline","/design-system/components/timeline",{"title":453,"_path":454,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":456,"_path":457,"children":458,"layout":13},"Ripple Framework","/framework",[459,460,478,500],{"title":456,"_path":457,"layout":13},{"title":461,"_path":462,"children":463},"Key Concepts","/framework/key-concepts",[464,466,469,472,475],{"title":271,"_path":465,"layout":13},"/framework/key-concepts/nuxt",{"title":467,"_path":468,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":470,"_path":471,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":473,"_path":474,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":476,"_path":477,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":479,"_path":480,"children":481},"Guides","/framework/guides",[482,485,488,491,494,497],{"title":483,"_path":484,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":486,"_path":487,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":489,"_path":490,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":492,"_path":493,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":495,"_path":496,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":498,"_path":499,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":501,"_path":502,"layout":13},"Core modules","/framework/core-modules",["Reactive",504],["Set"],["Reactive",506],{"module-navigation":507},null,true,"/design-system/components/in-page-navigation/",1714695155870]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>In-page navigation</h1><p class="rpl-type-p-large" data-v-3163c6df>The In-page navigation component sits above a page’s main content and shows a set of links.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use in-page navigation to make scanning and navigating within a single page quicker for users. This component shows links to headings that are on the current page. It sits at the top of the page.<!--]--></p><p><!--[-->Use in-page navigation for longer content pages. It acts as a table of contents, providing users with a summary and quick navigation across the page.<!--]--></p><p><!--[-->The left-hand highlight bar:<!--]--></p><ul><!--[--><li><!--[-->separates the component from the page content<!--]--></li><li><!--[-->groups the navigation.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-in-page-navigation&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-in-page-navigation&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->In-page Navigation is ideal for pages with a lot of content. This will help users find their relevant content.<!--]--></li><li><!--[-->Use headings throughout your content, such as headings level 2 (H2) and 3 (H3). You can use these as navigation links at the start of the page, like a table of contents.<!--]--></li><li><!--[-->Use subheadings as indented navigation links from the page.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t link to other pages, including on external sites.<!--]--></li><li><!--[-->Never use colons in the heading.<!--]--></li><li><!--[-->Don&#39;t use it if you have less than 2 navigation links.<!--]--></li><li><!--[-->Don&#39;t use it with component headings, such as accordion item headings.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Ripple’s theming applies colour to in-page navigation so that the user understands:<!--]--></p><ul><!--[--><li><!--[-->its links and navigation heading relate to each other<!--]--></li><li><!--[-->they are deliberately separated from the main content.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-in-page-navigation&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-in-page-navigation&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/in-page-navigation.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/in-page-navigation/_payload.json">[{"state":1,"once":503,"_errors":505,"serverRendered":508,"path":509,"prerenderedAt":510},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":190,"$sdd-globals":206,"$sdd-navigation":208},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/in-page-navigation":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":185,"_id":186,"_source":187,"_file":188,"_extension":189},"/design-system/components/in-page-navigation","components",false,"","In-page navigation","The In-page navigation component sits above a page’s main content and shows a set of links.","page","Core",{"type":16,"children":17,"toc":176},"root",[18,27,33,38,43,58,63,70,88,94,117,121,127,132,145,152],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use in-page navigation to make scanning and navigating within a single page quicker for users. This component shows links to headings that are on the current page. It sits at the top of the page.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Use in-page navigation for longer content pages. It acts as a table of contents, providing users with a summary and quick navigation across the page.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"The left-hand highlight bar:",{"type":19,"tag":44,"props":45,"children":46},"ul",{},[47,53],{"type":19,"tag":48,"props":49,"children":50},"li",{},[51],{"type":25,"value":52},"separates the component from the page content",{"type":19,"tag":48,"props":54,"children":55},{},[56],{"type":25,"value":57},"groups the navigation.",{"type":19,"tag":59,"props":60,"children":62},"docs-example",{"id":61},"core-navigation-in-page-navigation",[],{"type":19,"tag":64,"props":65,"children":67},"h3",{"id":66},"when-and-how-to-use",[68],{"type":25,"value":69},"When and how to use",{"type":19,"tag":44,"props":71,"children":72},{},[73,78,83],{"type":19,"tag":48,"props":74,"children":75},{},[76],{"type":25,"value":77},"In-page Navigation is ideal for pages with a lot of content. This will help users find their relevant content.",{"type":19,"tag":48,"props":79,"children":80},{},[81],{"type":25,"value":82},"Use headings throughout your content, such as headings level 2 (H2) and 3 (H3). You can use these as navigation links at the start of the page, like a table of contents.",{"type":19,"tag":48,"props":84,"children":85},{},[86],{"type":25,"value":87},"Use subheadings as indented navigation links from the page.",{"type":19,"tag":64,"props":89,"children":91},{"id":90},"when-and-how-not-to-use",[92],{"type":25,"value":93},"When and how not to use",{"type":19,"tag":44,"props":95,"children":96},{},[97,102,107,112],{"type":19,"tag":48,"props":98,"children":99},{},[100],{"type":25,"value":101},"Don't link to other pages, including on external sites.",{"type":19,"tag":48,"props":103,"children":104},{},[105],{"type":25,"value":106},"Never use colons in the heading.",{"type":19,"tag":48,"props":108,"children":109},{},[110],{"type":25,"value":111},"Don't use it if you have less than 2 navigation links.",{"type":19,"tag":48,"props":113,"children":114},{},[115],{"type":25,"value":116},"Don't use it with component headings, such as accordion item headings.",{"type":19,"tag":118,"props":119,"children":120},"hr",{},[],{"type":19,"tag":20,"props":122,"children":124},{"id":123},"theming",[125],{"type":25,"value":126},"Theming",{"type":19,"tag":28,"props":128,"children":129},{},[130],{"type":25,"value":131},"Ripple’s theming applies colour to in-page navigation so that the user understands:",{"type":19,"tag":44,"props":133,"children":134},{},[135,140],{"type":19,"tag":48,"props":136,"children":137},{},[138],{"type":25,"value":139},"its links and navigation heading relate to each other",{"type":19,"tag":48,"props":141,"children":142},{},[143],{"type":25,"value":144},"they are deliberately separated from the main content.",{"type":19,"tag":146,"props":147,"children":148},"docs-theme-chooser",{},[149],{"type":19,"tag":59,"props":150,"children":151},{"id":61},[],{"type":19,"tag":28,"props":153,"children":154},{},[155,157,166,168,174],{"type":25,"value":156},"To create your own theme, see ",{"type":19,"tag":158,"props":159,"children":163},"a",{"href":160,"rel":161},"https://www.vic.gov.au",[162],"nofollow",[164],{"type":25,"value":165},"theming guidance for designers",{"type":25,"value":167}," or ",{"type":19,"tag":158,"props":169,"children":171},{"href":160,"rel":170},[162],[172],{"type":25,"value":173},"theming guidance for developers",{"type":25,"value":175},".",{"title":10,"searchDepth":177,"depth":177,"links":178},2,[179,184],{"id":22,"depth":177,"text":26,"children":180},[181,183],{"id":66,"depth":182,"text":69},3,{"id":90,"depth":182,"text":93},{"id":123,"depth":177,"text":126},"markdown","content:design-system:5.components:in-page-navigation.md","content","design-system/5.components/in-page-navigation.md","md",["ShallowRef",191],["ShallowReactive",192],{"/design-system/components/in-page-navigation":193},[194,200],{"_path":195,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":196,"description":197,"layout":13,"label":14,"_type":185,"_id":198,"_source":187,"_file":199,"_extension":189},"/design-system/components/header","Header","The Header component introduces the purpose and content of a page.","content:design-system:5.components:header.md","design-system/5.components/header.md",{"_path":201,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":202,"description":203,"layout":13,"label":14,"_type":185,"_id":204,"_source":187,"_file":205,"_extension":189},"/design-system/components/input-field","Input field","The Input field component lets users input a short amount of text.","content:design-system:5.components:input-field.md","design-system/5.components/input-field.md",["ShallowRef",207],{},[209,214,455],{"title":210,"_path":211,"icon":212,"layout":213},"Ripple Design System","/","carbon:home","home",{"title":215,"_path":216,"children":217},"Design System","/design-system",[218,234,250,279,313],{"title":219,"_path":220,"children":221},"About","/design-system/about",[222,225,228,231],{"title":223,"_path":224,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":226,"_path":227,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":229,"_path":230,"layout":13},"Support","/design-system/about/getting-support",{"title":232,"_path":233,"layout":13},"Contributing","/design-system/about/contributing",{"title":235,"_path":236,"children":237},"Design","/design-system/design",[238,241,244,247],{"title":239,"_path":240,"layout":13},"Getting started","/design-system/design/getting-started",{"title":242,"_path":243,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":245,"_path":246,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":248,"_path":249,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":251,"_path":252,"children":253},"Develop","/design-system/develop",[254,256,258,261],{"title":239,"_path":255,"layout":13},"/design-system/develop/getting-started",{"title":232,"_path":257,"layout":13},"/design-system/develop/contributing",{"title":259,"_path":260,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":262,"children":263,"layout":13},"/design-system/develop/usage",[264,267,270,273,276],{"title":265,"_path":266,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":268,"_path":269,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":271,"_path":272,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":274,"_path":275,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":277,"_path":278,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":280,"_path":281,"children":282},"Styles","/design-system/styles",[283,286,289,292,295,298,301,304,307,310],{"title":284,"_path":285,"layout":13},"Colour","/design-system/styles/colour",{"title":287,"_path":288,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":290,"_path":291,"layout":13},"Grid","/design-system/styles/grid",{"title":293,"_path":294,"layout":13},"Icons","/design-system/styles/icons",{"title":296,"_path":297,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":299,"_path":300,"layout":13},"Layout","/design-system/styles/layout",{"title":302,"_path":303,"layout":13},"Logo","/design-system/styles/logo",{"title":305,"_path":306,"layout":13},"Motion","/design-system/styles/motion",{"title":308,"_path":309,"layout":13},"Spacing","/design-system/styles/spacing",{"title":311,"_path":312,"layout":13},"Typography","/design-system/styles/typography",{"title":314,"_path":315,"children":316},"Components","/design-system/components",[317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,384,385,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440,443,446,449,452],{"title":318,"_path":319,"layout":13},"Accordion","/design-system/components/accordion",{"title":321,"_path":322,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":324,"_path":325,"layout":13},"Alert","/design-system/components/alert",{"title":327,"_path":328,"layout":13},"Block quote","/design-system/components/block-quote",{"title":330,"_path":331,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":333,"_path":334,"layout":13},"Button","/design-system/components/button",{"title":336,"_path":337,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":339,"_path":340,"layout":13},"Callout","/design-system/components/callout",{"title":342,"_path":343,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":345,"_path":346,"layout":13},"Card","/design-system/components/card",{"title":348,"_path":349,"layout":13},"Carousel","/design-system/components/carousel",{"title":351,"_path":352,"layout":13},"Category grid","/design-system/components/category-grid",{"title":354,"_path":355,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":357,"_path":358,"layout":13},"Chip","/design-system/components/chip",{"title":360,"_path":361,"layout":13},"Contact us","/design-system/components/contact-us",{"title":363,"_path":364,"layout":13},"Date input","/design-system/components/date-input",{"title":366,"_path":367,"layout":13},"Detail list","/design-system/components/detail-list",{"title":369,"_path":370,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":372,"_path":373,"layout":13},"File","/design-system/components/file",{"title":375,"_path":376,"layout":13},"Footer","/design-system/components/footer",{"title":378,"_path":379,"layout":13},"Form","/design-system/components/form",{"title":381,"_path":382,"layout":13},"Form alert","/design-system/components/form-alert",{"title":196,"_path":195,"layout":13},{"title":11,"_path":7,"layout":13},{"title":202,"_path":201,"layout":13},{"title":387,"_path":388,"layout":13},"Key dates","/design-system/components/key-dates",{"title":390,"_path":391,"layout":13},"Media","/design-system/components/media",{"title":393,"_path":394,"layout":13},"Media embed","/design-system/components/media-embed",{"title":396,"_path":397,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":399,"_path":400,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":402,"_path":403,"layout":13},"Option button","/design-system/components/option-button",{"title":405,"_path":406,"layout":13},"Page action","/design-system/components/page-action",{"title":408,"_path":409,"layout":13},"Pagination","/design-system/components/pagination",{"title":411,"_path":412,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":414,"_path":415,"layout":13},"Profile","/design-system/components/profile",{"title":417,"_path":418,"layout":13},"Radio button","/design-system/components/radio-button",{"title":420,"_path":421,"layout":13},"Related links","/design-system/components/related-links",{"title":423,"_path":424,"layout":13},"Results listing","/design-system/components/results-listing",{"title":426,"_path":427,"layout":13},"Search bar","/design-system/components/search-bar",{"title":429,"_path":430,"layout":13},"Skip link","/design-system/components/skip-link",{"title":432,"_path":433,"layout":13},"Social share","/design-system/components/social-share",{"title":435,"_path":436,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":438,"_path":439,"layout":13},"Table","/design-system/components/table",{"title":441,"_path":442,"layout":13},"Tabs","/design-system/components/tabs",{"title":444,"_path":445,"layout":13},"Tag","/design-system/components/tag",{"title":447,"_path":448,"layout":13},"Text area","/design-system/components/text-area",{"title":450,"_path":451,"layout":13},"Timeline","/design-system/components/timeline",{"title":453,"_path":454,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":456,"_path":457,"children":458,"layout":13},"Ripple Framework","/framework",[459,460,478,500],{"title":456,"_path":457,"layout":13},{"title":461,"_path":462,"children":463},"Key Concepts","/framework/key-concepts",[464,466,469,472,475],{"title":271,"_path":465,"layout":13},"/framework/key-concepts/nuxt",{"title":467,"_path":468,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":470,"_path":471,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":473,"_path":474,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":476,"_path":477,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":479,"_path":480,"children":481},"Guides","/framework/guides",[482,485,488,491,494,497],{"title":483,"_path":484,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":486,"_path":487,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":489,"_path":490,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":492,"_path":493,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":495,"_path":496,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":498,"_path":499,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":501,"_path":502,"layout":13},"Core modules","/framework/core-modules",["Reactive",504],["Set"],["Reactive",506],{"module-navigation":507},null,true,"/design-system/components/in-page-navigation/",1714695653992]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/input-field/_payload.json b/design-system/components/input-field/_payload.json
index 2dc4d7d0f0..755f4cbd40 100644
--- a/design-system/components/input-field/_payload.json
+++ b/design-system/components/input-field/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":104,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695153788]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":104,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695651918]
\ No newline at end of file
diff --git a/design-system/components/input-field/index.html b/design-system/components/input-field/index.html
index a8f177ad60..e5f2668ba3 100644
--- a/design-system/components/input-field/index.html
+++ b/design-system/components/input-field/index.html
@@ -28,65 +28,65 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.CwUV-MIb.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.F9NVvvm4.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.gK7ORMEc.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.GmB4B_NE.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -99,8 +99,8 @@
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Input field</h1><p class="rpl-type-p-large" data-v-3163c6df>The Input field component lets users input a short amount of text.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use input fields to let users enter, select and search for text. They are normally found in a form but can also be part of a modal or search.<!--]--></p><p><!--[-->Use an input field for users to enter text shorter than a single line.<!--]--></p><p><!--[-->Input fields can have multiple input types, depending on the need and use case. They have a text input type by default.<!--]--></p><p><!--[-->Input fields can be used for entering:<!--]--></p><ul><!--[--><li><!--[-->text: basic text or search terms<!--]--></li><li><!--[-->phone: a telephone number<!--]--></li><li><!--[-->email: an email address<!--]--></li><li><!--[-->passwords: a user&#39;s input is obscured with a dot (&#39; • &#39;), asterisk (&#39; * &#39;) or other symbol as they type.<!--]--></li><!--]--></ul><p><!--[-->Don’t use an input field if the user’s text needs to be more than one line long: use a text area component instead.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-input--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-input--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="how-this-component-works" data-v-ea525968><a href="#how-this-component-works" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->How this component works<!--]--></a></h2><p><!--[-->Set the width of the input field to show the amount of information needed from the user. For example, use smaller widths for postcodes than for emails.<!--]--></p><p><!--[-->You must use a form label with an input field.<!--]--></p><p><!--[-->You can use an input field with:<!--]--></p><ul><!--[--><li><!--[-->requirement label<!--]--></li><li><!--[-->hint text<!--]--></li><li><!--[-->placeholder text<!--]--></li><li><!--[-->prefix or suffix text<!--]--></li><li><!--[-->prefix or suffix icon.<!--]--></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="avoid-placeholder-text"><!--[-->Avoid placeholder text<!--]--></h4><p><!--[-->Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.<!--]--></p><p><!--[-->If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="hint-text"><!--[-->Hint text<!--]--></h4><p><!--[-->Hint text can be used to tell the user what, or how, to successfully complete an input field.<!--]--></p><p><!--[-->For example, hint text can include:<!--]--></p><ul><!--[--><li><!--[-->an overall description of the input field<!--]--></li><li><!--[-->hints for what kind of information needs to be input<!--]--></li><li><!--[-->specific formatting examples or requirements.<!--]--></li><!--]--></ul><p><!--[-->Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="prefix-and-suffixes"><!--[-->Prefix and suffixes<!--]--></h4><p><!--[-->Use prefixes and suffixes to help users enter things like currencies and measurements.<!--]--></p><p><!--[-->Prefixes and suffixes help when there’s a commonly understood symbol or abbreviation for the type of information needed.<!--]--></p><p><!--[-->Don’t rely on prefixes or suffixes alone. Screen readers will not read them out.<!--]--></p><p><!--[-->If you need a specific type of information, say so in the input label and hint text. For example, ‘Cost, in dollars’ in the input label and ‘$’ in the prefix.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Always use a label for input fields.<!--]--></li><li><!--[-->Use hint text to specify helpful information such as:
-<ul><!--[--><li><!--[-->expected number format, for example ‘Must be 6 to 8 digits long’<!--]--></li><li><!--[-->minimum and maximum number values, for example ‘Minimum of # and maximum of #’.<!--]--></li><!--]--></ul><!--]--></li><li><!--[-->Use the prefix to indicate measurements and categories like currency, for example, &#39;$&#39;.<!--]--></li><li><!--[-->Use the prefix together with hint text to reinforce what the input needs to be, for example &#39;Cost, in dollars&#39;.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Never use an input field without a label.<!--]--></li><li><!--[-->Avoid placeholder text because it can cause accessibility issues.<!--]--></li><li><!--[-->Don’t disable copy and paste.<!--]--></li><li><!--[-->Don’t set a minimum or maximum input limit without explicitly saying this in the hint text.<!--]--></li><li><!--[-->Don’t use placeholder text to give instructions.<!--]--></li><li><!--[-->Don’t write ambiguous error messages only stating what&#39;s wrong, explain how the user can fix it.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->The input field has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, used on white backgrounds<!--]--></li><li><!--[-->reverse, used on neutral backgrounds.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-input--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-input--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="reverse" data-v-ea525968><a href="#reverse" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Reverse<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-input--reverse&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-input--reverse&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="error" data-v-ea525968><a href="#error" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Error<!--]--></a></h2><p><!--[-->All form inputs share error state styling.<!--]--></p><p><!--[-->Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.<!--]--></p><p><!--[-->When creating an error message for an input field, use the wording below.<!--]--></p><p><!--[--><strong><!--[-->Error: empty input<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Enter [the missing information]&#39;.<!--]--></li><li><!--[-->Example: &#39;Enter your name&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input is too long<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must be [number] characters or less&#39;.<!--]--></li><li><!--[-->Example: &#39;Delivery address must be 56 characters or less&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input is too short<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must be [number] characters or more&#39;.<!--]--></li><li><!--[-->Example: &#39;Previous employer must be 3 characters or more&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input is too long or too short<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must be between [number] and [number] characters&#39;.<!--]--></li><li><!--[-->Example: &#39;Justification must be between 3 and 56 characters&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input uses known characters that aren’t allowed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must not include [characters]&#39;.<!--]--></li><li><!--[-->Example: ‘Reasons must not include + &amp; ~&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input uses unknown characters that aren’t allowed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must only include [list of allowed characters]&#39;.<!--]--></li><li><!--[-->Example: ‘Explanations must only include letters, numbers and commas&#39;.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Input field uses colour for:<!--]--></p><ul><!--[--><li><!--[-->interactive states<!--]--></li><li><!--[-->icons.<!--]--></li><!--]--></ul><p><!--[-->An input field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of an input field remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-input--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-input--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="rationale" data-v-fff5b905><a href="#rationale" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/input-field.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/input-field/_payload.json">[{"state":1,"once":903,"_errors":905,"serverRendered":908,"path":909,"prerenderedAt":910},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":592,"$sdd-globals":608,"$sdd-navigation":610},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/input-field":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":587,"_id":588,"_source":589,"_file":590,"_extension":591},"/design-system/components/input-field","components",false,"","Input field","The Input field component lets users input a short amount of text.","page","Core",{"type":16,"children":17,"toc":571},"root",[18,27,33,38,43,48,73,78,83,90,95,100,105,133,140,145,150,156,161,166,184,189,195,200,205,210,215,221,257,263,296,300,306,311,324,330,333,339,343,349,354,359,364,373,386,394,407,415,428,436,449,457,470,478,491,494,500,505,518,523,530,552,555,561,566],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use input fields to let users enter, select and search for text. They are normally found in a form but can also be part of a modal or search.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Use an input field for users to enter text shorter than a single line.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Input fields can have multiple input types, depending on the need and use case. They have a text input type by default.",{"type":19,"tag":28,"props":44,"children":45},{},[46],{"type":25,"value":47},"Input fields can be used for entering:",{"type":19,"tag":49,"props":50,"children":51},"ul",{},[52,58,63,68],{"type":19,"tag":53,"props":54,"children":55},"li",{},[56],{"type":25,"value":57},"text: basic text or search terms",{"type":19,"tag":53,"props":59,"children":60},{},[61],{"type":25,"value":62},"phone: a telephone number",{"type":19,"tag":53,"props":64,"children":65},{},[66],{"type":25,"value":67},"email: an email address",{"type":19,"tag":53,"props":69,"children":70},{},[71],{"type":25,"value":72},"passwords: a user's input is obscured with a dot (' • '), asterisk (' * ') or other symbol as they type.",{"type":19,"tag":28,"props":74,"children":75},{},[76],{"type":25,"value":77},"Don’t use an input field if the user’s text needs to be more than one line long: use a text area component instead.",{"type":19,"tag":79,"props":80,"children":82},"docs-example",{"id":81},"forms-input--default-story",[],{"type":19,"tag":84,"props":85,"children":87},"h3",{"id":86},"how-this-component-works",[88],{"type":25,"value":89},"How this component works",{"type":19,"tag":28,"props":91,"children":92},{},[93],{"type":25,"value":94},"Set the width of the input field to show the amount of information needed from the user. For example, use smaller widths for postcodes than for emails.",{"type":19,"tag":28,"props":96,"children":97},{},[98],{"type":25,"value":99},"You must use a form label with an input field.",{"type":19,"tag":28,"props":101,"children":102},{},[103],{"type":25,"value":104},"You can use an input field with:",{"type":19,"tag":49,"props":106,"children":107},{},[108,113,118,123,128],{"type":19,"tag":53,"props":109,"children":110},{},[111],{"type":25,"value":112},"requirement label",{"type":19,"tag":53,"props":114,"children":115},{},[116],{"type":25,"value":117},"hint text",{"type":19,"tag":53,"props":119,"children":120},{},[121],{"type":25,"value":122},"placeholder text",{"type":19,"tag":53,"props":124,"children":125},{},[126],{"type":25,"value":127},"prefix or suffix text",{"type":19,"tag":53,"props":129,"children":130},{},[131],{"type":25,"value":132},"prefix or suffix icon.",{"type":19,"tag":134,"props":135,"children":137},"h4",{"id":136},"avoid-placeholder-text",[138],{"type":25,"value":139},"Avoid placeholder text",{"type":19,"tag":28,"props":141,"children":142},{},[143],{"type":25,"value":144},"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.",{"type":19,"tag":28,"props":146,"children":147},{},[148],{"type":25,"value":149},"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.",{"type":19,"tag":134,"props":151,"children":153},{"id":152},"hint-text",[154],{"type":25,"value":155},"Hint text",{"type":19,"tag":28,"props":157,"children":158},{},[159],{"type":25,"value":160},"Hint text can be used to tell the user what, or how, to successfully complete an input field.",{"type":19,"tag":28,"props":162,"children":163},{},[164],{"type":25,"value":165},"For example, hint text can include:",{"type":19,"tag":49,"props":167,"children":168},{},[169,174,179],{"type":19,"tag":53,"props":170,"children":171},{},[172],{"type":25,"value":173},"an overall description of the input field",{"type":19,"tag":53,"props":175,"children":176},{},[177],{"type":25,"value":178},"hints for what kind of information needs to be input",{"type":19,"tag":53,"props":180,"children":181},{},[182],{"type":25,"value":183},"specific formatting examples or requirements.",{"type":19,"tag":28,"props":185,"children":186},{},[187],{"type":25,"value":188},"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.",{"type":19,"tag":134,"props":190,"children":192},{"id":191},"prefix-and-suffixes",[193],{"type":25,"value":194},"Prefix and suffixes",{"type":19,"tag":28,"props":196,"children":197},{},[198],{"type":25,"value":199},"Use prefixes and suffixes to help users enter things like currencies and measurements.",{"type":19,"tag":28,"props":201,"children":202},{},[203],{"type":25,"value":204},"Prefixes and suffixes help when there’s a commonly understood symbol or abbreviation for the type of information needed.",{"type":19,"tag":28,"props":206,"children":207},{},[208],{"type":25,"value":209},"Don’t rely on prefixes or suffixes alone. Screen readers will not read them out.",{"type":19,"tag":28,"props":211,"children":212},{},[213],{"type":25,"value":214},"If you need a specific type of information, say so in the input label and hint text. For example, ‘Cost, in dollars’ in the input label and ‘$’ in the prefix.",{"type":19,"tag":84,"props":216,"children":218},{"id":217},"when-and-how-to-use",[219],{"type":25,"value":220},"When and how to use",{"type":19,"tag":49,"props":222,"children":223},{},[224,229,247,252],{"type":19,"tag":53,"props":225,"children":226},{},[227],{"type":25,"value":228},"Always use a label for input fields.",{"type":19,"tag":53,"props":230,"children":231},{},[232,234],{"type":25,"value":233},"Use hint text to specify helpful information such as:\n",{"type":19,"tag":49,"props":235,"children":236},{},[237,242],{"type":19,"tag":53,"props":238,"children":239},{},[240],{"type":25,"value":241},"expected number format, for example ‘Must be 6 to 8 digits long’",{"type":19,"tag":53,"props":243,"children":244},{},[245],{"type":25,"value":246},"minimum and maximum number values, for example ‘Minimum of # and maximum of #’.",{"type":19,"tag":53,"props":248,"children":249},{},[250],{"type":25,"value":251},"Use the prefix to indicate measurements and categories like currency, for example, '$'.",{"type":19,"tag":53,"props":253,"children":254},{},[255],{"type":25,"value":256},"Use the prefix together with hint text to reinforce what the input needs to be, for example 'Cost, in dollars'.",{"type":19,"tag":84,"props":258,"children":260},{"id":259},"when-and-how-not-to-use",[261],{"type":25,"value":262},"When and how not to use",{"type":19,"tag":49,"props":264,"children":265},{},[266,271,276,281,286,291],{"type":19,"tag":53,"props":267,"children":268},{},[269],{"type":25,"value":270},"Never use an input field without a label.",{"type":19,"tag":53,"props":272,"children":273},{},[274],{"type":25,"value":275},"Avoid placeholder text because it can cause accessibility issues.",{"type":19,"tag":53,"props":277,"children":278},{},[279],{"type":25,"value":280},"Don’t disable copy and paste.",{"type":19,"tag":53,"props":282,"children":283},{},[284],{"type":25,"value":285},"Don’t set a minimum or maximum input limit without explicitly saying this in the hint text.",{"type":19,"tag":53,"props":287,"children":288},{},[289],{"type":25,"value":290},"Don’t use placeholder text to give instructions.",{"type":19,"tag":53,"props":292,"children":293},{},[294],{"type":25,"value":295},"Don’t write ambiguous error messages only stating what's wrong, explain how the user can fix it.",{"type":19,"tag":297,"props":298,"children":299},"hr",{},[],{"type":19,"tag":20,"props":301,"children":303},{"id":302},"variants",[304],{"type":25,"value":305},"Variants",{"type":19,"tag":28,"props":307,"children":308},{},[309],{"type":25,"value":310},"The input field has 2 variants:",{"type":19,"tag":49,"props":312,"children":313},{},[314,319],{"type":19,"tag":53,"props":315,"children":316},{},[317],{"type":25,"value":318},"default, used on white backgrounds",{"type":19,"tag":53,"props":320,"children":321},{},[322],{"type":25,"value":323},"reverse, used on neutral backgrounds.",{"type":19,"tag":84,"props":325,"children":327},{"id":326},"default",[328],{"type":25,"value":329},"Default",{"type":19,"tag":79,"props":331,"children":332},{"id":81},[],{"type":19,"tag":84,"props":334,"children":336},{"id":335},"reverse",[337],{"type":25,"value":338},"Reverse",{"type":19,"tag":79,"props":340,"children":342},{"id":341},"forms-input--reverse",[],{"type":19,"tag":84,"props":344,"children":346},{"id":345},"error",[347],{"type":25,"value":348},"Error",{"type":19,"tag":28,"props":350,"children":351},{},[352],{"type":25,"value":353},"All form inputs share error state styling.",{"type":19,"tag":28,"props":355,"children":356},{},[357],{"type":25,"value":358},"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.",{"type":19,"tag":28,"props":360,"children":361},{},[362],{"type":25,"value":363},"When creating an error message for an input field, use the wording below.",{"type":19,"tag":28,"props":365,"children":366},{},[367],{"type":19,"tag":368,"props":369,"children":370},"strong",{},[371],{"type":25,"value":372},"Error: empty input",{"type":19,"tag":49,"props":374,"children":375},{},[376,381],{"type":19,"tag":53,"props":377,"children":378},{},[379],{"type":25,"value":380},"Error message: ‘Enter [the missing information]'.",{"type":19,"tag":53,"props":382,"children":383},{},[384],{"type":25,"value":385},"Example: 'Enter your name'.",{"type":19,"tag":28,"props":387,"children":388},{},[389],{"type":19,"tag":368,"props":390,"children":391},{},[392],{"type":25,"value":393},"Error: input is too long",{"type":19,"tag":49,"props":395,"children":396},{},[397,402],{"type":19,"tag":53,"props":398,"children":399},{},[400],{"type":25,"value":401},"Error message: ‘[The input] must be [number] characters or less'.",{"type":19,"tag":53,"props":403,"children":404},{},[405],{"type":25,"value":406},"Example: 'Delivery address must be 56 characters or less'.",{"type":19,"tag":28,"props":408,"children":409},{},[410],{"type":19,"tag":368,"props":411,"children":412},{},[413],{"type":25,"value":414},"Error: input is too short",{"type":19,"tag":49,"props":416,"children":417},{},[418,423],{"type":19,"tag":53,"props":419,"children":420},{},[421],{"type":25,"value":422},"Error message: ‘[The input] must be [number] characters or more'.",{"type":19,"tag":53,"props":424,"children":425},{},[426],{"type":25,"value":427},"Example: 'Previous employer must be 3 characters or more'.",{"type":19,"tag":28,"props":429,"children":430},{},[431],{"type":19,"tag":368,"props":432,"children":433},{},[434],{"type":25,"value":435},"Error: input is too long or too short",{"type":19,"tag":49,"props":437,"children":438},{},[439,444],{"type":19,"tag":53,"props":440,"children":441},{},[442],{"type":25,"value":443},"Error message: ‘[The input] must be between [number] and [number] characters'.",{"type":19,"tag":53,"props":445,"children":446},{},[447],{"type":25,"value":448},"Example: 'Justification must be between 3 and 56 characters'.",{"type":19,"tag":28,"props":450,"children":451},{},[452],{"type":19,"tag":368,"props":453,"children":454},{},[455],{"type":25,"value":456},"Error: input uses known characters that aren’t allowed",{"type":19,"tag":49,"props":458,"children":459},{},[460,465],{"type":19,"tag":53,"props":461,"children":462},{},[463],{"type":25,"value":464},"Error message: ‘[The input] must not include [characters]'.",{"type":19,"tag":53,"props":466,"children":467},{},[468],{"type":25,"value":469},"Example: ‘Reasons must not include + & ~'.",{"type":19,"tag":28,"props":471,"children":472},{},[473],{"type":19,"tag":368,"props":474,"children":475},{},[476],{"type":25,"value":477},"Error: input uses unknown characters that aren’t allowed",{"type":19,"tag":49,"props":479,"children":480},{},[481,486],{"type":19,"tag":53,"props":482,"children":483},{},[484],{"type":25,"value":485},"Error message: ‘[The input] must only include [list of allowed characters]'.",{"type":19,"tag":53,"props":487,"children":488},{},[489],{"type":25,"value":490},"Example: ‘Explanations must only include letters, numbers and commas'.",{"type":19,"tag":297,"props":492,"children":493},{},[],{"type":19,"tag":20,"props":495,"children":497},{"id":496},"theming",[498],{"type":25,"value":499},"Theming",{"type":19,"tag":28,"props":501,"children":502},{},[503],{"type":25,"value":504},"Input field uses colour for:",{"type":19,"tag":49,"props":506,"children":507},{},[508,513],{"type":19,"tag":53,"props":509,"children":510},{},[511],{"type":25,"value":512},"interactive states",{"type":19,"tag":53,"props":514,"children":515},{},[516],{"type":25,"value":517},"icons.",{"type":19,"tag":28,"props":519,"children":520},{},[521],{"type":25,"value":522},"An input field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of an input field remains consistent while it transitions from a focus to an active state.",{"type":19,"tag":524,"props":525,"children":526},"docs-theme-chooser",{},[527],{"type":19,"tag":79,"props":528,"children":529},{"id":81},[],{"type":19,"tag":28,"props":531,"children":532},{},[533,535,542,544,550],{"type":25,"value":534},"To create your own theme see ",{"type":19,"tag":536,"props":537,"children":539},"a",{"href":538},"/design-system/design/theming-guidance-for-designers",[540],{"type":25,"value":541},"theming guidance for designers",{"type":25,"value":543}," or ",{"type":19,"tag":536,"props":545,"children":547},{"href":546},"/design-system/develop/theming",[548],{"type":25,"value":549},"theming guidance for developers",{"type":25,"value":551},".",{"type":19,"tag":297,"props":553,"children":554},{},[],{"type":19,"tag":20,"props":556,"children":558},{"id":557},"rationale",[559],{"type":25,"value":560},"Rationale",{"type":19,"tag":28,"props":562,"children":563},{},[564],{"type":25,"value":565},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":19,"tag":28,"props":567,"children":568},{},[569],{"type":25,"value":570},"This occurs across all form and input elements, for a consistent experience.",{"title":10,"searchDepth":572,"depth":572,"links":573},2,[574,580,585,586],{"id":22,"depth":572,"text":26,"children":575},[576,578,579],{"id":86,"depth":577,"text":89},3,{"id":217,"depth":577,"text":220},{"id":259,"depth":577,"text":262},{"id":302,"depth":572,"text":305,"children":581},[582,583,584],{"id":326,"depth":577,"text":329},{"id":335,"depth":577,"text":338},{"id":345,"depth":577,"text":348},{"id":496,"depth":572,"text":499},{"id":557,"depth":572,"text":560},"markdown","content:design-system:5.components:input-field.md","content","design-system/5.components/input-field.md","md",["ShallowRef",593],["ShallowReactive",594],{"/design-system/components/input-field":595},[596,602],{"_path":597,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":598,"description":599,"layout":13,"label":14,"_type":587,"_id":600,"_source":589,"_file":601,"_extension":591},"/design-system/components/in-page-navigation","In-page navigation","The In-page navigation component sits above a page’s main content and shows a set of links.","content:design-system:5.components:in-page-navigation.md","design-system/5.components/in-page-navigation.md",{"_path":603,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":604,"description":605,"layout":13,"label":14,"_type":587,"_id":606,"_source":589,"_file":607,"_extension":591},"/design-system/components/key-dates","Key dates","The Key dates component shows users a card promoting key dates or events.","content:design-system:5.components:key-dates.md","design-system/5.components/key-dates.md",["ShallowRef",609],{},[611,616,855],{"title":612,"_path":613,"icon":614,"layout":615},"Ripple Design System","/","carbon:home","home",{"title":617,"_path":618,"children":619},"Design System","/design-system",[620,636,651,679,713],{"title":621,"_path":622,"children":623},"About","/design-system/about",[624,627,630,633],{"title":625,"_path":626,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":628,"_path":629,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":631,"_path":632,"layout":13},"Support","/design-system/about/getting-support",{"title":634,"_path":635,"layout":13},"Contributing","/design-system/about/contributing",{"title":637,"_path":638,"children":639},"Design","/design-system/design",[640,643,646,649],{"title":641,"_path":642,"layout":13},"Getting started","/design-system/design/getting-started",{"title":644,"_path":645,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":647,"_path":648,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":650,"_path":538,"layout":13},"Theming guidance for designers",{"title":652,"_path":653,"children":654},"Develop","/design-system/develop",[655,657,659,661],{"title":641,"_path":656,"layout":13},"/design-system/develop/getting-started",{"title":634,"_path":658,"layout":13},"/design-system/develop/contributing",{"title":660,"_path":546,"layout":13},"Theme and brand application",{"title":26,"_path":662,"children":663,"layout":13},"/design-system/develop/usage",[664,667,670,673,676],{"title":665,"_path":666,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":668,"_path":669,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":671,"_path":672,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":674,"_path":675,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":677,"_path":678,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":680,"_path":681,"children":682},"Styles","/design-system/styles",[683,686,689,692,695,698,701,704,707,710],{"title":684,"_path":685,"layout":13},"Colour","/design-system/styles/colour",{"title":687,"_path":688,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":690,"_path":691,"layout":13},"Grid","/design-system/styles/grid",{"title":693,"_path":694,"layout":13},"Icons","/design-system/styles/icons",{"title":696,"_path":697,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":699,"_path":700,"layout":13},"Layout","/design-system/styles/layout",{"title":702,"_path":703,"layout":13},"Logo","/design-system/styles/logo",{"title":705,"_path":706,"layout":13},"Motion","/design-system/styles/motion",{"title":708,"_path":709,"layout":13},"Spacing","/design-system/styles/spacing",{"title":711,"_path":712,"layout":13},"Typography","/design-system/styles/typography",{"title":714,"_path":715,"children":716},"Components","/design-system/components",[717,720,723,726,729,732,735,738,741,744,747,750,753,756,759,762,765,768,771,774,777,780,783,786,787,788,789,792,795,798,801,804,807,810,813,816,819,822,825,828,831,834,837,840,843,846,849,852],{"title":718,"_path":719,"layout":13},"Accordion","/design-system/components/accordion",{"title":721,"_path":722,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":724,"_path":725,"layout":13},"Alert","/design-system/components/alert",{"title":727,"_path":728,"layout":13},"Block quote","/design-system/components/block-quote",{"title":730,"_path":731,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":733,"_path":734,"layout":13},"Button","/design-system/components/button",{"title":736,"_path":737,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":739,"_path":740,"layout":13},"Callout","/design-system/components/callout",{"title":742,"_path":743,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":745,"_path":746,"layout":13},"Card","/design-system/components/card",{"title":748,"_path":749,"layout":13},"Carousel","/design-system/components/carousel",{"title":751,"_path":752,"layout":13},"Category grid","/design-system/components/category-grid",{"title":754,"_path":755,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":757,"_path":758,"layout":13},"Chip","/design-system/components/chip",{"title":760,"_path":761,"layout":13},"Contact us","/design-system/components/contact-us",{"title":763,"_path":764,"layout":13},"Date input","/design-system/components/date-input",{"title":766,"_path":767,"layout":13},"Detail list","/design-system/components/detail-list",{"title":769,"_path":770,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":772,"_path":773,"layout":13},"File","/design-system/components/file",{"title":775,"_path":776,"layout":13},"Footer","/design-system/components/footer",{"title":778,"_path":779,"layout":13},"Form","/design-system/components/form",{"title":781,"_path":782,"layout":13},"Form alert","/design-system/components/form-alert",{"title":784,"_path":785,"layout":13},"Header","/design-system/components/header",{"title":598,"_path":597,"layout":13},{"title":11,"_path":7,"layout":13},{"title":604,"_path":603,"layout":13},{"title":790,"_path":791,"layout":13},"Media","/design-system/components/media",{"title":793,"_path":794,"layout":13},"Media embed","/design-system/components/media-embed",{"title":796,"_path":797,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":799,"_path":800,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":802,"_path":803,"layout":13},"Option button","/design-system/components/option-button",{"title":805,"_path":806,"layout":13},"Page action","/design-system/components/page-action",{"title":808,"_path":809,"layout":13},"Pagination","/design-system/components/pagination",{"title":811,"_path":812,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":814,"_path":815,"layout":13},"Profile","/design-system/components/profile",{"title":817,"_path":818,"layout":13},"Radio button","/design-system/components/radio-button",{"title":820,"_path":821,"layout":13},"Related links","/design-system/components/related-links",{"title":823,"_path":824,"layout":13},"Results listing","/design-system/components/results-listing",{"title":826,"_path":827,"layout":13},"Search bar","/design-system/components/search-bar",{"title":829,"_path":830,"layout":13},"Skip link","/design-system/components/skip-link",{"title":832,"_path":833,"layout":13},"Social share","/design-system/components/social-share",{"title":835,"_path":836,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":838,"_path":839,"layout":13},"Table","/design-system/components/table",{"title":841,"_path":842,"layout":13},"Tabs","/design-system/components/tabs",{"title":844,"_path":845,"layout":13},"Tag","/design-system/components/tag",{"title":847,"_path":848,"layout":13},"Text area","/design-system/components/text-area",{"title":850,"_path":851,"layout":13},"Timeline","/design-system/components/timeline",{"title":853,"_path":854,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":856,"_path":857,"children":858,"layout":13},"Ripple Framework","/framework",[859,860,878,900],{"title":856,"_path":857,"layout":13},{"title":861,"_path":862,"children":863},"Key Concepts","/framework/key-concepts",[864,866,869,872,875],{"title":671,"_path":865,"layout":13},"/framework/key-concepts/nuxt",{"title":867,"_path":868,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":870,"_path":871,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":873,"_path":874,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":876,"_path":877,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":879,"_path":880,"children":881},"Guides","/framework/guides",[882,885,888,891,894,897],{"title":883,"_path":884,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":886,"_path":887,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":889,"_path":890,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":892,"_path":893,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":895,"_path":896,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":898,"_path":899,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":901,"_path":902,"layout":13},"Core modules","/framework/core-modules",["Reactive",904],["Set"],["Reactive",906],{"module-navigation":907},null,true,"/design-system/components/input-field/",1714695156389]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+<ul><!--[--><li><!--[-->expected number format, for example ‘Must be 6 to 8 digits long’<!--]--></li><li><!--[-->minimum and maximum number values, for example ‘Minimum of # and maximum of #’.<!--]--></li><!--]--></ul><!--]--></li><li><!--[-->Use the prefix to indicate measurements and categories like currency, for example, &#39;$&#39;.<!--]--></li><li><!--[-->Use the prefix together with hint text to reinforce what the input needs to be, for example &#39;Cost, in dollars&#39;.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Never use an input field without a label.<!--]--></li><li><!--[-->Avoid placeholder text because it can cause accessibility issues.<!--]--></li><li><!--[-->Don’t disable copy and paste.<!--]--></li><li><!--[-->Don’t set a minimum or maximum input limit without explicitly saying this in the hint text.<!--]--></li><li><!--[-->Don’t use placeholder text to give instructions.<!--]--></li><li><!--[-->Don’t write ambiguous error messages only stating what&#39;s wrong, explain how the user can fix it.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->The input field has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, used on white backgrounds<!--]--></li><li><!--[-->reverse, used on neutral backgrounds.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-input--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-input--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="reverse" data-v-ea525968><a href="#reverse" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Reverse<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-input--reverse&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-input--reverse&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="error" data-v-ea525968><a href="#error" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Error<!--]--></a></h2><p><!--[-->All form inputs share error state styling.<!--]--></p><p><!--[-->Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.<!--]--></p><p><!--[-->When creating an error message for an input field, use the wording below.<!--]--></p><p><!--[--><strong><!--[-->Error: empty input<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Enter [the missing information]&#39;.<!--]--></li><li><!--[-->Example: &#39;Enter your name&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input is too long<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must be [number] characters or less&#39;.<!--]--></li><li><!--[-->Example: &#39;Delivery address must be 56 characters or less&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input is too short<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must be [number] characters or more&#39;.<!--]--></li><li><!--[-->Example: &#39;Previous employer must be 3 characters or more&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input is too long or too short<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must be between [number] and [number] characters&#39;.<!--]--></li><li><!--[-->Example: &#39;Justification must be between 3 and 56 characters&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input uses known characters that aren’t allowed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must not include [characters]&#39;.<!--]--></li><li><!--[-->Example: ‘Reasons must not include + &amp; ~&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input uses unknown characters that aren’t allowed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must only include [list of allowed characters]&#39;.<!--]--></li><li><!--[-->Example: ‘Explanations must only include letters, numbers and commas&#39;.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Input field uses colour for:<!--]--></p><ul><!--[--><li><!--[-->interactive states<!--]--></li><li><!--[-->icons.<!--]--></li><!--]--></ul><p><!--[-->An input field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of an input field remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-input--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-input--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="rationale" data-v-fff5b905><a href="#rationale" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/input-field.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/input-field/_payload.json">[{"state":1,"once":903,"_errors":905,"serverRendered":908,"path":909,"prerenderedAt":910},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":592,"$sdd-globals":608,"$sdd-navigation":610},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/input-field":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":587,"_id":588,"_source":589,"_file":590,"_extension":591},"/design-system/components/input-field","components",false,"","Input field","The Input field component lets users input a short amount of text.","page","Core",{"type":16,"children":17,"toc":571},"root",[18,27,33,38,43,48,73,78,83,90,95,100,105,133,140,145,150,156,161,166,184,189,195,200,205,210,215,221,257,263,296,300,306,311,324,330,333,339,343,349,354,359,364,373,386,394,407,415,428,436,449,457,470,478,491,494,500,505,518,523,530,552,555,561,566],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use input fields to let users enter, select and search for text. They are normally found in a form but can also be part of a modal or search.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Use an input field for users to enter text shorter than a single line.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Input fields can have multiple input types, depending on the need and use case. They have a text input type by default.",{"type":19,"tag":28,"props":44,"children":45},{},[46],{"type":25,"value":47},"Input fields can be used for entering:",{"type":19,"tag":49,"props":50,"children":51},"ul",{},[52,58,63,68],{"type":19,"tag":53,"props":54,"children":55},"li",{},[56],{"type":25,"value":57},"text: basic text or search terms",{"type":19,"tag":53,"props":59,"children":60},{},[61],{"type":25,"value":62},"phone: a telephone number",{"type":19,"tag":53,"props":64,"children":65},{},[66],{"type":25,"value":67},"email: an email address",{"type":19,"tag":53,"props":69,"children":70},{},[71],{"type":25,"value":72},"passwords: a user's input is obscured with a dot (' • '), asterisk (' * ') or other symbol as they type.",{"type":19,"tag":28,"props":74,"children":75},{},[76],{"type":25,"value":77},"Don’t use an input field if the user’s text needs to be more than one line long: use a text area component instead.",{"type":19,"tag":79,"props":80,"children":82},"docs-example",{"id":81},"forms-input--default-story",[],{"type":19,"tag":84,"props":85,"children":87},"h3",{"id":86},"how-this-component-works",[88],{"type":25,"value":89},"How this component works",{"type":19,"tag":28,"props":91,"children":92},{},[93],{"type":25,"value":94},"Set the width of the input field to show the amount of information needed from the user. For example, use smaller widths for postcodes than for emails.",{"type":19,"tag":28,"props":96,"children":97},{},[98],{"type":25,"value":99},"You must use a form label with an input field.",{"type":19,"tag":28,"props":101,"children":102},{},[103],{"type":25,"value":104},"You can use an input field with:",{"type":19,"tag":49,"props":106,"children":107},{},[108,113,118,123,128],{"type":19,"tag":53,"props":109,"children":110},{},[111],{"type":25,"value":112},"requirement label",{"type":19,"tag":53,"props":114,"children":115},{},[116],{"type":25,"value":117},"hint text",{"type":19,"tag":53,"props":119,"children":120},{},[121],{"type":25,"value":122},"placeholder text",{"type":19,"tag":53,"props":124,"children":125},{},[126],{"type":25,"value":127},"prefix or suffix text",{"type":19,"tag":53,"props":129,"children":130},{},[131],{"type":25,"value":132},"prefix or suffix icon.",{"type":19,"tag":134,"props":135,"children":137},"h4",{"id":136},"avoid-placeholder-text",[138],{"type":25,"value":139},"Avoid placeholder text",{"type":19,"tag":28,"props":141,"children":142},{},[143],{"type":25,"value":144},"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.",{"type":19,"tag":28,"props":146,"children":147},{},[148],{"type":25,"value":149},"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.",{"type":19,"tag":134,"props":151,"children":153},{"id":152},"hint-text",[154],{"type":25,"value":155},"Hint text",{"type":19,"tag":28,"props":157,"children":158},{},[159],{"type":25,"value":160},"Hint text can be used to tell the user what, or how, to successfully complete an input field.",{"type":19,"tag":28,"props":162,"children":163},{},[164],{"type":25,"value":165},"For example, hint text can include:",{"type":19,"tag":49,"props":167,"children":168},{},[169,174,179],{"type":19,"tag":53,"props":170,"children":171},{},[172],{"type":25,"value":173},"an overall description of the input field",{"type":19,"tag":53,"props":175,"children":176},{},[177],{"type":25,"value":178},"hints for what kind of information needs to be input",{"type":19,"tag":53,"props":180,"children":181},{},[182],{"type":25,"value":183},"specific formatting examples or requirements.",{"type":19,"tag":28,"props":185,"children":186},{},[187],{"type":25,"value":188},"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.",{"type":19,"tag":134,"props":190,"children":192},{"id":191},"prefix-and-suffixes",[193],{"type":25,"value":194},"Prefix and suffixes",{"type":19,"tag":28,"props":196,"children":197},{},[198],{"type":25,"value":199},"Use prefixes and suffixes to help users enter things like currencies and measurements.",{"type":19,"tag":28,"props":201,"children":202},{},[203],{"type":25,"value":204},"Prefixes and suffixes help when there’s a commonly understood symbol or abbreviation for the type of information needed.",{"type":19,"tag":28,"props":206,"children":207},{},[208],{"type":25,"value":209},"Don’t rely on prefixes or suffixes alone. Screen readers will not read them out.",{"type":19,"tag":28,"props":211,"children":212},{},[213],{"type":25,"value":214},"If you need a specific type of information, say so in the input label and hint text. For example, ‘Cost, in dollars’ in the input label and ‘$’ in the prefix.",{"type":19,"tag":84,"props":216,"children":218},{"id":217},"when-and-how-to-use",[219],{"type":25,"value":220},"When and how to use",{"type":19,"tag":49,"props":222,"children":223},{},[224,229,247,252],{"type":19,"tag":53,"props":225,"children":226},{},[227],{"type":25,"value":228},"Always use a label for input fields.",{"type":19,"tag":53,"props":230,"children":231},{},[232,234],{"type":25,"value":233},"Use hint text to specify helpful information such as:\n",{"type":19,"tag":49,"props":235,"children":236},{},[237,242],{"type":19,"tag":53,"props":238,"children":239},{},[240],{"type":25,"value":241},"expected number format, for example ‘Must be 6 to 8 digits long’",{"type":19,"tag":53,"props":243,"children":244},{},[245],{"type":25,"value":246},"minimum and maximum number values, for example ‘Minimum of # and maximum of #’.",{"type":19,"tag":53,"props":248,"children":249},{},[250],{"type":25,"value":251},"Use the prefix to indicate measurements and categories like currency, for example, '$'.",{"type":19,"tag":53,"props":253,"children":254},{},[255],{"type":25,"value":256},"Use the prefix together with hint text to reinforce what the input needs to be, for example 'Cost, in dollars'.",{"type":19,"tag":84,"props":258,"children":260},{"id":259},"when-and-how-not-to-use",[261],{"type":25,"value":262},"When and how not to use",{"type":19,"tag":49,"props":264,"children":265},{},[266,271,276,281,286,291],{"type":19,"tag":53,"props":267,"children":268},{},[269],{"type":25,"value":270},"Never use an input field without a label.",{"type":19,"tag":53,"props":272,"children":273},{},[274],{"type":25,"value":275},"Avoid placeholder text because it can cause accessibility issues.",{"type":19,"tag":53,"props":277,"children":278},{},[279],{"type":25,"value":280},"Don’t disable copy and paste.",{"type":19,"tag":53,"props":282,"children":283},{},[284],{"type":25,"value":285},"Don’t set a minimum or maximum input limit without explicitly saying this in the hint text.",{"type":19,"tag":53,"props":287,"children":288},{},[289],{"type":25,"value":290},"Don’t use placeholder text to give instructions.",{"type":19,"tag":53,"props":292,"children":293},{},[294],{"type":25,"value":295},"Don’t write ambiguous error messages only stating what's wrong, explain how the user can fix it.",{"type":19,"tag":297,"props":298,"children":299},"hr",{},[],{"type":19,"tag":20,"props":301,"children":303},{"id":302},"variants",[304],{"type":25,"value":305},"Variants",{"type":19,"tag":28,"props":307,"children":308},{},[309],{"type":25,"value":310},"The input field has 2 variants:",{"type":19,"tag":49,"props":312,"children":313},{},[314,319],{"type":19,"tag":53,"props":315,"children":316},{},[317],{"type":25,"value":318},"default, used on white backgrounds",{"type":19,"tag":53,"props":320,"children":321},{},[322],{"type":25,"value":323},"reverse, used on neutral backgrounds.",{"type":19,"tag":84,"props":325,"children":327},{"id":326},"default",[328],{"type":25,"value":329},"Default",{"type":19,"tag":79,"props":331,"children":332},{"id":81},[],{"type":19,"tag":84,"props":334,"children":336},{"id":335},"reverse",[337],{"type":25,"value":338},"Reverse",{"type":19,"tag":79,"props":340,"children":342},{"id":341},"forms-input--reverse",[],{"type":19,"tag":84,"props":344,"children":346},{"id":345},"error",[347],{"type":25,"value":348},"Error",{"type":19,"tag":28,"props":350,"children":351},{},[352],{"type":25,"value":353},"All form inputs share error state styling.",{"type":19,"tag":28,"props":355,"children":356},{},[357],{"type":25,"value":358},"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.",{"type":19,"tag":28,"props":360,"children":361},{},[362],{"type":25,"value":363},"When creating an error message for an input field, use the wording below.",{"type":19,"tag":28,"props":365,"children":366},{},[367],{"type":19,"tag":368,"props":369,"children":370},"strong",{},[371],{"type":25,"value":372},"Error: empty input",{"type":19,"tag":49,"props":374,"children":375},{},[376,381],{"type":19,"tag":53,"props":377,"children":378},{},[379],{"type":25,"value":380},"Error message: ‘Enter [the missing information]'.",{"type":19,"tag":53,"props":382,"children":383},{},[384],{"type":25,"value":385},"Example: 'Enter your name'.",{"type":19,"tag":28,"props":387,"children":388},{},[389],{"type":19,"tag":368,"props":390,"children":391},{},[392],{"type":25,"value":393},"Error: input is too long",{"type":19,"tag":49,"props":395,"children":396},{},[397,402],{"type":19,"tag":53,"props":398,"children":399},{},[400],{"type":25,"value":401},"Error message: ‘[The input] must be [number] characters or less'.",{"type":19,"tag":53,"props":403,"children":404},{},[405],{"type":25,"value":406},"Example: 'Delivery address must be 56 characters or less'.",{"type":19,"tag":28,"props":408,"children":409},{},[410],{"type":19,"tag":368,"props":411,"children":412},{},[413],{"type":25,"value":414},"Error: input is too short",{"type":19,"tag":49,"props":416,"children":417},{},[418,423],{"type":19,"tag":53,"props":419,"children":420},{},[421],{"type":25,"value":422},"Error message: ‘[The input] must be [number] characters or more'.",{"type":19,"tag":53,"props":424,"children":425},{},[426],{"type":25,"value":427},"Example: 'Previous employer must be 3 characters or more'.",{"type":19,"tag":28,"props":429,"children":430},{},[431],{"type":19,"tag":368,"props":432,"children":433},{},[434],{"type":25,"value":435},"Error: input is too long or too short",{"type":19,"tag":49,"props":437,"children":438},{},[439,444],{"type":19,"tag":53,"props":440,"children":441},{},[442],{"type":25,"value":443},"Error message: ‘[The input] must be between [number] and [number] characters'.",{"type":19,"tag":53,"props":445,"children":446},{},[447],{"type":25,"value":448},"Example: 'Justification must be between 3 and 56 characters'.",{"type":19,"tag":28,"props":450,"children":451},{},[452],{"type":19,"tag":368,"props":453,"children":454},{},[455],{"type":25,"value":456},"Error: input uses known characters that aren’t allowed",{"type":19,"tag":49,"props":458,"children":459},{},[460,465],{"type":19,"tag":53,"props":461,"children":462},{},[463],{"type":25,"value":464},"Error message: ‘[The input] must not include [characters]'.",{"type":19,"tag":53,"props":466,"children":467},{},[468],{"type":25,"value":469},"Example: ‘Reasons must not include + & ~'.",{"type":19,"tag":28,"props":471,"children":472},{},[473],{"type":19,"tag":368,"props":474,"children":475},{},[476],{"type":25,"value":477},"Error: input uses unknown characters that aren’t allowed",{"type":19,"tag":49,"props":479,"children":480},{},[481,486],{"type":19,"tag":53,"props":482,"children":483},{},[484],{"type":25,"value":485},"Error message: ‘[The input] must only include [list of allowed characters]'.",{"type":19,"tag":53,"props":487,"children":488},{},[489],{"type":25,"value":490},"Example: ‘Explanations must only include letters, numbers and commas'.",{"type":19,"tag":297,"props":492,"children":493},{},[],{"type":19,"tag":20,"props":495,"children":497},{"id":496},"theming",[498],{"type":25,"value":499},"Theming",{"type":19,"tag":28,"props":501,"children":502},{},[503],{"type":25,"value":504},"Input field uses colour for:",{"type":19,"tag":49,"props":506,"children":507},{},[508,513],{"type":19,"tag":53,"props":509,"children":510},{},[511],{"type":25,"value":512},"interactive states",{"type":19,"tag":53,"props":514,"children":515},{},[516],{"type":25,"value":517},"icons.",{"type":19,"tag":28,"props":519,"children":520},{},[521],{"type":25,"value":522},"An input field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of an input field remains consistent while it transitions from a focus to an active state.",{"type":19,"tag":524,"props":525,"children":526},"docs-theme-chooser",{},[527],{"type":19,"tag":79,"props":528,"children":529},{"id":81},[],{"type":19,"tag":28,"props":531,"children":532},{},[533,535,542,544,550],{"type":25,"value":534},"To create your own theme see ",{"type":19,"tag":536,"props":537,"children":539},"a",{"href":538},"/design-system/design/theming-guidance-for-designers",[540],{"type":25,"value":541},"theming guidance for designers",{"type":25,"value":543}," or ",{"type":19,"tag":536,"props":545,"children":547},{"href":546},"/design-system/develop/theming",[548],{"type":25,"value":549},"theming guidance for developers",{"type":25,"value":551},".",{"type":19,"tag":297,"props":553,"children":554},{},[],{"type":19,"tag":20,"props":556,"children":558},{"id":557},"rationale",[559],{"type":25,"value":560},"Rationale",{"type":19,"tag":28,"props":562,"children":563},{},[564],{"type":25,"value":565},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":19,"tag":28,"props":567,"children":568},{},[569],{"type":25,"value":570},"This occurs across all form and input elements, for a consistent experience.",{"title":10,"searchDepth":572,"depth":572,"links":573},2,[574,580,585,586],{"id":22,"depth":572,"text":26,"children":575},[576,578,579],{"id":86,"depth":577,"text":89},3,{"id":217,"depth":577,"text":220},{"id":259,"depth":577,"text":262},{"id":302,"depth":572,"text":305,"children":581},[582,583,584],{"id":326,"depth":577,"text":329},{"id":335,"depth":577,"text":338},{"id":345,"depth":577,"text":348},{"id":496,"depth":572,"text":499},{"id":557,"depth":572,"text":560},"markdown","content:design-system:5.components:input-field.md","content","design-system/5.components/input-field.md","md",["ShallowRef",593],["ShallowReactive",594],{"/design-system/components/input-field":595},[596,602],{"_path":597,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":598,"description":599,"layout":13,"label":14,"_type":587,"_id":600,"_source":589,"_file":601,"_extension":591},"/design-system/components/in-page-navigation","In-page navigation","The In-page navigation component sits above a page’s main content and shows a set of links.","content:design-system:5.components:in-page-navigation.md","design-system/5.components/in-page-navigation.md",{"_path":603,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":604,"description":605,"layout":13,"label":14,"_type":587,"_id":606,"_source":589,"_file":607,"_extension":591},"/design-system/components/key-dates","Key dates","The Key dates component shows users a card promoting key dates or events.","content:design-system:5.components:key-dates.md","design-system/5.components/key-dates.md",["ShallowRef",609],{},[611,616,855],{"title":612,"_path":613,"icon":614,"layout":615},"Ripple Design System","/","carbon:home","home",{"title":617,"_path":618,"children":619},"Design System","/design-system",[620,636,651,679,713],{"title":621,"_path":622,"children":623},"About","/design-system/about",[624,627,630,633],{"title":625,"_path":626,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":628,"_path":629,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":631,"_path":632,"layout":13},"Support","/design-system/about/getting-support",{"title":634,"_path":635,"layout":13},"Contributing","/design-system/about/contributing",{"title":637,"_path":638,"children":639},"Design","/design-system/design",[640,643,646,649],{"title":641,"_path":642,"layout":13},"Getting started","/design-system/design/getting-started",{"title":644,"_path":645,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":647,"_path":648,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":650,"_path":538,"layout":13},"Theming guidance for designers",{"title":652,"_path":653,"children":654},"Develop","/design-system/develop",[655,657,659,661],{"title":641,"_path":656,"layout":13},"/design-system/develop/getting-started",{"title":634,"_path":658,"layout":13},"/design-system/develop/contributing",{"title":660,"_path":546,"layout":13},"Theme and brand application",{"title":26,"_path":662,"children":663,"layout":13},"/design-system/develop/usage",[664,667,670,673,676],{"title":665,"_path":666,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":668,"_path":669,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":671,"_path":672,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":674,"_path":675,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":677,"_path":678,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":680,"_path":681,"children":682},"Styles","/design-system/styles",[683,686,689,692,695,698,701,704,707,710],{"title":684,"_path":685,"layout":13},"Colour","/design-system/styles/colour",{"title":687,"_path":688,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":690,"_path":691,"layout":13},"Grid","/design-system/styles/grid",{"title":693,"_path":694,"layout":13},"Icons","/design-system/styles/icons",{"title":696,"_path":697,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":699,"_path":700,"layout":13},"Layout","/design-system/styles/layout",{"title":702,"_path":703,"layout":13},"Logo","/design-system/styles/logo",{"title":705,"_path":706,"layout":13},"Motion","/design-system/styles/motion",{"title":708,"_path":709,"layout":13},"Spacing","/design-system/styles/spacing",{"title":711,"_path":712,"layout":13},"Typography","/design-system/styles/typography",{"title":714,"_path":715,"children":716},"Components","/design-system/components",[717,720,723,726,729,732,735,738,741,744,747,750,753,756,759,762,765,768,771,774,777,780,783,786,787,788,789,792,795,798,801,804,807,810,813,816,819,822,825,828,831,834,837,840,843,846,849,852],{"title":718,"_path":719,"layout":13},"Accordion","/design-system/components/accordion",{"title":721,"_path":722,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":724,"_path":725,"layout":13},"Alert","/design-system/components/alert",{"title":727,"_path":728,"layout":13},"Block quote","/design-system/components/block-quote",{"title":730,"_path":731,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":733,"_path":734,"layout":13},"Button","/design-system/components/button",{"title":736,"_path":737,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":739,"_path":740,"layout":13},"Callout","/design-system/components/callout",{"title":742,"_path":743,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":745,"_path":746,"layout":13},"Card","/design-system/components/card",{"title":748,"_path":749,"layout":13},"Carousel","/design-system/components/carousel",{"title":751,"_path":752,"layout":13},"Category grid","/design-system/components/category-grid",{"title":754,"_path":755,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":757,"_path":758,"layout":13},"Chip","/design-system/components/chip",{"title":760,"_path":761,"layout":13},"Contact us","/design-system/components/contact-us",{"title":763,"_path":764,"layout":13},"Date input","/design-system/components/date-input",{"title":766,"_path":767,"layout":13},"Detail list","/design-system/components/detail-list",{"title":769,"_path":770,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":772,"_path":773,"layout":13},"File","/design-system/components/file",{"title":775,"_path":776,"layout":13},"Footer","/design-system/components/footer",{"title":778,"_path":779,"layout":13},"Form","/design-system/components/form",{"title":781,"_path":782,"layout":13},"Form alert","/design-system/components/form-alert",{"title":784,"_path":785,"layout":13},"Header","/design-system/components/header",{"title":598,"_path":597,"layout":13},{"title":11,"_path":7,"layout":13},{"title":604,"_path":603,"layout":13},{"title":790,"_path":791,"layout":13},"Media","/design-system/components/media",{"title":793,"_path":794,"layout":13},"Media embed","/design-system/components/media-embed",{"title":796,"_path":797,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":799,"_path":800,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":802,"_path":803,"layout":13},"Option button","/design-system/components/option-button",{"title":805,"_path":806,"layout":13},"Page action","/design-system/components/page-action",{"title":808,"_path":809,"layout":13},"Pagination","/design-system/components/pagination",{"title":811,"_path":812,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":814,"_path":815,"layout":13},"Profile","/design-system/components/profile",{"title":817,"_path":818,"layout":13},"Radio button","/design-system/components/radio-button",{"title":820,"_path":821,"layout":13},"Related links","/design-system/components/related-links",{"title":823,"_path":824,"layout":13},"Results listing","/design-system/components/results-listing",{"title":826,"_path":827,"layout":13},"Search bar","/design-system/components/search-bar",{"title":829,"_path":830,"layout":13},"Skip link","/design-system/components/skip-link",{"title":832,"_path":833,"layout":13},"Social share","/design-system/components/social-share",{"title":835,"_path":836,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":838,"_path":839,"layout":13},"Table","/design-system/components/table",{"title":841,"_path":842,"layout":13},"Tabs","/design-system/components/tabs",{"title":844,"_path":845,"layout":13},"Tag","/design-system/components/tag",{"title":847,"_path":848,"layout":13},"Text area","/design-system/components/text-area",{"title":850,"_path":851,"layout":13},"Timeline","/design-system/components/timeline",{"title":853,"_path":854,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":856,"_path":857,"children":858,"layout":13},"Ripple Framework","/framework",[859,860,878,900],{"title":856,"_path":857,"layout":13},{"title":861,"_path":862,"children":863},"Key Concepts","/framework/key-concepts",[864,866,869,872,875],{"title":671,"_path":865,"layout":13},"/framework/key-concepts/nuxt",{"title":867,"_path":868,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":870,"_path":871,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":873,"_path":874,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":876,"_path":877,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":879,"_path":880,"children":881},"Guides","/framework/guides",[882,885,888,891,894,897],{"title":883,"_path":884,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":886,"_path":887,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":889,"_path":890,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":892,"_path":893,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":895,"_path":896,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":898,"_path":899,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":901,"_path":902,"layout":13},"Core modules","/framework/core-modules",["Reactive",904],["Set"],["Reactive",906],{"module-navigation":907},null,true,"/design-system/components/input-field/",1714695654459]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/key-dates/_payload.json b/design-system/components/key-dates/_payload.json
index b1fd8e401d..239dbab50c 100644
--- a/design-system/components/key-dates/_payload.json
+++ b/design-system/components/key-dates/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":104,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695153846]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":104,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695652009]
\ No newline at end of file
diff --git a/design-system/components/key-dates/index.html b/design-system/components/key-dates/index.html
index 61dc759c89..51eb4ede98 100644
--- a/design-system/components/key-dates/index.html
+++ b/design-system/components/key-dates/index.html
@@ -28,63 +28,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -96,8 +96,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Key dates</h1><p class="rpl-type-p-large" data-v-3163c6df>The Key dates component shows users a card promoting key dates or events.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use key dates to provide a card with brief summaries of up to 2 events or key dates with a call to action.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--key-dates&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--key-dates&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use only on landing pages.<!--]--></li><li><!--[-->Include in a grid of promo cards.<!--]--></li><li><!--[-->Only use once per page.<!--]--></li><li><!--[-->Use clear and concise content.<!--]--></li><li><!--[-->Only use as the last card in the grid.<!--]--></li><li><!--[-->Include a summary.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t use with navigation cards.<!--]--></li><li><!--[-->Don’t use the key dates card by itself.<!--]--></li><li><!--[-->Don’t overload with content.<!--]--></li><li><!--[-->Don’t use with other interactive elements like links.<!--]--></li><li><!--[-->Don’t use it to replace a call to action.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->The key date card uses colour to:<!--]--></p><ul><!--[--><li><!--[-->add visual prominence to key information<!--]--></li><li><!--[-->indicate an interaction to users.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--key-dates&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--key-dates&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/key-dates.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/key-dates/_payload.json">[{"state":1,"once":500,"_errors":502,"serverRendered":505,"path":7,"prerenderedAt":506},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":187,"$sdd-globals":203,"$sdd-navigation":205},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/key-dates":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":182,"_id":183,"_source":184,"_file":185,"_extension":186},"/design-system/components/key-dates","components",false,"","Key dates","The Key dates component shows users a card promoting key dates or events.","page","Core",{"type":16,"children":17,"toc":173},"root",[18,27,33,38,45,80,86,114,118,124,129,142,149],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use key dates to provide a card with brief summaries of up to 2 events or key dates with a call to action.",{"type":19,"tag":34,"props":35,"children":37},"docs-example",{"id":36},"core-navigation-card--key-dates",[],{"type":19,"tag":39,"props":40,"children":42},"h3",{"id":41},"when-and-how-to-use",[43],{"type":25,"value":44},"When and how to use",{"type":19,"tag":46,"props":47,"children":48},"ul",{},[49,55,60,65,70,75],{"type":19,"tag":50,"props":51,"children":52},"li",{},[53],{"type":25,"value":54},"Use only on landing pages.",{"type":19,"tag":50,"props":56,"children":57},{},[58],{"type":25,"value":59},"Include in a grid of promo cards.",{"type":19,"tag":50,"props":61,"children":62},{},[63],{"type":25,"value":64},"Only use once per page.",{"type":19,"tag":50,"props":66,"children":67},{},[68],{"type":25,"value":69},"Use clear and concise content.",{"type":19,"tag":50,"props":71,"children":72},{},[73],{"type":25,"value":74},"Only use as the last card in the grid.",{"type":19,"tag":50,"props":76,"children":77},{},[78],{"type":25,"value":79},"Include a summary.",{"type":19,"tag":39,"props":81,"children":83},{"id":82},"when-and-how-not-to-use",[84],{"type":25,"value":85},"When and how not to use",{"type":19,"tag":46,"props":87,"children":88},{},[89,94,99,104,109],{"type":19,"tag":50,"props":90,"children":91},{},[92],{"type":25,"value":93},"Don’t use with navigation cards.",{"type":19,"tag":50,"props":95,"children":96},{},[97],{"type":25,"value":98},"Don’t use the key dates card by itself.",{"type":19,"tag":50,"props":100,"children":101},{},[102],{"type":25,"value":103},"Don’t overload with content.",{"type":19,"tag":50,"props":105,"children":106},{},[107],{"type":25,"value":108},"Don’t use with other interactive elements like links.",{"type":19,"tag":50,"props":110,"children":111},{},[112],{"type":25,"value":113},"Don’t use it to replace a call to action.",{"type":19,"tag":115,"props":116,"children":117},"hr",{},[],{"type":19,"tag":20,"props":119,"children":121},{"id":120},"theming",[122],{"type":25,"value":123},"Theming",{"type":19,"tag":28,"props":125,"children":126},{},[127],{"type":25,"value":128},"The key date card uses colour to:",{"type":19,"tag":46,"props":130,"children":131},{},[132,137],{"type":19,"tag":50,"props":133,"children":134},{},[135],{"type":25,"value":136},"add visual prominence to key information",{"type":19,"tag":50,"props":138,"children":139},{},[140],{"type":25,"value":141},"indicate an interaction to users.",{"type":19,"tag":143,"props":144,"children":145},"docs-theme-chooser",{},[146],{"type":19,"tag":34,"props":147,"children":148},{"id":36},[],{"type":19,"tag":28,"props":150,"children":151},{},[152,154,163,165,171],{"type":25,"value":153},"To create your own theme, see ",{"type":19,"tag":155,"props":156,"children":160},"a",{"href":157,"rel":158},"https://www.vic.gov.au",[159],"nofollow",[161],{"type":25,"value":162},"theming guidance for designers",{"type":25,"value":164}," or ",{"type":19,"tag":155,"props":166,"children":168},{"href":157,"rel":167},[159],[169],{"type":25,"value":170},"theming guidance for developers",{"type":25,"value":172},".",{"title":10,"searchDepth":174,"depth":174,"links":175},2,[176,181],{"id":22,"depth":174,"text":26,"children":177},[178,180],{"id":41,"depth":179,"text":44},3,{"id":82,"depth":179,"text":85},{"id":120,"depth":174,"text":123},"markdown","content:design-system:5.components:key-dates.md","content","design-system/5.components/key-dates.md","md",["ShallowRef",188],["ShallowReactive",189],{"/design-system/components/key-dates":190},[191,197],{"_path":192,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":193,"description":194,"layout":13,"label":14,"_type":182,"_id":195,"_source":184,"_file":196,"_extension":186},"/design-system/components/input-field","Input field","The Input field component lets users input a short amount of text.","content:design-system:5.components:input-field.md","design-system/5.components/input-field.md",{"_path":198,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":199,"description":200,"layout":13,"label":14,"_type":182,"_id":201,"_source":184,"_file":202,"_extension":186},"/design-system/components/media-embed","Media embed","The Media embed component shows an image or video within the page content, with optional text to give context.","content:design-system:5.components:media-embed.md","design-system/5.components/media-embed.md",["ShallowRef",204],{},[206,211,452],{"title":207,"_path":208,"icon":209,"layout":210},"Ripple Design System","/","carbon:home","home",{"title":212,"_path":213,"children":214},"Design System","/design-system",[215,231,247,276,310],{"title":216,"_path":217,"children":218},"About","/design-system/about",[219,222,225,228],{"title":220,"_path":221,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":223,"_path":224,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":226,"_path":227,"layout":13},"Support","/design-system/about/getting-support",{"title":229,"_path":230,"layout":13},"Contributing","/design-system/about/contributing",{"title":232,"_path":233,"children":234},"Design","/design-system/design",[235,238,241,244],{"title":236,"_path":237,"layout":13},"Getting started","/design-system/design/getting-started",{"title":239,"_path":240,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":242,"_path":243,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":245,"_path":246,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":248,"_path":249,"children":250},"Develop","/design-system/develop",[251,253,255,258],{"title":236,"_path":252,"layout":13},"/design-system/develop/getting-started",{"title":229,"_path":254,"layout":13},"/design-system/develop/contributing",{"title":256,"_path":257,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":259,"children":260,"layout":13},"/design-system/develop/usage",[261,264,267,270,273],{"title":262,"_path":263,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":265,"_path":266,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":268,"_path":269,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":271,"_path":272,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":274,"_path":275,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":277,"_path":278,"children":279},"Styles","/design-system/styles",[280,283,286,289,292,295,298,301,304,307],{"title":281,"_path":282,"layout":13},"Colour","/design-system/styles/colour",{"title":284,"_path":285,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":287,"_path":288,"layout":13},"Grid","/design-system/styles/grid",{"title":290,"_path":291,"layout":13},"Icons","/design-system/styles/icons",{"title":293,"_path":294,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":296,"_path":297,"layout":13},"Layout","/design-system/styles/layout",{"title":299,"_path":300,"layout":13},"Logo","/design-system/styles/logo",{"title":302,"_path":303,"layout":13},"Motion","/design-system/styles/motion",{"title":305,"_path":306,"layout":13},"Spacing","/design-system/styles/spacing",{"title":308,"_path":309,"layout":13},"Typography","/design-system/styles/typography",{"title":311,"_path":312,"children":313},"Components","/design-system/components",[314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,387,388,391,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440,443,446,449],{"title":315,"_path":316,"layout":13},"Accordion","/design-system/components/accordion",{"title":318,"_path":319,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":321,"_path":322,"layout":13},"Alert","/design-system/components/alert",{"title":324,"_path":325,"layout":13},"Block quote","/design-system/components/block-quote",{"title":327,"_path":328,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":330,"_path":331,"layout":13},"Button","/design-system/components/button",{"title":333,"_path":334,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":336,"_path":337,"layout":13},"Callout","/design-system/components/callout",{"title":339,"_path":340,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":342,"_path":343,"layout":13},"Card","/design-system/components/card",{"title":345,"_path":346,"layout":13},"Carousel","/design-system/components/carousel",{"title":348,"_path":349,"layout":13},"Category grid","/design-system/components/category-grid",{"title":351,"_path":352,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":354,"_path":355,"layout":13},"Chip","/design-system/components/chip",{"title":357,"_path":358,"layout":13},"Contact us","/design-system/components/contact-us",{"title":360,"_path":361,"layout":13},"Date input","/design-system/components/date-input",{"title":363,"_path":364,"layout":13},"Detail list","/design-system/components/detail-list",{"title":366,"_path":367,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":369,"_path":370,"layout":13},"File","/design-system/components/file",{"title":372,"_path":373,"layout":13},"Footer","/design-system/components/footer",{"title":375,"_path":376,"layout":13},"Form","/design-system/components/form",{"title":378,"_path":379,"layout":13},"Form alert","/design-system/components/form-alert",{"title":381,"_path":382,"layout":13},"Header","/design-system/components/header",{"title":384,"_path":385,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":193,"_path":192,"layout":13},{"title":11,"_path":7,"layout":13},{"title":389,"_path":390,"layout":13},"Media","/design-system/components/media",{"title":199,"_path":198,"layout":13},{"title":393,"_path":394,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":396,"_path":397,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":399,"_path":400,"layout":13},"Option button","/design-system/components/option-button",{"title":402,"_path":403,"layout":13},"Page action","/design-system/components/page-action",{"title":405,"_path":406,"layout":13},"Pagination","/design-system/components/pagination",{"title":408,"_path":409,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":411,"_path":412,"layout":13},"Profile","/design-system/components/profile",{"title":414,"_path":415,"layout":13},"Radio button","/design-system/components/radio-button",{"title":417,"_path":418,"layout":13},"Related links","/design-system/components/related-links",{"title":420,"_path":421,"layout":13},"Results listing","/design-system/components/results-listing",{"title":423,"_path":424,"layout":13},"Search bar","/design-system/components/search-bar",{"title":426,"_path":427,"layout":13},"Skip link","/design-system/components/skip-link",{"title":429,"_path":430,"layout":13},"Social share","/design-system/components/social-share",{"title":432,"_path":433,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":435,"_path":436,"layout":13},"Table","/design-system/components/table",{"title":438,"_path":439,"layout":13},"Tabs","/design-system/components/tabs",{"title":441,"_path":442,"layout":13},"Tag","/design-system/components/tag",{"title":444,"_path":445,"layout":13},"Text area","/design-system/components/text-area",{"title":447,"_path":448,"layout":13},"Timeline","/design-system/components/timeline",{"title":450,"_path":451,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":453,"_path":454,"children":455,"layout":13},"Ripple Framework","/framework",[456,457,475,497],{"title":453,"_path":454,"layout":13},{"title":458,"_path":459,"children":460},"Key Concepts","/framework/key-concepts",[461,463,466,469,472],{"title":268,"_path":462,"layout":13},"/framework/key-concepts/nuxt",{"title":464,"_path":465,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":467,"_path":468,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":470,"_path":471,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":473,"_path":474,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":476,"_path":477,"children":478},"Guides","/framework/guides",[479,482,485,488,491,494],{"title":480,"_path":481,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":483,"_path":484,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":486,"_path":487,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":489,"_path":490,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":492,"_path":493,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":495,"_path":496,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":498,"_path":499,"layout":13},"Core modules","/framework/core-modules",["Reactive",501],["Set"],["Reactive",503],{"module-navigation":504},null,true,1714695153846]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Key dates</h1><p class="rpl-type-p-large" data-v-3163c6df>The Key dates component shows users a card promoting key dates or events.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use key dates to provide a card with brief summaries of up to 2 events or key dates with a call to action.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--key-dates&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--key-dates&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use only on landing pages.<!--]--></li><li><!--[-->Include in a grid of promo cards.<!--]--></li><li><!--[-->Only use once per page.<!--]--></li><li><!--[-->Use clear and concise content.<!--]--></li><li><!--[-->Only use as the last card in the grid.<!--]--></li><li><!--[-->Include a summary.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t use with navigation cards.<!--]--></li><li><!--[-->Don’t use the key dates card by itself.<!--]--></li><li><!--[-->Don’t overload with content.<!--]--></li><li><!--[-->Don’t use with other interactive elements like links.<!--]--></li><li><!--[-->Don’t use it to replace a call to action.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->The key date card uses colour to:<!--]--></p><ul><!--[--><li><!--[-->add visual prominence to key information<!--]--></li><li><!--[-->indicate an interaction to users.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-card--key-dates&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-card--key-dates&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/key-dates.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/key-dates/_payload.json">[{"state":1,"once":500,"_errors":502,"serverRendered":505,"path":7,"prerenderedAt":506},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":187,"$sdd-globals":203,"$sdd-navigation":205},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/key-dates":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":182,"_id":183,"_source":184,"_file":185,"_extension":186},"/design-system/components/key-dates","components",false,"","Key dates","The Key dates component shows users a card promoting key dates or events.","page","Core",{"type":16,"children":17,"toc":173},"root",[18,27,33,38,45,80,86,114,118,124,129,142,149],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use key dates to provide a card with brief summaries of up to 2 events or key dates with a call to action.",{"type":19,"tag":34,"props":35,"children":37},"docs-example",{"id":36},"core-navigation-card--key-dates",[],{"type":19,"tag":39,"props":40,"children":42},"h3",{"id":41},"when-and-how-to-use",[43],{"type":25,"value":44},"When and how to use",{"type":19,"tag":46,"props":47,"children":48},"ul",{},[49,55,60,65,70,75],{"type":19,"tag":50,"props":51,"children":52},"li",{},[53],{"type":25,"value":54},"Use only on landing pages.",{"type":19,"tag":50,"props":56,"children":57},{},[58],{"type":25,"value":59},"Include in a grid of promo cards.",{"type":19,"tag":50,"props":61,"children":62},{},[63],{"type":25,"value":64},"Only use once per page.",{"type":19,"tag":50,"props":66,"children":67},{},[68],{"type":25,"value":69},"Use clear and concise content.",{"type":19,"tag":50,"props":71,"children":72},{},[73],{"type":25,"value":74},"Only use as the last card in the grid.",{"type":19,"tag":50,"props":76,"children":77},{},[78],{"type":25,"value":79},"Include a summary.",{"type":19,"tag":39,"props":81,"children":83},{"id":82},"when-and-how-not-to-use",[84],{"type":25,"value":85},"When and how not to use",{"type":19,"tag":46,"props":87,"children":88},{},[89,94,99,104,109],{"type":19,"tag":50,"props":90,"children":91},{},[92],{"type":25,"value":93},"Don’t use with navigation cards.",{"type":19,"tag":50,"props":95,"children":96},{},[97],{"type":25,"value":98},"Don’t use the key dates card by itself.",{"type":19,"tag":50,"props":100,"children":101},{},[102],{"type":25,"value":103},"Don’t overload with content.",{"type":19,"tag":50,"props":105,"children":106},{},[107],{"type":25,"value":108},"Don’t use with other interactive elements like links.",{"type":19,"tag":50,"props":110,"children":111},{},[112],{"type":25,"value":113},"Don’t use it to replace a call to action.",{"type":19,"tag":115,"props":116,"children":117},"hr",{},[],{"type":19,"tag":20,"props":119,"children":121},{"id":120},"theming",[122],{"type":25,"value":123},"Theming",{"type":19,"tag":28,"props":125,"children":126},{},[127],{"type":25,"value":128},"The key date card uses colour to:",{"type":19,"tag":46,"props":130,"children":131},{},[132,137],{"type":19,"tag":50,"props":133,"children":134},{},[135],{"type":25,"value":136},"add visual prominence to key information",{"type":19,"tag":50,"props":138,"children":139},{},[140],{"type":25,"value":141},"indicate an interaction to users.",{"type":19,"tag":143,"props":144,"children":145},"docs-theme-chooser",{},[146],{"type":19,"tag":34,"props":147,"children":148},{"id":36},[],{"type":19,"tag":28,"props":150,"children":151},{},[152,154,163,165,171],{"type":25,"value":153},"To create your own theme, see ",{"type":19,"tag":155,"props":156,"children":160},"a",{"href":157,"rel":158},"https://www.vic.gov.au",[159],"nofollow",[161],{"type":25,"value":162},"theming guidance for designers",{"type":25,"value":164}," or ",{"type":19,"tag":155,"props":166,"children":168},{"href":157,"rel":167},[159],[169],{"type":25,"value":170},"theming guidance for developers",{"type":25,"value":172},".",{"title":10,"searchDepth":174,"depth":174,"links":175},2,[176,181],{"id":22,"depth":174,"text":26,"children":177},[178,180],{"id":41,"depth":179,"text":44},3,{"id":82,"depth":179,"text":85},{"id":120,"depth":174,"text":123},"markdown","content:design-system:5.components:key-dates.md","content","design-system/5.components/key-dates.md","md",["ShallowRef",188],["ShallowReactive",189],{"/design-system/components/key-dates":190},[191,197],{"_path":192,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":193,"description":194,"layout":13,"label":14,"_type":182,"_id":195,"_source":184,"_file":196,"_extension":186},"/design-system/components/input-field","Input field","The Input field component lets users input a short amount of text.","content:design-system:5.components:input-field.md","design-system/5.components/input-field.md",{"_path":198,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":199,"description":200,"layout":13,"label":14,"_type":182,"_id":201,"_source":184,"_file":202,"_extension":186},"/design-system/components/media-embed","Media embed","The Media embed component shows an image or video within the page content, with optional text to give context.","content:design-system:5.components:media-embed.md","design-system/5.components/media-embed.md",["ShallowRef",204],{},[206,211,452],{"title":207,"_path":208,"icon":209,"layout":210},"Ripple Design System","/","carbon:home","home",{"title":212,"_path":213,"children":214},"Design System","/design-system",[215,231,247,276,310],{"title":216,"_path":217,"children":218},"About","/design-system/about",[219,222,225,228],{"title":220,"_path":221,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":223,"_path":224,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":226,"_path":227,"layout":13},"Support","/design-system/about/getting-support",{"title":229,"_path":230,"layout":13},"Contributing","/design-system/about/contributing",{"title":232,"_path":233,"children":234},"Design","/design-system/design",[235,238,241,244],{"title":236,"_path":237,"layout":13},"Getting started","/design-system/design/getting-started",{"title":239,"_path":240,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":242,"_path":243,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":245,"_path":246,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":248,"_path":249,"children":250},"Develop","/design-system/develop",[251,253,255,258],{"title":236,"_path":252,"layout":13},"/design-system/develop/getting-started",{"title":229,"_path":254,"layout":13},"/design-system/develop/contributing",{"title":256,"_path":257,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":259,"children":260,"layout":13},"/design-system/develop/usage",[261,264,267,270,273],{"title":262,"_path":263,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":265,"_path":266,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":268,"_path":269,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":271,"_path":272,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":274,"_path":275,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":277,"_path":278,"children":279},"Styles","/design-system/styles",[280,283,286,289,292,295,298,301,304,307],{"title":281,"_path":282,"layout":13},"Colour","/design-system/styles/colour",{"title":284,"_path":285,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":287,"_path":288,"layout":13},"Grid","/design-system/styles/grid",{"title":290,"_path":291,"layout":13},"Icons","/design-system/styles/icons",{"title":293,"_path":294,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":296,"_path":297,"layout":13},"Layout","/design-system/styles/layout",{"title":299,"_path":300,"layout":13},"Logo","/design-system/styles/logo",{"title":302,"_path":303,"layout":13},"Motion","/design-system/styles/motion",{"title":305,"_path":306,"layout":13},"Spacing","/design-system/styles/spacing",{"title":308,"_path":309,"layout":13},"Typography","/design-system/styles/typography",{"title":311,"_path":312,"children":313},"Components","/design-system/components",[314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,387,388,391,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440,443,446,449],{"title":315,"_path":316,"layout":13},"Accordion","/design-system/components/accordion",{"title":318,"_path":319,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":321,"_path":322,"layout":13},"Alert","/design-system/components/alert",{"title":324,"_path":325,"layout":13},"Block quote","/design-system/components/block-quote",{"title":327,"_path":328,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":330,"_path":331,"layout":13},"Button","/design-system/components/button",{"title":333,"_path":334,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":336,"_path":337,"layout":13},"Callout","/design-system/components/callout",{"title":339,"_path":340,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":342,"_path":343,"layout":13},"Card","/design-system/components/card",{"title":345,"_path":346,"layout":13},"Carousel","/design-system/components/carousel",{"title":348,"_path":349,"layout":13},"Category grid","/design-system/components/category-grid",{"title":351,"_path":352,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":354,"_path":355,"layout":13},"Chip","/design-system/components/chip",{"title":357,"_path":358,"layout":13},"Contact us","/design-system/components/contact-us",{"title":360,"_path":361,"layout":13},"Date input","/design-system/components/date-input",{"title":363,"_path":364,"layout":13},"Detail list","/design-system/components/detail-list",{"title":366,"_path":367,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":369,"_path":370,"layout":13},"File","/design-system/components/file",{"title":372,"_path":373,"layout":13},"Footer","/design-system/components/footer",{"title":375,"_path":376,"layout":13},"Form","/design-system/components/form",{"title":378,"_path":379,"layout":13},"Form alert","/design-system/components/form-alert",{"title":381,"_path":382,"layout":13},"Header","/design-system/components/header",{"title":384,"_path":385,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":193,"_path":192,"layout":13},{"title":11,"_path":7,"layout":13},{"title":389,"_path":390,"layout":13},"Media","/design-system/components/media",{"title":199,"_path":198,"layout":13},{"title":393,"_path":394,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":396,"_path":397,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":399,"_path":400,"layout":13},"Option button","/design-system/components/option-button",{"title":402,"_path":403,"layout":13},"Page action","/design-system/components/page-action",{"title":405,"_path":406,"layout":13},"Pagination","/design-system/components/pagination",{"title":408,"_path":409,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":411,"_path":412,"layout":13},"Profile","/design-system/components/profile",{"title":414,"_path":415,"layout":13},"Radio button","/design-system/components/radio-button",{"title":417,"_path":418,"layout":13},"Related links","/design-system/components/related-links",{"title":420,"_path":421,"layout":13},"Results listing","/design-system/components/results-listing",{"title":423,"_path":424,"layout":13},"Search bar","/design-system/components/search-bar",{"title":426,"_path":427,"layout":13},"Skip link","/design-system/components/skip-link",{"title":429,"_path":430,"layout":13},"Social share","/design-system/components/social-share",{"title":432,"_path":433,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":435,"_path":436,"layout":13},"Table","/design-system/components/table",{"title":438,"_path":439,"layout":13},"Tabs","/design-system/components/tabs",{"title":441,"_path":442,"layout":13},"Tag","/design-system/components/tag",{"title":444,"_path":445,"layout":13},"Text area","/design-system/components/text-area",{"title":447,"_path":448,"layout":13},"Timeline","/design-system/components/timeline",{"title":450,"_path":451,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":453,"_path":454,"children":455,"layout":13},"Ripple Framework","/framework",[456,457,475,497],{"title":453,"_path":454,"layout":13},{"title":458,"_path":459,"children":460},"Key Concepts","/framework/key-concepts",[461,463,466,469,472],{"title":268,"_path":462,"layout":13},"/framework/key-concepts/nuxt",{"title":464,"_path":465,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":467,"_path":468,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":470,"_path":471,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":473,"_path":474,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":476,"_path":477,"children":478},"Guides","/framework/guides",[479,482,485,488,491,494],{"title":480,"_path":481,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":483,"_path":484,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":486,"_path":487,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":489,"_path":490,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":492,"_path":493,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":495,"_path":496,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":498,"_path":499,"layout":13},"Core modules","/framework/core-modules",["Reactive",501],["Set"],["Reactive",503],{"module-navigation":504},null,true,1714695652009]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/media-embed/_payload.json b/design-system/components/media-embed/_payload.json
index 5988f6430b..f64fb1fc8b 100644
--- a/design-system/components/media-embed/_payload.json
+++ b/design-system/components/media-embed/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":104,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695154011]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":104,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695652236]
\ No newline at end of file
diff --git a/design-system/components/media-embed/index.html b/design-system/components/media-embed/index.html
index bc86a9da24..09cf8e0ae5 100644
--- a/design-system/components/media-embed/index.html
+++ b/design-system/components/media-embed/index.html
@@ -28,64 +28,64 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.CwUV-MIb.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.gK7ORMEc.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -97,8 +97,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Media embed</h1><p class="rpl-type-p-large" data-v-3163c6df>The Media embed component shows an image or video within the page content, with optional text to give context.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use media embed to add visual elements including images, videos, graphs, infographics, maps and charts to your page content.<!--]--></p><p><!--[-->Use the optional text to combine the visual element with text, so that the user understands the visual element’s context. Optional text should always be used for complex media like graphs and charts with supporting data.<!--]--></p><p><!--[-->Media can be an image or video. Images can display as small, medium or large.<!--]--></p><p><!--[-->When using the complex media variant, media displays at either a max width or height. This ensures it always displays the full image.<!--]--></p><p><!--[-->See <a href="/design-system/components/media/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->media<!--]--><!--]--><!----><!--]--></a> for information relating to file type, ratios and focal point.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-media-embed--image-landscape&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--image-landscape&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use it with videos, images or complex images.<!--]--></li><li><!--[-->Add data when using the complex image variant.<!--]--></li><li><!--[-->Ensure the media is the right size so that it displays without error.<!--]--></li><li><!--[-->Only add it to the content section of a page.<!--]--></li><li><!--[-->Add an optional image caption and metadata.<!--]--></li><li><!--[-->Always include alt text.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t include media unrelated to the page.<!--]--></li><li><!--[-->Avoid adding interactive elements, like links, to the caption or metadata sections.<!--]--></li><li><!--[-->Never use a video without closed captions and a transcript.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->Media embed has 3 variants:<!--]--></p><ul><!--[--><li><!--[-->image<!--]--></li><li><!--[-->video<!--]--></li><li><!--[-->complex media.<!--]--></li><!--]--></ul><p><!--[-->Depending on the variant used, you can display:<!--]--></p><ul><!--[--><li><!--[-->a caption<!--]--></li><li><!--[-->metadata<!--]--></li><li><!--[-->a transcript link<!--]--></li><li><!--[-->accompanying data.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="image" data-v-ea525968><a href="#image" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Image<!--]--></a></h2><p><!--[-->The image variant has 4 display options:<!--]--></p><ul><!--[--><li><!--[-->landscape / 16:9 ratio<!--]--></li><li><!--[-->portrait / 3:4 ratio<!--]--></li><li><!--[-->square / 1:1 ratio<!--]--></li><li><!--[-->avatar / circle.<!--]--></li><!--]--></ul><p><!--[-->You can display portrait, landscape and square as small, medium or large. Avatar only displays in small or medium.<!--]--></p><p><!--[-->The media gets cropped to fill the selected ratio. Make sure the media&#39;s focal point is best placed to accurately represent the media item.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="landscape"><!--[-->Landscape<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-media-embed--image-landscape&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--image-landscape&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="portrait"><!--[-->Portrait<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-media-embed--image-portrait&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--image-portrait&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="square"><!--[-->Square<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-media-embed--image-square&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--image-square&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="avatar"><!--[-->Avatar<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-media-embed--image-avatar&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--image-avatar&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="video" data-v-ea525968><a href="#video" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Video<!--]--></a></h2><p><!--[-->Videos will always display at a 16:9 ratio.<!--]--></p><p><!--[-->A &#39;view transcript&#39; link displays by default. Videos must have both closed captions and a transcript.<!--]--></p><p><!--[-->Include a supporting caption to give extra context to the user.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-media-embed--video&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--video&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="complex-media" data-v-ea525968><a href="#complex-media" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Complex media<!--]--></a></h2><p><!--[-->Complex media items contain detail. They include:<!--]--></p><ul><!--[--><li><!--[-->infographics<!--]--></li><li><!--[-->graphs<!--]--></li><li><!--[-->flowchart<!--]--></li><li><!--[-->maps.<!--]--></li><!--]--></ul><p><!--[-->You can support media by including:<!--]--></p><ul><!--[--><li><!--[-->optional supporting data such as content or tables<!--]--></li><li><!--[-->a view fullscreen link<!--]--></li><li><!--[-->a download media link.<!--]--></li><!--]--></ul><p><!--[-->Optional supporting data displays in a dropdown list. Use the type of content that will best communicate your supporting data to the user. For example, some information is conveyed better by a table, rather than plain text.<!--]--></p><p><!--[-->Complex media will always display the full image. The media item will display at a predefined max height or width.<!--]--></p><p><!--[-->When the media is fullscreen, it displays in the media fullscreen component.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-media-embed--complex-image&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--complex-image&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Media embed uses colour for:<!--]--></p><ul><!--[--><li><!--[-->icons<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-media-embed--complex-image&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--complex-image&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/media-embed.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/media-embed/_payload.json">[{"state":1,"once":762,"_errors":764,"serverRendered":767,"path":7,"prerenderedAt":768},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":451,"$sdd-globals":467,"$sdd-navigation":469},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/media-embed":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":446,"_id":447,"_source":448,"_file":449,"_extension":450},"/design-system/components/media-embed","components",false,"","Media embed","The Media embed component shows an image or video within the page content, with optional text to give context.","page","Core",{"type":16,"children":17,"toc":432},"root",[18,27,33,38,43,48,62,67,74,109,115,133,137,143,148,166,171,194,199,204,227,232,237,244,247,253,257,263,267,273,277,282,287,292,297,301,307,312,335,340,358,363,368,373,377,380,386,391,404,411],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use media embed to add visual elements including images, videos, graphs, infographics, maps and charts to your page content.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Use the optional text to combine the visual element with text, so that the user understands the visual element’s context. Optional text should always be used for complex media like graphs and charts with supporting data.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Media can be an image or video. Images can display as small, medium or large.",{"type":19,"tag":28,"props":44,"children":45},{},[46],{"type":25,"value":47},"When using the complex media variant, media displays at either a max width or height. This ensures it always displays the full image.",{"type":19,"tag":28,"props":49,"children":50},{},[51,53,60],{"type":25,"value":52},"See ",{"type":19,"tag":54,"props":55,"children":57},"a",{"href":56},"/design-system/components/media/",[58],{"type":25,"value":59},"media",{"type":25,"value":61}," for information relating to file type, ratios and focal point.",{"type":19,"tag":63,"props":64,"children":66},"docs-example",{"id":65},"core-containers-media-embed--image-landscape",[],{"type":19,"tag":68,"props":69,"children":71},"h3",{"id":70},"when-and-how-to-use",[72],{"type":25,"value":73},"When and how to use",{"type":19,"tag":75,"props":76,"children":77},"ul",{},[78,84,89,94,99,104],{"type":19,"tag":79,"props":80,"children":81},"li",{},[82],{"type":25,"value":83},"Use it with videos, images or complex images.",{"type":19,"tag":79,"props":85,"children":86},{},[87],{"type":25,"value":88},"Add data when using the complex image variant.",{"type":19,"tag":79,"props":90,"children":91},{},[92],{"type":25,"value":93},"Ensure the media is the right size so that it displays without error.",{"type":19,"tag":79,"props":95,"children":96},{},[97],{"type":25,"value":98},"Only add it to the content section of a page.",{"type":19,"tag":79,"props":100,"children":101},{},[102],{"type":25,"value":103},"Add an optional image caption and metadata.",{"type":19,"tag":79,"props":105,"children":106},{},[107],{"type":25,"value":108},"Always include alt text.",{"type":19,"tag":68,"props":110,"children":112},{"id":111},"when-and-how-not-to-use",[113],{"type":25,"value":114},"When and how not to use",{"type":19,"tag":75,"props":116,"children":117},{},[118,123,128],{"type":19,"tag":79,"props":119,"children":120},{},[121],{"type":25,"value":122},"Don't include media unrelated to the page.",{"type":19,"tag":79,"props":124,"children":125},{},[126],{"type":25,"value":127},"Avoid adding interactive elements, like links, to the caption or metadata sections.",{"type":19,"tag":79,"props":129,"children":130},{},[131],{"type":25,"value":132},"Never use a video without closed captions and a transcript.",{"type":19,"tag":134,"props":135,"children":136},"hr",{},[],{"type":19,"tag":20,"props":138,"children":140},{"id":139},"variants",[141],{"type":25,"value":142},"Variants",{"type":19,"tag":28,"props":144,"children":145},{},[146],{"type":25,"value":147},"Media embed has 3 variants:",{"type":19,"tag":75,"props":149,"children":150},{},[151,156,161],{"type":19,"tag":79,"props":152,"children":153},{},[154],{"type":25,"value":155},"image",{"type":19,"tag":79,"props":157,"children":158},{},[159],{"type":25,"value":160},"video",{"type":19,"tag":79,"props":162,"children":163},{},[164],{"type":25,"value":165},"complex media.",{"type":19,"tag":28,"props":167,"children":168},{},[169],{"type":25,"value":170},"Depending on the variant used, you can display:",{"type":19,"tag":75,"props":172,"children":173},{},[174,179,184,189],{"type":19,"tag":79,"props":175,"children":176},{},[177],{"type":25,"value":178},"a caption",{"type":19,"tag":79,"props":180,"children":181},{},[182],{"type":25,"value":183},"metadata",{"type":19,"tag":79,"props":185,"children":186},{},[187],{"type":25,"value":188},"a transcript link",{"type":19,"tag":79,"props":190,"children":191},{},[192],{"type":25,"value":193},"accompanying data.",{"type":19,"tag":68,"props":195,"children":196},{"id":155},[197],{"type":25,"value":198},"Image",{"type":19,"tag":28,"props":200,"children":201},{},[202],{"type":25,"value":203},"The image variant has 4 display options:",{"type":19,"tag":75,"props":205,"children":206},{},[207,212,217,222],{"type":19,"tag":79,"props":208,"children":209},{},[210],{"type":25,"value":211},"landscape / 16:9 ratio",{"type":19,"tag":79,"props":213,"children":214},{},[215],{"type":25,"value":216},"portrait / 3:4 ratio",{"type":19,"tag":79,"props":218,"children":219},{},[220],{"type":25,"value":221},"square / 1:1 ratio",{"type":19,"tag":79,"props":223,"children":224},{},[225],{"type":25,"value":226},"avatar / circle.",{"type":19,"tag":28,"props":228,"children":229},{},[230],{"type":25,"value":231},"You can display portrait, landscape and square as small, medium or large. Avatar only displays in small or medium.",{"type":19,"tag":28,"props":233,"children":234},{},[235],{"type":25,"value":236},"The media gets cropped to fill the selected ratio. Make sure the media's focal point is best placed to accurately represent the media item.",{"type":19,"tag":238,"props":239,"children":241},"h4",{"id":240},"landscape",[242],{"type":25,"value":243},"Landscape",{"type":19,"tag":63,"props":245,"children":246},{"id":65},[],{"type":19,"tag":238,"props":248,"children":250},{"id":249},"portrait",[251],{"type":25,"value":252},"Portrait",{"type":19,"tag":63,"props":254,"children":256},{"id":255},"core-containers-media-embed--image-portrait",[],{"type":19,"tag":238,"props":258,"children":260},{"id":259},"square",[261],{"type":25,"value":262},"Square",{"type":19,"tag":63,"props":264,"children":266},{"id":265},"core-containers-media-embed--image-square",[],{"type":19,"tag":238,"props":268,"children":270},{"id":269},"avatar",[271],{"type":25,"value":272},"Avatar",{"type":19,"tag":63,"props":274,"children":276},{"id":275},"core-containers-media-embed--image-avatar",[],{"type":19,"tag":68,"props":278,"children":279},{"id":160},[280],{"type":25,"value":281},"Video",{"type":19,"tag":28,"props":283,"children":284},{},[285],{"type":25,"value":286},"Videos will always display at a 16:9 ratio.",{"type":19,"tag":28,"props":288,"children":289},{},[290],{"type":25,"value":291},"A 'view transcript' link displays by default. Videos must have both closed captions and a transcript.",{"type":19,"tag":28,"props":293,"children":294},{},[295],{"type":25,"value":296},"Include a supporting caption to give extra context to the user.",{"type":19,"tag":63,"props":298,"children":300},{"id":299},"core-containers-media-embed--video",[],{"type":19,"tag":68,"props":302,"children":304},{"id":303},"complex-media",[305],{"type":25,"value":306},"Complex media",{"type":19,"tag":28,"props":308,"children":309},{},[310],{"type":25,"value":311},"Complex media items contain detail. They include:",{"type":19,"tag":75,"props":313,"children":314},{},[315,320,325,330],{"type":19,"tag":79,"props":316,"children":317},{},[318],{"type":25,"value":319},"infographics",{"type":19,"tag":79,"props":321,"children":322},{},[323],{"type":25,"value":324},"graphs",{"type":19,"tag":79,"props":326,"children":327},{},[328],{"type":25,"value":329},"flowchart",{"type":19,"tag":79,"props":331,"children":332},{},[333],{"type":25,"value":334},"maps.",{"type":19,"tag":28,"props":336,"children":337},{},[338],{"type":25,"value":339},"You can support media by including:",{"type":19,"tag":75,"props":341,"children":342},{},[343,348,353],{"type":19,"tag":79,"props":344,"children":345},{},[346],{"type":25,"value":347},"optional supporting data such as content or tables",{"type":19,"tag":79,"props":349,"children":350},{},[351],{"type":25,"value":352},"a view fullscreen link",{"type":19,"tag":79,"props":354,"children":355},{},[356],{"type":25,"value":357},"a download media link.",{"type":19,"tag":28,"props":359,"children":360},{},[361],{"type":25,"value":362},"Optional supporting data displays in a dropdown list. Use the type of content that will best communicate your supporting data to the user. For example, some information is conveyed better by a table, rather than plain text.",{"type":19,"tag":28,"props":364,"children":365},{},[366],{"type":25,"value":367},"Complex media will always display the full image. The media item will display at a predefined max height or width.",{"type":19,"tag":28,"props":369,"children":370},{},[371],{"type":25,"value":372},"When the media is fullscreen, it displays in the media fullscreen component.",{"type":19,"tag":63,"props":374,"children":376},{"id":375},"core-containers-media-embed--complex-image",[],{"type":19,"tag":134,"props":378,"children":379},{},[],{"type":19,"tag":20,"props":381,"children":383},{"id":382},"theming",[384],{"type":25,"value":385},"Theming",{"type":19,"tag":28,"props":387,"children":388},{},[389],{"type":25,"value":390},"Media embed uses colour for:",{"type":19,"tag":75,"props":392,"children":393},{},[394,399],{"type":19,"tag":79,"props":395,"children":396},{},[397],{"type":25,"value":398},"icons",{"type":19,"tag":79,"props":400,"children":401},{},[402],{"type":25,"value":403},"interactive states.",{"type":19,"tag":405,"props":406,"children":407},"docs-theme-chooser",{},[408],{"type":19,"tag":63,"props":409,"children":410},{"id":375},[],{"type":19,"tag":28,"props":412,"children":413},{},[414,416,422,424,430],{"type":25,"value":415},"To create your own theme see ",{"type":19,"tag":54,"props":417,"children":419},{"href":418},"/design-system/design/theming-guidance-for-designers",[420],{"type":25,"value":421},"theming guidance for designers",{"type":25,"value":423}," or ",{"type":19,"tag":54,"props":425,"children":427},{"href":426},"/design-system/develop/theming",[428],{"type":25,"value":429},"theming guidance for developers",{"type":25,"value":431},".",{"title":10,"searchDepth":433,"depth":433,"links":434},2,[435,440,445],{"id":22,"depth":433,"text":26,"children":436},[437,439],{"id":70,"depth":438,"text":73},3,{"id":111,"depth":438,"text":114},{"id":139,"depth":433,"text":142,"children":441},[442,443,444],{"id":155,"depth":438,"text":198},{"id":160,"depth":438,"text":281},{"id":303,"depth":438,"text":306},{"id":382,"depth":433,"text":385},"markdown","content:design-system:5.components:media-embed.md","content","design-system/5.components/media-embed.md","md",["ShallowRef",452],["ShallowReactive",453],{"/design-system/components/media-embed":454},[455,461],{"_path":456,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":457,"description":458,"layout":13,"label":14,"_type":446,"_id":459,"_source":448,"_file":460,"_extension":450},"/design-system/components/key-dates","Key dates","The Key dates component shows users a card promoting key dates or events.","content:design-system:5.components:key-dates.md","design-system/5.components/key-dates.md",{"_path":462,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":463,"description":464,"layout":13,"label":14,"_type":446,"_id":465,"_source":448,"_file":466,"_extension":450},"/design-system/components/media-fullscreen","Media fullscreen","The Media fullscreen component is an icon, with text instructions, beneath your media items for users to interact with so they can view one or more related media items in fullscreen.","content:design-system:5.components:media-fullscreen.md","design-system/5.components/media-fullscreen.md",["ShallowRef",468],{},[470,475,714],{"title":471,"_path":472,"icon":473,"layout":474},"Ripple Design System","/","carbon:home","home",{"title":476,"_path":477,"children":478},"Design System","/design-system",[479,495,510,538,572],{"title":480,"_path":481,"children":482},"About","/design-system/about",[483,486,489,492],{"title":484,"_path":485,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":487,"_path":488,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":490,"_path":491,"layout":13},"Support","/design-system/about/getting-support",{"title":493,"_path":494,"layout":13},"Contributing","/design-system/about/contributing",{"title":496,"_path":497,"children":498},"Design","/design-system/design",[499,502,505,508],{"title":500,"_path":501,"layout":13},"Getting started","/design-system/design/getting-started",{"title":503,"_path":504,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":506,"_path":507,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":509,"_path":418,"layout":13},"Theming guidance for designers",{"title":511,"_path":512,"children":513},"Develop","/design-system/develop",[514,516,518,520],{"title":500,"_path":515,"layout":13},"/design-system/develop/getting-started",{"title":493,"_path":517,"layout":13},"/design-system/develop/contributing",{"title":519,"_path":426,"layout":13},"Theme and brand application",{"title":26,"_path":521,"children":522,"layout":13},"/design-system/develop/usage",[523,526,529,532,535],{"title":524,"_path":525,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":527,"_path":528,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":530,"_path":531,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":533,"_path":534,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":536,"_path":537,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":539,"_path":540,"children":541},"Styles","/design-system/styles",[542,545,548,551,554,557,560,563,566,569],{"title":543,"_path":544,"layout":13},"Colour","/design-system/styles/colour",{"title":546,"_path":547,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":549,"_path":550,"layout":13},"Grid","/design-system/styles/grid",{"title":552,"_path":553,"layout":13},"Icons","/design-system/styles/icons",{"title":555,"_path":556,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":558,"_path":559,"layout":13},"Layout","/design-system/styles/layout",{"title":561,"_path":562,"layout":13},"Logo","/design-system/styles/logo",{"title":564,"_path":565,"layout":13},"Motion","/design-system/styles/motion",{"title":567,"_path":568,"layout":13},"Spacing","/design-system/styles/spacing",{"title":570,"_path":571,"layout":13},"Typography","/design-system/styles/typography",{"title":573,"_path":574,"children":575},"Components","/design-system/components",[576,579,582,585,588,591,594,597,600,603,606,609,612,615,618,621,624,627,630,633,636,639,642,645,648,651,652,655,656,657,660,663,666,669,672,675,678,681,684,687,690,693,696,699,702,705,708,711],{"title":577,"_path":578,"layout":13},"Accordion","/design-system/components/accordion",{"title":580,"_path":581,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":583,"_path":584,"layout":13},"Alert","/design-system/components/alert",{"title":586,"_path":587,"layout":13},"Block quote","/design-system/components/block-quote",{"title":589,"_path":590,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":592,"_path":593,"layout":13},"Button","/design-system/components/button",{"title":595,"_path":596,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":598,"_path":599,"layout":13},"Callout","/design-system/components/callout",{"title":601,"_path":602,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":604,"_path":605,"layout":13},"Card","/design-system/components/card",{"title":607,"_path":608,"layout":13},"Carousel","/design-system/components/carousel",{"title":610,"_path":611,"layout":13},"Category grid","/design-system/components/category-grid",{"title":613,"_path":614,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":616,"_path":617,"layout":13},"Chip","/design-system/components/chip",{"title":619,"_path":620,"layout":13},"Contact us","/design-system/components/contact-us",{"title":622,"_path":623,"layout":13},"Date input","/design-system/components/date-input",{"title":625,"_path":626,"layout":13},"Detail list","/design-system/components/detail-list",{"title":628,"_path":629,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":631,"_path":632,"layout":13},"File","/design-system/components/file",{"title":634,"_path":635,"layout":13},"Footer","/design-system/components/footer",{"title":637,"_path":638,"layout":13},"Form","/design-system/components/form",{"title":640,"_path":641,"layout":13},"Form alert","/design-system/components/form-alert",{"title":643,"_path":644,"layout":13},"Header","/design-system/components/header",{"title":646,"_path":647,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":649,"_path":650,"layout":13},"Input field","/design-system/components/input-field",{"title":457,"_path":456,"layout":13},{"title":653,"_path":654,"layout":13},"Media","/design-system/components/media",{"title":11,"_path":7,"layout":13},{"title":463,"_path":462,"layout":13},{"title":658,"_path":659,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":661,"_path":662,"layout":13},"Option button","/design-system/components/option-button",{"title":664,"_path":665,"layout":13},"Page action","/design-system/components/page-action",{"title":667,"_path":668,"layout":13},"Pagination","/design-system/components/pagination",{"title":670,"_path":671,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":673,"_path":674,"layout":13},"Profile","/design-system/components/profile",{"title":676,"_path":677,"layout":13},"Radio button","/design-system/components/radio-button",{"title":679,"_path":680,"layout":13},"Related links","/design-system/components/related-links",{"title":682,"_path":683,"layout":13},"Results listing","/design-system/components/results-listing",{"title":685,"_path":686,"layout":13},"Search bar","/design-system/components/search-bar",{"title":688,"_path":689,"layout":13},"Skip link","/design-system/components/skip-link",{"title":691,"_path":692,"layout":13},"Social share","/design-system/components/social-share",{"title":694,"_path":695,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":697,"_path":698,"layout":13},"Table","/design-system/components/table",{"title":700,"_path":701,"layout":13},"Tabs","/design-system/components/tabs",{"title":703,"_path":704,"layout":13},"Tag","/design-system/components/tag",{"title":706,"_path":707,"layout":13},"Text area","/design-system/components/text-area",{"title":709,"_path":710,"layout":13},"Timeline","/design-system/components/timeline",{"title":712,"_path":713,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":715,"_path":716,"children":717,"layout":13},"Ripple Framework","/framework",[718,719,737,759],{"title":715,"_path":716,"layout":13},{"title":720,"_path":721,"children":722},"Key Concepts","/framework/key-concepts",[723,725,728,731,734],{"title":530,"_path":724,"layout":13},"/framework/key-concepts/nuxt",{"title":726,"_path":727,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":729,"_path":730,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":732,"_path":733,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":735,"_path":736,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":738,"_path":739,"children":740},"Guides","/framework/guides",[741,744,747,750,753,756],{"title":742,"_path":743,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":745,"_path":746,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":748,"_path":749,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":751,"_path":752,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":754,"_path":755,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":757,"_path":758,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":760,"_path":761,"layout":13},"Core modules","/framework/core-modules",["Reactive",763],["Set"],["Reactive",765],{"module-navigation":766},null,true,1714695154011]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Media embed</h1><p class="rpl-type-p-large" data-v-3163c6df>The Media embed component shows an image or video within the page content, with optional text to give context.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use media embed to add visual elements including images, videos, graphs, infographics, maps and charts to your page content.<!--]--></p><p><!--[-->Use the optional text to combine the visual element with text, so that the user understands the visual element’s context. Optional text should always be used for complex media like graphs and charts with supporting data.<!--]--></p><p><!--[-->Media can be an image or video. Images can display as small, medium or large.<!--]--></p><p><!--[-->When using the complex media variant, media displays at either a max width or height. This ensures it always displays the full image.<!--]--></p><p><!--[-->See <a href="/design-system/components/media/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->media<!--]--><!--]--><!----><!--]--></a> for information relating to file type, ratios and focal point.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-media-embed--image-landscape&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--image-landscape&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use it with videos, images or complex images.<!--]--></li><li><!--[-->Add data when using the complex image variant.<!--]--></li><li><!--[-->Ensure the media is the right size so that it displays without error.<!--]--></li><li><!--[-->Only add it to the content section of a page.<!--]--></li><li><!--[-->Add an optional image caption and metadata.<!--]--></li><li><!--[-->Always include alt text.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t include media unrelated to the page.<!--]--></li><li><!--[-->Avoid adding interactive elements, like links, to the caption or metadata sections.<!--]--></li><li><!--[-->Never use a video without closed captions and a transcript.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->Media embed has 3 variants:<!--]--></p><ul><!--[--><li><!--[-->image<!--]--></li><li><!--[-->video<!--]--></li><li><!--[-->complex media.<!--]--></li><!--]--></ul><p><!--[-->Depending on the variant used, you can display:<!--]--></p><ul><!--[--><li><!--[-->a caption<!--]--></li><li><!--[-->metadata<!--]--></li><li><!--[-->a transcript link<!--]--></li><li><!--[-->accompanying data.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="image" data-v-ea525968><a href="#image" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Image<!--]--></a></h2><p><!--[-->The image variant has 4 display options:<!--]--></p><ul><!--[--><li><!--[-->landscape / 16:9 ratio<!--]--></li><li><!--[-->portrait / 3:4 ratio<!--]--></li><li><!--[-->square / 1:1 ratio<!--]--></li><li><!--[-->avatar / circle.<!--]--></li><!--]--></ul><p><!--[-->You can display portrait, landscape and square as small, medium or large. Avatar only displays in small or medium.<!--]--></p><p><!--[-->The media gets cropped to fill the selected ratio. Make sure the media&#39;s focal point is best placed to accurately represent the media item.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="landscape"><!--[-->Landscape<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-media-embed--image-landscape&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--image-landscape&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="portrait"><!--[-->Portrait<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-media-embed--image-portrait&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--image-portrait&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="square"><!--[-->Square<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-media-embed--image-square&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--image-square&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="avatar"><!--[-->Avatar<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-media-embed--image-avatar&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--image-avatar&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="video" data-v-ea525968><a href="#video" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Video<!--]--></a></h2><p><!--[-->Videos will always display at a 16:9 ratio.<!--]--></p><p><!--[-->A &#39;view transcript&#39; link displays by default. Videos must have both closed captions and a transcript.<!--]--></p><p><!--[-->Include a supporting caption to give extra context to the user.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-media-embed--video&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--video&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="complex-media" data-v-ea525968><a href="#complex-media" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Complex media<!--]--></a></h2><p><!--[-->Complex media items contain detail. They include:<!--]--></p><ul><!--[--><li><!--[-->infographics<!--]--></li><li><!--[-->graphs<!--]--></li><li><!--[-->flowchart<!--]--></li><li><!--[-->maps.<!--]--></li><!--]--></ul><p><!--[-->You can support media by including:<!--]--></p><ul><!--[--><li><!--[-->optional supporting data such as content or tables<!--]--></li><li><!--[-->a view fullscreen link<!--]--></li><li><!--[-->a download media link.<!--]--></li><!--]--></ul><p><!--[-->Optional supporting data displays in a dropdown list. Use the type of content that will best communicate your supporting data to the user. For example, some information is conveyed better by a table, rather than plain text.<!--]--></p><p><!--[-->Complex media will always display the full image. The media item will display at a predefined max height or width.<!--]--></p><p><!--[-->When the media is fullscreen, it displays in the media fullscreen component.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-media-embed--complex-image&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--complex-image&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Media embed uses colour for:<!--]--></p><ul><!--[--><li><!--[-->icons<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-media-embed--complex-image&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-embed--complex-image&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/media-embed.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/media-embed/_payload.json">[{"state":1,"once":762,"_errors":764,"serverRendered":767,"path":7,"prerenderedAt":768},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":451,"$sdd-globals":467,"$sdd-navigation":469},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/media-embed":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":446,"_id":447,"_source":448,"_file":449,"_extension":450},"/design-system/components/media-embed","components",false,"","Media embed","The Media embed component shows an image or video within the page content, with optional text to give context.","page","Core",{"type":16,"children":17,"toc":432},"root",[18,27,33,38,43,48,62,67,74,109,115,133,137,143,148,166,171,194,199,204,227,232,237,244,247,253,257,263,267,273,277,282,287,292,297,301,307,312,335,340,358,363,368,373,377,380,386,391,404,411],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use media embed to add visual elements including images, videos, graphs, infographics, maps and charts to your page content.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Use the optional text to combine the visual element with text, so that the user understands the visual element’s context. Optional text should always be used for complex media like graphs and charts with supporting data.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Media can be an image or video. Images can display as small, medium or large.",{"type":19,"tag":28,"props":44,"children":45},{},[46],{"type":25,"value":47},"When using the complex media variant, media displays at either a max width or height. This ensures it always displays the full image.",{"type":19,"tag":28,"props":49,"children":50},{},[51,53,60],{"type":25,"value":52},"See ",{"type":19,"tag":54,"props":55,"children":57},"a",{"href":56},"/design-system/components/media/",[58],{"type":25,"value":59},"media",{"type":25,"value":61}," for information relating to file type, ratios and focal point.",{"type":19,"tag":63,"props":64,"children":66},"docs-example",{"id":65},"core-containers-media-embed--image-landscape",[],{"type":19,"tag":68,"props":69,"children":71},"h3",{"id":70},"when-and-how-to-use",[72],{"type":25,"value":73},"When and how to use",{"type":19,"tag":75,"props":76,"children":77},"ul",{},[78,84,89,94,99,104],{"type":19,"tag":79,"props":80,"children":81},"li",{},[82],{"type":25,"value":83},"Use it with videos, images or complex images.",{"type":19,"tag":79,"props":85,"children":86},{},[87],{"type":25,"value":88},"Add data when using the complex image variant.",{"type":19,"tag":79,"props":90,"children":91},{},[92],{"type":25,"value":93},"Ensure the media is the right size so that it displays without error.",{"type":19,"tag":79,"props":95,"children":96},{},[97],{"type":25,"value":98},"Only add it to the content section of a page.",{"type":19,"tag":79,"props":100,"children":101},{},[102],{"type":25,"value":103},"Add an optional image caption and metadata.",{"type":19,"tag":79,"props":105,"children":106},{},[107],{"type":25,"value":108},"Always include alt text.",{"type":19,"tag":68,"props":110,"children":112},{"id":111},"when-and-how-not-to-use",[113],{"type":25,"value":114},"When and how not to use",{"type":19,"tag":75,"props":116,"children":117},{},[118,123,128],{"type":19,"tag":79,"props":119,"children":120},{},[121],{"type":25,"value":122},"Don't include media unrelated to the page.",{"type":19,"tag":79,"props":124,"children":125},{},[126],{"type":25,"value":127},"Avoid adding interactive elements, like links, to the caption or metadata sections.",{"type":19,"tag":79,"props":129,"children":130},{},[131],{"type":25,"value":132},"Never use a video without closed captions and a transcript.",{"type":19,"tag":134,"props":135,"children":136},"hr",{},[],{"type":19,"tag":20,"props":138,"children":140},{"id":139},"variants",[141],{"type":25,"value":142},"Variants",{"type":19,"tag":28,"props":144,"children":145},{},[146],{"type":25,"value":147},"Media embed has 3 variants:",{"type":19,"tag":75,"props":149,"children":150},{},[151,156,161],{"type":19,"tag":79,"props":152,"children":153},{},[154],{"type":25,"value":155},"image",{"type":19,"tag":79,"props":157,"children":158},{},[159],{"type":25,"value":160},"video",{"type":19,"tag":79,"props":162,"children":163},{},[164],{"type":25,"value":165},"complex media.",{"type":19,"tag":28,"props":167,"children":168},{},[169],{"type":25,"value":170},"Depending on the variant used, you can display:",{"type":19,"tag":75,"props":172,"children":173},{},[174,179,184,189],{"type":19,"tag":79,"props":175,"children":176},{},[177],{"type":25,"value":178},"a caption",{"type":19,"tag":79,"props":180,"children":181},{},[182],{"type":25,"value":183},"metadata",{"type":19,"tag":79,"props":185,"children":186},{},[187],{"type":25,"value":188},"a transcript link",{"type":19,"tag":79,"props":190,"children":191},{},[192],{"type":25,"value":193},"accompanying data.",{"type":19,"tag":68,"props":195,"children":196},{"id":155},[197],{"type":25,"value":198},"Image",{"type":19,"tag":28,"props":200,"children":201},{},[202],{"type":25,"value":203},"The image variant has 4 display options:",{"type":19,"tag":75,"props":205,"children":206},{},[207,212,217,222],{"type":19,"tag":79,"props":208,"children":209},{},[210],{"type":25,"value":211},"landscape / 16:9 ratio",{"type":19,"tag":79,"props":213,"children":214},{},[215],{"type":25,"value":216},"portrait / 3:4 ratio",{"type":19,"tag":79,"props":218,"children":219},{},[220],{"type":25,"value":221},"square / 1:1 ratio",{"type":19,"tag":79,"props":223,"children":224},{},[225],{"type":25,"value":226},"avatar / circle.",{"type":19,"tag":28,"props":228,"children":229},{},[230],{"type":25,"value":231},"You can display portrait, landscape and square as small, medium or large. Avatar only displays in small or medium.",{"type":19,"tag":28,"props":233,"children":234},{},[235],{"type":25,"value":236},"The media gets cropped to fill the selected ratio. Make sure the media's focal point is best placed to accurately represent the media item.",{"type":19,"tag":238,"props":239,"children":241},"h4",{"id":240},"landscape",[242],{"type":25,"value":243},"Landscape",{"type":19,"tag":63,"props":245,"children":246},{"id":65},[],{"type":19,"tag":238,"props":248,"children":250},{"id":249},"portrait",[251],{"type":25,"value":252},"Portrait",{"type":19,"tag":63,"props":254,"children":256},{"id":255},"core-containers-media-embed--image-portrait",[],{"type":19,"tag":238,"props":258,"children":260},{"id":259},"square",[261],{"type":25,"value":262},"Square",{"type":19,"tag":63,"props":264,"children":266},{"id":265},"core-containers-media-embed--image-square",[],{"type":19,"tag":238,"props":268,"children":270},{"id":269},"avatar",[271],{"type":25,"value":272},"Avatar",{"type":19,"tag":63,"props":274,"children":276},{"id":275},"core-containers-media-embed--image-avatar",[],{"type":19,"tag":68,"props":278,"children":279},{"id":160},[280],{"type":25,"value":281},"Video",{"type":19,"tag":28,"props":283,"children":284},{},[285],{"type":25,"value":286},"Videos will always display at a 16:9 ratio.",{"type":19,"tag":28,"props":288,"children":289},{},[290],{"type":25,"value":291},"A 'view transcript' link displays by default. Videos must have both closed captions and a transcript.",{"type":19,"tag":28,"props":293,"children":294},{},[295],{"type":25,"value":296},"Include a supporting caption to give extra context to the user.",{"type":19,"tag":63,"props":298,"children":300},{"id":299},"core-containers-media-embed--video",[],{"type":19,"tag":68,"props":302,"children":304},{"id":303},"complex-media",[305],{"type":25,"value":306},"Complex media",{"type":19,"tag":28,"props":308,"children":309},{},[310],{"type":25,"value":311},"Complex media items contain detail. They include:",{"type":19,"tag":75,"props":313,"children":314},{},[315,320,325,330],{"type":19,"tag":79,"props":316,"children":317},{},[318],{"type":25,"value":319},"infographics",{"type":19,"tag":79,"props":321,"children":322},{},[323],{"type":25,"value":324},"graphs",{"type":19,"tag":79,"props":326,"children":327},{},[328],{"type":25,"value":329},"flowchart",{"type":19,"tag":79,"props":331,"children":332},{},[333],{"type":25,"value":334},"maps.",{"type":19,"tag":28,"props":336,"children":337},{},[338],{"type":25,"value":339},"You can support media by including:",{"type":19,"tag":75,"props":341,"children":342},{},[343,348,353],{"type":19,"tag":79,"props":344,"children":345},{},[346],{"type":25,"value":347},"optional supporting data such as content or tables",{"type":19,"tag":79,"props":349,"children":350},{},[351],{"type":25,"value":352},"a view fullscreen link",{"type":19,"tag":79,"props":354,"children":355},{},[356],{"type":25,"value":357},"a download media link.",{"type":19,"tag":28,"props":359,"children":360},{},[361],{"type":25,"value":362},"Optional supporting data displays in a dropdown list. Use the type of content that will best communicate your supporting data to the user. For example, some information is conveyed better by a table, rather than plain text.",{"type":19,"tag":28,"props":364,"children":365},{},[366],{"type":25,"value":367},"Complex media will always display the full image. The media item will display at a predefined max height or width.",{"type":19,"tag":28,"props":369,"children":370},{},[371],{"type":25,"value":372},"When the media is fullscreen, it displays in the media fullscreen component.",{"type":19,"tag":63,"props":374,"children":376},{"id":375},"core-containers-media-embed--complex-image",[],{"type":19,"tag":134,"props":378,"children":379},{},[],{"type":19,"tag":20,"props":381,"children":383},{"id":382},"theming",[384],{"type":25,"value":385},"Theming",{"type":19,"tag":28,"props":387,"children":388},{},[389],{"type":25,"value":390},"Media embed uses colour for:",{"type":19,"tag":75,"props":392,"children":393},{},[394,399],{"type":19,"tag":79,"props":395,"children":396},{},[397],{"type":25,"value":398},"icons",{"type":19,"tag":79,"props":400,"children":401},{},[402],{"type":25,"value":403},"interactive states.",{"type":19,"tag":405,"props":406,"children":407},"docs-theme-chooser",{},[408],{"type":19,"tag":63,"props":409,"children":410},{"id":375},[],{"type":19,"tag":28,"props":412,"children":413},{},[414,416,422,424,430],{"type":25,"value":415},"To create your own theme see ",{"type":19,"tag":54,"props":417,"children":419},{"href":418},"/design-system/design/theming-guidance-for-designers",[420],{"type":25,"value":421},"theming guidance for designers",{"type":25,"value":423}," or ",{"type":19,"tag":54,"props":425,"children":427},{"href":426},"/design-system/develop/theming",[428],{"type":25,"value":429},"theming guidance for developers",{"type":25,"value":431},".",{"title":10,"searchDepth":433,"depth":433,"links":434},2,[435,440,445],{"id":22,"depth":433,"text":26,"children":436},[437,439],{"id":70,"depth":438,"text":73},3,{"id":111,"depth":438,"text":114},{"id":139,"depth":433,"text":142,"children":441},[442,443,444],{"id":155,"depth":438,"text":198},{"id":160,"depth":438,"text":281},{"id":303,"depth":438,"text":306},{"id":382,"depth":433,"text":385},"markdown","content:design-system:5.components:media-embed.md","content","design-system/5.components/media-embed.md","md",["ShallowRef",452],["ShallowReactive",453],{"/design-system/components/media-embed":454},[455,461],{"_path":456,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":457,"description":458,"layout":13,"label":14,"_type":446,"_id":459,"_source":448,"_file":460,"_extension":450},"/design-system/components/key-dates","Key dates","The Key dates component shows users a card promoting key dates or events.","content:design-system:5.components:key-dates.md","design-system/5.components/key-dates.md",{"_path":462,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":463,"description":464,"layout":13,"label":14,"_type":446,"_id":465,"_source":448,"_file":466,"_extension":450},"/design-system/components/media-fullscreen","Media fullscreen","The Media fullscreen component is an icon, with text instructions, beneath your media items for users to interact with so they can view one or more related media items in fullscreen.","content:design-system:5.components:media-fullscreen.md","design-system/5.components/media-fullscreen.md",["ShallowRef",468],{},[470,475,714],{"title":471,"_path":472,"icon":473,"layout":474},"Ripple Design System","/","carbon:home","home",{"title":476,"_path":477,"children":478},"Design System","/design-system",[479,495,510,538,572],{"title":480,"_path":481,"children":482},"About","/design-system/about",[483,486,489,492],{"title":484,"_path":485,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":487,"_path":488,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":490,"_path":491,"layout":13},"Support","/design-system/about/getting-support",{"title":493,"_path":494,"layout":13},"Contributing","/design-system/about/contributing",{"title":496,"_path":497,"children":498},"Design","/design-system/design",[499,502,505,508],{"title":500,"_path":501,"layout":13},"Getting started","/design-system/design/getting-started",{"title":503,"_path":504,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":506,"_path":507,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":509,"_path":418,"layout":13},"Theming guidance for designers",{"title":511,"_path":512,"children":513},"Develop","/design-system/develop",[514,516,518,520],{"title":500,"_path":515,"layout":13},"/design-system/develop/getting-started",{"title":493,"_path":517,"layout":13},"/design-system/develop/contributing",{"title":519,"_path":426,"layout":13},"Theme and brand application",{"title":26,"_path":521,"children":522,"layout":13},"/design-system/develop/usage",[523,526,529,532,535],{"title":524,"_path":525,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":527,"_path":528,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":530,"_path":531,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":533,"_path":534,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":536,"_path":537,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":539,"_path":540,"children":541},"Styles","/design-system/styles",[542,545,548,551,554,557,560,563,566,569],{"title":543,"_path":544,"layout":13},"Colour","/design-system/styles/colour",{"title":546,"_path":547,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":549,"_path":550,"layout":13},"Grid","/design-system/styles/grid",{"title":552,"_path":553,"layout":13},"Icons","/design-system/styles/icons",{"title":555,"_path":556,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":558,"_path":559,"layout":13},"Layout","/design-system/styles/layout",{"title":561,"_path":562,"layout":13},"Logo","/design-system/styles/logo",{"title":564,"_path":565,"layout":13},"Motion","/design-system/styles/motion",{"title":567,"_path":568,"layout":13},"Spacing","/design-system/styles/spacing",{"title":570,"_path":571,"layout":13},"Typography","/design-system/styles/typography",{"title":573,"_path":574,"children":575},"Components","/design-system/components",[576,579,582,585,588,591,594,597,600,603,606,609,612,615,618,621,624,627,630,633,636,639,642,645,648,651,652,655,656,657,660,663,666,669,672,675,678,681,684,687,690,693,696,699,702,705,708,711],{"title":577,"_path":578,"layout":13},"Accordion","/design-system/components/accordion",{"title":580,"_path":581,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":583,"_path":584,"layout":13},"Alert","/design-system/components/alert",{"title":586,"_path":587,"layout":13},"Block quote","/design-system/components/block-quote",{"title":589,"_path":590,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":592,"_path":593,"layout":13},"Button","/design-system/components/button",{"title":595,"_path":596,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":598,"_path":599,"layout":13},"Callout","/design-system/components/callout",{"title":601,"_path":602,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":604,"_path":605,"layout":13},"Card","/design-system/components/card",{"title":607,"_path":608,"layout":13},"Carousel","/design-system/components/carousel",{"title":610,"_path":611,"layout":13},"Category grid","/design-system/components/category-grid",{"title":613,"_path":614,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":616,"_path":617,"layout":13},"Chip","/design-system/components/chip",{"title":619,"_path":620,"layout":13},"Contact us","/design-system/components/contact-us",{"title":622,"_path":623,"layout":13},"Date input","/design-system/components/date-input",{"title":625,"_path":626,"layout":13},"Detail list","/design-system/components/detail-list",{"title":628,"_path":629,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":631,"_path":632,"layout":13},"File","/design-system/components/file",{"title":634,"_path":635,"layout":13},"Footer","/design-system/components/footer",{"title":637,"_path":638,"layout":13},"Form","/design-system/components/form",{"title":640,"_path":641,"layout":13},"Form alert","/design-system/components/form-alert",{"title":643,"_path":644,"layout":13},"Header","/design-system/components/header",{"title":646,"_path":647,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":649,"_path":650,"layout":13},"Input field","/design-system/components/input-field",{"title":457,"_path":456,"layout":13},{"title":653,"_path":654,"layout":13},"Media","/design-system/components/media",{"title":11,"_path":7,"layout":13},{"title":463,"_path":462,"layout":13},{"title":658,"_path":659,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":661,"_path":662,"layout":13},"Option button","/design-system/components/option-button",{"title":664,"_path":665,"layout":13},"Page action","/design-system/components/page-action",{"title":667,"_path":668,"layout":13},"Pagination","/design-system/components/pagination",{"title":670,"_path":671,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":673,"_path":674,"layout":13},"Profile","/design-system/components/profile",{"title":676,"_path":677,"layout":13},"Radio button","/design-system/components/radio-button",{"title":679,"_path":680,"layout":13},"Related links","/design-system/components/related-links",{"title":682,"_path":683,"layout":13},"Results listing","/design-system/components/results-listing",{"title":685,"_path":686,"layout":13},"Search bar","/design-system/components/search-bar",{"title":688,"_path":689,"layout":13},"Skip link","/design-system/components/skip-link",{"title":691,"_path":692,"layout":13},"Social share","/design-system/components/social-share",{"title":694,"_path":695,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":697,"_path":698,"layout":13},"Table","/design-system/components/table",{"title":700,"_path":701,"layout":13},"Tabs","/design-system/components/tabs",{"title":703,"_path":704,"layout":13},"Tag","/design-system/components/tag",{"title":706,"_path":707,"layout":13},"Text area","/design-system/components/text-area",{"title":709,"_path":710,"layout":13},"Timeline","/design-system/components/timeline",{"title":712,"_path":713,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":715,"_path":716,"children":717,"layout":13},"Ripple Framework","/framework",[718,719,737,759],{"title":715,"_path":716,"layout":13},{"title":720,"_path":721,"children":722},"Key Concepts","/framework/key-concepts",[723,725,728,731,734],{"title":530,"_path":724,"layout":13},"/framework/key-concepts/nuxt",{"title":726,"_path":727,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":729,"_path":730,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":732,"_path":733,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":735,"_path":736,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":738,"_path":739,"children":740},"Guides","/framework/guides",[741,744,747,750,753,756],{"title":742,"_path":743,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":745,"_path":746,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":748,"_path":749,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":751,"_path":752,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":754,"_path":755,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":757,"_path":758,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":760,"_path":761,"layout":13},"Core modules","/framework/core-modules",["Reactive",763],["Set"],["Reactive",765],{"module-navigation":766},null,true,1714695652236]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/media-fullscreen/_payload.json b/design-system/components/media-fullscreen/_payload.json
index 6e14deec54..7be6fa407e 100644
--- a/design-system/components/media-fullscreen/_payload.json
+++ b/design-system/components/media-fullscreen/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":104,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695154016]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":104,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695652242]
\ No newline at end of file
diff --git a/design-system/components/media-fullscreen/index.html b/design-system/components/media-fullscreen/index.html
index 68937e48a8..5f61c429fe 100644
--- a/design-system/components/media-fullscreen/index.html
+++ b/design-system/components/media-fullscreen/index.html
@@ -28,63 +28,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -96,8 +96,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Media fullscreen</h1><p class="rpl-type-p-large" data-v-3163c6df>The Media fullscreen component is an icon, with text instructions, beneath your media items for users to interact with so they can view one or more related media items in fullscreen.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use media fullscreen to give users the option to toggle a fullscreen view of some media items. Media fullscreen can display media and content from your page’s media embed and media gallery components. It always displays the full media item, regardless of its ratio. The item fills the width or height of the available area.<!--]--></p><p><!--[-->Fullscreen view includes the media item&#39;s title and caption.<!--]--></p><p><!--[-->Media fullscreen takes over the viewport completely. A transparent background helps users to know they are still on the page. When a user closes fullscreen view, they return to that same item in the gallery.<!--]--></p><p><!--[-->See <a href="/design-system/components/media/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->media<!--]--><!--]--><!----><!--]--></a> for information relating to file type, ratios and focal point.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-media-gallery--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-gallery--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Always display the media item max height or width of the content area.<!--]--></li><li><!--[-->Always include a title for the media item.<!--]--></li><li><!--[-->Always include alt text.<!--]--></li><li><!--[-->Display the media title and caption if used in the base component.<!--]--></li><li><!--[-->Use when you need to display a media item fullscreen.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t use with items that aren&#39;t media.<!--]--></li><li><!--[-->Don&#39;t use with a completely opaque background.<!--]--></li><li><!--[-->Don&#39;t use pagination for one media item only.<!--]--></li><li><!--[-->Don&#39;t crop or hide the media item.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Media fullscreen adopts its theming from the pagination component.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-media-gallery--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-gallery--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/media-fullscreen.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/media-fullscreen/_payload.json">[{"state":1,"once":496,"_errors":498,"serverRendered":501,"path":7,"prerenderedAt":502},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":185,"$sdd-globals":201,"$sdd-navigation":203},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/media-fullscreen":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":180,"_id":181,"_source":182,"_file":183,"_extension":184},"/design-system/components/media-fullscreen","components",false,"","Media fullscreen","The Media fullscreen component is an icon, with text instructions, beneath your media items for users to interact with so they can view one or more related media items in fullscreen.","page","Core",{"type":16,"children":17,"toc":171},"root",[18,27,33,38,43,57,62,69,99,105,128,132,138,143,150],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use media fullscreen to give users the option to toggle a fullscreen view of some media items. Media fullscreen can display media and content from your page’s media embed and media gallery components. It always displays the full media item, regardless of its ratio. The item fills the width or height of the available area.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Fullscreen view includes the media item's title and caption.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Media fullscreen takes over the viewport completely. A transparent background helps users to know they are still on the page. When a user closes fullscreen view, they return to that same item in the gallery.",{"type":19,"tag":28,"props":44,"children":45},{},[46,48,55],{"type":25,"value":47},"See ",{"type":19,"tag":49,"props":50,"children":52},"a",{"href":51},"/design-system/components/media/",[53],{"type":25,"value":54},"media",{"type":25,"value":56}," for information relating to file type, ratios and focal point.",{"type":19,"tag":58,"props":59,"children":61},"docs-example",{"id":60},"core-containers-media-gallery--default-story",[],{"type":19,"tag":63,"props":64,"children":66},"h3",{"id":65},"when-and-how-to-use",[67],{"type":25,"value":68},"When and how to use",{"type":19,"tag":70,"props":71,"children":72},"ul",{},[73,79,84,89,94],{"type":19,"tag":74,"props":75,"children":76},"li",{},[77],{"type":25,"value":78},"Always display the media item max height or width of the content area.",{"type":19,"tag":74,"props":80,"children":81},{},[82],{"type":25,"value":83},"Always include a title for the media item.",{"type":19,"tag":74,"props":85,"children":86},{},[87],{"type":25,"value":88},"Always include alt text.",{"type":19,"tag":74,"props":90,"children":91},{},[92],{"type":25,"value":93},"Display the media title and caption if used in the base component.",{"type":19,"tag":74,"props":95,"children":96},{},[97],{"type":25,"value":98},"Use when you need to display a media item fullscreen.",{"type":19,"tag":63,"props":100,"children":102},{"id":101},"when-and-how-not-to-use",[103],{"type":25,"value":104},"When and how not to use",{"type":19,"tag":70,"props":106,"children":107},{},[108,113,118,123],{"type":19,"tag":74,"props":109,"children":110},{},[111],{"type":25,"value":112},"Don't use with items that aren't media.",{"type":19,"tag":74,"props":114,"children":115},{},[116],{"type":25,"value":117},"Don't use with a completely opaque background.",{"type":19,"tag":74,"props":119,"children":120},{},[121],{"type":25,"value":122},"Don't use pagination for one media item only.",{"type":19,"tag":74,"props":124,"children":125},{},[126],{"type":25,"value":127},"Don't crop or hide the media item.",{"type":19,"tag":129,"props":130,"children":131},"hr",{},[],{"type":19,"tag":20,"props":133,"children":135},{"id":134},"theming",[136],{"type":25,"value":137},"Theming",{"type":19,"tag":28,"props":139,"children":140},{},[141],{"type":25,"value":142},"Media fullscreen adopts its theming from the pagination component.",{"type":19,"tag":144,"props":145,"children":146},"docs-theme-chooser",{},[147],{"type":19,"tag":58,"props":148,"children":149},{"id":60},[],{"type":19,"tag":28,"props":151,"children":152},{},[153,155,161,163,169],{"type":25,"value":154},"To create your own theme see ",{"type":19,"tag":49,"props":156,"children":158},{"href":157},"/design-system/design/theming-guidance-for-designers",[159],{"type":25,"value":160},"theming guidance for designers",{"type":25,"value":162}," or ",{"type":19,"tag":49,"props":164,"children":166},{"href":165},"/design-system/develop/theming",[167],{"type":25,"value":168},"theming guidance for developers",{"type":25,"value":170},".",{"title":10,"searchDepth":172,"depth":172,"links":173},2,[174,179],{"id":22,"depth":172,"text":26,"children":175},[176,178],{"id":65,"depth":177,"text":68},3,{"id":101,"depth":177,"text":104},{"id":134,"depth":172,"text":137},"markdown","content:design-system:5.components:media-fullscreen.md","content","design-system/5.components/media-fullscreen.md","md",["ShallowRef",186],["ShallowReactive",187],{"/design-system/components/media-fullscreen":188},[189,195],{"_path":190,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":191,"description":192,"layout":13,"label":14,"_type":180,"_id":193,"_source":182,"_file":194,"_extension":184},"/design-system/components/media-embed","Media embed","The Media embed component shows an image or video within the page content, with optional text to give context.","content:design-system:5.components:media-embed.md","design-system/5.components/media-embed.md",{"_path":196,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":197,"description":198,"layout":13,"label":14,"_type":180,"_id":199,"_source":182,"_file":200,"_extension":184},"/design-system/components/media-gallery","Media gallery","The Media gallery component is a series of images users can side-scroll through.","content:design-system:5.components:media-gallery.md","design-system/5.components/media-gallery.md",["ShallowRef",202],{},[204,209,448],{"title":205,"_path":206,"icon":207,"layout":208},"Ripple Design System","/","carbon:home","home",{"title":210,"_path":211,"children":212},"Design System","/design-system",[213,229,244,272,306],{"title":214,"_path":215,"children":216},"About","/design-system/about",[217,220,223,226],{"title":218,"_path":219,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":221,"_path":222,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":224,"_path":225,"layout":13},"Support","/design-system/about/getting-support",{"title":227,"_path":228,"layout":13},"Contributing","/design-system/about/contributing",{"title":230,"_path":231,"children":232},"Design","/design-system/design",[233,236,239,242],{"title":234,"_path":235,"layout":13},"Getting started","/design-system/design/getting-started",{"title":237,"_path":238,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":240,"_path":241,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":243,"_path":157,"layout":13},"Theming guidance for designers",{"title":245,"_path":246,"children":247},"Develop","/design-system/develop",[248,250,252,254],{"title":234,"_path":249,"layout":13},"/design-system/develop/getting-started",{"title":227,"_path":251,"layout":13},"/design-system/develop/contributing",{"title":253,"_path":165,"layout":13},"Theme and brand application",{"title":26,"_path":255,"children":256,"layout":13},"/design-system/develop/usage",[257,260,263,266,269],{"title":258,"_path":259,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":261,"_path":262,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":264,"_path":265,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":267,"_path":268,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":270,"_path":271,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":273,"_path":274,"children":275},"Styles","/design-system/styles",[276,279,282,285,288,291,294,297,300,303],{"title":277,"_path":278,"layout":13},"Colour","/design-system/styles/colour",{"title":280,"_path":281,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":283,"_path":284,"layout":13},"Grid","/design-system/styles/grid",{"title":286,"_path":287,"layout":13},"Icons","/design-system/styles/icons",{"title":289,"_path":290,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":292,"_path":293,"layout":13},"Layout","/design-system/styles/layout",{"title":295,"_path":296,"layout":13},"Logo","/design-system/styles/logo",{"title":298,"_path":299,"layout":13},"Motion","/design-system/styles/motion",{"title":301,"_path":302,"layout":13},"Spacing","/design-system/styles/spacing",{"title":304,"_path":305,"layout":13},"Typography","/design-system/styles/typography",{"title":307,"_path":308,"children":309},"Components","/design-system/components",[310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,392,393,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445],{"title":311,"_path":312,"layout":13},"Accordion","/design-system/components/accordion",{"title":314,"_path":315,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":317,"_path":318,"layout":13},"Alert","/design-system/components/alert",{"title":320,"_path":321,"layout":13},"Block quote","/design-system/components/block-quote",{"title":323,"_path":324,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":326,"_path":327,"layout":13},"Button","/design-system/components/button",{"title":329,"_path":330,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":332,"_path":333,"layout":13},"Callout","/design-system/components/callout",{"title":335,"_path":336,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":338,"_path":339,"layout":13},"Card","/design-system/components/card",{"title":341,"_path":342,"layout":13},"Carousel","/design-system/components/carousel",{"title":344,"_path":345,"layout":13},"Category grid","/design-system/components/category-grid",{"title":347,"_path":348,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":350,"_path":351,"layout":13},"Chip","/design-system/components/chip",{"title":353,"_path":354,"layout":13},"Contact us","/design-system/components/contact-us",{"title":356,"_path":357,"layout":13},"Date input","/design-system/components/date-input",{"title":359,"_path":360,"layout":13},"Detail list","/design-system/components/detail-list",{"title":362,"_path":363,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":365,"_path":366,"layout":13},"File","/design-system/components/file",{"title":368,"_path":369,"layout":13},"Footer","/design-system/components/footer",{"title":371,"_path":372,"layout":13},"Form","/design-system/components/form",{"title":374,"_path":375,"layout":13},"Form alert","/design-system/components/form-alert",{"title":377,"_path":378,"layout":13},"Header","/design-system/components/header",{"title":380,"_path":381,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":383,"_path":384,"layout":13},"Input field","/design-system/components/input-field",{"title":386,"_path":387,"layout":13},"Key dates","/design-system/components/key-dates",{"title":389,"_path":390,"layout":13},"Media","/design-system/components/media",{"title":191,"_path":190,"layout":13},{"title":11,"_path":7,"layout":13},{"title":197,"_path":196,"layout":13},{"title":395,"_path":396,"layout":13},"Option button","/design-system/components/option-button",{"title":398,"_path":399,"layout":13},"Page action","/design-system/components/page-action",{"title":401,"_path":402,"layout":13},"Pagination","/design-system/components/pagination",{"title":404,"_path":405,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":407,"_path":408,"layout":13},"Profile","/design-system/components/profile",{"title":410,"_path":411,"layout":13},"Radio button","/design-system/components/radio-button",{"title":413,"_path":414,"layout":13},"Related links","/design-system/components/related-links",{"title":416,"_path":417,"layout":13},"Results listing","/design-system/components/results-listing",{"title":419,"_path":420,"layout":13},"Search bar","/design-system/components/search-bar",{"title":422,"_path":423,"layout":13},"Skip link","/design-system/components/skip-link",{"title":425,"_path":426,"layout":13},"Social share","/design-system/components/social-share",{"title":428,"_path":429,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":431,"_path":432,"layout":13},"Table","/design-system/components/table",{"title":434,"_path":435,"layout":13},"Tabs","/design-system/components/tabs",{"title":437,"_path":438,"layout":13},"Tag","/design-system/components/tag",{"title":440,"_path":441,"layout":13},"Text area","/design-system/components/text-area",{"title":443,"_path":444,"layout":13},"Timeline","/design-system/components/timeline",{"title":446,"_path":447,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":449,"_path":450,"children":451,"layout":13},"Ripple Framework","/framework",[452,453,471,493],{"title":449,"_path":450,"layout":13},{"title":454,"_path":455,"children":456},"Key Concepts","/framework/key-concepts",[457,459,462,465,468],{"title":264,"_path":458,"layout":13},"/framework/key-concepts/nuxt",{"title":460,"_path":461,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":463,"_path":464,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":466,"_path":467,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":469,"_path":470,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":472,"_path":473,"children":474},"Guides","/framework/guides",[475,478,481,484,487,490],{"title":476,"_path":477,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":479,"_path":480,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":482,"_path":483,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":485,"_path":486,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":488,"_path":489,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":491,"_path":492,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":494,"_path":495,"layout":13},"Core modules","/framework/core-modules",["Reactive",497],["Set"],["Reactive",499],{"module-navigation":500},null,true,1714695154016]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Media fullscreen</h1><p class="rpl-type-p-large" data-v-3163c6df>The Media fullscreen component is an icon, with text instructions, beneath your media items for users to interact with so they can view one or more related media items in fullscreen.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use media fullscreen to give users the option to toggle a fullscreen view of some media items. Media fullscreen can display media and content from your page’s media embed and media gallery components. It always displays the full media item, regardless of its ratio. The item fills the width or height of the available area.<!--]--></p><p><!--[-->Fullscreen view includes the media item&#39;s title and caption.<!--]--></p><p><!--[-->Media fullscreen takes over the viewport completely. A transparent background helps users to know they are still on the page. When a user closes fullscreen view, they return to that same item in the gallery.<!--]--></p><p><!--[-->See <a href="/design-system/components/media/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->media<!--]--><!--]--><!----><!--]--></a> for information relating to file type, ratios and focal point.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-media-gallery--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-gallery--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Always display the media item max height or width of the content area.<!--]--></li><li><!--[-->Always include a title for the media item.<!--]--></li><li><!--[-->Always include alt text.<!--]--></li><li><!--[-->Display the media title and caption if used in the base component.<!--]--></li><li><!--[-->Use when you need to display a media item fullscreen.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t use with items that aren&#39;t media.<!--]--></li><li><!--[-->Don&#39;t use with a completely opaque background.<!--]--></li><li><!--[-->Don&#39;t use pagination for one media item only.<!--]--></li><li><!--[-->Don&#39;t crop or hide the media item.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Media fullscreen adopts its theming from the pagination component.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-media-gallery--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-gallery--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/media-fullscreen.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/media-fullscreen/_payload.json">[{"state":1,"once":496,"_errors":498,"serverRendered":501,"path":7,"prerenderedAt":502},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":185,"$sdd-globals":201,"$sdd-navigation":203},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/media-fullscreen":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":180,"_id":181,"_source":182,"_file":183,"_extension":184},"/design-system/components/media-fullscreen","components",false,"","Media fullscreen","The Media fullscreen component is an icon, with text instructions, beneath your media items for users to interact with so they can view one or more related media items in fullscreen.","page","Core",{"type":16,"children":17,"toc":171},"root",[18,27,33,38,43,57,62,69,99,105,128,132,138,143,150],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use media fullscreen to give users the option to toggle a fullscreen view of some media items. Media fullscreen can display media and content from your page’s media embed and media gallery components. It always displays the full media item, regardless of its ratio. The item fills the width or height of the available area.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Fullscreen view includes the media item's title and caption.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Media fullscreen takes over the viewport completely. A transparent background helps users to know they are still on the page. When a user closes fullscreen view, they return to that same item in the gallery.",{"type":19,"tag":28,"props":44,"children":45},{},[46,48,55],{"type":25,"value":47},"See ",{"type":19,"tag":49,"props":50,"children":52},"a",{"href":51},"/design-system/components/media/",[53],{"type":25,"value":54},"media",{"type":25,"value":56}," for information relating to file type, ratios and focal point.",{"type":19,"tag":58,"props":59,"children":61},"docs-example",{"id":60},"core-containers-media-gallery--default-story",[],{"type":19,"tag":63,"props":64,"children":66},"h3",{"id":65},"when-and-how-to-use",[67],{"type":25,"value":68},"When and how to use",{"type":19,"tag":70,"props":71,"children":72},"ul",{},[73,79,84,89,94],{"type":19,"tag":74,"props":75,"children":76},"li",{},[77],{"type":25,"value":78},"Always display the media item max height or width of the content area.",{"type":19,"tag":74,"props":80,"children":81},{},[82],{"type":25,"value":83},"Always include a title for the media item.",{"type":19,"tag":74,"props":85,"children":86},{},[87],{"type":25,"value":88},"Always include alt text.",{"type":19,"tag":74,"props":90,"children":91},{},[92],{"type":25,"value":93},"Display the media title and caption if used in the base component.",{"type":19,"tag":74,"props":95,"children":96},{},[97],{"type":25,"value":98},"Use when you need to display a media item fullscreen.",{"type":19,"tag":63,"props":100,"children":102},{"id":101},"when-and-how-not-to-use",[103],{"type":25,"value":104},"When and how not to use",{"type":19,"tag":70,"props":106,"children":107},{},[108,113,118,123],{"type":19,"tag":74,"props":109,"children":110},{},[111],{"type":25,"value":112},"Don't use with items that aren't media.",{"type":19,"tag":74,"props":114,"children":115},{},[116],{"type":25,"value":117},"Don't use with a completely opaque background.",{"type":19,"tag":74,"props":119,"children":120},{},[121],{"type":25,"value":122},"Don't use pagination for one media item only.",{"type":19,"tag":74,"props":124,"children":125},{},[126],{"type":25,"value":127},"Don't crop or hide the media item.",{"type":19,"tag":129,"props":130,"children":131},"hr",{},[],{"type":19,"tag":20,"props":133,"children":135},{"id":134},"theming",[136],{"type":25,"value":137},"Theming",{"type":19,"tag":28,"props":139,"children":140},{},[141],{"type":25,"value":142},"Media fullscreen adopts its theming from the pagination component.",{"type":19,"tag":144,"props":145,"children":146},"docs-theme-chooser",{},[147],{"type":19,"tag":58,"props":148,"children":149},{"id":60},[],{"type":19,"tag":28,"props":151,"children":152},{},[153,155,161,163,169],{"type":25,"value":154},"To create your own theme see ",{"type":19,"tag":49,"props":156,"children":158},{"href":157},"/design-system/design/theming-guidance-for-designers",[159],{"type":25,"value":160},"theming guidance for designers",{"type":25,"value":162}," or ",{"type":19,"tag":49,"props":164,"children":166},{"href":165},"/design-system/develop/theming",[167],{"type":25,"value":168},"theming guidance for developers",{"type":25,"value":170},".",{"title":10,"searchDepth":172,"depth":172,"links":173},2,[174,179],{"id":22,"depth":172,"text":26,"children":175},[176,178],{"id":65,"depth":177,"text":68},3,{"id":101,"depth":177,"text":104},{"id":134,"depth":172,"text":137},"markdown","content:design-system:5.components:media-fullscreen.md","content","design-system/5.components/media-fullscreen.md","md",["ShallowRef",186],["ShallowReactive",187],{"/design-system/components/media-fullscreen":188},[189,195],{"_path":190,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":191,"description":192,"layout":13,"label":14,"_type":180,"_id":193,"_source":182,"_file":194,"_extension":184},"/design-system/components/media-embed","Media embed","The Media embed component shows an image or video within the page content, with optional text to give context.","content:design-system:5.components:media-embed.md","design-system/5.components/media-embed.md",{"_path":196,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":197,"description":198,"layout":13,"label":14,"_type":180,"_id":199,"_source":182,"_file":200,"_extension":184},"/design-system/components/media-gallery","Media gallery","The Media gallery component is a series of images users can side-scroll through.","content:design-system:5.components:media-gallery.md","design-system/5.components/media-gallery.md",["ShallowRef",202],{},[204,209,448],{"title":205,"_path":206,"icon":207,"layout":208},"Ripple Design System","/","carbon:home","home",{"title":210,"_path":211,"children":212},"Design System","/design-system",[213,229,244,272,306],{"title":214,"_path":215,"children":216},"About","/design-system/about",[217,220,223,226],{"title":218,"_path":219,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":221,"_path":222,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":224,"_path":225,"layout":13},"Support","/design-system/about/getting-support",{"title":227,"_path":228,"layout":13},"Contributing","/design-system/about/contributing",{"title":230,"_path":231,"children":232},"Design","/design-system/design",[233,236,239,242],{"title":234,"_path":235,"layout":13},"Getting started","/design-system/design/getting-started",{"title":237,"_path":238,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":240,"_path":241,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":243,"_path":157,"layout":13},"Theming guidance for designers",{"title":245,"_path":246,"children":247},"Develop","/design-system/develop",[248,250,252,254],{"title":234,"_path":249,"layout":13},"/design-system/develop/getting-started",{"title":227,"_path":251,"layout":13},"/design-system/develop/contributing",{"title":253,"_path":165,"layout":13},"Theme and brand application",{"title":26,"_path":255,"children":256,"layout":13},"/design-system/develop/usage",[257,260,263,266,269],{"title":258,"_path":259,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":261,"_path":262,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":264,"_path":265,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":267,"_path":268,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":270,"_path":271,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":273,"_path":274,"children":275},"Styles","/design-system/styles",[276,279,282,285,288,291,294,297,300,303],{"title":277,"_path":278,"layout":13},"Colour","/design-system/styles/colour",{"title":280,"_path":281,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":283,"_path":284,"layout":13},"Grid","/design-system/styles/grid",{"title":286,"_path":287,"layout":13},"Icons","/design-system/styles/icons",{"title":289,"_path":290,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":292,"_path":293,"layout":13},"Layout","/design-system/styles/layout",{"title":295,"_path":296,"layout":13},"Logo","/design-system/styles/logo",{"title":298,"_path":299,"layout":13},"Motion","/design-system/styles/motion",{"title":301,"_path":302,"layout":13},"Spacing","/design-system/styles/spacing",{"title":304,"_path":305,"layout":13},"Typography","/design-system/styles/typography",{"title":307,"_path":308,"children":309},"Components","/design-system/components",[310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,392,393,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445],{"title":311,"_path":312,"layout":13},"Accordion","/design-system/components/accordion",{"title":314,"_path":315,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":317,"_path":318,"layout":13},"Alert","/design-system/components/alert",{"title":320,"_path":321,"layout":13},"Block quote","/design-system/components/block-quote",{"title":323,"_path":324,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":326,"_path":327,"layout":13},"Button","/design-system/components/button",{"title":329,"_path":330,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":332,"_path":333,"layout":13},"Callout","/design-system/components/callout",{"title":335,"_path":336,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":338,"_path":339,"layout":13},"Card","/design-system/components/card",{"title":341,"_path":342,"layout":13},"Carousel","/design-system/components/carousel",{"title":344,"_path":345,"layout":13},"Category grid","/design-system/components/category-grid",{"title":347,"_path":348,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":350,"_path":351,"layout":13},"Chip","/design-system/components/chip",{"title":353,"_path":354,"layout":13},"Contact us","/design-system/components/contact-us",{"title":356,"_path":357,"layout":13},"Date input","/design-system/components/date-input",{"title":359,"_path":360,"layout":13},"Detail list","/design-system/components/detail-list",{"title":362,"_path":363,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":365,"_path":366,"layout":13},"File","/design-system/components/file",{"title":368,"_path":369,"layout":13},"Footer","/design-system/components/footer",{"title":371,"_path":372,"layout":13},"Form","/design-system/components/form",{"title":374,"_path":375,"layout":13},"Form alert","/design-system/components/form-alert",{"title":377,"_path":378,"layout":13},"Header","/design-system/components/header",{"title":380,"_path":381,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":383,"_path":384,"layout":13},"Input field","/design-system/components/input-field",{"title":386,"_path":387,"layout":13},"Key dates","/design-system/components/key-dates",{"title":389,"_path":390,"layout":13},"Media","/design-system/components/media",{"title":191,"_path":190,"layout":13},{"title":11,"_path":7,"layout":13},{"title":197,"_path":196,"layout":13},{"title":395,"_path":396,"layout":13},"Option button","/design-system/components/option-button",{"title":398,"_path":399,"layout":13},"Page action","/design-system/components/page-action",{"title":401,"_path":402,"layout":13},"Pagination","/design-system/components/pagination",{"title":404,"_path":405,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":407,"_path":408,"layout":13},"Profile","/design-system/components/profile",{"title":410,"_path":411,"layout":13},"Radio button","/design-system/components/radio-button",{"title":413,"_path":414,"layout":13},"Related links","/design-system/components/related-links",{"title":416,"_path":417,"layout":13},"Results listing","/design-system/components/results-listing",{"title":419,"_path":420,"layout":13},"Search bar","/design-system/components/search-bar",{"title":422,"_path":423,"layout":13},"Skip link","/design-system/components/skip-link",{"title":425,"_path":426,"layout":13},"Social share","/design-system/components/social-share",{"title":428,"_path":429,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":431,"_path":432,"layout":13},"Table","/design-system/components/table",{"title":434,"_path":435,"layout":13},"Tabs","/design-system/components/tabs",{"title":437,"_path":438,"layout":13},"Tag","/design-system/components/tag",{"title":440,"_path":441,"layout":13},"Text area","/design-system/components/text-area",{"title":443,"_path":444,"layout":13},"Timeline","/design-system/components/timeline",{"title":446,"_path":447,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":449,"_path":450,"children":451,"layout":13},"Ripple Framework","/framework",[452,453,471,493],{"title":449,"_path":450,"layout":13},{"title":454,"_path":455,"children":456},"Key Concepts","/framework/key-concepts",[457,459,462,465,468],{"title":264,"_path":458,"layout":13},"/framework/key-concepts/nuxt",{"title":460,"_path":461,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":463,"_path":464,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":466,"_path":467,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":469,"_path":470,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":472,"_path":473,"children":474},"Guides","/framework/guides",[475,478,481,484,487,490],{"title":476,"_path":477,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":479,"_path":480,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":482,"_path":483,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":485,"_path":486,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":488,"_path":489,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":491,"_path":492,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":494,"_path":495,"layout":13},"Core modules","/framework/core-modules",["Reactive",497],["Set"],["Reactive",499],{"module-navigation":500},null,true,1714695652242]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/media-gallery/_payload.json b/design-system/components/media-gallery/_payload.json
index 0db55d7579..5cdbff3280 100644
--- a/design-system/components/media-gallery/_payload.json
+++ b/design-system/components/media-gallery/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":104,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695154203]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":104,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695652361]
\ No newline at end of file
diff --git a/design-system/components/media-gallery/index.html b/design-system/components/media-gallery/index.html
index a68ffe7cf0..2af384f976 100644
--- a/design-system/components/media-gallery/index.html
+++ b/design-system/components/media-gallery/index.html
@@ -28,63 +28,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -96,8 +96,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Media gallery</h1><p class="rpl-type-p-large" data-v-3163c6df>The Media gallery component is a series of images users can side-scroll through.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a media gallery to collate a series of related images into a gallery. Media gallery allows users to scroll through related images. It&#39;s best used for displaying images.<!--]--></p><p><!--[-->Media gallery combines images and text to give users context within the content.<!--]--></p><p><!--[-->Media items inside a media gallery will display as either landscape or portrait, at predefined ratios.<!--]--></p><p><!--[-->See <a href="/design-system/components/media/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->media<!--]--><!--]--><!----><!--]--></a> for information relating to file type, ratios and focal point.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-media-gallery--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-gallery--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Include related images only.<!--]--></li><li><!--[-->Use at least 2 images.<!--]--></li><li><!--[-->Always use a media title.<!--]--></li><li><!--[-->Include an optional caption to help users understand images&#39; context and relevance to the page content.<!--]--></li><li><!--[-->Use on any page type.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t use for decorative purposes.<!--]--></li><li><!--[-->Don&#39;t use sensory images.<!--]--></li><li><!--[-->Don&#39;t use for a single image, instead use the media embed component.<!--]--></li><li><!--[-->Don&#39;t use with media unrelated to page content.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Media embed uses colour for:<!--]--></p><ul><!--[--><li><!--[-->icons<!--]--></li><li><!--[-->indicating an interaction to users<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><p><!--[-->It also adopts its theming from the pagination component.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-media-gallery--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-gallery--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/media-gallery.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/media-gallery/_payload.json">[{"state":1,"once":523,"_errors":525,"serverRendered":528,"path":529,"prerenderedAt":530},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":210,"$sdd-globals":226,"$sdd-navigation":228},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/media-gallery":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":205,"_id":206,"_source":207,"_file":208,"_extension":209},"/design-system/components/media-gallery","components",false,"","Media gallery","The Media gallery component is a series of images users can side-scroll through.","page","Core",{"type":16,"children":17,"toc":196},"root",[18,27,33,38,43,57,62,69,99,105,128,132,138,143,161,166,173],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use a media gallery to collate a series of related images into a gallery. Media gallery allows users to scroll through related images. It's best used for displaying images.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Media gallery combines images and text to give users context within the content.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Media items inside a media gallery will display as either landscape or portrait, at predefined ratios.",{"type":19,"tag":28,"props":44,"children":45},{},[46,48,55],{"type":25,"value":47},"See ",{"type":19,"tag":49,"props":50,"children":52},"a",{"href":51},"/design-system/components/media/",[53],{"type":25,"value":54},"media",{"type":25,"value":56}," for information relating to file type, ratios and focal point.",{"type":19,"tag":58,"props":59,"children":61},"docs-example",{"id":60},"core-containers-media-gallery--default-story",[],{"type":19,"tag":63,"props":64,"children":66},"h3",{"id":65},"when-and-how-to-use",[67],{"type":25,"value":68},"When and how to use",{"type":19,"tag":70,"props":71,"children":72},"ul",{},[73,79,84,89,94],{"type":19,"tag":74,"props":75,"children":76},"li",{},[77],{"type":25,"value":78},"Include related images only.",{"type":19,"tag":74,"props":80,"children":81},{},[82],{"type":25,"value":83},"Use at least 2 images.",{"type":19,"tag":74,"props":85,"children":86},{},[87],{"type":25,"value":88},"Always use a media title.",{"type":19,"tag":74,"props":90,"children":91},{},[92],{"type":25,"value":93},"Include an optional caption to help users understand images' context and relevance to the page content.",{"type":19,"tag":74,"props":95,"children":96},{},[97],{"type":25,"value":98},"Use on any page type.",{"type":19,"tag":63,"props":100,"children":102},{"id":101},"when-and-how-not-to-use",[103],{"type":25,"value":104},"When and how not to use",{"type":19,"tag":70,"props":106,"children":107},{},[108,113,118,123],{"type":19,"tag":74,"props":109,"children":110},{},[111],{"type":25,"value":112},"Don't use for decorative purposes.",{"type":19,"tag":74,"props":114,"children":115},{},[116],{"type":25,"value":117},"Don't use sensory images.",{"type":19,"tag":74,"props":119,"children":120},{},[121],{"type":25,"value":122},"Don't use for a single image, instead use the media embed component.",{"type":19,"tag":74,"props":124,"children":125},{},[126],{"type":25,"value":127},"Don't use with media unrelated to page content.",{"type":19,"tag":129,"props":130,"children":131},"hr",{},[],{"type":19,"tag":20,"props":133,"children":135},{"id":134},"theming",[136],{"type":25,"value":137},"Theming",{"type":19,"tag":28,"props":139,"children":140},{},[141],{"type":25,"value":142},"Media embed uses colour for:",{"type":19,"tag":70,"props":144,"children":145},{},[146,151,156],{"type":19,"tag":74,"props":147,"children":148},{},[149],{"type":25,"value":150},"icons",{"type":19,"tag":74,"props":152,"children":153},{},[154],{"type":25,"value":155},"indicating an interaction to users",{"type":19,"tag":74,"props":157,"children":158},{},[159],{"type":25,"value":160},"interactive states.",{"type":19,"tag":28,"props":162,"children":163},{},[164],{"type":25,"value":165},"It also adopts its theming from the pagination component.",{"type":19,"tag":167,"props":168,"children":169},"docs-theme-chooser",{},[170],{"type":19,"tag":58,"props":171,"children":172},{"id":60},[],{"type":19,"tag":28,"props":174,"children":175},{},[176,178,186,188,194],{"type":25,"value":177},"To create your own theme, see ",{"type":19,"tag":49,"props":179,"children":183},{"href":180,"rel":181},"https://www.vic.gov.au",[182],"nofollow",[184],{"type":25,"value":185},"theming guidance for designers",{"type":25,"value":187}," or ",{"type":19,"tag":49,"props":189,"children":191},{"href":180,"rel":190},[182],[192],{"type":25,"value":193},"theming guidance for developers",{"type":25,"value":195},".",{"title":10,"searchDepth":197,"depth":197,"links":198},2,[199,204],{"id":22,"depth":197,"text":26,"children":200},[201,203],{"id":65,"depth":202,"text":68},3,{"id":101,"depth":202,"text":104},{"id":134,"depth":197,"text":137},"markdown","content:design-system:5.components:media-gallery.md","content","design-system/5.components/media-gallery.md","md",["ShallowRef",211],["ShallowReactive",212],{"/design-system/components/media-gallery":213},[214,220],{"_path":215,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":216,"description":217,"layout":13,"label":14,"_type":205,"_id":218,"_source":207,"_file":219,"_extension":209},"/design-system/components/media-fullscreen","Media fullscreen","The Media fullscreen component is an icon, with text instructions, beneath your media items for users to interact with so they can view one or more related media items in fullscreen.","content:design-system:5.components:media-fullscreen.md","design-system/5.components/media-fullscreen.md",{"_path":221,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":222,"description":223,"layout":13,"label":14,"_type":205,"_id":224,"_source":207,"_file":225,"_extension":209},"/design-system/components/media","Media","The Media component is a container that houses media items to use in other components on a page.","content:design-system:5.components:media.md","design-system/5.components/media.md",["ShallowRef",227],{},[229,234,475],{"title":230,"_path":231,"icon":232,"layout":233},"Ripple Design System","/","carbon:home","home",{"title":235,"_path":236,"children":237},"Design System","/design-system",[238,254,270,299,333],{"title":239,"_path":240,"children":241},"About","/design-system/about",[242,245,248,251],{"title":243,"_path":244,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":246,"_path":247,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":249,"_path":250,"layout":13},"Support","/design-system/about/getting-support",{"title":252,"_path":253,"layout":13},"Contributing","/design-system/about/contributing",{"title":255,"_path":256,"children":257},"Design","/design-system/design",[258,261,264,267],{"title":259,"_path":260,"layout":13},"Getting started","/design-system/design/getting-started",{"title":262,"_path":263,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":265,"_path":266,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":268,"_path":269,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":271,"_path":272,"children":273},"Develop","/design-system/develop",[274,276,278,281],{"title":259,"_path":275,"layout":13},"/design-system/develop/getting-started",{"title":252,"_path":277,"layout":13},"/design-system/develop/contributing",{"title":279,"_path":280,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":282,"children":283,"layout":13},"/design-system/develop/usage",[284,287,290,293,296],{"title":285,"_path":286,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":288,"_path":289,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":291,"_path":292,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":294,"_path":295,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":297,"_path":298,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":300,"_path":301,"children":302},"Styles","/design-system/styles",[303,306,309,312,315,318,321,324,327,330],{"title":304,"_path":305,"layout":13},"Colour","/design-system/styles/colour",{"title":307,"_path":308,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":310,"_path":311,"layout":13},"Grid","/design-system/styles/grid",{"title":313,"_path":314,"layout":13},"Icons","/design-system/styles/icons",{"title":316,"_path":317,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":319,"_path":320,"layout":13},"Layout","/design-system/styles/layout",{"title":322,"_path":323,"layout":13},"Logo","/design-system/styles/logo",{"title":325,"_path":326,"layout":13},"Motion","/design-system/styles/motion",{"title":328,"_path":329,"layout":13},"Spacing","/design-system/styles/spacing",{"title":331,"_path":332,"layout":13},"Typography","/design-system/styles/typography",{"title":334,"_path":335,"children":336},"Components","/design-system/components",[337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,416,419,420,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472],{"title":338,"_path":339,"layout":13},"Accordion","/design-system/components/accordion",{"title":341,"_path":342,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":344,"_path":345,"layout":13},"Alert","/design-system/components/alert",{"title":347,"_path":348,"layout":13},"Block quote","/design-system/components/block-quote",{"title":350,"_path":351,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":353,"_path":354,"layout":13},"Button","/design-system/components/button",{"title":356,"_path":357,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":359,"_path":360,"layout":13},"Callout","/design-system/components/callout",{"title":362,"_path":363,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":365,"_path":366,"layout":13},"Card","/design-system/components/card",{"title":368,"_path":369,"layout":13},"Carousel","/design-system/components/carousel",{"title":371,"_path":372,"layout":13},"Category grid","/design-system/components/category-grid",{"title":374,"_path":375,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":377,"_path":378,"layout":13},"Chip","/design-system/components/chip",{"title":380,"_path":381,"layout":13},"Contact us","/design-system/components/contact-us",{"title":383,"_path":384,"layout":13},"Date input","/design-system/components/date-input",{"title":386,"_path":387,"layout":13},"Detail list","/design-system/components/detail-list",{"title":389,"_path":390,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":392,"_path":393,"layout":13},"File","/design-system/components/file",{"title":395,"_path":396,"layout":13},"Footer","/design-system/components/footer",{"title":398,"_path":399,"layout":13},"Form","/design-system/components/form",{"title":401,"_path":402,"layout":13},"Form alert","/design-system/components/form-alert",{"title":404,"_path":405,"layout":13},"Header","/design-system/components/header",{"title":407,"_path":408,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":410,"_path":411,"layout":13},"Input field","/design-system/components/input-field",{"title":413,"_path":414,"layout":13},"Key dates","/design-system/components/key-dates",{"title":222,"_path":221,"layout":13},{"title":417,"_path":418,"layout":13},"Media embed","/design-system/components/media-embed",{"title":216,"_path":215,"layout":13},{"title":11,"_path":7,"layout":13},{"title":422,"_path":423,"layout":13},"Option button","/design-system/components/option-button",{"title":425,"_path":426,"layout":13},"Page action","/design-system/components/page-action",{"title":428,"_path":429,"layout":13},"Pagination","/design-system/components/pagination",{"title":431,"_path":432,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":434,"_path":435,"layout":13},"Profile","/design-system/components/profile",{"title":437,"_path":438,"layout":13},"Radio button","/design-system/components/radio-button",{"title":440,"_path":441,"layout":13},"Related links","/design-system/components/related-links",{"title":443,"_path":444,"layout":13},"Results listing","/design-system/components/results-listing",{"title":446,"_path":447,"layout":13},"Search bar","/design-system/components/search-bar",{"title":449,"_path":450,"layout":13},"Skip link","/design-system/components/skip-link",{"title":452,"_path":453,"layout":13},"Social share","/design-system/components/social-share",{"title":455,"_path":456,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":458,"_path":459,"layout":13},"Table","/design-system/components/table",{"title":461,"_path":462,"layout":13},"Tabs","/design-system/components/tabs",{"title":464,"_path":465,"layout":13},"Tag","/design-system/components/tag",{"title":467,"_path":468,"layout":13},"Text area","/design-system/components/text-area",{"title":470,"_path":471,"layout":13},"Timeline","/design-system/components/timeline",{"title":473,"_path":474,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":476,"_path":477,"children":478,"layout":13},"Ripple Framework","/framework",[479,480,498,520],{"title":476,"_path":477,"layout":13},{"title":481,"_path":482,"children":483},"Key Concepts","/framework/key-concepts",[484,486,489,492,495],{"title":291,"_path":485,"layout":13},"/framework/key-concepts/nuxt",{"title":487,"_path":488,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":490,"_path":491,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":493,"_path":494,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":496,"_path":497,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":499,"_path":500,"children":501},"Guides","/framework/guides",[502,505,508,511,514,517],{"title":503,"_path":504,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":506,"_path":507,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":509,"_path":510,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":512,"_path":513,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":515,"_path":516,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":518,"_path":519,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":521,"_path":522,"layout":13},"Core modules","/framework/core-modules",["Reactive",524],["Set"],["Reactive",526],{"module-navigation":527},null,true,"/design-system/components/media-gallery/",1714695156985]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Media gallery</h1><p class="rpl-type-p-large" data-v-3163c6df>The Media gallery component is a series of images users can side-scroll through.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a media gallery to collate a series of related images into a gallery. Media gallery allows users to scroll through related images. It&#39;s best used for displaying images.<!--]--></p><p><!--[-->Media gallery combines images and text to give users context within the content.<!--]--></p><p><!--[-->Media items inside a media gallery will display as either landscape or portrait, at predefined ratios.<!--]--></p><p><!--[-->See <a href="/design-system/components/media/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->media<!--]--><!--]--><!----><!--]--></a> for information relating to file type, ratios and focal point.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-media-gallery--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-gallery--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Include related images only.<!--]--></li><li><!--[-->Use at least 2 images.<!--]--></li><li><!--[-->Always use a media title.<!--]--></li><li><!--[-->Include an optional caption to help users understand images&#39; context and relevance to the page content.<!--]--></li><li><!--[-->Use on any page type.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t use for decorative purposes.<!--]--></li><li><!--[-->Don&#39;t use sensory images.<!--]--></li><li><!--[-->Don&#39;t use for a single image, instead use the media embed component.<!--]--></li><li><!--[-->Don&#39;t use with media unrelated to page content.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Media embed uses colour for:<!--]--></p><ul><!--[--><li><!--[-->icons<!--]--></li><li><!--[-->indicating an interaction to users<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><p><!--[-->It also adopts its theming from the pagination component.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-media-gallery--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-media-gallery--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/media-gallery.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/media-gallery/_payload.json">[{"state":1,"once":523,"_errors":525,"serverRendered":528,"path":529,"prerenderedAt":530},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":210,"$sdd-globals":226,"$sdd-navigation":228},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/media-gallery":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":205,"_id":206,"_source":207,"_file":208,"_extension":209},"/design-system/components/media-gallery","components",false,"","Media gallery","The Media gallery component is a series of images users can side-scroll through.","page","Core",{"type":16,"children":17,"toc":196},"root",[18,27,33,38,43,57,62,69,99,105,128,132,138,143,161,166,173],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use a media gallery to collate a series of related images into a gallery. Media gallery allows users to scroll through related images. It's best used for displaying images.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Media gallery combines images and text to give users context within the content.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Media items inside a media gallery will display as either landscape or portrait, at predefined ratios.",{"type":19,"tag":28,"props":44,"children":45},{},[46,48,55],{"type":25,"value":47},"See ",{"type":19,"tag":49,"props":50,"children":52},"a",{"href":51},"/design-system/components/media/",[53],{"type":25,"value":54},"media",{"type":25,"value":56}," for information relating to file type, ratios and focal point.",{"type":19,"tag":58,"props":59,"children":61},"docs-example",{"id":60},"core-containers-media-gallery--default-story",[],{"type":19,"tag":63,"props":64,"children":66},"h3",{"id":65},"when-and-how-to-use",[67],{"type":25,"value":68},"When and how to use",{"type":19,"tag":70,"props":71,"children":72},"ul",{},[73,79,84,89,94],{"type":19,"tag":74,"props":75,"children":76},"li",{},[77],{"type":25,"value":78},"Include related images only.",{"type":19,"tag":74,"props":80,"children":81},{},[82],{"type":25,"value":83},"Use at least 2 images.",{"type":19,"tag":74,"props":85,"children":86},{},[87],{"type":25,"value":88},"Always use a media title.",{"type":19,"tag":74,"props":90,"children":91},{},[92],{"type":25,"value":93},"Include an optional caption to help users understand images' context and relevance to the page content.",{"type":19,"tag":74,"props":95,"children":96},{},[97],{"type":25,"value":98},"Use on any page type.",{"type":19,"tag":63,"props":100,"children":102},{"id":101},"when-and-how-not-to-use",[103],{"type":25,"value":104},"When and how not to use",{"type":19,"tag":70,"props":106,"children":107},{},[108,113,118,123],{"type":19,"tag":74,"props":109,"children":110},{},[111],{"type":25,"value":112},"Don't use for decorative purposes.",{"type":19,"tag":74,"props":114,"children":115},{},[116],{"type":25,"value":117},"Don't use sensory images.",{"type":19,"tag":74,"props":119,"children":120},{},[121],{"type":25,"value":122},"Don't use for a single image, instead use the media embed component.",{"type":19,"tag":74,"props":124,"children":125},{},[126],{"type":25,"value":127},"Don't use with media unrelated to page content.",{"type":19,"tag":129,"props":130,"children":131},"hr",{},[],{"type":19,"tag":20,"props":133,"children":135},{"id":134},"theming",[136],{"type":25,"value":137},"Theming",{"type":19,"tag":28,"props":139,"children":140},{},[141],{"type":25,"value":142},"Media embed uses colour for:",{"type":19,"tag":70,"props":144,"children":145},{},[146,151,156],{"type":19,"tag":74,"props":147,"children":148},{},[149],{"type":25,"value":150},"icons",{"type":19,"tag":74,"props":152,"children":153},{},[154],{"type":25,"value":155},"indicating an interaction to users",{"type":19,"tag":74,"props":157,"children":158},{},[159],{"type":25,"value":160},"interactive states.",{"type":19,"tag":28,"props":162,"children":163},{},[164],{"type":25,"value":165},"It also adopts its theming from the pagination component.",{"type":19,"tag":167,"props":168,"children":169},"docs-theme-chooser",{},[170],{"type":19,"tag":58,"props":171,"children":172},{"id":60},[],{"type":19,"tag":28,"props":174,"children":175},{},[176,178,186,188,194],{"type":25,"value":177},"To create your own theme, see ",{"type":19,"tag":49,"props":179,"children":183},{"href":180,"rel":181},"https://www.vic.gov.au",[182],"nofollow",[184],{"type":25,"value":185},"theming guidance for designers",{"type":25,"value":187}," or ",{"type":19,"tag":49,"props":189,"children":191},{"href":180,"rel":190},[182],[192],{"type":25,"value":193},"theming guidance for developers",{"type":25,"value":195},".",{"title":10,"searchDepth":197,"depth":197,"links":198},2,[199,204],{"id":22,"depth":197,"text":26,"children":200},[201,203],{"id":65,"depth":202,"text":68},3,{"id":101,"depth":202,"text":104},{"id":134,"depth":197,"text":137},"markdown","content:design-system:5.components:media-gallery.md","content","design-system/5.components/media-gallery.md","md",["ShallowRef",211],["ShallowReactive",212],{"/design-system/components/media-gallery":213},[214,220],{"_path":215,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":216,"description":217,"layout":13,"label":14,"_type":205,"_id":218,"_source":207,"_file":219,"_extension":209},"/design-system/components/media-fullscreen","Media fullscreen","The Media fullscreen component is an icon, with text instructions, beneath your media items for users to interact with so they can view one or more related media items in fullscreen.","content:design-system:5.components:media-fullscreen.md","design-system/5.components/media-fullscreen.md",{"_path":221,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":222,"description":223,"layout":13,"label":14,"_type":205,"_id":224,"_source":207,"_file":225,"_extension":209},"/design-system/components/media","Media","The Media component is a container that houses media items to use in other components on a page.","content:design-system:5.components:media.md","design-system/5.components/media.md",["ShallowRef",227],{},[229,234,475],{"title":230,"_path":231,"icon":232,"layout":233},"Ripple Design System","/","carbon:home","home",{"title":235,"_path":236,"children":237},"Design System","/design-system",[238,254,270,299,333],{"title":239,"_path":240,"children":241},"About","/design-system/about",[242,245,248,251],{"title":243,"_path":244,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":246,"_path":247,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":249,"_path":250,"layout":13},"Support","/design-system/about/getting-support",{"title":252,"_path":253,"layout":13},"Contributing","/design-system/about/contributing",{"title":255,"_path":256,"children":257},"Design","/design-system/design",[258,261,264,267],{"title":259,"_path":260,"layout":13},"Getting started","/design-system/design/getting-started",{"title":262,"_path":263,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":265,"_path":266,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":268,"_path":269,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":271,"_path":272,"children":273},"Develop","/design-system/develop",[274,276,278,281],{"title":259,"_path":275,"layout":13},"/design-system/develop/getting-started",{"title":252,"_path":277,"layout":13},"/design-system/develop/contributing",{"title":279,"_path":280,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":282,"children":283,"layout":13},"/design-system/develop/usage",[284,287,290,293,296],{"title":285,"_path":286,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":288,"_path":289,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":291,"_path":292,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":294,"_path":295,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":297,"_path":298,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":300,"_path":301,"children":302},"Styles","/design-system/styles",[303,306,309,312,315,318,321,324,327,330],{"title":304,"_path":305,"layout":13},"Colour","/design-system/styles/colour",{"title":307,"_path":308,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":310,"_path":311,"layout":13},"Grid","/design-system/styles/grid",{"title":313,"_path":314,"layout":13},"Icons","/design-system/styles/icons",{"title":316,"_path":317,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":319,"_path":320,"layout":13},"Layout","/design-system/styles/layout",{"title":322,"_path":323,"layout":13},"Logo","/design-system/styles/logo",{"title":325,"_path":326,"layout":13},"Motion","/design-system/styles/motion",{"title":328,"_path":329,"layout":13},"Spacing","/design-system/styles/spacing",{"title":331,"_path":332,"layout":13},"Typography","/design-system/styles/typography",{"title":334,"_path":335,"children":336},"Components","/design-system/components",[337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,416,419,420,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472],{"title":338,"_path":339,"layout":13},"Accordion","/design-system/components/accordion",{"title":341,"_path":342,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":344,"_path":345,"layout":13},"Alert","/design-system/components/alert",{"title":347,"_path":348,"layout":13},"Block quote","/design-system/components/block-quote",{"title":350,"_path":351,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":353,"_path":354,"layout":13},"Button","/design-system/components/button",{"title":356,"_path":357,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":359,"_path":360,"layout":13},"Callout","/design-system/components/callout",{"title":362,"_path":363,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":365,"_path":366,"layout":13},"Card","/design-system/components/card",{"title":368,"_path":369,"layout":13},"Carousel","/design-system/components/carousel",{"title":371,"_path":372,"layout":13},"Category grid","/design-system/components/category-grid",{"title":374,"_path":375,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":377,"_path":378,"layout":13},"Chip","/design-system/components/chip",{"title":380,"_path":381,"layout":13},"Contact us","/design-system/components/contact-us",{"title":383,"_path":384,"layout":13},"Date input","/design-system/components/date-input",{"title":386,"_path":387,"layout":13},"Detail list","/design-system/components/detail-list",{"title":389,"_path":390,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":392,"_path":393,"layout":13},"File","/design-system/components/file",{"title":395,"_path":396,"layout":13},"Footer","/design-system/components/footer",{"title":398,"_path":399,"layout":13},"Form","/design-system/components/form",{"title":401,"_path":402,"layout":13},"Form alert","/design-system/components/form-alert",{"title":404,"_path":405,"layout":13},"Header","/design-system/components/header",{"title":407,"_path":408,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":410,"_path":411,"layout":13},"Input field","/design-system/components/input-field",{"title":413,"_path":414,"layout":13},"Key dates","/design-system/components/key-dates",{"title":222,"_path":221,"layout":13},{"title":417,"_path":418,"layout":13},"Media embed","/design-system/components/media-embed",{"title":216,"_path":215,"layout":13},{"title":11,"_path":7,"layout":13},{"title":422,"_path":423,"layout":13},"Option button","/design-system/components/option-button",{"title":425,"_path":426,"layout":13},"Page action","/design-system/components/page-action",{"title":428,"_path":429,"layout":13},"Pagination","/design-system/components/pagination",{"title":431,"_path":432,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":434,"_path":435,"layout":13},"Profile","/design-system/components/profile",{"title":437,"_path":438,"layout":13},"Radio button","/design-system/components/radio-button",{"title":440,"_path":441,"layout":13},"Related links","/design-system/components/related-links",{"title":443,"_path":444,"layout":13},"Results listing","/design-system/components/results-listing",{"title":446,"_path":447,"layout":13},"Search bar","/design-system/components/search-bar",{"title":449,"_path":450,"layout":13},"Skip link","/design-system/components/skip-link",{"title":452,"_path":453,"layout":13},"Social share","/design-system/components/social-share",{"title":455,"_path":456,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":458,"_path":459,"layout":13},"Table","/design-system/components/table",{"title":461,"_path":462,"layout":13},"Tabs","/design-system/components/tabs",{"title":464,"_path":465,"layout":13},"Tag","/design-system/components/tag",{"title":467,"_path":468,"layout":13},"Text area","/design-system/components/text-area",{"title":470,"_path":471,"layout":13},"Timeline","/design-system/components/timeline",{"title":473,"_path":474,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":476,"_path":477,"children":478,"layout":13},"Ripple Framework","/framework",[479,480,498,520],{"title":476,"_path":477,"layout":13},{"title":481,"_path":482,"children":483},"Key Concepts","/framework/key-concepts",[484,486,489,492,495],{"title":291,"_path":485,"layout":13},"/framework/key-concepts/nuxt",{"title":487,"_path":488,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":490,"_path":491,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":493,"_path":494,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":496,"_path":497,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":499,"_path":500,"children":501},"Guides","/framework/guides",[502,505,508,511,514,517],{"title":503,"_path":504,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":506,"_path":507,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":509,"_path":510,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":512,"_path":513,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":515,"_path":516,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":518,"_path":519,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":521,"_path":522,"layout":13},"Core modules","/framework/core-modules",["Reactive",524],["Set"],["Reactive",526],{"module-navigation":527},null,true,"/design-system/components/media-gallery/",1714695655018]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/media/_payload.json b/design-system/components/media/_payload.json
index 23be7d5405..5d99e8c1f2 100644
--- a/design-system/components/media/_payload.json
+++ b/design-system/components/media/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":104,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695153866]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":104,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695652053]
\ No newline at end of file
diff --git a/design-system/components/media/index.html b/design-system/components/media/index.html
index 3e9f85ede7..0da2886a23 100644
--- a/design-system/components/media/index.html
+++ b/design-system/components/media/index.html
@@ -27,62 +27,62 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.CwUV-MIb.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.gK7ORMEc.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -99,8 +99,8 @@
 <ul><!--[--><li><!--[-->svg<!--]--></li><li><!--[-->png<!--]--></li><!--]--></ul><!--]--></li><li><!--[-->charts/graphs
 <ul><!--[--><li><!--[-->svg<!--]--></li><li><!--[-->png<!--]--></li><!--]--></ul><!--]--></li><li><!--[-->video
 <ul><!--[--><li><!--[-->mp4<!--]--></li><!--]--></ul><!--]--></li><li><!--[-->audio
-<ul><!--[--><li><!--[-->wav.<!--]--></li><!--]--></ul><!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="alternative-text" data-v-ea525968><a href="#alternative-text" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Alternative text<!--]--></a></h2><p><!--[-->All images, except purely decorative images, need a text alternative (alt text). Without this, your page will not address <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->WCAG 2.0 Criterion 1.1.1<!--]--><!--]--><!----><!--]--></a> or conform with WCAG 2.0 or 2.1 AA standards. WCAG 2.0 AA standards are the minimum accessibility standards for all Victorian Government communications under the <a href="https://www.vic.gov.au/brand-victoria-guidelines-logos" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Brand Victoria guidelines<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><p><!--[-->The <a href="https://www.w3.org/WAI/tutorials/images/decision-tree/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Web Accessibility initiative alt decision tree<!--]--><!--]--><!----><!--]--></a> also guides you on whether your image needs alt text or not.<!--]--></p><p><!--[-->For purely descriptive images, the alt text attribute instead reads: alt=””.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="what-alt-text-does"><!--[-->What alt text does<!--]--></h4><p><!--[-->Alt text gives users who use screen readers (or devices that are not loading, or displaying, images) the information an image is meant to convey because:<!--]--></p><ul><!--[--><li><!--[-->a screen reader can read the alt text aloud<!--]--></li><li><!--[-->alt text is shown in the place of ‘broken’ or unloaded images on the page.<!--]--></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="how-to-write-alt-text"><!--[-->How to write alt text<!--]--></h4><p><!--[-->Alt text must serve the equivalent purpose of the image itself, by:<!--]--></p><ul><!--[--><li><!--[-->being short but specific (for example, ‘a Harry Potter novel’ rather than ‘a novel’)<!--]--></li><li><!--[-->explaining the image’s function in the context of the page or content section (for example, ‘Search’ rather than ‘Magnifying glass’)<!--]--></li><li><!--[-->using normal punctuation that helps users understand the text<!--]--></li><li><!--[-->including the image text in the alt text (for images with text).<!--]--></li><!--]--></ul><p><!--[-->For more guidance on writing alt text, refer to <a href="https://www.stylemanual.gov.au/content-types/images/alt-text-captions-and-titles-images" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Alt text, captions and titles for images<!--]--><!--]--><!----><!--]--></a> in the Australian Government Style Manual.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/media.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/media/_payload.json">[{"state":1,"once":851,"_errors":853,"serverRendered":856,"path":857,"prerenderedAt":858},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":538,"$sdd-globals":554,"$sdd-navigation":556},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/media":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":533,"_id":534,"_source":535,"_file":536,"_extension":537},"/design-system/components/media","components",false,"","Media","The Media component is a container that houses media items to use in other components on a page.","page","Core",{"type":16,"children":17,"toc":517},"root",[18,27,33,38,43,48,53,60,100,106,124,128,134,139,172,178,183,199,205,210,215,220,226,231,236,242,247,295,300,306,311,316,396,402,425,439,444,451,456,469,475,480,503],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use media to communicate and differentiate specific information through visuals.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Media items sit within other components such as cards, or a media gallery.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Use images if they help users complete a task. Images can make it easier for some people to understand information.",{"type":19,"tag":28,"props":44,"children":45},{},[46],{"type":25,"value":47},"Use media to combine visual elements with text. This gives your content context and alignment.",{"type":19,"tag":49,"props":50,"children":52},"docs-example",{"id":51},"core-containers-image--image",[],{"type":19,"tag":54,"props":55,"children":57},"h3",{"id":56},"when-and-how-to-use",[58],{"type":25,"value":59},"When and how to use",{"type":19,"tag":61,"props":62,"children":63},"ul",{},[64,70,75,80,85,90,95],{"type":19,"tag":65,"props":66,"children":67},"li",{},[68],{"type":25,"value":69},"Always get copyright for all media used.",{"type":19,"tag":65,"props":71,"children":72},{},[73],{"type":25,"value":74},"Nest media in other components.",{"type":19,"tag":65,"props":76,"children":77},{},[78],{"type":25,"value":79},"Choose diverse images that reflect and support the diversity of Victoria.",{"type":19,"tag":65,"props":81,"children":82},{},[83],{"type":25,"value":84},"Only media that's relevant to the content.",{"type":19,"tag":65,"props":86,"children":87},{},[88],{"type":25,"value":89},"Always include alt text for each media item.",{"type":19,"tag":65,"props":91,"children":92},{},[93],{"type":25,"value":94},"Use appropriate resolution for the content.",{"type":19,"tag":65,"props":96,"children":97},{},[98],{"type":25,"value":99},"Always include a transcription for all audio content.",{"type":19,"tag":54,"props":101,"children":103},{"id":102},"when-and-how-not-to-use",[104],{"type":25,"value":105},"When and how not to use",{"type":19,"tag":61,"props":107,"children":108},{},[109,114,119],{"type":19,"tag":65,"props":110,"children":111},{},[112],{"type":25,"value":113},"Don't use a media item without alt text.",{"type":19,"tag":65,"props":115,"children":116},{},[117],{"type":25,"value":118},"Don't use video content without captions.",{"type":19,"tag":65,"props":120,"children":121},{},[122],{"type":25,"value":123},"Don't crop an image without a clear focal point.",{"type":19,"tag":125,"props":126,"children":127},"hr",{},[],{"type":19,"tag":20,"props":129,"children":131},{"id":130},"variants",[132],{"type":25,"value":133},"Variants",{"type":19,"tag":28,"props":135,"children":136},{},[137],{"type":25,"value":138},"The ratios you can use for media include:",{"type":19,"tag":61,"props":140,"children":141},{},[142,147,152,157,162,167],{"type":19,"tag":65,"props":143,"children":144},{},[145],{"type":25,"value":146},"1:1",{"type":19,"tag":65,"props":148,"children":149},{},[150],{"type":25,"value":151},"4:3",{"type":19,"tag":65,"props":153,"children":154},{},[155],{"type":25,"value":156},"16:9",{"type":19,"tag":65,"props":158,"children":159},{},[160],{"type":25,"value":161},"21:9",{"type":19,"tag":65,"props":163,"children":164},{},[165],{"type":25,"value":166},"3:1",{"type":19,"tag":65,"props":168,"children":169},{},[170],{"type":25,"value":171},"avatar (circle).",{"type":19,"tag":54,"props":173,"children":175},{"id":174},"copyright-requirements",[176],{"type":25,"value":177},"Copyright requirements",{"type":19,"tag":28,"props":179,"children":180},{},[181],{"type":25,"value":182},"You must get permission (a licence) to use copyright material. This includes images and text.",{"type":19,"tag":28,"props":184,"children":185},{},[186,188,197],{"type":25,"value":187},"Some images are available under an open access licence, such as ",{"type":19,"tag":189,"props":190,"children":194},"a",{"href":191,"rel":192},"https://au.creativecommons.net/",[193],"nofollow",[195],{"type":25,"value":196},"Creative Commons",{"type":25,"value":198},". Alt text is also licensed under copyright.",{"type":19,"tag":54,"props":200,"children":202},{"id":201},"file-resolution",[203],{"type":25,"value":204},"File resolution",{"type":19,"tag":28,"props":206,"children":207},{},[208],{"type":25,"value":209},"Image resolution must be appropriate for the content.",{"type":19,"tag":28,"props":211,"children":212},{},[213],{"type":25,"value":214},"Don’t embed images with a large file size into content that you will publish online, such as PDFs or webpages. Optimise and compress all image files so they make it quicker for the user to access the information.",{"type":19,"tag":28,"props":216,"children":217},{},[218],{"type":25,"value":219},"Design for mobile devices first. An image will scale to the device people view it on. Check that it’s easy to read on a mobile phone screen and a desktop before you publish it.",{"type":19,"tag":54,"props":221,"children":223},{"id":222},"focal-point",[224],{"type":25,"value":225},"Focal point",{"type":19,"tag":28,"props":227,"children":228},{},[229],{"type":25,"value":230},"Always ensure that images work on all screen sizes. Select the focal point of the image to best position images in any area.",{"type":19,"tag":28,"props":232,"children":233},{},[234],{"type":25,"value":235},"Consider cropping smaller images more to keep the impact of the original image.",{"type":19,"tag":54,"props":237,"children":239},{"id":238},"media-types",[240],{"type":25,"value":241},"Media types",{"type":19,"tag":28,"props":243,"children":244},{},[245],{"type":25,"value":246},"Multiple types of media can are supported and used to add meaning to content. These include:",{"type":19,"tag":61,"props":248,"children":249},{},[250,255,260,265,270,275,280,285,290],{"type":19,"tag":65,"props":251,"children":252},{},[253],{"type":25,"value":254},"photographs",{"type":19,"tag":65,"props":256,"children":257},{},[258],{"type":25,"value":259},"decorative images",{"type":19,"tag":65,"props":261,"children":262},{},[263],{"type":25,"value":264},"charts",{"type":19,"tag":65,"props":266,"children":267},{},[268],{"type":25,"value":269},"graphs",{"type":19,"tag":65,"props":271,"children":272},{},[273],{"type":25,"value":274},"maps",{"type":19,"tag":65,"props":276,"children":277},{},[278],{"type":25,"value":279},"illustrations or drawings",{"type":19,"tag":65,"props":281,"children":282},{},[283],{"type":25,"value":284},"icons",{"type":19,"tag":65,"props":286,"children":287},{},[288],{"type":25,"value":289},"video",{"type":19,"tag":65,"props":291,"children":292},{},[293],{"type":25,"value":294},"audio.",{"type":19,"tag":28,"props":296,"children":297},{},[298],{"type":25,"value":299},"Make sure you use the correct media type for the content it is supporting.",{"type":19,"tag":54,"props":301,"children":303},{"id":302},"file-types",[304],{"type":25,"value":305},"File types",{"type":19,"tag":28,"props":307,"children":308},{},[309],{"type":25,"value":310},"There are many image file types. Seek specialist advice to optimise an image file as a vector or raster file format.",{"type":19,"tag":28,"props":312,"children":313},{},[314],{"type":25,"value":315},"The following file types are recommended:",{"type":19,"tag":61,"props":317,"children":318},{},[319,337,354,370,383],{"type":19,"tag":65,"props":320,"children":321},{},[322,324],{"type":25,"value":323},"photographs\n",{"type":19,"tag":61,"props":325,"children":326},{},[327,332],{"type":19,"tag":65,"props":328,"children":329},{},[330],{"type":25,"value":331},"jpeg",{"type":19,"tag":65,"props":333,"children":334},{},[335],{"type":25,"value":336},"png",{"type":19,"tag":65,"props":338,"children":339},{},[340,342],{"type":25,"value":341},"icons\n",{"type":19,"tag":61,"props":343,"children":344},{},[345,350],{"type":19,"tag":65,"props":346,"children":347},{},[348],{"type":25,"value":349},"svg",{"type":19,"tag":65,"props":351,"children":352},{},[353],{"type":25,"value":336},{"type":19,"tag":65,"props":355,"children":356},{},[357,359],{"type":25,"value":358},"charts/graphs\n",{"type":19,"tag":61,"props":360,"children":361},{},[362,366],{"type":19,"tag":65,"props":363,"children":364},{},[365],{"type":25,"value":349},{"type":19,"tag":65,"props":367,"children":368},{},[369],{"type":25,"value":336},{"type":19,"tag":65,"props":371,"children":372},{},[373,375],{"type":25,"value":374},"video\n",{"type":19,"tag":61,"props":376,"children":377},{},[378],{"type":19,"tag":65,"props":379,"children":380},{},[381],{"type":25,"value":382},"mp4",{"type":19,"tag":65,"props":384,"children":385},{},[386,388],{"type":25,"value":387},"audio\n",{"type":19,"tag":61,"props":389,"children":390},{},[391],{"type":19,"tag":65,"props":392,"children":393},{},[394],{"type":25,"value":395},"wav.",{"type":19,"tag":54,"props":397,"children":399},{"id":398},"alternative-text",[400],{"type":25,"value":401},"Alternative text",{"type":19,"tag":28,"props":403,"children":404},{},[405,407,414,416,423],{"type":25,"value":406},"All images, except purely decorative images, need a text alternative (alt text). Without this, your page will not address ",{"type":19,"tag":189,"props":408,"children":411},{"href":409,"rel":410},"https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html",[193],[412],{"type":25,"value":413},"WCAG 2.0 Criterion 1.1.1",{"type":25,"value":415}," or conform with WCAG 2.0 or 2.1 AA standards. WCAG 2.0 AA standards are the minimum accessibility standards for all Victorian Government communications under the ",{"type":19,"tag":189,"props":417,"children":420},{"href":418,"rel":419},"https://www.vic.gov.au/brand-victoria-guidelines-logos",[193],[421],{"type":25,"value":422},"Brand Victoria guidelines",{"type":25,"value":424},".",{"type":19,"tag":28,"props":426,"children":427},{},[428,430,437],{"type":25,"value":429},"The ",{"type":19,"tag":189,"props":431,"children":434},{"href":432,"rel":433},"https://www.w3.org/WAI/tutorials/images/decision-tree/",[193],[435],{"type":25,"value":436},"Web Accessibility initiative alt decision tree",{"type":25,"value":438}," also guides you on whether your image needs alt text or not.",{"type":19,"tag":28,"props":440,"children":441},{},[442],{"type":25,"value":443},"For purely descriptive images, the alt text attribute instead reads: alt=””.",{"type":19,"tag":445,"props":446,"children":448},"h4",{"id":447},"what-alt-text-does",[449],{"type":25,"value":450},"What alt text does",{"type":19,"tag":28,"props":452,"children":453},{},[454],{"type":25,"value":455},"Alt text gives users who use screen readers (or devices that are not loading, or displaying, images) the information an image is meant to convey because:",{"type":19,"tag":61,"props":457,"children":458},{},[459,464],{"type":19,"tag":65,"props":460,"children":461},{},[462],{"type":25,"value":463},"a screen reader can read the alt text aloud",{"type":19,"tag":65,"props":465,"children":466},{},[467],{"type":25,"value":468},"alt text is shown in the place of ‘broken’ or unloaded images on the page.",{"type":19,"tag":445,"props":470,"children":472},{"id":471},"how-to-write-alt-text",[473],{"type":25,"value":474},"How to write alt text",{"type":19,"tag":28,"props":476,"children":477},{},[478],{"type":25,"value":479},"Alt text must serve the equivalent purpose of the image itself, by:",{"type":19,"tag":61,"props":481,"children":482},{},[483,488,493,498],{"type":19,"tag":65,"props":484,"children":485},{},[486],{"type":25,"value":487},"being short but specific (for example, ‘a Harry Potter novel’ rather than ‘a novel’)",{"type":19,"tag":65,"props":489,"children":490},{},[491],{"type":25,"value":492},"explaining the image’s function in the context of the page or content section (for example, ‘Search’ rather than ‘Magnifying glass’)",{"type":19,"tag":65,"props":494,"children":495},{},[496],{"type":25,"value":497},"using normal punctuation that helps users understand the text",{"type":19,"tag":65,"props":499,"children":500},{},[501],{"type":25,"value":502},"including the image text in the alt text (for images with text).",{"type":19,"tag":28,"props":504,"children":505},{},[506,508,515],{"type":25,"value":507},"For more guidance on writing alt text, refer to ",{"type":19,"tag":189,"props":509,"children":512},{"href":510,"rel":511},"https://www.stylemanual.gov.au/content-types/images/alt-text-captions-and-titles-images",[193],[513],{"type":25,"value":514},"Alt text, captions and titles for images",{"type":25,"value":516}," in the Australian Government Style Manual.",{"title":10,"searchDepth":518,"depth":518,"links":519},2,[520,525],{"id":22,"depth":518,"text":26,"children":521},[522,524],{"id":56,"depth":523,"text":59},3,{"id":102,"depth":523,"text":105},{"id":130,"depth":518,"text":133,"children":526},[527,528,529,530,531,532],{"id":174,"depth":523,"text":177},{"id":201,"depth":523,"text":204},{"id":222,"depth":523,"text":225},{"id":238,"depth":523,"text":241},{"id":302,"depth":523,"text":305},{"id":398,"depth":523,"text":401},"markdown","content:design-system:5.components:media.md","content","design-system/5.components/media.md","md",["ShallowRef",539],["ShallowReactive",540],{"/design-system/components/media":541},[542,548],{"_path":543,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":544,"description":545,"layout":13,"label":14,"_type":533,"_id":546,"_source":535,"_file":547,"_extension":537},"/design-system/components/media-gallery","Media gallery","The Media gallery component is a series of images users can side-scroll through.","content:design-system:5.components:media-gallery.md","design-system/5.components/media-gallery.md",{"_path":549,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":550,"description":551,"layout":13,"label":14,"_type":533,"_id":552,"_source":535,"_file":553,"_extension":537},"/design-system/components/option-button","Option button","The Option button component is a set of buttons to help users filter content.","content:design-system:5.components:option-button.md","design-system/5.components/option-button.md",["ShallowRef",555],{},[557,562,803],{"title":558,"_path":559,"icon":560,"layout":561},"Ripple Design System","/","carbon:home","home",{"title":563,"_path":564,"children":565},"Design System","/design-system",[566,582,598,627,661],{"title":567,"_path":568,"children":569},"About","/design-system/about",[570,573,576,579],{"title":571,"_path":572,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":574,"_path":575,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":577,"_path":578,"layout":13},"Support","/design-system/about/getting-support",{"title":580,"_path":581,"layout":13},"Contributing","/design-system/about/contributing",{"title":583,"_path":584,"children":585},"Design","/design-system/design",[586,589,592,595],{"title":587,"_path":588,"layout":13},"Getting started","/design-system/design/getting-started",{"title":590,"_path":591,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":593,"_path":594,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":596,"_path":597,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":599,"_path":600,"children":601},"Develop","/design-system/develop",[602,604,606,609],{"title":587,"_path":603,"layout":13},"/design-system/develop/getting-started",{"title":580,"_path":605,"layout":13},"/design-system/develop/contributing",{"title":607,"_path":608,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":610,"children":611,"layout":13},"/design-system/develop/usage",[612,615,618,621,624],{"title":613,"_path":614,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":616,"_path":617,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":619,"_path":620,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":622,"_path":623,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":625,"_path":626,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":628,"_path":629,"children":630},"Styles","/design-system/styles",[631,634,637,640,643,646,649,652,655,658],{"title":632,"_path":633,"layout":13},"Colour","/design-system/styles/colour",{"title":635,"_path":636,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":638,"_path":639,"layout":13},"Grid","/design-system/styles/grid",{"title":641,"_path":642,"layout":13},"Icons","/design-system/styles/icons",{"title":644,"_path":645,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":647,"_path":648,"layout":13},"Layout","/design-system/styles/layout",{"title":650,"_path":651,"layout":13},"Logo","/design-system/styles/logo",{"title":653,"_path":654,"layout":13},"Motion","/design-system/styles/motion",{"title":656,"_path":657,"layout":13},"Spacing","/design-system/styles/spacing",{"title":659,"_path":660,"layout":13},"Typography","/design-system/styles/typography",{"title":662,"_path":663,"children":664},"Components","/design-system/components",[665,668,671,674,677,680,683,686,689,692,695,698,701,704,707,710,713,716,719,722,725,728,731,734,737,740,743,744,747,750,751,752,755,758,761,764,767,770,773,776,779,782,785,788,791,794,797,800],{"title":666,"_path":667,"layout":13},"Accordion","/design-system/components/accordion",{"title":669,"_path":670,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":672,"_path":673,"layout":13},"Alert","/design-system/components/alert",{"title":675,"_path":676,"layout":13},"Block quote","/design-system/components/block-quote",{"title":678,"_path":679,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":681,"_path":682,"layout":13},"Button","/design-system/components/button",{"title":684,"_path":685,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":687,"_path":688,"layout":13},"Callout","/design-system/components/callout",{"title":690,"_path":691,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":693,"_path":694,"layout":13},"Card","/design-system/components/card",{"title":696,"_path":697,"layout":13},"Carousel","/design-system/components/carousel",{"title":699,"_path":700,"layout":13},"Category grid","/design-system/components/category-grid",{"title":702,"_path":703,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":705,"_path":706,"layout":13},"Chip","/design-system/components/chip",{"title":708,"_path":709,"layout":13},"Contact us","/design-system/components/contact-us",{"title":711,"_path":712,"layout":13},"Date input","/design-system/components/date-input",{"title":714,"_path":715,"layout":13},"Detail list","/design-system/components/detail-list",{"title":717,"_path":718,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":720,"_path":721,"layout":13},"File","/design-system/components/file",{"title":723,"_path":724,"layout":13},"Footer","/design-system/components/footer",{"title":726,"_path":727,"layout":13},"Form","/design-system/components/form",{"title":729,"_path":730,"layout":13},"Form alert","/design-system/components/form-alert",{"title":732,"_path":733,"layout":13},"Header","/design-system/components/header",{"title":735,"_path":736,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":738,"_path":739,"layout":13},"Input field","/design-system/components/input-field",{"title":741,"_path":742,"layout":13},"Key dates","/design-system/components/key-dates",{"title":11,"_path":7,"layout":13},{"title":745,"_path":746,"layout":13},"Media embed","/design-system/components/media-embed",{"title":748,"_path":749,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":544,"_path":543,"layout":13},{"title":550,"_path":549,"layout":13},{"title":753,"_path":754,"layout":13},"Page action","/design-system/components/page-action",{"title":756,"_path":757,"layout":13},"Pagination","/design-system/components/pagination",{"title":759,"_path":760,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":762,"_path":763,"layout":13},"Profile","/design-system/components/profile",{"title":765,"_path":766,"layout":13},"Radio button","/design-system/components/radio-button",{"title":768,"_path":769,"layout":13},"Related links","/design-system/components/related-links",{"title":771,"_path":772,"layout":13},"Results listing","/design-system/components/results-listing",{"title":774,"_path":775,"layout":13},"Search bar","/design-system/components/search-bar",{"title":777,"_path":778,"layout":13},"Skip link","/design-system/components/skip-link",{"title":780,"_path":781,"layout":13},"Social share","/design-system/components/social-share",{"title":783,"_path":784,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":786,"_path":787,"layout":13},"Table","/design-system/components/table",{"title":789,"_path":790,"layout":13},"Tabs","/design-system/components/tabs",{"title":792,"_path":793,"layout":13},"Tag","/design-system/components/tag",{"title":795,"_path":796,"layout":13},"Text area","/design-system/components/text-area",{"title":798,"_path":799,"layout":13},"Timeline","/design-system/components/timeline",{"title":801,"_path":802,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":804,"_path":805,"children":806,"layout":13},"Ripple Framework","/framework",[807,808,826,848],{"title":804,"_path":805,"layout":13},{"title":809,"_path":810,"children":811},"Key Concepts","/framework/key-concepts",[812,814,817,820,823],{"title":619,"_path":813,"layout":13},"/framework/key-concepts/nuxt",{"title":815,"_path":816,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":818,"_path":819,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":821,"_path":822,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":824,"_path":825,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":827,"_path":828,"children":829},"Guides","/framework/guides",[830,833,836,839,842,845],{"title":831,"_path":832,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":834,"_path":835,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":837,"_path":838,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":840,"_path":841,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":843,"_path":844,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":846,"_path":847,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":849,"_path":850,"layout":13},"Core modules","/framework/core-modules",["Reactive",852],["Set"],["Reactive",854],{"module-navigation":855},null,true,"/design-system/components/media/",1714695156902]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+<ul><!--[--><li><!--[-->wav.<!--]--></li><!--]--></ul><!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="alternative-text" data-v-ea525968><a href="#alternative-text" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Alternative text<!--]--></a></h2><p><!--[-->All images, except purely decorative images, need a text alternative (alt text). Without this, your page will not address <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->WCAG 2.0 Criterion 1.1.1<!--]--><!--]--><!----><!--]--></a> or conform with WCAG 2.0 or 2.1 AA standards. WCAG 2.0 AA standards are the minimum accessibility standards for all Victorian Government communications under the <a href="https://www.vic.gov.au/brand-victoria-guidelines-logos" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Brand Victoria guidelines<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><p><!--[-->The <a href="https://www.w3.org/WAI/tutorials/images/decision-tree/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Web Accessibility initiative alt decision tree<!--]--><!--]--><!----><!--]--></a> also guides you on whether your image needs alt text or not.<!--]--></p><p><!--[-->For purely descriptive images, the alt text attribute instead reads: alt=””.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="what-alt-text-does"><!--[-->What alt text does<!--]--></h4><p><!--[-->Alt text gives users who use screen readers (or devices that are not loading, or displaying, images) the information an image is meant to convey because:<!--]--></p><ul><!--[--><li><!--[-->a screen reader can read the alt text aloud<!--]--></li><li><!--[-->alt text is shown in the place of ‘broken’ or unloaded images on the page.<!--]--></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="how-to-write-alt-text"><!--[-->How to write alt text<!--]--></h4><p><!--[-->Alt text must serve the equivalent purpose of the image itself, by:<!--]--></p><ul><!--[--><li><!--[-->being short but specific (for example, ‘a Harry Potter novel’ rather than ‘a novel’)<!--]--></li><li><!--[-->explaining the image’s function in the context of the page or content section (for example, ‘Search’ rather than ‘Magnifying glass’)<!--]--></li><li><!--[-->using normal punctuation that helps users understand the text<!--]--></li><li><!--[-->including the image text in the alt text (for images with text).<!--]--></li><!--]--></ul><p><!--[-->For more guidance on writing alt text, refer to <a href="https://www.stylemanual.gov.au/content-types/images/alt-text-captions-and-titles-images" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Alt text, captions and titles for images<!--]--><!--]--><!----><!--]--></a> in the Australian Government Style Manual.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/media.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/media/_payload.json">[{"state":1,"once":851,"_errors":853,"serverRendered":856,"path":857,"prerenderedAt":858},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":538,"$sdd-globals":554,"$sdd-navigation":556},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/media":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":533,"_id":534,"_source":535,"_file":536,"_extension":537},"/design-system/components/media","components",false,"","Media","The Media component is a container that houses media items to use in other components on a page.","page","Core",{"type":16,"children":17,"toc":517},"root",[18,27,33,38,43,48,53,60,100,106,124,128,134,139,172,178,183,199,205,210,215,220,226,231,236,242,247,295,300,306,311,316,396,402,425,439,444,451,456,469,475,480,503],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use media to communicate and differentiate specific information through visuals.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Media items sit within other components such as cards, or a media gallery.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Use images if they help users complete a task. Images can make it easier for some people to understand information.",{"type":19,"tag":28,"props":44,"children":45},{},[46],{"type":25,"value":47},"Use media to combine visual elements with text. This gives your content context and alignment.",{"type":19,"tag":49,"props":50,"children":52},"docs-example",{"id":51},"core-containers-image--image",[],{"type":19,"tag":54,"props":55,"children":57},"h3",{"id":56},"when-and-how-to-use",[58],{"type":25,"value":59},"When and how to use",{"type":19,"tag":61,"props":62,"children":63},"ul",{},[64,70,75,80,85,90,95],{"type":19,"tag":65,"props":66,"children":67},"li",{},[68],{"type":25,"value":69},"Always get copyright for all media used.",{"type":19,"tag":65,"props":71,"children":72},{},[73],{"type":25,"value":74},"Nest media in other components.",{"type":19,"tag":65,"props":76,"children":77},{},[78],{"type":25,"value":79},"Choose diverse images that reflect and support the diversity of Victoria.",{"type":19,"tag":65,"props":81,"children":82},{},[83],{"type":25,"value":84},"Only media that's relevant to the content.",{"type":19,"tag":65,"props":86,"children":87},{},[88],{"type":25,"value":89},"Always include alt text for each media item.",{"type":19,"tag":65,"props":91,"children":92},{},[93],{"type":25,"value":94},"Use appropriate resolution for the content.",{"type":19,"tag":65,"props":96,"children":97},{},[98],{"type":25,"value":99},"Always include a transcription for all audio content.",{"type":19,"tag":54,"props":101,"children":103},{"id":102},"when-and-how-not-to-use",[104],{"type":25,"value":105},"When and how not to use",{"type":19,"tag":61,"props":107,"children":108},{},[109,114,119],{"type":19,"tag":65,"props":110,"children":111},{},[112],{"type":25,"value":113},"Don't use a media item without alt text.",{"type":19,"tag":65,"props":115,"children":116},{},[117],{"type":25,"value":118},"Don't use video content without captions.",{"type":19,"tag":65,"props":120,"children":121},{},[122],{"type":25,"value":123},"Don't crop an image without a clear focal point.",{"type":19,"tag":125,"props":126,"children":127},"hr",{},[],{"type":19,"tag":20,"props":129,"children":131},{"id":130},"variants",[132],{"type":25,"value":133},"Variants",{"type":19,"tag":28,"props":135,"children":136},{},[137],{"type":25,"value":138},"The ratios you can use for media include:",{"type":19,"tag":61,"props":140,"children":141},{},[142,147,152,157,162,167],{"type":19,"tag":65,"props":143,"children":144},{},[145],{"type":25,"value":146},"1:1",{"type":19,"tag":65,"props":148,"children":149},{},[150],{"type":25,"value":151},"4:3",{"type":19,"tag":65,"props":153,"children":154},{},[155],{"type":25,"value":156},"16:9",{"type":19,"tag":65,"props":158,"children":159},{},[160],{"type":25,"value":161},"21:9",{"type":19,"tag":65,"props":163,"children":164},{},[165],{"type":25,"value":166},"3:1",{"type":19,"tag":65,"props":168,"children":169},{},[170],{"type":25,"value":171},"avatar (circle).",{"type":19,"tag":54,"props":173,"children":175},{"id":174},"copyright-requirements",[176],{"type":25,"value":177},"Copyright requirements",{"type":19,"tag":28,"props":179,"children":180},{},[181],{"type":25,"value":182},"You must get permission (a licence) to use copyright material. This includes images and text.",{"type":19,"tag":28,"props":184,"children":185},{},[186,188,197],{"type":25,"value":187},"Some images are available under an open access licence, such as ",{"type":19,"tag":189,"props":190,"children":194},"a",{"href":191,"rel":192},"https://au.creativecommons.net/",[193],"nofollow",[195],{"type":25,"value":196},"Creative Commons",{"type":25,"value":198},". Alt text is also licensed under copyright.",{"type":19,"tag":54,"props":200,"children":202},{"id":201},"file-resolution",[203],{"type":25,"value":204},"File resolution",{"type":19,"tag":28,"props":206,"children":207},{},[208],{"type":25,"value":209},"Image resolution must be appropriate for the content.",{"type":19,"tag":28,"props":211,"children":212},{},[213],{"type":25,"value":214},"Don’t embed images with a large file size into content that you will publish online, such as PDFs or webpages. Optimise and compress all image files so they make it quicker for the user to access the information.",{"type":19,"tag":28,"props":216,"children":217},{},[218],{"type":25,"value":219},"Design for mobile devices first. An image will scale to the device people view it on. Check that it’s easy to read on a mobile phone screen and a desktop before you publish it.",{"type":19,"tag":54,"props":221,"children":223},{"id":222},"focal-point",[224],{"type":25,"value":225},"Focal point",{"type":19,"tag":28,"props":227,"children":228},{},[229],{"type":25,"value":230},"Always ensure that images work on all screen sizes. Select the focal point of the image to best position images in any area.",{"type":19,"tag":28,"props":232,"children":233},{},[234],{"type":25,"value":235},"Consider cropping smaller images more to keep the impact of the original image.",{"type":19,"tag":54,"props":237,"children":239},{"id":238},"media-types",[240],{"type":25,"value":241},"Media types",{"type":19,"tag":28,"props":243,"children":244},{},[245],{"type":25,"value":246},"Multiple types of media can are supported and used to add meaning to content. These include:",{"type":19,"tag":61,"props":248,"children":249},{},[250,255,260,265,270,275,280,285,290],{"type":19,"tag":65,"props":251,"children":252},{},[253],{"type":25,"value":254},"photographs",{"type":19,"tag":65,"props":256,"children":257},{},[258],{"type":25,"value":259},"decorative images",{"type":19,"tag":65,"props":261,"children":262},{},[263],{"type":25,"value":264},"charts",{"type":19,"tag":65,"props":266,"children":267},{},[268],{"type":25,"value":269},"graphs",{"type":19,"tag":65,"props":271,"children":272},{},[273],{"type":25,"value":274},"maps",{"type":19,"tag":65,"props":276,"children":277},{},[278],{"type":25,"value":279},"illustrations or drawings",{"type":19,"tag":65,"props":281,"children":282},{},[283],{"type":25,"value":284},"icons",{"type":19,"tag":65,"props":286,"children":287},{},[288],{"type":25,"value":289},"video",{"type":19,"tag":65,"props":291,"children":292},{},[293],{"type":25,"value":294},"audio.",{"type":19,"tag":28,"props":296,"children":297},{},[298],{"type":25,"value":299},"Make sure you use the correct media type for the content it is supporting.",{"type":19,"tag":54,"props":301,"children":303},{"id":302},"file-types",[304],{"type":25,"value":305},"File types",{"type":19,"tag":28,"props":307,"children":308},{},[309],{"type":25,"value":310},"There are many image file types. Seek specialist advice to optimise an image file as a vector or raster file format.",{"type":19,"tag":28,"props":312,"children":313},{},[314],{"type":25,"value":315},"The following file types are recommended:",{"type":19,"tag":61,"props":317,"children":318},{},[319,337,354,370,383],{"type":19,"tag":65,"props":320,"children":321},{},[322,324],{"type":25,"value":323},"photographs\n",{"type":19,"tag":61,"props":325,"children":326},{},[327,332],{"type":19,"tag":65,"props":328,"children":329},{},[330],{"type":25,"value":331},"jpeg",{"type":19,"tag":65,"props":333,"children":334},{},[335],{"type":25,"value":336},"png",{"type":19,"tag":65,"props":338,"children":339},{},[340,342],{"type":25,"value":341},"icons\n",{"type":19,"tag":61,"props":343,"children":344},{},[345,350],{"type":19,"tag":65,"props":346,"children":347},{},[348],{"type":25,"value":349},"svg",{"type":19,"tag":65,"props":351,"children":352},{},[353],{"type":25,"value":336},{"type":19,"tag":65,"props":355,"children":356},{},[357,359],{"type":25,"value":358},"charts/graphs\n",{"type":19,"tag":61,"props":360,"children":361},{},[362,366],{"type":19,"tag":65,"props":363,"children":364},{},[365],{"type":25,"value":349},{"type":19,"tag":65,"props":367,"children":368},{},[369],{"type":25,"value":336},{"type":19,"tag":65,"props":371,"children":372},{},[373,375],{"type":25,"value":374},"video\n",{"type":19,"tag":61,"props":376,"children":377},{},[378],{"type":19,"tag":65,"props":379,"children":380},{},[381],{"type":25,"value":382},"mp4",{"type":19,"tag":65,"props":384,"children":385},{},[386,388],{"type":25,"value":387},"audio\n",{"type":19,"tag":61,"props":389,"children":390},{},[391],{"type":19,"tag":65,"props":392,"children":393},{},[394],{"type":25,"value":395},"wav.",{"type":19,"tag":54,"props":397,"children":399},{"id":398},"alternative-text",[400],{"type":25,"value":401},"Alternative text",{"type":19,"tag":28,"props":403,"children":404},{},[405,407,414,416,423],{"type":25,"value":406},"All images, except purely decorative images, need a text alternative (alt text). Without this, your page will not address ",{"type":19,"tag":189,"props":408,"children":411},{"href":409,"rel":410},"https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html",[193],[412],{"type":25,"value":413},"WCAG 2.0 Criterion 1.1.1",{"type":25,"value":415}," or conform with WCAG 2.0 or 2.1 AA standards. WCAG 2.0 AA standards are the minimum accessibility standards for all Victorian Government communications under the ",{"type":19,"tag":189,"props":417,"children":420},{"href":418,"rel":419},"https://www.vic.gov.au/brand-victoria-guidelines-logos",[193],[421],{"type":25,"value":422},"Brand Victoria guidelines",{"type":25,"value":424},".",{"type":19,"tag":28,"props":426,"children":427},{},[428,430,437],{"type":25,"value":429},"The ",{"type":19,"tag":189,"props":431,"children":434},{"href":432,"rel":433},"https://www.w3.org/WAI/tutorials/images/decision-tree/",[193],[435],{"type":25,"value":436},"Web Accessibility initiative alt decision tree",{"type":25,"value":438}," also guides you on whether your image needs alt text or not.",{"type":19,"tag":28,"props":440,"children":441},{},[442],{"type":25,"value":443},"For purely descriptive images, the alt text attribute instead reads: alt=””.",{"type":19,"tag":445,"props":446,"children":448},"h4",{"id":447},"what-alt-text-does",[449],{"type":25,"value":450},"What alt text does",{"type":19,"tag":28,"props":452,"children":453},{},[454],{"type":25,"value":455},"Alt text gives users who use screen readers (or devices that are not loading, or displaying, images) the information an image is meant to convey because:",{"type":19,"tag":61,"props":457,"children":458},{},[459,464],{"type":19,"tag":65,"props":460,"children":461},{},[462],{"type":25,"value":463},"a screen reader can read the alt text aloud",{"type":19,"tag":65,"props":465,"children":466},{},[467],{"type":25,"value":468},"alt text is shown in the place of ‘broken’ or unloaded images on the page.",{"type":19,"tag":445,"props":470,"children":472},{"id":471},"how-to-write-alt-text",[473],{"type":25,"value":474},"How to write alt text",{"type":19,"tag":28,"props":476,"children":477},{},[478],{"type":25,"value":479},"Alt text must serve the equivalent purpose of the image itself, by:",{"type":19,"tag":61,"props":481,"children":482},{},[483,488,493,498],{"type":19,"tag":65,"props":484,"children":485},{},[486],{"type":25,"value":487},"being short but specific (for example, ‘a Harry Potter novel’ rather than ‘a novel’)",{"type":19,"tag":65,"props":489,"children":490},{},[491],{"type":25,"value":492},"explaining the image’s function in the context of the page or content section (for example, ‘Search’ rather than ‘Magnifying glass’)",{"type":19,"tag":65,"props":494,"children":495},{},[496],{"type":25,"value":497},"using normal punctuation that helps users understand the text",{"type":19,"tag":65,"props":499,"children":500},{},[501],{"type":25,"value":502},"including the image text in the alt text (for images with text).",{"type":19,"tag":28,"props":504,"children":505},{},[506,508,515],{"type":25,"value":507},"For more guidance on writing alt text, refer to ",{"type":19,"tag":189,"props":509,"children":512},{"href":510,"rel":511},"https://www.stylemanual.gov.au/content-types/images/alt-text-captions-and-titles-images",[193],[513],{"type":25,"value":514},"Alt text, captions and titles for images",{"type":25,"value":516}," in the Australian Government Style Manual.",{"title":10,"searchDepth":518,"depth":518,"links":519},2,[520,525],{"id":22,"depth":518,"text":26,"children":521},[522,524],{"id":56,"depth":523,"text":59},3,{"id":102,"depth":523,"text":105},{"id":130,"depth":518,"text":133,"children":526},[527,528,529,530,531,532],{"id":174,"depth":523,"text":177},{"id":201,"depth":523,"text":204},{"id":222,"depth":523,"text":225},{"id":238,"depth":523,"text":241},{"id":302,"depth":523,"text":305},{"id":398,"depth":523,"text":401},"markdown","content:design-system:5.components:media.md","content","design-system/5.components/media.md","md",["ShallowRef",539],["ShallowReactive",540],{"/design-system/components/media":541},[542,548],{"_path":543,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":544,"description":545,"layout":13,"label":14,"_type":533,"_id":546,"_source":535,"_file":547,"_extension":537},"/design-system/components/media-gallery","Media gallery","The Media gallery component is a series of images users can side-scroll through.","content:design-system:5.components:media-gallery.md","design-system/5.components/media-gallery.md",{"_path":549,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":550,"description":551,"layout":13,"label":14,"_type":533,"_id":552,"_source":535,"_file":553,"_extension":537},"/design-system/components/option-button","Option button","The Option button component is a set of buttons to help users filter content.","content:design-system:5.components:option-button.md","design-system/5.components/option-button.md",["ShallowRef",555],{},[557,562,803],{"title":558,"_path":559,"icon":560,"layout":561},"Ripple Design System","/","carbon:home","home",{"title":563,"_path":564,"children":565},"Design System","/design-system",[566,582,598,627,661],{"title":567,"_path":568,"children":569},"About","/design-system/about",[570,573,576,579],{"title":571,"_path":572,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":574,"_path":575,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":577,"_path":578,"layout":13},"Support","/design-system/about/getting-support",{"title":580,"_path":581,"layout":13},"Contributing","/design-system/about/contributing",{"title":583,"_path":584,"children":585},"Design","/design-system/design",[586,589,592,595],{"title":587,"_path":588,"layout":13},"Getting started","/design-system/design/getting-started",{"title":590,"_path":591,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":593,"_path":594,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":596,"_path":597,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":599,"_path":600,"children":601},"Develop","/design-system/develop",[602,604,606,609],{"title":587,"_path":603,"layout":13},"/design-system/develop/getting-started",{"title":580,"_path":605,"layout":13},"/design-system/develop/contributing",{"title":607,"_path":608,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":610,"children":611,"layout":13},"/design-system/develop/usage",[612,615,618,621,624],{"title":613,"_path":614,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":616,"_path":617,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":619,"_path":620,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":622,"_path":623,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":625,"_path":626,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":628,"_path":629,"children":630},"Styles","/design-system/styles",[631,634,637,640,643,646,649,652,655,658],{"title":632,"_path":633,"layout":13},"Colour","/design-system/styles/colour",{"title":635,"_path":636,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":638,"_path":639,"layout":13},"Grid","/design-system/styles/grid",{"title":641,"_path":642,"layout":13},"Icons","/design-system/styles/icons",{"title":644,"_path":645,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":647,"_path":648,"layout":13},"Layout","/design-system/styles/layout",{"title":650,"_path":651,"layout":13},"Logo","/design-system/styles/logo",{"title":653,"_path":654,"layout":13},"Motion","/design-system/styles/motion",{"title":656,"_path":657,"layout":13},"Spacing","/design-system/styles/spacing",{"title":659,"_path":660,"layout":13},"Typography","/design-system/styles/typography",{"title":662,"_path":663,"children":664},"Components","/design-system/components",[665,668,671,674,677,680,683,686,689,692,695,698,701,704,707,710,713,716,719,722,725,728,731,734,737,740,743,744,747,750,751,752,755,758,761,764,767,770,773,776,779,782,785,788,791,794,797,800],{"title":666,"_path":667,"layout":13},"Accordion","/design-system/components/accordion",{"title":669,"_path":670,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":672,"_path":673,"layout":13},"Alert","/design-system/components/alert",{"title":675,"_path":676,"layout":13},"Block quote","/design-system/components/block-quote",{"title":678,"_path":679,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":681,"_path":682,"layout":13},"Button","/design-system/components/button",{"title":684,"_path":685,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":687,"_path":688,"layout":13},"Callout","/design-system/components/callout",{"title":690,"_path":691,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":693,"_path":694,"layout":13},"Card","/design-system/components/card",{"title":696,"_path":697,"layout":13},"Carousel","/design-system/components/carousel",{"title":699,"_path":700,"layout":13},"Category grid","/design-system/components/category-grid",{"title":702,"_path":703,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":705,"_path":706,"layout":13},"Chip","/design-system/components/chip",{"title":708,"_path":709,"layout":13},"Contact us","/design-system/components/contact-us",{"title":711,"_path":712,"layout":13},"Date input","/design-system/components/date-input",{"title":714,"_path":715,"layout":13},"Detail list","/design-system/components/detail-list",{"title":717,"_path":718,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":720,"_path":721,"layout":13},"File","/design-system/components/file",{"title":723,"_path":724,"layout":13},"Footer","/design-system/components/footer",{"title":726,"_path":727,"layout":13},"Form","/design-system/components/form",{"title":729,"_path":730,"layout":13},"Form alert","/design-system/components/form-alert",{"title":732,"_path":733,"layout":13},"Header","/design-system/components/header",{"title":735,"_path":736,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":738,"_path":739,"layout":13},"Input field","/design-system/components/input-field",{"title":741,"_path":742,"layout":13},"Key dates","/design-system/components/key-dates",{"title":11,"_path":7,"layout":13},{"title":745,"_path":746,"layout":13},"Media embed","/design-system/components/media-embed",{"title":748,"_path":749,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":544,"_path":543,"layout":13},{"title":550,"_path":549,"layout":13},{"title":753,"_path":754,"layout":13},"Page action","/design-system/components/page-action",{"title":756,"_path":757,"layout":13},"Pagination","/design-system/components/pagination",{"title":759,"_path":760,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":762,"_path":763,"layout":13},"Profile","/design-system/components/profile",{"title":765,"_path":766,"layout":13},"Radio button","/design-system/components/radio-button",{"title":768,"_path":769,"layout":13},"Related links","/design-system/components/related-links",{"title":771,"_path":772,"layout":13},"Results listing","/design-system/components/results-listing",{"title":774,"_path":775,"layout":13},"Search bar","/design-system/components/search-bar",{"title":777,"_path":778,"layout":13},"Skip link","/design-system/components/skip-link",{"title":780,"_path":781,"layout":13},"Social share","/design-system/components/social-share",{"title":783,"_path":784,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":786,"_path":787,"layout":13},"Table","/design-system/components/table",{"title":789,"_path":790,"layout":13},"Tabs","/design-system/components/tabs",{"title":792,"_path":793,"layout":13},"Tag","/design-system/components/tag",{"title":795,"_path":796,"layout":13},"Text area","/design-system/components/text-area",{"title":798,"_path":799,"layout":13},"Timeline","/design-system/components/timeline",{"title":801,"_path":802,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":804,"_path":805,"children":806,"layout":13},"Ripple Framework","/framework",[807,808,826,848],{"title":804,"_path":805,"layout":13},{"title":809,"_path":810,"children":811},"Key Concepts","/framework/key-concepts",[812,814,817,820,823],{"title":619,"_path":813,"layout":13},"/framework/key-concepts/nuxt",{"title":815,"_path":816,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":818,"_path":819,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":821,"_path":822,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":824,"_path":825,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":827,"_path":828,"children":829},"Guides","/framework/guides",[830,833,836,839,842,845],{"title":831,"_path":832,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":834,"_path":835,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":837,"_path":838,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":840,"_path":841,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":843,"_path":844,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":846,"_path":847,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":849,"_path":850,"layout":13},"Core modules","/framework/core-modules",["Reactive",852],["Set"],["Reactive",854],{"module-navigation":855},null,true,"/design-system/components/media/",1714695654961]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/option-button/_payload.json b/design-system/components/option-button/_payload.json
index 0f868cc2e9..4963ae5674 100644
--- a/design-system/components/option-button/_payload.json
+++ b/design-system/components/option-button/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":104,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695154309]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":104,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695652411]
\ No newline at end of file
diff --git a/design-system/components/option-button/index.html b/design-system/components/option-button/index.html
index 07154f776b..809a4a8e82 100644
--- a/design-system/components/option-button/index.html
+++ b/design-system/components/option-button/index.html
@@ -28,63 +28,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -96,8 +96,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Option button</h1><p class="rpl-type-p-large" data-v-3163c6df>The Option button component is a set of buttons to help users filter content.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use option buttons to show a set of options a user can choose from to filter content or results.<!--]--></p><p><!--[-->The option button component contains labels showing a user how the filter will work.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-option-buttons--squares&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-option-buttons--squares&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="how-this-component-works" data-v-ea525968><a href="#how-this-component-works" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->How this component works<!--]--></a></h2><p><!--[-->You must use a form label with option buttons. The form label explains what happens when a user chooses an option. For example, ‘Filter by starting letter’.<!--]--></p><p><!--[-->Always use descriptive labels for individual option buttons. Labels should help users choose, and say the category of content or results each option will show. This makes the content accessible, as screen readers will read out each label.<!--]--></p><p><!--[-->Never preselect an option button on default. Users might miss that a filter has been automatically applied.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Help users filter content or results.<!--]--></li><li><!--[-->Use short labels only.<!--]--></li><li><!--[-->Order labels in alphabetical order to help users scan quickly.<!--]--></li><li><!--[-->Add an ‘apply filter’ button if the option button will be used together with other form elements.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t use for a call to action.<!--]--></li><li><!--[-->Don’t use with long content.<!--]--></li><li><!--[-->Never use without a form label.<!--]--></li><li><!--[-->Never preselect an individual option button.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->Option buttons have 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->custom.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><p><!--[-->Default uses the alphabet as a filter in the option buttons.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-option-buttons--squares&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-option-buttons--squares&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="custom" data-v-ea525968><a href="#custom" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Custom<!--]--></a></h2><p><!--[-->The custom variant lets you create your own button labels as a filter.<!--]--></p><p><!--[-->These labels must clearly tell the user what filter will be applied.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-option-buttons--fluid-widths&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-option-buttons--fluid-widths&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Option buttons use colour to show interactive states. An option button in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that option button remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-option-buttons--squares&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-option-buttons--squares&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="rationale" data-v-fff5b905><a href="#rationale" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/option-button.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/option-button/_payload.json">[{"state":1,"once":579,"_errors":581,"serverRendered":584,"path":7,"prerenderedAt":585},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":268,"$sdd-globals":284,"$sdd-navigation":286},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/option-button":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":263,"_id":264,"_source":265,"_file":266,"_extension":267},"/design-system/components/option-button","components",false,"","Option button","The Option button component is a set of buttons to help users filter content.","page","Core",{"type":16,"children":17,"toc":248},"root",[18,27,33,38,43,50,55,60,65,71,96,102,125,129,135,140,153,158,163,166,172,177,182,186,189,195,200,207,229,232,238,243],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use option buttons to show a set of options a user can choose from to filter content or results.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"The option button component contains labels showing a user how the filter will work.",{"type":19,"tag":39,"props":40,"children":42},"docs-example",{"id":41},"forms-option-buttons--squares",[],{"type":19,"tag":44,"props":45,"children":47},"h3",{"id":46},"how-this-component-works",[48],{"type":25,"value":49},"How this component works",{"type":19,"tag":28,"props":51,"children":52},{},[53],{"type":25,"value":54},"You must use a form label with option buttons. The form label explains what happens when a user chooses an option. For example, ‘Filter by starting letter’.",{"type":19,"tag":28,"props":56,"children":57},{},[58],{"type":25,"value":59},"Always use descriptive labels for individual option buttons. Labels should help users choose, and say the category of content or results each option will show. This makes the content accessible, as screen readers will read out each label.",{"type":19,"tag":28,"props":61,"children":62},{},[63],{"type":25,"value":64},"Never preselect an option button on default. Users might miss that a filter has been automatically applied.",{"type":19,"tag":44,"props":66,"children":68},{"id":67},"when-and-how-to-use",[69],{"type":25,"value":70},"When and how to use",{"type":19,"tag":72,"props":73,"children":74},"ul",{},[75,81,86,91],{"type":19,"tag":76,"props":77,"children":78},"li",{},[79],{"type":25,"value":80},"Help users filter content or results.",{"type":19,"tag":76,"props":82,"children":83},{},[84],{"type":25,"value":85},"Use short labels only.",{"type":19,"tag":76,"props":87,"children":88},{},[89],{"type":25,"value":90},"Order labels in alphabetical order to help users scan quickly.",{"type":19,"tag":76,"props":92,"children":93},{},[94],{"type":25,"value":95},"Add an ‘apply filter’ button if the option button will be used together with other form elements.",{"type":19,"tag":44,"props":97,"children":99},{"id":98},"when-and-how-not-to-use",[100],{"type":25,"value":101},"When and how not to use",{"type":19,"tag":72,"props":103,"children":104},{},[105,110,115,120],{"type":19,"tag":76,"props":106,"children":107},{},[108],{"type":25,"value":109},"Don’t use for a call to action.",{"type":19,"tag":76,"props":111,"children":112},{},[113],{"type":25,"value":114},"Don’t use with long content.",{"type":19,"tag":76,"props":116,"children":117},{},[118],{"type":25,"value":119},"Never use without a form label.",{"type":19,"tag":76,"props":121,"children":122},{},[123],{"type":25,"value":124},"Never preselect an individual option button.",{"type":19,"tag":126,"props":127,"children":128},"hr",{},[],{"type":19,"tag":20,"props":130,"children":132},{"id":131},"variants",[133],{"type":25,"value":134},"Variants",{"type":19,"tag":28,"props":136,"children":137},{},[138],{"type":25,"value":139},"Option buttons have 2 variants:",{"type":19,"tag":72,"props":141,"children":142},{},[143,148],{"type":19,"tag":76,"props":144,"children":145},{},[146],{"type":25,"value":147},"default",{"type":19,"tag":76,"props":149,"children":150},{},[151],{"type":25,"value":152},"custom.",{"type":19,"tag":44,"props":154,"children":155},{"id":147},[156],{"type":25,"value":157},"Default",{"type":19,"tag":28,"props":159,"children":160},{},[161],{"type":25,"value":162},"Default uses the alphabet as a filter in the option buttons.",{"type":19,"tag":39,"props":164,"children":165},{"id":41},[],{"type":19,"tag":44,"props":167,"children":169},{"id":168},"custom",[170],{"type":25,"value":171},"Custom",{"type":19,"tag":28,"props":173,"children":174},{},[175],{"type":25,"value":176},"The custom variant lets you create your own button labels as a filter.",{"type":19,"tag":28,"props":178,"children":179},{},[180],{"type":25,"value":181},"These labels must clearly tell the user what filter will be applied.",{"type":19,"tag":39,"props":183,"children":185},{"id":184},"forms-option-buttons--fluid-widths",[],{"type":19,"tag":126,"props":187,"children":188},{},[],{"type":19,"tag":20,"props":190,"children":192},{"id":191},"theming",[193],{"type":25,"value":194},"Theming",{"type":19,"tag":28,"props":196,"children":197},{},[198],{"type":25,"value":199},"Option buttons use colour to show interactive states. An option button in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that option button remains consistent while it transitions from a focus to an active state.",{"type":19,"tag":201,"props":202,"children":203},"docs-theme-chooser",{},[204],{"type":19,"tag":39,"props":205,"children":206},{"id":41},[],{"type":19,"tag":28,"props":208,"children":209},{},[210,212,219,221,227],{"type":25,"value":211},"To create your own theme see ",{"type":19,"tag":213,"props":214,"children":216},"a",{"href":215},"/design-system/design/theming-guidance-for-designers",[217],{"type":25,"value":218},"theming guidance for designers",{"type":25,"value":220}," or ",{"type":19,"tag":213,"props":222,"children":224},{"href":223},"/design-system/develop/theming",[225],{"type":25,"value":226},"theming guidance for developers",{"type":25,"value":228},".",{"type":19,"tag":126,"props":230,"children":231},{},[],{"type":19,"tag":20,"props":233,"children":235},{"id":234},"rationale",[236],{"type":25,"value":237},"Rationale",{"type":19,"tag":28,"props":239,"children":240},{},[241],{"type":25,"value":242},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":19,"tag":28,"props":244,"children":245},{},[246],{"type":25,"value":247},"This occurs across all form and input elements, for a consistent experience.",{"title":10,"searchDepth":249,"depth":249,"links":250},2,[251,257,261,262],{"id":22,"depth":249,"text":26,"children":252},[253,255,256],{"id":46,"depth":254,"text":49},3,{"id":67,"depth":254,"text":70},{"id":98,"depth":254,"text":101},{"id":131,"depth":249,"text":134,"children":258},[259,260],{"id":147,"depth":254,"text":157},{"id":168,"depth":254,"text":171},{"id":191,"depth":249,"text":194},{"id":234,"depth":249,"text":237},"markdown","content:design-system:5.components:option-button.md","content","design-system/5.components/option-button.md","md",["ShallowRef",269],["ShallowReactive",270],{"/design-system/components/option-button":271},[272,278],{"_path":273,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":274,"description":275,"layout":13,"label":14,"_type":263,"_id":276,"_source":265,"_file":277,"_extension":267},"/design-system/components/media","Media","The Media component is a container that houses media items to use in other components on a page.","content:design-system:5.components:media.md","design-system/5.components/media.md",{"_path":279,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":280,"description":281,"layout":13,"label":14,"_type":263,"_id":282,"_source":265,"_file":283,"_extension":267},"/design-system/components/page-action","Page action","The Page action component presents a collection of links that offer users a choice of actions, such as printing or downloading a document.","content:design-system:5.components:page-action.md","design-system/5.components/page-action.md",["ShallowRef",285],{},[287,292,531],{"title":288,"_path":289,"icon":290,"layout":291},"Ripple Design System","/","carbon:home","home",{"title":293,"_path":294,"children":295},"Design System","/design-system",[296,312,327,355,389],{"title":297,"_path":298,"children":299},"About","/design-system/about",[300,303,306,309],{"title":301,"_path":302,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":304,"_path":305,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":307,"_path":308,"layout":13},"Support","/design-system/about/getting-support",{"title":310,"_path":311,"layout":13},"Contributing","/design-system/about/contributing",{"title":313,"_path":314,"children":315},"Design","/design-system/design",[316,319,322,325],{"title":317,"_path":318,"layout":13},"Getting started","/design-system/design/getting-started",{"title":320,"_path":321,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":323,"_path":324,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":326,"_path":215,"layout":13},"Theming guidance for designers",{"title":328,"_path":329,"children":330},"Develop","/design-system/develop",[331,333,335,337],{"title":317,"_path":332,"layout":13},"/design-system/develop/getting-started",{"title":310,"_path":334,"layout":13},"/design-system/develop/contributing",{"title":336,"_path":223,"layout":13},"Theme and brand application",{"title":26,"_path":338,"children":339,"layout":13},"/design-system/develop/usage",[340,343,346,349,352],{"title":341,"_path":342,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":344,"_path":345,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":347,"_path":348,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":350,"_path":351,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":353,"_path":354,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":356,"_path":357,"children":358},"Styles","/design-system/styles",[359,362,365,368,371,374,377,380,383,386],{"title":360,"_path":361,"layout":13},"Colour","/design-system/styles/colour",{"title":363,"_path":364,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":366,"_path":367,"layout":13},"Grid","/design-system/styles/grid",{"title":369,"_path":370,"layout":13},"Icons","/design-system/styles/icons",{"title":372,"_path":373,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":375,"_path":376,"layout":13},"Layout","/design-system/styles/layout",{"title":378,"_path":379,"layout":13},"Logo","/design-system/styles/logo",{"title":381,"_path":382,"layout":13},"Motion","/design-system/styles/motion",{"title":384,"_path":385,"layout":13},"Spacing","/design-system/styles/spacing",{"title":387,"_path":388,"layout":13},"Typography","/design-system/styles/typography",{"title":390,"_path":391,"children":392},"Components","/design-system/components",[393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,472,475,478,481,482,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528],{"title":394,"_path":395,"layout":13},"Accordion","/design-system/components/accordion",{"title":397,"_path":398,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":400,"_path":401,"layout":13},"Alert","/design-system/components/alert",{"title":403,"_path":404,"layout":13},"Block quote","/design-system/components/block-quote",{"title":406,"_path":407,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":409,"_path":410,"layout":13},"Button","/design-system/components/button",{"title":412,"_path":413,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":415,"_path":416,"layout":13},"Callout","/design-system/components/callout",{"title":418,"_path":419,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":421,"_path":422,"layout":13},"Card","/design-system/components/card",{"title":424,"_path":425,"layout":13},"Carousel","/design-system/components/carousel",{"title":427,"_path":428,"layout":13},"Category grid","/design-system/components/category-grid",{"title":430,"_path":431,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":433,"_path":434,"layout":13},"Chip","/design-system/components/chip",{"title":436,"_path":437,"layout":13},"Contact us","/design-system/components/contact-us",{"title":439,"_path":440,"layout":13},"Date input","/design-system/components/date-input",{"title":442,"_path":443,"layout":13},"Detail list","/design-system/components/detail-list",{"title":445,"_path":446,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":448,"_path":449,"layout":13},"File","/design-system/components/file",{"title":451,"_path":452,"layout":13},"Footer","/design-system/components/footer",{"title":454,"_path":455,"layout":13},"Form","/design-system/components/form",{"title":457,"_path":458,"layout":13},"Form alert","/design-system/components/form-alert",{"title":460,"_path":461,"layout":13},"Header","/design-system/components/header",{"title":463,"_path":464,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":466,"_path":467,"layout":13},"Input field","/design-system/components/input-field",{"title":469,"_path":470,"layout":13},"Key dates","/design-system/components/key-dates",{"title":274,"_path":273,"layout":13},{"title":473,"_path":474,"layout":13},"Media embed","/design-system/components/media-embed",{"title":476,"_path":477,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":479,"_path":480,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":11,"_path":7,"layout":13},{"title":280,"_path":279,"layout":13},{"title":484,"_path":485,"layout":13},"Pagination","/design-system/components/pagination",{"title":487,"_path":488,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":490,"_path":491,"layout":13},"Profile","/design-system/components/profile",{"title":493,"_path":494,"layout":13},"Radio button","/design-system/components/radio-button",{"title":496,"_path":497,"layout":13},"Related links","/design-system/components/related-links",{"title":499,"_path":500,"layout":13},"Results listing","/design-system/components/results-listing",{"title":502,"_path":503,"layout":13},"Search bar","/design-system/components/search-bar",{"title":505,"_path":506,"layout":13},"Skip link","/design-system/components/skip-link",{"title":508,"_path":509,"layout":13},"Social share","/design-system/components/social-share",{"title":511,"_path":512,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":514,"_path":515,"layout":13},"Table","/design-system/components/table",{"title":517,"_path":518,"layout":13},"Tabs","/design-system/components/tabs",{"title":520,"_path":521,"layout":13},"Tag","/design-system/components/tag",{"title":523,"_path":524,"layout":13},"Text area","/design-system/components/text-area",{"title":526,"_path":527,"layout":13},"Timeline","/design-system/components/timeline",{"title":529,"_path":530,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":532,"_path":533,"children":534,"layout":13},"Ripple Framework","/framework",[535,536,554,576],{"title":532,"_path":533,"layout":13},{"title":537,"_path":538,"children":539},"Key Concepts","/framework/key-concepts",[540,542,545,548,551],{"title":347,"_path":541,"layout":13},"/framework/key-concepts/nuxt",{"title":543,"_path":544,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":546,"_path":547,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":549,"_path":550,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":552,"_path":553,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":555,"_path":556,"children":557},"Guides","/framework/guides",[558,561,564,567,570,573],{"title":559,"_path":560,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":562,"_path":563,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":565,"_path":566,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":568,"_path":569,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":571,"_path":572,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":574,"_path":575,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":577,"_path":578,"layout":13},"Core modules","/framework/core-modules",["Reactive",580],["Set"],["Reactive",582],{"module-navigation":583},null,true,1714695154309]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Option button</h1><p class="rpl-type-p-large" data-v-3163c6df>The Option button component is a set of buttons to help users filter content.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use option buttons to show a set of options a user can choose from to filter content or results.<!--]--></p><p><!--[-->The option button component contains labels showing a user how the filter will work.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-option-buttons--squares&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-option-buttons--squares&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="how-this-component-works" data-v-ea525968><a href="#how-this-component-works" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->How this component works<!--]--></a></h2><p><!--[-->You must use a form label with option buttons. The form label explains what happens when a user chooses an option. For example, ‘Filter by starting letter’.<!--]--></p><p><!--[-->Always use descriptive labels for individual option buttons. Labels should help users choose, and say the category of content or results each option will show. This makes the content accessible, as screen readers will read out each label.<!--]--></p><p><!--[-->Never preselect an option button on default. Users might miss that a filter has been automatically applied.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Help users filter content or results.<!--]--></li><li><!--[-->Use short labels only.<!--]--></li><li><!--[-->Order labels in alphabetical order to help users scan quickly.<!--]--></li><li><!--[-->Add an ‘apply filter’ button if the option button will be used together with other form elements.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t use for a call to action.<!--]--></li><li><!--[-->Don’t use with long content.<!--]--></li><li><!--[-->Never use without a form label.<!--]--></li><li><!--[-->Never preselect an individual option button.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->Option buttons have 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->custom.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><p><!--[-->Default uses the alphabet as a filter in the option buttons.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-option-buttons--squares&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-option-buttons--squares&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="custom" data-v-ea525968><a href="#custom" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Custom<!--]--></a></h2><p><!--[-->The custom variant lets you create your own button labels as a filter.<!--]--></p><p><!--[-->These labels must clearly tell the user what filter will be applied.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-option-buttons--fluid-widths&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-option-buttons--fluid-widths&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Option buttons use colour to show interactive states. An option button in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that option button remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-option-buttons--squares&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-option-buttons--squares&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="rationale" data-v-fff5b905><a href="#rationale" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/option-button.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/option-button/_payload.json">[{"state":1,"once":579,"_errors":581,"serverRendered":584,"path":7,"prerenderedAt":585},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":268,"$sdd-globals":284,"$sdd-navigation":286},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/option-button":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":263,"_id":264,"_source":265,"_file":266,"_extension":267},"/design-system/components/option-button","components",false,"","Option button","The Option button component is a set of buttons to help users filter content.","page","Core",{"type":16,"children":17,"toc":248},"root",[18,27,33,38,43,50,55,60,65,71,96,102,125,129,135,140,153,158,163,166,172,177,182,186,189,195,200,207,229,232,238,243],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use option buttons to show a set of options a user can choose from to filter content or results.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"The option button component contains labels showing a user how the filter will work.",{"type":19,"tag":39,"props":40,"children":42},"docs-example",{"id":41},"forms-option-buttons--squares",[],{"type":19,"tag":44,"props":45,"children":47},"h3",{"id":46},"how-this-component-works",[48],{"type":25,"value":49},"How this component works",{"type":19,"tag":28,"props":51,"children":52},{},[53],{"type":25,"value":54},"You must use a form label with option buttons. The form label explains what happens when a user chooses an option. For example, ‘Filter by starting letter’.",{"type":19,"tag":28,"props":56,"children":57},{},[58],{"type":25,"value":59},"Always use descriptive labels for individual option buttons. Labels should help users choose, and say the category of content or results each option will show. This makes the content accessible, as screen readers will read out each label.",{"type":19,"tag":28,"props":61,"children":62},{},[63],{"type":25,"value":64},"Never preselect an option button on default. Users might miss that a filter has been automatically applied.",{"type":19,"tag":44,"props":66,"children":68},{"id":67},"when-and-how-to-use",[69],{"type":25,"value":70},"When and how to use",{"type":19,"tag":72,"props":73,"children":74},"ul",{},[75,81,86,91],{"type":19,"tag":76,"props":77,"children":78},"li",{},[79],{"type":25,"value":80},"Help users filter content or results.",{"type":19,"tag":76,"props":82,"children":83},{},[84],{"type":25,"value":85},"Use short labels only.",{"type":19,"tag":76,"props":87,"children":88},{},[89],{"type":25,"value":90},"Order labels in alphabetical order to help users scan quickly.",{"type":19,"tag":76,"props":92,"children":93},{},[94],{"type":25,"value":95},"Add an ‘apply filter’ button if the option button will be used together with other form elements.",{"type":19,"tag":44,"props":97,"children":99},{"id":98},"when-and-how-not-to-use",[100],{"type":25,"value":101},"When and how not to use",{"type":19,"tag":72,"props":103,"children":104},{},[105,110,115,120],{"type":19,"tag":76,"props":106,"children":107},{},[108],{"type":25,"value":109},"Don’t use for a call to action.",{"type":19,"tag":76,"props":111,"children":112},{},[113],{"type":25,"value":114},"Don’t use with long content.",{"type":19,"tag":76,"props":116,"children":117},{},[118],{"type":25,"value":119},"Never use without a form label.",{"type":19,"tag":76,"props":121,"children":122},{},[123],{"type":25,"value":124},"Never preselect an individual option button.",{"type":19,"tag":126,"props":127,"children":128},"hr",{},[],{"type":19,"tag":20,"props":130,"children":132},{"id":131},"variants",[133],{"type":25,"value":134},"Variants",{"type":19,"tag":28,"props":136,"children":137},{},[138],{"type":25,"value":139},"Option buttons have 2 variants:",{"type":19,"tag":72,"props":141,"children":142},{},[143,148],{"type":19,"tag":76,"props":144,"children":145},{},[146],{"type":25,"value":147},"default",{"type":19,"tag":76,"props":149,"children":150},{},[151],{"type":25,"value":152},"custom.",{"type":19,"tag":44,"props":154,"children":155},{"id":147},[156],{"type":25,"value":157},"Default",{"type":19,"tag":28,"props":159,"children":160},{},[161],{"type":25,"value":162},"Default uses the alphabet as a filter in the option buttons.",{"type":19,"tag":39,"props":164,"children":165},{"id":41},[],{"type":19,"tag":44,"props":167,"children":169},{"id":168},"custom",[170],{"type":25,"value":171},"Custom",{"type":19,"tag":28,"props":173,"children":174},{},[175],{"type":25,"value":176},"The custom variant lets you create your own button labels as a filter.",{"type":19,"tag":28,"props":178,"children":179},{},[180],{"type":25,"value":181},"These labels must clearly tell the user what filter will be applied.",{"type":19,"tag":39,"props":183,"children":185},{"id":184},"forms-option-buttons--fluid-widths",[],{"type":19,"tag":126,"props":187,"children":188},{},[],{"type":19,"tag":20,"props":190,"children":192},{"id":191},"theming",[193],{"type":25,"value":194},"Theming",{"type":19,"tag":28,"props":196,"children":197},{},[198],{"type":25,"value":199},"Option buttons use colour to show interactive states. An option button in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that option button remains consistent while it transitions from a focus to an active state.",{"type":19,"tag":201,"props":202,"children":203},"docs-theme-chooser",{},[204],{"type":19,"tag":39,"props":205,"children":206},{"id":41},[],{"type":19,"tag":28,"props":208,"children":209},{},[210,212,219,221,227],{"type":25,"value":211},"To create your own theme see ",{"type":19,"tag":213,"props":214,"children":216},"a",{"href":215},"/design-system/design/theming-guidance-for-designers",[217],{"type":25,"value":218},"theming guidance for designers",{"type":25,"value":220}," or ",{"type":19,"tag":213,"props":222,"children":224},{"href":223},"/design-system/develop/theming",[225],{"type":25,"value":226},"theming guidance for developers",{"type":25,"value":228},".",{"type":19,"tag":126,"props":230,"children":231},{},[],{"type":19,"tag":20,"props":233,"children":235},{"id":234},"rationale",[236],{"type":25,"value":237},"Rationale",{"type":19,"tag":28,"props":239,"children":240},{},[241],{"type":25,"value":242},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":19,"tag":28,"props":244,"children":245},{},[246],{"type":25,"value":247},"This occurs across all form and input elements, for a consistent experience.",{"title":10,"searchDepth":249,"depth":249,"links":250},2,[251,257,261,262],{"id":22,"depth":249,"text":26,"children":252},[253,255,256],{"id":46,"depth":254,"text":49},3,{"id":67,"depth":254,"text":70},{"id":98,"depth":254,"text":101},{"id":131,"depth":249,"text":134,"children":258},[259,260],{"id":147,"depth":254,"text":157},{"id":168,"depth":254,"text":171},{"id":191,"depth":249,"text":194},{"id":234,"depth":249,"text":237},"markdown","content:design-system:5.components:option-button.md","content","design-system/5.components/option-button.md","md",["ShallowRef",269],["ShallowReactive",270],{"/design-system/components/option-button":271},[272,278],{"_path":273,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":274,"description":275,"layout":13,"label":14,"_type":263,"_id":276,"_source":265,"_file":277,"_extension":267},"/design-system/components/media","Media","The Media component is a container that houses media items to use in other components on a page.","content:design-system:5.components:media.md","design-system/5.components/media.md",{"_path":279,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":280,"description":281,"layout":13,"label":14,"_type":263,"_id":282,"_source":265,"_file":283,"_extension":267},"/design-system/components/page-action","Page action","The Page action component presents a collection of links that offer users a choice of actions, such as printing or downloading a document.","content:design-system:5.components:page-action.md","design-system/5.components/page-action.md",["ShallowRef",285],{},[287,292,531],{"title":288,"_path":289,"icon":290,"layout":291},"Ripple Design System","/","carbon:home","home",{"title":293,"_path":294,"children":295},"Design System","/design-system",[296,312,327,355,389],{"title":297,"_path":298,"children":299},"About","/design-system/about",[300,303,306,309],{"title":301,"_path":302,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":304,"_path":305,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":307,"_path":308,"layout":13},"Support","/design-system/about/getting-support",{"title":310,"_path":311,"layout":13},"Contributing","/design-system/about/contributing",{"title":313,"_path":314,"children":315},"Design","/design-system/design",[316,319,322,325],{"title":317,"_path":318,"layout":13},"Getting started","/design-system/design/getting-started",{"title":320,"_path":321,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":323,"_path":324,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":326,"_path":215,"layout":13},"Theming guidance for designers",{"title":328,"_path":329,"children":330},"Develop","/design-system/develop",[331,333,335,337],{"title":317,"_path":332,"layout":13},"/design-system/develop/getting-started",{"title":310,"_path":334,"layout":13},"/design-system/develop/contributing",{"title":336,"_path":223,"layout":13},"Theme and brand application",{"title":26,"_path":338,"children":339,"layout":13},"/design-system/develop/usage",[340,343,346,349,352],{"title":341,"_path":342,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":344,"_path":345,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":347,"_path":348,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":350,"_path":351,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":353,"_path":354,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":356,"_path":357,"children":358},"Styles","/design-system/styles",[359,362,365,368,371,374,377,380,383,386],{"title":360,"_path":361,"layout":13},"Colour","/design-system/styles/colour",{"title":363,"_path":364,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":366,"_path":367,"layout":13},"Grid","/design-system/styles/grid",{"title":369,"_path":370,"layout":13},"Icons","/design-system/styles/icons",{"title":372,"_path":373,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":375,"_path":376,"layout":13},"Layout","/design-system/styles/layout",{"title":378,"_path":379,"layout":13},"Logo","/design-system/styles/logo",{"title":381,"_path":382,"layout":13},"Motion","/design-system/styles/motion",{"title":384,"_path":385,"layout":13},"Spacing","/design-system/styles/spacing",{"title":387,"_path":388,"layout":13},"Typography","/design-system/styles/typography",{"title":390,"_path":391,"children":392},"Components","/design-system/components",[393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,472,475,478,481,482,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528],{"title":394,"_path":395,"layout":13},"Accordion","/design-system/components/accordion",{"title":397,"_path":398,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":400,"_path":401,"layout":13},"Alert","/design-system/components/alert",{"title":403,"_path":404,"layout":13},"Block quote","/design-system/components/block-quote",{"title":406,"_path":407,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":409,"_path":410,"layout":13},"Button","/design-system/components/button",{"title":412,"_path":413,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":415,"_path":416,"layout":13},"Callout","/design-system/components/callout",{"title":418,"_path":419,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":421,"_path":422,"layout":13},"Card","/design-system/components/card",{"title":424,"_path":425,"layout":13},"Carousel","/design-system/components/carousel",{"title":427,"_path":428,"layout":13},"Category grid","/design-system/components/category-grid",{"title":430,"_path":431,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":433,"_path":434,"layout":13},"Chip","/design-system/components/chip",{"title":436,"_path":437,"layout":13},"Contact us","/design-system/components/contact-us",{"title":439,"_path":440,"layout":13},"Date input","/design-system/components/date-input",{"title":442,"_path":443,"layout":13},"Detail list","/design-system/components/detail-list",{"title":445,"_path":446,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":448,"_path":449,"layout":13},"File","/design-system/components/file",{"title":451,"_path":452,"layout":13},"Footer","/design-system/components/footer",{"title":454,"_path":455,"layout":13},"Form","/design-system/components/form",{"title":457,"_path":458,"layout":13},"Form alert","/design-system/components/form-alert",{"title":460,"_path":461,"layout":13},"Header","/design-system/components/header",{"title":463,"_path":464,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":466,"_path":467,"layout":13},"Input field","/design-system/components/input-field",{"title":469,"_path":470,"layout":13},"Key dates","/design-system/components/key-dates",{"title":274,"_path":273,"layout":13},{"title":473,"_path":474,"layout":13},"Media embed","/design-system/components/media-embed",{"title":476,"_path":477,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":479,"_path":480,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":11,"_path":7,"layout":13},{"title":280,"_path":279,"layout":13},{"title":484,"_path":485,"layout":13},"Pagination","/design-system/components/pagination",{"title":487,"_path":488,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":490,"_path":491,"layout":13},"Profile","/design-system/components/profile",{"title":493,"_path":494,"layout":13},"Radio button","/design-system/components/radio-button",{"title":496,"_path":497,"layout":13},"Related links","/design-system/components/related-links",{"title":499,"_path":500,"layout":13},"Results listing","/design-system/components/results-listing",{"title":502,"_path":503,"layout":13},"Search bar","/design-system/components/search-bar",{"title":505,"_path":506,"layout":13},"Skip link","/design-system/components/skip-link",{"title":508,"_path":509,"layout":13},"Social share","/design-system/components/social-share",{"title":511,"_path":512,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":514,"_path":515,"layout":13},"Table","/design-system/components/table",{"title":517,"_path":518,"layout":13},"Tabs","/design-system/components/tabs",{"title":520,"_path":521,"layout":13},"Tag","/design-system/components/tag",{"title":523,"_path":524,"layout":13},"Text area","/design-system/components/text-area",{"title":526,"_path":527,"layout":13},"Timeline","/design-system/components/timeline",{"title":529,"_path":530,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":532,"_path":533,"children":534,"layout":13},"Ripple Framework","/framework",[535,536,554,576],{"title":532,"_path":533,"layout":13},{"title":537,"_path":538,"children":539},"Key Concepts","/framework/key-concepts",[540,542,545,548,551],{"title":347,"_path":541,"layout":13},"/framework/key-concepts/nuxt",{"title":543,"_path":544,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":546,"_path":547,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":549,"_path":550,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":552,"_path":553,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":555,"_path":556,"children":557},"Guides","/framework/guides",[558,561,564,567,570,573],{"title":559,"_path":560,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":562,"_path":563,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":565,"_path":566,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":568,"_path":569,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":571,"_path":572,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":574,"_path":575,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":577,"_path":578,"layout":13},"Core modules","/framework/core-modules",["Reactive",580],["Set"],["Reactive",582],{"module-navigation":583},null,true,1714695652411]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/page-action/_payload.json b/design-system/components/page-action/_payload.json
index 7da2185203..f282f2753b 100644
--- a/design-system/components/page-action/_payload.json
+++ b/design-system/components/page-action/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":104,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695154403]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":104,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695652542]
\ No newline at end of file
diff --git a/design-system/components/page-action/index.html b/design-system/components/page-action/index.html
index 5a99ae73f9..754be4fd86 100644
--- a/design-system/components/page-action/index.html
+++ b/design-system/components/page-action/index.html
@@ -28,63 +28,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -97,8 +97,8 @@
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Page action</h1><p class="rpl-type-p-large" data-v-3163c6df>The Page action component presents a collection of links that offer users a choice of actions, such as printing or downloading a document.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the Page action component to let users print or download pages and content.<!--]--></p><p><!--[-->Page action presents as a collection of links giving users a choice of actions at a page level. This includes printing or downloading a document.<!--]--></p><p><!--[-->The component displays a combination of page-level actions.<!--]--></p><ul><!--[--><li><!--[-->Print page: prints the page a user is on.<!--]--></li><li><!--[-->Print full document: prints all pages in a publication or document, not only the page the user is on.<!--]--></li><li><!--[-->Download document: downloads a copy of the content that the page editor uploaded. You can add more than one document to the page action component. The documents should only be what&#39;s already on the page. Don&#39;t add new or extra content.<!--]--></li><!--]--></ul><p><!--[-->Never use page actions for anything other than the above. Don&#39;t use it for links.<!--]--></p><p><!--[-->The print action prints the full document (section), not just the page the user is on. The document action downloads a document that has been uploaded in the content management system.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-page-action--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-page-action--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Only use in a page&#39;s sidebar section.<!--]--></li><li><!--[-->Use as the first component in the sidebar, above the vertical navigation.<!--]--></li><li><!--[-->Use with or without one or more documents.<!--]--></li><li><!--[-->Include metadata with uploaded documents.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t use:
-<ul><!--[--><li><!--[-->in the content area of a page<!--]--></li><li><!--[-->with a document that has content different to the page&#39;s content<!--]--></li><li><!--[-->for any other user actions.<!--]--></li><!--]--></ul><!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Page action uses colour for:<!--]--></p><ul><!--[--><li><!--[-->icons, to indicate a possible action to users<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-page-action--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-page-action--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/page-action.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/page-action/_payload.json">[{"state":1,"once":526,"_errors":528,"serverRendered":531,"path":7,"prerenderedAt":532},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":213,"$sdd-globals":229,"$sdd-navigation":231},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/page-action":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":208,"_id":209,"_source":210,"_file":211,"_extension":212},"/design-system/components/page-action","components",false,"","Page action","The Page action component presents a collection of links that offer users a choice of actions, such as printing or downloading a document.","page","Core",{"type":16,"children":17,"toc":199},"root",[18,27,33,38,43,63,68,73,78,85,108,114,140,144,150,155,168,175],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use the Page action component to let users print or download pages and content.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Page action presents as a collection of links giving users a choice of actions at a page level. This includes printing or downloading a document.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"The component displays a combination of page-level actions.",{"type":19,"tag":44,"props":45,"children":46},"ul",{},[47,53,58],{"type":19,"tag":48,"props":49,"children":50},"li",{},[51],{"type":25,"value":52},"Print page: prints the page a user is on.",{"type":19,"tag":48,"props":54,"children":55},{},[56],{"type":25,"value":57},"Print full document: prints all pages in a publication or document, not only the page the user is on.",{"type":19,"tag":48,"props":59,"children":60},{},[61],{"type":25,"value":62},"Download document: downloads a copy of the content that the page editor uploaded. You can add more than one document to the page action component. The documents should only be what's already on the page. Don't add new or extra content.",{"type":19,"tag":28,"props":64,"children":65},{},[66],{"type":25,"value":67},"Never use page actions for anything other than the above. Don't use it for links.",{"type":19,"tag":28,"props":69,"children":70},{},[71],{"type":25,"value":72},"The print action prints the full document (section), not just the page the user is on. The document action downloads a document that has been uploaded in the content management system.",{"type":19,"tag":74,"props":75,"children":77},"docs-example",{"id":76},"core-containers-page-action--default-story",[],{"type":19,"tag":79,"props":80,"children":82},"h3",{"id":81},"when-and-how-to-use",[83],{"type":25,"value":84},"When and how to use",{"type":19,"tag":44,"props":86,"children":87},{},[88,93,98,103],{"type":19,"tag":48,"props":89,"children":90},{},[91],{"type":25,"value":92},"Only use in a page's sidebar section.",{"type":19,"tag":48,"props":94,"children":95},{},[96],{"type":25,"value":97},"Use as the first component in the sidebar, above the vertical navigation.",{"type":19,"tag":48,"props":99,"children":100},{},[101],{"type":25,"value":102},"Use with or without one or more documents.",{"type":19,"tag":48,"props":104,"children":105},{},[106],{"type":25,"value":107},"Include metadata with uploaded documents.",{"type":19,"tag":79,"props":109,"children":111},{"id":110},"when-and-how-not-to-use",[112],{"type":25,"value":113},"When and how not to use",{"type":19,"tag":44,"props":115,"children":116},{},[117],{"type":19,"tag":48,"props":118,"children":119},{},[120,122],{"type":25,"value":121},"Don't use:\n",{"type":19,"tag":44,"props":123,"children":124},{},[125,130,135],{"type":19,"tag":48,"props":126,"children":127},{},[128],{"type":25,"value":129},"in the content area of a page",{"type":19,"tag":48,"props":131,"children":132},{},[133],{"type":25,"value":134},"with a document that has content different to the page's content",{"type":19,"tag":48,"props":136,"children":137},{},[138],{"type":25,"value":139},"for any other user actions.",{"type":19,"tag":141,"props":142,"children":143},"hr",{},[],{"type":19,"tag":20,"props":145,"children":147},{"id":146},"theming",[148],{"type":25,"value":149},"Theming",{"type":19,"tag":28,"props":151,"children":152},{},[153],{"type":25,"value":154},"Page action uses colour for:",{"type":19,"tag":44,"props":156,"children":157},{},[158,163],{"type":19,"tag":48,"props":159,"children":160},{},[161],{"type":25,"value":162},"icons, to indicate a possible action to users",{"type":19,"tag":48,"props":164,"children":165},{},[166],{"type":25,"value":167},"interactive states.",{"type":19,"tag":169,"props":170,"children":171},"docs-theme-chooser",{},[172],{"type":19,"tag":74,"props":173,"children":174},{"id":76},[],{"type":19,"tag":28,"props":176,"children":177},{},[178,180,189,191,197],{"type":25,"value":179},"To create your own theme, see ",{"type":19,"tag":181,"props":182,"children":186},"a",{"href":183,"rel":184},"https://www.vic.gov.au",[185],"nofollow",[187],{"type":25,"value":188},"theming guidance for designers",{"type":25,"value":190}," or ",{"type":19,"tag":181,"props":192,"children":194},{"href":183,"rel":193},[185],[195],{"type":25,"value":196},"theming guidance for developers",{"type":25,"value":198},".",{"title":10,"searchDepth":200,"depth":200,"links":201},2,[202,207],{"id":22,"depth":200,"text":26,"children":203},[204,206],{"id":81,"depth":205,"text":84},3,{"id":110,"depth":205,"text":113},{"id":146,"depth":200,"text":149},"markdown","content:design-system:5.components:page-action.md","content","design-system/5.components/page-action.md","md",["ShallowRef",214],["ShallowReactive",215],{"/design-system/components/page-action":216},[217,223],{"_path":218,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":219,"description":220,"layout":13,"label":14,"_type":208,"_id":221,"_source":210,"_file":222,"_extension":212},"/design-system/components/option-button","Option button","The Option button component is a set of buttons to help users filter content.","content:design-system:5.components:option-button.md","design-system/5.components/option-button.md",{"_path":224,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":225,"description":226,"layout":13,"label":14,"_type":208,"_id":227,"_source":210,"_file":228,"_extension":212},"/design-system/components/pagination","Pagination","The Pagination component divides your content across more than one page into smaller lists to help users navigate forward and backwards.","content:design-system:5.components:pagination.md","design-system/5.components/pagination.md",["ShallowRef",230],{},[232,237,478],{"title":233,"_path":234,"icon":235,"layout":236},"Ripple Design System","/","carbon:home","home",{"title":238,"_path":239,"children":240},"Design System","/design-system",[241,257,273,302,336],{"title":242,"_path":243,"children":244},"About","/design-system/about",[245,248,251,254],{"title":246,"_path":247,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":249,"_path":250,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":252,"_path":253,"layout":13},"Support","/design-system/about/getting-support",{"title":255,"_path":256,"layout":13},"Contributing","/design-system/about/contributing",{"title":258,"_path":259,"children":260},"Design","/design-system/design",[261,264,267,270],{"title":262,"_path":263,"layout":13},"Getting started","/design-system/design/getting-started",{"title":265,"_path":266,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":268,"_path":269,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":271,"_path":272,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":274,"_path":275,"children":276},"Develop","/design-system/develop",[277,279,281,284],{"title":262,"_path":278,"layout":13},"/design-system/develop/getting-started",{"title":255,"_path":280,"layout":13},"/design-system/develop/contributing",{"title":282,"_path":283,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":285,"children":286,"layout":13},"/design-system/develop/usage",[287,290,293,296,299],{"title":288,"_path":289,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":291,"_path":292,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":294,"_path":295,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":297,"_path":298,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":300,"_path":301,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":303,"_path":304,"children":305},"Styles","/design-system/styles",[306,309,312,315,318,321,324,327,330,333],{"title":307,"_path":308,"layout":13},"Colour","/design-system/styles/colour",{"title":310,"_path":311,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":313,"_path":314,"layout":13},"Grid","/design-system/styles/grid",{"title":316,"_path":317,"layout":13},"Icons","/design-system/styles/icons",{"title":319,"_path":320,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":322,"_path":323,"layout":13},"Layout","/design-system/styles/layout",{"title":325,"_path":326,"layout":13},"Logo","/design-system/styles/logo",{"title":328,"_path":329,"layout":13},"Motion","/design-system/styles/motion",{"title":331,"_path":332,"layout":13},"Spacing","/design-system/styles/spacing",{"title":334,"_path":335,"layout":13},"Typography","/design-system/styles/typography",{"title":337,"_path":338,"children":339},"Components","/design-system/components",[340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,431,432,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475],{"title":341,"_path":342,"layout":13},"Accordion","/design-system/components/accordion",{"title":344,"_path":345,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":347,"_path":348,"layout":13},"Alert","/design-system/components/alert",{"title":350,"_path":351,"layout":13},"Block quote","/design-system/components/block-quote",{"title":353,"_path":354,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":356,"_path":357,"layout":13},"Button","/design-system/components/button",{"title":359,"_path":360,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":362,"_path":363,"layout":13},"Callout","/design-system/components/callout",{"title":365,"_path":366,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":368,"_path":369,"layout":13},"Card","/design-system/components/card",{"title":371,"_path":372,"layout":13},"Carousel","/design-system/components/carousel",{"title":374,"_path":375,"layout":13},"Category grid","/design-system/components/category-grid",{"title":377,"_path":378,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":380,"_path":381,"layout":13},"Chip","/design-system/components/chip",{"title":383,"_path":384,"layout":13},"Contact us","/design-system/components/contact-us",{"title":386,"_path":387,"layout":13},"Date input","/design-system/components/date-input",{"title":389,"_path":390,"layout":13},"Detail list","/design-system/components/detail-list",{"title":392,"_path":393,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":395,"_path":396,"layout":13},"File","/design-system/components/file",{"title":398,"_path":399,"layout":13},"Footer","/design-system/components/footer",{"title":401,"_path":402,"layout":13},"Form","/design-system/components/form",{"title":404,"_path":405,"layout":13},"Form alert","/design-system/components/form-alert",{"title":407,"_path":408,"layout":13},"Header","/design-system/components/header",{"title":410,"_path":411,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":413,"_path":414,"layout":13},"Input field","/design-system/components/input-field",{"title":416,"_path":417,"layout":13},"Key dates","/design-system/components/key-dates",{"title":419,"_path":420,"layout":13},"Media","/design-system/components/media",{"title":422,"_path":423,"layout":13},"Media embed","/design-system/components/media-embed",{"title":425,"_path":426,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":428,"_path":429,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":219,"_path":218,"layout":13},{"title":11,"_path":7,"layout":13},{"title":225,"_path":224,"layout":13},{"title":434,"_path":435,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":437,"_path":438,"layout":13},"Profile","/design-system/components/profile",{"title":440,"_path":441,"layout":13},"Radio button","/design-system/components/radio-button",{"title":443,"_path":444,"layout":13},"Related links","/design-system/components/related-links",{"title":446,"_path":447,"layout":13},"Results listing","/design-system/components/results-listing",{"title":449,"_path":450,"layout":13},"Search bar","/design-system/components/search-bar",{"title":452,"_path":453,"layout":13},"Skip link","/design-system/components/skip-link",{"title":455,"_path":456,"layout":13},"Social share","/design-system/components/social-share",{"title":458,"_path":459,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":461,"_path":462,"layout":13},"Table","/design-system/components/table",{"title":464,"_path":465,"layout":13},"Tabs","/design-system/components/tabs",{"title":467,"_path":468,"layout":13},"Tag","/design-system/components/tag",{"title":470,"_path":471,"layout":13},"Text area","/design-system/components/text-area",{"title":473,"_path":474,"layout":13},"Timeline","/design-system/components/timeline",{"title":476,"_path":477,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":479,"_path":480,"children":481,"layout":13},"Ripple Framework","/framework",[482,483,501,523],{"title":479,"_path":480,"layout":13},{"title":484,"_path":485,"children":486},"Key Concepts","/framework/key-concepts",[487,489,492,495,498],{"title":294,"_path":488,"layout":13},"/framework/key-concepts/nuxt",{"title":490,"_path":491,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":493,"_path":494,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":496,"_path":497,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":499,"_path":500,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":502,"_path":503,"children":504},"Guides","/framework/guides",[505,508,511,514,517,520],{"title":506,"_path":507,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":509,"_path":510,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":512,"_path":513,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":515,"_path":516,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":518,"_path":519,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":521,"_path":522,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":524,"_path":525,"layout":13},"Core modules","/framework/core-modules",["Reactive",527],["Set"],["Reactive",529],{"module-navigation":530},null,true,1714695154403]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+<ul><!--[--><li><!--[-->in the content area of a page<!--]--></li><li><!--[-->with a document that has content different to the page&#39;s content<!--]--></li><li><!--[-->for any other user actions.<!--]--></li><!--]--></ul><!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Page action uses colour for:<!--]--></p><ul><!--[--><li><!--[-->icons, to indicate a possible action to users<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-page-action--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-page-action--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="https://www.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/page-action.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/page-action/_payload.json">[{"state":1,"once":526,"_errors":528,"serverRendered":531,"path":7,"prerenderedAt":532},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":213,"$sdd-globals":229,"$sdd-navigation":231},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/page-action":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":208,"_id":209,"_source":210,"_file":211,"_extension":212},"/design-system/components/page-action","components",false,"","Page action","The Page action component presents a collection of links that offer users a choice of actions, such as printing or downloading a document.","page","Core",{"type":16,"children":17,"toc":199},"root",[18,27,33,38,43,63,68,73,78,85,108,114,140,144,150,155,168,175],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use the Page action component to let users print or download pages and content.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Page action presents as a collection of links giving users a choice of actions at a page level. This includes printing or downloading a document.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"The component displays a combination of page-level actions.",{"type":19,"tag":44,"props":45,"children":46},"ul",{},[47,53,58],{"type":19,"tag":48,"props":49,"children":50},"li",{},[51],{"type":25,"value":52},"Print page: prints the page a user is on.",{"type":19,"tag":48,"props":54,"children":55},{},[56],{"type":25,"value":57},"Print full document: prints all pages in a publication or document, not only the page the user is on.",{"type":19,"tag":48,"props":59,"children":60},{},[61],{"type":25,"value":62},"Download document: downloads a copy of the content that the page editor uploaded. You can add more than one document to the page action component. The documents should only be what's already on the page. Don't add new or extra content.",{"type":19,"tag":28,"props":64,"children":65},{},[66],{"type":25,"value":67},"Never use page actions for anything other than the above. Don't use it for links.",{"type":19,"tag":28,"props":69,"children":70},{},[71],{"type":25,"value":72},"The print action prints the full document (section), not just the page the user is on. The document action downloads a document that has been uploaded in the content management system.",{"type":19,"tag":74,"props":75,"children":77},"docs-example",{"id":76},"core-containers-page-action--default-story",[],{"type":19,"tag":79,"props":80,"children":82},"h3",{"id":81},"when-and-how-to-use",[83],{"type":25,"value":84},"When and how to use",{"type":19,"tag":44,"props":86,"children":87},{},[88,93,98,103],{"type":19,"tag":48,"props":89,"children":90},{},[91],{"type":25,"value":92},"Only use in a page's sidebar section.",{"type":19,"tag":48,"props":94,"children":95},{},[96],{"type":25,"value":97},"Use as the first component in the sidebar, above the vertical navigation.",{"type":19,"tag":48,"props":99,"children":100},{},[101],{"type":25,"value":102},"Use with or without one or more documents.",{"type":19,"tag":48,"props":104,"children":105},{},[106],{"type":25,"value":107},"Include metadata with uploaded documents.",{"type":19,"tag":79,"props":109,"children":111},{"id":110},"when-and-how-not-to-use",[112],{"type":25,"value":113},"When and how not to use",{"type":19,"tag":44,"props":115,"children":116},{},[117],{"type":19,"tag":48,"props":118,"children":119},{},[120,122],{"type":25,"value":121},"Don't use:\n",{"type":19,"tag":44,"props":123,"children":124},{},[125,130,135],{"type":19,"tag":48,"props":126,"children":127},{},[128],{"type":25,"value":129},"in the content area of a page",{"type":19,"tag":48,"props":131,"children":132},{},[133],{"type":25,"value":134},"with a document that has content different to the page's content",{"type":19,"tag":48,"props":136,"children":137},{},[138],{"type":25,"value":139},"for any other user actions.",{"type":19,"tag":141,"props":142,"children":143},"hr",{},[],{"type":19,"tag":20,"props":145,"children":147},{"id":146},"theming",[148],{"type":25,"value":149},"Theming",{"type":19,"tag":28,"props":151,"children":152},{},[153],{"type":25,"value":154},"Page action uses colour for:",{"type":19,"tag":44,"props":156,"children":157},{},[158,163],{"type":19,"tag":48,"props":159,"children":160},{},[161],{"type":25,"value":162},"icons, to indicate a possible action to users",{"type":19,"tag":48,"props":164,"children":165},{},[166],{"type":25,"value":167},"interactive states.",{"type":19,"tag":169,"props":170,"children":171},"docs-theme-chooser",{},[172],{"type":19,"tag":74,"props":173,"children":174},{"id":76},[],{"type":19,"tag":28,"props":176,"children":177},{},[178,180,189,191,197],{"type":25,"value":179},"To create your own theme, see ",{"type":19,"tag":181,"props":182,"children":186},"a",{"href":183,"rel":184},"https://www.vic.gov.au",[185],"nofollow",[187],{"type":25,"value":188},"theming guidance for designers",{"type":25,"value":190}," or ",{"type":19,"tag":181,"props":192,"children":194},{"href":183,"rel":193},[185],[195],{"type":25,"value":196},"theming guidance for developers",{"type":25,"value":198},".",{"title":10,"searchDepth":200,"depth":200,"links":201},2,[202,207],{"id":22,"depth":200,"text":26,"children":203},[204,206],{"id":81,"depth":205,"text":84},3,{"id":110,"depth":205,"text":113},{"id":146,"depth":200,"text":149},"markdown","content:design-system:5.components:page-action.md","content","design-system/5.components/page-action.md","md",["ShallowRef",214],["ShallowReactive",215],{"/design-system/components/page-action":216},[217,223],{"_path":218,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":219,"description":220,"layout":13,"label":14,"_type":208,"_id":221,"_source":210,"_file":222,"_extension":212},"/design-system/components/option-button","Option button","The Option button component is a set of buttons to help users filter content.","content:design-system:5.components:option-button.md","design-system/5.components/option-button.md",{"_path":224,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":225,"description":226,"layout":13,"label":14,"_type":208,"_id":227,"_source":210,"_file":228,"_extension":212},"/design-system/components/pagination","Pagination","The Pagination component divides your content across more than one page into smaller lists to help users navigate forward and backwards.","content:design-system:5.components:pagination.md","design-system/5.components/pagination.md",["ShallowRef",230],{},[232,237,478],{"title":233,"_path":234,"icon":235,"layout":236},"Ripple Design System","/","carbon:home","home",{"title":238,"_path":239,"children":240},"Design System","/design-system",[241,257,273,302,336],{"title":242,"_path":243,"children":244},"About","/design-system/about",[245,248,251,254],{"title":246,"_path":247,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":249,"_path":250,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":252,"_path":253,"layout":13},"Support","/design-system/about/getting-support",{"title":255,"_path":256,"layout":13},"Contributing","/design-system/about/contributing",{"title":258,"_path":259,"children":260},"Design","/design-system/design",[261,264,267,270],{"title":262,"_path":263,"layout":13},"Getting started","/design-system/design/getting-started",{"title":265,"_path":266,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":268,"_path":269,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":271,"_path":272,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":274,"_path":275,"children":276},"Develop","/design-system/develop",[277,279,281,284],{"title":262,"_path":278,"layout":13},"/design-system/develop/getting-started",{"title":255,"_path":280,"layout":13},"/design-system/develop/contributing",{"title":282,"_path":283,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":285,"children":286,"layout":13},"/design-system/develop/usage",[287,290,293,296,299],{"title":288,"_path":289,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":291,"_path":292,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":294,"_path":295,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":297,"_path":298,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":300,"_path":301,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":303,"_path":304,"children":305},"Styles","/design-system/styles",[306,309,312,315,318,321,324,327,330,333],{"title":307,"_path":308,"layout":13},"Colour","/design-system/styles/colour",{"title":310,"_path":311,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":313,"_path":314,"layout":13},"Grid","/design-system/styles/grid",{"title":316,"_path":317,"layout":13},"Icons","/design-system/styles/icons",{"title":319,"_path":320,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":322,"_path":323,"layout":13},"Layout","/design-system/styles/layout",{"title":325,"_path":326,"layout":13},"Logo","/design-system/styles/logo",{"title":328,"_path":329,"layout":13},"Motion","/design-system/styles/motion",{"title":331,"_path":332,"layout":13},"Spacing","/design-system/styles/spacing",{"title":334,"_path":335,"layout":13},"Typography","/design-system/styles/typography",{"title":337,"_path":338,"children":339},"Components","/design-system/components",[340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,431,432,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475],{"title":341,"_path":342,"layout":13},"Accordion","/design-system/components/accordion",{"title":344,"_path":345,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":347,"_path":348,"layout":13},"Alert","/design-system/components/alert",{"title":350,"_path":351,"layout":13},"Block quote","/design-system/components/block-quote",{"title":353,"_path":354,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":356,"_path":357,"layout":13},"Button","/design-system/components/button",{"title":359,"_path":360,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":362,"_path":363,"layout":13},"Callout","/design-system/components/callout",{"title":365,"_path":366,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":368,"_path":369,"layout":13},"Card","/design-system/components/card",{"title":371,"_path":372,"layout":13},"Carousel","/design-system/components/carousel",{"title":374,"_path":375,"layout":13},"Category grid","/design-system/components/category-grid",{"title":377,"_path":378,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":380,"_path":381,"layout":13},"Chip","/design-system/components/chip",{"title":383,"_path":384,"layout":13},"Contact us","/design-system/components/contact-us",{"title":386,"_path":387,"layout":13},"Date input","/design-system/components/date-input",{"title":389,"_path":390,"layout":13},"Detail list","/design-system/components/detail-list",{"title":392,"_path":393,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":395,"_path":396,"layout":13},"File","/design-system/components/file",{"title":398,"_path":399,"layout":13},"Footer","/design-system/components/footer",{"title":401,"_path":402,"layout":13},"Form","/design-system/components/form",{"title":404,"_path":405,"layout":13},"Form alert","/design-system/components/form-alert",{"title":407,"_path":408,"layout":13},"Header","/design-system/components/header",{"title":410,"_path":411,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":413,"_path":414,"layout":13},"Input field","/design-system/components/input-field",{"title":416,"_path":417,"layout":13},"Key dates","/design-system/components/key-dates",{"title":419,"_path":420,"layout":13},"Media","/design-system/components/media",{"title":422,"_path":423,"layout":13},"Media embed","/design-system/components/media-embed",{"title":425,"_path":426,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":428,"_path":429,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":219,"_path":218,"layout":13},{"title":11,"_path":7,"layout":13},{"title":225,"_path":224,"layout":13},{"title":434,"_path":435,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":437,"_path":438,"layout":13},"Profile","/design-system/components/profile",{"title":440,"_path":441,"layout":13},"Radio button","/design-system/components/radio-button",{"title":443,"_path":444,"layout":13},"Related links","/design-system/components/related-links",{"title":446,"_path":447,"layout":13},"Results listing","/design-system/components/results-listing",{"title":449,"_path":450,"layout":13},"Search bar","/design-system/components/search-bar",{"title":452,"_path":453,"layout":13},"Skip link","/design-system/components/skip-link",{"title":455,"_path":456,"layout":13},"Social share","/design-system/components/social-share",{"title":458,"_path":459,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":461,"_path":462,"layout":13},"Table","/design-system/components/table",{"title":464,"_path":465,"layout":13},"Tabs","/design-system/components/tabs",{"title":467,"_path":468,"layout":13},"Tag","/design-system/components/tag",{"title":470,"_path":471,"layout":13},"Text area","/design-system/components/text-area",{"title":473,"_path":474,"layout":13},"Timeline","/design-system/components/timeline",{"title":476,"_path":477,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":479,"_path":480,"children":481,"layout":13},"Ripple Framework","/framework",[482,483,501,523],{"title":479,"_path":480,"layout":13},{"title":484,"_path":485,"children":486},"Key Concepts","/framework/key-concepts",[487,489,492,495,498],{"title":294,"_path":488,"layout":13},"/framework/key-concepts/nuxt",{"title":490,"_path":491,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":493,"_path":494,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":496,"_path":497,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":499,"_path":500,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":502,"_path":503,"children":504},"Guides","/framework/guides",[505,508,511,514,517,520],{"title":506,"_path":507,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":509,"_path":510,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":512,"_path":513,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":515,"_path":516,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":518,"_path":519,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":521,"_path":522,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":524,"_path":525,"layout":13},"Core modules","/framework/core-modules",["Reactive",527],["Set"],["Reactive",529],{"module-navigation":530},null,true,1714695652542]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/pagination/_payload.json b/design-system/components/pagination/_payload.json
index aa08bf9d2e..7aa8c7f348 100644
--- a/design-system/components/pagination/_payload.json
+++ b/design-system/components/pagination/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":104,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695154424]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":104,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695652547]
\ No newline at end of file
diff --git a/design-system/components/pagination/index.html b/design-system/components/pagination/index.html
index 5507dbb49b..5f40719385 100644
--- a/design-system/components/pagination/index.html
+++ b/design-system/components/pagination/index.html
@@ -28,64 +28,64 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.CwUV-MIb.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.gK7ORMEc.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -97,8 +97,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Pagination</h1><p class="rpl-type-p-large" data-v-3163c6df>The Pagination component divides your content across more than one page into smaller lists to help users navigate forward and backwards.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use pagination to help users navigate forwards and backwards through your content.<!--]--></p><p><!--[-->Pagination breaks down content, making it more concise and less overwhelming. It does this by dividing your content across more than one page and into smaller lists. This makes it easier for users to find what they need.<!--]--></p><p><!--[-->Examples include:<!--]--></p><ul><!--[--><li><!--[-->search results or guidance divided into multiple website pages<!--]--></li><li><!--[-->a collection of cards or media items.<!--]--></li><!--]--></ul><p><!--[-->Pagination helps users to identify:<!--]--></p><ul><!--[--><li><!--[-->how many pages or items they can navigate through<!--]--></li><li><!--[-->where the page or item they are viewing sits in the order of other pages or items<!--]--></li><li><!--[-->how they can immediately navigate to other pages or items.<!--]--></li><!--]--></ul><p><!--[-->Pagination sits at the bottom of each page. It&#39;s a quick and easy way for users to move between each page.<!--]--></p><p><!--[-->Use pagination if your list has 10 or more results.<!--]--></p><p><!--[-->Pagination identifies the page each result sits on. This makes it convenient for users to find again.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-page-links--page-links&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-page-links--page-links&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Stack standard pagination variant links vertically.<!--]--></li><li><!--[-->Only use standard and complex variants at the bottom of the body content area.<!--]--></li><li><!--[-->Use the simple variant nested in components, for example, the <a href="/design-system/components/media-gallery/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->media gallery<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/components/carousel/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->carousel<!--]--><!--]--><!----><!--]--></a>.<!--]--></li><li><!--[-->Use ellipses to replace any skipped pages.<!--]--></li><li><!--[-->Use pagination to avoid an infinite scroll of results, which can be a problem for keyboard users.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t use pagination for one page only.<!--]--></li><li><!--[-->Only choose one pagination variant, never mix or combine them.<!--]--></li><li><!--[-->Always put the user first, so don&#39;t break up content if it reduces usability or performance.<!--]--></li><li><!--[-->Don’t use for linear user journeys such as form completion.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->Pagination has 3 main variants:<!--]--></p><ul><!--[--><li><!--[-->simple, for a small number of items or used in other components<!--]--></li><li><!--[-->standard, to navigate through a small number of pages<!--]--></li><li><!--[-->complex, when there is a large number of pages to navigate through.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="simple" data-v-ea525968><a href="#simple" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Simple<!--]--></a></h2><p><!--[-->The simple variant is for navigating through a small number of items. Use it to nest pagination in other components, like media gallery, media fullscreen and carousel.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-pagination--simple-tally&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-pagination--simple-tally&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="standard" data-v-ea525968><a href="#standard" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Standard<!--]--></a></h2><p><!--[-->The standard variant is for navigating through a small number of pages. It has 2 options for label display:<!--]--></p><ul><!--[--><li><!--[-->page titles.<!--]--></li><li><!--[-->page numbers.<!--]--></li><!--]--></ul><p><!--[-->You can use page titles to give more context.<!--]--></p><p><!--[-->When stacking the links, do it vertically. This helps screen magnifier users when they have zoomed in to better read the content.<!--]--></p><p><!--[-->Never show the previous page link on the first page because it will confuse the user. The same goes for the next page link on the final page.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="page-title"><!--[-->Page Title<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-page-links--page-links&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-page-links--page-links&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="page-number"><!--[-->Page Number<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-page-links--example-count&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-page-links--example-count&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="complex" data-v-ea525968><a href="#complex" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Complex<!--]--></a></h2><p><!--[-->The complex variant lets users navigate through a large number of pages. It&#39;s ideal for a long list of search results.<!--]--></p><p><!--[-->The user can interact with the next and back controls to move forward and backward through the pages. The user can navigate straight to a page by selecting its specific page number.<!--]--></p><p><!--[-->There are 3 pages that should always remain highlighted:<!--]--></p><ul><!--[--><li><!--[-->The first page.<!--]--></li><li><!--[-->The current page.<!--]--></li><li><!--[-->The last page.<!--]--></li><!--]--></ul><p><!--[-->Never show the previous page link on the first page because it will confuse the user. The same goes for the next page link on the final page.<!--]--></p><p><!--[-->Display page numbers for the:<!--]--></p><ul><!--[--><li><!--[-->current page on all screen sizes<!--]--></li><li><!--[-->previous and next pages on smaller screen sizes<!--]--></li><li><!--[-->page immediately before and after the current page on larger screen sizes<!--]--></li><li><!--[-->first and final pages on all screen sizes.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-pagination--complex&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-pagination--complex&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Pagination uses colour for:<!--]--></p><ul><!--[--><li><!--[-->icons<!--]--></li><li><!--[-->interactive states<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-page-links--page-links&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-page-links--page-links&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-pagination--complex&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-pagination--complex&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/pagination.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/pagination/_payload.json">[{"state":1,"once":750,"_errors":752,"serverRendered":755,"path":7,"prerenderedAt":756},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":437,"$sdd-globals":453,"$sdd-navigation":455},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/pagination":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":432,"_id":433,"_source":434,"_file":435,"_extension":436},"/design-system/components/pagination","components",false,"","Pagination","The Pagination component divides your content across more than one page into smaller lists to help users navigate forward and backwards.","page","Core",{"type":16,"children":17,"toc":418},"root",[18,27,33,38,43,58,63,81,86,91,96,101,108,153,159,182,186,192,197,215,221,226,230,236,241,254,259,264,269,276,279,285,289,295,300,305,310,328,332,337,360,364,367,373,378,391,401],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use pagination to help users navigate forwards and backwards through your content.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Pagination breaks down content, making it more concise and less overwhelming. It does this by dividing your content across more than one page and into smaller lists. This makes it easier for users to find what they need.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Examples include:",{"type":19,"tag":44,"props":45,"children":46},"ul",{},[47,53],{"type":19,"tag":48,"props":49,"children":50},"li",{},[51],{"type":25,"value":52},"search results or guidance divided into multiple website pages",{"type":19,"tag":48,"props":54,"children":55},{},[56],{"type":25,"value":57},"a collection of cards or media items.",{"type":19,"tag":28,"props":59,"children":60},{},[61],{"type":25,"value":62},"Pagination helps users to identify:",{"type":19,"tag":44,"props":64,"children":65},{},[66,71,76],{"type":19,"tag":48,"props":67,"children":68},{},[69],{"type":25,"value":70},"how many pages or items they can navigate through",{"type":19,"tag":48,"props":72,"children":73},{},[74],{"type":25,"value":75},"where the page or item they are viewing sits in the order of other pages or items",{"type":19,"tag":48,"props":77,"children":78},{},[79],{"type":25,"value":80},"how they can immediately navigate to other pages or items.",{"type":19,"tag":28,"props":82,"children":83},{},[84],{"type":25,"value":85},"Pagination sits at the bottom of each page. It's a quick and easy way for users to move between each page.",{"type":19,"tag":28,"props":87,"children":88},{},[89],{"type":25,"value":90},"Use pagination if your list has 10 or more results.",{"type":19,"tag":28,"props":92,"children":93},{},[94],{"type":25,"value":95},"Pagination identifies the page each result sits on. This makes it convenient for users to find again.",{"type":19,"tag":97,"props":98,"children":100},"docs-example",{"id":99},"core-navigation-page-links--page-links",[],{"type":19,"tag":102,"props":103,"children":105},"h3",{"id":104},"when-and-how-to-use",[106],{"type":25,"value":107},"When and how to use",{"type":19,"tag":44,"props":109,"children":110},{},[111,116,121,143,148],{"type":19,"tag":48,"props":112,"children":113},{},[114],{"type":25,"value":115},"Stack standard pagination variant links vertically.",{"type":19,"tag":48,"props":117,"children":118},{},[119],{"type":25,"value":120},"Only use standard and complex variants at the bottom of the body content area.",{"type":19,"tag":48,"props":122,"children":123},{},[124,126,133,135,141],{"type":25,"value":125},"Use the simple variant nested in components, for example, the ",{"type":19,"tag":127,"props":128,"children":130},"a",{"href":129},"/design-system/components/media-gallery/",[131],{"type":25,"value":132},"media gallery",{"type":25,"value":134}," or ",{"type":19,"tag":127,"props":136,"children":138},{"href":137},"/design-system/components/carousel/",[139],{"type":25,"value":140},"carousel",{"type":25,"value":142},".",{"type":19,"tag":48,"props":144,"children":145},{},[146],{"type":25,"value":147},"Use ellipses to replace any skipped pages.",{"type":19,"tag":48,"props":149,"children":150},{},[151],{"type":25,"value":152},"Use pagination to avoid an infinite scroll of results, which can be a problem for keyboard users.",{"type":19,"tag":102,"props":154,"children":156},{"id":155},"when-and-how-not-to-use",[157],{"type":25,"value":158},"When and how not to use",{"type":19,"tag":44,"props":160,"children":161},{},[162,167,172,177],{"type":19,"tag":48,"props":163,"children":164},{},[165],{"type":25,"value":166},"Don't use pagination for one page only.",{"type":19,"tag":48,"props":168,"children":169},{},[170],{"type":25,"value":171},"Only choose one pagination variant, never mix or combine them.",{"type":19,"tag":48,"props":173,"children":174},{},[175],{"type":25,"value":176},"Always put the user first, so don't break up content if it reduces usability or performance.",{"type":19,"tag":48,"props":178,"children":179},{},[180],{"type":25,"value":181},"Don’t use for linear user journeys such as form completion.",{"type":19,"tag":183,"props":184,"children":185},"hr",{},[],{"type":19,"tag":20,"props":187,"children":189},{"id":188},"variants",[190],{"type":25,"value":191},"Variants",{"type":19,"tag":28,"props":193,"children":194},{},[195],{"type":25,"value":196},"Pagination has 3 main variants:",{"type":19,"tag":44,"props":198,"children":199},{},[200,205,210],{"type":19,"tag":48,"props":201,"children":202},{},[203],{"type":25,"value":204},"simple, for a small number of items or used in other components",{"type":19,"tag":48,"props":206,"children":207},{},[208],{"type":25,"value":209},"standard, to navigate through a small number of pages",{"type":19,"tag":48,"props":211,"children":212},{},[213],{"type":25,"value":214},"complex, when there is a large number of pages to navigate through.",{"type":19,"tag":102,"props":216,"children":218},{"id":217},"simple",[219],{"type":25,"value":220},"Simple",{"type":19,"tag":28,"props":222,"children":223},{},[224],{"type":25,"value":225},"The simple variant is for navigating through a small number of items. Use it to nest pagination in other components, like media gallery, media fullscreen and carousel.",{"type":19,"tag":97,"props":227,"children":229},{"id":228},"core-navigation-pagination--simple-tally",[],{"type":19,"tag":102,"props":231,"children":233},{"id":232},"standard",[234],{"type":25,"value":235},"Standard",{"type":19,"tag":28,"props":237,"children":238},{},[239],{"type":25,"value":240},"The standard variant is for navigating through a small number of pages. It has 2 options for label display:",{"type":19,"tag":44,"props":242,"children":243},{},[244,249],{"type":19,"tag":48,"props":245,"children":246},{},[247],{"type":25,"value":248},"page titles.",{"type":19,"tag":48,"props":250,"children":251},{},[252],{"type":25,"value":253},"page numbers.",{"type":19,"tag":28,"props":255,"children":256},{},[257],{"type":25,"value":258},"You can use page titles to give more context.",{"type":19,"tag":28,"props":260,"children":261},{},[262],{"type":25,"value":263},"When stacking the links, do it vertically. This helps screen magnifier users when they have zoomed in to better read the content.",{"type":19,"tag":28,"props":265,"children":266},{},[267],{"type":25,"value":268},"Never show the previous page link on the first page because it will confuse the user. The same goes for the next page link on the final page.",{"type":19,"tag":270,"props":271,"children":273},"h4",{"id":272},"page-title",[274],{"type":25,"value":275},"Page Title",{"type":19,"tag":97,"props":277,"children":278},{"id":99},[],{"type":19,"tag":270,"props":280,"children":282},{"id":281},"page-number",[283],{"type":25,"value":284},"Page Number",{"type":19,"tag":97,"props":286,"children":288},{"id":287},"core-navigation-page-links--example-count",[],{"type":19,"tag":102,"props":290,"children":292},{"id":291},"complex",[293],{"type":25,"value":294},"Complex",{"type":19,"tag":28,"props":296,"children":297},{},[298],{"type":25,"value":299},"The complex variant lets users navigate through a large number of pages. It's ideal for a long list of search results.",{"type":19,"tag":28,"props":301,"children":302},{},[303],{"type":25,"value":304},"The user can interact with the next and back controls to move forward and backward through the pages. The user can navigate straight to a page by selecting its specific page number.",{"type":19,"tag":28,"props":306,"children":307},{},[308],{"type":25,"value":309},"There are 3 pages that should always remain highlighted:",{"type":19,"tag":44,"props":311,"children":312},{},[313,318,323],{"type":19,"tag":48,"props":314,"children":315},{},[316],{"type":25,"value":317},"The first page.",{"type":19,"tag":48,"props":319,"children":320},{},[321],{"type":25,"value":322},"The current page.",{"type":19,"tag":48,"props":324,"children":325},{},[326],{"type":25,"value":327},"The last page.",{"type":19,"tag":28,"props":329,"children":330},{},[331],{"type":25,"value":268},{"type":19,"tag":28,"props":333,"children":334},{},[335],{"type":25,"value":336},"Display page numbers for the:",{"type":19,"tag":44,"props":338,"children":339},{},[340,345,350,355],{"type":19,"tag":48,"props":341,"children":342},{},[343],{"type":25,"value":344},"current page on all screen sizes",{"type":19,"tag":48,"props":346,"children":347},{},[348],{"type":25,"value":349},"previous and next pages on smaller screen sizes",{"type":19,"tag":48,"props":351,"children":352},{},[353],{"type":25,"value":354},"page immediately before and after the current page on larger screen sizes",{"type":19,"tag":48,"props":356,"children":357},{},[358],{"type":25,"value":359},"first and final pages on all screen sizes.",{"type":19,"tag":97,"props":361,"children":363},{"id":362},"core-navigation-pagination--complex",[],{"type":19,"tag":183,"props":365,"children":366},{},[],{"type":19,"tag":20,"props":368,"children":370},{"id":369},"theming",[371],{"type":25,"value":372},"Theming",{"type":19,"tag":28,"props":374,"children":375},{},[376],{"type":25,"value":377},"Pagination uses colour for:",{"type":19,"tag":44,"props":379,"children":380},{},[381,386],{"type":19,"tag":48,"props":382,"children":383},{},[384],{"type":25,"value":385},"icons",{"type":19,"tag":48,"props":387,"children":388},{},[389],{"type":25,"value":390},"interactive states",{"type":19,"tag":392,"props":393,"children":394},"docs-theme-chooser",{},[395,398],{"type":19,"tag":97,"props":396,"children":397},{"id":99},[],{"type":19,"tag":97,"props":399,"children":400},{"id":362},[],{"type":19,"tag":28,"props":402,"children":403},{},[404,406,411,412,417],{"type":25,"value":405},"To create your own theme, see ",{"type":19,"tag":127,"props":407,"children":408},{"href":10},[409],{"type":25,"value":410},"theming guidance for designers",{"type":25,"value":134},{"type":19,"tag":127,"props":413,"children":414},{"href":10},[415],{"type":25,"value":416},"theming guidance for developers",{"type":25,"value":142},{"title":10,"searchDepth":419,"depth":419,"links":420},2,[421,426,431],{"id":22,"depth":419,"text":26,"children":422},[423,425],{"id":104,"depth":424,"text":107},3,{"id":155,"depth":424,"text":158},{"id":188,"depth":419,"text":191,"children":427},[428,429,430],{"id":217,"depth":424,"text":220},{"id":232,"depth":424,"text":235},{"id":291,"depth":424,"text":294},{"id":369,"depth":419,"text":372},"markdown","content:design-system:5.components:pagination.md","content","design-system/5.components/pagination.md","md",["ShallowRef",438],["ShallowReactive",439],{"/design-system/components/pagination":440},[441,447],{"_path":442,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":443,"description":444,"layout":13,"label":14,"_type":432,"_id":445,"_source":434,"_file":446,"_extension":436},"/design-system/components/page-action","Page action","The Page action component presents a collection of links that offer users a choice of actions, such as printing or downloading a document.","content:design-system:5.components:page-action.md","design-system/5.components/page-action.md",{"_path":448,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":449,"description":450,"layout":13,"label":14,"_type":432,"_id":451,"_source":434,"_file":452,"_extension":436},"/design-system/components/primary-navigation","Primary navigation","The Primary navigation component appears as a menu sitting at the top of the page and contains links to site’s content pages.","content:design-system:5.components:primary-navigation.md","design-system/5.components/primary-navigation.md",["ShallowRef",454],{},[456,461,702],{"title":457,"_path":458,"icon":459,"layout":460},"Ripple Design System","/","carbon:home","home",{"title":462,"_path":463,"children":464},"Design System","/design-system",[465,481,497,526,560],{"title":466,"_path":467,"children":468},"About","/design-system/about",[469,472,475,478],{"title":470,"_path":471,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":473,"_path":474,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":476,"_path":477,"layout":13},"Support","/design-system/about/getting-support",{"title":479,"_path":480,"layout":13},"Contributing","/design-system/about/contributing",{"title":482,"_path":483,"children":484},"Design","/design-system/design",[485,488,491,494],{"title":486,"_path":487,"layout":13},"Getting started","/design-system/design/getting-started",{"title":489,"_path":490,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":492,"_path":493,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":495,"_path":496,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":498,"_path":499,"children":500},"Develop","/design-system/develop",[501,503,505,508],{"title":486,"_path":502,"layout":13},"/design-system/develop/getting-started",{"title":479,"_path":504,"layout":13},"/design-system/develop/contributing",{"title":506,"_path":507,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":509,"children":510,"layout":13},"/design-system/develop/usage",[511,514,517,520,523],{"title":512,"_path":513,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":515,"_path":516,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":518,"_path":519,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":521,"_path":522,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":524,"_path":525,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":527,"_path":528,"children":529},"Styles","/design-system/styles",[530,533,536,539,542,545,548,551,554,557],{"title":531,"_path":532,"layout":13},"Colour","/design-system/styles/colour",{"title":534,"_path":535,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":537,"_path":538,"layout":13},"Grid","/design-system/styles/grid",{"title":540,"_path":541,"layout":13},"Icons","/design-system/styles/icons",{"title":543,"_path":544,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":546,"_path":547,"layout":13},"Layout","/design-system/styles/layout",{"title":549,"_path":550,"layout":13},"Logo","/design-system/styles/logo",{"title":552,"_path":553,"layout":13},"Motion","/design-system/styles/motion",{"title":555,"_path":556,"layout":13},"Spacing","/design-system/styles/spacing",{"title":558,"_path":559,"layout":13},"Typography","/design-system/styles/typography",{"title":561,"_path":562,"children":563},"Components","/design-system/components",[564,567,570,573,576,579,582,585,588,591,594,597,600,603,606,609,612,615,618,621,624,627,630,633,636,639,642,645,648,651,654,657,658,659,660,663,666,669,672,675,678,681,684,687,690,693,696,699],{"title":565,"_path":566,"layout":13},"Accordion","/design-system/components/accordion",{"title":568,"_path":569,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":571,"_path":572,"layout":13},"Alert","/design-system/components/alert",{"title":574,"_path":575,"layout":13},"Block quote","/design-system/components/block-quote",{"title":577,"_path":578,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":580,"_path":581,"layout":13},"Button","/design-system/components/button",{"title":583,"_path":584,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":586,"_path":587,"layout":13},"Callout","/design-system/components/callout",{"title":589,"_path":590,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":592,"_path":593,"layout":13},"Card","/design-system/components/card",{"title":595,"_path":596,"layout":13},"Carousel","/design-system/components/carousel",{"title":598,"_path":599,"layout":13},"Category grid","/design-system/components/category-grid",{"title":601,"_path":602,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":604,"_path":605,"layout":13},"Chip","/design-system/components/chip",{"title":607,"_path":608,"layout":13},"Contact us","/design-system/components/contact-us",{"title":610,"_path":611,"layout":13},"Date input","/design-system/components/date-input",{"title":613,"_path":614,"layout":13},"Detail list","/design-system/components/detail-list",{"title":616,"_path":617,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":619,"_path":620,"layout":13},"File","/design-system/components/file",{"title":622,"_path":623,"layout":13},"Footer","/design-system/components/footer",{"title":625,"_path":626,"layout":13},"Form","/design-system/components/form",{"title":628,"_path":629,"layout":13},"Form alert","/design-system/components/form-alert",{"title":631,"_path":632,"layout":13},"Header","/design-system/components/header",{"title":634,"_path":635,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":637,"_path":638,"layout":13},"Input field","/design-system/components/input-field",{"title":640,"_path":641,"layout":13},"Key dates","/design-system/components/key-dates",{"title":643,"_path":644,"layout":13},"Media","/design-system/components/media",{"title":646,"_path":647,"layout":13},"Media embed","/design-system/components/media-embed",{"title":649,"_path":650,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":652,"_path":653,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":655,"_path":656,"layout":13},"Option button","/design-system/components/option-button",{"title":443,"_path":442,"layout":13},{"title":11,"_path":7,"layout":13},{"title":449,"_path":448,"layout":13},{"title":661,"_path":662,"layout":13},"Profile","/design-system/components/profile",{"title":664,"_path":665,"layout":13},"Radio button","/design-system/components/radio-button",{"title":667,"_path":668,"layout":13},"Related links","/design-system/components/related-links",{"title":670,"_path":671,"layout":13},"Results listing","/design-system/components/results-listing",{"title":673,"_path":674,"layout":13},"Search bar","/design-system/components/search-bar",{"title":676,"_path":677,"layout":13},"Skip link","/design-system/components/skip-link",{"title":679,"_path":680,"layout":13},"Social share","/design-system/components/social-share",{"title":682,"_path":683,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":685,"_path":686,"layout":13},"Table","/design-system/components/table",{"title":688,"_path":689,"layout":13},"Tabs","/design-system/components/tabs",{"title":691,"_path":692,"layout":13},"Tag","/design-system/components/tag",{"title":694,"_path":695,"layout":13},"Text area","/design-system/components/text-area",{"title":697,"_path":698,"layout":13},"Timeline","/design-system/components/timeline",{"title":700,"_path":701,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":703,"_path":704,"children":705,"layout":13},"Ripple Framework","/framework",[706,707,725,747],{"title":703,"_path":704,"layout":13},{"title":708,"_path":709,"children":710},"Key Concepts","/framework/key-concepts",[711,713,716,719,722],{"title":518,"_path":712,"layout":13},"/framework/key-concepts/nuxt",{"title":714,"_path":715,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":717,"_path":718,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":720,"_path":721,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":723,"_path":724,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":726,"_path":727,"children":728},"Guides","/framework/guides",[729,732,735,738,741,744],{"title":730,"_path":731,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":733,"_path":734,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":736,"_path":737,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":739,"_path":740,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":742,"_path":743,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":745,"_path":746,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":748,"_path":749,"layout":13},"Core modules","/framework/core-modules",["Reactive",751],["Set"],["Reactive",753],{"module-navigation":754},null,true,1714695154424]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Pagination</h1><p class="rpl-type-p-large" data-v-3163c6df>The Pagination component divides your content across more than one page into smaller lists to help users navigate forward and backwards.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use pagination to help users navigate forwards and backwards through your content.<!--]--></p><p><!--[-->Pagination breaks down content, making it more concise and less overwhelming. It does this by dividing your content across more than one page and into smaller lists. This makes it easier for users to find what they need.<!--]--></p><p><!--[-->Examples include:<!--]--></p><ul><!--[--><li><!--[-->search results or guidance divided into multiple website pages<!--]--></li><li><!--[-->a collection of cards or media items.<!--]--></li><!--]--></ul><p><!--[-->Pagination helps users to identify:<!--]--></p><ul><!--[--><li><!--[-->how many pages or items they can navigate through<!--]--></li><li><!--[-->where the page or item they are viewing sits in the order of other pages or items<!--]--></li><li><!--[-->how they can immediately navigate to other pages or items.<!--]--></li><!--]--></ul><p><!--[-->Pagination sits at the bottom of each page. It&#39;s a quick and easy way for users to move between each page.<!--]--></p><p><!--[-->Use pagination if your list has 10 or more results.<!--]--></p><p><!--[-->Pagination identifies the page each result sits on. This makes it convenient for users to find again.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-page-links--page-links&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-page-links--page-links&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Stack standard pagination variant links vertically.<!--]--></li><li><!--[-->Only use standard and complex variants at the bottom of the body content area.<!--]--></li><li><!--[-->Use the simple variant nested in components, for example, the <a href="/design-system/components/media-gallery/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->media gallery<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/components/carousel/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->carousel<!--]--><!--]--><!----><!--]--></a>.<!--]--></li><li><!--[-->Use ellipses to replace any skipped pages.<!--]--></li><li><!--[-->Use pagination to avoid an infinite scroll of results, which can be a problem for keyboard users.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t use pagination for one page only.<!--]--></li><li><!--[-->Only choose one pagination variant, never mix or combine them.<!--]--></li><li><!--[-->Always put the user first, so don&#39;t break up content if it reduces usability or performance.<!--]--></li><li><!--[-->Don’t use for linear user journeys such as form completion.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->Pagination has 3 main variants:<!--]--></p><ul><!--[--><li><!--[-->simple, for a small number of items or used in other components<!--]--></li><li><!--[-->standard, to navigate through a small number of pages<!--]--></li><li><!--[-->complex, when there is a large number of pages to navigate through.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="simple" data-v-ea525968><a href="#simple" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Simple<!--]--></a></h2><p><!--[-->The simple variant is for navigating through a small number of items. Use it to nest pagination in other components, like media gallery, media fullscreen and carousel.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-pagination--simple-tally&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-pagination--simple-tally&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="standard" data-v-ea525968><a href="#standard" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Standard<!--]--></a></h2><p><!--[-->The standard variant is for navigating through a small number of pages. It has 2 options for label display:<!--]--></p><ul><!--[--><li><!--[-->page titles.<!--]--></li><li><!--[-->page numbers.<!--]--></li><!--]--></ul><p><!--[-->You can use page titles to give more context.<!--]--></p><p><!--[-->When stacking the links, do it vertically. This helps screen magnifier users when they have zoomed in to better read the content.<!--]--></p><p><!--[-->Never show the previous page link on the first page because it will confuse the user. The same goes for the next page link on the final page.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="page-title"><!--[-->Page Title<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-page-links--page-links&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-page-links--page-links&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h4 class="rpl-type-h4 docs-h4" id="page-number"><!--[-->Page Number<!--]--></h4><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-page-links--example-count&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-page-links--example-count&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="complex" data-v-ea525968><a href="#complex" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Complex<!--]--></a></h2><p><!--[-->The complex variant lets users navigate through a large number of pages. It&#39;s ideal for a long list of search results.<!--]--></p><p><!--[-->The user can interact with the next and back controls to move forward and backward through the pages. The user can navigate straight to a page by selecting its specific page number.<!--]--></p><p><!--[-->There are 3 pages that should always remain highlighted:<!--]--></p><ul><!--[--><li><!--[-->The first page.<!--]--></li><li><!--[-->The current page.<!--]--></li><li><!--[-->The last page.<!--]--></li><!--]--></ul><p><!--[-->Never show the previous page link on the first page because it will confuse the user. The same goes for the next page link on the final page.<!--]--></p><p><!--[-->Display page numbers for the:<!--]--></p><ul><!--[--><li><!--[-->current page on all screen sizes<!--]--></li><li><!--[-->previous and next pages on smaller screen sizes<!--]--></li><li><!--[-->page immediately before and after the current page on larger screen sizes<!--]--></li><li><!--[-->first and final pages on all screen sizes.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-pagination--complex&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-pagination--complex&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Pagination uses colour for:<!--]--></p><ul><!--[--><li><!--[-->icons<!--]--></li><li><!--[-->interactive states<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-page-links--page-links&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-page-links--page-links&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-pagination--complex&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-pagination--complex&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/pagination.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/pagination/_payload.json">[{"state":1,"once":750,"_errors":752,"serverRendered":755,"path":7,"prerenderedAt":756},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":437,"$sdd-globals":453,"$sdd-navigation":455},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/pagination":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":432,"_id":433,"_source":434,"_file":435,"_extension":436},"/design-system/components/pagination","components",false,"","Pagination","The Pagination component divides your content across more than one page into smaller lists to help users navigate forward and backwards.","page","Core",{"type":16,"children":17,"toc":418},"root",[18,27,33,38,43,58,63,81,86,91,96,101,108,153,159,182,186,192,197,215,221,226,230,236,241,254,259,264,269,276,279,285,289,295,300,305,310,328,332,337,360,364,367,373,378,391,401],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use pagination to help users navigate forwards and backwards through your content.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Pagination breaks down content, making it more concise and less overwhelming. It does this by dividing your content across more than one page and into smaller lists. This makes it easier for users to find what they need.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Examples include:",{"type":19,"tag":44,"props":45,"children":46},"ul",{},[47,53],{"type":19,"tag":48,"props":49,"children":50},"li",{},[51],{"type":25,"value":52},"search results or guidance divided into multiple website pages",{"type":19,"tag":48,"props":54,"children":55},{},[56],{"type":25,"value":57},"a collection of cards or media items.",{"type":19,"tag":28,"props":59,"children":60},{},[61],{"type":25,"value":62},"Pagination helps users to identify:",{"type":19,"tag":44,"props":64,"children":65},{},[66,71,76],{"type":19,"tag":48,"props":67,"children":68},{},[69],{"type":25,"value":70},"how many pages or items they can navigate through",{"type":19,"tag":48,"props":72,"children":73},{},[74],{"type":25,"value":75},"where the page or item they are viewing sits in the order of other pages or items",{"type":19,"tag":48,"props":77,"children":78},{},[79],{"type":25,"value":80},"how they can immediately navigate to other pages or items.",{"type":19,"tag":28,"props":82,"children":83},{},[84],{"type":25,"value":85},"Pagination sits at the bottom of each page. It's a quick and easy way for users to move between each page.",{"type":19,"tag":28,"props":87,"children":88},{},[89],{"type":25,"value":90},"Use pagination if your list has 10 or more results.",{"type":19,"tag":28,"props":92,"children":93},{},[94],{"type":25,"value":95},"Pagination identifies the page each result sits on. This makes it convenient for users to find again.",{"type":19,"tag":97,"props":98,"children":100},"docs-example",{"id":99},"core-navigation-page-links--page-links",[],{"type":19,"tag":102,"props":103,"children":105},"h3",{"id":104},"when-and-how-to-use",[106],{"type":25,"value":107},"When and how to use",{"type":19,"tag":44,"props":109,"children":110},{},[111,116,121,143,148],{"type":19,"tag":48,"props":112,"children":113},{},[114],{"type":25,"value":115},"Stack standard pagination variant links vertically.",{"type":19,"tag":48,"props":117,"children":118},{},[119],{"type":25,"value":120},"Only use standard and complex variants at the bottom of the body content area.",{"type":19,"tag":48,"props":122,"children":123},{},[124,126,133,135,141],{"type":25,"value":125},"Use the simple variant nested in components, for example, the ",{"type":19,"tag":127,"props":128,"children":130},"a",{"href":129},"/design-system/components/media-gallery/",[131],{"type":25,"value":132},"media gallery",{"type":25,"value":134}," or ",{"type":19,"tag":127,"props":136,"children":138},{"href":137},"/design-system/components/carousel/",[139],{"type":25,"value":140},"carousel",{"type":25,"value":142},".",{"type":19,"tag":48,"props":144,"children":145},{},[146],{"type":25,"value":147},"Use ellipses to replace any skipped pages.",{"type":19,"tag":48,"props":149,"children":150},{},[151],{"type":25,"value":152},"Use pagination to avoid an infinite scroll of results, which can be a problem for keyboard users.",{"type":19,"tag":102,"props":154,"children":156},{"id":155},"when-and-how-not-to-use",[157],{"type":25,"value":158},"When and how not to use",{"type":19,"tag":44,"props":160,"children":161},{},[162,167,172,177],{"type":19,"tag":48,"props":163,"children":164},{},[165],{"type":25,"value":166},"Don't use pagination for one page only.",{"type":19,"tag":48,"props":168,"children":169},{},[170],{"type":25,"value":171},"Only choose one pagination variant, never mix or combine them.",{"type":19,"tag":48,"props":173,"children":174},{},[175],{"type":25,"value":176},"Always put the user first, so don't break up content if it reduces usability or performance.",{"type":19,"tag":48,"props":178,"children":179},{},[180],{"type":25,"value":181},"Don’t use for linear user journeys such as form completion.",{"type":19,"tag":183,"props":184,"children":185},"hr",{},[],{"type":19,"tag":20,"props":187,"children":189},{"id":188},"variants",[190],{"type":25,"value":191},"Variants",{"type":19,"tag":28,"props":193,"children":194},{},[195],{"type":25,"value":196},"Pagination has 3 main variants:",{"type":19,"tag":44,"props":198,"children":199},{},[200,205,210],{"type":19,"tag":48,"props":201,"children":202},{},[203],{"type":25,"value":204},"simple, for a small number of items or used in other components",{"type":19,"tag":48,"props":206,"children":207},{},[208],{"type":25,"value":209},"standard, to navigate through a small number of pages",{"type":19,"tag":48,"props":211,"children":212},{},[213],{"type":25,"value":214},"complex, when there is a large number of pages to navigate through.",{"type":19,"tag":102,"props":216,"children":218},{"id":217},"simple",[219],{"type":25,"value":220},"Simple",{"type":19,"tag":28,"props":222,"children":223},{},[224],{"type":25,"value":225},"The simple variant is for navigating through a small number of items. Use it to nest pagination in other components, like media gallery, media fullscreen and carousel.",{"type":19,"tag":97,"props":227,"children":229},{"id":228},"core-navigation-pagination--simple-tally",[],{"type":19,"tag":102,"props":231,"children":233},{"id":232},"standard",[234],{"type":25,"value":235},"Standard",{"type":19,"tag":28,"props":237,"children":238},{},[239],{"type":25,"value":240},"The standard variant is for navigating through a small number of pages. It has 2 options for label display:",{"type":19,"tag":44,"props":242,"children":243},{},[244,249],{"type":19,"tag":48,"props":245,"children":246},{},[247],{"type":25,"value":248},"page titles.",{"type":19,"tag":48,"props":250,"children":251},{},[252],{"type":25,"value":253},"page numbers.",{"type":19,"tag":28,"props":255,"children":256},{},[257],{"type":25,"value":258},"You can use page titles to give more context.",{"type":19,"tag":28,"props":260,"children":261},{},[262],{"type":25,"value":263},"When stacking the links, do it vertically. This helps screen magnifier users when they have zoomed in to better read the content.",{"type":19,"tag":28,"props":265,"children":266},{},[267],{"type":25,"value":268},"Never show the previous page link on the first page because it will confuse the user. The same goes for the next page link on the final page.",{"type":19,"tag":270,"props":271,"children":273},"h4",{"id":272},"page-title",[274],{"type":25,"value":275},"Page Title",{"type":19,"tag":97,"props":277,"children":278},{"id":99},[],{"type":19,"tag":270,"props":280,"children":282},{"id":281},"page-number",[283],{"type":25,"value":284},"Page Number",{"type":19,"tag":97,"props":286,"children":288},{"id":287},"core-navigation-page-links--example-count",[],{"type":19,"tag":102,"props":290,"children":292},{"id":291},"complex",[293],{"type":25,"value":294},"Complex",{"type":19,"tag":28,"props":296,"children":297},{},[298],{"type":25,"value":299},"The complex variant lets users navigate through a large number of pages. It's ideal for a long list of search results.",{"type":19,"tag":28,"props":301,"children":302},{},[303],{"type":25,"value":304},"The user can interact with the next and back controls to move forward and backward through the pages. The user can navigate straight to a page by selecting its specific page number.",{"type":19,"tag":28,"props":306,"children":307},{},[308],{"type":25,"value":309},"There are 3 pages that should always remain highlighted:",{"type":19,"tag":44,"props":311,"children":312},{},[313,318,323],{"type":19,"tag":48,"props":314,"children":315},{},[316],{"type":25,"value":317},"The first page.",{"type":19,"tag":48,"props":319,"children":320},{},[321],{"type":25,"value":322},"The current page.",{"type":19,"tag":48,"props":324,"children":325},{},[326],{"type":25,"value":327},"The last page.",{"type":19,"tag":28,"props":329,"children":330},{},[331],{"type":25,"value":268},{"type":19,"tag":28,"props":333,"children":334},{},[335],{"type":25,"value":336},"Display page numbers for the:",{"type":19,"tag":44,"props":338,"children":339},{},[340,345,350,355],{"type":19,"tag":48,"props":341,"children":342},{},[343],{"type":25,"value":344},"current page on all screen sizes",{"type":19,"tag":48,"props":346,"children":347},{},[348],{"type":25,"value":349},"previous and next pages on smaller screen sizes",{"type":19,"tag":48,"props":351,"children":352},{},[353],{"type":25,"value":354},"page immediately before and after the current page on larger screen sizes",{"type":19,"tag":48,"props":356,"children":357},{},[358],{"type":25,"value":359},"first and final pages on all screen sizes.",{"type":19,"tag":97,"props":361,"children":363},{"id":362},"core-navigation-pagination--complex",[],{"type":19,"tag":183,"props":365,"children":366},{},[],{"type":19,"tag":20,"props":368,"children":370},{"id":369},"theming",[371],{"type":25,"value":372},"Theming",{"type":19,"tag":28,"props":374,"children":375},{},[376],{"type":25,"value":377},"Pagination uses colour for:",{"type":19,"tag":44,"props":379,"children":380},{},[381,386],{"type":19,"tag":48,"props":382,"children":383},{},[384],{"type":25,"value":385},"icons",{"type":19,"tag":48,"props":387,"children":388},{},[389],{"type":25,"value":390},"interactive states",{"type":19,"tag":392,"props":393,"children":394},"docs-theme-chooser",{},[395,398],{"type":19,"tag":97,"props":396,"children":397},{"id":99},[],{"type":19,"tag":97,"props":399,"children":400},{"id":362},[],{"type":19,"tag":28,"props":402,"children":403},{},[404,406,411,412,417],{"type":25,"value":405},"To create your own theme, see ",{"type":19,"tag":127,"props":407,"children":408},{"href":10},[409],{"type":25,"value":410},"theming guidance for designers",{"type":25,"value":134},{"type":19,"tag":127,"props":413,"children":414},{"href":10},[415],{"type":25,"value":416},"theming guidance for developers",{"type":25,"value":142},{"title":10,"searchDepth":419,"depth":419,"links":420},2,[421,426,431],{"id":22,"depth":419,"text":26,"children":422},[423,425],{"id":104,"depth":424,"text":107},3,{"id":155,"depth":424,"text":158},{"id":188,"depth":419,"text":191,"children":427},[428,429,430],{"id":217,"depth":424,"text":220},{"id":232,"depth":424,"text":235},{"id":291,"depth":424,"text":294},{"id":369,"depth":419,"text":372},"markdown","content:design-system:5.components:pagination.md","content","design-system/5.components/pagination.md","md",["ShallowRef",438],["ShallowReactive",439],{"/design-system/components/pagination":440},[441,447],{"_path":442,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":443,"description":444,"layout":13,"label":14,"_type":432,"_id":445,"_source":434,"_file":446,"_extension":436},"/design-system/components/page-action","Page action","The Page action component presents a collection of links that offer users a choice of actions, such as printing or downloading a document.","content:design-system:5.components:page-action.md","design-system/5.components/page-action.md",{"_path":448,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":449,"description":450,"layout":13,"label":14,"_type":432,"_id":451,"_source":434,"_file":452,"_extension":436},"/design-system/components/primary-navigation","Primary navigation","The Primary navigation component appears as a menu sitting at the top of the page and contains links to site’s content pages.","content:design-system:5.components:primary-navigation.md","design-system/5.components/primary-navigation.md",["ShallowRef",454],{},[456,461,702],{"title":457,"_path":458,"icon":459,"layout":460},"Ripple Design System","/","carbon:home","home",{"title":462,"_path":463,"children":464},"Design System","/design-system",[465,481,497,526,560],{"title":466,"_path":467,"children":468},"About","/design-system/about",[469,472,475,478],{"title":470,"_path":471,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":473,"_path":474,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":476,"_path":477,"layout":13},"Support","/design-system/about/getting-support",{"title":479,"_path":480,"layout":13},"Contributing","/design-system/about/contributing",{"title":482,"_path":483,"children":484},"Design","/design-system/design",[485,488,491,494],{"title":486,"_path":487,"layout":13},"Getting started","/design-system/design/getting-started",{"title":489,"_path":490,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":492,"_path":493,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":495,"_path":496,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":498,"_path":499,"children":500},"Develop","/design-system/develop",[501,503,505,508],{"title":486,"_path":502,"layout":13},"/design-system/develop/getting-started",{"title":479,"_path":504,"layout":13},"/design-system/develop/contributing",{"title":506,"_path":507,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":509,"children":510,"layout":13},"/design-system/develop/usage",[511,514,517,520,523],{"title":512,"_path":513,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":515,"_path":516,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":518,"_path":519,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":521,"_path":522,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":524,"_path":525,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":527,"_path":528,"children":529},"Styles","/design-system/styles",[530,533,536,539,542,545,548,551,554,557],{"title":531,"_path":532,"layout":13},"Colour","/design-system/styles/colour",{"title":534,"_path":535,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":537,"_path":538,"layout":13},"Grid","/design-system/styles/grid",{"title":540,"_path":541,"layout":13},"Icons","/design-system/styles/icons",{"title":543,"_path":544,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":546,"_path":547,"layout":13},"Layout","/design-system/styles/layout",{"title":549,"_path":550,"layout":13},"Logo","/design-system/styles/logo",{"title":552,"_path":553,"layout":13},"Motion","/design-system/styles/motion",{"title":555,"_path":556,"layout":13},"Spacing","/design-system/styles/spacing",{"title":558,"_path":559,"layout":13},"Typography","/design-system/styles/typography",{"title":561,"_path":562,"children":563},"Components","/design-system/components",[564,567,570,573,576,579,582,585,588,591,594,597,600,603,606,609,612,615,618,621,624,627,630,633,636,639,642,645,648,651,654,657,658,659,660,663,666,669,672,675,678,681,684,687,690,693,696,699],{"title":565,"_path":566,"layout":13},"Accordion","/design-system/components/accordion",{"title":568,"_path":569,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":571,"_path":572,"layout":13},"Alert","/design-system/components/alert",{"title":574,"_path":575,"layout":13},"Block quote","/design-system/components/block-quote",{"title":577,"_path":578,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":580,"_path":581,"layout":13},"Button","/design-system/components/button",{"title":583,"_path":584,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":586,"_path":587,"layout":13},"Callout","/design-system/components/callout",{"title":589,"_path":590,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":592,"_path":593,"layout":13},"Card","/design-system/components/card",{"title":595,"_path":596,"layout":13},"Carousel","/design-system/components/carousel",{"title":598,"_path":599,"layout":13},"Category grid","/design-system/components/category-grid",{"title":601,"_path":602,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":604,"_path":605,"layout":13},"Chip","/design-system/components/chip",{"title":607,"_path":608,"layout":13},"Contact us","/design-system/components/contact-us",{"title":610,"_path":611,"layout":13},"Date input","/design-system/components/date-input",{"title":613,"_path":614,"layout":13},"Detail list","/design-system/components/detail-list",{"title":616,"_path":617,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":619,"_path":620,"layout":13},"File","/design-system/components/file",{"title":622,"_path":623,"layout":13},"Footer","/design-system/components/footer",{"title":625,"_path":626,"layout":13},"Form","/design-system/components/form",{"title":628,"_path":629,"layout":13},"Form alert","/design-system/components/form-alert",{"title":631,"_path":632,"layout":13},"Header","/design-system/components/header",{"title":634,"_path":635,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":637,"_path":638,"layout":13},"Input field","/design-system/components/input-field",{"title":640,"_path":641,"layout":13},"Key dates","/design-system/components/key-dates",{"title":643,"_path":644,"layout":13},"Media","/design-system/components/media",{"title":646,"_path":647,"layout":13},"Media embed","/design-system/components/media-embed",{"title":649,"_path":650,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":652,"_path":653,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":655,"_path":656,"layout":13},"Option button","/design-system/components/option-button",{"title":443,"_path":442,"layout":13},{"title":11,"_path":7,"layout":13},{"title":449,"_path":448,"layout":13},{"title":661,"_path":662,"layout":13},"Profile","/design-system/components/profile",{"title":664,"_path":665,"layout":13},"Radio button","/design-system/components/radio-button",{"title":667,"_path":668,"layout":13},"Related links","/design-system/components/related-links",{"title":670,"_path":671,"layout":13},"Results listing","/design-system/components/results-listing",{"title":673,"_path":674,"layout":13},"Search bar","/design-system/components/search-bar",{"title":676,"_path":677,"layout":13},"Skip link","/design-system/components/skip-link",{"title":679,"_path":680,"layout":13},"Social share","/design-system/components/social-share",{"title":682,"_path":683,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":685,"_path":686,"layout":13},"Table","/design-system/components/table",{"title":688,"_path":689,"layout":13},"Tabs","/design-system/components/tabs",{"title":691,"_path":692,"layout":13},"Tag","/design-system/components/tag",{"title":694,"_path":695,"layout":13},"Text area","/design-system/components/text-area",{"title":697,"_path":698,"layout":13},"Timeline","/design-system/components/timeline",{"title":700,"_path":701,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":703,"_path":704,"children":705,"layout":13},"Ripple Framework","/framework",[706,707,725,747],{"title":703,"_path":704,"layout":13},{"title":708,"_path":709,"children":710},"Key Concepts","/framework/key-concepts",[711,713,716,719,722],{"title":518,"_path":712,"layout":13},"/framework/key-concepts/nuxt",{"title":714,"_path":715,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":717,"_path":718,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":720,"_path":721,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":723,"_path":724,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":726,"_path":727,"children":728},"Guides","/framework/guides",[729,732,735,738,741,744],{"title":730,"_path":731,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":733,"_path":734,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":736,"_path":737,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":739,"_path":740,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":742,"_path":743,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":745,"_path":746,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":748,"_path":749,"layout":13},"Core modules","/framework/core-modules",["Reactive",751],["Set"],["Reactive",753],{"module-navigation":754},null,true,1714695652547]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/primary-navigation/_payload.json b/design-system/components/primary-navigation/_payload.json
index 5404667010..6160618582 100644
--- a/design-system/components/primary-navigation/_payload.json
+++ b/design-system/components/primary-navigation/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695155836]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695653940]
\ No newline at end of file
diff --git a/design-system/components/primary-navigation/index.html b/design-system/components/primary-navigation/index.html
index 0d8b1f643b..c144ab84b8 100644
--- a/design-system/components/primary-navigation/index.html
+++ b/design-system/components/primary-navigation/index.html
@@ -28,65 +28,65 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.lp_k9Hpd.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.CwUV-MIb.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.Czpq-HHw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.gK7ORMEc.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -98,8 +98,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Primary navigation</h1><p class="rpl-type-p-large" data-v-3163c6df>The Primary navigation component appears as a menu sitting at the top of the page and contains links to site’s content pages.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use primary navigation to help users get to where they need to go. It shows links to key areas of the website and guides users to the content they are looking for. The main way users journey through your site should be through primary navigation.<!--]--></p><p><!--[-->Use primary navigation to let users identify where they are. It helps users know their current page location within the overall site.<!--]--></p><p><!--[-->The primary navigation contains:<!--]--></p><ul><!--[--><li><!--[-->a site logo<!--]--></li><li><!--[-->navigation links<!--]--></li><li><!--[-->optional search link.<!--]--></li><!--]--></ul><p><!--[-->The navigation and search links expand to either a fullscreen menu or search bar.<!--]--></p><p><!--[-->The primary navigation always sits at the top of the page. It displays above all page content and components.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-primary-nav--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-primary-nav--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="how-this-component-works" data-v-ea525968><a href="#how-this-component-works" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->How this component works<!--]--></a></h2><h4 class="rpl-type-h4 docs-h4" id="logo"><!--[-->Logo<!--]--></h4><p><!--[-->The logo lets users instantly recognise which organisation or entity owns the current page. When users interact with the logo, it should direct them to the site’s homepage.<!--]--></p><p><!--[-->Within the primary navigation component, the logo is centred vertically.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="co-branding-logos"><!--[-->Co-branding logos<!--]--></h4><p><!--[-->Primary navigation allows for co-branding when required. The maximum size a co-branded logo can appear is 40h x 140w pixels.<!--]--></p><p><!--[-->See <a href="/design-system/styles/logo/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->logo<!--]--><!--]--><!----><!--]--></a> for guidance and requirements including co-branding.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="navigation-links"><!--[-->Navigation links<!--]--></h4><p><!--[-->The primary navigation displays the top level of the site’s information architecture (IA). When the link has child pages, a chevron (a v-shaped arrow icon) displays next to the top page name. When clicked, this opens the mega menu and displays the child pages.<!--]--></p><p><!--[-->When there are no child pages, there is no chevron and it takes users to the page.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="mega-menu"><!--[-->Mega menu<!--]--></h4><p><!--[-->The mega menu gives users access to pages deeper in the site. Use it if your site or service has more than one level of navigation. If a mega menu item has a chevron, users can expand it to display its child pages.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="search-menu"><!--[-->Search menu<!--]--></h4><p><!--[-->The menu can display a search bar to provide users the option to perform a site search.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="smaller-devices"><!--[-->Smaller devices<!--]--></h4><p><!--[-->The primary navigation adapts to small devices. The breakpoint for displaying the collapsed menu is 992px.<!--]--></p><p><!--[-->On smaller devices primary navigation shows as a dropdown showing only one labelled menu item. It contains more levels of navigation options, which remain hidden until the single dropdown is interacted with and opens.<!--]--></p><p><!--[-->To aim to conform with <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv.html" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->WCAG2.0 Criterion 1.1.1<!--]--><!--]--><!----><!--]--></a>, and for increased consistency across screens sizes, the primary navigation:<!--]--></p><ul><!--[--><li><!--[-->uses the menu label and a chevron<!--]--></li><li><!--[-->doesn&#39;t use the 3 bar, or &#39;hamburger&#39;, menu icon.<!--]--></li><!--]--></ul><blockquote class="rpl-callout"><!--[--><p><!--[-->1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.<!--]--></p><!--]--></blockquote><h4 class="rpl-type-h4 docs-h4" id="responsive-behaviour"><!--[-->Responsive behaviour<!--]--></h4><p><!--[-->Primary navigation supports only a small number of items. This is because it is a horizontal list.<!--]--></p><p><!--[-->Take this into account when defining your site&#39;s IA.<!--]--></p><p><!--[-->A maximum number of links can display before the navigation bar will respond to the collapsed menu display.<!--]--></p><p><!--[-->When used with a single logo:<!--]--></p><ul><!--[--><li><!--[-->992-1199px breakpoint can display 6 links (including search)<!--]--></li><li><!--[-->1200+ breakpoint can display 7 links (including search).<!--]--></li><!--]--></ul><p><!--[-->When used with a co-branded logo:<!--]--></p><ul><!--[--><li><!--[-->992-1199px breakpoint can display 5 links (including search)<!--]--></li><li><!--[-->1200+ breakpoint can display 6 links (including search).<!--]--></li><!--]--></ul><p><!--[-->When using the collapsed menu in the navigation bar, the mega menu will also display the mobile (collapsed) version.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="scroll-behaviour"><!--[-->Scroll behaviour<!--]--></h4><p><!--[-->The primary navigation has show and hide behaviour on user scroll.<!--]--></p><ul><!--[--><li><!--[-->Scroll down: the primary navigation hides from view.<!--]--></li><li><!--[-->Scroll up: the primary navigation shows at the top of the viewport.<!--]--></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="interaction-with-other-components"><!--[-->Interaction with other components<!--]--></h4><p><!--[-->When a site has a quick exit button (a button component that uses the destructive variant), it sits underneath the primary navigation. If the user opens the mega menu or search menu, the quick exit button moves inside the menu container. So the quick exit action will always be available to users.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use across all pages of your site.<!--]--></li><li><!--[-->Use descriptive, recognisable link labels.<!--]--></li><li><!--[-->Display links in priority order: move from left (for most-used links) to right (for least-used links).<!--]--></li><li><!--[-->Base your navigation&#39;s structure on user research.<!--]--></li><li><!--[-->Structure navigation to prioritise tasks and information your research says users need the most.<!--]--></li><li><!--[-->Use with optional user action, such as login, if required.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t label links with jargon or unfamiliar terms.<!--]--></li><li><!--[-->Don&#39;t use more than 150 characters per menu item.<!--]--></li><li><!--[-->Hover should never be used to expand dropdown lists as it is not reliably accessible or responsive.<!--]--></li><li><!--[-->An organisational structure should not be used as a navigation stucture.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Primary navigation uses colour for:<!--]--></p><ul><!--[--><li><!--[-->visual prominence and brand recognition<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><p><!--[-->Primary navigation also adopts its theming from the search bar component.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-primary-nav--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-primary-nav--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="accessibility" data-v-fff5b905><a href="#accessibility" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Accessibility<!--]--></a></h2><p><!--[-->To aim to conform with <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->WCAG2.2 Criterion 2.5.8<!--]--><!--]--><!----><!--]--></a>, the primary navigation bar uses the space either side of menu items. This allows for increased touch targets and the use of the block focus state styling.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[-->2.5.8 Target Size (Minimum) The size of the <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-target" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->target<!--]--><!--]--><!----><!--]--></a> for <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-pointer-input" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->pointer inputs<!--]--><!--]--><!----><!--]--></a> is at least 24 by 24 <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-css-pixel" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->CSS pixels<!--]--><!--]--><!----><!--]--></a>,<!--]--></p><!--]--></blockquote><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/primary-navigation.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/primary-navigation/_payload.json">[{"state":1,"once":810,"_errors":812,"serverRendered":815,"path":816,"prerenderedAt":817},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":498,"$sdd-globals":514,"$sdd-navigation":516},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/primary-navigation":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":493,"_id":494,"_source":495,"_file":496,"_extension":497},"/design-system/components/primary-navigation","components",false,"","Primary navigation","The Primary navigation component appears as a menu sitting at the top of the page and contains links to site’s content pages.","page","Core",{"type":16,"children":17,"toc":482},"root",[18,27,33,38,43,63,68,73,78,85,92,97,102,108,113,126,132,137,142,148,153,159,164,170,175,180,195,208,217,223,228,233,238,243,256,261,274,279,285,290,303,309,314,318,324,357,363,386,389,395,400,413,418,425,428,434,447],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use primary navigation to help users get to where they need to go. It shows links to key areas of the website and guides users to the content they are looking for. The main way users journey through your site should be through primary navigation.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Use primary navigation to let users identify where they are. It helps users know their current page location within the overall site.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"The primary navigation contains:",{"type":19,"tag":44,"props":45,"children":46},"ul",{},[47,53,58],{"type":19,"tag":48,"props":49,"children":50},"li",{},[51],{"type":25,"value":52},"a site logo",{"type":19,"tag":48,"props":54,"children":55},{},[56],{"type":25,"value":57},"navigation links",{"type":19,"tag":48,"props":59,"children":60},{},[61],{"type":25,"value":62},"optional search link.",{"type":19,"tag":28,"props":64,"children":65},{},[66],{"type":25,"value":67},"The navigation and search links expand to either a fullscreen menu or search bar.",{"type":19,"tag":28,"props":69,"children":70},{},[71],{"type":25,"value":72},"The primary navigation always sits at the top of the page. It displays above all page content and components.",{"type":19,"tag":74,"props":75,"children":77},"docs-example",{"id":76},"core-navigation-primary-nav--default-story",[],{"type":19,"tag":79,"props":80,"children":82},"h3",{"id":81},"how-this-component-works",[83],{"type":25,"value":84},"How this component works",{"type":19,"tag":86,"props":87,"children":89},"h4",{"id":88},"logo",[90],{"type":25,"value":91},"Logo",{"type":19,"tag":28,"props":93,"children":94},{},[95],{"type":25,"value":96},"The logo lets users instantly recognise which organisation or entity owns the current page. When users interact with the logo, it should direct them to the site’s homepage.",{"type":19,"tag":28,"props":98,"children":99},{},[100],{"type":25,"value":101},"Within the primary navigation component, the logo is centred vertically.",{"type":19,"tag":86,"props":103,"children":105},{"id":104},"co-branding-logos",[106],{"type":25,"value":107},"Co-branding logos",{"type":19,"tag":28,"props":109,"children":110},{},[111],{"type":25,"value":112},"Primary navigation allows for co-branding when required. The maximum size a co-branded logo can appear is 40h x 140w pixels.",{"type":19,"tag":28,"props":114,"children":115},{},[116,118,124],{"type":25,"value":117},"See ",{"type":19,"tag":119,"props":120,"children":122},"a",{"href":121},"/design-system/styles/logo/",[123],{"type":25,"value":88},{"type":25,"value":125}," for guidance and requirements including co-branding.",{"type":19,"tag":86,"props":127,"children":129},{"id":128},"navigation-links",[130],{"type":25,"value":131},"Navigation links",{"type":19,"tag":28,"props":133,"children":134},{},[135],{"type":25,"value":136},"The primary navigation displays the top level of the site’s information architecture (IA). When the link has child pages, a chevron (a v-shaped arrow icon) displays next to the top page name. When clicked, this opens the mega menu and displays the child pages.",{"type":19,"tag":28,"props":138,"children":139},{},[140],{"type":25,"value":141},"When there are no child pages, there is no chevron and it takes users to the page.",{"type":19,"tag":86,"props":143,"children":145},{"id":144},"mega-menu",[146],{"type":25,"value":147},"Mega menu",{"type":19,"tag":28,"props":149,"children":150},{},[151],{"type":25,"value":152},"The mega menu gives users access to pages deeper in the site. Use it if your site or service has more than one level of navigation. If a mega menu item has a chevron, users can expand it to display its child pages.",{"type":19,"tag":86,"props":154,"children":156},{"id":155},"search-menu",[157],{"type":25,"value":158},"Search menu",{"type":19,"tag":28,"props":160,"children":161},{},[162],{"type":25,"value":163},"The menu can display a search bar to provide users the option to perform a site search.",{"type":19,"tag":86,"props":165,"children":167},{"id":166},"smaller-devices",[168],{"type":25,"value":169},"Smaller devices",{"type":19,"tag":28,"props":171,"children":172},{},[173],{"type":25,"value":174},"The primary navigation adapts to small devices. The breakpoint for displaying the collapsed menu is 992px.",{"type":19,"tag":28,"props":176,"children":177},{},[178],{"type":25,"value":179},"On smaller devices primary navigation shows as a dropdown showing only one labelled menu item. It contains more levels of navigation options, which remain hidden until the single dropdown is interacted with and opens.",{"type":19,"tag":28,"props":181,"children":182},{},[183,185,193],{"type":25,"value":184},"To aim to conform with ",{"type":19,"tag":119,"props":186,"children":190},{"href":187,"rel":188},"https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv.html",[189],"nofollow",[191],{"type":25,"value":192},"WCAG2.0 Criterion 1.1.1",{"type":25,"value":194},", and for increased consistency across screens sizes, the primary navigation:",{"type":19,"tag":44,"props":196,"children":197},{},[198,203],{"type":19,"tag":48,"props":199,"children":200},{},[201],{"type":25,"value":202},"uses the menu label and a chevron",{"type":19,"tag":48,"props":204,"children":205},{},[206],{"type":25,"value":207},"doesn't use the 3 bar, or 'hamburger', menu icon.",{"type":19,"tag":209,"props":210,"children":211},"blockquote",{},[212],{"type":19,"tag":28,"props":213,"children":214},{},[215],{"type":25,"value":216},"1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.",{"type":19,"tag":86,"props":218,"children":220},{"id":219},"responsive-behaviour",[221],{"type":25,"value":222},"Responsive behaviour",{"type":19,"tag":28,"props":224,"children":225},{},[226],{"type":25,"value":227},"Primary navigation supports only a small number of items. This is because it is a horizontal list.",{"type":19,"tag":28,"props":229,"children":230},{},[231],{"type":25,"value":232},"Take this into account when defining your site's IA.",{"type":19,"tag":28,"props":234,"children":235},{},[236],{"type":25,"value":237},"A maximum number of links can display before the navigation bar will respond to the collapsed menu display.",{"type":19,"tag":28,"props":239,"children":240},{},[241],{"type":25,"value":242},"When used with a single logo:",{"type":19,"tag":44,"props":244,"children":245},{},[246,251],{"type":19,"tag":48,"props":247,"children":248},{},[249],{"type":25,"value":250},"992-1199px breakpoint can display 6 links (including search)",{"type":19,"tag":48,"props":252,"children":253},{},[254],{"type":25,"value":255},"1200+ breakpoint can display 7 links (including search).",{"type":19,"tag":28,"props":257,"children":258},{},[259],{"type":25,"value":260},"When used with a co-branded logo:",{"type":19,"tag":44,"props":262,"children":263},{},[264,269],{"type":19,"tag":48,"props":265,"children":266},{},[267],{"type":25,"value":268},"992-1199px breakpoint can display 5 links (including search)",{"type":19,"tag":48,"props":270,"children":271},{},[272],{"type":25,"value":273},"1200+ breakpoint can display 6 links (including search).",{"type":19,"tag":28,"props":275,"children":276},{},[277],{"type":25,"value":278},"When using the collapsed menu in the navigation bar, the mega menu will also display the mobile (collapsed) version.",{"type":19,"tag":86,"props":280,"children":282},{"id":281},"scroll-behaviour",[283],{"type":25,"value":284},"Scroll behaviour",{"type":19,"tag":28,"props":286,"children":287},{},[288],{"type":25,"value":289},"The primary navigation has show and hide behaviour on user scroll.",{"type":19,"tag":44,"props":291,"children":292},{},[293,298],{"type":19,"tag":48,"props":294,"children":295},{},[296],{"type":25,"value":297},"Scroll down: the primary navigation hides from view.",{"type":19,"tag":48,"props":299,"children":300},{},[301],{"type":25,"value":302},"Scroll up: the primary navigation shows at the top of the viewport.",{"type":19,"tag":86,"props":304,"children":306},{"id":305},"interaction-with-other-components",[307],{"type":25,"value":308},"Interaction with other components",{"type":19,"tag":28,"props":310,"children":311},{},[312],{"type":25,"value":313},"When a site has a quick exit button (a button component that uses the destructive variant), it sits underneath the primary navigation. If the user opens the mega menu or search menu, the quick exit button moves inside the menu container. So the quick exit action will always be available to users.",{"type":19,"tag":315,"props":316,"children":317},"hr",{},[],{"type":19,"tag":79,"props":319,"children":321},{"id":320},"when-and-how-to-use",[322],{"type":25,"value":323},"When and how to use",{"type":19,"tag":44,"props":325,"children":326},{},[327,332,337,342,347,352],{"type":19,"tag":48,"props":328,"children":329},{},[330],{"type":25,"value":331},"Use across all pages of your site.",{"type":19,"tag":48,"props":333,"children":334},{},[335],{"type":25,"value":336},"Use descriptive, recognisable link labels.",{"type":19,"tag":48,"props":338,"children":339},{},[340],{"type":25,"value":341},"Display links in priority order: move from left (for most-used links) to right (for least-used links).",{"type":19,"tag":48,"props":343,"children":344},{},[345],{"type":25,"value":346},"Base your navigation's structure on user research.",{"type":19,"tag":48,"props":348,"children":349},{},[350],{"type":25,"value":351},"Structure navigation to prioritise tasks and information your research says users need the most.",{"type":19,"tag":48,"props":353,"children":354},{},[355],{"type":25,"value":356},"Use with optional user action, such as login, if required.",{"type":19,"tag":79,"props":358,"children":360},{"id":359},"when-and-how-not-to-use",[361],{"type":25,"value":362},"When and how not to use",{"type":19,"tag":44,"props":364,"children":365},{},[366,371,376,381],{"type":19,"tag":48,"props":367,"children":368},{},[369],{"type":25,"value":370},"Don’t label links with jargon or unfamiliar terms.",{"type":19,"tag":48,"props":372,"children":373},{},[374],{"type":25,"value":375},"Don't use more than 150 characters per menu item.",{"type":19,"tag":48,"props":377,"children":378},{},[379],{"type":25,"value":380},"Hover should never be used to expand dropdown lists as it is not reliably accessible or responsive.",{"type":19,"tag":48,"props":382,"children":383},{},[384],{"type":25,"value":385},"An organisational structure should not be used as a navigation stucture.",{"type":19,"tag":315,"props":387,"children":388},{},[],{"type":19,"tag":20,"props":390,"children":392},{"id":391},"theming",[393],{"type":25,"value":394},"Theming",{"type":19,"tag":28,"props":396,"children":397},{},[398],{"type":25,"value":399},"Primary navigation uses colour for:",{"type":19,"tag":44,"props":401,"children":402},{},[403,408],{"type":19,"tag":48,"props":404,"children":405},{},[406],{"type":25,"value":407},"visual prominence and brand recognition",{"type":19,"tag":48,"props":409,"children":410},{},[411],{"type":25,"value":412},"interactive states.",{"type":19,"tag":28,"props":414,"children":415},{},[416],{"type":25,"value":417},"Primary navigation also adopts its theming from the search bar component.",{"type":19,"tag":419,"props":420,"children":421},"docs-theme-chooser",{},[422],{"type":19,"tag":74,"props":423,"children":424},{"id":76},[],{"type":19,"tag":315,"props":426,"children":427},{},[],{"type":19,"tag":20,"props":429,"children":431},{"id":430},"accessibility",[432],{"type":25,"value":433},"Accessibility",{"type":19,"tag":28,"props":435,"children":436},{},[437,438,445],{"type":25,"value":184},{"type":19,"tag":119,"props":439,"children":442},{"href":440,"rel":441},"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum",[189],[443],{"type":25,"value":444},"WCAG2.2 Criterion 2.5.8",{"type":25,"value":446},", the primary navigation bar uses the space either side of menu items. This allows for increased touch targets and the use of the block focus state styling.",{"type":19,"tag":209,"props":448,"children":449},{},[450],{"type":19,"tag":28,"props":451,"children":452},{},[453,455,462,464,471,473,480],{"type":25,"value":454},"2.5.8 Target Size (Minimum) The size of the ",{"type":19,"tag":119,"props":456,"children":459},{"href":457,"rel":458},"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-target",[189],[460],{"type":25,"value":461},"target",{"type":25,"value":463}," for ",{"type":19,"tag":119,"props":465,"children":468},{"href":466,"rel":467},"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-pointer-input",[189],[469],{"type":25,"value":470},"pointer inputs",{"type":25,"value":472}," is at least 24 by 24 ",{"type":19,"tag":119,"props":474,"children":477},{"href":475,"rel":476},"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-css-pixel",[189],[478],{"type":25,"value":479},"CSS pixels",{"type":25,"value":481},",",{"title":10,"searchDepth":483,"depth":483,"links":484},2,[485,491,492],{"id":22,"depth":483,"text":26,"children":486},[487,489,490],{"id":81,"depth":488,"text":84},3,{"id":320,"depth":488,"text":323},{"id":359,"depth":488,"text":362},{"id":391,"depth":483,"text":394},{"id":430,"depth":483,"text":433},"markdown","content:design-system:5.components:primary-navigation.md","content","design-system/5.components/primary-navigation.md","md",["ShallowRef",499],["ShallowReactive",500],{"/design-system/components/primary-navigation":501},[502,508],{"_path":503,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":504,"description":505,"layout":13,"label":14,"_type":493,"_id":506,"_source":495,"_file":507,"_extension":497},"/design-system/components/pagination","Pagination","The Pagination component divides your content across more than one page into smaller lists to help users navigate forward and backwards.","content:design-system:5.components:pagination.md","design-system/5.components/pagination.md",{"_path":509,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":510,"description":511,"layout":13,"label":14,"_type":493,"_id":512,"_source":495,"_file":513,"_extension":497},"/design-system/components/profile","Profile","The Profile component shows an avatar (image) on your page, with supporting text to display key information.","content:design-system:5.components:profile.md","design-system/5.components/profile.md",["ShallowRef",515],{},[517,522,762],{"title":518,"_path":519,"icon":520,"layout":521},"Ripple Design System","/","carbon:home","home",{"title":523,"_path":524,"children":525},"Design System","/design-system",[526,542,558,587,620],{"title":527,"_path":528,"children":529},"About","/design-system/about",[530,533,536,539],{"title":531,"_path":532,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":534,"_path":535,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":537,"_path":538,"layout":13},"Support","/design-system/about/getting-support",{"title":540,"_path":541,"layout":13},"Contributing","/design-system/about/contributing",{"title":543,"_path":544,"children":545},"Design","/design-system/design",[546,549,552,555],{"title":547,"_path":548,"layout":13},"Getting started","/design-system/design/getting-started",{"title":550,"_path":551,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":553,"_path":554,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":556,"_path":557,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":559,"_path":560,"children":561},"Develop","/design-system/develop",[562,564,566,569],{"title":547,"_path":563,"layout":13},"/design-system/develop/getting-started",{"title":540,"_path":565,"layout":13},"/design-system/develop/contributing",{"title":567,"_path":568,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":570,"children":571,"layout":13},"/design-system/develop/usage",[572,575,578,581,584],{"title":573,"_path":574,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":576,"_path":577,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":579,"_path":580,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":582,"_path":583,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":585,"_path":586,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":588,"_path":589,"children":590},"Styles","/design-system/styles",[591,594,597,600,603,606,609,611,614,617],{"title":592,"_path":593,"layout":13},"Colour","/design-system/styles/colour",{"title":595,"_path":596,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":598,"_path":599,"layout":13},"Grid","/design-system/styles/grid",{"title":601,"_path":602,"layout":13},"Icons","/design-system/styles/icons",{"title":604,"_path":605,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":607,"_path":608,"layout":13},"Layout","/design-system/styles/layout",{"title":91,"_path":610,"layout":13},"/design-system/styles/logo",{"title":612,"_path":613,"layout":13},"Motion","/design-system/styles/motion",{"title":615,"_path":616,"layout":13},"Spacing","/design-system/styles/spacing",{"title":618,"_path":619,"layout":13},"Typography","/design-system/styles/typography",{"title":621,"_path":622,"children":623},"Components","/design-system/components",[624,627,630,633,636,639,642,645,648,651,654,657,660,663,666,669,672,675,678,681,684,687,690,693,696,699,702,705,708,711,714,717,720,721,722,723,726,729,732,735,738,741,744,747,750,753,756,759],{"title":625,"_path":626,"layout":13},"Accordion","/design-system/components/accordion",{"title":628,"_path":629,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":631,"_path":632,"layout":13},"Alert","/design-system/components/alert",{"title":634,"_path":635,"layout":13},"Block quote","/design-system/components/block-quote",{"title":637,"_path":638,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":640,"_path":641,"layout":13},"Button","/design-system/components/button",{"title":643,"_path":644,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":646,"_path":647,"layout":13},"Callout","/design-system/components/callout",{"title":649,"_path":650,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":652,"_path":653,"layout":13},"Card","/design-system/components/card",{"title":655,"_path":656,"layout":13},"Carousel","/design-system/components/carousel",{"title":658,"_path":659,"layout":13},"Category grid","/design-system/components/category-grid",{"title":661,"_path":662,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":664,"_path":665,"layout":13},"Chip","/design-system/components/chip",{"title":667,"_path":668,"layout":13},"Contact us","/design-system/components/contact-us",{"title":670,"_path":671,"layout":13},"Date input","/design-system/components/date-input",{"title":673,"_path":674,"layout":13},"Detail list","/design-system/components/detail-list",{"title":676,"_path":677,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":679,"_path":680,"layout":13},"File","/design-system/components/file",{"title":682,"_path":683,"layout":13},"Footer","/design-system/components/footer",{"title":685,"_path":686,"layout":13},"Form","/design-system/components/form",{"title":688,"_path":689,"layout":13},"Form alert","/design-system/components/form-alert",{"title":691,"_path":692,"layout":13},"Header","/design-system/components/header",{"title":694,"_path":695,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":697,"_path":698,"layout":13},"Input field","/design-system/components/input-field",{"title":700,"_path":701,"layout":13},"Key dates","/design-system/components/key-dates",{"title":703,"_path":704,"layout":13},"Media","/design-system/components/media",{"title":706,"_path":707,"layout":13},"Media embed","/design-system/components/media-embed",{"title":709,"_path":710,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":712,"_path":713,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":715,"_path":716,"layout":13},"Option button","/design-system/components/option-button",{"title":718,"_path":719,"layout":13},"Page action","/design-system/components/page-action",{"title":504,"_path":503,"layout":13},{"title":11,"_path":7,"layout":13},{"title":510,"_path":509,"layout":13},{"title":724,"_path":725,"layout":13},"Radio button","/design-system/components/radio-button",{"title":727,"_path":728,"layout":13},"Related links","/design-system/components/related-links",{"title":730,"_path":731,"layout":13},"Results listing","/design-system/components/results-listing",{"title":733,"_path":734,"layout":13},"Search bar","/design-system/components/search-bar",{"title":736,"_path":737,"layout":13},"Skip link","/design-system/components/skip-link",{"title":739,"_path":740,"layout":13},"Social share","/design-system/components/social-share",{"title":742,"_path":743,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":745,"_path":746,"layout":13},"Table","/design-system/components/table",{"title":748,"_path":749,"layout":13},"Tabs","/design-system/components/tabs",{"title":751,"_path":752,"layout":13},"Tag","/design-system/components/tag",{"title":754,"_path":755,"layout":13},"Text area","/design-system/components/text-area",{"title":757,"_path":758,"layout":13},"Timeline","/design-system/components/timeline",{"title":760,"_path":761,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":763,"_path":764,"children":765,"layout":13},"Ripple Framework","/framework",[766,767,785,807],{"title":763,"_path":764,"layout":13},{"title":768,"_path":769,"children":770},"Key Concepts","/framework/key-concepts",[771,773,776,779,782],{"title":579,"_path":772,"layout":13},"/framework/key-concepts/nuxt",{"title":774,"_path":775,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":777,"_path":778,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":780,"_path":781,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":783,"_path":784,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":786,"_path":787,"children":788},"Guides","/framework/guides",[789,792,795,798,801,804],{"title":790,"_path":791,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":793,"_path":794,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":796,"_path":797,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":799,"_path":800,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":802,"_path":803,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":805,"_path":806,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":808,"_path":809,"layout":13},"Core modules","/framework/core-modules",["Reactive",811],["Set"],["Reactive",813],{"module-navigation":814},null,true,"/design-system/components/primary-navigation/",1714695155836]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Primary navigation</h1><p class="rpl-type-p-large" data-v-3163c6df>The Primary navigation component appears as a menu sitting at the top of the page and contains links to site’s content pages.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use primary navigation to help users get to where they need to go. It shows links to key areas of the website and guides users to the content they are looking for. The main way users journey through your site should be through primary navigation.<!--]--></p><p><!--[-->Use primary navigation to let users identify where they are. It helps users know their current page location within the overall site.<!--]--></p><p><!--[-->The primary navigation contains:<!--]--></p><ul><!--[--><li><!--[-->a site logo<!--]--></li><li><!--[-->navigation links<!--]--></li><li><!--[-->optional search link.<!--]--></li><!--]--></ul><p><!--[-->The navigation and search links expand to either a fullscreen menu or search bar.<!--]--></p><p><!--[-->The primary navigation always sits at the top of the page. It displays above all page content and components.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-primary-nav--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-primary-nav--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="how-this-component-works" data-v-ea525968><a href="#how-this-component-works" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->How this component works<!--]--></a></h2><h4 class="rpl-type-h4 docs-h4" id="logo"><!--[-->Logo<!--]--></h4><p><!--[-->The logo lets users instantly recognise which organisation or entity owns the current page. When users interact with the logo, it should direct them to the site’s homepage.<!--]--></p><p><!--[-->Within the primary navigation component, the logo is centred vertically.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="co-branding-logos"><!--[-->Co-branding logos<!--]--></h4><p><!--[-->Primary navigation allows for co-branding when required. The maximum size a co-branded logo can appear is 40h x 140w pixels.<!--]--></p><p><!--[-->See <a href="/design-system/styles/logo/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->logo<!--]--><!--]--><!----><!--]--></a> for guidance and requirements including co-branding.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="navigation-links"><!--[-->Navigation links<!--]--></h4><p><!--[-->The primary navigation displays the top level of the site’s information architecture (IA). When the link has child pages, a chevron (a v-shaped arrow icon) displays next to the top page name. When clicked, this opens the mega menu and displays the child pages.<!--]--></p><p><!--[-->When there are no child pages, there is no chevron and it takes users to the page.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="mega-menu"><!--[-->Mega menu<!--]--></h4><p><!--[-->The mega menu gives users access to pages deeper in the site. Use it if your site or service has more than one level of navigation. If a mega menu item has a chevron, users can expand it to display its child pages.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="search-menu"><!--[-->Search menu<!--]--></h4><p><!--[-->The menu can display a search bar to provide users the option to perform a site search.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="smaller-devices"><!--[-->Smaller devices<!--]--></h4><p><!--[-->The primary navigation adapts to small devices. The breakpoint for displaying the collapsed menu is 992px.<!--]--></p><p><!--[-->On smaller devices primary navigation shows as a dropdown showing only one labelled menu item. It contains more levels of navigation options, which remain hidden until the single dropdown is interacted with and opens.<!--]--></p><p><!--[-->To aim to conform with <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv.html" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->WCAG2.0 Criterion 1.1.1<!--]--><!--]--><!----><!--]--></a>, and for increased consistency across screens sizes, the primary navigation:<!--]--></p><ul><!--[--><li><!--[-->uses the menu label and a chevron<!--]--></li><li><!--[-->doesn&#39;t use the 3 bar, or &#39;hamburger&#39;, menu icon.<!--]--></li><!--]--></ul><blockquote class="rpl-callout"><!--[--><p><!--[-->1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.<!--]--></p><!--]--></blockquote><h4 class="rpl-type-h4 docs-h4" id="responsive-behaviour"><!--[-->Responsive behaviour<!--]--></h4><p><!--[-->Primary navigation supports only a small number of items. This is because it is a horizontal list.<!--]--></p><p><!--[-->Take this into account when defining your site&#39;s IA.<!--]--></p><p><!--[-->A maximum number of links can display before the navigation bar will respond to the collapsed menu display.<!--]--></p><p><!--[-->When used with a single logo:<!--]--></p><ul><!--[--><li><!--[-->992-1199px breakpoint can display 6 links (including search)<!--]--></li><li><!--[-->1200+ breakpoint can display 7 links (including search).<!--]--></li><!--]--></ul><p><!--[-->When used with a co-branded logo:<!--]--></p><ul><!--[--><li><!--[-->992-1199px breakpoint can display 5 links (including search)<!--]--></li><li><!--[-->1200+ breakpoint can display 6 links (including search).<!--]--></li><!--]--></ul><p><!--[-->When using the collapsed menu in the navigation bar, the mega menu will also display the mobile (collapsed) version.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="scroll-behaviour"><!--[-->Scroll behaviour<!--]--></h4><p><!--[-->The primary navigation has show and hide behaviour on user scroll.<!--]--></p><ul><!--[--><li><!--[-->Scroll down: the primary navigation hides from view.<!--]--></li><li><!--[-->Scroll up: the primary navigation shows at the top of the viewport.<!--]--></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="interaction-with-other-components"><!--[-->Interaction with other components<!--]--></h4><p><!--[-->When a site has a quick exit button (a button component that uses the destructive variant), it sits underneath the primary navigation. If the user opens the mega menu or search menu, the quick exit button moves inside the menu container. So the quick exit action will always be available to users.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use across all pages of your site.<!--]--></li><li><!--[-->Use descriptive, recognisable link labels.<!--]--></li><li><!--[-->Display links in priority order: move from left (for most-used links) to right (for least-used links).<!--]--></li><li><!--[-->Base your navigation&#39;s structure on user research.<!--]--></li><li><!--[-->Structure navigation to prioritise tasks and information your research says users need the most.<!--]--></li><li><!--[-->Use with optional user action, such as login, if required.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don’t label links with jargon or unfamiliar terms.<!--]--></li><li><!--[-->Don&#39;t use more than 150 characters per menu item.<!--]--></li><li><!--[-->Hover should never be used to expand dropdown lists as it is not reliably accessible or responsive.<!--]--></li><li><!--[-->An organisational structure should not be used as a navigation stucture.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Primary navigation uses colour for:<!--]--></p><ul><!--[--><li><!--[-->visual prominence and brand recognition<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><p><!--[-->Primary navigation also adopts its theming from the search bar component.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-primary-nav--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-primary-nav--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="accessibility" data-v-fff5b905><a href="#accessibility" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Accessibility<!--]--></a></h2><p><!--[-->To aim to conform with <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->WCAG2.2 Criterion 2.5.8<!--]--><!--]--><!----><!--]--></a>, the primary navigation bar uses the space either side of menu items. This allows for increased touch targets and the use of the block focus state styling.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[-->2.5.8 Target Size (Minimum) The size of the <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-target" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->target<!--]--><!--]--><!----><!--]--></a> for <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-pointer-input" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->pointer inputs<!--]--><!--]--><!----><!--]--></a> is at least 24 by 24 <a href="https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-css-pixel" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->CSS pixels<!--]--><!--]--><!----><!--]--></a>,<!--]--></p><!--]--></blockquote><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/primary-navigation.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/primary-navigation/_payload.json">[{"state":1,"once":810,"_errors":812,"serverRendered":815,"path":816,"prerenderedAt":817},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":498,"$sdd-globals":514,"$sdd-navigation":516},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/primary-navigation":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":493,"_id":494,"_source":495,"_file":496,"_extension":497},"/design-system/components/primary-navigation","components",false,"","Primary navigation","The Primary navigation component appears as a menu sitting at the top of the page and contains links to site’s content pages.","page","Core",{"type":16,"children":17,"toc":482},"root",[18,27,33,38,43,63,68,73,78,85,92,97,102,108,113,126,132,137,142,148,153,159,164,170,175,180,195,208,217,223,228,233,238,243,256,261,274,279,285,290,303,309,314,318,324,357,363,386,389,395,400,413,418,425,428,434,447],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use primary navigation to help users get to where they need to go. It shows links to key areas of the website and guides users to the content they are looking for. The main way users journey through your site should be through primary navigation.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Use primary navigation to let users identify where they are. It helps users know their current page location within the overall site.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"The primary navigation contains:",{"type":19,"tag":44,"props":45,"children":46},"ul",{},[47,53,58],{"type":19,"tag":48,"props":49,"children":50},"li",{},[51],{"type":25,"value":52},"a site logo",{"type":19,"tag":48,"props":54,"children":55},{},[56],{"type":25,"value":57},"navigation links",{"type":19,"tag":48,"props":59,"children":60},{},[61],{"type":25,"value":62},"optional search link.",{"type":19,"tag":28,"props":64,"children":65},{},[66],{"type":25,"value":67},"The navigation and search links expand to either a fullscreen menu or search bar.",{"type":19,"tag":28,"props":69,"children":70},{},[71],{"type":25,"value":72},"The primary navigation always sits at the top of the page. It displays above all page content and components.",{"type":19,"tag":74,"props":75,"children":77},"docs-example",{"id":76},"core-navigation-primary-nav--default-story",[],{"type":19,"tag":79,"props":80,"children":82},"h3",{"id":81},"how-this-component-works",[83],{"type":25,"value":84},"How this component works",{"type":19,"tag":86,"props":87,"children":89},"h4",{"id":88},"logo",[90],{"type":25,"value":91},"Logo",{"type":19,"tag":28,"props":93,"children":94},{},[95],{"type":25,"value":96},"The logo lets users instantly recognise which organisation or entity owns the current page. When users interact with the logo, it should direct them to the site’s homepage.",{"type":19,"tag":28,"props":98,"children":99},{},[100],{"type":25,"value":101},"Within the primary navigation component, the logo is centred vertically.",{"type":19,"tag":86,"props":103,"children":105},{"id":104},"co-branding-logos",[106],{"type":25,"value":107},"Co-branding logos",{"type":19,"tag":28,"props":109,"children":110},{},[111],{"type":25,"value":112},"Primary navigation allows for co-branding when required. The maximum size a co-branded logo can appear is 40h x 140w pixels.",{"type":19,"tag":28,"props":114,"children":115},{},[116,118,124],{"type":25,"value":117},"See ",{"type":19,"tag":119,"props":120,"children":122},"a",{"href":121},"/design-system/styles/logo/",[123],{"type":25,"value":88},{"type":25,"value":125}," for guidance and requirements including co-branding.",{"type":19,"tag":86,"props":127,"children":129},{"id":128},"navigation-links",[130],{"type":25,"value":131},"Navigation links",{"type":19,"tag":28,"props":133,"children":134},{},[135],{"type":25,"value":136},"The primary navigation displays the top level of the site’s information architecture (IA). When the link has child pages, a chevron (a v-shaped arrow icon) displays next to the top page name. When clicked, this opens the mega menu and displays the child pages.",{"type":19,"tag":28,"props":138,"children":139},{},[140],{"type":25,"value":141},"When there are no child pages, there is no chevron and it takes users to the page.",{"type":19,"tag":86,"props":143,"children":145},{"id":144},"mega-menu",[146],{"type":25,"value":147},"Mega menu",{"type":19,"tag":28,"props":149,"children":150},{},[151],{"type":25,"value":152},"The mega menu gives users access to pages deeper in the site. Use it if your site or service has more than one level of navigation. If a mega menu item has a chevron, users can expand it to display its child pages.",{"type":19,"tag":86,"props":154,"children":156},{"id":155},"search-menu",[157],{"type":25,"value":158},"Search menu",{"type":19,"tag":28,"props":160,"children":161},{},[162],{"type":25,"value":163},"The menu can display a search bar to provide users the option to perform a site search.",{"type":19,"tag":86,"props":165,"children":167},{"id":166},"smaller-devices",[168],{"type":25,"value":169},"Smaller devices",{"type":19,"tag":28,"props":171,"children":172},{},[173],{"type":25,"value":174},"The primary navigation adapts to small devices. The breakpoint for displaying the collapsed menu is 992px.",{"type":19,"tag":28,"props":176,"children":177},{},[178],{"type":25,"value":179},"On smaller devices primary navigation shows as a dropdown showing only one labelled menu item. It contains more levels of navigation options, which remain hidden until the single dropdown is interacted with and opens.",{"type":19,"tag":28,"props":181,"children":182},{},[183,185,193],{"type":25,"value":184},"To aim to conform with ",{"type":19,"tag":119,"props":186,"children":190},{"href":187,"rel":188},"https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv.html",[189],"nofollow",[191],{"type":25,"value":192},"WCAG2.0 Criterion 1.1.1",{"type":25,"value":194},", and for increased consistency across screens sizes, the primary navigation:",{"type":19,"tag":44,"props":196,"children":197},{},[198,203],{"type":19,"tag":48,"props":199,"children":200},{},[201],{"type":25,"value":202},"uses the menu label and a chevron",{"type":19,"tag":48,"props":204,"children":205},{},[206],{"type":25,"value":207},"doesn't use the 3 bar, or 'hamburger', menu icon.",{"type":19,"tag":209,"props":210,"children":211},"blockquote",{},[212],{"type":19,"tag":28,"props":213,"children":214},{},[215],{"type":25,"value":216},"1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.",{"type":19,"tag":86,"props":218,"children":220},{"id":219},"responsive-behaviour",[221],{"type":25,"value":222},"Responsive behaviour",{"type":19,"tag":28,"props":224,"children":225},{},[226],{"type":25,"value":227},"Primary navigation supports only a small number of items. This is because it is a horizontal list.",{"type":19,"tag":28,"props":229,"children":230},{},[231],{"type":25,"value":232},"Take this into account when defining your site's IA.",{"type":19,"tag":28,"props":234,"children":235},{},[236],{"type":25,"value":237},"A maximum number of links can display before the navigation bar will respond to the collapsed menu display.",{"type":19,"tag":28,"props":239,"children":240},{},[241],{"type":25,"value":242},"When used with a single logo:",{"type":19,"tag":44,"props":244,"children":245},{},[246,251],{"type":19,"tag":48,"props":247,"children":248},{},[249],{"type":25,"value":250},"992-1199px breakpoint can display 6 links (including search)",{"type":19,"tag":48,"props":252,"children":253},{},[254],{"type":25,"value":255},"1200+ breakpoint can display 7 links (including search).",{"type":19,"tag":28,"props":257,"children":258},{},[259],{"type":25,"value":260},"When used with a co-branded logo:",{"type":19,"tag":44,"props":262,"children":263},{},[264,269],{"type":19,"tag":48,"props":265,"children":266},{},[267],{"type":25,"value":268},"992-1199px breakpoint can display 5 links (including search)",{"type":19,"tag":48,"props":270,"children":271},{},[272],{"type":25,"value":273},"1200+ breakpoint can display 6 links (including search).",{"type":19,"tag":28,"props":275,"children":276},{},[277],{"type":25,"value":278},"When using the collapsed menu in the navigation bar, the mega menu will also display the mobile (collapsed) version.",{"type":19,"tag":86,"props":280,"children":282},{"id":281},"scroll-behaviour",[283],{"type":25,"value":284},"Scroll behaviour",{"type":19,"tag":28,"props":286,"children":287},{},[288],{"type":25,"value":289},"The primary navigation has show and hide behaviour on user scroll.",{"type":19,"tag":44,"props":291,"children":292},{},[293,298],{"type":19,"tag":48,"props":294,"children":295},{},[296],{"type":25,"value":297},"Scroll down: the primary navigation hides from view.",{"type":19,"tag":48,"props":299,"children":300},{},[301],{"type":25,"value":302},"Scroll up: the primary navigation shows at the top of the viewport.",{"type":19,"tag":86,"props":304,"children":306},{"id":305},"interaction-with-other-components",[307],{"type":25,"value":308},"Interaction with other components",{"type":19,"tag":28,"props":310,"children":311},{},[312],{"type":25,"value":313},"When a site has a quick exit button (a button component that uses the destructive variant), it sits underneath the primary navigation. If the user opens the mega menu or search menu, the quick exit button moves inside the menu container. So the quick exit action will always be available to users.",{"type":19,"tag":315,"props":316,"children":317},"hr",{},[],{"type":19,"tag":79,"props":319,"children":321},{"id":320},"when-and-how-to-use",[322],{"type":25,"value":323},"When and how to use",{"type":19,"tag":44,"props":325,"children":326},{},[327,332,337,342,347,352],{"type":19,"tag":48,"props":328,"children":329},{},[330],{"type":25,"value":331},"Use across all pages of your site.",{"type":19,"tag":48,"props":333,"children":334},{},[335],{"type":25,"value":336},"Use descriptive, recognisable link labels.",{"type":19,"tag":48,"props":338,"children":339},{},[340],{"type":25,"value":341},"Display links in priority order: move from left (for most-used links) to right (for least-used links).",{"type":19,"tag":48,"props":343,"children":344},{},[345],{"type":25,"value":346},"Base your navigation's structure on user research.",{"type":19,"tag":48,"props":348,"children":349},{},[350],{"type":25,"value":351},"Structure navigation to prioritise tasks and information your research says users need the most.",{"type":19,"tag":48,"props":353,"children":354},{},[355],{"type":25,"value":356},"Use with optional user action, such as login, if required.",{"type":19,"tag":79,"props":358,"children":360},{"id":359},"when-and-how-not-to-use",[361],{"type":25,"value":362},"When and how not to use",{"type":19,"tag":44,"props":364,"children":365},{},[366,371,376,381],{"type":19,"tag":48,"props":367,"children":368},{},[369],{"type":25,"value":370},"Don’t label links with jargon or unfamiliar terms.",{"type":19,"tag":48,"props":372,"children":373},{},[374],{"type":25,"value":375},"Don't use more than 150 characters per menu item.",{"type":19,"tag":48,"props":377,"children":378},{},[379],{"type":25,"value":380},"Hover should never be used to expand dropdown lists as it is not reliably accessible or responsive.",{"type":19,"tag":48,"props":382,"children":383},{},[384],{"type":25,"value":385},"An organisational structure should not be used as a navigation stucture.",{"type":19,"tag":315,"props":387,"children":388},{},[],{"type":19,"tag":20,"props":390,"children":392},{"id":391},"theming",[393],{"type":25,"value":394},"Theming",{"type":19,"tag":28,"props":396,"children":397},{},[398],{"type":25,"value":399},"Primary navigation uses colour for:",{"type":19,"tag":44,"props":401,"children":402},{},[403,408],{"type":19,"tag":48,"props":404,"children":405},{},[406],{"type":25,"value":407},"visual prominence and brand recognition",{"type":19,"tag":48,"props":409,"children":410},{},[411],{"type":25,"value":412},"interactive states.",{"type":19,"tag":28,"props":414,"children":415},{},[416],{"type":25,"value":417},"Primary navigation also adopts its theming from the search bar component.",{"type":19,"tag":419,"props":420,"children":421},"docs-theme-chooser",{},[422],{"type":19,"tag":74,"props":423,"children":424},{"id":76},[],{"type":19,"tag":315,"props":426,"children":427},{},[],{"type":19,"tag":20,"props":429,"children":431},{"id":430},"accessibility",[432],{"type":25,"value":433},"Accessibility",{"type":19,"tag":28,"props":435,"children":436},{},[437,438,445],{"type":25,"value":184},{"type":19,"tag":119,"props":439,"children":442},{"href":440,"rel":441},"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum",[189],[443],{"type":25,"value":444},"WCAG2.2 Criterion 2.5.8",{"type":25,"value":446},", the primary navigation bar uses the space either side of menu items. This allows for increased touch targets and the use of the block focus state styling.",{"type":19,"tag":209,"props":448,"children":449},{},[450],{"type":19,"tag":28,"props":451,"children":452},{},[453,455,462,464,471,473,480],{"type":25,"value":454},"2.5.8 Target Size (Minimum) The size of the ",{"type":19,"tag":119,"props":456,"children":459},{"href":457,"rel":458},"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-target",[189],[460],{"type":25,"value":461},"target",{"type":25,"value":463}," for ",{"type":19,"tag":119,"props":465,"children":468},{"href":466,"rel":467},"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-pointer-input",[189],[469],{"type":25,"value":470},"pointer inputs",{"type":25,"value":472}," is at least 24 by 24 ",{"type":19,"tag":119,"props":474,"children":477},{"href":475,"rel":476},"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum#dfn-css-pixel",[189],[478],{"type":25,"value":479},"CSS pixels",{"type":25,"value":481},",",{"title":10,"searchDepth":483,"depth":483,"links":484},2,[485,491,492],{"id":22,"depth":483,"text":26,"children":486},[487,489,490],{"id":81,"depth":488,"text":84},3,{"id":320,"depth":488,"text":323},{"id":359,"depth":488,"text":362},{"id":391,"depth":483,"text":394},{"id":430,"depth":483,"text":433},"markdown","content:design-system:5.components:primary-navigation.md","content","design-system/5.components/primary-navigation.md","md",["ShallowRef",499],["ShallowReactive",500],{"/design-system/components/primary-navigation":501},[502,508],{"_path":503,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":504,"description":505,"layout":13,"label":14,"_type":493,"_id":506,"_source":495,"_file":507,"_extension":497},"/design-system/components/pagination","Pagination","The Pagination component divides your content across more than one page into smaller lists to help users navigate forward and backwards.","content:design-system:5.components:pagination.md","design-system/5.components/pagination.md",{"_path":509,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":510,"description":511,"layout":13,"label":14,"_type":493,"_id":512,"_source":495,"_file":513,"_extension":497},"/design-system/components/profile","Profile","The Profile component shows an avatar (image) on your page, with supporting text to display key information.","content:design-system:5.components:profile.md","design-system/5.components/profile.md",["ShallowRef",515],{},[517,522,762],{"title":518,"_path":519,"icon":520,"layout":521},"Ripple Design System","/","carbon:home","home",{"title":523,"_path":524,"children":525},"Design System","/design-system",[526,542,558,587,620],{"title":527,"_path":528,"children":529},"About","/design-system/about",[530,533,536,539],{"title":531,"_path":532,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":534,"_path":535,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":537,"_path":538,"layout":13},"Support","/design-system/about/getting-support",{"title":540,"_path":541,"layout":13},"Contributing","/design-system/about/contributing",{"title":543,"_path":544,"children":545},"Design","/design-system/design",[546,549,552,555],{"title":547,"_path":548,"layout":13},"Getting started","/design-system/design/getting-started",{"title":550,"_path":551,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":553,"_path":554,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":556,"_path":557,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":559,"_path":560,"children":561},"Develop","/design-system/develop",[562,564,566,569],{"title":547,"_path":563,"layout":13},"/design-system/develop/getting-started",{"title":540,"_path":565,"layout":13},"/design-system/develop/contributing",{"title":567,"_path":568,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":570,"children":571,"layout":13},"/design-system/develop/usage",[572,575,578,581,584],{"title":573,"_path":574,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":576,"_path":577,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":579,"_path":580,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":582,"_path":583,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":585,"_path":586,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":588,"_path":589,"children":590},"Styles","/design-system/styles",[591,594,597,600,603,606,609,611,614,617],{"title":592,"_path":593,"layout":13},"Colour","/design-system/styles/colour",{"title":595,"_path":596,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":598,"_path":599,"layout":13},"Grid","/design-system/styles/grid",{"title":601,"_path":602,"layout":13},"Icons","/design-system/styles/icons",{"title":604,"_path":605,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":607,"_path":608,"layout":13},"Layout","/design-system/styles/layout",{"title":91,"_path":610,"layout":13},"/design-system/styles/logo",{"title":612,"_path":613,"layout":13},"Motion","/design-system/styles/motion",{"title":615,"_path":616,"layout":13},"Spacing","/design-system/styles/spacing",{"title":618,"_path":619,"layout":13},"Typography","/design-system/styles/typography",{"title":621,"_path":622,"children":623},"Components","/design-system/components",[624,627,630,633,636,639,642,645,648,651,654,657,660,663,666,669,672,675,678,681,684,687,690,693,696,699,702,705,708,711,714,717,720,721,722,723,726,729,732,735,738,741,744,747,750,753,756,759],{"title":625,"_path":626,"layout":13},"Accordion","/design-system/components/accordion",{"title":628,"_path":629,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":631,"_path":632,"layout":13},"Alert","/design-system/components/alert",{"title":634,"_path":635,"layout":13},"Block quote","/design-system/components/block-quote",{"title":637,"_path":638,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":640,"_path":641,"layout":13},"Button","/design-system/components/button",{"title":643,"_path":644,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":646,"_path":647,"layout":13},"Callout","/design-system/components/callout",{"title":649,"_path":650,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":652,"_path":653,"layout":13},"Card","/design-system/components/card",{"title":655,"_path":656,"layout":13},"Carousel","/design-system/components/carousel",{"title":658,"_path":659,"layout":13},"Category grid","/design-system/components/category-grid",{"title":661,"_path":662,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":664,"_path":665,"layout":13},"Chip","/design-system/components/chip",{"title":667,"_path":668,"layout":13},"Contact us","/design-system/components/contact-us",{"title":670,"_path":671,"layout":13},"Date input","/design-system/components/date-input",{"title":673,"_path":674,"layout":13},"Detail list","/design-system/components/detail-list",{"title":676,"_path":677,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":679,"_path":680,"layout":13},"File","/design-system/components/file",{"title":682,"_path":683,"layout":13},"Footer","/design-system/components/footer",{"title":685,"_path":686,"layout":13},"Form","/design-system/components/form",{"title":688,"_path":689,"layout":13},"Form alert","/design-system/components/form-alert",{"title":691,"_path":692,"layout":13},"Header","/design-system/components/header",{"title":694,"_path":695,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":697,"_path":698,"layout":13},"Input field","/design-system/components/input-field",{"title":700,"_path":701,"layout":13},"Key dates","/design-system/components/key-dates",{"title":703,"_path":704,"layout":13},"Media","/design-system/components/media",{"title":706,"_path":707,"layout":13},"Media embed","/design-system/components/media-embed",{"title":709,"_path":710,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":712,"_path":713,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":715,"_path":716,"layout":13},"Option button","/design-system/components/option-button",{"title":718,"_path":719,"layout":13},"Page action","/design-system/components/page-action",{"title":504,"_path":503,"layout":13},{"title":11,"_path":7,"layout":13},{"title":510,"_path":509,"layout":13},{"title":724,"_path":725,"layout":13},"Radio button","/design-system/components/radio-button",{"title":727,"_path":728,"layout":13},"Related links","/design-system/components/related-links",{"title":730,"_path":731,"layout":13},"Results listing","/design-system/components/results-listing",{"title":733,"_path":734,"layout":13},"Search bar","/design-system/components/search-bar",{"title":736,"_path":737,"layout":13},"Skip link","/design-system/components/skip-link",{"title":739,"_path":740,"layout":13},"Social share","/design-system/components/social-share",{"title":742,"_path":743,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":745,"_path":746,"layout":13},"Table","/design-system/components/table",{"title":748,"_path":749,"layout":13},"Tabs","/design-system/components/tabs",{"title":751,"_path":752,"layout":13},"Tag","/design-system/components/tag",{"title":754,"_path":755,"layout":13},"Text area","/design-system/components/text-area",{"title":757,"_path":758,"layout":13},"Timeline","/design-system/components/timeline",{"title":760,"_path":761,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":763,"_path":764,"children":765,"layout":13},"Ripple Framework","/framework",[766,767,785,807],{"title":763,"_path":764,"layout":13},{"title":768,"_path":769,"children":770},"Key Concepts","/framework/key-concepts",[771,773,776,779,782],{"title":579,"_path":772,"layout":13},"/framework/key-concepts/nuxt",{"title":774,"_path":775,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":777,"_path":778,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":780,"_path":781,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":783,"_path":784,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":786,"_path":787,"children":788},"Guides","/framework/guides",[789,792,795,798,801,804],{"title":790,"_path":791,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":793,"_path":794,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":796,"_path":797,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":799,"_path":800,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":802,"_path":803,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":805,"_path":806,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":808,"_path":809,"layout":13},"Core modules","/framework/core-modules",["Reactive",811],["Set"],["Reactive",813],{"module-navigation":814},null,true,"/design-system/components/primary-navigation/",1714695653940]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/profile/_payload.json b/design-system/components/profile/_payload.json
index c0506745af..efabd85d86 100644
--- a/design-system/components/profile/_payload.json
+++ b/design-system/components/profile/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":104,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695154433]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":104,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695652608]
\ No newline at end of file
diff --git a/design-system/components/profile/index.html b/design-system/components/profile/index.html
index 45b3103b2b..9febe58d3a 100644
--- a/design-system/components/profile/index.html
+++ b/design-system/components/profile/index.html
@@ -26,59 +26,59 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -90,8 +90,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Profile</h1><p class="rpl-type-p-large" data-v-3163c6df>The Profile component shows an avatar (image) on your page, with supporting text to display key information.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use profile to highlight key information to users by showing an avatar image with summary content. This highlights key information to users.<!--]--></p><p><!--[-->Each row of content includes a:<!--]--></p><ul><!--[--><li><!--[-->label<!--]--></li><li><!--[-->summary.<!--]--></li><!--]--></ul><p><!--[-->It&#39;s used to display key information, including:<!--]--></p><ul><!--[--><li><!--[-->name<!--]--></li><li><!--[-->date<!--]--></li><li><!--[-->category.<!--]--></li><!--]--></ul><p><!--[-->Only use the profile component for displaying simple information. For data or complex information, consider using a table.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-profile--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-profile--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Keep label as short as possible (under 2 words, like a name).<!--]--></li><li><!--[-->Keep all content clear and concise.<!--]--></li><li><!--[-->Display at the top of profile pages.<!--]--></li><li><!--[-->Always add alt text to the image.<!--]--></li><li><!--[-->Only use an image that&#39;s relevant to the summary.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Never use a label that doesn&#39;t match the summary.<!--]--></li><li><!--[-->Don&#39;t use unimportant, complex or longform content.<!--]--></li><li><!--[-->Don&#39;t include punctuation.<!--]--></li><li><!--[-->Never use full URLs in the label or summary.<!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/profile.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/profile/_payload.json">[{"state":1,"once":476,"_errors":478,"serverRendered":481,"path":7,"prerenderedAt":482},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":163,"$sdd-globals":179,"$sdd-navigation":181},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/profile":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":158,"_id":159,"_source":160,"_file":161,"_extension":162},"/design-system/components/profile","components",false,"","Profile","The Profile component shows an avatar (image) on your page, with supporting text to display key information.","page","Core",{"type":16,"children":17,"toc":150},"root",[18,27,33,38,53,58,76,81,86,93,121,127],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use profile to highlight key information to users by showing an avatar image with summary content. This highlights key information to users.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Each row of content includes a:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"label",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"summary.",{"type":19,"tag":28,"props":54,"children":55},{},[56],{"type":25,"value":57},"It's used to display key information, including:",{"type":19,"tag":39,"props":59,"children":60},{},[61,66,71],{"type":19,"tag":43,"props":62,"children":63},{},[64],{"type":25,"value":65},"name",{"type":19,"tag":43,"props":67,"children":68},{},[69],{"type":25,"value":70},"date",{"type":19,"tag":43,"props":72,"children":73},{},[74],{"type":25,"value":75},"category.",{"type":19,"tag":28,"props":77,"children":78},{},[79],{"type":25,"value":80},"Only use the profile component for displaying simple information. For data or complex information, consider using a table.",{"type":19,"tag":82,"props":83,"children":85},"docs-example",{"id":84},"core-containers-profile--default-story",[],{"type":19,"tag":87,"props":88,"children":90},"h3",{"id":89},"when-and-how-to-use",[91],{"type":25,"value":92},"When and how to use",{"type":19,"tag":39,"props":94,"children":95},{},[96,101,106,111,116],{"type":19,"tag":43,"props":97,"children":98},{},[99],{"type":25,"value":100},"Keep label as short as possible (under 2 words, like a name).",{"type":19,"tag":43,"props":102,"children":103},{},[104],{"type":25,"value":105},"Keep all content clear and concise.",{"type":19,"tag":43,"props":107,"children":108},{},[109],{"type":25,"value":110},"Display at the top of profile pages.",{"type":19,"tag":43,"props":112,"children":113},{},[114],{"type":25,"value":115},"Always add alt text to the image.",{"type":19,"tag":43,"props":117,"children":118},{},[119],{"type":25,"value":120},"Only use an image that's relevant to the summary.",{"type":19,"tag":87,"props":122,"children":124},{"id":123},"when-and-how-not-to-use",[125],{"type":25,"value":126},"When and how not to use",{"type":19,"tag":39,"props":128,"children":129},{},[130,135,140,145],{"type":19,"tag":43,"props":131,"children":132},{},[133],{"type":25,"value":134},"Never use a label that doesn't match the summary.",{"type":19,"tag":43,"props":136,"children":137},{},[138],{"type":25,"value":139},"Don't use unimportant, complex or longform content.",{"type":19,"tag":43,"props":141,"children":142},{},[143],{"type":25,"value":144},"Don't include punctuation.",{"type":19,"tag":43,"props":146,"children":147},{},[148],{"type":25,"value":149},"Never use full URLs in the label or summary.",{"title":10,"searchDepth":151,"depth":151,"links":152},2,[153],{"id":22,"depth":151,"text":26,"children":154},[155,157],{"id":89,"depth":156,"text":92},3,{"id":123,"depth":156,"text":126},"markdown","content:design-system:5.components:profile.md","content","design-system/5.components/profile.md","md",["ShallowRef",164],["ShallowReactive",165],{"/design-system/components/profile":166},[167,173],{"_path":168,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":169,"description":170,"layout":13,"label":14,"_type":158,"_id":171,"_source":160,"_file":172,"_extension":162},"/design-system/components/primary-navigation","Primary navigation","The Primary navigation component appears as a menu sitting at the top of the page and contains links to site’s content pages.","content:design-system:5.components:primary-navigation.md","design-system/5.components/primary-navigation.md",{"_path":174,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":175,"description":176,"layout":13,"label":14,"_type":158,"_id":177,"_source":160,"_file":178,"_extension":162},"/design-system/components/radio-button","Radio button","The Radio button component shows a list of options, with a radio (round) button to the left of each option’s description.","content:design-system:5.components:radio-button.md","design-system/5.components/radio-button.md",["ShallowRef",180],{},[182,187,428],{"title":183,"_path":184,"icon":185,"layout":186},"Ripple Design System","/","carbon:home","home",{"title":188,"_path":189,"children":190},"Design System","/design-system",[191,207,223,252,286],{"title":192,"_path":193,"children":194},"About","/design-system/about",[195,198,201,204],{"title":196,"_path":197,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":199,"_path":200,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":202,"_path":203,"layout":13},"Support","/design-system/about/getting-support",{"title":205,"_path":206,"layout":13},"Contributing","/design-system/about/contributing",{"title":208,"_path":209,"children":210},"Design","/design-system/design",[211,214,217,220],{"title":212,"_path":213,"layout":13},"Getting started","/design-system/design/getting-started",{"title":215,"_path":216,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":218,"_path":219,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":221,"_path":222,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":224,"_path":225,"children":226},"Develop","/design-system/develop",[227,229,231,234],{"title":212,"_path":228,"layout":13},"/design-system/develop/getting-started",{"title":205,"_path":230,"layout":13},"/design-system/develop/contributing",{"title":232,"_path":233,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":235,"children":236,"layout":13},"/design-system/develop/usage",[237,240,243,246,249],{"title":238,"_path":239,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":241,"_path":242,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":244,"_path":245,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":247,"_path":248,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":250,"_path":251,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":253,"_path":254,"children":255},"Styles","/design-system/styles",[256,259,262,265,268,271,274,277,280,283],{"title":257,"_path":258,"layout":13},"Colour","/design-system/styles/colour",{"title":260,"_path":261,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":263,"_path":264,"layout":13},"Grid","/design-system/styles/grid",{"title":266,"_path":267,"layout":13},"Icons","/design-system/styles/icons",{"title":269,"_path":270,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":272,"_path":273,"layout":13},"Layout","/design-system/styles/layout",{"title":275,"_path":276,"layout":13},"Logo","/design-system/styles/logo",{"title":278,"_path":279,"layout":13},"Motion","/design-system/styles/motion",{"title":281,"_path":282,"layout":13},"Spacing","/design-system/styles/spacing",{"title":284,"_path":285,"layout":13},"Typography","/design-system/styles/typography",{"title":287,"_path":288,"children":289},"Components","/design-system/components",[290,293,296,299,302,305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,390,391,392,395,398,401,404,407,410,413,416,419,422,425],{"title":291,"_path":292,"layout":13},"Accordion","/design-system/components/accordion",{"title":294,"_path":295,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":297,"_path":298,"layout":13},"Alert","/design-system/components/alert",{"title":300,"_path":301,"layout":13},"Block quote","/design-system/components/block-quote",{"title":303,"_path":304,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":306,"_path":307,"layout":13},"Button","/design-system/components/button",{"title":309,"_path":310,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":312,"_path":313,"layout":13},"Callout","/design-system/components/callout",{"title":315,"_path":316,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":318,"_path":319,"layout":13},"Card","/design-system/components/card",{"title":321,"_path":322,"layout":13},"Carousel","/design-system/components/carousel",{"title":324,"_path":325,"layout":13},"Category grid","/design-system/components/category-grid",{"title":327,"_path":328,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":330,"_path":331,"layout":13},"Chip","/design-system/components/chip",{"title":333,"_path":334,"layout":13},"Contact us","/design-system/components/contact-us",{"title":336,"_path":337,"layout":13},"Date input","/design-system/components/date-input",{"title":339,"_path":340,"layout":13},"Detail list","/design-system/components/detail-list",{"title":342,"_path":343,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":345,"_path":346,"layout":13},"File","/design-system/components/file",{"title":348,"_path":349,"layout":13},"Footer","/design-system/components/footer",{"title":351,"_path":352,"layout":13},"Form","/design-system/components/form",{"title":354,"_path":355,"layout":13},"Form alert","/design-system/components/form-alert",{"title":357,"_path":358,"layout":13},"Header","/design-system/components/header",{"title":360,"_path":361,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":363,"_path":364,"layout":13},"Input field","/design-system/components/input-field",{"title":366,"_path":367,"layout":13},"Key dates","/design-system/components/key-dates",{"title":369,"_path":370,"layout":13},"Media","/design-system/components/media",{"title":372,"_path":373,"layout":13},"Media embed","/design-system/components/media-embed",{"title":375,"_path":376,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":378,"_path":379,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":381,"_path":382,"layout":13},"Option button","/design-system/components/option-button",{"title":384,"_path":385,"layout":13},"Page action","/design-system/components/page-action",{"title":387,"_path":388,"layout":13},"Pagination","/design-system/components/pagination",{"title":169,"_path":168,"layout":13},{"title":11,"_path":7,"layout":13},{"title":175,"_path":174,"layout":13},{"title":393,"_path":394,"layout":13},"Related links","/design-system/components/related-links",{"title":396,"_path":397,"layout":13},"Results listing","/design-system/components/results-listing",{"title":399,"_path":400,"layout":13},"Search bar","/design-system/components/search-bar",{"title":402,"_path":403,"layout":13},"Skip link","/design-system/components/skip-link",{"title":405,"_path":406,"layout":13},"Social share","/design-system/components/social-share",{"title":408,"_path":409,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":411,"_path":412,"layout":13},"Table","/design-system/components/table",{"title":414,"_path":415,"layout":13},"Tabs","/design-system/components/tabs",{"title":417,"_path":418,"layout":13},"Tag","/design-system/components/tag",{"title":420,"_path":421,"layout":13},"Text area","/design-system/components/text-area",{"title":423,"_path":424,"layout":13},"Timeline","/design-system/components/timeline",{"title":426,"_path":427,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":429,"_path":430,"children":431,"layout":13},"Ripple Framework","/framework",[432,433,451,473],{"title":429,"_path":430,"layout":13},{"title":434,"_path":435,"children":436},"Key Concepts","/framework/key-concepts",[437,439,442,445,448],{"title":244,"_path":438,"layout":13},"/framework/key-concepts/nuxt",{"title":440,"_path":441,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":443,"_path":444,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":446,"_path":447,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":449,"_path":450,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":452,"_path":453,"children":454},"Guides","/framework/guides",[455,458,461,464,467,470],{"title":456,"_path":457,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":459,"_path":460,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":462,"_path":463,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":465,"_path":466,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":468,"_path":469,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":471,"_path":472,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":474,"_path":475,"layout":13},"Core modules","/framework/core-modules",["Reactive",477],["Set"],["Reactive",479],{"module-navigation":480},null,true,1714695154433]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Profile</h1><p class="rpl-type-p-large" data-v-3163c6df>The Profile component shows an avatar (image) on your page, with supporting text to display key information.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use profile to highlight key information to users by showing an avatar image with summary content. This highlights key information to users.<!--]--></p><p><!--[-->Each row of content includes a:<!--]--></p><ul><!--[--><li><!--[-->label<!--]--></li><li><!--[-->summary.<!--]--></li><!--]--></ul><p><!--[-->It&#39;s used to display key information, including:<!--]--></p><ul><!--[--><li><!--[-->name<!--]--></li><li><!--[-->date<!--]--></li><li><!--[-->category.<!--]--></li><!--]--></ul><p><!--[-->Only use the profile component for displaying simple information. For data or complex information, consider using a table.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-profile--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-profile--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Keep label as short as possible (under 2 words, like a name).<!--]--></li><li><!--[-->Keep all content clear and concise.<!--]--></li><li><!--[-->Display at the top of profile pages.<!--]--></li><li><!--[-->Always add alt text to the image.<!--]--></li><li><!--[-->Only use an image that&#39;s relevant to the summary.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Never use a label that doesn&#39;t match the summary.<!--]--></li><li><!--[-->Don&#39;t use unimportant, complex or longform content.<!--]--></li><li><!--[-->Don&#39;t include punctuation.<!--]--></li><li><!--[-->Never use full URLs in the label or summary.<!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/profile.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/profile/_payload.json">[{"state":1,"once":476,"_errors":478,"serverRendered":481,"path":7,"prerenderedAt":482},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":163,"$sdd-globals":179,"$sdd-navigation":181},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/profile":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":158,"_id":159,"_source":160,"_file":161,"_extension":162},"/design-system/components/profile","components",false,"","Profile","The Profile component shows an avatar (image) on your page, with supporting text to display key information.","page","Core",{"type":16,"children":17,"toc":150},"root",[18,27,33,38,53,58,76,81,86,93,121,127],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use profile to highlight key information to users by showing an avatar image with summary content. This highlights key information to users.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Each row of content includes a:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"label",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"summary.",{"type":19,"tag":28,"props":54,"children":55},{},[56],{"type":25,"value":57},"It's used to display key information, including:",{"type":19,"tag":39,"props":59,"children":60},{},[61,66,71],{"type":19,"tag":43,"props":62,"children":63},{},[64],{"type":25,"value":65},"name",{"type":19,"tag":43,"props":67,"children":68},{},[69],{"type":25,"value":70},"date",{"type":19,"tag":43,"props":72,"children":73},{},[74],{"type":25,"value":75},"category.",{"type":19,"tag":28,"props":77,"children":78},{},[79],{"type":25,"value":80},"Only use the profile component for displaying simple information. For data or complex information, consider using a table.",{"type":19,"tag":82,"props":83,"children":85},"docs-example",{"id":84},"core-containers-profile--default-story",[],{"type":19,"tag":87,"props":88,"children":90},"h3",{"id":89},"when-and-how-to-use",[91],{"type":25,"value":92},"When and how to use",{"type":19,"tag":39,"props":94,"children":95},{},[96,101,106,111,116],{"type":19,"tag":43,"props":97,"children":98},{},[99],{"type":25,"value":100},"Keep label as short as possible (under 2 words, like a name).",{"type":19,"tag":43,"props":102,"children":103},{},[104],{"type":25,"value":105},"Keep all content clear and concise.",{"type":19,"tag":43,"props":107,"children":108},{},[109],{"type":25,"value":110},"Display at the top of profile pages.",{"type":19,"tag":43,"props":112,"children":113},{},[114],{"type":25,"value":115},"Always add alt text to the image.",{"type":19,"tag":43,"props":117,"children":118},{},[119],{"type":25,"value":120},"Only use an image that's relevant to the summary.",{"type":19,"tag":87,"props":122,"children":124},{"id":123},"when-and-how-not-to-use",[125],{"type":25,"value":126},"When and how not to use",{"type":19,"tag":39,"props":128,"children":129},{},[130,135,140,145],{"type":19,"tag":43,"props":131,"children":132},{},[133],{"type":25,"value":134},"Never use a label that doesn't match the summary.",{"type":19,"tag":43,"props":136,"children":137},{},[138],{"type":25,"value":139},"Don't use unimportant, complex or longform content.",{"type":19,"tag":43,"props":141,"children":142},{},[143],{"type":25,"value":144},"Don't include punctuation.",{"type":19,"tag":43,"props":146,"children":147},{},[148],{"type":25,"value":149},"Never use full URLs in the label or summary.",{"title":10,"searchDepth":151,"depth":151,"links":152},2,[153],{"id":22,"depth":151,"text":26,"children":154},[155,157],{"id":89,"depth":156,"text":92},3,{"id":123,"depth":156,"text":126},"markdown","content:design-system:5.components:profile.md","content","design-system/5.components/profile.md","md",["ShallowRef",164],["ShallowReactive",165],{"/design-system/components/profile":166},[167,173],{"_path":168,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":169,"description":170,"layout":13,"label":14,"_type":158,"_id":171,"_source":160,"_file":172,"_extension":162},"/design-system/components/primary-navigation","Primary navigation","The Primary navigation component appears as a menu sitting at the top of the page and contains links to site’s content pages.","content:design-system:5.components:primary-navigation.md","design-system/5.components/primary-navigation.md",{"_path":174,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":175,"description":176,"layout":13,"label":14,"_type":158,"_id":177,"_source":160,"_file":178,"_extension":162},"/design-system/components/radio-button","Radio button","The Radio button component shows a list of options, with a radio (round) button to the left of each option’s description.","content:design-system:5.components:radio-button.md","design-system/5.components/radio-button.md",["ShallowRef",180],{},[182,187,428],{"title":183,"_path":184,"icon":185,"layout":186},"Ripple Design System","/","carbon:home","home",{"title":188,"_path":189,"children":190},"Design System","/design-system",[191,207,223,252,286],{"title":192,"_path":193,"children":194},"About","/design-system/about",[195,198,201,204],{"title":196,"_path":197,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":199,"_path":200,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":202,"_path":203,"layout":13},"Support","/design-system/about/getting-support",{"title":205,"_path":206,"layout":13},"Contributing","/design-system/about/contributing",{"title":208,"_path":209,"children":210},"Design","/design-system/design",[211,214,217,220],{"title":212,"_path":213,"layout":13},"Getting started","/design-system/design/getting-started",{"title":215,"_path":216,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":218,"_path":219,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":221,"_path":222,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":224,"_path":225,"children":226},"Develop","/design-system/develop",[227,229,231,234],{"title":212,"_path":228,"layout":13},"/design-system/develop/getting-started",{"title":205,"_path":230,"layout":13},"/design-system/develop/contributing",{"title":232,"_path":233,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":235,"children":236,"layout":13},"/design-system/develop/usage",[237,240,243,246,249],{"title":238,"_path":239,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":241,"_path":242,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":244,"_path":245,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":247,"_path":248,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":250,"_path":251,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":253,"_path":254,"children":255},"Styles","/design-system/styles",[256,259,262,265,268,271,274,277,280,283],{"title":257,"_path":258,"layout":13},"Colour","/design-system/styles/colour",{"title":260,"_path":261,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":263,"_path":264,"layout":13},"Grid","/design-system/styles/grid",{"title":266,"_path":267,"layout":13},"Icons","/design-system/styles/icons",{"title":269,"_path":270,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":272,"_path":273,"layout":13},"Layout","/design-system/styles/layout",{"title":275,"_path":276,"layout":13},"Logo","/design-system/styles/logo",{"title":278,"_path":279,"layout":13},"Motion","/design-system/styles/motion",{"title":281,"_path":282,"layout":13},"Spacing","/design-system/styles/spacing",{"title":284,"_path":285,"layout":13},"Typography","/design-system/styles/typography",{"title":287,"_path":288,"children":289},"Components","/design-system/components",[290,293,296,299,302,305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,390,391,392,395,398,401,404,407,410,413,416,419,422,425],{"title":291,"_path":292,"layout":13},"Accordion","/design-system/components/accordion",{"title":294,"_path":295,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":297,"_path":298,"layout":13},"Alert","/design-system/components/alert",{"title":300,"_path":301,"layout":13},"Block quote","/design-system/components/block-quote",{"title":303,"_path":304,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":306,"_path":307,"layout":13},"Button","/design-system/components/button",{"title":309,"_path":310,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":312,"_path":313,"layout":13},"Callout","/design-system/components/callout",{"title":315,"_path":316,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":318,"_path":319,"layout":13},"Card","/design-system/components/card",{"title":321,"_path":322,"layout":13},"Carousel","/design-system/components/carousel",{"title":324,"_path":325,"layout":13},"Category grid","/design-system/components/category-grid",{"title":327,"_path":328,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":330,"_path":331,"layout":13},"Chip","/design-system/components/chip",{"title":333,"_path":334,"layout":13},"Contact us","/design-system/components/contact-us",{"title":336,"_path":337,"layout":13},"Date input","/design-system/components/date-input",{"title":339,"_path":340,"layout":13},"Detail list","/design-system/components/detail-list",{"title":342,"_path":343,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":345,"_path":346,"layout":13},"File","/design-system/components/file",{"title":348,"_path":349,"layout":13},"Footer","/design-system/components/footer",{"title":351,"_path":352,"layout":13},"Form","/design-system/components/form",{"title":354,"_path":355,"layout":13},"Form alert","/design-system/components/form-alert",{"title":357,"_path":358,"layout":13},"Header","/design-system/components/header",{"title":360,"_path":361,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":363,"_path":364,"layout":13},"Input field","/design-system/components/input-field",{"title":366,"_path":367,"layout":13},"Key dates","/design-system/components/key-dates",{"title":369,"_path":370,"layout":13},"Media","/design-system/components/media",{"title":372,"_path":373,"layout":13},"Media embed","/design-system/components/media-embed",{"title":375,"_path":376,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":378,"_path":379,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":381,"_path":382,"layout":13},"Option button","/design-system/components/option-button",{"title":384,"_path":385,"layout":13},"Page action","/design-system/components/page-action",{"title":387,"_path":388,"layout":13},"Pagination","/design-system/components/pagination",{"title":169,"_path":168,"layout":13},{"title":11,"_path":7,"layout":13},{"title":175,"_path":174,"layout":13},{"title":393,"_path":394,"layout":13},"Related links","/design-system/components/related-links",{"title":396,"_path":397,"layout":13},"Results listing","/design-system/components/results-listing",{"title":399,"_path":400,"layout":13},"Search bar","/design-system/components/search-bar",{"title":402,"_path":403,"layout":13},"Skip link","/design-system/components/skip-link",{"title":405,"_path":406,"layout":13},"Social share","/design-system/components/social-share",{"title":408,"_path":409,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":411,"_path":412,"layout":13},"Table","/design-system/components/table",{"title":414,"_path":415,"layout":13},"Tabs","/design-system/components/tabs",{"title":417,"_path":418,"layout":13},"Tag","/design-system/components/tag",{"title":420,"_path":421,"layout":13},"Text area","/design-system/components/text-area",{"title":423,"_path":424,"layout":13},"Timeline","/design-system/components/timeline",{"title":426,"_path":427,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":429,"_path":430,"children":431,"layout":13},"Ripple Framework","/framework",[432,433,451,473],{"title":429,"_path":430,"layout":13},{"title":434,"_path":435,"children":436},"Key Concepts","/framework/key-concepts",[437,439,442,445,448],{"title":244,"_path":438,"layout":13},"/framework/key-concepts/nuxt",{"title":440,"_path":441,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":443,"_path":444,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":446,"_path":447,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":449,"_path":450,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":452,"_path":453,"children":454},"Guides","/framework/guides",[455,458,461,464,467,470],{"title":456,"_path":457,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":459,"_path":460,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":462,"_path":463,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":465,"_path":466,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":468,"_path":469,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":471,"_path":472,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":474,"_path":475,"layout":13},"Core modules","/framework/core-modules",["Reactive",477],["Set"],["Reactive",479],{"module-navigation":480},null,true,1714695652608]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/radio-button/_payload.json b/design-system/components/radio-button/_payload.json
index 7ade35404c..98daa759fc 100644
--- a/design-system/components/radio-button/_payload.json
+++ b/design-system/components/radio-button/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695156417]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695654474]
\ No newline at end of file
diff --git a/design-system/components/radio-button/index.html b/design-system/components/radio-button/index.html
index a2894d952b..6512b275e1 100644
--- a/design-system/components/radio-button/index.html
+++ b/design-system/components/radio-button/index.html
@@ -28,64 +28,64 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.F9NVvvm4.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.GmB4B_NE.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -97,8 +97,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Radio button</h1><p class="rpl-type-p-large" data-v-3163c6df>The Radio button component shows a list of options, with a radio (round) button to the left of each option’s description.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use radio buttons to let users select one option from a list.<!--]--></p><p><!--[-->They help users make a single selection from a list of available items.<!--]--></p><p><!--[-->Never use radio buttons if a user may select multiple options. Use a checkbox component instead.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-radio-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-radio-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="how-this-component-works" data-v-ea525968><a href="#how-this-component-works" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->How this component works<!--]--></a></h2><p><!--[-->Use radio buttons with:<!--]--></p><ul><!--[--><li><!--[-->form label<!--]--></li><li><!--[-->radio label<!--]--></li><li><!--[-->optional requirement label<!--]--></li><li><!--[-->optional hint text.<!--]--></li><!--]--></ul><p><!--[-->Radio buttons should always have a form and radio label.<!--]--></p><p><!--[-->Always use a descriptive label for groups of radio buttons. The label should say what the options represent and should help the user to choose one. Doing so ensures good accessibility, as screen readers read each option&#39;s label.<!--]--></p><p><!--[-->Not all users will know the visual difference between a radio button and a checkbox. You could add extra instructions to guide then, like &#39;select one option’.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use if only one options needs selecting from a list.<!--]--></li><li><!--[-->Use the reverse variant on grey backgrounds.<!--]--></li><li><!--[-->Always write clear and concise radio label descriptions.<!--]--></li><li><!--[-->Ensure you list options in a logical and unbiased manner.<!--]--></li><li><!--[-->If unsure about the list order, place from most common, to least common.<!--]--></li><li><!--[-->Use hints to tell users they can only select one option.<!--]--></li><li><!--[-->Always put the radio button on the left side of its label description to allow users, particularly those using screen magnifiers, to find labels.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t use for lists with more than one possible option. Use checkboxes for these.<!--]--></li><li><!--[-->Don&#39;t use a radio group with an horizontal alignment for displaying more than 2 options.<!--]--></li><li><!--[-->Don&#39;t list all possible options. Add an option for &#39;other&#39;.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->Radio buttons have 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, used on white backgrounds<!--]--></li><li><!--[-->reverse, used on neutral backgrounds.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-radio-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-radio-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="reverse" data-v-ea525968><a href="#reverse" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Reverse<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-radio-group--reverse-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-radio-group--reverse-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="error" data-v-ea525968><a href="#error" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Error<!--]--></a></h2><p><!--[-->All form inputs share error state styling. Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.<!--]--></p><p><!--[-->When creating an error message for radio buttons, use the wording below.<!--]--></p><p><!--[--><strong><!--[-->Error: invalid response to a yes/no question<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user understand why they would say yes.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select yes if [the information is true]’.<!--]--></li><li><!--[-->Example: &#39;Select yes if you drive a car&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: invalid response to a choice (other than yes/no) from 2 options<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user choose the option that applies to them.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select if [the choice you are asking the user to make].&#39;<!--]--></li><li><!--[-->Example: ‘Select if you drive a car or truck’.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: invalid response to a choice from 3 or more options<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user to choose a single option from 3 or more options.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select the [singular piece of information you are seeking from the user].&#39;<!--]--></li><li><!--[-->Example: ‘Select the day of the week you drive the most.&#39;<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-radio-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-radio-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Radio buttons use colour for interactive states.<!--]--></p><p><!--[-->A radio button component in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that radio button remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-radio-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-radio-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/radio-button.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/radio-button/_payload.json">[{"state":1,"once":692,"_errors":694,"serverRendered":697,"path":698,"prerenderedAt":699},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":381,"$sdd-globals":397,"$sdd-navigation":399},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/radio-button":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":376,"_id":377,"_source":378,"_file":379,"_extension":380},"/design-system/components/radio-button","components",false,"","Radio button","The Radio button component shows a list of options, with a radio (round) button to the left of each option’s description.","page","Core",{"type":16,"children":17,"toc":361},"root",[18,27,33,38,43,48,55,60,85,90,95,100,106,144,150,168,172,178,183,196,202,205,211,215,221,226,231,240,245,258,266,271,284,292,297,310,313,316,322,327,332,339],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use radio buttons to let users select one option from a list.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"They help users make a single selection from a list of available items.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Never use radio buttons if a user may select multiple options. Use a checkbox component instead.",{"type":19,"tag":44,"props":45,"children":47},"docs-example",{"id":46},"forms-radio-group--default-variant",[],{"type":19,"tag":49,"props":50,"children":52},"h3",{"id":51},"how-this-component-works",[53],{"type":25,"value":54},"How this component works",{"type":19,"tag":28,"props":56,"children":57},{},[58],{"type":25,"value":59},"Use radio buttons with:",{"type":19,"tag":61,"props":62,"children":63},"ul",{},[64,70,75,80],{"type":19,"tag":65,"props":66,"children":67},"li",{},[68],{"type":25,"value":69},"form label",{"type":19,"tag":65,"props":71,"children":72},{},[73],{"type":25,"value":74},"radio label",{"type":19,"tag":65,"props":76,"children":77},{},[78],{"type":25,"value":79},"optional requirement label",{"type":19,"tag":65,"props":81,"children":82},{},[83],{"type":25,"value":84},"optional hint text.",{"type":19,"tag":28,"props":86,"children":87},{},[88],{"type":25,"value":89},"Radio buttons should always have a form and radio label.",{"type":19,"tag":28,"props":91,"children":92},{},[93],{"type":25,"value":94},"Always use a descriptive label for groups of radio buttons. The label should say what the options represent and should help the user to choose one. Doing so ensures good accessibility, as screen readers read each option's label.",{"type":19,"tag":28,"props":96,"children":97},{},[98],{"type":25,"value":99},"Not all users will know the visual difference between a radio button and a checkbox. You could add extra instructions to guide then, like 'select one option’.",{"type":19,"tag":49,"props":101,"children":103},{"id":102},"when-and-how-to-use",[104],{"type":25,"value":105},"When and how to use",{"type":19,"tag":61,"props":107,"children":108},{},[109,114,119,124,129,134,139],{"type":19,"tag":65,"props":110,"children":111},{},[112],{"type":25,"value":113},"Use if only one options needs selecting from a list.",{"type":19,"tag":65,"props":115,"children":116},{},[117],{"type":25,"value":118},"Use the reverse variant on grey backgrounds.",{"type":19,"tag":65,"props":120,"children":121},{},[122],{"type":25,"value":123},"Always write clear and concise radio label descriptions.",{"type":19,"tag":65,"props":125,"children":126},{},[127],{"type":25,"value":128},"Ensure you list options in a logical and unbiased manner.",{"type":19,"tag":65,"props":130,"children":131},{},[132],{"type":25,"value":133},"If unsure about the list order, place from most common, to least common.",{"type":19,"tag":65,"props":135,"children":136},{},[137],{"type":25,"value":138},"Use hints to tell users they can only select one option.",{"type":19,"tag":65,"props":140,"children":141},{},[142],{"type":25,"value":143},"Always put the radio button on the left side of its label description to allow users, particularly those using screen magnifiers, to find labels.",{"type":19,"tag":49,"props":145,"children":147},{"id":146},"when-and-how-not-to-use",[148],{"type":25,"value":149},"When and how not to use",{"type":19,"tag":61,"props":151,"children":152},{},[153,158,163],{"type":19,"tag":65,"props":154,"children":155},{},[156],{"type":25,"value":157},"Don't use for lists with more than one possible option. Use checkboxes for these.",{"type":19,"tag":65,"props":159,"children":160},{},[161],{"type":25,"value":162},"Don't use a radio group with an horizontal alignment for displaying more than 2 options.",{"type":19,"tag":65,"props":164,"children":165},{},[166],{"type":25,"value":167},"Don't list all possible options. Add an option for 'other'.",{"type":19,"tag":169,"props":170,"children":171},"hr",{},[],{"type":19,"tag":20,"props":173,"children":175},{"id":174},"variants",[176],{"type":25,"value":177},"Variants",{"type":19,"tag":28,"props":179,"children":180},{},[181],{"type":25,"value":182},"Radio buttons have 2 variants:",{"type":19,"tag":61,"props":184,"children":185},{},[186,191],{"type":19,"tag":65,"props":187,"children":188},{},[189],{"type":25,"value":190},"default, used on white backgrounds",{"type":19,"tag":65,"props":192,"children":193},{},[194],{"type":25,"value":195},"reverse, used on neutral backgrounds.",{"type":19,"tag":49,"props":197,"children":199},{"id":198},"default",[200],{"type":25,"value":201},"Default",{"type":19,"tag":44,"props":203,"children":204},{"id":46},[],{"type":19,"tag":49,"props":206,"children":208},{"id":207},"reverse",[209],{"type":25,"value":210},"Reverse",{"type":19,"tag":44,"props":212,"children":214},{"id":213},"forms-radio-group--reverse-variant",[],{"type":19,"tag":49,"props":216,"children":218},{"id":217},"error",[219],{"type":25,"value":220},"Error",{"type":19,"tag":28,"props":222,"children":223},{},[224],{"type":25,"value":225},"All form inputs share error state styling. Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.",{"type":19,"tag":28,"props":227,"children":228},{},[229],{"type":25,"value":230},"When creating an error message for radio buttons, use the wording below.",{"type":19,"tag":28,"props":232,"children":233},{},[234],{"type":19,"tag":235,"props":236,"children":237},"strong",{},[238],{"type":25,"value":239},"Error: invalid response to a yes/no question",{"type":19,"tag":28,"props":241,"children":242},{},[243],{"type":25,"value":244},"Structure this message to help the user understand why they would say yes.",{"type":19,"tag":61,"props":246,"children":247},{},[248,253],{"type":19,"tag":65,"props":249,"children":250},{},[251],{"type":25,"value":252},"Error message: ‘Select yes if [the information is true]’.",{"type":19,"tag":65,"props":254,"children":255},{},[256],{"type":25,"value":257},"Example: 'Select yes if you drive a car'.",{"type":19,"tag":28,"props":259,"children":260},{},[261],{"type":19,"tag":235,"props":262,"children":263},{},[264],{"type":25,"value":265},"Error: invalid response to a choice (other than yes/no) from 2 options",{"type":19,"tag":28,"props":267,"children":268},{},[269],{"type":25,"value":270},"Structure this message to help the user choose the option that applies to them.",{"type":19,"tag":61,"props":272,"children":273},{},[274,279],{"type":19,"tag":65,"props":275,"children":276},{},[277],{"type":25,"value":278},"Error message: ‘Select if [the choice you are asking the user to make].'",{"type":19,"tag":65,"props":280,"children":281},{},[282],{"type":25,"value":283},"Example: ‘Select if you drive a car or truck’.",{"type":19,"tag":28,"props":285,"children":286},{},[287],{"type":19,"tag":235,"props":288,"children":289},{},[290],{"type":25,"value":291},"Error: invalid response to a choice from 3 or more options",{"type":19,"tag":28,"props":293,"children":294},{},[295],{"type":25,"value":296},"Structure this message to help the user to choose a single option from 3 or more options.",{"type":19,"tag":61,"props":298,"children":299},{},[300,305],{"type":19,"tag":65,"props":301,"children":302},{},[303],{"type":25,"value":304},"Error message: ‘Select the [singular piece of information you are seeking from the user].'",{"type":19,"tag":65,"props":306,"children":307},{},[308],{"type":25,"value":309},"Example: ‘Select the day of the week you drive the most.'",{"type":19,"tag":44,"props":311,"children":312},{"id":46},[],{"type":19,"tag":169,"props":314,"children":315},{},[],{"type":19,"tag":20,"props":317,"children":319},{"id":318},"theming",[320],{"type":25,"value":321},"Theming",{"type":19,"tag":28,"props":323,"children":324},{},[325],{"type":25,"value":326},"Radio buttons use colour for interactive states.",{"type":19,"tag":28,"props":328,"children":329},{},[330],{"type":25,"value":331},"A radio button component in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that radio button remains consistent while it transitions from a focus to an active state.",{"type":19,"tag":333,"props":334,"children":335},"docs-theme-chooser",{},[336],{"type":19,"tag":44,"props":337,"children":338},{"id":46},[],{"type":19,"tag":28,"props":340,"children":341},{},[342,344,351,353,359],{"type":25,"value":343},"To create your own theme see ",{"type":19,"tag":345,"props":346,"children":348},"a",{"href":347},"/design-system/design/theming-guidance-for-designers",[349],{"type":25,"value":350},"theming guidance for designers",{"type":25,"value":352}," or ",{"type":19,"tag":345,"props":354,"children":356},{"href":355},"/design-system/develop/theming",[357],{"type":25,"value":358},"theming guidance for developers",{"type":25,"value":360},".",{"title":10,"searchDepth":362,"depth":362,"links":363},2,[364,370,375],{"id":22,"depth":362,"text":26,"children":365},[366,368,369],{"id":51,"depth":367,"text":54},3,{"id":102,"depth":367,"text":105},{"id":146,"depth":367,"text":149},{"id":174,"depth":362,"text":177,"children":371},[372,373,374],{"id":198,"depth":367,"text":201},{"id":207,"depth":367,"text":210},{"id":217,"depth":367,"text":220},{"id":318,"depth":362,"text":321},"markdown","content:design-system:5.components:radio-button.md","content","design-system/5.components/radio-button.md","md",["ShallowRef",382],["ShallowReactive",383],{"/design-system/components/radio-button":384},[385,391],{"_path":386,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":387,"description":388,"layout":13,"label":14,"_type":376,"_id":389,"_source":378,"_file":390,"_extension":380},"/design-system/components/profile","Profile","The Profile component shows an avatar (image) on your page, with supporting text to display key information.","content:design-system:5.components:profile.md","design-system/5.components/profile.md",{"_path":392,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":393,"description":394,"layout":13,"label":14,"_type":376,"_id":395,"_source":378,"_file":396,"_extension":380},"/design-system/components/related-links","Related links","The Related links component is a list of links to help users discover related content.","content:design-system:5.components:related-links.md","design-system/5.components/related-links.md",["ShallowRef",398],{},[400,405,644],{"title":401,"_path":402,"icon":403,"layout":404},"Ripple Design System","/","carbon:home","home",{"title":406,"_path":407,"children":408},"Design System","/design-system",[409,425,440,468,502],{"title":410,"_path":411,"children":412},"About","/design-system/about",[413,416,419,422],{"title":414,"_path":415,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":417,"_path":418,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":420,"_path":421,"layout":13},"Support","/design-system/about/getting-support",{"title":423,"_path":424,"layout":13},"Contributing","/design-system/about/contributing",{"title":426,"_path":427,"children":428},"Design","/design-system/design",[429,432,435,438],{"title":430,"_path":431,"layout":13},"Getting started","/design-system/design/getting-started",{"title":433,"_path":434,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":436,"_path":437,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":439,"_path":347,"layout":13},"Theming guidance for designers",{"title":441,"_path":442,"children":443},"Develop","/design-system/develop",[444,446,448,450],{"title":430,"_path":445,"layout":13},"/design-system/develop/getting-started",{"title":423,"_path":447,"layout":13},"/design-system/develop/contributing",{"title":449,"_path":355,"layout":13},"Theme and brand application",{"title":26,"_path":451,"children":452,"layout":13},"/design-system/develop/usage",[453,456,459,462,465],{"title":454,"_path":455,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":457,"_path":458,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":460,"_path":461,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":463,"_path":464,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":466,"_path":467,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":469,"_path":470,"children":471},"Styles","/design-system/styles",[472,475,478,481,484,487,490,493,496,499],{"title":473,"_path":474,"layout":13},"Colour","/design-system/styles/colour",{"title":476,"_path":477,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":479,"_path":480,"layout":13},"Grid","/design-system/styles/grid",{"title":482,"_path":483,"layout":13},"Icons","/design-system/styles/icons",{"title":485,"_path":486,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":488,"_path":489,"layout":13},"Layout","/design-system/styles/layout",{"title":491,"_path":492,"layout":13},"Logo","/design-system/styles/logo",{"title":494,"_path":495,"layout":13},"Motion","/design-system/styles/motion",{"title":497,"_path":498,"layout":13},"Spacing","/design-system/styles/spacing",{"title":500,"_path":501,"layout":13},"Typography","/design-system/styles/typography",{"title":503,"_path":504,"children":505},"Components","/design-system/components",[506,509,512,515,518,521,524,527,530,533,536,539,542,545,548,551,554,557,560,563,566,569,572,575,578,581,584,587,590,593,596,599,602,605,608,609,610,611,614,617,620,623,626,629,632,635,638,641],{"title":507,"_path":508,"layout":13},"Accordion","/design-system/components/accordion",{"title":510,"_path":511,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":513,"_path":514,"layout":13},"Alert","/design-system/components/alert",{"title":516,"_path":517,"layout":13},"Block quote","/design-system/components/block-quote",{"title":519,"_path":520,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":522,"_path":523,"layout":13},"Button","/design-system/components/button",{"title":525,"_path":526,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":528,"_path":529,"layout":13},"Callout","/design-system/components/callout",{"title":531,"_path":532,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":534,"_path":535,"layout":13},"Card","/design-system/components/card",{"title":537,"_path":538,"layout":13},"Carousel","/design-system/components/carousel",{"title":540,"_path":541,"layout":13},"Category grid","/design-system/components/category-grid",{"title":543,"_path":544,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":546,"_path":547,"layout":13},"Chip","/design-system/components/chip",{"title":549,"_path":550,"layout":13},"Contact us","/design-system/components/contact-us",{"title":552,"_path":553,"layout":13},"Date input","/design-system/components/date-input",{"title":555,"_path":556,"layout":13},"Detail list","/design-system/components/detail-list",{"title":558,"_path":559,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":561,"_path":562,"layout":13},"File","/design-system/components/file",{"title":564,"_path":565,"layout":13},"Footer","/design-system/components/footer",{"title":567,"_path":568,"layout":13},"Form","/design-system/components/form",{"title":570,"_path":571,"layout":13},"Form alert","/design-system/components/form-alert",{"title":573,"_path":574,"layout":13},"Header","/design-system/components/header",{"title":576,"_path":577,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":579,"_path":580,"layout":13},"Input field","/design-system/components/input-field",{"title":582,"_path":583,"layout":13},"Key dates","/design-system/components/key-dates",{"title":585,"_path":586,"layout":13},"Media","/design-system/components/media",{"title":588,"_path":589,"layout":13},"Media embed","/design-system/components/media-embed",{"title":591,"_path":592,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":594,"_path":595,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":597,"_path":598,"layout":13},"Option button","/design-system/components/option-button",{"title":600,"_path":601,"layout":13},"Page action","/design-system/components/page-action",{"title":603,"_path":604,"layout":13},"Pagination","/design-system/components/pagination",{"title":606,"_path":607,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":387,"_path":386,"layout":13},{"title":11,"_path":7,"layout":13},{"title":393,"_path":392,"layout":13},{"title":612,"_path":613,"layout":13},"Results listing","/design-system/components/results-listing",{"title":615,"_path":616,"layout":13},"Search bar","/design-system/components/search-bar",{"title":618,"_path":619,"layout":13},"Skip link","/design-system/components/skip-link",{"title":621,"_path":622,"layout":13},"Social share","/design-system/components/social-share",{"title":624,"_path":625,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":627,"_path":628,"layout":13},"Table","/design-system/components/table",{"title":630,"_path":631,"layout":13},"Tabs","/design-system/components/tabs",{"title":633,"_path":634,"layout":13},"Tag","/design-system/components/tag",{"title":636,"_path":637,"layout":13},"Text area","/design-system/components/text-area",{"title":639,"_path":640,"layout":13},"Timeline","/design-system/components/timeline",{"title":642,"_path":643,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":645,"_path":646,"children":647,"layout":13},"Ripple Framework","/framework",[648,649,667,689],{"title":645,"_path":646,"layout":13},{"title":650,"_path":651,"children":652},"Key Concepts","/framework/key-concepts",[653,655,658,661,664],{"title":460,"_path":654,"layout":13},"/framework/key-concepts/nuxt",{"title":656,"_path":657,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":659,"_path":660,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":662,"_path":663,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":665,"_path":666,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":668,"_path":669,"children":670},"Guides","/framework/guides",[671,674,677,680,683,686],{"title":672,"_path":673,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":675,"_path":676,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":678,"_path":679,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":681,"_path":682,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":684,"_path":685,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":687,"_path":688,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":690,"_path":691,"layout":13},"Core modules","/framework/core-modules",["Reactive",693],["Set"],["Reactive",695],{"module-navigation":696},null,true,"/design-system/components/radio-button/",1714695156417]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Radio button</h1><p class="rpl-type-p-large" data-v-3163c6df>The Radio button component shows a list of options, with a radio (round) button to the left of each option’s description.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use radio buttons to let users select one option from a list.<!--]--></p><p><!--[-->They help users make a single selection from a list of available items.<!--]--></p><p><!--[-->Never use radio buttons if a user may select multiple options. Use a checkbox component instead.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-radio-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-radio-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="how-this-component-works" data-v-ea525968><a href="#how-this-component-works" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->How this component works<!--]--></a></h2><p><!--[-->Use radio buttons with:<!--]--></p><ul><!--[--><li><!--[-->form label<!--]--></li><li><!--[-->radio label<!--]--></li><li><!--[-->optional requirement label<!--]--></li><li><!--[-->optional hint text.<!--]--></li><!--]--></ul><p><!--[-->Radio buttons should always have a form and radio label.<!--]--></p><p><!--[-->Always use a descriptive label for groups of radio buttons. The label should say what the options represent and should help the user to choose one. Doing so ensures good accessibility, as screen readers read each option&#39;s label.<!--]--></p><p><!--[-->Not all users will know the visual difference between a radio button and a checkbox. You could add extra instructions to guide then, like &#39;select one option’.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use if only one options needs selecting from a list.<!--]--></li><li><!--[-->Use the reverse variant on grey backgrounds.<!--]--></li><li><!--[-->Always write clear and concise radio label descriptions.<!--]--></li><li><!--[-->Ensure you list options in a logical and unbiased manner.<!--]--></li><li><!--[-->If unsure about the list order, place from most common, to least common.<!--]--></li><li><!--[-->Use hints to tell users they can only select one option.<!--]--></li><li><!--[-->Always put the radio button on the left side of its label description to allow users, particularly those using screen magnifiers, to find labels.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t use for lists with more than one possible option. Use checkboxes for these.<!--]--></li><li><!--[-->Don&#39;t use a radio group with an horizontal alignment for displaying more than 2 options.<!--]--></li><li><!--[-->Don&#39;t list all possible options. Add an option for &#39;other&#39;.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->Radio buttons have 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, used on white backgrounds<!--]--></li><li><!--[-->reverse, used on neutral backgrounds.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-radio-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-radio-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="reverse" data-v-ea525968><a href="#reverse" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Reverse<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-radio-group--reverse-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-radio-group--reverse-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="error" data-v-ea525968><a href="#error" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Error<!--]--></a></h2><p><!--[-->All form inputs share error state styling. Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.<!--]--></p><p><!--[-->When creating an error message for radio buttons, use the wording below.<!--]--></p><p><!--[--><strong><!--[-->Error: invalid response to a yes/no question<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user understand why they would say yes.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select yes if [the information is true]’.<!--]--></li><li><!--[-->Example: &#39;Select yes if you drive a car&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: invalid response to a choice (other than yes/no) from 2 options<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user choose the option that applies to them.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select if [the choice you are asking the user to make].&#39;<!--]--></li><li><!--[-->Example: ‘Select if you drive a car or truck’.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: invalid response to a choice from 3 or more options<!--]--></strong><!--]--></p><p><!--[-->Structure this message to help the user to choose a single option from 3 or more options.<!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Select the [singular piece of information you are seeking from the user].&#39;<!--]--></li><li><!--[-->Example: ‘Select the day of the week you drive the most.&#39;<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-radio-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-radio-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Radio buttons use colour for interactive states.<!--]--></p><p><!--[-->A radio button component in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that radio button remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-radio-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-radio-group--default-variant&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/radio-button.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/radio-button/_payload.json">[{"state":1,"once":692,"_errors":694,"serverRendered":697,"path":698,"prerenderedAt":699},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":381,"$sdd-globals":397,"$sdd-navigation":399},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/radio-button":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":376,"_id":377,"_source":378,"_file":379,"_extension":380},"/design-system/components/radio-button","components",false,"","Radio button","The Radio button component shows a list of options, with a radio (round) button to the left of each option’s description.","page","Core",{"type":16,"children":17,"toc":361},"root",[18,27,33,38,43,48,55,60,85,90,95,100,106,144,150,168,172,178,183,196,202,205,211,215,221,226,231,240,245,258,266,271,284,292,297,310,313,316,322,327,332,339],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use radio buttons to let users select one option from a list.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"They help users make a single selection from a list of available items.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Never use radio buttons if a user may select multiple options. Use a checkbox component instead.",{"type":19,"tag":44,"props":45,"children":47},"docs-example",{"id":46},"forms-radio-group--default-variant",[],{"type":19,"tag":49,"props":50,"children":52},"h3",{"id":51},"how-this-component-works",[53],{"type":25,"value":54},"How this component works",{"type":19,"tag":28,"props":56,"children":57},{},[58],{"type":25,"value":59},"Use radio buttons with:",{"type":19,"tag":61,"props":62,"children":63},"ul",{},[64,70,75,80],{"type":19,"tag":65,"props":66,"children":67},"li",{},[68],{"type":25,"value":69},"form label",{"type":19,"tag":65,"props":71,"children":72},{},[73],{"type":25,"value":74},"radio label",{"type":19,"tag":65,"props":76,"children":77},{},[78],{"type":25,"value":79},"optional requirement label",{"type":19,"tag":65,"props":81,"children":82},{},[83],{"type":25,"value":84},"optional hint text.",{"type":19,"tag":28,"props":86,"children":87},{},[88],{"type":25,"value":89},"Radio buttons should always have a form and radio label.",{"type":19,"tag":28,"props":91,"children":92},{},[93],{"type":25,"value":94},"Always use a descriptive label for groups of radio buttons. The label should say what the options represent and should help the user to choose one. Doing so ensures good accessibility, as screen readers read each option's label.",{"type":19,"tag":28,"props":96,"children":97},{},[98],{"type":25,"value":99},"Not all users will know the visual difference between a radio button and a checkbox. You could add extra instructions to guide then, like 'select one option’.",{"type":19,"tag":49,"props":101,"children":103},{"id":102},"when-and-how-to-use",[104],{"type":25,"value":105},"When and how to use",{"type":19,"tag":61,"props":107,"children":108},{},[109,114,119,124,129,134,139],{"type":19,"tag":65,"props":110,"children":111},{},[112],{"type":25,"value":113},"Use if only one options needs selecting from a list.",{"type":19,"tag":65,"props":115,"children":116},{},[117],{"type":25,"value":118},"Use the reverse variant on grey backgrounds.",{"type":19,"tag":65,"props":120,"children":121},{},[122],{"type":25,"value":123},"Always write clear and concise radio label descriptions.",{"type":19,"tag":65,"props":125,"children":126},{},[127],{"type":25,"value":128},"Ensure you list options in a logical and unbiased manner.",{"type":19,"tag":65,"props":130,"children":131},{},[132],{"type":25,"value":133},"If unsure about the list order, place from most common, to least common.",{"type":19,"tag":65,"props":135,"children":136},{},[137],{"type":25,"value":138},"Use hints to tell users they can only select one option.",{"type":19,"tag":65,"props":140,"children":141},{},[142],{"type":25,"value":143},"Always put the radio button on the left side of its label description to allow users, particularly those using screen magnifiers, to find labels.",{"type":19,"tag":49,"props":145,"children":147},{"id":146},"when-and-how-not-to-use",[148],{"type":25,"value":149},"When and how not to use",{"type":19,"tag":61,"props":151,"children":152},{},[153,158,163],{"type":19,"tag":65,"props":154,"children":155},{},[156],{"type":25,"value":157},"Don't use for lists with more than one possible option. Use checkboxes for these.",{"type":19,"tag":65,"props":159,"children":160},{},[161],{"type":25,"value":162},"Don't use a radio group with an horizontal alignment for displaying more than 2 options.",{"type":19,"tag":65,"props":164,"children":165},{},[166],{"type":25,"value":167},"Don't list all possible options. Add an option for 'other'.",{"type":19,"tag":169,"props":170,"children":171},"hr",{},[],{"type":19,"tag":20,"props":173,"children":175},{"id":174},"variants",[176],{"type":25,"value":177},"Variants",{"type":19,"tag":28,"props":179,"children":180},{},[181],{"type":25,"value":182},"Radio buttons have 2 variants:",{"type":19,"tag":61,"props":184,"children":185},{},[186,191],{"type":19,"tag":65,"props":187,"children":188},{},[189],{"type":25,"value":190},"default, used on white backgrounds",{"type":19,"tag":65,"props":192,"children":193},{},[194],{"type":25,"value":195},"reverse, used on neutral backgrounds.",{"type":19,"tag":49,"props":197,"children":199},{"id":198},"default",[200],{"type":25,"value":201},"Default",{"type":19,"tag":44,"props":203,"children":204},{"id":46},[],{"type":19,"tag":49,"props":206,"children":208},{"id":207},"reverse",[209],{"type":25,"value":210},"Reverse",{"type":19,"tag":44,"props":212,"children":214},{"id":213},"forms-radio-group--reverse-variant",[],{"type":19,"tag":49,"props":216,"children":218},{"id":217},"error",[219],{"type":25,"value":220},"Error",{"type":19,"tag":28,"props":222,"children":223},{},[224],{"type":25,"value":225},"All form inputs share error state styling. Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.",{"type":19,"tag":28,"props":227,"children":228},{},[229],{"type":25,"value":230},"When creating an error message for radio buttons, use the wording below.",{"type":19,"tag":28,"props":232,"children":233},{},[234],{"type":19,"tag":235,"props":236,"children":237},"strong",{},[238],{"type":25,"value":239},"Error: invalid response to a yes/no question",{"type":19,"tag":28,"props":241,"children":242},{},[243],{"type":25,"value":244},"Structure this message to help the user understand why they would say yes.",{"type":19,"tag":61,"props":246,"children":247},{},[248,253],{"type":19,"tag":65,"props":249,"children":250},{},[251],{"type":25,"value":252},"Error message: ‘Select yes if [the information is true]’.",{"type":19,"tag":65,"props":254,"children":255},{},[256],{"type":25,"value":257},"Example: 'Select yes if you drive a car'.",{"type":19,"tag":28,"props":259,"children":260},{},[261],{"type":19,"tag":235,"props":262,"children":263},{},[264],{"type":25,"value":265},"Error: invalid response to a choice (other than yes/no) from 2 options",{"type":19,"tag":28,"props":267,"children":268},{},[269],{"type":25,"value":270},"Structure this message to help the user choose the option that applies to them.",{"type":19,"tag":61,"props":272,"children":273},{},[274,279],{"type":19,"tag":65,"props":275,"children":276},{},[277],{"type":25,"value":278},"Error message: ‘Select if [the choice you are asking the user to make].'",{"type":19,"tag":65,"props":280,"children":281},{},[282],{"type":25,"value":283},"Example: ‘Select if you drive a car or truck’.",{"type":19,"tag":28,"props":285,"children":286},{},[287],{"type":19,"tag":235,"props":288,"children":289},{},[290],{"type":25,"value":291},"Error: invalid response to a choice from 3 or more options",{"type":19,"tag":28,"props":293,"children":294},{},[295],{"type":25,"value":296},"Structure this message to help the user to choose a single option from 3 or more options.",{"type":19,"tag":61,"props":298,"children":299},{},[300,305],{"type":19,"tag":65,"props":301,"children":302},{},[303],{"type":25,"value":304},"Error message: ‘Select the [singular piece of information you are seeking from the user].'",{"type":19,"tag":65,"props":306,"children":307},{},[308],{"type":25,"value":309},"Example: ‘Select the day of the week you drive the most.'",{"type":19,"tag":44,"props":311,"children":312},{"id":46},[],{"type":19,"tag":169,"props":314,"children":315},{},[],{"type":19,"tag":20,"props":317,"children":319},{"id":318},"theming",[320],{"type":25,"value":321},"Theming",{"type":19,"tag":28,"props":323,"children":324},{},[325],{"type":25,"value":326},"Radio buttons use colour for interactive states.",{"type":19,"tag":28,"props":328,"children":329},{},[330],{"type":25,"value":331},"A radio button component in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of that radio button remains consistent while it transitions from a focus to an active state.",{"type":19,"tag":333,"props":334,"children":335},"docs-theme-chooser",{},[336],{"type":19,"tag":44,"props":337,"children":338},{"id":46},[],{"type":19,"tag":28,"props":340,"children":341},{},[342,344,351,353,359],{"type":25,"value":343},"To create your own theme see ",{"type":19,"tag":345,"props":346,"children":348},"a",{"href":347},"/design-system/design/theming-guidance-for-designers",[349],{"type":25,"value":350},"theming guidance for designers",{"type":25,"value":352}," or ",{"type":19,"tag":345,"props":354,"children":356},{"href":355},"/design-system/develop/theming",[357],{"type":25,"value":358},"theming guidance for developers",{"type":25,"value":360},".",{"title":10,"searchDepth":362,"depth":362,"links":363},2,[364,370,375],{"id":22,"depth":362,"text":26,"children":365},[366,368,369],{"id":51,"depth":367,"text":54},3,{"id":102,"depth":367,"text":105},{"id":146,"depth":367,"text":149},{"id":174,"depth":362,"text":177,"children":371},[372,373,374],{"id":198,"depth":367,"text":201},{"id":207,"depth":367,"text":210},{"id":217,"depth":367,"text":220},{"id":318,"depth":362,"text":321},"markdown","content:design-system:5.components:radio-button.md","content","design-system/5.components/radio-button.md","md",["ShallowRef",382],["ShallowReactive",383],{"/design-system/components/radio-button":384},[385,391],{"_path":386,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":387,"description":388,"layout":13,"label":14,"_type":376,"_id":389,"_source":378,"_file":390,"_extension":380},"/design-system/components/profile","Profile","The Profile component shows an avatar (image) on your page, with supporting text to display key information.","content:design-system:5.components:profile.md","design-system/5.components/profile.md",{"_path":392,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":393,"description":394,"layout":13,"label":14,"_type":376,"_id":395,"_source":378,"_file":396,"_extension":380},"/design-system/components/related-links","Related links","The Related links component is a list of links to help users discover related content.","content:design-system:5.components:related-links.md","design-system/5.components/related-links.md",["ShallowRef",398],{},[400,405,644],{"title":401,"_path":402,"icon":403,"layout":404},"Ripple Design System","/","carbon:home","home",{"title":406,"_path":407,"children":408},"Design System","/design-system",[409,425,440,468,502],{"title":410,"_path":411,"children":412},"About","/design-system/about",[413,416,419,422],{"title":414,"_path":415,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":417,"_path":418,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":420,"_path":421,"layout":13},"Support","/design-system/about/getting-support",{"title":423,"_path":424,"layout":13},"Contributing","/design-system/about/contributing",{"title":426,"_path":427,"children":428},"Design","/design-system/design",[429,432,435,438],{"title":430,"_path":431,"layout":13},"Getting started","/design-system/design/getting-started",{"title":433,"_path":434,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":436,"_path":437,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":439,"_path":347,"layout":13},"Theming guidance for designers",{"title":441,"_path":442,"children":443},"Develop","/design-system/develop",[444,446,448,450],{"title":430,"_path":445,"layout":13},"/design-system/develop/getting-started",{"title":423,"_path":447,"layout":13},"/design-system/develop/contributing",{"title":449,"_path":355,"layout":13},"Theme and brand application",{"title":26,"_path":451,"children":452,"layout":13},"/design-system/develop/usage",[453,456,459,462,465],{"title":454,"_path":455,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":457,"_path":458,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":460,"_path":461,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":463,"_path":464,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":466,"_path":467,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":469,"_path":470,"children":471},"Styles","/design-system/styles",[472,475,478,481,484,487,490,493,496,499],{"title":473,"_path":474,"layout":13},"Colour","/design-system/styles/colour",{"title":476,"_path":477,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":479,"_path":480,"layout":13},"Grid","/design-system/styles/grid",{"title":482,"_path":483,"layout":13},"Icons","/design-system/styles/icons",{"title":485,"_path":486,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":488,"_path":489,"layout":13},"Layout","/design-system/styles/layout",{"title":491,"_path":492,"layout":13},"Logo","/design-system/styles/logo",{"title":494,"_path":495,"layout":13},"Motion","/design-system/styles/motion",{"title":497,"_path":498,"layout":13},"Spacing","/design-system/styles/spacing",{"title":500,"_path":501,"layout":13},"Typography","/design-system/styles/typography",{"title":503,"_path":504,"children":505},"Components","/design-system/components",[506,509,512,515,518,521,524,527,530,533,536,539,542,545,548,551,554,557,560,563,566,569,572,575,578,581,584,587,590,593,596,599,602,605,608,609,610,611,614,617,620,623,626,629,632,635,638,641],{"title":507,"_path":508,"layout":13},"Accordion","/design-system/components/accordion",{"title":510,"_path":511,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":513,"_path":514,"layout":13},"Alert","/design-system/components/alert",{"title":516,"_path":517,"layout":13},"Block quote","/design-system/components/block-quote",{"title":519,"_path":520,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":522,"_path":523,"layout":13},"Button","/design-system/components/button",{"title":525,"_path":526,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":528,"_path":529,"layout":13},"Callout","/design-system/components/callout",{"title":531,"_path":532,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":534,"_path":535,"layout":13},"Card","/design-system/components/card",{"title":537,"_path":538,"layout":13},"Carousel","/design-system/components/carousel",{"title":540,"_path":541,"layout":13},"Category grid","/design-system/components/category-grid",{"title":543,"_path":544,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":546,"_path":547,"layout":13},"Chip","/design-system/components/chip",{"title":549,"_path":550,"layout":13},"Contact us","/design-system/components/contact-us",{"title":552,"_path":553,"layout":13},"Date input","/design-system/components/date-input",{"title":555,"_path":556,"layout":13},"Detail list","/design-system/components/detail-list",{"title":558,"_path":559,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":561,"_path":562,"layout":13},"File","/design-system/components/file",{"title":564,"_path":565,"layout":13},"Footer","/design-system/components/footer",{"title":567,"_path":568,"layout":13},"Form","/design-system/components/form",{"title":570,"_path":571,"layout":13},"Form alert","/design-system/components/form-alert",{"title":573,"_path":574,"layout":13},"Header","/design-system/components/header",{"title":576,"_path":577,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":579,"_path":580,"layout":13},"Input field","/design-system/components/input-field",{"title":582,"_path":583,"layout":13},"Key dates","/design-system/components/key-dates",{"title":585,"_path":586,"layout":13},"Media","/design-system/components/media",{"title":588,"_path":589,"layout":13},"Media embed","/design-system/components/media-embed",{"title":591,"_path":592,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":594,"_path":595,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":597,"_path":598,"layout":13},"Option button","/design-system/components/option-button",{"title":600,"_path":601,"layout":13},"Page action","/design-system/components/page-action",{"title":603,"_path":604,"layout":13},"Pagination","/design-system/components/pagination",{"title":606,"_path":607,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":387,"_path":386,"layout":13},{"title":11,"_path":7,"layout":13},{"title":393,"_path":392,"layout":13},{"title":612,"_path":613,"layout":13},"Results listing","/design-system/components/results-listing",{"title":615,"_path":616,"layout":13},"Search bar","/design-system/components/search-bar",{"title":618,"_path":619,"layout":13},"Skip link","/design-system/components/skip-link",{"title":621,"_path":622,"layout":13},"Social share","/design-system/components/social-share",{"title":624,"_path":625,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":627,"_path":628,"layout":13},"Table","/design-system/components/table",{"title":630,"_path":631,"layout":13},"Tabs","/design-system/components/tabs",{"title":633,"_path":634,"layout":13},"Tag","/design-system/components/tag",{"title":636,"_path":637,"layout":13},"Text area","/design-system/components/text-area",{"title":639,"_path":640,"layout":13},"Timeline","/design-system/components/timeline",{"title":642,"_path":643,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":645,"_path":646,"children":647,"layout":13},"Ripple Framework","/framework",[648,649,667,689],{"title":645,"_path":646,"layout":13},{"title":650,"_path":651,"children":652},"Key Concepts","/framework/key-concepts",[653,655,658,661,664],{"title":460,"_path":654,"layout":13},"/framework/key-concepts/nuxt",{"title":656,"_path":657,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":659,"_path":660,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":662,"_path":663,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":665,"_path":666,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":668,"_path":669,"children":670},"Guides","/framework/guides",[671,674,677,680,683,686],{"title":672,"_path":673,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":675,"_path":676,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":678,"_path":679,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":681,"_path":682,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":684,"_path":685,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":687,"_path":688,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":690,"_path":691,"layout":13},"Core modules","/framework/core-modules",["Reactive",693],["Set"],["Reactive",695],{"module-navigation":696},null,true,"/design-system/components/radio-button/",1714695654474]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/related-links/_payload.json b/design-system/components/related-links/_payload.json
index 0c00eeb6ab..d582aad5b5 100644
--- a/design-system/components/related-links/_payload.json
+++ b/design-system/components/related-links/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":104,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695154534]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":104,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695652687]
\ No newline at end of file
diff --git a/design-system/components/related-links/index.html b/design-system/components/related-links/index.html
index 66c6a74c22..15b20b5dfd 100644
--- a/design-system/components/related-links/index.html
+++ b/design-system/components/related-links/index.html
@@ -26,59 +26,59 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -90,8 +90,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Related links</h1><p class="rpl-type-p-large" data-v-3163c6df>The Related links component is a list of links to help users discover related content.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use related links to present a user with a list of links. They can use these to explore content related to the current page or context, or to the next best action.<!--]--></p><p><!--[-->Use if you’re presenting the user with related information or actions to help them deep dive into content.<!--]--></p><p><!--[-->Don&#39;t use related links for linking to unrelated content.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-related-links--related-links&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-related-links--related-links&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use to help users discover related content.<!--]--></li><li><!--[-->Only use in the sidebar section pages.<!--]--></li><li><!--[-->Use at least 2 links.<!--]--></li><li><!--[-->Use no more than 8 links.<!--]--></li><li><!--[-->Keep description clear, concise and specific to each link.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t add unrelated links.<!--]--></li><li><!--[-->Don&#39;t overload each link with too many words.<!--]--></li><li><!--[-->Don&#39;t use punctuation.<!--]--></li><li><!--[-->Don&#39;t link to documents or videos - instead, embed them.<!--]--></li><li><!--[-->Don&#39;t include other interactive elements, like buttons.<!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/related-links.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/related-links/_payload.json">[{"state":1,"once":445,"_errors":447,"serverRendered":450,"path":7,"prerenderedAt":451},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":132,"$sdd-globals":148,"$sdd-navigation":150},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/related-links":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":127,"_id":128,"_source":129,"_file":130,"_extension":131},"/design-system/components/related-links","components",false,"","Related links","The Related links component is a list of links to help users discover related content.","page","Core",{"type":16,"children":17,"toc":119},"root",[18,27,33,38,43,48,55,85,91],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use related links to present a user with a list of links. They can use these to explore content related to the current page or context, or to the next best action.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Use if you’re presenting the user with related information or actions to help them deep dive into content.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Don't use related links for linking to unrelated content.",{"type":19,"tag":44,"props":45,"children":47},"docs-example",{"id":46},"core-navigation-related-links--related-links",[],{"type":19,"tag":49,"props":50,"children":52},"h3",{"id":51},"when-and-how-to-use",[53],{"type":25,"value":54},"When and how to use",{"type":19,"tag":56,"props":57,"children":58},"ul",{},[59,65,70,75,80],{"type":19,"tag":60,"props":61,"children":62},"li",{},[63],{"type":25,"value":64},"Use to help users discover related content.",{"type":19,"tag":60,"props":66,"children":67},{},[68],{"type":25,"value":69},"Only use in the sidebar section pages.",{"type":19,"tag":60,"props":71,"children":72},{},[73],{"type":25,"value":74},"Use at least 2 links.",{"type":19,"tag":60,"props":76,"children":77},{},[78],{"type":25,"value":79},"Use no more than 8 links.",{"type":19,"tag":60,"props":81,"children":82},{},[83],{"type":25,"value":84},"Keep description clear, concise and specific to each link.",{"type":19,"tag":49,"props":86,"children":88},{"id":87},"when-and-how-not-to-use",[89],{"type":25,"value":90},"When and how not to use",{"type":19,"tag":56,"props":92,"children":93},{},[94,99,104,109,114],{"type":19,"tag":60,"props":95,"children":96},{},[97],{"type":25,"value":98},"Don't add unrelated links.",{"type":19,"tag":60,"props":100,"children":101},{},[102],{"type":25,"value":103},"Don't overload each link with too many words.",{"type":19,"tag":60,"props":105,"children":106},{},[107],{"type":25,"value":108},"Don't use punctuation.",{"type":19,"tag":60,"props":110,"children":111},{},[112],{"type":25,"value":113},"Don't link to documents or videos - instead, embed them.",{"type":19,"tag":60,"props":115,"children":116},{},[117],{"type":25,"value":118},"Don't include other interactive elements, like buttons.",{"title":10,"searchDepth":120,"depth":120,"links":121},2,[122],{"id":22,"depth":120,"text":26,"children":123},[124,126],{"id":51,"depth":125,"text":54},3,{"id":87,"depth":125,"text":90},"markdown","content:design-system:5.components:related-links.md","content","design-system/5.components/related-links.md","md",["ShallowRef",133],["ShallowReactive",134],{"/design-system/components/related-links":135},[136,142],{"_path":137,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":138,"description":139,"layout":13,"label":14,"_type":127,"_id":140,"_source":129,"_file":141,"_extension":131},"/design-system/components/radio-button","Radio button","The Radio button component shows a list of options, with a radio (round) button to the left of each option’s description.","content:design-system:5.components:radio-button.md","design-system/5.components/radio-button.md",{"_path":143,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":144,"description":145,"layout":13,"label":14,"_type":127,"_id":146,"_source":129,"_file":147,"_extension":131},"/design-system/components/results-listing","Results listing","The Results listing component shows a list of search result items, with each item displaying key information relevant to that search.","content:design-system:5.components:results-listing.md","design-system/5.components/results-listing.md",["ShallowRef",149],{},[151,156,397],{"title":152,"_path":153,"icon":154,"layout":155},"Ripple Design System","/","carbon:home","home",{"title":157,"_path":158,"children":159},"Design System","/design-system",[160,176,192,221,255],{"title":161,"_path":162,"children":163},"About","/design-system/about",[164,167,170,173],{"title":165,"_path":166,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":168,"_path":169,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":171,"_path":172,"layout":13},"Support","/design-system/about/getting-support",{"title":174,"_path":175,"layout":13},"Contributing","/design-system/about/contributing",{"title":177,"_path":178,"children":179},"Design","/design-system/design",[180,183,186,189],{"title":181,"_path":182,"layout":13},"Getting started","/design-system/design/getting-started",{"title":184,"_path":185,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":187,"_path":188,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":190,"_path":191,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":193,"_path":194,"children":195},"Develop","/design-system/develop",[196,198,200,203],{"title":181,"_path":197,"layout":13},"/design-system/develop/getting-started",{"title":174,"_path":199,"layout":13},"/design-system/develop/contributing",{"title":201,"_path":202,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":204,"children":205,"layout":13},"/design-system/develop/usage",[206,209,212,215,218],{"title":207,"_path":208,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":210,"_path":211,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":213,"_path":214,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":216,"_path":217,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":219,"_path":220,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":222,"_path":223,"children":224},"Styles","/design-system/styles",[225,228,231,234,237,240,243,246,249,252],{"title":226,"_path":227,"layout":13},"Colour","/design-system/styles/colour",{"title":229,"_path":230,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":232,"_path":233,"layout":13},"Grid","/design-system/styles/grid",{"title":235,"_path":236,"layout":13},"Icons","/design-system/styles/icons",{"title":238,"_path":239,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":241,"_path":242,"layout":13},"Layout","/design-system/styles/layout",{"title":244,"_path":245,"layout":13},"Logo","/design-system/styles/logo",{"title":247,"_path":248,"layout":13},"Motion","/design-system/styles/motion",{"title":250,"_path":251,"layout":13},"Spacing","/design-system/styles/spacing",{"title":253,"_path":254,"layout":13},"Typography","/design-system/styles/typography",{"title":256,"_path":257,"children":258},"Components","/design-system/components",[259,262,265,268,271,274,277,280,283,286,289,292,295,298,301,304,307,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,365,366,367,370,373,376,379,382,385,388,391,394],{"title":260,"_path":261,"layout":13},"Accordion","/design-system/components/accordion",{"title":263,"_path":264,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":266,"_path":267,"layout":13},"Alert","/design-system/components/alert",{"title":269,"_path":270,"layout":13},"Block quote","/design-system/components/block-quote",{"title":272,"_path":273,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":275,"_path":276,"layout":13},"Button","/design-system/components/button",{"title":278,"_path":279,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":281,"_path":282,"layout":13},"Callout","/design-system/components/callout",{"title":284,"_path":285,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":287,"_path":288,"layout":13},"Card","/design-system/components/card",{"title":290,"_path":291,"layout":13},"Carousel","/design-system/components/carousel",{"title":293,"_path":294,"layout":13},"Category grid","/design-system/components/category-grid",{"title":296,"_path":297,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":299,"_path":300,"layout":13},"Chip","/design-system/components/chip",{"title":302,"_path":303,"layout":13},"Contact us","/design-system/components/contact-us",{"title":305,"_path":306,"layout":13},"Date input","/design-system/components/date-input",{"title":308,"_path":309,"layout":13},"Detail list","/design-system/components/detail-list",{"title":311,"_path":312,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":314,"_path":315,"layout":13},"File","/design-system/components/file",{"title":317,"_path":318,"layout":13},"Footer","/design-system/components/footer",{"title":320,"_path":321,"layout":13},"Form","/design-system/components/form",{"title":323,"_path":324,"layout":13},"Form alert","/design-system/components/form-alert",{"title":326,"_path":327,"layout":13},"Header","/design-system/components/header",{"title":329,"_path":330,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":332,"_path":333,"layout":13},"Input field","/design-system/components/input-field",{"title":335,"_path":336,"layout":13},"Key dates","/design-system/components/key-dates",{"title":338,"_path":339,"layout":13},"Media","/design-system/components/media",{"title":341,"_path":342,"layout":13},"Media embed","/design-system/components/media-embed",{"title":344,"_path":345,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":347,"_path":348,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":350,"_path":351,"layout":13},"Option button","/design-system/components/option-button",{"title":353,"_path":354,"layout":13},"Page action","/design-system/components/page-action",{"title":356,"_path":357,"layout":13},"Pagination","/design-system/components/pagination",{"title":359,"_path":360,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":362,"_path":363,"layout":13},"Profile","/design-system/components/profile",{"title":138,"_path":137,"layout":13},{"title":11,"_path":7,"layout":13},{"title":144,"_path":143,"layout":13},{"title":368,"_path":369,"layout":13},"Search bar","/design-system/components/search-bar",{"title":371,"_path":372,"layout":13},"Skip link","/design-system/components/skip-link",{"title":374,"_path":375,"layout":13},"Social share","/design-system/components/social-share",{"title":377,"_path":378,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":380,"_path":381,"layout":13},"Table","/design-system/components/table",{"title":383,"_path":384,"layout":13},"Tabs","/design-system/components/tabs",{"title":386,"_path":387,"layout":13},"Tag","/design-system/components/tag",{"title":389,"_path":390,"layout":13},"Text area","/design-system/components/text-area",{"title":392,"_path":393,"layout":13},"Timeline","/design-system/components/timeline",{"title":395,"_path":396,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":398,"_path":399,"children":400,"layout":13},"Ripple Framework","/framework",[401,402,420,442],{"title":398,"_path":399,"layout":13},{"title":403,"_path":404,"children":405},"Key Concepts","/framework/key-concepts",[406,408,411,414,417],{"title":213,"_path":407,"layout":13},"/framework/key-concepts/nuxt",{"title":409,"_path":410,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":412,"_path":413,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":415,"_path":416,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":418,"_path":419,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":421,"_path":422,"children":423},"Guides","/framework/guides",[424,427,430,433,436,439],{"title":425,"_path":426,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":428,"_path":429,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":431,"_path":432,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":434,"_path":435,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":437,"_path":438,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":440,"_path":441,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":443,"_path":444,"layout":13},"Core modules","/framework/core-modules",["Reactive",446],["Set"],["Reactive",448],{"module-navigation":449},null,true,1714695154534]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Related links</h1><p class="rpl-type-p-large" data-v-3163c6df>The Related links component is a list of links to help users discover related content.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use related links to present a user with a list of links. They can use these to explore content related to the current page or context, or to the next best action.<!--]--></p><p><!--[-->Use if you’re presenting the user with related information or actions to help them deep dive into content.<!--]--></p><p><!--[-->Don&#39;t use related links for linking to unrelated content.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-related-links--related-links&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-related-links--related-links&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use to help users discover related content.<!--]--></li><li><!--[-->Only use in the sidebar section pages.<!--]--></li><li><!--[-->Use at least 2 links.<!--]--></li><li><!--[-->Use no more than 8 links.<!--]--></li><li><!--[-->Keep description clear, concise and specific to each link.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t add unrelated links.<!--]--></li><li><!--[-->Don&#39;t overload each link with too many words.<!--]--></li><li><!--[-->Don&#39;t use punctuation.<!--]--></li><li><!--[-->Don&#39;t link to documents or videos - instead, embed them.<!--]--></li><li><!--[-->Don&#39;t include other interactive elements, like buttons.<!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/related-links.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/related-links/_payload.json">[{"state":1,"once":445,"_errors":447,"serverRendered":450,"path":7,"prerenderedAt":451},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":132,"$sdd-globals":148,"$sdd-navigation":150},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/related-links":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":127,"_id":128,"_source":129,"_file":130,"_extension":131},"/design-system/components/related-links","components",false,"","Related links","The Related links component is a list of links to help users discover related content.","page","Core",{"type":16,"children":17,"toc":119},"root",[18,27,33,38,43,48,55,85,91],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use related links to present a user with a list of links. They can use these to explore content related to the current page or context, or to the next best action.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Use if you’re presenting the user with related information or actions to help them deep dive into content.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Don't use related links for linking to unrelated content.",{"type":19,"tag":44,"props":45,"children":47},"docs-example",{"id":46},"core-navigation-related-links--related-links",[],{"type":19,"tag":49,"props":50,"children":52},"h3",{"id":51},"when-and-how-to-use",[53],{"type":25,"value":54},"When and how to use",{"type":19,"tag":56,"props":57,"children":58},"ul",{},[59,65,70,75,80],{"type":19,"tag":60,"props":61,"children":62},"li",{},[63],{"type":25,"value":64},"Use to help users discover related content.",{"type":19,"tag":60,"props":66,"children":67},{},[68],{"type":25,"value":69},"Only use in the sidebar section pages.",{"type":19,"tag":60,"props":71,"children":72},{},[73],{"type":25,"value":74},"Use at least 2 links.",{"type":19,"tag":60,"props":76,"children":77},{},[78],{"type":25,"value":79},"Use no more than 8 links.",{"type":19,"tag":60,"props":81,"children":82},{},[83],{"type":25,"value":84},"Keep description clear, concise and specific to each link.",{"type":19,"tag":49,"props":86,"children":88},{"id":87},"when-and-how-not-to-use",[89],{"type":25,"value":90},"When and how not to use",{"type":19,"tag":56,"props":92,"children":93},{},[94,99,104,109,114],{"type":19,"tag":60,"props":95,"children":96},{},[97],{"type":25,"value":98},"Don't add unrelated links.",{"type":19,"tag":60,"props":100,"children":101},{},[102],{"type":25,"value":103},"Don't overload each link with too many words.",{"type":19,"tag":60,"props":105,"children":106},{},[107],{"type":25,"value":108},"Don't use punctuation.",{"type":19,"tag":60,"props":110,"children":111},{},[112],{"type":25,"value":113},"Don't link to documents or videos - instead, embed them.",{"type":19,"tag":60,"props":115,"children":116},{},[117],{"type":25,"value":118},"Don't include other interactive elements, like buttons.",{"title":10,"searchDepth":120,"depth":120,"links":121},2,[122],{"id":22,"depth":120,"text":26,"children":123},[124,126],{"id":51,"depth":125,"text":54},3,{"id":87,"depth":125,"text":90},"markdown","content:design-system:5.components:related-links.md","content","design-system/5.components/related-links.md","md",["ShallowRef",133],["ShallowReactive",134],{"/design-system/components/related-links":135},[136,142],{"_path":137,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":138,"description":139,"layout":13,"label":14,"_type":127,"_id":140,"_source":129,"_file":141,"_extension":131},"/design-system/components/radio-button","Radio button","The Radio button component shows a list of options, with a radio (round) button to the left of each option’s description.","content:design-system:5.components:radio-button.md","design-system/5.components/radio-button.md",{"_path":143,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":144,"description":145,"layout":13,"label":14,"_type":127,"_id":146,"_source":129,"_file":147,"_extension":131},"/design-system/components/results-listing","Results listing","The Results listing component shows a list of search result items, with each item displaying key information relevant to that search.","content:design-system:5.components:results-listing.md","design-system/5.components/results-listing.md",["ShallowRef",149],{},[151,156,397],{"title":152,"_path":153,"icon":154,"layout":155},"Ripple Design System","/","carbon:home","home",{"title":157,"_path":158,"children":159},"Design System","/design-system",[160,176,192,221,255],{"title":161,"_path":162,"children":163},"About","/design-system/about",[164,167,170,173],{"title":165,"_path":166,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":168,"_path":169,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":171,"_path":172,"layout":13},"Support","/design-system/about/getting-support",{"title":174,"_path":175,"layout":13},"Contributing","/design-system/about/contributing",{"title":177,"_path":178,"children":179},"Design","/design-system/design",[180,183,186,189],{"title":181,"_path":182,"layout":13},"Getting started","/design-system/design/getting-started",{"title":184,"_path":185,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":187,"_path":188,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":190,"_path":191,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":193,"_path":194,"children":195},"Develop","/design-system/develop",[196,198,200,203],{"title":181,"_path":197,"layout":13},"/design-system/develop/getting-started",{"title":174,"_path":199,"layout":13},"/design-system/develop/contributing",{"title":201,"_path":202,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":204,"children":205,"layout":13},"/design-system/develop/usage",[206,209,212,215,218],{"title":207,"_path":208,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":210,"_path":211,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":213,"_path":214,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":216,"_path":217,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":219,"_path":220,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":222,"_path":223,"children":224},"Styles","/design-system/styles",[225,228,231,234,237,240,243,246,249,252],{"title":226,"_path":227,"layout":13},"Colour","/design-system/styles/colour",{"title":229,"_path":230,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":232,"_path":233,"layout":13},"Grid","/design-system/styles/grid",{"title":235,"_path":236,"layout":13},"Icons","/design-system/styles/icons",{"title":238,"_path":239,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":241,"_path":242,"layout":13},"Layout","/design-system/styles/layout",{"title":244,"_path":245,"layout":13},"Logo","/design-system/styles/logo",{"title":247,"_path":248,"layout":13},"Motion","/design-system/styles/motion",{"title":250,"_path":251,"layout":13},"Spacing","/design-system/styles/spacing",{"title":253,"_path":254,"layout":13},"Typography","/design-system/styles/typography",{"title":256,"_path":257,"children":258},"Components","/design-system/components",[259,262,265,268,271,274,277,280,283,286,289,292,295,298,301,304,307,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,365,366,367,370,373,376,379,382,385,388,391,394],{"title":260,"_path":261,"layout":13},"Accordion","/design-system/components/accordion",{"title":263,"_path":264,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":266,"_path":267,"layout":13},"Alert","/design-system/components/alert",{"title":269,"_path":270,"layout":13},"Block quote","/design-system/components/block-quote",{"title":272,"_path":273,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":275,"_path":276,"layout":13},"Button","/design-system/components/button",{"title":278,"_path":279,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":281,"_path":282,"layout":13},"Callout","/design-system/components/callout",{"title":284,"_path":285,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":287,"_path":288,"layout":13},"Card","/design-system/components/card",{"title":290,"_path":291,"layout":13},"Carousel","/design-system/components/carousel",{"title":293,"_path":294,"layout":13},"Category grid","/design-system/components/category-grid",{"title":296,"_path":297,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":299,"_path":300,"layout":13},"Chip","/design-system/components/chip",{"title":302,"_path":303,"layout":13},"Contact us","/design-system/components/contact-us",{"title":305,"_path":306,"layout":13},"Date input","/design-system/components/date-input",{"title":308,"_path":309,"layout":13},"Detail list","/design-system/components/detail-list",{"title":311,"_path":312,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":314,"_path":315,"layout":13},"File","/design-system/components/file",{"title":317,"_path":318,"layout":13},"Footer","/design-system/components/footer",{"title":320,"_path":321,"layout":13},"Form","/design-system/components/form",{"title":323,"_path":324,"layout":13},"Form alert","/design-system/components/form-alert",{"title":326,"_path":327,"layout":13},"Header","/design-system/components/header",{"title":329,"_path":330,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":332,"_path":333,"layout":13},"Input field","/design-system/components/input-field",{"title":335,"_path":336,"layout":13},"Key dates","/design-system/components/key-dates",{"title":338,"_path":339,"layout":13},"Media","/design-system/components/media",{"title":341,"_path":342,"layout":13},"Media embed","/design-system/components/media-embed",{"title":344,"_path":345,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":347,"_path":348,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":350,"_path":351,"layout":13},"Option button","/design-system/components/option-button",{"title":353,"_path":354,"layout":13},"Page action","/design-system/components/page-action",{"title":356,"_path":357,"layout":13},"Pagination","/design-system/components/pagination",{"title":359,"_path":360,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":362,"_path":363,"layout":13},"Profile","/design-system/components/profile",{"title":138,"_path":137,"layout":13},{"title":11,"_path":7,"layout":13},{"title":144,"_path":143,"layout":13},{"title":368,"_path":369,"layout":13},"Search bar","/design-system/components/search-bar",{"title":371,"_path":372,"layout":13},"Skip link","/design-system/components/skip-link",{"title":374,"_path":375,"layout":13},"Social share","/design-system/components/social-share",{"title":377,"_path":378,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":380,"_path":381,"layout":13},"Table","/design-system/components/table",{"title":383,"_path":384,"layout":13},"Tabs","/design-system/components/tabs",{"title":386,"_path":387,"layout":13},"Tag","/design-system/components/tag",{"title":389,"_path":390,"layout":13},"Text area","/design-system/components/text-area",{"title":392,"_path":393,"layout":13},"Timeline","/design-system/components/timeline",{"title":395,"_path":396,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":398,"_path":399,"children":400,"layout":13},"Ripple Framework","/framework",[401,402,420,442],{"title":398,"_path":399,"layout":13},{"title":403,"_path":404,"children":405},"Key Concepts","/framework/key-concepts",[406,408,411,414,417],{"title":213,"_path":407,"layout":13},"/framework/key-concepts/nuxt",{"title":409,"_path":410,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":412,"_path":413,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":415,"_path":416,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":418,"_path":419,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":421,"_path":422,"children":423},"Guides","/framework/guides",[424,427,430,433,436,439],{"title":425,"_path":426,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":428,"_path":429,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":431,"_path":432,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":434,"_path":435,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":437,"_path":438,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":440,"_path":441,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":443,"_path":444,"layout":13},"Core modules","/framework/core-modules",["Reactive",446],["Set"],["Reactive",448],{"module-navigation":449},null,true,1714695652687]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/results-listing/_payload.json b/design-system/components/results-listing/_payload.json
index 2fac5dc105..c830425070 100644
--- a/design-system/components/results-listing/_payload.json
+++ b/design-system/components/results-listing/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":104,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695154538]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":104,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695652712]
\ No newline at end of file
diff --git a/design-system/components/results-listing/index.html b/design-system/components/results-listing/index.html
index b4c3d0ef2e..51fb1b5434 100644
--- a/design-system/components/results-listing/index.html
+++ b/design-system/components/results-listing/index.html
@@ -28,63 +28,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -96,8 +96,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Results listing</h1><p class="rpl-type-p-large" data-v-3163c6df>The Results listing component shows a list of search result items, with each item displaying key information relevant to that search.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a results listing to display content results, like search results or news items. It surfaces (retrieves and shows) important information to the user.<!--]--></p><p><!--[-->A results listing shows multiple results items, each with their own:<!--]--></p><ul><!--[--><li><!--[-->title, telling the user the name of the result<!--]--></li><li><!--[-->summary, summing up the result’s content for the user<!--]--></li><li><!--[-->URL, telling the user the website address for the result<!--]--></li><li><!--[-->featured content, visually highlighting key content from the result<!--]--></li><li><!--[-->topic/category, putting the result into its context within a broader page or site<!--]--></li><li><!--[-->date, showing a result’s published (simple variant) or updated (default variant) date<!--]--></li><li><!--[-->keyword term bold styling, showing the search term(s) in bold in the result displayed.<!--]--></li><!--]--></ul><p><!--[-->When displaying the results listing, consider a user&#39;s needs. Only display what will help them to make an informed decision.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-result-listing--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-result-listing--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Put the search term in bold.<!--]--></li><li><!--[-->Test results so they are correct and relevant to the search term.<!--]--></li><li><!--[-->Keep descriptions under 150 words.<!--]--></li><li><!--[-->Display up to 10 results.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t display the result title only.<!--]--></li><li><!--[-->Don’t make only the title interactive, ensure the entire result is interactive.<!--]--></li><li><!--[-->Don&#39;t use both updated date and published date, choose one only.<!--]--></li><li><!--[-->Don&#39;t display more than 10 results.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->A result listing&#39;s 2 main variants are:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->simple.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><p><!--[-->The default results listing has the option of surfacing key information when required.<!--]--></p><p><!--[-->Key information can include:<!--]--></p><ul><!--[--><li><!--[-->audience<!--]--></li><li><!--[-->status<!--]--></li><li><!--[-->grants metadata such as grant value.<!--]--></li><!--]--></ul><p><!--[-->The default variant users the updated date by default.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-result-listing--with-details&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-result-listing--with-details&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="simple" data-v-ea525968><a href="#simple" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Simple<!--]--></a></h2><p><!--[-->The simple variant displays the page title with accompanying metadata.<!--]--></p><p><!--[-->It uses the published date by default, which is automatically pulled in from the metadata.<!--]--></p><p><!--[-->We recommend using this variant when displaying simple results, like news items.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-result-listing--with-meta&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-result-listing--with-meta&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Results listing uses colour for:<!--]--></p><ul><!--[--><li><!--[-->icons<!--]--></li><li><!--[-->indicating to the user there is an interaction possible<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><p><!--[-->When displaying key information such as status, the icon should adopt the relevant semantic colour.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-result-listing--with-details&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-result-listing--with-details&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/results-listing.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/results-listing/_payload.json">[{"state":1,"once":637,"_errors":639,"serverRendered":642,"path":7,"prerenderedAt":643},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":324,"$sdd-globals":340,"$sdd-navigation":342},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/results-listing":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":319,"_id":320,"_source":321,"_file":322,"_extension":323},"/design-system/components/results-listing","components",false,"","Results listing","The Results listing component shows a list of search result items, with each item displaying key information relevant to that search.","page","Core",{"type":16,"children":17,"toc":306},"root",[18,27,33,38,78,83,88,95,118,124,147,151,157,162,175,180,185,190,208,213,217,223,228,233,238,242,245,251,256,274,279,286],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use a results listing to display content results, like search results or news items. It surfaces (retrieves and shows) important information to the user.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"A results listing shows multiple results items, each with their own:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48,53,58,63,68,73],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"title, telling the user the name of the result",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"summary, summing up the result’s content for the user",{"type":19,"tag":43,"props":54,"children":55},{},[56],{"type":25,"value":57},"URL, telling the user the website address for the result",{"type":19,"tag":43,"props":59,"children":60},{},[61],{"type":25,"value":62},"featured content, visually highlighting key content from the result",{"type":19,"tag":43,"props":64,"children":65},{},[66],{"type":25,"value":67},"topic/category, putting the result into its context within a broader page or site",{"type":19,"tag":43,"props":69,"children":70},{},[71],{"type":25,"value":72},"date, showing a result’s published (simple variant) or updated (default variant) date",{"type":19,"tag":43,"props":74,"children":75},{},[76],{"type":25,"value":77},"keyword term bold styling, showing the search term(s) in bold in the result displayed.",{"type":19,"tag":28,"props":79,"children":80},{},[81],{"type":25,"value":82},"When displaying the results listing, consider a user's needs. Only display what will help them to make an informed decision.",{"type":19,"tag":84,"props":85,"children":87},"docs-example",{"id":86},"core-navigation-result-listing--default-story",[],{"type":19,"tag":89,"props":90,"children":92},"h3",{"id":91},"when-and-how-to-use",[93],{"type":25,"value":94},"When and how to use",{"type":19,"tag":39,"props":96,"children":97},{},[98,103,108,113],{"type":19,"tag":43,"props":99,"children":100},{},[101],{"type":25,"value":102},"Put the search term in bold.",{"type":19,"tag":43,"props":104,"children":105},{},[106],{"type":25,"value":107},"Test results so they are correct and relevant to the search term.",{"type":19,"tag":43,"props":109,"children":110},{},[111],{"type":25,"value":112},"Keep descriptions under 150 words.",{"type":19,"tag":43,"props":114,"children":115},{},[116],{"type":25,"value":117},"Display up to 10 results.",{"type":19,"tag":89,"props":119,"children":121},{"id":120},"when-and-how-not-to-use",[122],{"type":25,"value":123},"When and how not to use",{"type":19,"tag":39,"props":125,"children":126},{},[127,132,137,142],{"type":19,"tag":43,"props":128,"children":129},{},[130],{"type":25,"value":131},"Don't display the result title only.",{"type":19,"tag":43,"props":133,"children":134},{},[135],{"type":25,"value":136},"Don’t make only the title interactive, ensure the entire result is interactive.",{"type":19,"tag":43,"props":138,"children":139},{},[140],{"type":25,"value":141},"Don't use both updated date and published date, choose one only.",{"type":19,"tag":43,"props":143,"children":144},{},[145],{"type":25,"value":146},"Don't display more than 10 results.",{"type":19,"tag":148,"props":149,"children":150},"hr",{},[],{"type":19,"tag":20,"props":152,"children":154},{"id":153},"variants",[155],{"type":25,"value":156},"Variants",{"type":19,"tag":28,"props":158,"children":159},{},[160],{"type":25,"value":161},"A result listing's 2 main variants are:",{"type":19,"tag":39,"props":163,"children":164},{},[165,170],{"type":19,"tag":43,"props":166,"children":167},{},[168],{"type":25,"value":169},"default",{"type":19,"tag":43,"props":171,"children":172},{},[173],{"type":25,"value":174},"simple.",{"type":19,"tag":89,"props":176,"children":177},{"id":169},[178],{"type":25,"value":179},"Default",{"type":19,"tag":28,"props":181,"children":182},{},[183],{"type":25,"value":184},"The default results listing has the option of surfacing key information when required.",{"type":19,"tag":28,"props":186,"children":187},{},[188],{"type":25,"value":189},"Key information can include:",{"type":19,"tag":39,"props":191,"children":192},{},[193,198,203],{"type":19,"tag":43,"props":194,"children":195},{},[196],{"type":25,"value":197},"audience",{"type":19,"tag":43,"props":199,"children":200},{},[201],{"type":25,"value":202},"status",{"type":19,"tag":43,"props":204,"children":205},{},[206],{"type":25,"value":207},"grants metadata such as grant value.",{"type":19,"tag":28,"props":209,"children":210},{},[211],{"type":25,"value":212},"The default variant users the updated date by default.",{"type":19,"tag":84,"props":214,"children":216},{"id":215},"core-navigation-result-listing--with-details",[],{"type":19,"tag":89,"props":218,"children":220},{"id":219},"simple",[221],{"type":25,"value":222},"Simple",{"type":19,"tag":28,"props":224,"children":225},{},[226],{"type":25,"value":227},"The simple variant displays the page title with accompanying metadata.",{"type":19,"tag":28,"props":229,"children":230},{},[231],{"type":25,"value":232},"It uses the published date by default, which is automatically pulled in from the metadata.",{"type":19,"tag":28,"props":234,"children":235},{},[236],{"type":25,"value":237},"We recommend using this variant when displaying simple results, like news items.",{"type":19,"tag":84,"props":239,"children":241},{"id":240},"core-navigation-result-listing--with-meta",[],{"type":19,"tag":148,"props":243,"children":244},{},[],{"type":19,"tag":20,"props":246,"children":248},{"id":247},"theming",[249],{"type":25,"value":250},"Theming",{"type":19,"tag":28,"props":252,"children":253},{},[254],{"type":25,"value":255},"Results listing uses colour for:",{"type":19,"tag":39,"props":257,"children":258},{},[259,264,269],{"type":19,"tag":43,"props":260,"children":261},{},[262],{"type":25,"value":263},"icons",{"type":19,"tag":43,"props":265,"children":266},{},[267],{"type":25,"value":268},"indicating to the user there is an interaction possible",{"type":19,"tag":43,"props":270,"children":271},{},[272],{"type":25,"value":273},"interactive states.",{"type":19,"tag":28,"props":275,"children":276},{},[277],{"type":25,"value":278},"When displaying key information such as status, the icon should adopt the relevant semantic colour.",{"type":19,"tag":280,"props":281,"children":282},"docs-theme-chooser",{},[283],{"type":19,"tag":84,"props":284,"children":285},{"id":215},[],{"type":19,"tag":28,"props":287,"children":288},{},[289,291,297,299,304],{"type":25,"value":290},"To create your own theme, see ",{"type":19,"tag":292,"props":293,"children":294},"a",{"href":10},[295],{"type":25,"value":296},"theming guidance for designers",{"type":25,"value":298}," or ",{"type":19,"tag":292,"props":300,"children":301},{"href":10},[302],{"type":25,"value":303},"theming guidance for developers",{"type":25,"value":305},".",{"title":10,"searchDepth":307,"depth":307,"links":308},2,[309,314,318],{"id":22,"depth":307,"text":26,"children":310},[311,313],{"id":91,"depth":312,"text":94},3,{"id":120,"depth":312,"text":123},{"id":153,"depth":307,"text":156,"children":315},[316,317],{"id":169,"depth":312,"text":179},{"id":219,"depth":312,"text":222},{"id":247,"depth":307,"text":250},"markdown","content:design-system:5.components:results-listing.md","content","design-system/5.components/results-listing.md","md",["ShallowRef",325],["ShallowReactive",326],{"/design-system/components/results-listing":327},[328,334],{"_path":329,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":330,"description":331,"layout":13,"label":14,"_type":319,"_id":332,"_source":321,"_file":333,"_extension":323},"/design-system/components/related-links","Related links","The Related links component is a list of links to help users discover related content.","content:design-system:5.components:related-links.md","design-system/5.components/related-links.md",{"_path":335,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":336,"description":337,"layout":13,"label":14,"_type":319,"_id":338,"_source":321,"_file":339,"_extension":323},"/design-system/components/search-bar","Search bar","The Search bar shows a text input field with a search button to let users enter keywords and search content on the website.","content:design-system:5.components:search-bar.md","design-system/5.components/search-bar.md",["ShallowRef",341],{},[343,348,589],{"title":344,"_path":345,"icon":346,"layout":347},"Ripple Design System","/","carbon:home","home",{"title":349,"_path":350,"children":351},"Design System","/design-system",[352,368,384,413,447],{"title":353,"_path":354,"children":355},"About","/design-system/about",[356,359,362,365],{"title":357,"_path":358,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":360,"_path":361,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":363,"_path":364,"layout":13},"Support","/design-system/about/getting-support",{"title":366,"_path":367,"layout":13},"Contributing","/design-system/about/contributing",{"title":369,"_path":370,"children":371},"Design","/design-system/design",[372,375,378,381],{"title":373,"_path":374,"layout":13},"Getting started","/design-system/design/getting-started",{"title":376,"_path":377,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":379,"_path":380,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":382,"_path":383,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":385,"_path":386,"children":387},"Develop","/design-system/develop",[388,390,392,395],{"title":373,"_path":389,"layout":13},"/design-system/develop/getting-started",{"title":366,"_path":391,"layout":13},"/design-system/develop/contributing",{"title":393,"_path":394,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":396,"children":397,"layout":13},"/design-system/develop/usage",[398,401,404,407,410],{"title":399,"_path":400,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":402,"_path":403,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":405,"_path":406,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":408,"_path":409,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":411,"_path":412,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":414,"_path":415,"children":416},"Styles","/design-system/styles",[417,420,423,426,429,432,435,438,441,444],{"title":418,"_path":419,"layout":13},"Colour","/design-system/styles/colour",{"title":421,"_path":422,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":424,"_path":425,"layout":13},"Grid","/design-system/styles/grid",{"title":427,"_path":428,"layout":13},"Icons","/design-system/styles/icons",{"title":430,"_path":431,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":433,"_path":434,"layout":13},"Layout","/design-system/styles/layout",{"title":436,"_path":437,"layout":13},"Logo","/design-system/styles/logo",{"title":439,"_path":440,"layout":13},"Motion","/design-system/styles/motion",{"title":442,"_path":443,"layout":13},"Spacing","/design-system/styles/spacing",{"title":445,"_path":446,"layout":13},"Typography","/design-system/styles/typography",{"title":448,"_path":449,"children":450},"Components","/design-system/components",[451,454,457,460,463,466,469,472,475,478,481,484,487,490,493,496,499,502,505,508,511,514,517,520,523,526,529,532,535,538,541,544,547,550,553,556,559,560,561,562,565,568,571,574,577,580,583,586],{"title":452,"_path":453,"layout":13},"Accordion","/design-system/components/accordion",{"title":455,"_path":456,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":458,"_path":459,"layout":13},"Alert","/design-system/components/alert",{"title":461,"_path":462,"layout":13},"Block quote","/design-system/components/block-quote",{"title":464,"_path":465,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":467,"_path":468,"layout":13},"Button","/design-system/components/button",{"title":470,"_path":471,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":473,"_path":474,"layout":13},"Callout","/design-system/components/callout",{"title":476,"_path":477,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":479,"_path":480,"layout":13},"Card","/design-system/components/card",{"title":482,"_path":483,"layout":13},"Carousel","/design-system/components/carousel",{"title":485,"_path":486,"layout":13},"Category grid","/design-system/components/category-grid",{"title":488,"_path":489,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":491,"_path":492,"layout":13},"Chip","/design-system/components/chip",{"title":494,"_path":495,"layout":13},"Contact us","/design-system/components/contact-us",{"title":497,"_path":498,"layout":13},"Date input","/design-system/components/date-input",{"title":500,"_path":501,"layout":13},"Detail list","/design-system/components/detail-list",{"title":503,"_path":504,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":506,"_path":507,"layout":13},"File","/design-system/components/file",{"title":509,"_path":510,"layout":13},"Footer","/design-system/components/footer",{"title":512,"_path":513,"layout":13},"Form","/design-system/components/form",{"title":515,"_path":516,"layout":13},"Form alert","/design-system/components/form-alert",{"title":518,"_path":519,"layout":13},"Header","/design-system/components/header",{"title":521,"_path":522,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":524,"_path":525,"layout":13},"Input field","/design-system/components/input-field",{"title":527,"_path":528,"layout":13},"Key dates","/design-system/components/key-dates",{"title":530,"_path":531,"layout":13},"Media","/design-system/components/media",{"title":533,"_path":534,"layout":13},"Media embed","/design-system/components/media-embed",{"title":536,"_path":537,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":539,"_path":540,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":542,"_path":543,"layout":13},"Option button","/design-system/components/option-button",{"title":545,"_path":546,"layout":13},"Page action","/design-system/components/page-action",{"title":548,"_path":549,"layout":13},"Pagination","/design-system/components/pagination",{"title":551,"_path":552,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":554,"_path":555,"layout":13},"Profile","/design-system/components/profile",{"title":557,"_path":558,"layout":13},"Radio button","/design-system/components/radio-button",{"title":330,"_path":329,"layout":13},{"title":11,"_path":7,"layout":13},{"title":336,"_path":335,"layout":13},{"title":563,"_path":564,"layout":13},"Skip link","/design-system/components/skip-link",{"title":566,"_path":567,"layout":13},"Social share","/design-system/components/social-share",{"title":569,"_path":570,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":572,"_path":573,"layout":13},"Table","/design-system/components/table",{"title":575,"_path":576,"layout":13},"Tabs","/design-system/components/tabs",{"title":578,"_path":579,"layout":13},"Tag","/design-system/components/tag",{"title":581,"_path":582,"layout":13},"Text area","/design-system/components/text-area",{"title":584,"_path":585,"layout":13},"Timeline","/design-system/components/timeline",{"title":587,"_path":588,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":590,"_path":591,"children":592,"layout":13},"Ripple Framework","/framework",[593,594,612,634],{"title":590,"_path":591,"layout":13},{"title":595,"_path":596,"children":597},"Key Concepts","/framework/key-concepts",[598,600,603,606,609],{"title":405,"_path":599,"layout":13},"/framework/key-concepts/nuxt",{"title":601,"_path":602,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":604,"_path":605,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":607,"_path":608,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":610,"_path":611,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":613,"_path":614,"children":615},"Guides","/framework/guides",[616,619,622,625,628,631],{"title":617,"_path":618,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":620,"_path":621,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":623,"_path":624,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":626,"_path":627,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":629,"_path":630,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":632,"_path":633,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":635,"_path":636,"layout":13},"Core modules","/framework/core-modules",["Reactive",638],["Set"],["Reactive",640],{"module-navigation":641},null,true,1714695154538]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Results listing</h1><p class="rpl-type-p-large" data-v-3163c6df>The Results listing component shows a list of search result items, with each item displaying key information relevant to that search.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use a results listing to display content results, like search results or news items. It surfaces (retrieves and shows) important information to the user.<!--]--></p><p><!--[-->A results listing shows multiple results items, each with their own:<!--]--></p><ul><!--[--><li><!--[-->title, telling the user the name of the result<!--]--></li><li><!--[-->summary, summing up the result’s content for the user<!--]--></li><li><!--[-->URL, telling the user the website address for the result<!--]--></li><li><!--[-->featured content, visually highlighting key content from the result<!--]--></li><li><!--[-->topic/category, putting the result into its context within a broader page or site<!--]--></li><li><!--[-->date, showing a result’s published (simple variant) or updated (default variant) date<!--]--></li><li><!--[-->keyword term bold styling, showing the search term(s) in bold in the result displayed.<!--]--></li><!--]--></ul><p><!--[-->When displaying the results listing, consider a user&#39;s needs. Only display what will help them to make an informed decision.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-result-listing--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-result-listing--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Put the search term in bold.<!--]--></li><li><!--[-->Test results so they are correct and relevant to the search term.<!--]--></li><li><!--[-->Keep descriptions under 150 words.<!--]--></li><li><!--[-->Display up to 10 results.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t display the result title only.<!--]--></li><li><!--[-->Don’t make only the title interactive, ensure the entire result is interactive.<!--]--></li><li><!--[-->Don&#39;t use both updated date and published date, choose one only.<!--]--></li><li><!--[-->Don&#39;t display more than 10 results.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->A result listing&#39;s 2 main variants are:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->simple.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><p><!--[-->The default results listing has the option of surfacing key information when required.<!--]--></p><p><!--[-->Key information can include:<!--]--></p><ul><!--[--><li><!--[-->audience<!--]--></li><li><!--[-->status<!--]--></li><li><!--[-->grants metadata such as grant value.<!--]--></li><!--]--></ul><p><!--[-->The default variant users the updated date by default.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-result-listing--with-details&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-result-listing--with-details&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="simple" data-v-ea525968><a href="#simple" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Simple<!--]--></a></h2><p><!--[-->The simple variant displays the page title with accompanying metadata.<!--]--></p><p><!--[-->It uses the published date by default, which is automatically pulled in from the metadata.<!--]--></p><p><!--[-->We recommend using this variant when displaying simple results, like news items.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-result-listing--with-meta&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-result-listing--with-meta&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Results listing uses colour for:<!--]--></p><ul><!--[--><li><!--[-->icons<!--]--></li><li><!--[-->indicating to the user there is an interaction possible<!--]--></li><li><!--[-->interactive states.<!--]--></li><!--]--></ul><p><!--[-->When displaying key information such as status, the icon should adopt the relevant semantic colour.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-result-listing--with-details&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-result-listing--with-details&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/results-listing.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/results-listing/_payload.json">[{"state":1,"once":637,"_errors":639,"serverRendered":642,"path":7,"prerenderedAt":643},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":324,"$sdd-globals":340,"$sdd-navigation":342},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/results-listing":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":319,"_id":320,"_source":321,"_file":322,"_extension":323},"/design-system/components/results-listing","components",false,"","Results listing","The Results listing component shows a list of search result items, with each item displaying key information relevant to that search.","page","Core",{"type":16,"children":17,"toc":306},"root",[18,27,33,38,78,83,88,95,118,124,147,151,157,162,175,180,185,190,208,213,217,223,228,233,238,242,245,251,256,274,279,286],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use a results listing to display content results, like search results or news items. It surfaces (retrieves and shows) important information to the user.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"A results listing shows multiple results items, each with their own:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48,53,58,63,68,73],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"title, telling the user the name of the result",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"summary, summing up the result’s content for the user",{"type":19,"tag":43,"props":54,"children":55},{},[56],{"type":25,"value":57},"URL, telling the user the website address for the result",{"type":19,"tag":43,"props":59,"children":60},{},[61],{"type":25,"value":62},"featured content, visually highlighting key content from the result",{"type":19,"tag":43,"props":64,"children":65},{},[66],{"type":25,"value":67},"topic/category, putting the result into its context within a broader page or site",{"type":19,"tag":43,"props":69,"children":70},{},[71],{"type":25,"value":72},"date, showing a result’s published (simple variant) or updated (default variant) date",{"type":19,"tag":43,"props":74,"children":75},{},[76],{"type":25,"value":77},"keyword term bold styling, showing the search term(s) in bold in the result displayed.",{"type":19,"tag":28,"props":79,"children":80},{},[81],{"type":25,"value":82},"When displaying the results listing, consider a user's needs. Only display what will help them to make an informed decision.",{"type":19,"tag":84,"props":85,"children":87},"docs-example",{"id":86},"core-navigation-result-listing--default-story",[],{"type":19,"tag":89,"props":90,"children":92},"h3",{"id":91},"when-and-how-to-use",[93],{"type":25,"value":94},"When and how to use",{"type":19,"tag":39,"props":96,"children":97},{},[98,103,108,113],{"type":19,"tag":43,"props":99,"children":100},{},[101],{"type":25,"value":102},"Put the search term in bold.",{"type":19,"tag":43,"props":104,"children":105},{},[106],{"type":25,"value":107},"Test results so they are correct and relevant to the search term.",{"type":19,"tag":43,"props":109,"children":110},{},[111],{"type":25,"value":112},"Keep descriptions under 150 words.",{"type":19,"tag":43,"props":114,"children":115},{},[116],{"type":25,"value":117},"Display up to 10 results.",{"type":19,"tag":89,"props":119,"children":121},{"id":120},"when-and-how-not-to-use",[122],{"type":25,"value":123},"When and how not to use",{"type":19,"tag":39,"props":125,"children":126},{},[127,132,137,142],{"type":19,"tag":43,"props":128,"children":129},{},[130],{"type":25,"value":131},"Don't display the result title only.",{"type":19,"tag":43,"props":133,"children":134},{},[135],{"type":25,"value":136},"Don’t make only the title interactive, ensure the entire result is interactive.",{"type":19,"tag":43,"props":138,"children":139},{},[140],{"type":25,"value":141},"Don't use both updated date and published date, choose one only.",{"type":19,"tag":43,"props":143,"children":144},{},[145],{"type":25,"value":146},"Don't display more than 10 results.",{"type":19,"tag":148,"props":149,"children":150},"hr",{},[],{"type":19,"tag":20,"props":152,"children":154},{"id":153},"variants",[155],{"type":25,"value":156},"Variants",{"type":19,"tag":28,"props":158,"children":159},{},[160],{"type":25,"value":161},"A result listing's 2 main variants are:",{"type":19,"tag":39,"props":163,"children":164},{},[165,170],{"type":19,"tag":43,"props":166,"children":167},{},[168],{"type":25,"value":169},"default",{"type":19,"tag":43,"props":171,"children":172},{},[173],{"type":25,"value":174},"simple.",{"type":19,"tag":89,"props":176,"children":177},{"id":169},[178],{"type":25,"value":179},"Default",{"type":19,"tag":28,"props":181,"children":182},{},[183],{"type":25,"value":184},"The default results listing has the option of surfacing key information when required.",{"type":19,"tag":28,"props":186,"children":187},{},[188],{"type":25,"value":189},"Key information can include:",{"type":19,"tag":39,"props":191,"children":192},{},[193,198,203],{"type":19,"tag":43,"props":194,"children":195},{},[196],{"type":25,"value":197},"audience",{"type":19,"tag":43,"props":199,"children":200},{},[201],{"type":25,"value":202},"status",{"type":19,"tag":43,"props":204,"children":205},{},[206],{"type":25,"value":207},"grants metadata such as grant value.",{"type":19,"tag":28,"props":209,"children":210},{},[211],{"type":25,"value":212},"The default variant users the updated date by default.",{"type":19,"tag":84,"props":214,"children":216},{"id":215},"core-navigation-result-listing--with-details",[],{"type":19,"tag":89,"props":218,"children":220},{"id":219},"simple",[221],{"type":25,"value":222},"Simple",{"type":19,"tag":28,"props":224,"children":225},{},[226],{"type":25,"value":227},"The simple variant displays the page title with accompanying metadata.",{"type":19,"tag":28,"props":229,"children":230},{},[231],{"type":25,"value":232},"It uses the published date by default, which is automatically pulled in from the metadata.",{"type":19,"tag":28,"props":234,"children":235},{},[236],{"type":25,"value":237},"We recommend using this variant when displaying simple results, like news items.",{"type":19,"tag":84,"props":239,"children":241},{"id":240},"core-navigation-result-listing--with-meta",[],{"type":19,"tag":148,"props":243,"children":244},{},[],{"type":19,"tag":20,"props":246,"children":248},{"id":247},"theming",[249],{"type":25,"value":250},"Theming",{"type":19,"tag":28,"props":252,"children":253},{},[254],{"type":25,"value":255},"Results listing uses colour for:",{"type":19,"tag":39,"props":257,"children":258},{},[259,264,269],{"type":19,"tag":43,"props":260,"children":261},{},[262],{"type":25,"value":263},"icons",{"type":19,"tag":43,"props":265,"children":266},{},[267],{"type":25,"value":268},"indicating to the user there is an interaction possible",{"type":19,"tag":43,"props":270,"children":271},{},[272],{"type":25,"value":273},"interactive states.",{"type":19,"tag":28,"props":275,"children":276},{},[277],{"type":25,"value":278},"When displaying key information such as status, the icon should adopt the relevant semantic colour.",{"type":19,"tag":280,"props":281,"children":282},"docs-theme-chooser",{},[283],{"type":19,"tag":84,"props":284,"children":285},{"id":215},[],{"type":19,"tag":28,"props":287,"children":288},{},[289,291,297,299,304],{"type":25,"value":290},"To create your own theme, see ",{"type":19,"tag":292,"props":293,"children":294},"a",{"href":10},[295],{"type":25,"value":296},"theming guidance for designers",{"type":25,"value":298}," or ",{"type":19,"tag":292,"props":300,"children":301},{"href":10},[302],{"type":25,"value":303},"theming guidance for developers",{"type":25,"value":305},".",{"title":10,"searchDepth":307,"depth":307,"links":308},2,[309,314,318],{"id":22,"depth":307,"text":26,"children":310},[311,313],{"id":91,"depth":312,"text":94},3,{"id":120,"depth":312,"text":123},{"id":153,"depth":307,"text":156,"children":315},[316,317],{"id":169,"depth":312,"text":179},{"id":219,"depth":312,"text":222},{"id":247,"depth":307,"text":250},"markdown","content:design-system:5.components:results-listing.md","content","design-system/5.components/results-listing.md","md",["ShallowRef",325],["ShallowReactive",326],{"/design-system/components/results-listing":327},[328,334],{"_path":329,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":330,"description":331,"layout":13,"label":14,"_type":319,"_id":332,"_source":321,"_file":333,"_extension":323},"/design-system/components/related-links","Related links","The Related links component is a list of links to help users discover related content.","content:design-system:5.components:related-links.md","design-system/5.components/related-links.md",{"_path":335,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":336,"description":337,"layout":13,"label":14,"_type":319,"_id":338,"_source":321,"_file":339,"_extension":323},"/design-system/components/search-bar","Search bar","The Search bar shows a text input field with a search button to let users enter keywords and search content on the website.","content:design-system:5.components:search-bar.md","design-system/5.components/search-bar.md",["ShallowRef",341],{},[343,348,589],{"title":344,"_path":345,"icon":346,"layout":347},"Ripple Design System","/","carbon:home","home",{"title":349,"_path":350,"children":351},"Design System","/design-system",[352,368,384,413,447],{"title":353,"_path":354,"children":355},"About","/design-system/about",[356,359,362,365],{"title":357,"_path":358,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":360,"_path":361,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":363,"_path":364,"layout":13},"Support","/design-system/about/getting-support",{"title":366,"_path":367,"layout":13},"Contributing","/design-system/about/contributing",{"title":369,"_path":370,"children":371},"Design","/design-system/design",[372,375,378,381],{"title":373,"_path":374,"layout":13},"Getting started","/design-system/design/getting-started",{"title":376,"_path":377,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":379,"_path":380,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":382,"_path":383,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":385,"_path":386,"children":387},"Develop","/design-system/develop",[388,390,392,395],{"title":373,"_path":389,"layout":13},"/design-system/develop/getting-started",{"title":366,"_path":391,"layout":13},"/design-system/develop/contributing",{"title":393,"_path":394,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":396,"children":397,"layout":13},"/design-system/develop/usage",[398,401,404,407,410],{"title":399,"_path":400,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":402,"_path":403,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":405,"_path":406,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":408,"_path":409,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":411,"_path":412,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":414,"_path":415,"children":416},"Styles","/design-system/styles",[417,420,423,426,429,432,435,438,441,444],{"title":418,"_path":419,"layout":13},"Colour","/design-system/styles/colour",{"title":421,"_path":422,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":424,"_path":425,"layout":13},"Grid","/design-system/styles/grid",{"title":427,"_path":428,"layout":13},"Icons","/design-system/styles/icons",{"title":430,"_path":431,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":433,"_path":434,"layout":13},"Layout","/design-system/styles/layout",{"title":436,"_path":437,"layout":13},"Logo","/design-system/styles/logo",{"title":439,"_path":440,"layout":13},"Motion","/design-system/styles/motion",{"title":442,"_path":443,"layout":13},"Spacing","/design-system/styles/spacing",{"title":445,"_path":446,"layout":13},"Typography","/design-system/styles/typography",{"title":448,"_path":449,"children":450},"Components","/design-system/components",[451,454,457,460,463,466,469,472,475,478,481,484,487,490,493,496,499,502,505,508,511,514,517,520,523,526,529,532,535,538,541,544,547,550,553,556,559,560,561,562,565,568,571,574,577,580,583,586],{"title":452,"_path":453,"layout":13},"Accordion","/design-system/components/accordion",{"title":455,"_path":456,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":458,"_path":459,"layout":13},"Alert","/design-system/components/alert",{"title":461,"_path":462,"layout":13},"Block quote","/design-system/components/block-quote",{"title":464,"_path":465,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":467,"_path":468,"layout":13},"Button","/design-system/components/button",{"title":470,"_path":471,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":473,"_path":474,"layout":13},"Callout","/design-system/components/callout",{"title":476,"_path":477,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":479,"_path":480,"layout":13},"Card","/design-system/components/card",{"title":482,"_path":483,"layout":13},"Carousel","/design-system/components/carousel",{"title":485,"_path":486,"layout":13},"Category grid","/design-system/components/category-grid",{"title":488,"_path":489,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":491,"_path":492,"layout":13},"Chip","/design-system/components/chip",{"title":494,"_path":495,"layout":13},"Contact us","/design-system/components/contact-us",{"title":497,"_path":498,"layout":13},"Date input","/design-system/components/date-input",{"title":500,"_path":501,"layout":13},"Detail list","/design-system/components/detail-list",{"title":503,"_path":504,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":506,"_path":507,"layout":13},"File","/design-system/components/file",{"title":509,"_path":510,"layout":13},"Footer","/design-system/components/footer",{"title":512,"_path":513,"layout":13},"Form","/design-system/components/form",{"title":515,"_path":516,"layout":13},"Form alert","/design-system/components/form-alert",{"title":518,"_path":519,"layout":13},"Header","/design-system/components/header",{"title":521,"_path":522,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":524,"_path":525,"layout":13},"Input field","/design-system/components/input-field",{"title":527,"_path":528,"layout":13},"Key dates","/design-system/components/key-dates",{"title":530,"_path":531,"layout":13},"Media","/design-system/components/media",{"title":533,"_path":534,"layout":13},"Media embed","/design-system/components/media-embed",{"title":536,"_path":537,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":539,"_path":540,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":542,"_path":543,"layout":13},"Option button","/design-system/components/option-button",{"title":545,"_path":546,"layout":13},"Page action","/design-system/components/page-action",{"title":548,"_path":549,"layout":13},"Pagination","/design-system/components/pagination",{"title":551,"_path":552,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":554,"_path":555,"layout":13},"Profile","/design-system/components/profile",{"title":557,"_path":558,"layout":13},"Radio button","/design-system/components/radio-button",{"title":330,"_path":329,"layout":13},{"title":11,"_path":7,"layout":13},{"title":336,"_path":335,"layout":13},{"title":563,"_path":564,"layout":13},"Skip link","/design-system/components/skip-link",{"title":566,"_path":567,"layout":13},"Social share","/design-system/components/social-share",{"title":569,"_path":570,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":572,"_path":573,"layout":13},"Table","/design-system/components/table",{"title":575,"_path":576,"layout":13},"Tabs","/design-system/components/tabs",{"title":578,"_path":579,"layout":13},"Tag","/design-system/components/tag",{"title":581,"_path":582,"layout":13},"Text area","/design-system/components/text-area",{"title":584,"_path":585,"layout":13},"Timeline","/design-system/components/timeline",{"title":587,"_path":588,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":590,"_path":591,"children":592,"layout":13},"Ripple Framework","/framework",[593,594,612,634],{"title":590,"_path":591,"layout":13},{"title":595,"_path":596,"children":597},"Key Concepts","/framework/key-concepts",[598,600,603,606,609],{"title":405,"_path":599,"layout":13},"/framework/key-concepts/nuxt",{"title":601,"_path":602,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":604,"_path":605,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":607,"_path":608,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":610,"_path":611,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":613,"_path":614,"children":615},"Guides","/framework/guides",[616,619,622,625,628,631],{"title":617,"_path":618,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":620,"_path":621,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":623,"_path":624,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":626,"_path":627,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":629,"_path":630,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":632,"_path":633,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":635,"_path":636,"layout":13},"Core modules","/framework/core-modules",["Reactive",638],["Set"],["Reactive",640],{"module-navigation":641},null,true,1714695652712]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/search-bar/_payload.json b/design-system/components/search-bar/_payload.json
index 2b50e0ea7d..e560bc05f4 100644
--- a/design-system/components/search-bar/_payload.json
+++ b/design-system/components/search-bar/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":104,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695154580]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":104,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695652751]
\ No newline at end of file
diff --git a/design-system/components/search-bar/index.html b/design-system/components/search-bar/index.html
index 9d99f4d48e..ef1e1dfeba 100644
--- a/design-system/components/search-bar/index.html
+++ b/design-system/components/search-bar/index.html
@@ -28,64 +28,64 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.CwUV-MIb.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.gK7ORMEc.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -97,8 +97,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Search bar</h1><p class="rpl-type-p-large" data-v-3163c6df>The Search bar shows a text input field with a search button to let users enter keywords and search content on the website.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the search bar to help users find what they are looking for.<!--]--></p><p><!--[-->Users often rely on search to find the information they need. You can use it as an alternative to on-page navigation.<!--]--></p><p><!--[-->Users will use keywords in the search bar, often using different words or phrases. Search is especially helpful for users when navigating site that have many pages.<!--]--></p><p><!--[-->The search bar includes:<!--]--></p><ul><!--[--><li><!--[-->text - placeholder and input text<!--]--></li><li><!--[-->search button label<!--]--></li><li><!--[-->search button icon<!--]--></li><li><!--[-->optional predictive list - present suggested keywords to the user<!--]--></li><li><!--[-->optional refine search link - expand to present advanced filters to the user.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-search-bar--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-search-bar--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="how-this-component-works" data-v-ea525968><a href="#how-this-component-works" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->How this component works<!--]--></a></h2><h4 class="rpl-type-h4 docs-h4" id="input-text"><!--[-->Input text<!--]--></h4><p><!--[-->Include short, descriptive placeholder text. This tells the user what they can search for.<!--]--></p><p><!--[-->The text the user inputs replaces the placeholder text.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="search-button"><!--[-->Search button<!--]--></h4><p><!--[-->The search button contains a button label and search icon.<!--]--></p><p><!--[-->Smaller devices show a responsive variant with:<!--]--></p><ul><!--[--><li><!--[-->only a search icon<!--]--></li><li><!--[-->no button label.<!--]--></li><!--]--></ul><p><!--[-->This gives the user more space to write search text. Users know that a magnifying glass represents a search function.<!--]--></p><p><!--[-->The word ‘Search’ must appear in the alt text for screen readers.<!--]--></p><p><!--[-->The button type should be a submit button. This lets a user conduct a search:<!--]--></p><ul><!--[--><li><!--[-->using the enter/return key<!--]--></li><li><!--[-->using fewer keystrokes<!--]--></li><li><!--[-->by choosing a suggestion (if applicable)<!--]--></li><li><!--[-->that afterwards, still displays the search keyword.<!--]--></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="predictive-keyword-list"><!--[-->Predictive keyword list<!--]--></h4><p><!--[-->Useful suggestions let users find what they need with less effort. They also reduce spelling errors and typing.<!--]--></p><p><!--[-->Use a short, ordered list of no more than 10 keyword suggestions.<!--]--></p><p><!--[-->They should appear after only a few keystrokes.<!--]--></p><p><!--[-->Let the user scroll through keyword suggestions using keyboard navigation, with the Esc key to exit.<!--]--></p><p><!--[-->Scrolling ‘down’ past the last suggestion should loop the user back to the first one. Scrolling ‘up’ before the first suggestion should loop the user to the last (bottom) one.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use the search bar to let users search your site (site search).<!--]--></li><li><!--[-->Use default search field on white page background.<!--]--></li><li><!--[-->Use reverse search field on grey background.<!--]--></li><li><!--[-->Use menu variant in the mega menu only.<!--]--></li><li><!--[-->Use only default and reverse variants with predictive list suggestions.<!--]--></li><li><!--[-->Even if it&#39;s hidden from view, always use a form label for screen readers.<!--]--></li><li><!--[-->Keep placeholder text concise and descriptive.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t use default or reverse variants in the mega menu.<!--]--></li><li><!--[-->Don&#39;t use filters or refine search with the menu variant.<!--]--></li><li><!--[-->Don&#39;t use multiline search inputs.<!--]--></li><li><!--[-->Revised search shouldn&#39;t be by default.<!--]--></li><li><!--[-->Don&#39;t use with the refine search link if no filters are available.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->The 3 search variants include:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->reverse<!--]--></li><li><!--[-->menu.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><p><!--[-->This is standard search. The button initiates search based on the text input.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-search-bar--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-search-bar--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="reverse" data-v-ea525968><a href="#reverse" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Reverse<!--]--></a></h2><p><!--[-->Use the reverse variant when on a neutral background and you can&#39;t use the default variant.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-search-bar--reverse&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-search-bar--reverse&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="menu" data-v-ea525968><a href="#menu" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Menu<!--]--></a></h2><p><!--[-->Use this in the mega menu. See <a href="/design-system/components/primary-navigation/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Primary Navigation<!--]--><!--]--><!----><!--]--></a> for more information.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-search-bar--menu&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-search-bar--menu&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->The search bar uses colour for:<!--]--></p><ul><!--[--><li><!--[-->indicating an action to users<!--]--></li><li><!--[-->interaction states.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-search-bar--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-search-bar--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-search-bar--menu&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-search-bar--menu&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/search-bar.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/search-bar/_payload.json">[{"state":1,"once":756,"_errors":758,"serverRendered":761,"path":7,"prerenderedAt":762},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":443,"$sdd-globals":459,"$sdd-navigation":461},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/search-bar":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":438,"_id":439,"_source":440,"_file":441,"_extension":442},"/design-system/components/search-bar","components",false,"","Search bar","The Search bar shows a text input field with a search button to let users enter keywords and search content on the website.","page","Core",{"type":16,"children":17,"toc":423},"root",[18,27,33,38,43,48,78,83,90,97,102,107,113,118,123,136,141,146,151,174,180,185,190,195,200,205,211,249,255,283,287,293,298,316,321,326,329,334,339,343,349,363,367,370,376,381,394,404],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use the search bar to help users find what they are looking for.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Users often rely on search to find the information they need. You can use it as an alternative to on-page navigation.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Users will use keywords in the search bar, often using different words or phrases. Search is especially helpful for users when navigating site that have many pages.",{"type":19,"tag":28,"props":44,"children":45},{},[46],{"type":25,"value":47},"The search bar includes:",{"type":19,"tag":49,"props":50,"children":51},"ul",{},[52,58,63,68,73],{"type":19,"tag":53,"props":54,"children":55},"li",{},[56],{"type":25,"value":57},"text - placeholder and input text",{"type":19,"tag":53,"props":59,"children":60},{},[61],{"type":25,"value":62},"search button label",{"type":19,"tag":53,"props":64,"children":65},{},[66],{"type":25,"value":67},"search button icon",{"type":19,"tag":53,"props":69,"children":70},{},[71],{"type":25,"value":72},"optional predictive list - present suggested keywords to the user",{"type":19,"tag":53,"props":74,"children":75},{},[76],{"type":25,"value":77},"optional refine search link - expand to present advanced filters to the user.",{"type":19,"tag":79,"props":80,"children":82},"docs-example",{"id":81},"core-navigation-search-bar--default-story",[],{"type":19,"tag":84,"props":85,"children":87},"h3",{"id":86},"how-this-component-works",[88],{"type":25,"value":89},"How this component works",{"type":19,"tag":91,"props":92,"children":94},"h4",{"id":93},"input-text",[95],{"type":25,"value":96},"Input text",{"type":19,"tag":28,"props":98,"children":99},{},[100],{"type":25,"value":101},"Include short, descriptive placeholder text. This tells the user what they can search for.",{"type":19,"tag":28,"props":103,"children":104},{},[105],{"type":25,"value":106},"The text the user inputs replaces the placeholder text.",{"type":19,"tag":91,"props":108,"children":110},{"id":109},"search-button",[111],{"type":25,"value":112},"Search button",{"type":19,"tag":28,"props":114,"children":115},{},[116],{"type":25,"value":117},"The search button contains a button label and search icon.",{"type":19,"tag":28,"props":119,"children":120},{},[121],{"type":25,"value":122},"Smaller devices show a responsive variant with:",{"type":19,"tag":49,"props":124,"children":125},{},[126,131],{"type":19,"tag":53,"props":127,"children":128},{},[129],{"type":25,"value":130},"only a search icon",{"type":19,"tag":53,"props":132,"children":133},{},[134],{"type":25,"value":135},"no button label.",{"type":19,"tag":28,"props":137,"children":138},{},[139],{"type":25,"value":140},"This gives the user more space to write search text. Users know that a magnifying glass represents a search function.",{"type":19,"tag":28,"props":142,"children":143},{},[144],{"type":25,"value":145},"The word ‘Search’ must appear in the alt text for screen readers.",{"type":19,"tag":28,"props":147,"children":148},{},[149],{"type":25,"value":150},"The button type should be a submit button. This lets a user conduct a search:",{"type":19,"tag":49,"props":152,"children":153},{},[154,159,164,169],{"type":19,"tag":53,"props":155,"children":156},{},[157],{"type":25,"value":158},"using the enter/return key",{"type":19,"tag":53,"props":160,"children":161},{},[162],{"type":25,"value":163},"using fewer keystrokes",{"type":19,"tag":53,"props":165,"children":166},{},[167],{"type":25,"value":168},"by choosing a suggestion (if applicable)",{"type":19,"tag":53,"props":170,"children":171},{},[172],{"type":25,"value":173},"that afterwards, still displays the search keyword.",{"type":19,"tag":91,"props":175,"children":177},{"id":176},"predictive-keyword-list",[178],{"type":25,"value":179},"Predictive keyword list",{"type":19,"tag":28,"props":181,"children":182},{},[183],{"type":25,"value":184},"Useful suggestions let users find what they need with less effort. They also reduce spelling errors and typing.",{"type":19,"tag":28,"props":186,"children":187},{},[188],{"type":25,"value":189},"Use a short, ordered list of no more than 10 keyword suggestions.",{"type":19,"tag":28,"props":191,"children":192},{},[193],{"type":25,"value":194},"They should appear after only a few keystrokes.",{"type":19,"tag":28,"props":196,"children":197},{},[198],{"type":25,"value":199},"Let the user scroll through keyword suggestions using keyboard navigation, with the Esc key to exit.",{"type":19,"tag":28,"props":201,"children":202},{},[203],{"type":25,"value":204},"Scrolling ‘down’ past the last suggestion should loop the user back to the first one. Scrolling ‘up’ before the first suggestion should loop the user to the last (bottom) one.",{"type":19,"tag":84,"props":206,"children":208},{"id":207},"when-and-how-to-use",[209],{"type":25,"value":210},"When and how to use",{"type":19,"tag":49,"props":212,"children":213},{},[214,219,224,229,234,239,244],{"type":19,"tag":53,"props":215,"children":216},{},[217],{"type":25,"value":218},"Use the search bar to let users search your site (site search).",{"type":19,"tag":53,"props":220,"children":221},{},[222],{"type":25,"value":223},"Use default search field on white page background.",{"type":19,"tag":53,"props":225,"children":226},{},[227],{"type":25,"value":228},"Use reverse search field on grey background.",{"type":19,"tag":53,"props":230,"children":231},{},[232],{"type":25,"value":233},"Use menu variant in the mega menu only.",{"type":19,"tag":53,"props":235,"children":236},{},[237],{"type":25,"value":238},"Use only default and reverse variants with predictive list suggestions.",{"type":19,"tag":53,"props":240,"children":241},{},[242],{"type":25,"value":243},"Even if it's hidden from view, always use a form label for screen readers.",{"type":19,"tag":53,"props":245,"children":246},{},[247],{"type":25,"value":248},"Keep placeholder text concise and descriptive.",{"type":19,"tag":84,"props":250,"children":252},{"id":251},"when-and-how-not-to-use",[253],{"type":25,"value":254},"When and how not to use",{"type":19,"tag":49,"props":256,"children":257},{},[258,263,268,273,278],{"type":19,"tag":53,"props":259,"children":260},{},[261],{"type":25,"value":262},"Don't use default or reverse variants in the mega menu.",{"type":19,"tag":53,"props":264,"children":265},{},[266],{"type":25,"value":267},"Don't use filters or refine search with the menu variant.",{"type":19,"tag":53,"props":269,"children":270},{},[271],{"type":25,"value":272},"Don't use multiline search inputs.",{"type":19,"tag":53,"props":274,"children":275},{},[276],{"type":25,"value":277},"Revised search shouldn't be by default.",{"type":19,"tag":53,"props":279,"children":280},{},[281],{"type":25,"value":282},"Don't use with the refine search link if no filters are available.",{"type":19,"tag":284,"props":285,"children":286},"hr",{},[],{"type":19,"tag":20,"props":288,"children":290},{"id":289},"variants",[291],{"type":25,"value":292},"Variants",{"type":19,"tag":28,"props":294,"children":295},{},[296],{"type":25,"value":297},"The 3 search variants include:",{"type":19,"tag":49,"props":299,"children":300},{},[301,306,311],{"type":19,"tag":53,"props":302,"children":303},{},[304],{"type":25,"value":305},"default",{"type":19,"tag":53,"props":307,"children":308},{},[309],{"type":25,"value":310},"reverse",{"type":19,"tag":53,"props":312,"children":313},{},[314],{"type":25,"value":315},"menu.",{"type":19,"tag":84,"props":317,"children":318},{"id":305},[319],{"type":25,"value":320},"Default",{"type":19,"tag":28,"props":322,"children":323},{},[324],{"type":25,"value":325},"This is standard search. The button initiates search based on the text input.",{"type":19,"tag":79,"props":327,"children":328},{"id":81},[],{"type":19,"tag":84,"props":330,"children":331},{"id":310},[332],{"type":25,"value":333},"Reverse",{"type":19,"tag":28,"props":335,"children":336},{},[337],{"type":25,"value":338},"Use the reverse variant when on a neutral background and you can't use the default variant.",{"type":19,"tag":79,"props":340,"children":342},{"id":341},"core-navigation-search-bar--reverse",[],{"type":19,"tag":84,"props":344,"children":346},{"id":345},"menu",[347],{"type":25,"value":348},"Menu",{"type":19,"tag":28,"props":350,"children":351},{},[352,354,361],{"type":25,"value":353},"Use this in the mega menu. See ",{"type":19,"tag":355,"props":356,"children":358},"a",{"href":357},"/design-system/components/primary-navigation/",[359],{"type":25,"value":360},"Primary Navigation",{"type":25,"value":362}," for more information.",{"type":19,"tag":79,"props":364,"children":366},{"id":365},"core-navigation-search-bar--menu",[],{"type":19,"tag":284,"props":368,"children":369},{},[],{"type":19,"tag":20,"props":371,"children":373},{"id":372},"theming",[374],{"type":25,"value":375},"Theming",{"type":19,"tag":28,"props":377,"children":378},{},[379],{"type":25,"value":380},"The search bar uses colour for:",{"type":19,"tag":49,"props":382,"children":383},{},[384,389],{"type":19,"tag":53,"props":385,"children":386},{},[387],{"type":25,"value":388},"indicating an action to users",{"type":19,"tag":53,"props":390,"children":391},{},[392],{"type":25,"value":393},"interaction states.",{"type":19,"tag":395,"props":396,"children":397},"docs-theme-chooser",{},[398,401],{"type":19,"tag":79,"props":399,"children":400},{"id":81},[],{"type":19,"tag":79,"props":402,"children":403},{"id":365},[],{"type":19,"tag":28,"props":405,"children":406},{},[407,409,414,416,421],{"type":25,"value":408},"To create your own theme, see ",{"type":19,"tag":355,"props":410,"children":411},{"href":10},[412],{"type":25,"value":413},"theming guidance for designers",{"type":25,"value":415}," or ",{"type":19,"tag":355,"props":417,"children":418},{"href":10},[419],{"type":25,"value":420},"theming guidance for developers",{"type":25,"value":422},".",{"title":10,"searchDepth":424,"depth":424,"links":425},2,[426,432,437],{"id":22,"depth":424,"text":26,"children":427},[428,430,431],{"id":86,"depth":429,"text":89},3,{"id":207,"depth":429,"text":210},{"id":251,"depth":429,"text":254},{"id":289,"depth":424,"text":292,"children":433},[434,435,436],{"id":305,"depth":429,"text":320},{"id":310,"depth":429,"text":333},{"id":345,"depth":429,"text":348},{"id":372,"depth":424,"text":375},"markdown","content:design-system:5.components:search-bar.md","content","design-system/5.components/search-bar.md","md",["ShallowRef",444],["ShallowReactive",445],{"/design-system/components/search-bar":446},[447,453],{"_path":448,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":449,"description":450,"layout":13,"label":14,"_type":438,"_id":451,"_source":440,"_file":452,"_extension":442},"/design-system/components/results-listing","Results listing","The Results listing component shows a list of search result items, with each item displaying key information relevant to that search.","content:design-system:5.components:results-listing.md","design-system/5.components/results-listing.md",{"_path":454,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":455,"description":456,"layout":13,"label":14,"_type":438,"_id":457,"_source":440,"_file":458,"_extension":442},"/design-system/components/skip-link","Skip link","The Skip link component makes your page more accessible and easier to navigate, by helping keyboard users skip to the main content on a page.","content:design-system:5.components:skip-link.md","design-system/5.components/skip-link.md",["ShallowRef",460],{},[462,467,708],{"title":463,"_path":464,"icon":465,"layout":466},"Ripple Design System","/","carbon:home","home",{"title":468,"_path":469,"children":470},"Design System","/design-system",[471,487,503,532,566],{"title":472,"_path":473,"children":474},"About","/design-system/about",[475,478,481,484],{"title":476,"_path":477,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":479,"_path":480,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":482,"_path":483,"layout":13},"Support","/design-system/about/getting-support",{"title":485,"_path":486,"layout":13},"Contributing","/design-system/about/contributing",{"title":488,"_path":489,"children":490},"Design","/design-system/design",[491,494,497,500],{"title":492,"_path":493,"layout":13},"Getting started","/design-system/design/getting-started",{"title":495,"_path":496,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":498,"_path":499,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":501,"_path":502,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":504,"_path":505,"children":506},"Develop","/design-system/develop",[507,509,511,514],{"title":492,"_path":508,"layout":13},"/design-system/develop/getting-started",{"title":485,"_path":510,"layout":13},"/design-system/develop/contributing",{"title":512,"_path":513,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":515,"children":516,"layout":13},"/design-system/develop/usage",[517,520,523,526,529],{"title":518,"_path":519,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":521,"_path":522,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":524,"_path":525,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":527,"_path":528,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":530,"_path":531,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":533,"_path":534,"children":535},"Styles","/design-system/styles",[536,539,542,545,548,551,554,557,560,563],{"title":537,"_path":538,"layout":13},"Colour","/design-system/styles/colour",{"title":540,"_path":541,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":543,"_path":544,"layout":13},"Grid","/design-system/styles/grid",{"title":546,"_path":547,"layout":13},"Icons","/design-system/styles/icons",{"title":549,"_path":550,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":552,"_path":553,"layout":13},"Layout","/design-system/styles/layout",{"title":555,"_path":556,"layout":13},"Logo","/design-system/styles/logo",{"title":558,"_path":559,"layout":13},"Motion","/design-system/styles/motion",{"title":561,"_path":562,"layout":13},"Spacing","/design-system/styles/spacing",{"title":564,"_path":565,"layout":13},"Typography","/design-system/styles/typography",{"title":567,"_path":568,"children":569},"Components","/design-system/components",[570,573,576,579,582,585,588,591,594,597,600,603,606,609,612,615,618,621,624,627,630,633,636,639,642,645,648,651,654,657,660,663,666,669,672,675,678,681,682,683,684,687,690,693,696,699,702,705],{"title":571,"_path":572,"layout":13},"Accordion","/design-system/components/accordion",{"title":574,"_path":575,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":577,"_path":578,"layout":13},"Alert","/design-system/components/alert",{"title":580,"_path":581,"layout":13},"Block quote","/design-system/components/block-quote",{"title":583,"_path":584,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":586,"_path":587,"layout":13},"Button","/design-system/components/button",{"title":589,"_path":590,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":592,"_path":593,"layout":13},"Callout","/design-system/components/callout",{"title":595,"_path":596,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":598,"_path":599,"layout":13},"Card","/design-system/components/card",{"title":601,"_path":602,"layout":13},"Carousel","/design-system/components/carousel",{"title":604,"_path":605,"layout":13},"Category grid","/design-system/components/category-grid",{"title":607,"_path":608,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":610,"_path":611,"layout":13},"Chip","/design-system/components/chip",{"title":613,"_path":614,"layout":13},"Contact us","/design-system/components/contact-us",{"title":616,"_path":617,"layout":13},"Date input","/design-system/components/date-input",{"title":619,"_path":620,"layout":13},"Detail list","/design-system/components/detail-list",{"title":622,"_path":623,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":625,"_path":626,"layout":13},"File","/design-system/components/file",{"title":628,"_path":629,"layout":13},"Footer","/design-system/components/footer",{"title":631,"_path":632,"layout":13},"Form","/design-system/components/form",{"title":634,"_path":635,"layout":13},"Form alert","/design-system/components/form-alert",{"title":637,"_path":638,"layout":13},"Header","/design-system/components/header",{"title":640,"_path":641,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":643,"_path":644,"layout":13},"Input field","/design-system/components/input-field",{"title":646,"_path":647,"layout":13},"Key dates","/design-system/components/key-dates",{"title":649,"_path":650,"layout":13},"Media","/design-system/components/media",{"title":652,"_path":653,"layout":13},"Media embed","/design-system/components/media-embed",{"title":655,"_path":656,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":658,"_path":659,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":661,"_path":662,"layout":13},"Option button","/design-system/components/option-button",{"title":664,"_path":665,"layout":13},"Page action","/design-system/components/page-action",{"title":667,"_path":668,"layout":13},"Pagination","/design-system/components/pagination",{"title":670,"_path":671,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":673,"_path":674,"layout":13},"Profile","/design-system/components/profile",{"title":676,"_path":677,"layout":13},"Radio button","/design-system/components/radio-button",{"title":679,"_path":680,"layout":13},"Related links","/design-system/components/related-links",{"title":449,"_path":448,"layout":13},{"title":11,"_path":7,"layout":13},{"title":455,"_path":454,"layout":13},{"title":685,"_path":686,"layout":13},"Social share","/design-system/components/social-share",{"title":688,"_path":689,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":691,"_path":692,"layout":13},"Table","/design-system/components/table",{"title":694,"_path":695,"layout":13},"Tabs","/design-system/components/tabs",{"title":697,"_path":698,"layout":13},"Tag","/design-system/components/tag",{"title":700,"_path":701,"layout":13},"Text area","/design-system/components/text-area",{"title":703,"_path":704,"layout":13},"Timeline","/design-system/components/timeline",{"title":706,"_path":707,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":709,"_path":710,"children":711,"layout":13},"Ripple Framework","/framework",[712,713,731,753],{"title":709,"_path":710,"layout":13},{"title":714,"_path":715,"children":716},"Key Concepts","/framework/key-concepts",[717,719,722,725,728],{"title":524,"_path":718,"layout":13},"/framework/key-concepts/nuxt",{"title":720,"_path":721,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":723,"_path":724,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":726,"_path":727,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":729,"_path":730,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":732,"_path":733,"children":734},"Guides","/framework/guides",[735,738,741,744,747,750],{"title":736,"_path":737,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":739,"_path":740,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":742,"_path":743,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":745,"_path":746,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":748,"_path":749,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":751,"_path":752,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":754,"_path":755,"layout":13},"Core modules","/framework/core-modules",["Reactive",757],["Set"],["Reactive",759],{"module-navigation":760},null,true,1714695154580]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Search bar</h1><p class="rpl-type-p-large" data-v-3163c6df>The Search bar shows a text input field with a search button to let users enter keywords and search content on the website.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the search bar to help users find what they are looking for.<!--]--></p><p><!--[-->Users often rely on search to find the information they need. You can use it as an alternative to on-page navigation.<!--]--></p><p><!--[-->Users will use keywords in the search bar, often using different words or phrases. Search is especially helpful for users when navigating site that have many pages.<!--]--></p><p><!--[-->The search bar includes:<!--]--></p><ul><!--[--><li><!--[-->text - placeholder and input text<!--]--></li><li><!--[-->search button label<!--]--></li><li><!--[-->search button icon<!--]--></li><li><!--[-->optional predictive list - present suggested keywords to the user<!--]--></li><li><!--[-->optional refine search link - expand to present advanced filters to the user.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-search-bar--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-search-bar--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="how-this-component-works" data-v-ea525968><a href="#how-this-component-works" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->How this component works<!--]--></a></h2><h4 class="rpl-type-h4 docs-h4" id="input-text"><!--[-->Input text<!--]--></h4><p><!--[-->Include short, descriptive placeholder text. This tells the user what they can search for.<!--]--></p><p><!--[-->The text the user inputs replaces the placeholder text.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="search-button"><!--[-->Search button<!--]--></h4><p><!--[-->The search button contains a button label and search icon.<!--]--></p><p><!--[-->Smaller devices show a responsive variant with:<!--]--></p><ul><!--[--><li><!--[-->only a search icon<!--]--></li><li><!--[-->no button label.<!--]--></li><!--]--></ul><p><!--[-->This gives the user more space to write search text. Users know that a magnifying glass represents a search function.<!--]--></p><p><!--[-->The word ‘Search’ must appear in the alt text for screen readers.<!--]--></p><p><!--[-->The button type should be a submit button. This lets a user conduct a search:<!--]--></p><ul><!--[--><li><!--[-->using the enter/return key<!--]--></li><li><!--[-->using fewer keystrokes<!--]--></li><li><!--[-->by choosing a suggestion (if applicable)<!--]--></li><li><!--[-->that afterwards, still displays the search keyword.<!--]--></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="predictive-keyword-list"><!--[-->Predictive keyword list<!--]--></h4><p><!--[-->Useful suggestions let users find what they need with less effort. They also reduce spelling errors and typing.<!--]--></p><p><!--[-->Use a short, ordered list of no more than 10 keyword suggestions.<!--]--></p><p><!--[-->They should appear after only a few keystrokes.<!--]--></p><p><!--[-->Let the user scroll through keyword suggestions using keyboard navigation, with the Esc key to exit.<!--]--></p><p><!--[-->Scrolling ‘down’ past the last suggestion should loop the user back to the first one. Scrolling ‘up’ before the first suggestion should loop the user to the last (bottom) one.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use the search bar to let users search your site (site search).<!--]--></li><li><!--[-->Use default search field on white page background.<!--]--></li><li><!--[-->Use reverse search field on grey background.<!--]--></li><li><!--[-->Use menu variant in the mega menu only.<!--]--></li><li><!--[-->Use only default and reverse variants with predictive list suggestions.<!--]--></li><li><!--[-->Even if it&#39;s hidden from view, always use a form label for screen readers.<!--]--></li><li><!--[-->Keep placeholder text concise and descriptive.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t use default or reverse variants in the mega menu.<!--]--></li><li><!--[-->Don&#39;t use filters or refine search with the menu variant.<!--]--></li><li><!--[-->Don&#39;t use multiline search inputs.<!--]--></li><li><!--[-->Revised search shouldn&#39;t be by default.<!--]--></li><li><!--[-->Don&#39;t use with the refine search link if no filters are available.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->The 3 search variants include:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->reverse<!--]--></li><li><!--[-->menu.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><p><!--[-->This is standard search. The button initiates search based on the text input.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-search-bar--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-search-bar--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="reverse" data-v-ea525968><a href="#reverse" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Reverse<!--]--></a></h2><p><!--[-->Use the reverse variant when on a neutral background and you can&#39;t use the default variant.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-search-bar--reverse&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-search-bar--reverse&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="menu" data-v-ea525968><a href="#menu" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Menu<!--]--></a></h2><p><!--[-->Use this in the mega menu. See <a href="/design-system/components/primary-navigation/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Primary Navigation<!--]--><!--]--><!----><!--]--></a> for more information.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-search-bar--menu&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-search-bar--menu&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->The search bar uses colour for:<!--]--></p><ul><!--[--><li><!--[-->indicating an action to users<!--]--></li><li><!--[-->interaction states.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-search-bar--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-search-bar--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-search-bar--menu&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-search-bar--menu&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/search-bar.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/search-bar/_payload.json">[{"state":1,"once":756,"_errors":758,"serverRendered":761,"path":7,"prerenderedAt":762},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":443,"$sdd-globals":459,"$sdd-navigation":461},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/search-bar":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":438,"_id":439,"_source":440,"_file":441,"_extension":442},"/design-system/components/search-bar","components",false,"","Search bar","The Search bar shows a text input field with a search button to let users enter keywords and search content on the website.","page","Core",{"type":16,"children":17,"toc":423},"root",[18,27,33,38,43,48,78,83,90,97,102,107,113,118,123,136,141,146,151,174,180,185,190,195,200,205,211,249,255,283,287,293,298,316,321,326,329,334,339,343,349,363,367,370,376,381,394,404],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use the search bar to help users find what they are looking for.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Users often rely on search to find the information they need. You can use it as an alternative to on-page navigation.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Users will use keywords in the search bar, often using different words or phrases. Search is especially helpful for users when navigating site that have many pages.",{"type":19,"tag":28,"props":44,"children":45},{},[46],{"type":25,"value":47},"The search bar includes:",{"type":19,"tag":49,"props":50,"children":51},"ul",{},[52,58,63,68,73],{"type":19,"tag":53,"props":54,"children":55},"li",{},[56],{"type":25,"value":57},"text - placeholder and input text",{"type":19,"tag":53,"props":59,"children":60},{},[61],{"type":25,"value":62},"search button label",{"type":19,"tag":53,"props":64,"children":65},{},[66],{"type":25,"value":67},"search button icon",{"type":19,"tag":53,"props":69,"children":70},{},[71],{"type":25,"value":72},"optional predictive list - present suggested keywords to the user",{"type":19,"tag":53,"props":74,"children":75},{},[76],{"type":25,"value":77},"optional refine search link - expand to present advanced filters to the user.",{"type":19,"tag":79,"props":80,"children":82},"docs-example",{"id":81},"core-navigation-search-bar--default-story",[],{"type":19,"tag":84,"props":85,"children":87},"h3",{"id":86},"how-this-component-works",[88],{"type":25,"value":89},"How this component works",{"type":19,"tag":91,"props":92,"children":94},"h4",{"id":93},"input-text",[95],{"type":25,"value":96},"Input text",{"type":19,"tag":28,"props":98,"children":99},{},[100],{"type":25,"value":101},"Include short, descriptive placeholder text. This tells the user what they can search for.",{"type":19,"tag":28,"props":103,"children":104},{},[105],{"type":25,"value":106},"The text the user inputs replaces the placeholder text.",{"type":19,"tag":91,"props":108,"children":110},{"id":109},"search-button",[111],{"type":25,"value":112},"Search button",{"type":19,"tag":28,"props":114,"children":115},{},[116],{"type":25,"value":117},"The search button contains a button label and search icon.",{"type":19,"tag":28,"props":119,"children":120},{},[121],{"type":25,"value":122},"Smaller devices show a responsive variant with:",{"type":19,"tag":49,"props":124,"children":125},{},[126,131],{"type":19,"tag":53,"props":127,"children":128},{},[129],{"type":25,"value":130},"only a search icon",{"type":19,"tag":53,"props":132,"children":133},{},[134],{"type":25,"value":135},"no button label.",{"type":19,"tag":28,"props":137,"children":138},{},[139],{"type":25,"value":140},"This gives the user more space to write search text. Users know that a magnifying glass represents a search function.",{"type":19,"tag":28,"props":142,"children":143},{},[144],{"type":25,"value":145},"The word ‘Search’ must appear in the alt text for screen readers.",{"type":19,"tag":28,"props":147,"children":148},{},[149],{"type":25,"value":150},"The button type should be a submit button. This lets a user conduct a search:",{"type":19,"tag":49,"props":152,"children":153},{},[154,159,164,169],{"type":19,"tag":53,"props":155,"children":156},{},[157],{"type":25,"value":158},"using the enter/return key",{"type":19,"tag":53,"props":160,"children":161},{},[162],{"type":25,"value":163},"using fewer keystrokes",{"type":19,"tag":53,"props":165,"children":166},{},[167],{"type":25,"value":168},"by choosing a suggestion (if applicable)",{"type":19,"tag":53,"props":170,"children":171},{},[172],{"type":25,"value":173},"that afterwards, still displays the search keyword.",{"type":19,"tag":91,"props":175,"children":177},{"id":176},"predictive-keyword-list",[178],{"type":25,"value":179},"Predictive keyword list",{"type":19,"tag":28,"props":181,"children":182},{},[183],{"type":25,"value":184},"Useful suggestions let users find what they need with less effort. They also reduce spelling errors and typing.",{"type":19,"tag":28,"props":186,"children":187},{},[188],{"type":25,"value":189},"Use a short, ordered list of no more than 10 keyword suggestions.",{"type":19,"tag":28,"props":191,"children":192},{},[193],{"type":25,"value":194},"They should appear after only a few keystrokes.",{"type":19,"tag":28,"props":196,"children":197},{},[198],{"type":25,"value":199},"Let the user scroll through keyword suggestions using keyboard navigation, with the Esc key to exit.",{"type":19,"tag":28,"props":201,"children":202},{},[203],{"type":25,"value":204},"Scrolling ‘down’ past the last suggestion should loop the user back to the first one. Scrolling ‘up’ before the first suggestion should loop the user to the last (bottom) one.",{"type":19,"tag":84,"props":206,"children":208},{"id":207},"when-and-how-to-use",[209],{"type":25,"value":210},"When and how to use",{"type":19,"tag":49,"props":212,"children":213},{},[214,219,224,229,234,239,244],{"type":19,"tag":53,"props":215,"children":216},{},[217],{"type":25,"value":218},"Use the search bar to let users search your site (site search).",{"type":19,"tag":53,"props":220,"children":221},{},[222],{"type":25,"value":223},"Use default search field on white page background.",{"type":19,"tag":53,"props":225,"children":226},{},[227],{"type":25,"value":228},"Use reverse search field on grey background.",{"type":19,"tag":53,"props":230,"children":231},{},[232],{"type":25,"value":233},"Use menu variant in the mega menu only.",{"type":19,"tag":53,"props":235,"children":236},{},[237],{"type":25,"value":238},"Use only default and reverse variants with predictive list suggestions.",{"type":19,"tag":53,"props":240,"children":241},{},[242],{"type":25,"value":243},"Even if it's hidden from view, always use a form label for screen readers.",{"type":19,"tag":53,"props":245,"children":246},{},[247],{"type":25,"value":248},"Keep placeholder text concise and descriptive.",{"type":19,"tag":84,"props":250,"children":252},{"id":251},"when-and-how-not-to-use",[253],{"type":25,"value":254},"When and how not to use",{"type":19,"tag":49,"props":256,"children":257},{},[258,263,268,273,278],{"type":19,"tag":53,"props":259,"children":260},{},[261],{"type":25,"value":262},"Don't use default or reverse variants in the mega menu.",{"type":19,"tag":53,"props":264,"children":265},{},[266],{"type":25,"value":267},"Don't use filters or refine search with the menu variant.",{"type":19,"tag":53,"props":269,"children":270},{},[271],{"type":25,"value":272},"Don't use multiline search inputs.",{"type":19,"tag":53,"props":274,"children":275},{},[276],{"type":25,"value":277},"Revised search shouldn't be by default.",{"type":19,"tag":53,"props":279,"children":280},{},[281],{"type":25,"value":282},"Don't use with the refine search link if no filters are available.",{"type":19,"tag":284,"props":285,"children":286},"hr",{},[],{"type":19,"tag":20,"props":288,"children":290},{"id":289},"variants",[291],{"type":25,"value":292},"Variants",{"type":19,"tag":28,"props":294,"children":295},{},[296],{"type":25,"value":297},"The 3 search variants include:",{"type":19,"tag":49,"props":299,"children":300},{},[301,306,311],{"type":19,"tag":53,"props":302,"children":303},{},[304],{"type":25,"value":305},"default",{"type":19,"tag":53,"props":307,"children":308},{},[309],{"type":25,"value":310},"reverse",{"type":19,"tag":53,"props":312,"children":313},{},[314],{"type":25,"value":315},"menu.",{"type":19,"tag":84,"props":317,"children":318},{"id":305},[319],{"type":25,"value":320},"Default",{"type":19,"tag":28,"props":322,"children":323},{},[324],{"type":25,"value":325},"This is standard search. The button initiates search based on the text input.",{"type":19,"tag":79,"props":327,"children":328},{"id":81},[],{"type":19,"tag":84,"props":330,"children":331},{"id":310},[332],{"type":25,"value":333},"Reverse",{"type":19,"tag":28,"props":335,"children":336},{},[337],{"type":25,"value":338},"Use the reverse variant when on a neutral background and you can't use the default variant.",{"type":19,"tag":79,"props":340,"children":342},{"id":341},"core-navigation-search-bar--reverse",[],{"type":19,"tag":84,"props":344,"children":346},{"id":345},"menu",[347],{"type":25,"value":348},"Menu",{"type":19,"tag":28,"props":350,"children":351},{},[352,354,361],{"type":25,"value":353},"Use this in the mega menu. See ",{"type":19,"tag":355,"props":356,"children":358},"a",{"href":357},"/design-system/components/primary-navigation/",[359],{"type":25,"value":360},"Primary Navigation",{"type":25,"value":362}," for more information.",{"type":19,"tag":79,"props":364,"children":366},{"id":365},"core-navigation-search-bar--menu",[],{"type":19,"tag":284,"props":368,"children":369},{},[],{"type":19,"tag":20,"props":371,"children":373},{"id":372},"theming",[374],{"type":25,"value":375},"Theming",{"type":19,"tag":28,"props":377,"children":378},{},[379],{"type":25,"value":380},"The search bar uses colour for:",{"type":19,"tag":49,"props":382,"children":383},{},[384,389],{"type":19,"tag":53,"props":385,"children":386},{},[387],{"type":25,"value":388},"indicating an action to users",{"type":19,"tag":53,"props":390,"children":391},{},[392],{"type":25,"value":393},"interaction states.",{"type":19,"tag":395,"props":396,"children":397},"docs-theme-chooser",{},[398,401],{"type":19,"tag":79,"props":399,"children":400},{"id":81},[],{"type":19,"tag":79,"props":402,"children":403},{"id":365},[],{"type":19,"tag":28,"props":405,"children":406},{},[407,409,414,416,421],{"type":25,"value":408},"To create your own theme, see ",{"type":19,"tag":355,"props":410,"children":411},{"href":10},[412],{"type":25,"value":413},"theming guidance for designers",{"type":25,"value":415}," or ",{"type":19,"tag":355,"props":417,"children":418},{"href":10},[419],{"type":25,"value":420},"theming guidance for developers",{"type":25,"value":422},".",{"title":10,"searchDepth":424,"depth":424,"links":425},2,[426,432,437],{"id":22,"depth":424,"text":26,"children":427},[428,430,431],{"id":86,"depth":429,"text":89},3,{"id":207,"depth":429,"text":210},{"id":251,"depth":429,"text":254},{"id":289,"depth":424,"text":292,"children":433},[434,435,436],{"id":305,"depth":429,"text":320},{"id":310,"depth":429,"text":333},{"id":345,"depth":429,"text":348},{"id":372,"depth":424,"text":375},"markdown","content:design-system:5.components:search-bar.md","content","design-system/5.components/search-bar.md","md",["ShallowRef",444],["ShallowReactive",445],{"/design-system/components/search-bar":446},[447,453],{"_path":448,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":449,"description":450,"layout":13,"label":14,"_type":438,"_id":451,"_source":440,"_file":452,"_extension":442},"/design-system/components/results-listing","Results listing","The Results listing component shows a list of search result items, with each item displaying key information relevant to that search.","content:design-system:5.components:results-listing.md","design-system/5.components/results-listing.md",{"_path":454,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":455,"description":456,"layout":13,"label":14,"_type":438,"_id":457,"_source":440,"_file":458,"_extension":442},"/design-system/components/skip-link","Skip link","The Skip link component makes your page more accessible and easier to navigate, by helping keyboard users skip to the main content on a page.","content:design-system:5.components:skip-link.md","design-system/5.components/skip-link.md",["ShallowRef",460],{},[462,467,708],{"title":463,"_path":464,"icon":465,"layout":466},"Ripple Design System","/","carbon:home","home",{"title":468,"_path":469,"children":470},"Design System","/design-system",[471,487,503,532,566],{"title":472,"_path":473,"children":474},"About","/design-system/about",[475,478,481,484],{"title":476,"_path":477,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":479,"_path":480,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":482,"_path":483,"layout":13},"Support","/design-system/about/getting-support",{"title":485,"_path":486,"layout":13},"Contributing","/design-system/about/contributing",{"title":488,"_path":489,"children":490},"Design","/design-system/design",[491,494,497,500],{"title":492,"_path":493,"layout":13},"Getting started","/design-system/design/getting-started",{"title":495,"_path":496,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":498,"_path":499,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":501,"_path":502,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":504,"_path":505,"children":506},"Develop","/design-system/develop",[507,509,511,514],{"title":492,"_path":508,"layout":13},"/design-system/develop/getting-started",{"title":485,"_path":510,"layout":13},"/design-system/develop/contributing",{"title":512,"_path":513,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":515,"children":516,"layout":13},"/design-system/develop/usage",[517,520,523,526,529],{"title":518,"_path":519,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":521,"_path":522,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":524,"_path":525,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":527,"_path":528,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":530,"_path":531,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":533,"_path":534,"children":535},"Styles","/design-system/styles",[536,539,542,545,548,551,554,557,560,563],{"title":537,"_path":538,"layout":13},"Colour","/design-system/styles/colour",{"title":540,"_path":541,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":543,"_path":544,"layout":13},"Grid","/design-system/styles/grid",{"title":546,"_path":547,"layout":13},"Icons","/design-system/styles/icons",{"title":549,"_path":550,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":552,"_path":553,"layout":13},"Layout","/design-system/styles/layout",{"title":555,"_path":556,"layout":13},"Logo","/design-system/styles/logo",{"title":558,"_path":559,"layout":13},"Motion","/design-system/styles/motion",{"title":561,"_path":562,"layout":13},"Spacing","/design-system/styles/spacing",{"title":564,"_path":565,"layout":13},"Typography","/design-system/styles/typography",{"title":567,"_path":568,"children":569},"Components","/design-system/components",[570,573,576,579,582,585,588,591,594,597,600,603,606,609,612,615,618,621,624,627,630,633,636,639,642,645,648,651,654,657,660,663,666,669,672,675,678,681,682,683,684,687,690,693,696,699,702,705],{"title":571,"_path":572,"layout":13},"Accordion","/design-system/components/accordion",{"title":574,"_path":575,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":577,"_path":578,"layout":13},"Alert","/design-system/components/alert",{"title":580,"_path":581,"layout":13},"Block quote","/design-system/components/block-quote",{"title":583,"_path":584,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":586,"_path":587,"layout":13},"Button","/design-system/components/button",{"title":589,"_path":590,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":592,"_path":593,"layout":13},"Callout","/design-system/components/callout",{"title":595,"_path":596,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":598,"_path":599,"layout":13},"Card","/design-system/components/card",{"title":601,"_path":602,"layout":13},"Carousel","/design-system/components/carousel",{"title":604,"_path":605,"layout":13},"Category grid","/design-system/components/category-grid",{"title":607,"_path":608,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":610,"_path":611,"layout":13},"Chip","/design-system/components/chip",{"title":613,"_path":614,"layout":13},"Contact us","/design-system/components/contact-us",{"title":616,"_path":617,"layout":13},"Date input","/design-system/components/date-input",{"title":619,"_path":620,"layout":13},"Detail list","/design-system/components/detail-list",{"title":622,"_path":623,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":625,"_path":626,"layout":13},"File","/design-system/components/file",{"title":628,"_path":629,"layout":13},"Footer","/design-system/components/footer",{"title":631,"_path":632,"layout":13},"Form","/design-system/components/form",{"title":634,"_path":635,"layout":13},"Form alert","/design-system/components/form-alert",{"title":637,"_path":638,"layout":13},"Header","/design-system/components/header",{"title":640,"_path":641,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":643,"_path":644,"layout":13},"Input field","/design-system/components/input-field",{"title":646,"_path":647,"layout":13},"Key dates","/design-system/components/key-dates",{"title":649,"_path":650,"layout":13},"Media","/design-system/components/media",{"title":652,"_path":653,"layout":13},"Media embed","/design-system/components/media-embed",{"title":655,"_path":656,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":658,"_path":659,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":661,"_path":662,"layout":13},"Option button","/design-system/components/option-button",{"title":664,"_path":665,"layout":13},"Page action","/design-system/components/page-action",{"title":667,"_path":668,"layout":13},"Pagination","/design-system/components/pagination",{"title":670,"_path":671,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":673,"_path":674,"layout":13},"Profile","/design-system/components/profile",{"title":676,"_path":677,"layout":13},"Radio button","/design-system/components/radio-button",{"title":679,"_path":680,"layout":13},"Related links","/design-system/components/related-links",{"title":449,"_path":448,"layout":13},{"title":11,"_path":7,"layout":13},{"title":455,"_path":454,"layout":13},{"title":685,"_path":686,"layout":13},"Social share","/design-system/components/social-share",{"title":688,"_path":689,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":691,"_path":692,"layout":13},"Table","/design-system/components/table",{"title":694,"_path":695,"layout":13},"Tabs","/design-system/components/tabs",{"title":697,"_path":698,"layout":13},"Tag","/design-system/components/tag",{"title":700,"_path":701,"layout":13},"Text area","/design-system/components/text-area",{"title":703,"_path":704,"layout":13},"Timeline","/design-system/components/timeline",{"title":706,"_path":707,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":709,"_path":710,"children":711,"layout":13},"Ripple Framework","/framework",[712,713,731,753],{"title":709,"_path":710,"layout":13},{"title":714,"_path":715,"children":716},"Key Concepts","/framework/key-concepts",[717,719,722,725,728],{"title":524,"_path":718,"layout":13},"/framework/key-concepts/nuxt",{"title":720,"_path":721,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":723,"_path":724,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":726,"_path":727,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":729,"_path":730,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":732,"_path":733,"children":734},"Guides","/framework/guides",[735,738,741,744,747,750],{"title":736,"_path":737,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":739,"_path":740,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":742,"_path":743,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":745,"_path":746,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":748,"_path":749,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":751,"_path":752,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":754,"_path":755,"layout":13},"Core modules","/framework/core-modules",["Reactive",757],["Set"],["Reactive",759],{"module-navigation":760},null,true,1714695652751]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/skip-link/_payload.json b/design-system/components/skip-link/_payload.json
index 5ff05312de..66de1623be 100644
--- a/design-system/components/skip-link/_payload.json
+++ b/design-system/components/skip-link/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":104,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695154586]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":104,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695652755]
\ No newline at end of file
diff --git a/design-system/components/skip-link/index.html b/design-system/components/skip-link/index.html
index 5767cf8b56..d1296f4ad2 100644
--- a/design-system/components/skip-link/index.html
+++ b/design-system/components/skip-link/index.html
@@ -28,63 +28,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -96,8 +96,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Skip link</h1><p class="rpl-type-p-large" data-v-3163c6df>The Skip link component makes your page more accessible and easier to navigate, by helping keyboard users skip to the main content on a page.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use skip links to let users:<!--]--></p><ul><!--[--><li><!--[-->navigate quickly through links and form elements<!--]--></li><li><!--[-->navigate your page when interacting only through the keyboard<!--]--></li><li><!--[-->let users navigate directly to the main page content.<!--]--></li><!--]--></ul><p><!--[-->Skip links bypass the primary navigation links (the top horizontal menu items appearing on every page).<!--]--></p><p><!--[-->Until the user activates it through a keyboard press, a skip link won’t display.<!--]--></p><p><!--[-->When visible, it&#39;s always the first item on a page and pushes down all page content.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-layout-skip-links--stand-alone&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-layout-skip-links--stand-alone&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->It must be on every page.<!--]--></li><li><!--[-->When visible, it must be the first element on the page.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Only use at the top of the page.<!--]--></li><li><!--[-->Don&#39;t edit the styling.<!--]--></li><li><!--[-->Don&#39;t overlay page content. It must push down the page content.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->The skip link uses the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with a skip link. This could be jarring or confusing to users.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-layout-skip-links--stand-alone&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-layout-skip-links--stand-alone&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/skip-link.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/skip-link/_payload.json">[{"state":1,"once":486,"_errors":488,"serverRendered":491,"path":7,"prerenderedAt":492},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":173,"$sdd-globals":189,"$sdd-navigation":191},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/skip-link":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":168,"_id":169,"_source":170,"_file":171,"_extension":172},"/design-system/components/skip-link","components",false,"","Skip link","The Skip link component makes your page more accessible and easier to navigate, by helping keyboard users skip to the main content on a page.","page","Core",{"type":16,"children":17,"toc":159},"root",[18,27,33,53,58,63,68,73,80,93,99,117,121,127,132,139],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use skip links to let users:",{"type":19,"tag":34,"props":35,"children":36},"ul",{},[37,43,48],{"type":19,"tag":38,"props":39,"children":40},"li",{},[41],{"type":25,"value":42},"navigate quickly through links and form elements",{"type":19,"tag":38,"props":44,"children":45},{},[46],{"type":25,"value":47},"navigate your page when interacting only through the keyboard",{"type":19,"tag":38,"props":49,"children":50},{},[51],{"type":25,"value":52},"let users navigate directly to the main page content.",{"type":19,"tag":28,"props":54,"children":55},{},[56],{"type":25,"value":57},"Skip links bypass the primary navigation links (the top horizontal menu items appearing on every page).",{"type":19,"tag":28,"props":59,"children":60},{},[61],{"type":25,"value":62},"Until the user activates it through a keyboard press, a skip link won’t display.",{"type":19,"tag":28,"props":64,"children":65},{},[66],{"type":25,"value":67},"When visible, it's always the first item on a page and pushes down all page content.",{"type":19,"tag":69,"props":70,"children":72},"docs-example",{"id":71},"core-layout-skip-links--stand-alone",[],{"type":19,"tag":74,"props":75,"children":77},"h3",{"id":76},"when-and-how-to-use",[78],{"type":25,"value":79},"When and how to use",{"type":19,"tag":34,"props":81,"children":82},{},[83,88],{"type":19,"tag":38,"props":84,"children":85},{},[86],{"type":25,"value":87},"It must be on every page.",{"type":19,"tag":38,"props":89,"children":90},{},[91],{"type":25,"value":92},"When visible, it must be the first element on the page.",{"type":19,"tag":74,"props":94,"children":96},{"id":95},"when-and-how-not-to-use",[97],{"type":25,"value":98},"When and how not to use",{"type":19,"tag":34,"props":100,"children":101},{},[102,107,112],{"type":19,"tag":38,"props":103,"children":104},{},[105],{"type":25,"value":106},"Only use at the top of the page.",{"type":19,"tag":38,"props":108,"children":109},{},[110],{"type":25,"value":111},"Don't edit the styling.",{"type":19,"tag":38,"props":113,"children":114},{},[115],{"type":25,"value":116},"Don't overlay page content. It must push down the page content.",{"type":19,"tag":118,"props":119,"children":120},"hr",{},[],{"type":19,"tag":20,"props":122,"children":124},{"id":123},"theming",[125],{"type":25,"value":126},"Theming",{"type":19,"tag":28,"props":128,"children":129},{},[130],{"type":25,"value":131},"The skip link uses the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with a skip link. This could be jarring or confusing to users.",{"type":19,"tag":133,"props":134,"children":135},"docs-theme-chooser",{},[136],{"type":19,"tag":69,"props":137,"children":138},{"id":71},[],{"type":19,"tag":28,"props":140,"children":141},{},[142,144,150,152,157],{"type":25,"value":143},"To create your own theme, see ",{"type":19,"tag":145,"props":146,"children":147},"a",{"href":10},[148],{"type":25,"value":149},"theming guidance for designers",{"type":25,"value":151}," or ",{"type":19,"tag":145,"props":153,"children":154},{"href":10},[155],{"type":25,"value":156},"theming guidance for developers",{"type":25,"value":158},".",{"title":10,"searchDepth":160,"depth":160,"links":161},2,[162,167],{"id":22,"depth":160,"text":26,"children":163},[164,166],{"id":76,"depth":165,"text":79},3,{"id":95,"depth":165,"text":98},{"id":123,"depth":160,"text":126},"markdown","content:design-system:5.components:skip-link.md","content","design-system/5.components/skip-link.md","md",["ShallowRef",174],["ShallowReactive",175],{"/design-system/components/skip-link":176},[177,183],{"_path":178,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":179,"description":180,"layout":13,"label":14,"_type":168,"_id":181,"_source":170,"_file":182,"_extension":172},"/design-system/components/search-bar","Search bar","The Search bar shows a text input field with a search button to let users enter keywords and search content on the website.","content:design-system:5.components:search-bar.md","design-system/5.components/search-bar.md",{"_path":184,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":185,"description":186,"layout":13,"label":14,"_type":168,"_id":187,"_source":170,"_file":188,"_extension":172},"/design-system/components/social-share","Social share","The Social share component shows a list of links to help users to share pages to social media.","content:design-system:5.components:social-share.md","design-system/5.components/social-share.md",["ShallowRef",190],{},[192,197,438],{"title":193,"_path":194,"icon":195,"layout":196},"Ripple Design System","/","carbon:home","home",{"title":198,"_path":199,"children":200},"Design System","/design-system",[201,217,233,262,296],{"title":202,"_path":203,"children":204},"About","/design-system/about",[205,208,211,214],{"title":206,"_path":207,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":209,"_path":210,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":212,"_path":213,"layout":13},"Support","/design-system/about/getting-support",{"title":215,"_path":216,"layout":13},"Contributing","/design-system/about/contributing",{"title":218,"_path":219,"children":220},"Design","/design-system/design",[221,224,227,230],{"title":222,"_path":223,"layout":13},"Getting started","/design-system/design/getting-started",{"title":225,"_path":226,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":228,"_path":229,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":231,"_path":232,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":234,"_path":235,"children":236},"Develop","/design-system/develop",[237,239,241,244],{"title":222,"_path":238,"layout":13},"/design-system/develop/getting-started",{"title":215,"_path":240,"layout":13},"/design-system/develop/contributing",{"title":242,"_path":243,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":245,"children":246,"layout":13},"/design-system/develop/usage",[247,250,253,256,259],{"title":248,"_path":249,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":251,"_path":252,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":254,"_path":255,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":257,"_path":258,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":260,"_path":261,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":263,"_path":264,"children":265},"Styles","/design-system/styles",[266,269,272,275,278,281,284,287,290,293],{"title":267,"_path":268,"layout":13},"Colour","/design-system/styles/colour",{"title":270,"_path":271,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":273,"_path":274,"layout":13},"Grid","/design-system/styles/grid",{"title":276,"_path":277,"layout":13},"Icons","/design-system/styles/icons",{"title":279,"_path":280,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":282,"_path":283,"layout":13},"Layout","/design-system/styles/layout",{"title":285,"_path":286,"layout":13},"Logo","/design-system/styles/logo",{"title":288,"_path":289,"layout":13},"Motion","/design-system/styles/motion",{"title":291,"_path":292,"layout":13},"Spacing","/design-system/styles/spacing",{"title":294,"_path":295,"layout":13},"Typography","/design-system/styles/typography",{"title":297,"_path":298,"children":299},"Components","/design-system/components",[300,303,306,309,312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,415,416,417,420,423,426,429,432,435],{"title":301,"_path":302,"layout":13},"Accordion","/design-system/components/accordion",{"title":304,"_path":305,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":307,"_path":308,"layout":13},"Alert","/design-system/components/alert",{"title":310,"_path":311,"layout":13},"Block quote","/design-system/components/block-quote",{"title":313,"_path":314,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":316,"_path":317,"layout":13},"Button","/design-system/components/button",{"title":319,"_path":320,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":322,"_path":323,"layout":13},"Callout","/design-system/components/callout",{"title":325,"_path":326,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":328,"_path":329,"layout":13},"Card","/design-system/components/card",{"title":331,"_path":332,"layout":13},"Carousel","/design-system/components/carousel",{"title":334,"_path":335,"layout":13},"Category grid","/design-system/components/category-grid",{"title":337,"_path":338,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":340,"_path":341,"layout":13},"Chip","/design-system/components/chip",{"title":343,"_path":344,"layout":13},"Contact us","/design-system/components/contact-us",{"title":346,"_path":347,"layout":13},"Date input","/design-system/components/date-input",{"title":349,"_path":350,"layout":13},"Detail list","/design-system/components/detail-list",{"title":352,"_path":353,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":355,"_path":356,"layout":13},"File","/design-system/components/file",{"title":358,"_path":359,"layout":13},"Footer","/design-system/components/footer",{"title":361,"_path":362,"layout":13},"Form","/design-system/components/form",{"title":364,"_path":365,"layout":13},"Form alert","/design-system/components/form-alert",{"title":367,"_path":368,"layout":13},"Header","/design-system/components/header",{"title":370,"_path":371,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":373,"_path":374,"layout":13},"Input field","/design-system/components/input-field",{"title":376,"_path":377,"layout":13},"Key dates","/design-system/components/key-dates",{"title":379,"_path":380,"layout":13},"Media","/design-system/components/media",{"title":382,"_path":383,"layout":13},"Media embed","/design-system/components/media-embed",{"title":385,"_path":386,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":388,"_path":389,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":391,"_path":392,"layout":13},"Option button","/design-system/components/option-button",{"title":394,"_path":395,"layout":13},"Page action","/design-system/components/page-action",{"title":397,"_path":398,"layout":13},"Pagination","/design-system/components/pagination",{"title":400,"_path":401,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":403,"_path":404,"layout":13},"Profile","/design-system/components/profile",{"title":406,"_path":407,"layout":13},"Radio button","/design-system/components/radio-button",{"title":409,"_path":410,"layout":13},"Related links","/design-system/components/related-links",{"title":412,"_path":413,"layout":13},"Results listing","/design-system/components/results-listing",{"title":179,"_path":178,"layout":13},{"title":11,"_path":7,"layout":13},{"title":185,"_path":184,"layout":13},{"title":418,"_path":419,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":421,"_path":422,"layout":13},"Table","/design-system/components/table",{"title":424,"_path":425,"layout":13},"Tabs","/design-system/components/tabs",{"title":427,"_path":428,"layout":13},"Tag","/design-system/components/tag",{"title":430,"_path":431,"layout":13},"Text area","/design-system/components/text-area",{"title":433,"_path":434,"layout":13},"Timeline","/design-system/components/timeline",{"title":436,"_path":437,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":439,"_path":440,"children":441,"layout":13},"Ripple Framework","/framework",[442,443,461,483],{"title":439,"_path":440,"layout":13},{"title":444,"_path":445,"children":446},"Key Concepts","/framework/key-concepts",[447,449,452,455,458],{"title":254,"_path":448,"layout":13},"/framework/key-concepts/nuxt",{"title":450,"_path":451,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":453,"_path":454,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":456,"_path":457,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":459,"_path":460,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":462,"_path":463,"children":464},"Guides","/framework/guides",[465,468,471,474,477,480],{"title":466,"_path":467,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":469,"_path":470,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":472,"_path":473,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":475,"_path":476,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":478,"_path":479,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":481,"_path":482,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":484,"_path":485,"layout":13},"Core modules","/framework/core-modules",["Reactive",487],["Set"],["Reactive",489],{"module-navigation":490},null,true,1714695154586]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Skip link</h1><p class="rpl-type-p-large" data-v-3163c6df>The Skip link component makes your page more accessible and easier to navigate, by helping keyboard users skip to the main content on a page.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use skip links to let users:<!--]--></p><ul><!--[--><li><!--[-->navigate quickly through links and form elements<!--]--></li><li><!--[-->navigate your page when interacting only through the keyboard<!--]--></li><li><!--[-->let users navigate directly to the main page content.<!--]--></li><!--]--></ul><p><!--[-->Skip links bypass the primary navigation links (the top horizontal menu items appearing on every page).<!--]--></p><p><!--[-->Until the user activates it through a keyboard press, a skip link won’t display.<!--]--></p><p><!--[-->When visible, it&#39;s always the first item on a page and pushes down all page content.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-layout-skip-links--stand-alone&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-layout-skip-links--stand-alone&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->It must be on every page.<!--]--></li><li><!--[-->When visible, it must be the first element on the page.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Only use at the top of the page.<!--]--></li><li><!--[-->Don&#39;t edit the styling.<!--]--></li><li><!--[-->Don&#39;t overlay page content. It must push down the page content.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->The skip link uses the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with a skip link. This could be jarring or confusing to users.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-layout-skip-links--stand-alone&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-layout-skip-links--stand-alone&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme, see <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/skip-link.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/skip-link/_payload.json">[{"state":1,"once":486,"_errors":488,"serverRendered":491,"path":7,"prerenderedAt":492},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":173,"$sdd-globals":189,"$sdd-navigation":191},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/skip-link":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":168,"_id":169,"_source":170,"_file":171,"_extension":172},"/design-system/components/skip-link","components",false,"","Skip link","The Skip link component makes your page more accessible and easier to navigate, by helping keyboard users skip to the main content on a page.","page","Core",{"type":16,"children":17,"toc":159},"root",[18,27,33,53,58,63,68,73,80,93,99,117,121,127,132,139],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use skip links to let users:",{"type":19,"tag":34,"props":35,"children":36},"ul",{},[37,43,48],{"type":19,"tag":38,"props":39,"children":40},"li",{},[41],{"type":25,"value":42},"navigate quickly through links and form elements",{"type":19,"tag":38,"props":44,"children":45},{},[46],{"type":25,"value":47},"navigate your page when interacting only through the keyboard",{"type":19,"tag":38,"props":49,"children":50},{},[51],{"type":25,"value":52},"let users navigate directly to the main page content.",{"type":19,"tag":28,"props":54,"children":55},{},[56],{"type":25,"value":57},"Skip links bypass the primary navigation links (the top horizontal menu items appearing on every page).",{"type":19,"tag":28,"props":59,"children":60},{},[61],{"type":25,"value":62},"Until the user activates it through a keyboard press, a skip link won’t display.",{"type":19,"tag":28,"props":64,"children":65},{},[66],{"type":25,"value":67},"When visible, it's always the first item on a page and pushes down all page content.",{"type":19,"tag":69,"props":70,"children":72},"docs-example",{"id":71},"core-layout-skip-links--stand-alone",[],{"type":19,"tag":74,"props":75,"children":77},"h3",{"id":76},"when-and-how-to-use",[78],{"type":25,"value":79},"When and how to use",{"type":19,"tag":34,"props":81,"children":82},{},[83,88],{"type":19,"tag":38,"props":84,"children":85},{},[86],{"type":25,"value":87},"It must be on every page.",{"type":19,"tag":38,"props":89,"children":90},{},[91],{"type":25,"value":92},"When visible, it must be the first element on the page.",{"type":19,"tag":74,"props":94,"children":96},{"id":95},"when-and-how-not-to-use",[97],{"type":25,"value":98},"When and how not to use",{"type":19,"tag":34,"props":100,"children":101},{},[102,107,112],{"type":19,"tag":38,"props":103,"children":104},{},[105],{"type":25,"value":106},"Only use at the top of the page.",{"type":19,"tag":38,"props":108,"children":109},{},[110],{"type":25,"value":111},"Don't edit the styling.",{"type":19,"tag":38,"props":113,"children":114},{},[115],{"type":25,"value":116},"Don't overlay page content. It must push down the page content.",{"type":19,"tag":118,"props":119,"children":120},"hr",{},[],{"type":19,"tag":20,"props":122,"children":124},{"id":123},"theming",[125],{"type":25,"value":126},"Theming",{"type":19,"tag":28,"props":128,"children":129},{},[130],{"type":25,"value":131},"The skip link uses the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with a skip link. This could be jarring or confusing to users.",{"type":19,"tag":133,"props":134,"children":135},"docs-theme-chooser",{},[136],{"type":19,"tag":69,"props":137,"children":138},{"id":71},[],{"type":19,"tag":28,"props":140,"children":141},{},[142,144,150,152,157],{"type":25,"value":143},"To create your own theme, see ",{"type":19,"tag":145,"props":146,"children":147},"a",{"href":10},[148],{"type":25,"value":149},"theming guidance for designers",{"type":25,"value":151}," or ",{"type":19,"tag":145,"props":153,"children":154},{"href":10},[155],{"type":25,"value":156},"theming guidance for developers",{"type":25,"value":158},".",{"title":10,"searchDepth":160,"depth":160,"links":161},2,[162,167],{"id":22,"depth":160,"text":26,"children":163},[164,166],{"id":76,"depth":165,"text":79},3,{"id":95,"depth":165,"text":98},{"id":123,"depth":160,"text":126},"markdown","content:design-system:5.components:skip-link.md","content","design-system/5.components/skip-link.md","md",["ShallowRef",174],["ShallowReactive",175],{"/design-system/components/skip-link":176},[177,183],{"_path":178,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":179,"description":180,"layout":13,"label":14,"_type":168,"_id":181,"_source":170,"_file":182,"_extension":172},"/design-system/components/search-bar","Search bar","The Search bar shows a text input field with a search button to let users enter keywords and search content on the website.","content:design-system:5.components:search-bar.md","design-system/5.components/search-bar.md",{"_path":184,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":185,"description":186,"layout":13,"label":14,"_type":168,"_id":187,"_source":170,"_file":188,"_extension":172},"/design-system/components/social-share","Social share","The Social share component shows a list of links to help users to share pages to social media.","content:design-system:5.components:social-share.md","design-system/5.components/social-share.md",["ShallowRef",190],{},[192,197,438],{"title":193,"_path":194,"icon":195,"layout":196},"Ripple Design System","/","carbon:home","home",{"title":198,"_path":199,"children":200},"Design System","/design-system",[201,217,233,262,296],{"title":202,"_path":203,"children":204},"About","/design-system/about",[205,208,211,214],{"title":206,"_path":207,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":209,"_path":210,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":212,"_path":213,"layout":13},"Support","/design-system/about/getting-support",{"title":215,"_path":216,"layout":13},"Contributing","/design-system/about/contributing",{"title":218,"_path":219,"children":220},"Design","/design-system/design",[221,224,227,230],{"title":222,"_path":223,"layout":13},"Getting started","/design-system/design/getting-started",{"title":225,"_path":226,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":228,"_path":229,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":231,"_path":232,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":234,"_path":235,"children":236},"Develop","/design-system/develop",[237,239,241,244],{"title":222,"_path":238,"layout":13},"/design-system/develop/getting-started",{"title":215,"_path":240,"layout":13},"/design-system/develop/contributing",{"title":242,"_path":243,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":245,"children":246,"layout":13},"/design-system/develop/usage",[247,250,253,256,259],{"title":248,"_path":249,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":251,"_path":252,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":254,"_path":255,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":257,"_path":258,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":260,"_path":261,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":263,"_path":264,"children":265},"Styles","/design-system/styles",[266,269,272,275,278,281,284,287,290,293],{"title":267,"_path":268,"layout":13},"Colour","/design-system/styles/colour",{"title":270,"_path":271,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":273,"_path":274,"layout":13},"Grid","/design-system/styles/grid",{"title":276,"_path":277,"layout":13},"Icons","/design-system/styles/icons",{"title":279,"_path":280,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":282,"_path":283,"layout":13},"Layout","/design-system/styles/layout",{"title":285,"_path":286,"layout":13},"Logo","/design-system/styles/logo",{"title":288,"_path":289,"layout":13},"Motion","/design-system/styles/motion",{"title":291,"_path":292,"layout":13},"Spacing","/design-system/styles/spacing",{"title":294,"_path":295,"layout":13},"Typography","/design-system/styles/typography",{"title":297,"_path":298,"children":299},"Components","/design-system/components",[300,303,306,309,312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,415,416,417,420,423,426,429,432,435],{"title":301,"_path":302,"layout":13},"Accordion","/design-system/components/accordion",{"title":304,"_path":305,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":307,"_path":308,"layout":13},"Alert","/design-system/components/alert",{"title":310,"_path":311,"layout":13},"Block quote","/design-system/components/block-quote",{"title":313,"_path":314,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":316,"_path":317,"layout":13},"Button","/design-system/components/button",{"title":319,"_path":320,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":322,"_path":323,"layout":13},"Callout","/design-system/components/callout",{"title":325,"_path":326,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":328,"_path":329,"layout":13},"Card","/design-system/components/card",{"title":331,"_path":332,"layout":13},"Carousel","/design-system/components/carousel",{"title":334,"_path":335,"layout":13},"Category grid","/design-system/components/category-grid",{"title":337,"_path":338,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":340,"_path":341,"layout":13},"Chip","/design-system/components/chip",{"title":343,"_path":344,"layout":13},"Contact us","/design-system/components/contact-us",{"title":346,"_path":347,"layout":13},"Date input","/design-system/components/date-input",{"title":349,"_path":350,"layout":13},"Detail list","/design-system/components/detail-list",{"title":352,"_path":353,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":355,"_path":356,"layout":13},"File","/design-system/components/file",{"title":358,"_path":359,"layout":13},"Footer","/design-system/components/footer",{"title":361,"_path":362,"layout":13},"Form","/design-system/components/form",{"title":364,"_path":365,"layout":13},"Form alert","/design-system/components/form-alert",{"title":367,"_path":368,"layout":13},"Header","/design-system/components/header",{"title":370,"_path":371,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":373,"_path":374,"layout":13},"Input field","/design-system/components/input-field",{"title":376,"_path":377,"layout":13},"Key dates","/design-system/components/key-dates",{"title":379,"_path":380,"layout":13},"Media","/design-system/components/media",{"title":382,"_path":383,"layout":13},"Media embed","/design-system/components/media-embed",{"title":385,"_path":386,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":388,"_path":389,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":391,"_path":392,"layout":13},"Option button","/design-system/components/option-button",{"title":394,"_path":395,"layout":13},"Page action","/design-system/components/page-action",{"title":397,"_path":398,"layout":13},"Pagination","/design-system/components/pagination",{"title":400,"_path":401,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":403,"_path":404,"layout":13},"Profile","/design-system/components/profile",{"title":406,"_path":407,"layout":13},"Radio button","/design-system/components/radio-button",{"title":409,"_path":410,"layout":13},"Related links","/design-system/components/related-links",{"title":412,"_path":413,"layout":13},"Results listing","/design-system/components/results-listing",{"title":179,"_path":178,"layout":13},{"title":11,"_path":7,"layout":13},{"title":185,"_path":184,"layout":13},{"title":418,"_path":419,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":421,"_path":422,"layout":13},"Table","/design-system/components/table",{"title":424,"_path":425,"layout":13},"Tabs","/design-system/components/tabs",{"title":427,"_path":428,"layout":13},"Tag","/design-system/components/tag",{"title":430,"_path":431,"layout":13},"Text area","/design-system/components/text-area",{"title":433,"_path":434,"layout":13},"Timeline","/design-system/components/timeline",{"title":436,"_path":437,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":439,"_path":440,"children":441,"layout":13},"Ripple Framework","/framework",[442,443,461,483],{"title":439,"_path":440,"layout":13},{"title":444,"_path":445,"children":446},"Key Concepts","/framework/key-concepts",[447,449,452,455,458],{"title":254,"_path":448,"layout":13},"/framework/key-concepts/nuxt",{"title":450,"_path":451,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":453,"_path":454,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":456,"_path":457,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":459,"_path":460,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":462,"_path":463,"children":464},"Guides","/framework/guides",[465,468,471,474,477,480],{"title":466,"_path":467,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":469,"_path":470,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":472,"_path":473,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":475,"_path":476,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":478,"_path":479,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":481,"_path":482,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":484,"_path":485,"layout":13},"Core modules","/framework/core-modules",["Reactive",487],["Set"],["Reactive",489],{"module-navigation":490},null,true,1714695652755]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/social-share/_payload.json b/design-system/components/social-share/_payload.json
index 812639aa81..95a9daf095 100644
--- a/design-system/components/social-share/_payload.json
+++ b/design-system/components/social-share/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":104,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695154704]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":104,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695652773]
\ No newline at end of file
diff --git a/design-system/components/social-share/index.html b/design-system/components/social-share/index.html
index 1023ab8a88..b6a56687d4 100644
--- a/design-system/components/social-share/index.html
+++ b/design-system/components/social-share/index.html
@@ -28,63 +28,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -96,8 +96,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Social share</h1><p class="rpl-type-p-large" data-v-3163c6df>The Social share component shows a list of links to help users to share pages to social media.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use social share to let users share pages to their own social media channels.<!--]--></p><p><!--[-->It uses the social media icons to:<!--]--></p><ul><!--[--><li><!--[-->provide extra context<!--]--></li><li><!--[-->distinguish between the different social media channels.<!--]--></li><!--]--></ul><p><!--[-->The link labels should clearly indicate the platform the user is sharing the page to.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-social-share--social-share&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-social-share--social-share&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use it to enable users to share pages to social media.<!--]--></li><li><!--[-->Place in sidebar section of pages.<!--]--></li><li><!--[-->Link labels should be the social media platform name.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t use for links to sites that aren&#39;t social media channels.<!--]--></li><li><!--[-->Avoid placing in a page&#39;s body section.<!--]--></li><li><!--[-->Don&#39;t use with labels that aren&#39;t social media platform names.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Social share uses colour for:<!--]--></p><ul><!--[--><li><!--[-->indicating an action to users<!--]--></li><li><!--[-->icons.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-social-share--social-share&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-social-share--social-share&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/social-share.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/social-share/_payload.json">[{"state":1,"once":494,"_errors":496,"serverRendered":499,"path":7,"prerenderedAt":500},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":183,"$sdd-globals":199,"$sdd-navigation":201},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/social-share":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":178,"_id":179,"_source":180,"_file":181,"_extension":182},"/design-system/components/social-share","components",false,"","Social share","The Social share component shows a list of links to help users to share pages to social media.","page","Core",{"type":16,"children":17,"toc":169},"root",[18,27,33,38,53,58,63,70,88,94,112,116,122,127,140,147],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use social share to let users share pages to their own social media channels.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"It uses the social media icons to:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"provide extra context",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"distinguish between the different social media channels.",{"type":19,"tag":28,"props":54,"children":55},{},[56],{"type":25,"value":57},"The link labels should clearly indicate the platform the user is sharing the page to.",{"type":19,"tag":59,"props":60,"children":62},"docs-example",{"id":61},"core-navigation-social-share--social-share",[],{"type":19,"tag":64,"props":65,"children":67},"h3",{"id":66},"when-and-how-to-use",[68],{"type":25,"value":69},"When and how to use",{"type":19,"tag":39,"props":71,"children":72},{},[73,78,83],{"type":19,"tag":43,"props":74,"children":75},{},[76],{"type":25,"value":77},"Use it to enable users to share pages to social media.",{"type":19,"tag":43,"props":79,"children":80},{},[81],{"type":25,"value":82},"Place in sidebar section of pages.",{"type":19,"tag":43,"props":84,"children":85},{},[86],{"type":25,"value":87},"Link labels should be the social media platform name.",{"type":19,"tag":64,"props":89,"children":91},{"id":90},"when-and-how-not-to-use",[92],{"type":25,"value":93},"When and how not to use",{"type":19,"tag":39,"props":95,"children":96},{},[97,102,107],{"type":19,"tag":43,"props":98,"children":99},{},[100],{"type":25,"value":101},"Don't use for links to sites that aren't social media channels.",{"type":19,"tag":43,"props":103,"children":104},{},[105],{"type":25,"value":106},"Avoid placing in a page's body section.",{"type":19,"tag":43,"props":108,"children":109},{},[110],{"type":25,"value":111},"Don't use with labels that aren't social media platform names.",{"type":19,"tag":113,"props":114,"children":115},"hr",{},[],{"type":19,"tag":20,"props":117,"children":119},{"id":118},"theming",[120],{"type":25,"value":121},"Theming",{"type":19,"tag":28,"props":123,"children":124},{},[125],{"type":25,"value":126},"Social share uses colour for:",{"type":19,"tag":39,"props":128,"children":129},{},[130,135],{"type":19,"tag":43,"props":131,"children":132},{},[133],{"type":25,"value":134},"indicating an action to users",{"type":19,"tag":43,"props":136,"children":137},{},[138],{"type":25,"value":139},"icons.",{"type":19,"tag":141,"props":142,"children":143},"docs-theme-chooser",{},[144],{"type":19,"tag":59,"props":145,"children":146},{"id":61},[],{"type":19,"tag":28,"props":148,"children":149},{},[150,152,159,161,167],{"type":25,"value":151},"To create your own theme see ",{"type":19,"tag":153,"props":154,"children":156},"a",{"href":155},"/design-system/design/theming-guidance-for-designers",[157],{"type":25,"value":158},"theming guidance for designers",{"type":25,"value":160}," or ",{"type":19,"tag":153,"props":162,"children":164},{"href":163},"/design-system/develop/theming",[165],{"type":25,"value":166},"theming guidance for developers",{"type":25,"value":168},".",{"title":10,"searchDepth":170,"depth":170,"links":171},2,[172,177],{"id":22,"depth":170,"text":26,"children":173},[174,176],{"id":66,"depth":175,"text":69},3,{"id":90,"depth":175,"text":93},{"id":118,"depth":170,"text":121},"markdown","content:design-system:5.components:social-share.md","content","design-system/5.components/social-share.md","md",["ShallowRef",184],["ShallowReactive",185],{"/design-system/components/social-share":186},[187,193],{"_path":188,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":189,"description":190,"layout":13,"label":14,"_type":178,"_id":191,"_source":180,"_file":192,"_extension":182},"/design-system/components/skip-link","Skip link","The Skip link component makes your page more accessible and easier to navigate, by helping keyboard users skip to the main content on a page.","content:design-system:5.components:skip-link.md","design-system/5.components/skip-link.md",{"_path":194,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":195,"description":196,"layout":13,"label":14,"_type":178,"_id":197,"_source":180,"_file":198,"_extension":182},"/design-system/components/statistics-grid","Statistics grid","The Statistics grid component shows a summary of 2 to 8 key statistics in a grid layout.","content:design-system:5.components:statistics-grid.md","design-system/5.components/statistics-grid.md",["ShallowRef",200],{},[202,207,446],{"title":203,"_path":204,"icon":205,"layout":206},"Ripple Design System","/","carbon:home","home",{"title":208,"_path":209,"children":210},"Design System","/design-system",[211,227,242,270,304],{"title":212,"_path":213,"children":214},"About","/design-system/about",[215,218,221,224],{"title":216,"_path":217,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":219,"_path":220,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":222,"_path":223,"layout":13},"Support","/design-system/about/getting-support",{"title":225,"_path":226,"layout":13},"Contributing","/design-system/about/contributing",{"title":228,"_path":229,"children":230},"Design","/design-system/design",[231,234,237,240],{"title":232,"_path":233,"layout":13},"Getting started","/design-system/design/getting-started",{"title":235,"_path":236,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":238,"_path":239,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":241,"_path":155,"layout":13},"Theming guidance for designers",{"title":243,"_path":244,"children":245},"Develop","/design-system/develop",[246,248,250,252],{"title":232,"_path":247,"layout":13},"/design-system/develop/getting-started",{"title":225,"_path":249,"layout":13},"/design-system/develop/contributing",{"title":251,"_path":163,"layout":13},"Theme and brand application",{"title":26,"_path":253,"children":254,"layout":13},"/design-system/develop/usage",[255,258,261,264,267],{"title":256,"_path":257,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":259,"_path":260,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":262,"_path":263,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":265,"_path":266,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":268,"_path":269,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":271,"_path":272,"children":273},"Styles","/design-system/styles",[274,277,280,283,286,289,292,295,298,301],{"title":275,"_path":276,"layout":13},"Colour","/design-system/styles/colour",{"title":278,"_path":279,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":281,"_path":282,"layout":13},"Grid","/design-system/styles/grid",{"title":284,"_path":285,"layout":13},"Icons","/design-system/styles/icons",{"title":287,"_path":288,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":290,"_path":291,"layout":13},"Layout","/design-system/styles/layout",{"title":293,"_path":294,"layout":13},"Logo","/design-system/styles/logo",{"title":296,"_path":297,"layout":13},"Motion","/design-system/styles/motion",{"title":299,"_path":300,"layout":13},"Spacing","/design-system/styles/spacing",{"title":302,"_path":303,"layout":13},"Typography","/design-system/styles/typography",{"title":305,"_path":306,"children":307},"Components","/design-system/components",[308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,426,427,428,431,434,437,440,443],{"title":309,"_path":310,"layout":13},"Accordion","/design-system/components/accordion",{"title":312,"_path":313,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":315,"_path":316,"layout":13},"Alert","/design-system/components/alert",{"title":318,"_path":319,"layout":13},"Block quote","/design-system/components/block-quote",{"title":321,"_path":322,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":324,"_path":325,"layout":13},"Button","/design-system/components/button",{"title":327,"_path":328,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":330,"_path":331,"layout":13},"Callout","/design-system/components/callout",{"title":333,"_path":334,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":336,"_path":337,"layout":13},"Card","/design-system/components/card",{"title":339,"_path":340,"layout":13},"Carousel","/design-system/components/carousel",{"title":342,"_path":343,"layout":13},"Category grid","/design-system/components/category-grid",{"title":345,"_path":346,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":348,"_path":349,"layout":13},"Chip","/design-system/components/chip",{"title":351,"_path":352,"layout":13},"Contact us","/design-system/components/contact-us",{"title":354,"_path":355,"layout":13},"Date input","/design-system/components/date-input",{"title":357,"_path":358,"layout":13},"Detail list","/design-system/components/detail-list",{"title":360,"_path":361,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":363,"_path":364,"layout":13},"File","/design-system/components/file",{"title":366,"_path":367,"layout":13},"Footer","/design-system/components/footer",{"title":369,"_path":370,"layout":13},"Form","/design-system/components/form",{"title":372,"_path":373,"layout":13},"Form alert","/design-system/components/form-alert",{"title":375,"_path":376,"layout":13},"Header","/design-system/components/header",{"title":378,"_path":379,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":381,"_path":382,"layout":13},"Input field","/design-system/components/input-field",{"title":384,"_path":385,"layout":13},"Key dates","/design-system/components/key-dates",{"title":387,"_path":388,"layout":13},"Media","/design-system/components/media",{"title":390,"_path":391,"layout":13},"Media embed","/design-system/components/media-embed",{"title":393,"_path":394,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":396,"_path":397,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":399,"_path":400,"layout":13},"Option button","/design-system/components/option-button",{"title":402,"_path":403,"layout":13},"Page action","/design-system/components/page-action",{"title":405,"_path":406,"layout":13},"Pagination","/design-system/components/pagination",{"title":408,"_path":409,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":411,"_path":412,"layout":13},"Profile","/design-system/components/profile",{"title":414,"_path":415,"layout":13},"Radio button","/design-system/components/radio-button",{"title":417,"_path":418,"layout":13},"Related links","/design-system/components/related-links",{"title":420,"_path":421,"layout":13},"Results listing","/design-system/components/results-listing",{"title":423,"_path":424,"layout":13},"Search bar","/design-system/components/search-bar",{"title":189,"_path":188,"layout":13},{"title":11,"_path":7,"layout":13},{"title":195,"_path":194,"layout":13},{"title":429,"_path":430,"layout":13},"Table","/design-system/components/table",{"title":432,"_path":433,"layout":13},"Tabs","/design-system/components/tabs",{"title":435,"_path":436,"layout":13},"Tag","/design-system/components/tag",{"title":438,"_path":439,"layout":13},"Text area","/design-system/components/text-area",{"title":441,"_path":442,"layout":13},"Timeline","/design-system/components/timeline",{"title":444,"_path":445,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":447,"_path":448,"children":449,"layout":13},"Ripple Framework","/framework",[450,451,469,491],{"title":447,"_path":448,"layout":13},{"title":452,"_path":453,"children":454},"Key Concepts","/framework/key-concepts",[455,457,460,463,466],{"title":262,"_path":456,"layout":13},"/framework/key-concepts/nuxt",{"title":458,"_path":459,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":461,"_path":462,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":464,"_path":465,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":467,"_path":468,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":470,"_path":471,"children":472},"Guides","/framework/guides",[473,476,479,482,485,488],{"title":474,"_path":475,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":477,"_path":478,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":480,"_path":481,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":483,"_path":484,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":486,"_path":487,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":489,"_path":490,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":492,"_path":493,"layout":13},"Core modules","/framework/core-modules",["Reactive",495],["Set"],["Reactive",497],{"module-navigation":498},null,true,1714695154704]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Social share</h1><p class="rpl-type-p-large" data-v-3163c6df>The Social share component shows a list of links to help users to share pages to social media.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use social share to let users share pages to their own social media channels.<!--]--></p><p><!--[-->It uses the social media icons to:<!--]--></p><ul><!--[--><li><!--[-->provide extra context<!--]--></li><li><!--[-->distinguish between the different social media channels.<!--]--></li><!--]--></ul><p><!--[-->The link labels should clearly indicate the platform the user is sharing the page to.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-social-share--social-share&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-social-share--social-share&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use it to enable users to share pages to social media.<!--]--></li><li><!--[-->Place in sidebar section of pages.<!--]--></li><li><!--[-->Link labels should be the social media platform name.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t use for links to sites that aren&#39;t social media channels.<!--]--></li><li><!--[-->Avoid placing in a page&#39;s body section.<!--]--></li><li><!--[-->Don&#39;t use with labels that aren&#39;t social media platform names.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Social share uses colour for:<!--]--></p><ul><!--[--><li><!--[-->indicating an action to users<!--]--></li><li><!--[-->icons.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-social-share--social-share&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-social-share--social-share&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/social-share.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/social-share/_payload.json">[{"state":1,"once":494,"_errors":496,"serverRendered":499,"path":7,"prerenderedAt":500},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":183,"$sdd-globals":199,"$sdd-navigation":201},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/social-share":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":178,"_id":179,"_source":180,"_file":181,"_extension":182},"/design-system/components/social-share","components",false,"","Social share","The Social share component shows a list of links to help users to share pages to social media.","page","Core",{"type":16,"children":17,"toc":169},"root",[18,27,33,38,53,58,63,70,88,94,112,116,122,127,140,147],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use social share to let users share pages to their own social media channels.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"It uses the social media icons to:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"provide extra context",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"distinguish between the different social media channels.",{"type":19,"tag":28,"props":54,"children":55},{},[56],{"type":25,"value":57},"The link labels should clearly indicate the platform the user is sharing the page to.",{"type":19,"tag":59,"props":60,"children":62},"docs-example",{"id":61},"core-navigation-social-share--social-share",[],{"type":19,"tag":64,"props":65,"children":67},"h3",{"id":66},"when-and-how-to-use",[68],{"type":25,"value":69},"When and how to use",{"type":19,"tag":39,"props":71,"children":72},{},[73,78,83],{"type":19,"tag":43,"props":74,"children":75},{},[76],{"type":25,"value":77},"Use it to enable users to share pages to social media.",{"type":19,"tag":43,"props":79,"children":80},{},[81],{"type":25,"value":82},"Place in sidebar section of pages.",{"type":19,"tag":43,"props":84,"children":85},{},[86],{"type":25,"value":87},"Link labels should be the social media platform name.",{"type":19,"tag":64,"props":89,"children":91},{"id":90},"when-and-how-not-to-use",[92],{"type":25,"value":93},"When and how not to use",{"type":19,"tag":39,"props":95,"children":96},{},[97,102,107],{"type":19,"tag":43,"props":98,"children":99},{},[100],{"type":25,"value":101},"Don't use for links to sites that aren't social media channels.",{"type":19,"tag":43,"props":103,"children":104},{},[105],{"type":25,"value":106},"Avoid placing in a page's body section.",{"type":19,"tag":43,"props":108,"children":109},{},[110],{"type":25,"value":111},"Don't use with labels that aren't social media platform names.",{"type":19,"tag":113,"props":114,"children":115},"hr",{},[],{"type":19,"tag":20,"props":117,"children":119},{"id":118},"theming",[120],{"type":25,"value":121},"Theming",{"type":19,"tag":28,"props":123,"children":124},{},[125],{"type":25,"value":126},"Social share uses colour for:",{"type":19,"tag":39,"props":128,"children":129},{},[130,135],{"type":19,"tag":43,"props":131,"children":132},{},[133],{"type":25,"value":134},"indicating an action to users",{"type":19,"tag":43,"props":136,"children":137},{},[138],{"type":25,"value":139},"icons.",{"type":19,"tag":141,"props":142,"children":143},"docs-theme-chooser",{},[144],{"type":19,"tag":59,"props":145,"children":146},{"id":61},[],{"type":19,"tag":28,"props":148,"children":149},{},[150,152,159,161,167],{"type":25,"value":151},"To create your own theme see ",{"type":19,"tag":153,"props":154,"children":156},"a",{"href":155},"/design-system/design/theming-guidance-for-designers",[157],{"type":25,"value":158},"theming guidance for designers",{"type":25,"value":160}," or ",{"type":19,"tag":153,"props":162,"children":164},{"href":163},"/design-system/develop/theming",[165],{"type":25,"value":166},"theming guidance for developers",{"type":25,"value":168},".",{"title":10,"searchDepth":170,"depth":170,"links":171},2,[172,177],{"id":22,"depth":170,"text":26,"children":173},[174,176],{"id":66,"depth":175,"text":69},3,{"id":90,"depth":175,"text":93},{"id":118,"depth":170,"text":121},"markdown","content:design-system:5.components:social-share.md","content","design-system/5.components/social-share.md","md",["ShallowRef",184],["ShallowReactive",185],{"/design-system/components/social-share":186},[187,193],{"_path":188,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":189,"description":190,"layout":13,"label":14,"_type":178,"_id":191,"_source":180,"_file":192,"_extension":182},"/design-system/components/skip-link","Skip link","The Skip link component makes your page more accessible and easier to navigate, by helping keyboard users skip to the main content on a page.","content:design-system:5.components:skip-link.md","design-system/5.components/skip-link.md",{"_path":194,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":195,"description":196,"layout":13,"label":14,"_type":178,"_id":197,"_source":180,"_file":198,"_extension":182},"/design-system/components/statistics-grid","Statistics grid","The Statistics grid component shows a summary of 2 to 8 key statistics in a grid layout.","content:design-system:5.components:statistics-grid.md","design-system/5.components/statistics-grid.md",["ShallowRef",200],{},[202,207,446],{"title":203,"_path":204,"icon":205,"layout":206},"Ripple Design System","/","carbon:home","home",{"title":208,"_path":209,"children":210},"Design System","/design-system",[211,227,242,270,304],{"title":212,"_path":213,"children":214},"About","/design-system/about",[215,218,221,224],{"title":216,"_path":217,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":219,"_path":220,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":222,"_path":223,"layout":13},"Support","/design-system/about/getting-support",{"title":225,"_path":226,"layout":13},"Contributing","/design-system/about/contributing",{"title":228,"_path":229,"children":230},"Design","/design-system/design",[231,234,237,240],{"title":232,"_path":233,"layout":13},"Getting started","/design-system/design/getting-started",{"title":235,"_path":236,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":238,"_path":239,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":241,"_path":155,"layout":13},"Theming guidance for designers",{"title":243,"_path":244,"children":245},"Develop","/design-system/develop",[246,248,250,252],{"title":232,"_path":247,"layout":13},"/design-system/develop/getting-started",{"title":225,"_path":249,"layout":13},"/design-system/develop/contributing",{"title":251,"_path":163,"layout":13},"Theme and brand application",{"title":26,"_path":253,"children":254,"layout":13},"/design-system/develop/usage",[255,258,261,264,267],{"title":256,"_path":257,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":259,"_path":260,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":262,"_path":263,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":265,"_path":266,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":268,"_path":269,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":271,"_path":272,"children":273},"Styles","/design-system/styles",[274,277,280,283,286,289,292,295,298,301],{"title":275,"_path":276,"layout":13},"Colour","/design-system/styles/colour",{"title":278,"_path":279,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":281,"_path":282,"layout":13},"Grid","/design-system/styles/grid",{"title":284,"_path":285,"layout":13},"Icons","/design-system/styles/icons",{"title":287,"_path":288,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":290,"_path":291,"layout":13},"Layout","/design-system/styles/layout",{"title":293,"_path":294,"layout":13},"Logo","/design-system/styles/logo",{"title":296,"_path":297,"layout":13},"Motion","/design-system/styles/motion",{"title":299,"_path":300,"layout":13},"Spacing","/design-system/styles/spacing",{"title":302,"_path":303,"layout":13},"Typography","/design-system/styles/typography",{"title":305,"_path":306,"children":307},"Components","/design-system/components",[308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,426,427,428,431,434,437,440,443],{"title":309,"_path":310,"layout":13},"Accordion","/design-system/components/accordion",{"title":312,"_path":313,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":315,"_path":316,"layout":13},"Alert","/design-system/components/alert",{"title":318,"_path":319,"layout":13},"Block quote","/design-system/components/block-quote",{"title":321,"_path":322,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":324,"_path":325,"layout":13},"Button","/design-system/components/button",{"title":327,"_path":328,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":330,"_path":331,"layout":13},"Callout","/design-system/components/callout",{"title":333,"_path":334,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":336,"_path":337,"layout":13},"Card","/design-system/components/card",{"title":339,"_path":340,"layout":13},"Carousel","/design-system/components/carousel",{"title":342,"_path":343,"layout":13},"Category grid","/design-system/components/category-grid",{"title":345,"_path":346,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":348,"_path":349,"layout":13},"Chip","/design-system/components/chip",{"title":351,"_path":352,"layout":13},"Contact us","/design-system/components/contact-us",{"title":354,"_path":355,"layout":13},"Date input","/design-system/components/date-input",{"title":357,"_path":358,"layout":13},"Detail list","/design-system/components/detail-list",{"title":360,"_path":361,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":363,"_path":364,"layout":13},"File","/design-system/components/file",{"title":366,"_path":367,"layout":13},"Footer","/design-system/components/footer",{"title":369,"_path":370,"layout":13},"Form","/design-system/components/form",{"title":372,"_path":373,"layout":13},"Form alert","/design-system/components/form-alert",{"title":375,"_path":376,"layout":13},"Header","/design-system/components/header",{"title":378,"_path":379,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":381,"_path":382,"layout":13},"Input field","/design-system/components/input-field",{"title":384,"_path":385,"layout":13},"Key dates","/design-system/components/key-dates",{"title":387,"_path":388,"layout":13},"Media","/design-system/components/media",{"title":390,"_path":391,"layout":13},"Media embed","/design-system/components/media-embed",{"title":393,"_path":394,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":396,"_path":397,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":399,"_path":400,"layout":13},"Option button","/design-system/components/option-button",{"title":402,"_path":403,"layout":13},"Page action","/design-system/components/page-action",{"title":405,"_path":406,"layout":13},"Pagination","/design-system/components/pagination",{"title":408,"_path":409,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":411,"_path":412,"layout":13},"Profile","/design-system/components/profile",{"title":414,"_path":415,"layout":13},"Radio button","/design-system/components/radio-button",{"title":417,"_path":418,"layout":13},"Related links","/design-system/components/related-links",{"title":420,"_path":421,"layout":13},"Results listing","/design-system/components/results-listing",{"title":423,"_path":424,"layout":13},"Search bar","/design-system/components/search-bar",{"title":189,"_path":188,"layout":13},{"title":11,"_path":7,"layout":13},{"title":195,"_path":194,"layout":13},{"title":429,"_path":430,"layout":13},"Table","/design-system/components/table",{"title":432,"_path":433,"layout":13},"Tabs","/design-system/components/tabs",{"title":435,"_path":436,"layout":13},"Tag","/design-system/components/tag",{"title":438,"_path":439,"layout":13},"Text area","/design-system/components/text-area",{"title":441,"_path":442,"layout":13},"Timeline","/design-system/components/timeline",{"title":444,"_path":445,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":447,"_path":448,"children":449,"layout":13},"Ripple Framework","/framework",[450,451,469,491],{"title":447,"_path":448,"layout":13},{"title":452,"_path":453,"children":454},"Key Concepts","/framework/key-concepts",[455,457,460,463,466],{"title":262,"_path":456,"layout":13},"/framework/key-concepts/nuxt",{"title":458,"_path":459,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":461,"_path":462,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":464,"_path":465,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":467,"_path":468,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":470,"_path":471,"children":472},"Guides","/framework/guides",[473,476,479,482,485,488],{"title":474,"_path":475,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":477,"_path":478,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":480,"_path":481,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":483,"_path":484,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":486,"_path":487,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":489,"_path":490,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":492,"_path":493,"layout":13},"Core modules","/framework/core-modules",["Reactive",495],["Set"],["Reactive",497],{"module-navigation":498},null,true,1714695652773]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/statistics-grid/_payload.json b/design-system/components/statistics-grid/_payload.json
index 9e1fc71262..ab8a8b267d 100644
--- a/design-system/components/statistics-grid/_payload.json
+++ b/design-system/components/statistics-grid/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":104,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695154709]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":104,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695652885]
\ No newline at end of file
diff --git a/design-system/components/statistics-grid/index.html b/design-system/components/statistics-grid/index.html
index cc6704a694..485050d581 100644
--- a/design-system/components/statistics-grid/index.html
+++ b/design-system/components/statistics-grid/index.html
@@ -27,60 +27,60 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -92,8 +92,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Statistics grid</h1><p class="rpl-type-p-large" data-v-3163c6df>The Statistics grid component shows a summary of 2 to 8 key statistics in a grid layout.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the statistics grid to present a user with multiple pieces of key information. This can help the user to determine if a page is relevant to them or not.<!--]--></p><p><!--[-->Each cell features:<!--]--></p><ul><!--[--><li><!--[-->a key statistic<!--]--></li><li><!--[-->content to give the statistic context.<!--]--></li><!--]--></ul><p><!--[-->A statistics grid can act as a summary to help users view multiple related pieces of content.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-stats-grid--on-light&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-stats-grid--on-light&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use text or numbers in the content.<!--]--></li><li><!--[-->Give a high-level summary of key information.<!--]--></li><li><!--[-->The grid will always span the full available width.<!--]--></li><li><!--[-->Place in the body section of pages.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t use with under 2 or over 8 statistics.<!--]--></li><li><!--[-->Don&#39;t overload with content.<!--]--></li><li><!--[-->Don&#39;t use when you need a large amount of text for context.<!--]--></li><li><!--[-->Don&#39;t use images or graphics.<!--]--></li><li><!--[-->Don&#39;t add links.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->The statistic grid has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, for white backgrounds<!--]--></li><li><!--[-->reverse, for neutral backgrounds.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-stats-grid--on-light&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-stats-grid--on-light&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="reverse" data-v-ea525968><a href="#reverse" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Reverse<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-stats-grid--on-dark&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-stats-grid--on-dark&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/statistics-grid.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/statistics-grid/_payload.json">[{"state":1,"once":504,"_errors":506,"serverRendered":509,"path":7,"prerenderedAt":510},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":191,"$sdd-globals":207,"$sdd-navigation":209},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/statistics-grid":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":186,"_id":187,"_source":188,"_file":189,"_extension":190},"/design-system/components/statistics-grid","components",false,"","Statistics grid","The Statistics grid component shows a summary of 2 to 8 key statistics in a grid layout.","page","Core",{"type":16,"children":17,"toc":174},"root",[18,27,33,38,53,58,63,70,93,99,127,131,137,142,155,161,164,170],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use the statistics grid to present a user with multiple pieces of key information. This can help the user to determine if a page is relevant to them or not.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Each cell features:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"a key statistic",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"content to give the statistic context.",{"type":19,"tag":28,"props":54,"children":55},{},[56],{"type":25,"value":57},"A statistics grid can act as a summary to help users view multiple related pieces of content.",{"type":19,"tag":59,"props":60,"children":62},"docs-example",{"id":61},"core-containers-stats-grid--on-light",[],{"type":19,"tag":64,"props":65,"children":67},"h3",{"id":66},"when-and-how-to-use",[68],{"type":25,"value":69},"When and how to use",{"type":19,"tag":39,"props":71,"children":72},{},[73,78,83,88],{"type":19,"tag":43,"props":74,"children":75},{},[76],{"type":25,"value":77},"Use text or numbers in the content.",{"type":19,"tag":43,"props":79,"children":80},{},[81],{"type":25,"value":82},"Give a high-level summary of key information.",{"type":19,"tag":43,"props":84,"children":85},{},[86],{"type":25,"value":87},"The grid will always span the full available width.",{"type":19,"tag":43,"props":89,"children":90},{},[91],{"type":25,"value":92},"Place in the body section of pages.",{"type":19,"tag":64,"props":94,"children":96},{"id":95},"when-and-how-not-to-use",[97],{"type":25,"value":98},"When and how not to use",{"type":19,"tag":39,"props":100,"children":101},{},[102,107,112,117,122],{"type":19,"tag":43,"props":103,"children":104},{},[105],{"type":25,"value":106},"Don't use with under 2 or over 8 statistics.",{"type":19,"tag":43,"props":108,"children":109},{},[110],{"type":25,"value":111},"Don't overload with content.",{"type":19,"tag":43,"props":113,"children":114},{},[115],{"type":25,"value":116},"Don't use when you need a large amount of text for context.",{"type":19,"tag":43,"props":118,"children":119},{},[120],{"type":25,"value":121},"Don't use images or graphics.",{"type":19,"tag":43,"props":123,"children":124},{},[125],{"type":25,"value":126},"Don't add links.",{"type":19,"tag":128,"props":129,"children":130},"hr",{},[],{"type":19,"tag":20,"props":132,"children":134},{"id":133},"variants",[135],{"type":25,"value":136},"Variants",{"type":19,"tag":28,"props":138,"children":139},{},[140],{"type":25,"value":141},"The statistic grid has 2 variants:",{"type":19,"tag":39,"props":143,"children":144},{},[145,150],{"type":19,"tag":43,"props":146,"children":147},{},[148],{"type":25,"value":149},"default, for white backgrounds",{"type":19,"tag":43,"props":151,"children":152},{},[153],{"type":25,"value":154},"reverse, for neutral backgrounds.",{"type":19,"tag":64,"props":156,"children":158},{"id":157},"default",[159],{"type":25,"value":160},"Default",{"type":19,"tag":59,"props":162,"children":163},{"id":61},[],{"type":19,"tag":64,"props":165,"children":167},{"id":166},"reverse",[168],{"type":25,"value":169},"Reverse",{"type":19,"tag":59,"props":171,"children":173},{"id":172},"core-containers-stats-grid--on-dark",[],{"title":10,"searchDepth":175,"depth":175,"links":176},2,[177,182],{"id":22,"depth":175,"text":26,"children":178},[179,181],{"id":66,"depth":180,"text":69},3,{"id":95,"depth":180,"text":98},{"id":133,"depth":175,"text":136,"children":183},[184,185],{"id":157,"depth":180,"text":160},{"id":166,"depth":180,"text":169},"markdown","content:design-system:5.components:statistics-grid.md","content","design-system/5.components/statistics-grid.md","md",["ShallowRef",192],["ShallowReactive",193],{"/design-system/components/statistics-grid":194},[195,201],{"_path":196,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":197,"description":198,"layout":13,"label":14,"_type":186,"_id":199,"_source":188,"_file":200,"_extension":190},"/design-system/components/social-share","Social share","The Social share component shows a list of links to help users to share pages to social media.","content:design-system:5.components:social-share.md","design-system/5.components/social-share.md",{"_path":202,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":203,"description":204,"layout":13,"label":14,"_type":186,"_id":205,"_source":188,"_file":206,"_extension":190},"/design-system/components/table","Table","The Table component makes it easier for users to scan and compare data and content.","content:design-system:5.components:table.md","design-system/5.components/table.md",["ShallowRef",208],{},[210,215,456],{"title":211,"_path":212,"icon":213,"layout":214},"Ripple Design System","/","carbon:home","home",{"title":216,"_path":217,"children":218},"Design System","/design-system",[219,235,251,280,314],{"title":220,"_path":221,"children":222},"About","/design-system/about",[223,226,229,232],{"title":224,"_path":225,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":227,"_path":228,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":230,"_path":231,"layout":13},"Support","/design-system/about/getting-support",{"title":233,"_path":234,"layout":13},"Contributing","/design-system/about/contributing",{"title":236,"_path":237,"children":238},"Design","/design-system/design",[239,242,245,248],{"title":240,"_path":241,"layout":13},"Getting started","/design-system/design/getting-started",{"title":243,"_path":244,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":246,"_path":247,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":249,"_path":250,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":252,"_path":253,"children":254},"Develop","/design-system/develop",[255,257,259,262],{"title":240,"_path":256,"layout":13},"/design-system/develop/getting-started",{"title":233,"_path":258,"layout":13},"/design-system/develop/contributing",{"title":260,"_path":261,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":263,"children":264,"layout":13},"/design-system/develop/usage",[265,268,271,274,277],{"title":266,"_path":267,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":269,"_path":270,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":272,"_path":273,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":275,"_path":276,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":278,"_path":279,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":281,"_path":282,"children":283},"Styles","/design-system/styles",[284,287,290,293,296,299,302,305,308,311],{"title":285,"_path":286,"layout":13},"Colour","/design-system/styles/colour",{"title":288,"_path":289,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":291,"_path":292,"layout":13},"Grid","/design-system/styles/grid",{"title":294,"_path":295,"layout":13},"Icons","/design-system/styles/icons",{"title":297,"_path":298,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":300,"_path":301,"layout":13},"Layout","/design-system/styles/layout",{"title":303,"_path":304,"layout":13},"Logo","/design-system/styles/logo",{"title":306,"_path":307,"layout":13},"Motion","/design-system/styles/motion",{"title":309,"_path":310,"layout":13},"Spacing","/design-system/styles/spacing",{"title":312,"_path":313,"layout":13},"Typography","/design-system/styles/typography",{"title":315,"_path":316,"children":317},"Components","/design-system/components",[318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,439,440,441,444,447,450,453],{"title":319,"_path":320,"layout":13},"Accordion","/design-system/components/accordion",{"title":322,"_path":323,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":325,"_path":326,"layout":13},"Alert","/design-system/components/alert",{"title":328,"_path":329,"layout":13},"Block quote","/design-system/components/block-quote",{"title":331,"_path":332,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":334,"_path":335,"layout":13},"Button","/design-system/components/button",{"title":337,"_path":338,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":340,"_path":341,"layout":13},"Callout","/design-system/components/callout",{"title":343,"_path":344,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":346,"_path":347,"layout":13},"Card","/design-system/components/card",{"title":349,"_path":350,"layout":13},"Carousel","/design-system/components/carousel",{"title":352,"_path":353,"layout":13},"Category grid","/design-system/components/category-grid",{"title":355,"_path":356,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":358,"_path":359,"layout":13},"Chip","/design-system/components/chip",{"title":361,"_path":362,"layout":13},"Contact us","/design-system/components/contact-us",{"title":364,"_path":365,"layout":13},"Date input","/design-system/components/date-input",{"title":367,"_path":368,"layout":13},"Detail list","/design-system/components/detail-list",{"title":370,"_path":371,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":373,"_path":374,"layout":13},"File","/design-system/components/file",{"title":376,"_path":377,"layout":13},"Footer","/design-system/components/footer",{"title":379,"_path":380,"layout":13},"Form","/design-system/components/form",{"title":382,"_path":383,"layout":13},"Form alert","/design-system/components/form-alert",{"title":385,"_path":386,"layout":13},"Header","/design-system/components/header",{"title":388,"_path":389,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":391,"_path":392,"layout":13},"Input field","/design-system/components/input-field",{"title":394,"_path":395,"layout":13},"Key dates","/design-system/components/key-dates",{"title":397,"_path":398,"layout":13},"Media","/design-system/components/media",{"title":400,"_path":401,"layout":13},"Media embed","/design-system/components/media-embed",{"title":403,"_path":404,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":406,"_path":407,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":409,"_path":410,"layout":13},"Option button","/design-system/components/option-button",{"title":412,"_path":413,"layout":13},"Page action","/design-system/components/page-action",{"title":415,"_path":416,"layout":13},"Pagination","/design-system/components/pagination",{"title":418,"_path":419,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":421,"_path":422,"layout":13},"Profile","/design-system/components/profile",{"title":424,"_path":425,"layout":13},"Radio button","/design-system/components/radio-button",{"title":427,"_path":428,"layout":13},"Related links","/design-system/components/related-links",{"title":430,"_path":431,"layout":13},"Results listing","/design-system/components/results-listing",{"title":433,"_path":434,"layout":13},"Search bar","/design-system/components/search-bar",{"title":436,"_path":437,"layout":13},"Skip link","/design-system/components/skip-link",{"title":197,"_path":196,"layout":13},{"title":11,"_path":7,"layout":13},{"title":203,"_path":202,"layout":13},{"title":442,"_path":443,"layout":13},"Tabs","/design-system/components/tabs",{"title":445,"_path":446,"layout":13},"Tag","/design-system/components/tag",{"title":448,"_path":449,"layout":13},"Text area","/design-system/components/text-area",{"title":451,"_path":452,"layout":13},"Timeline","/design-system/components/timeline",{"title":454,"_path":455,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":457,"_path":458,"children":459,"layout":13},"Ripple Framework","/framework",[460,461,479,501],{"title":457,"_path":458,"layout":13},{"title":462,"_path":463,"children":464},"Key Concepts","/framework/key-concepts",[465,467,470,473,476],{"title":272,"_path":466,"layout":13},"/framework/key-concepts/nuxt",{"title":468,"_path":469,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":471,"_path":472,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":474,"_path":475,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":477,"_path":478,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":480,"_path":481,"children":482},"Guides","/framework/guides",[483,486,489,492,495,498],{"title":484,"_path":485,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":487,"_path":488,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":490,"_path":491,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":493,"_path":494,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":496,"_path":497,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":499,"_path":500,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":502,"_path":503,"layout":13},"Core modules","/framework/core-modules",["Reactive",505],["Set"],["Reactive",507],{"module-navigation":508},null,true,1714695154709]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Statistics grid</h1><p class="rpl-type-p-large" data-v-3163c6df>The Statistics grid component shows a summary of 2 to 8 key statistics in a grid layout.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use the statistics grid to present a user with multiple pieces of key information. This can help the user to determine if a page is relevant to them or not.<!--]--></p><p><!--[-->Each cell features:<!--]--></p><ul><!--[--><li><!--[-->a key statistic<!--]--></li><li><!--[-->content to give the statistic context.<!--]--></li><!--]--></ul><p><!--[-->A statistics grid can act as a summary to help users view multiple related pieces of content.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-stats-grid--on-light&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-stats-grid--on-light&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use text or numbers in the content.<!--]--></li><li><!--[-->Give a high-level summary of key information.<!--]--></li><li><!--[-->The grid will always span the full available width.<!--]--></li><li><!--[-->Place in the body section of pages.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t use with under 2 or over 8 statistics.<!--]--></li><li><!--[-->Don&#39;t overload with content.<!--]--></li><li><!--[-->Don&#39;t use when you need a large amount of text for context.<!--]--></li><li><!--[-->Don&#39;t use images or graphics.<!--]--></li><li><!--[-->Don&#39;t add links.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->The statistic grid has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, for white backgrounds<!--]--></li><li><!--[-->reverse, for neutral backgrounds.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-stats-grid--on-light&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-stats-grid--on-light&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="reverse" data-v-ea525968><a href="#reverse" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Reverse<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-stats-grid--on-dark&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-stats-grid--on-dark&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/statistics-grid.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/statistics-grid/_payload.json">[{"state":1,"once":504,"_errors":506,"serverRendered":509,"path":7,"prerenderedAt":510},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":191,"$sdd-globals":207,"$sdd-navigation":209},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/statistics-grid":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":186,"_id":187,"_source":188,"_file":189,"_extension":190},"/design-system/components/statistics-grid","components",false,"","Statistics grid","The Statistics grid component shows a summary of 2 to 8 key statistics in a grid layout.","page","Core",{"type":16,"children":17,"toc":174},"root",[18,27,33,38,53,58,63,70,93,99,127,131,137,142,155,161,164,170],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use the statistics grid to present a user with multiple pieces of key information. This can help the user to determine if a page is relevant to them or not.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Each cell features:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"a key statistic",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"content to give the statistic context.",{"type":19,"tag":28,"props":54,"children":55},{},[56],{"type":25,"value":57},"A statistics grid can act as a summary to help users view multiple related pieces of content.",{"type":19,"tag":59,"props":60,"children":62},"docs-example",{"id":61},"core-containers-stats-grid--on-light",[],{"type":19,"tag":64,"props":65,"children":67},"h3",{"id":66},"when-and-how-to-use",[68],{"type":25,"value":69},"When and how to use",{"type":19,"tag":39,"props":71,"children":72},{},[73,78,83,88],{"type":19,"tag":43,"props":74,"children":75},{},[76],{"type":25,"value":77},"Use text or numbers in the content.",{"type":19,"tag":43,"props":79,"children":80},{},[81],{"type":25,"value":82},"Give a high-level summary of key information.",{"type":19,"tag":43,"props":84,"children":85},{},[86],{"type":25,"value":87},"The grid will always span the full available width.",{"type":19,"tag":43,"props":89,"children":90},{},[91],{"type":25,"value":92},"Place in the body section of pages.",{"type":19,"tag":64,"props":94,"children":96},{"id":95},"when-and-how-not-to-use",[97],{"type":25,"value":98},"When and how not to use",{"type":19,"tag":39,"props":100,"children":101},{},[102,107,112,117,122],{"type":19,"tag":43,"props":103,"children":104},{},[105],{"type":25,"value":106},"Don't use with under 2 or over 8 statistics.",{"type":19,"tag":43,"props":108,"children":109},{},[110],{"type":25,"value":111},"Don't overload with content.",{"type":19,"tag":43,"props":113,"children":114},{},[115],{"type":25,"value":116},"Don't use when you need a large amount of text for context.",{"type":19,"tag":43,"props":118,"children":119},{},[120],{"type":25,"value":121},"Don't use images or graphics.",{"type":19,"tag":43,"props":123,"children":124},{},[125],{"type":25,"value":126},"Don't add links.",{"type":19,"tag":128,"props":129,"children":130},"hr",{},[],{"type":19,"tag":20,"props":132,"children":134},{"id":133},"variants",[135],{"type":25,"value":136},"Variants",{"type":19,"tag":28,"props":138,"children":139},{},[140],{"type":25,"value":141},"The statistic grid has 2 variants:",{"type":19,"tag":39,"props":143,"children":144},{},[145,150],{"type":19,"tag":43,"props":146,"children":147},{},[148],{"type":25,"value":149},"default, for white backgrounds",{"type":19,"tag":43,"props":151,"children":152},{},[153],{"type":25,"value":154},"reverse, for neutral backgrounds.",{"type":19,"tag":64,"props":156,"children":158},{"id":157},"default",[159],{"type":25,"value":160},"Default",{"type":19,"tag":59,"props":162,"children":163},{"id":61},[],{"type":19,"tag":64,"props":165,"children":167},{"id":166},"reverse",[168],{"type":25,"value":169},"Reverse",{"type":19,"tag":59,"props":171,"children":173},{"id":172},"core-containers-stats-grid--on-dark",[],{"title":10,"searchDepth":175,"depth":175,"links":176},2,[177,182],{"id":22,"depth":175,"text":26,"children":178},[179,181],{"id":66,"depth":180,"text":69},3,{"id":95,"depth":180,"text":98},{"id":133,"depth":175,"text":136,"children":183},[184,185],{"id":157,"depth":180,"text":160},{"id":166,"depth":180,"text":169},"markdown","content:design-system:5.components:statistics-grid.md","content","design-system/5.components/statistics-grid.md","md",["ShallowRef",192],["ShallowReactive",193],{"/design-system/components/statistics-grid":194},[195,201],{"_path":196,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":197,"description":198,"layout":13,"label":14,"_type":186,"_id":199,"_source":188,"_file":200,"_extension":190},"/design-system/components/social-share","Social share","The Social share component shows a list of links to help users to share pages to social media.","content:design-system:5.components:social-share.md","design-system/5.components/social-share.md",{"_path":202,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":203,"description":204,"layout":13,"label":14,"_type":186,"_id":205,"_source":188,"_file":206,"_extension":190},"/design-system/components/table","Table","The Table component makes it easier for users to scan and compare data and content.","content:design-system:5.components:table.md","design-system/5.components/table.md",["ShallowRef",208],{},[210,215,456],{"title":211,"_path":212,"icon":213,"layout":214},"Ripple Design System","/","carbon:home","home",{"title":216,"_path":217,"children":218},"Design System","/design-system",[219,235,251,280,314],{"title":220,"_path":221,"children":222},"About","/design-system/about",[223,226,229,232],{"title":224,"_path":225,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":227,"_path":228,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":230,"_path":231,"layout":13},"Support","/design-system/about/getting-support",{"title":233,"_path":234,"layout":13},"Contributing","/design-system/about/contributing",{"title":236,"_path":237,"children":238},"Design","/design-system/design",[239,242,245,248],{"title":240,"_path":241,"layout":13},"Getting started","/design-system/design/getting-started",{"title":243,"_path":244,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":246,"_path":247,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":249,"_path":250,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":252,"_path":253,"children":254},"Develop","/design-system/develop",[255,257,259,262],{"title":240,"_path":256,"layout":13},"/design-system/develop/getting-started",{"title":233,"_path":258,"layout":13},"/design-system/develop/contributing",{"title":260,"_path":261,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":263,"children":264,"layout":13},"/design-system/develop/usage",[265,268,271,274,277],{"title":266,"_path":267,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":269,"_path":270,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":272,"_path":273,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":275,"_path":276,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":278,"_path":279,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":281,"_path":282,"children":283},"Styles","/design-system/styles",[284,287,290,293,296,299,302,305,308,311],{"title":285,"_path":286,"layout":13},"Colour","/design-system/styles/colour",{"title":288,"_path":289,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":291,"_path":292,"layout":13},"Grid","/design-system/styles/grid",{"title":294,"_path":295,"layout":13},"Icons","/design-system/styles/icons",{"title":297,"_path":298,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":300,"_path":301,"layout":13},"Layout","/design-system/styles/layout",{"title":303,"_path":304,"layout":13},"Logo","/design-system/styles/logo",{"title":306,"_path":307,"layout":13},"Motion","/design-system/styles/motion",{"title":309,"_path":310,"layout":13},"Spacing","/design-system/styles/spacing",{"title":312,"_path":313,"layout":13},"Typography","/design-system/styles/typography",{"title":315,"_path":316,"children":317},"Components","/design-system/components",[318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,439,440,441,444,447,450,453],{"title":319,"_path":320,"layout":13},"Accordion","/design-system/components/accordion",{"title":322,"_path":323,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":325,"_path":326,"layout":13},"Alert","/design-system/components/alert",{"title":328,"_path":329,"layout":13},"Block quote","/design-system/components/block-quote",{"title":331,"_path":332,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":334,"_path":335,"layout":13},"Button","/design-system/components/button",{"title":337,"_path":338,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":340,"_path":341,"layout":13},"Callout","/design-system/components/callout",{"title":343,"_path":344,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":346,"_path":347,"layout":13},"Card","/design-system/components/card",{"title":349,"_path":350,"layout":13},"Carousel","/design-system/components/carousel",{"title":352,"_path":353,"layout":13},"Category grid","/design-system/components/category-grid",{"title":355,"_path":356,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":358,"_path":359,"layout":13},"Chip","/design-system/components/chip",{"title":361,"_path":362,"layout":13},"Contact us","/design-system/components/contact-us",{"title":364,"_path":365,"layout":13},"Date input","/design-system/components/date-input",{"title":367,"_path":368,"layout":13},"Detail list","/design-system/components/detail-list",{"title":370,"_path":371,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":373,"_path":374,"layout":13},"File","/design-system/components/file",{"title":376,"_path":377,"layout":13},"Footer","/design-system/components/footer",{"title":379,"_path":380,"layout":13},"Form","/design-system/components/form",{"title":382,"_path":383,"layout":13},"Form alert","/design-system/components/form-alert",{"title":385,"_path":386,"layout":13},"Header","/design-system/components/header",{"title":388,"_path":389,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":391,"_path":392,"layout":13},"Input field","/design-system/components/input-field",{"title":394,"_path":395,"layout":13},"Key dates","/design-system/components/key-dates",{"title":397,"_path":398,"layout":13},"Media","/design-system/components/media",{"title":400,"_path":401,"layout":13},"Media embed","/design-system/components/media-embed",{"title":403,"_path":404,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":406,"_path":407,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":409,"_path":410,"layout":13},"Option button","/design-system/components/option-button",{"title":412,"_path":413,"layout":13},"Page action","/design-system/components/page-action",{"title":415,"_path":416,"layout":13},"Pagination","/design-system/components/pagination",{"title":418,"_path":419,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":421,"_path":422,"layout":13},"Profile","/design-system/components/profile",{"title":424,"_path":425,"layout":13},"Radio button","/design-system/components/radio-button",{"title":427,"_path":428,"layout":13},"Related links","/design-system/components/related-links",{"title":430,"_path":431,"layout":13},"Results listing","/design-system/components/results-listing",{"title":433,"_path":434,"layout":13},"Search bar","/design-system/components/search-bar",{"title":436,"_path":437,"layout":13},"Skip link","/design-system/components/skip-link",{"title":197,"_path":196,"layout":13},{"title":11,"_path":7,"layout":13},{"title":203,"_path":202,"layout":13},{"title":442,"_path":443,"layout":13},"Tabs","/design-system/components/tabs",{"title":445,"_path":446,"layout":13},"Tag","/design-system/components/tag",{"title":448,"_path":449,"layout":13},"Text area","/design-system/components/text-area",{"title":451,"_path":452,"layout":13},"Timeline","/design-system/components/timeline",{"title":454,"_path":455,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":457,"_path":458,"children":459,"layout":13},"Ripple Framework","/framework",[460,461,479,501],{"title":457,"_path":458,"layout":13},{"title":462,"_path":463,"children":464},"Key Concepts","/framework/key-concepts",[465,467,470,473,476],{"title":272,"_path":466,"layout":13},"/framework/key-concepts/nuxt",{"title":468,"_path":469,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":471,"_path":472,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":474,"_path":475,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":477,"_path":478,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":480,"_path":481,"children":482},"Guides","/framework/guides",[483,486,489,492,495,498],{"title":484,"_path":485,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":487,"_path":488,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":490,"_path":491,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":493,"_path":494,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":496,"_path":497,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":499,"_path":500,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":502,"_path":503,"layout":13},"Core modules","/framework/core-modules",["Reactive",505],["Set"],["Reactive",507],{"module-navigation":508},null,true,1714695652885]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/table/_payload.json b/design-system/components/table/_payload.json
index 0107603e65..4e6a5712ca 100644
--- a/design-system/components/table/_payload.json
+++ b/design-system/components/table/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":104,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695154783]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":104,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695652917]
\ No newline at end of file
diff --git a/design-system/components/table/index.html b/design-system/components/table/index.html
index b503bfaca5..6245c57bcd 100644
--- a/design-system/components/table/index.html
+++ b/design-system/components/table/index.html
@@ -28,63 +28,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -96,8 +96,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Table</h1><p class="rpl-type-p-large" data-v-3163c6df>The Table component makes it easier for users to scan and compare data and content.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->A table is a systematic grid of data or content. They display in rows and columns to let users scan, analyse and compare information.<!--]--></p><p><!--[-->Users tend to read tables one row or column at a time. So, it&#39;s important that content is simple and logical.<!--]--></p><p><!--[-->A table can include a combination of:<!--]--></p><ul><!--[--><li><!--[-->row and/or column headings that help users know what the rows and columns represent<!--]--></li><li><!--[-->body rows that display data or content<!--]--></li><li><!--[-->a table caption describing its content and helping users find, navigate and understand its information<!--]--></li><li><!--[-->a table footer that provides additional details, if required<!--]--></li><li><!--[-->an expandable section with expandable rows, which can show extra related or supplementary information or data.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-data-table--structured-content&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-data-table--structured-content&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="how-this-component-works" data-v-ea525968><a href="#how-this-component-works" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->How this component works<!--]--></a></h2><p><!--[-->Table content should be left-aligned because we read from left to right.  However, tables with financial figures should have columns that contain numerals set to right-aligned.<!--]--></p><p><!--[-->Only left-align numbers that are arbitrary identifiers, known as &#39;nominal numbers&#39;. These are numbers you cannot compare or combine arithmetically. These can include postal codes, IP addresses, or phone numbers. Column headers follow the alignment of the data.<!--]--></p><p><!--[-->The data table uses a zebra-stripe styling which alternates table row colours. This makes it easier for the user to scan horizontal information.<!--]--></p><p><!--[-->Don&#39;t include too many columns as it&#39;s easier for users to scan down a list than to scroll across a page. So, consider more rows before more columns.<!--]--></p><p><!--[-->Tables can respond differently based on how your website is built. Where tables do not respond, they will display with a horizontal scroll bar to view all the content. Where tables do respond on smaller screens, tables will stack vertically.<!--]--></p><p><!--[-->The complex variant has the option of expandable extra information in nested rows. This is shown by a dropdown toggle.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Add a caption or footer, if required.<!--]--></li><li><!--[-->Use for complex content and data sets.<!--]--></li><li><!--[-->Align numbers to the right (except nominal numbers).<!--]--></li><li><!--[-->Align headers according to their column data.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t repeat the same content in both the caption and summary.<!--]--></li><li><!--[-->Don&#39;t use with long form content. Cell content should be brief and scannable.<!--]--></li><li><!--[-->Don&#39;t use without zebra-stripe styling..<!--]--></li><li><!--[-->Don&#39;t centre-align content.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->Table has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->simple, best used for simple data.<!--]--></li><li><!--[-->complex, best used for complex data.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="simple" data-v-ea525968><a href="#simple" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Simple<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-content--table-scrollable&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--table-scrollable&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="complex" data-v-ea525968><a href="#complex" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Complex<!--]--></a></h2><p><!--[-->The complex variant is best used to display complex data sets.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-data-table--structured-content&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-data-table--structured-content&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Table data uses colour to indicate an action to the user.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-data-table--custom-content&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-data-table--custom-content&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/table.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/table/_payload.json">[{"state":1,"once":599,"_errors":601,"serverRendered":604,"path":7,"prerenderedAt":605},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":288,"$sdd-globals":304,"$sdd-navigation":306},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/table":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":283,"_id":284,"_source":285,"_file":286,"_extension":287},"/design-system/components/table","components",false,"","Table","The Table component makes it easier for users to scan and compare data and content.","page","Core",{"type":16,"children":17,"toc":269},"root",[18,27,33,38,43,73,78,85,90,95,100,105,110,115,121,144,150,173,177,183,188,201,207,211,217,222,225,228,234,239,247],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"A table is a systematic grid of data or content. They display in rows and columns to let users scan, analyse and compare information.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Users tend to read tables one row or column at a time. So, it's important that content is simple and logical.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"A table can include a combination of:",{"type":19,"tag":44,"props":45,"children":46},"ul",{},[47,53,58,63,68],{"type":19,"tag":48,"props":49,"children":50},"li",{},[51],{"type":25,"value":52},"row and/or column headings that help users know what the rows and columns represent",{"type":19,"tag":48,"props":54,"children":55},{},[56],{"type":25,"value":57},"body rows that display data or content",{"type":19,"tag":48,"props":59,"children":60},{},[61],{"type":25,"value":62},"a table caption describing its content and helping users find, navigate and understand its information",{"type":19,"tag":48,"props":64,"children":65},{},[66],{"type":25,"value":67},"a table footer that provides additional details, if required",{"type":19,"tag":48,"props":69,"children":70},{},[71],{"type":25,"value":72},"an expandable section with expandable rows, which can show extra related or supplementary information or data.",{"type":19,"tag":74,"props":75,"children":77},"docs-example",{"id":76},"core-containers-data-table--structured-content",[],{"type":19,"tag":79,"props":80,"children":82},"h3",{"id":81},"how-this-component-works",[83],{"type":25,"value":84},"How this component works",{"type":19,"tag":28,"props":86,"children":87},{},[88],{"type":25,"value":89},"Table content should be left-aligned because we read from left to right.  However, tables with financial figures should have columns that contain numerals set to right-aligned.",{"type":19,"tag":28,"props":91,"children":92},{},[93],{"type":25,"value":94},"Only left-align numbers that are arbitrary identifiers, known as 'nominal numbers'. These are numbers you cannot compare or combine arithmetically. These can include postal codes, IP addresses, or phone numbers. Column headers follow the alignment of the data.",{"type":19,"tag":28,"props":96,"children":97},{},[98],{"type":25,"value":99},"The data table uses a zebra-stripe styling which alternates table row colours. This makes it easier for the user to scan horizontal information.",{"type":19,"tag":28,"props":101,"children":102},{},[103],{"type":25,"value":104},"Don't include too many columns as it's easier for users to scan down a list than to scroll across a page. So, consider more rows before more columns.",{"type":19,"tag":28,"props":106,"children":107},{},[108],{"type":25,"value":109},"Tables can respond differently based on how your website is built. Where tables do not respond, they will display with a horizontal scroll bar to view all the content. Where tables do respond on smaller screens, tables will stack vertically.",{"type":19,"tag":28,"props":111,"children":112},{},[113],{"type":25,"value":114},"The complex variant has the option of expandable extra information in nested rows. This is shown by a dropdown toggle.",{"type":19,"tag":79,"props":116,"children":118},{"id":117},"when-and-how-to-use",[119],{"type":25,"value":120},"When and how to use",{"type":19,"tag":44,"props":122,"children":123},{},[124,129,134,139],{"type":19,"tag":48,"props":125,"children":126},{},[127],{"type":25,"value":128},"Add a caption or footer, if required.",{"type":19,"tag":48,"props":130,"children":131},{},[132],{"type":25,"value":133},"Use for complex content and data sets.",{"type":19,"tag":48,"props":135,"children":136},{},[137],{"type":25,"value":138},"Align numbers to the right (except nominal numbers).",{"type":19,"tag":48,"props":140,"children":141},{},[142],{"type":25,"value":143},"Align headers according to their column data.",{"type":19,"tag":79,"props":145,"children":147},{"id":146},"when-and-how-not-to-use",[148],{"type":25,"value":149},"When and how not to use",{"type":19,"tag":44,"props":151,"children":152},{},[153,158,163,168],{"type":19,"tag":48,"props":154,"children":155},{},[156],{"type":25,"value":157},"Don't repeat the same content in both the caption and summary.",{"type":19,"tag":48,"props":159,"children":160},{},[161],{"type":25,"value":162},"Don't use with long form content. Cell content should be brief and scannable.",{"type":19,"tag":48,"props":164,"children":165},{},[166],{"type":25,"value":167},"Don't use without zebra-stripe styling..",{"type":19,"tag":48,"props":169,"children":170},{},[171],{"type":25,"value":172},"Don't centre-align content.",{"type":19,"tag":174,"props":175,"children":176},"hr",{},[],{"type":19,"tag":20,"props":178,"children":180},{"id":179},"variants",[181],{"type":25,"value":182},"Variants",{"type":19,"tag":28,"props":184,"children":185},{},[186],{"type":25,"value":187},"Table has 2 variants:",{"type":19,"tag":44,"props":189,"children":190},{},[191,196],{"type":19,"tag":48,"props":192,"children":193},{},[194],{"type":25,"value":195},"simple, best used for simple data.",{"type":19,"tag":48,"props":197,"children":198},{},[199],{"type":25,"value":200},"complex, best used for complex data.",{"type":19,"tag":79,"props":202,"children":204},{"id":203},"simple",[205],{"type":25,"value":206},"Simple",{"type":19,"tag":74,"props":208,"children":210},{"id":209},"core-containers-content--table-scrollable",[],{"type":19,"tag":79,"props":212,"children":214},{"id":213},"complex",[215],{"type":25,"value":216},"Complex",{"type":19,"tag":28,"props":218,"children":219},{},[220],{"type":25,"value":221},"The complex variant is best used to display complex data sets.",{"type":19,"tag":74,"props":223,"children":224},{"id":76},[],{"type":19,"tag":174,"props":226,"children":227},{},[],{"type":19,"tag":20,"props":229,"children":231},{"id":230},"theming",[232],{"type":25,"value":233},"Theming",{"type":19,"tag":28,"props":235,"children":236},{},[237],{"type":25,"value":238},"Table data uses colour to indicate an action to the user.",{"type":19,"tag":240,"props":241,"children":242},"docs-theme-chooser",{},[243],{"type":19,"tag":74,"props":244,"children":246},{"id":245},"core-containers-data-table--custom-content",[],{"type":19,"tag":28,"props":248,"children":249},{},[250,252,259,261,267],{"type":25,"value":251},"To create your own theme see ",{"type":19,"tag":253,"props":254,"children":256},"a",{"href":255},"/design-system/design/theming-guidance-for-designers",[257],{"type":25,"value":258},"theming guidance for designers",{"type":25,"value":260}," or ",{"type":19,"tag":253,"props":262,"children":264},{"href":263},"/design-system/develop/theming",[265],{"type":25,"value":266},"theming guidance for developers",{"type":25,"value":268},".",{"title":10,"searchDepth":270,"depth":270,"links":271},2,[272,278,282],{"id":22,"depth":270,"text":26,"children":273},[274,276,277],{"id":81,"depth":275,"text":84},3,{"id":117,"depth":275,"text":120},{"id":146,"depth":275,"text":149},{"id":179,"depth":270,"text":182,"children":279},[280,281],{"id":203,"depth":275,"text":206},{"id":213,"depth":275,"text":216},{"id":230,"depth":270,"text":233},"markdown","content:design-system:5.components:table.md","content","design-system/5.components/table.md","md",["ShallowRef",289],["ShallowReactive",290],{"/design-system/components/table":291},[292,298],{"_path":293,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":294,"description":295,"layout":13,"label":14,"_type":283,"_id":296,"_source":285,"_file":297,"_extension":287},"/design-system/components/statistics-grid","Statistics grid","The Statistics grid component shows a summary of 2 to 8 key statistics in a grid layout.","content:design-system:5.components:statistics-grid.md","design-system/5.components/statistics-grid.md",{"_path":299,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":300,"description":301,"layout":13,"label":14,"_type":283,"_id":302,"_source":285,"_file":303,"_extension":287},"/design-system/components/tabs","Tabs","The Tab component lets you organise related content so that users can switch between related information on the same page.","content:design-system:5.components:tabs.md","design-system/5.components/tabs.md",["ShallowRef",305],{},[307,312,551],{"title":308,"_path":309,"icon":310,"layout":311},"Ripple Design System","/","carbon:home","home",{"title":313,"_path":314,"children":315},"Design System","/design-system",[316,332,347,375,409],{"title":317,"_path":318,"children":319},"About","/design-system/about",[320,323,326,329],{"title":321,"_path":322,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":324,"_path":325,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":327,"_path":328,"layout":13},"Support","/design-system/about/getting-support",{"title":330,"_path":331,"layout":13},"Contributing","/design-system/about/contributing",{"title":333,"_path":334,"children":335},"Design","/design-system/design",[336,339,342,345],{"title":337,"_path":338,"layout":13},"Getting started","/design-system/design/getting-started",{"title":340,"_path":341,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":343,"_path":344,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":346,"_path":255,"layout":13},"Theming guidance for designers",{"title":348,"_path":349,"children":350},"Develop","/design-system/develop",[351,353,355,357],{"title":337,"_path":352,"layout":13},"/design-system/develop/getting-started",{"title":330,"_path":354,"layout":13},"/design-system/develop/contributing",{"title":356,"_path":263,"layout":13},"Theme and brand application",{"title":26,"_path":358,"children":359,"layout":13},"/design-system/develop/usage",[360,363,366,369,372],{"title":361,"_path":362,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":364,"_path":365,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":367,"_path":368,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":370,"_path":371,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":373,"_path":374,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":376,"_path":377,"children":378},"Styles","/design-system/styles",[379,382,385,388,391,394,397,400,403,406],{"title":380,"_path":381,"layout":13},"Colour","/design-system/styles/colour",{"title":383,"_path":384,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":386,"_path":387,"layout":13},"Grid","/design-system/styles/grid",{"title":389,"_path":390,"layout":13},"Icons","/design-system/styles/icons",{"title":392,"_path":393,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":395,"_path":396,"layout":13},"Layout","/design-system/styles/layout",{"title":398,"_path":399,"layout":13},"Logo","/design-system/styles/logo",{"title":401,"_path":402,"layout":13},"Motion","/design-system/styles/motion",{"title":404,"_path":405,"layout":13},"Spacing","/design-system/styles/spacing",{"title":407,"_path":408,"layout":13},"Typography","/design-system/styles/typography",{"title":410,"_path":411,"children":412},"Components","/design-system/components",[413,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482,485,488,491,494,497,500,503,506,509,512,515,518,521,524,527,530,533,536,537,538,539,542,545,548],{"title":414,"_path":415,"layout":13},"Accordion","/design-system/components/accordion",{"title":417,"_path":418,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":420,"_path":421,"layout":13},"Alert","/design-system/components/alert",{"title":423,"_path":424,"layout":13},"Block quote","/design-system/components/block-quote",{"title":426,"_path":427,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":429,"_path":430,"layout":13},"Button","/design-system/components/button",{"title":432,"_path":433,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":435,"_path":436,"layout":13},"Callout","/design-system/components/callout",{"title":438,"_path":439,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":441,"_path":442,"layout":13},"Card","/design-system/components/card",{"title":444,"_path":445,"layout":13},"Carousel","/design-system/components/carousel",{"title":447,"_path":448,"layout":13},"Category grid","/design-system/components/category-grid",{"title":450,"_path":451,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":453,"_path":454,"layout":13},"Chip","/design-system/components/chip",{"title":456,"_path":457,"layout":13},"Contact us","/design-system/components/contact-us",{"title":459,"_path":460,"layout":13},"Date input","/design-system/components/date-input",{"title":462,"_path":463,"layout":13},"Detail list","/design-system/components/detail-list",{"title":465,"_path":466,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":468,"_path":469,"layout":13},"File","/design-system/components/file",{"title":471,"_path":472,"layout":13},"Footer","/design-system/components/footer",{"title":474,"_path":475,"layout":13},"Form","/design-system/components/form",{"title":477,"_path":478,"layout":13},"Form alert","/design-system/components/form-alert",{"title":480,"_path":481,"layout":13},"Header","/design-system/components/header",{"title":483,"_path":484,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":486,"_path":487,"layout":13},"Input field","/design-system/components/input-field",{"title":489,"_path":490,"layout":13},"Key dates","/design-system/components/key-dates",{"title":492,"_path":493,"layout":13},"Media","/design-system/components/media",{"title":495,"_path":496,"layout":13},"Media embed","/design-system/components/media-embed",{"title":498,"_path":499,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":501,"_path":502,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":504,"_path":505,"layout":13},"Option button","/design-system/components/option-button",{"title":507,"_path":508,"layout":13},"Page action","/design-system/components/page-action",{"title":510,"_path":511,"layout":13},"Pagination","/design-system/components/pagination",{"title":513,"_path":514,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":516,"_path":517,"layout":13},"Profile","/design-system/components/profile",{"title":519,"_path":520,"layout":13},"Radio button","/design-system/components/radio-button",{"title":522,"_path":523,"layout":13},"Related links","/design-system/components/related-links",{"title":525,"_path":526,"layout":13},"Results listing","/design-system/components/results-listing",{"title":528,"_path":529,"layout":13},"Search bar","/design-system/components/search-bar",{"title":531,"_path":532,"layout":13},"Skip link","/design-system/components/skip-link",{"title":534,"_path":535,"layout":13},"Social share","/design-system/components/social-share",{"title":294,"_path":293,"layout":13},{"title":11,"_path":7,"layout":13},{"title":300,"_path":299,"layout":13},{"title":540,"_path":541,"layout":13},"Tag","/design-system/components/tag",{"title":543,"_path":544,"layout":13},"Text area","/design-system/components/text-area",{"title":546,"_path":547,"layout":13},"Timeline","/design-system/components/timeline",{"title":549,"_path":550,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":552,"_path":553,"children":554,"layout":13},"Ripple Framework","/framework",[555,556,574,596],{"title":552,"_path":553,"layout":13},{"title":557,"_path":558,"children":559},"Key Concepts","/framework/key-concepts",[560,562,565,568,571],{"title":367,"_path":561,"layout":13},"/framework/key-concepts/nuxt",{"title":563,"_path":564,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":566,"_path":567,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":569,"_path":570,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":572,"_path":573,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":575,"_path":576,"children":577},"Guides","/framework/guides",[578,581,584,587,590,593],{"title":579,"_path":580,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":582,"_path":583,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":585,"_path":586,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":588,"_path":589,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":591,"_path":592,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":594,"_path":595,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":597,"_path":598,"layout":13},"Core modules","/framework/core-modules",["Reactive",600],["Set"],["Reactive",602],{"module-navigation":603},null,true,1714695154783]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Table</h1><p class="rpl-type-p-large" data-v-3163c6df>The Table component makes it easier for users to scan and compare data and content.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->A table is a systematic grid of data or content. They display in rows and columns to let users scan, analyse and compare information.<!--]--></p><p><!--[-->Users tend to read tables one row or column at a time. So, it&#39;s important that content is simple and logical.<!--]--></p><p><!--[-->A table can include a combination of:<!--]--></p><ul><!--[--><li><!--[-->row and/or column headings that help users know what the rows and columns represent<!--]--></li><li><!--[-->body rows that display data or content<!--]--></li><li><!--[-->a table caption describing its content and helping users find, navigate and understand its information<!--]--></li><li><!--[-->a table footer that provides additional details, if required<!--]--></li><li><!--[-->an expandable section with expandable rows, which can show extra related or supplementary information or data.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-data-table--structured-content&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-data-table--structured-content&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="how-this-component-works" data-v-ea525968><a href="#how-this-component-works" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->How this component works<!--]--></a></h2><p><!--[-->Table content should be left-aligned because we read from left to right.  However, tables with financial figures should have columns that contain numerals set to right-aligned.<!--]--></p><p><!--[-->Only left-align numbers that are arbitrary identifiers, known as &#39;nominal numbers&#39;. These are numbers you cannot compare or combine arithmetically. These can include postal codes, IP addresses, or phone numbers. Column headers follow the alignment of the data.<!--]--></p><p><!--[-->The data table uses a zebra-stripe styling which alternates table row colours. This makes it easier for the user to scan horizontal information.<!--]--></p><p><!--[-->Don&#39;t include too many columns as it&#39;s easier for users to scan down a list than to scroll across a page. So, consider more rows before more columns.<!--]--></p><p><!--[-->Tables can respond differently based on how your website is built. Where tables do not respond, they will display with a horizontal scroll bar to view all the content. Where tables do respond on smaller screens, tables will stack vertically.<!--]--></p><p><!--[-->The complex variant has the option of expandable extra information in nested rows. This is shown by a dropdown toggle.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Add a caption or footer, if required.<!--]--></li><li><!--[-->Use for complex content and data sets.<!--]--></li><li><!--[-->Align numbers to the right (except nominal numbers).<!--]--></li><li><!--[-->Align headers according to their column data.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t repeat the same content in both the caption and summary.<!--]--></li><li><!--[-->Don&#39;t use with long form content. Cell content should be brief and scannable.<!--]--></li><li><!--[-->Don&#39;t use without zebra-stripe styling..<!--]--></li><li><!--[-->Don&#39;t centre-align content.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->Table has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->simple, best used for simple data.<!--]--></li><li><!--[-->complex, best used for complex data.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="simple" data-v-ea525968><a href="#simple" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Simple<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-content--table-scrollable&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-content--table-scrollable&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="complex" data-v-ea525968><a href="#complex" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Complex<!--]--></a></h2><p><!--[-->The complex variant is best used to display complex data sets.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-data-table--structured-content&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-data-table--structured-content&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Table data uses colour to indicate an action to the user.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-data-table--custom-content&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-data-table--custom-content&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/table.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/table/_payload.json">[{"state":1,"once":599,"_errors":601,"serverRendered":604,"path":7,"prerenderedAt":605},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":288,"$sdd-globals":304,"$sdd-navigation":306},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/table":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":283,"_id":284,"_source":285,"_file":286,"_extension":287},"/design-system/components/table","components",false,"","Table","The Table component makes it easier for users to scan and compare data and content.","page","Core",{"type":16,"children":17,"toc":269},"root",[18,27,33,38,43,73,78,85,90,95,100,105,110,115,121,144,150,173,177,183,188,201,207,211,217,222,225,228,234,239,247],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"A table is a systematic grid of data or content. They display in rows and columns to let users scan, analyse and compare information.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Users tend to read tables one row or column at a time. So, it's important that content is simple and logical.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"A table can include a combination of:",{"type":19,"tag":44,"props":45,"children":46},"ul",{},[47,53,58,63,68],{"type":19,"tag":48,"props":49,"children":50},"li",{},[51],{"type":25,"value":52},"row and/or column headings that help users know what the rows and columns represent",{"type":19,"tag":48,"props":54,"children":55},{},[56],{"type":25,"value":57},"body rows that display data or content",{"type":19,"tag":48,"props":59,"children":60},{},[61],{"type":25,"value":62},"a table caption describing its content and helping users find, navigate and understand its information",{"type":19,"tag":48,"props":64,"children":65},{},[66],{"type":25,"value":67},"a table footer that provides additional details, if required",{"type":19,"tag":48,"props":69,"children":70},{},[71],{"type":25,"value":72},"an expandable section with expandable rows, which can show extra related or supplementary information or data.",{"type":19,"tag":74,"props":75,"children":77},"docs-example",{"id":76},"core-containers-data-table--structured-content",[],{"type":19,"tag":79,"props":80,"children":82},"h3",{"id":81},"how-this-component-works",[83],{"type":25,"value":84},"How this component works",{"type":19,"tag":28,"props":86,"children":87},{},[88],{"type":25,"value":89},"Table content should be left-aligned because we read from left to right.  However, tables with financial figures should have columns that contain numerals set to right-aligned.",{"type":19,"tag":28,"props":91,"children":92},{},[93],{"type":25,"value":94},"Only left-align numbers that are arbitrary identifiers, known as 'nominal numbers'. These are numbers you cannot compare or combine arithmetically. These can include postal codes, IP addresses, or phone numbers. Column headers follow the alignment of the data.",{"type":19,"tag":28,"props":96,"children":97},{},[98],{"type":25,"value":99},"The data table uses a zebra-stripe styling which alternates table row colours. This makes it easier for the user to scan horizontal information.",{"type":19,"tag":28,"props":101,"children":102},{},[103],{"type":25,"value":104},"Don't include too many columns as it's easier for users to scan down a list than to scroll across a page. So, consider more rows before more columns.",{"type":19,"tag":28,"props":106,"children":107},{},[108],{"type":25,"value":109},"Tables can respond differently based on how your website is built. Where tables do not respond, they will display with a horizontal scroll bar to view all the content. Where tables do respond on smaller screens, tables will stack vertically.",{"type":19,"tag":28,"props":111,"children":112},{},[113],{"type":25,"value":114},"The complex variant has the option of expandable extra information in nested rows. This is shown by a dropdown toggle.",{"type":19,"tag":79,"props":116,"children":118},{"id":117},"when-and-how-to-use",[119],{"type":25,"value":120},"When and how to use",{"type":19,"tag":44,"props":122,"children":123},{},[124,129,134,139],{"type":19,"tag":48,"props":125,"children":126},{},[127],{"type":25,"value":128},"Add a caption or footer, if required.",{"type":19,"tag":48,"props":130,"children":131},{},[132],{"type":25,"value":133},"Use for complex content and data sets.",{"type":19,"tag":48,"props":135,"children":136},{},[137],{"type":25,"value":138},"Align numbers to the right (except nominal numbers).",{"type":19,"tag":48,"props":140,"children":141},{},[142],{"type":25,"value":143},"Align headers according to their column data.",{"type":19,"tag":79,"props":145,"children":147},{"id":146},"when-and-how-not-to-use",[148],{"type":25,"value":149},"When and how not to use",{"type":19,"tag":44,"props":151,"children":152},{},[153,158,163,168],{"type":19,"tag":48,"props":154,"children":155},{},[156],{"type":25,"value":157},"Don't repeat the same content in both the caption and summary.",{"type":19,"tag":48,"props":159,"children":160},{},[161],{"type":25,"value":162},"Don't use with long form content. Cell content should be brief and scannable.",{"type":19,"tag":48,"props":164,"children":165},{},[166],{"type":25,"value":167},"Don't use without zebra-stripe styling..",{"type":19,"tag":48,"props":169,"children":170},{},[171],{"type":25,"value":172},"Don't centre-align content.",{"type":19,"tag":174,"props":175,"children":176},"hr",{},[],{"type":19,"tag":20,"props":178,"children":180},{"id":179},"variants",[181],{"type":25,"value":182},"Variants",{"type":19,"tag":28,"props":184,"children":185},{},[186],{"type":25,"value":187},"Table has 2 variants:",{"type":19,"tag":44,"props":189,"children":190},{},[191,196],{"type":19,"tag":48,"props":192,"children":193},{},[194],{"type":25,"value":195},"simple, best used for simple data.",{"type":19,"tag":48,"props":197,"children":198},{},[199],{"type":25,"value":200},"complex, best used for complex data.",{"type":19,"tag":79,"props":202,"children":204},{"id":203},"simple",[205],{"type":25,"value":206},"Simple",{"type":19,"tag":74,"props":208,"children":210},{"id":209},"core-containers-content--table-scrollable",[],{"type":19,"tag":79,"props":212,"children":214},{"id":213},"complex",[215],{"type":25,"value":216},"Complex",{"type":19,"tag":28,"props":218,"children":219},{},[220],{"type":25,"value":221},"The complex variant is best used to display complex data sets.",{"type":19,"tag":74,"props":223,"children":224},{"id":76},[],{"type":19,"tag":174,"props":226,"children":227},{},[],{"type":19,"tag":20,"props":229,"children":231},{"id":230},"theming",[232],{"type":25,"value":233},"Theming",{"type":19,"tag":28,"props":235,"children":236},{},[237],{"type":25,"value":238},"Table data uses colour to indicate an action to the user.",{"type":19,"tag":240,"props":241,"children":242},"docs-theme-chooser",{},[243],{"type":19,"tag":74,"props":244,"children":246},{"id":245},"core-containers-data-table--custom-content",[],{"type":19,"tag":28,"props":248,"children":249},{},[250,252,259,261,267],{"type":25,"value":251},"To create your own theme see ",{"type":19,"tag":253,"props":254,"children":256},"a",{"href":255},"/design-system/design/theming-guidance-for-designers",[257],{"type":25,"value":258},"theming guidance for designers",{"type":25,"value":260}," or ",{"type":19,"tag":253,"props":262,"children":264},{"href":263},"/design-system/develop/theming",[265],{"type":25,"value":266},"theming guidance for developers",{"type":25,"value":268},".",{"title":10,"searchDepth":270,"depth":270,"links":271},2,[272,278,282],{"id":22,"depth":270,"text":26,"children":273},[274,276,277],{"id":81,"depth":275,"text":84},3,{"id":117,"depth":275,"text":120},{"id":146,"depth":275,"text":149},{"id":179,"depth":270,"text":182,"children":279},[280,281],{"id":203,"depth":275,"text":206},{"id":213,"depth":275,"text":216},{"id":230,"depth":270,"text":233},"markdown","content:design-system:5.components:table.md","content","design-system/5.components/table.md","md",["ShallowRef",289],["ShallowReactive",290],{"/design-system/components/table":291},[292,298],{"_path":293,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":294,"description":295,"layout":13,"label":14,"_type":283,"_id":296,"_source":285,"_file":297,"_extension":287},"/design-system/components/statistics-grid","Statistics grid","The Statistics grid component shows a summary of 2 to 8 key statistics in a grid layout.","content:design-system:5.components:statistics-grid.md","design-system/5.components/statistics-grid.md",{"_path":299,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":300,"description":301,"layout":13,"label":14,"_type":283,"_id":302,"_source":285,"_file":303,"_extension":287},"/design-system/components/tabs","Tabs","The Tab component lets you organise related content so that users can switch between related information on the same page.","content:design-system:5.components:tabs.md","design-system/5.components/tabs.md",["ShallowRef",305],{},[307,312,551],{"title":308,"_path":309,"icon":310,"layout":311},"Ripple Design System","/","carbon:home","home",{"title":313,"_path":314,"children":315},"Design System","/design-system",[316,332,347,375,409],{"title":317,"_path":318,"children":319},"About","/design-system/about",[320,323,326,329],{"title":321,"_path":322,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":324,"_path":325,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":327,"_path":328,"layout":13},"Support","/design-system/about/getting-support",{"title":330,"_path":331,"layout":13},"Contributing","/design-system/about/contributing",{"title":333,"_path":334,"children":335},"Design","/design-system/design",[336,339,342,345],{"title":337,"_path":338,"layout":13},"Getting started","/design-system/design/getting-started",{"title":340,"_path":341,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":343,"_path":344,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":346,"_path":255,"layout":13},"Theming guidance for designers",{"title":348,"_path":349,"children":350},"Develop","/design-system/develop",[351,353,355,357],{"title":337,"_path":352,"layout":13},"/design-system/develop/getting-started",{"title":330,"_path":354,"layout":13},"/design-system/develop/contributing",{"title":356,"_path":263,"layout":13},"Theme and brand application",{"title":26,"_path":358,"children":359,"layout":13},"/design-system/develop/usage",[360,363,366,369,372],{"title":361,"_path":362,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":364,"_path":365,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":367,"_path":368,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":370,"_path":371,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":373,"_path":374,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":376,"_path":377,"children":378},"Styles","/design-system/styles",[379,382,385,388,391,394,397,400,403,406],{"title":380,"_path":381,"layout":13},"Colour","/design-system/styles/colour",{"title":383,"_path":384,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":386,"_path":387,"layout":13},"Grid","/design-system/styles/grid",{"title":389,"_path":390,"layout":13},"Icons","/design-system/styles/icons",{"title":392,"_path":393,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":395,"_path":396,"layout":13},"Layout","/design-system/styles/layout",{"title":398,"_path":399,"layout":13},"Logo","/design-system/styles/logo",{"title":401,"_path":402,"layout":13},"Motion","/design-system/styles/motion",{"title":404,"_path":405,"layout":13},"Spacing","/design-system/styles/spacing",{"title":407,"_path":408,"layout":13},"Typography","/design-system/styles/typography",{"title":410,"_path":411,"children":412},"Components","/design-system/components",[413,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482,485,488,491,494,497,500,503,506,509,512,515,518,521,524,527,530,533,536,537,538,539,542,545,548],{"title":414,"_path":415,"layout":13},"Accordion","/design-system/components/accordion",{"title":417,"_path":418,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":420,"_path":421,"layout":13},"Alert","/design-system/components/alert",{"title":423,"_path":424,"layout":13},"Block quote","/design-system/components/block-quote",{"title":426,"_path":427,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":429,"_path":430,"layout":13},"Button","/design-system/components/button",{"title":432,"_path":433,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":435,"_path":436,"layout":13},"Callout","/design-system/components/callout",{"title":438,"_path":439,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":441,"_path":442,"layout":13},"Card","/design-system/components/card",{"title":444,"_path":445,"layout":13},"Carousel","/design-system/components/carousel",{"title":447,"_path":448,"layout":13},"Category grid","/design-system/components/category-grid",{"title":450,"_path":451,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":453,"_path":454,"layout":13},"Chip","/design-system/components/chip",{"title":456,"_path":457,"layout":13},"Contact us","/design-system/components/contact-us",{"title":459,"_path":460,"layout":13},"Date input","/design-system/components/date-input",{"title":462,"_path":463,"layout":13},"Detail list","/design-system/components/detail-list",{"title":465,"_path":466,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":468,"_path":469,"layout":13},"File","/design-system/components/file",{"title":471,"_path":472,"layout":13},"Footer","/design-system/components/footer",{"title":474,"_path":475,"layout":13},"Form","/design-system/components/form",{"title":477,"_path":478,"layout":13},"Form alert","/design-system/components/form-alert",{"title":480,"_path":481,"layout":13},"Header","/design-system/components/header",{"title":483,"_path":484,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":486,"_path":487,"layout":13},"Input field","/design-system/components/input-field",{"title":489,"_path":490,"layout":13},"Key dates","/design-system/components/key-dates",{"title":492,"_path":493,"layout":13},"Media","/design-system/components/media",{"title":495,"_path":496,"layout":13},"Media embed","/design-system/components/media-embed",{"title":498,"_path":499,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":501,"_path":502,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":504,"_path":505,"layout":13},"Option button","/design-system/components/option-button",{"title":507,"_path":508,"layout":13},"Page action","/design-system/components/page-action",{"title":510,"_path":511,"layout":13},"Pagination","/design-system/components/pagination",{"title":513,"_path":514,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":516,"_path":517,"layout":13},"Profile","/design-system/components/profile",{"title":519,"_path":520,"layout":13},"Radio button","/design-system/components/radio-button",{"title":522,"_path":523,"layout":13},"Related links","/design-system/components/related-links",{"title":525,"_path":526,"layout":13},"Results listing","/design-system/components/results-listing",{"title":528,"_path":529,"layout":13},"Search bar","/design-system/components/search-bar",{"title":531,"_path":532,"layout":13},"Skip link","/design-system/components/skip-link",{"title":534,"_path":535,"layout":13},"Social share","/design-system/components/social-share",{"title":294,"_path":293,"layout":13},{"title":11,"_path":7,"layout":13},{"title":300,"_path":299,"layout":13},{"title":540,"_path":541,"layout":13},"Tag","/design-system/components/tag",{"title":543,"_path":544,"layout":13},"Text area","/design-system/components/text-area",{"title":546,"_path":547,"layout":13},"Timeline","/design-system/components/timeline",{"title":549,"_path":550,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":552,"_path":553,"children":554,"layout":13},"Ripple Framework","/framework",[555,556,574,596],{"title":552,"_path":553,"layout":13},{"title":557,"_path":558,"children":559},"Key Concepts","/framework/key-concepts",[560,562,565,568,571],{"title":367,"_path":561,"layout":13},"/framework/key-concepts/nuxt",{"title":563,"_path":564,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":566,"_path":567,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":569,"_path":570,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":572,"_path":573,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":575,"_path":576,"children":577},"Guides","/framework/guides",[578,581,584,587,590,593],{"title":579,"_path":580,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":582,"_path":583,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":585,"_path":586,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":588,"_path":589,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":591,"_path":592,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":594,"_path":595,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":597,"_path":598,"layout":13},"Core modules","/framework/core-modules",["Reactive",600],["Set"],["Reactive",602],{"module-navigation":603},null,true,1714695652917]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/tabs/_payload.json b/design-system/components/tabs/_payload.json
index 1626314d05..73dd6562c4 100644
--- a/design-system/components/tabs/_payload.json
+++ b/design-system/components/tabs/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":104,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695154886]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":104,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695653091]
\ No newline at end of file
diff --git a/design-system/components/tabs/index.html b/design-system/components/tabs/index.html
index a1aaf3b304..473a630926 100644
--- a/design-system/components/tabs/index.html
+++ b/design-system/components/tabs/index.html
@@ -28,63 +28,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -96,8 +96,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Tabs</h1><p class="rpl-type-p-large" data-v-3163c6df>The Tab component lets you organise related content so that users can switch between related information on the same page.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use tabs to let users stay on the same page, but access more content.<!--]--></p><p><!--[-->Only one tab is active at a time. Tabs help users navigate between, and display and hide, relevant content on your page so long as:<!--]--></p><ul><!--[--><li><!--[-->you can split, categorise and clearly label the content<!--]--></li><li><!--[-->there is a section more relevant for most users, which is placed first<!--]--></li><li><!--[-->seeing the all sections at the same time is not needed<!--]--></li><li><!--[-->you have a minimum of 2 tabs.<!--]--></li><!--]--></ul><p><!--[-->Use tabs to organise content so a user doesn&#39;t have to navigate away to complete their task. Tabs are useful for maps or dashboards.<!--]--></p><p><!--[-->Never use tabs if your content is sequential. Use it to present related content together, as a group.<!--]--></p><p><!--[-->Tabs include:<!--]--></p><ul><!--[--><li><!--[-->labels<!--]--></li><li><!--[-->an optional icon.<!--]--></li><!--]--></ul><p><!--[-->Icons tell the user the category of content under a tab. Keep icons simple and easily understood, and reinforce the label.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-tabs--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-tabs--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Order your tabs according to importance.<!--]--></li><li><!--[-->Labels should clearly and succinctly describe the content within the tab.<!--]--></li><li><!--[-->Only use tabs to group content that all sits at the same level of hierarchy.<!--]--></li><li><!--[-->Limit labels to one word and ensure they are unique.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Never use tabs within tabs.<!--]--></li><li><!--[-->Don&#39;t display disabled tabs.<!--]--></li><li><!--[-->Don&#39;t display more than one row of tabs when using the horizontal variant.<!--]--></li><li><!--[-->Don&#39;t use tabs for important information, since a user will choose which tab to open, so they may not see some content.<!--]--></li><li><!--[-->Don&#39;t use if your content is short, instead use lists or paragraph text.<!--]--></li><li><!--[-->Tabs are not a substitute for primary navigation, so never use tabs as primary navigation.<!--]--></li><li><!--[-->Don&#39;t use tabs to tell the user about their progress through a page or content.<!--]--></li><li><!--[-->Don’t use tabs when the user needs to compare information, since only one tab is visible at a time.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->Tabs have 2 display variants:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->vertical.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><p><!--[-->The default variant sets the tab group bottom border to span the full available content width.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-tabs--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-tabs--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="vertical" data-v-ea525968><a href="#vertical" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Vertical<!--]--></a></h2><p><!--[-->The vertical variant sets the tab group left border to span the height of the tab group.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-tabs--vertical&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-tabs--vertical&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Tabs use colour to represent interaction states.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-tabs--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-tabs--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/tabs.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/tabs/_payload.json">[{"state":1,"once":608,"_errors":610,"serverRendered":613,"path":7,"prerenderedAt":614},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":297,"$sdd-globals":313,"$sdd-navigation":315},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/tabs":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":292,"_id":293,"_source":294,"_file":295,"_extension":296},"/design-system/components/tabs","components",false,"","Tabs","The Tab component lets you organise related content so that users can switch between related information on the same page.","page","Core",{"type":16,"children":17,"toc":279},"root",[18,27,33,38,63,68,73,78,91,96,101,108,131,137,180,184,190,195,208,213,218,221,227,232,236,239,245,250,257],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use tabs to let users stay on the same page, but access more content.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Only one tab is active at a time. Tabs help users navigate between, and display and hide, relevant content on your page so long as:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48,53,58],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"you can split, categorise and clearly label the content",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"there is a section more relevant for most users, which is placed first",{"type":19,"tag":43,"props":54,"children":55},{},[56],{"type":25,"value":57},"seeing the all sections at the same time is not needed",{"type":19,"tag":43,"props":59,"children":60},{},[61],{"type":25,"value":62},"you have a minimum of 2 tabs.",{"type":19,"tag":28,"props":64,"children":65},{},[66],{"type":25,"value":67},"Use tabs to organise content so a user doesn't have to navigate away to complete their task. Tabs are useful for maps or dashboards.",{"type":19,"tag":28,"props":69,"children":70},{},[71],{"type":25,"value":72},"Never use tabs if your content is sequential. Use it to present related content together, as a group.",{"type":19,"tag":28,"props":74,"children":75},{},[76],{"type":25,"value":77},"Tabs include:",{"type":19,"tag":39,"props":79,"children":80},{},[81,86],{"type":19,"tag":43,"props":82,"children":83},{},[84],{"type":25,"value":85},"labels",{"type":19,"tag":43,"props":87,"children":88},{},[89],{"type":25,"value":90},"an optional icon.",{"type":19,"tag":28,"props":92,"children":93},{},[94],{"type":25,"value":95},"Icons tell the user the category of content under a tab. Keep icons simple and easily understood, and reinforce the label.",{"type":19,"tag":97,"props":98,"children":100},"docs-example",{"id":99},"core-navigation-tabs--default-story",[],{"type":19,"tag":102,"props":103,"children":105},"h3",{"id":104},"when-and-how-to-use",[106],{"type":25,"value":107},"When and how to use",{"type":19,"tag":39,"props":109,"children":110},{},[111,116,121,126],{"type":19,"tag":43,"props":112,"children":113},{},[114],{"type":25,"value":115},"Order your tabs according to importance.",{"type":19,"tag":43,"props":117,"children":118},{},[119],{"type":25,"value":120},"Labels should clearly and succinctly describe the content within the tab.",{"type":19,"tag":43,"props":122,"children":123},{},[124],{"type":25,"value":125},"Only use tabs to group content that all sits at the same level of hierarchy.",{"type":19,"tag":43,"props":127,"children":128},{},[129],{"type":25,"value":130},"Limit labels to one word and ensure they are unique.",{"type":19,"tag":102,"props":132,"children":134},{"id":133},"when-and-how-not-to-use",[135],{"type":25,"value":136},"When and how not to use",{"type":19,"tag":39,"props":138,"children":139},{},[140,145,150,155,160,165,170,175],{"type":19,"tag":43,"props":141,"children":142},{},[143],{"type":25,"value":144},"Never use tabs within tabs.",{"type":19,"tag":43,"props":146,"children":147},{},[148],{"type":25,"value":149},"Don't display disabled tabs.",{"type":19,"tag":43,"props":151,"children":152},{},[153],{"type":25,"value":154},"Don't display more than one row of tabs when using the horizontal variant.",{"type":19,"tag":43,"props":156,"children":157},{},[158],{"type":25,"value":159},"Don't use tabs for important information, since a user will choose which tab to open, so they may not see some content.",{"type":19,"tag":43,"props":161,"children":162},{},[163],{"type":25,"value":164},"Don't use if your content is short, instead use lists or paragraph text.",{"type":19,"tag":43,"props":166,"children":167},{},[168],{"type":25,"value":169},"Tabs are not a substitute for primary navigation, so never use tabs as primary navigation.",{"type":19,"tag":43,"props":171,"children":172},{},[173],{"type":25,"value":174},"Don't use tabs to tell the user about their progress through a page or content.",{"type":19,"tag":43,"props":176,"children":177},{},[178],{"type":25,"value":179},"Don’t use tabs when the user needs to compare information, since only one tab is visible at a time.",{"type":19,"tag":181,"props":182,"children":183},"hr",{},[],{"type":19,"tag":20,"props":185,"children":187},{"id":186},"variants",[188],{"type":25,"value":189},"Variants",{"type":19,"tag":28,"props":191,"children":192},{},[193],{"type":25,"value":194},"Tabs have 2 display variants:",{"type":19,"tag":39,"props":196,"children":197},{},[198,203],{"type":19,"tag":43,"props":199,"children":200},{},[201],{"type":25,"value":202},"default",{"type":19,"tag":43,"props":204,"children":205},{},[206],{"type":25,"value":207},"vertical.",{"type":19,"tag":102,"props":209,"children":210},{"id":202},[211],{"type":25,"value":212},"Default",{"type":19,"tag":28,"props":214,"children":215},{},[216],{"type":25,"value":217},"The default variant sets the tab group bottom border to span the full available content width.",{"type":19,"tag":97,"props":219,"children":220},{"id":99},[],{"type":19,"tag":102,"props":222,"children":224},{"id":223},"vertical",[225],{"type":25,"value":226},"Vertical",{"type":19,"tag":28,"props":228,"children":229},{},[230],{"type":25,"value":231},"The vertical variant sets the tab group left border to span the height of the tab group.",{"type":19,"tag":97,"props":233,"children":235},{"id":234},"core-navigation-tabs--vertical",[],{"type":19,"tag":181,"props":237,"children":238},{},[],{"type":19,"tag":20,"props":240,"children":242},{"id":241},"theming",[243],{"type":25,"value":244},"Theming",{"type":19,"tag":28,"props":246,"children":247},{},[248],{"type":25,"value":249},"Tabs use colour to represent interaction states.",{"type":19,"tag":251,"props":252,"children":253},"docs-theme-chooser",{},[254],{"type":19,"tag":97,"props":255,"children":256},{"id":99},[],{"type":19,"tag":28,"props":258,"children":259},{},[260,262,269,271,277],{"type":25,"value":261},"To create your own theme see ",{"type":19,"tag":263,"props":264,"children":266},"a",{"href":265},"/design-system/design/theming-guidance-for-designers",[267],{"type":25,"value":268},"theming guidance for designers",{"type":25,"value":270}," or ",{"type":19,"tag":263,"props":272,"children":274},{"href":273},"/design-system/develop/theming",[275],{"type":25,"value":276},"theming guidance for developers",{"type":25,"value":278},".",{"title":10,"searchDepth":280,"depth":280,"links":281},2,[282,287,291],{"id":22,"depth":280,"text":26,"children":283},[284,286],{"id":104,"depth":285,"text":107},3,{"id":133,"depth":285,"text":136},{"id":186,"depth":280,"text":189,"children":288},[289,290],{"id":202,"depth":285,"text":212},{"id":223,"depth":285,"text":226},{"id":241,"depth":280,"text":244},"markdown","content:design-system:5.components:tabs.md","content","design-system/5.components/tabs.md","md",["ShallowRef",298],["ShallowReactive",299],{"/design-system/components/tabs":300},[301,307],{"_path":302,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":303,"description":304,"layout":13,"label":14,"_type":292,"_id":305,"_source":294,"_file":306,"_extension":296},"/design-system/components/table","Table","The Table component makes it easier for users to scan and compare data and content.","content:design-system:5.components:table.md","design-system/5.components/table.md",{"_path":308,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":309,"description":310,"layout":13,"label":14,"_type":292,"_id":311,"_source":294,"_file":312,"_extension":296},"/design-system/components/tag","Tag","The Tag component adds, and draws attention to, a category name for your content.","content:design-system:5.components:tag.md","design-system/5.components/tag.md",["ShallowRef",314],{},[316,321,560],{"title":317,"_path":318,"icon":319,"layout":320},"Ripple Design System","/","carbon:home","home",{"title":322,"_path":323,"children":324},"Design System","/design-system",[325,341,356,384,418],{"title":326,"_path":327,"children":328},"About","/design-system/about",[329,332,335,338],{"title":330,"_path":331,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":333,"_path":334,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":336,"_path":337,"layout":13},"Support","/design-system/about/getting-support",{"title":339,"_path":340,"layout":13},"Contributing","/design-system/about/contributing",{"title":342,"_path":343,"children":344},"Design","/design-system/design",[345,348,351,354],{"title":346,"_path":347,"layout":13},"Getting started","/design-system/design/getting-started",{"title":349,"_path":350,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":352,"_path":353,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":355,"_path":265,"layout":13},"Theming guidance for designers",{"title":357,"_path":358,"children":359},"Develop","/design-system/develop",[360,362,364,366],{"title":346,"_path":361,"layout":13},"/design-system/develop/getting-started",{"title":339,"_path":363,"layout":13},"/design-system/develop/contributing",{"title":365,"_path":273,"layout":13},"Theme and brand application",{"title":26,"_path":367,"children":368,"layout":13},"/design-system/develop/usage",[369,372,375,378,381],{"title":370,"_path":371,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":373,"_path":374,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":376,"_path":377,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":379,"_path":380,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":382,"_path":383,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":385,"_path":386,"children":387},"Styles","/design-system/styles",[388,391,394,397,400,403,406,409,412,415],{"title":389,"_path":390,"layout":13},"Colour","/design-system/styles/colour",{"title":392,"_path":393,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":395,"_path":396,"layout":13},"Grid","/design-system/styles/grid",{"title":398,"_path":399,"layout":13},"Icons","/design-system/styles/icons",{"title":401,"_path":402,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":404,"_path":405,"layout":13},"Layout","/design-system/styles/layout",{"title":407,"_path":408,"layout":13},"Logo","/design-system/styles/logo",{"title":410,"_path":411,"layout":13},"Motion","/design-system/styles/motion",{"title":413,"_path":414,"layout":13},"Spacing","/design-system/styles/spacing",{"title":416,"_path":417,"layout":13},"Typography","/design-system/styles/typography",{"title":419,"_path":420,"children":421},"Components","/design-system/components",[422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482,485,488,491,494,497,500,503,506,509,512,515,518,521,524,527,530,533,536,539,542,545,548,549,550,551,554,557],{"title":423,"_path":424,"layout":13},"Accordion","/design-system/components/accordion",{"title":426,"_path":427,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":429,"_path":430,"layout":13},"Alert","/design-system/components/alert",{"title":432,"_path":433,"layout":13},"Block quote","/design-system/components/block-quote",{"title":435,"_path":436,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":438,"_path":439,"layout":13},"Button","/design-system/components/button",{"title":441,"_path":442,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":444,"_path":445,"layout":13},"Callout","/design-system/components/callout",{"title":447,"_path":448,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":450,"_path":451,"layout":13},"Card","/design-system/components/card",{"title":453,"_path":454,"layout":13},"Carousel","/design-system/components/carousel",{"title":456,"_path":457,"layout":13},"Category grid","/design-system/components/category-grid",{"title":459,"_path":460,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":462,"_path":463,"layout":13},"Chip","/design-system/components/chip",{"title":465,"_path":466,"layout":13},"Contact us","/design-system/components/contact-us",{"title":468,"_path":469,"layout":13},"Date input","/design-system/components/date-input",{"title":471,"_path":472,"layout":13},"Detail list","/design-system/components/detail-list",{"title":474,"_path":475,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":477,"_path":478,"layout":13},"File","/design-system/components/file",{"title":480,"_path":481,"layout":13},"Footer","/design-system/components/footer",{"title":483,"_path":484,"layout":13},"Form","/design-system/components/form",{"title":486,"_path":487,"layout":13},"Form alert","/design-system/components/form-alert",{"title":489,"_path":490,"layout":13},"Header","/design-system/components/header",{"title":492,"_path":493,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":495,"_path":496,"layout":13},"Input field","/design-system/components/input-field",{"title":498,"_path":499,"layout":13},"Key dates","/design-system/components/key-dates",{"title":501,"_path":502,"layout":13},"Media","/design-system/components/media",{"title":504,"_path":505,"layout":13},"Media embed","/design-system/components/media-embed",{"title":507,"_path":508,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":510,"_path":511,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":513,"_path":514,"layout":13},"Option button","/design-system/components/option-button",{"title":516,"_path":517,"layout":13},"Page action","/design-system/components/page-action",{"title":519,"_path":520,"layout":13},"Pagination","/design-system/components/pagination",{"title":522,"_path":523,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":525,"_path":526,"layout":13},"Profile","/design-system/components/profile",{"title":528,"_path":529,"layout":13},"Radio button","/design-system/components/radio-button",{"title":531,"_path":532,"layout":13},"Related links","/design-system/components/related-links",{"title":534,"_path":535,"layout":13},"Results listing","/design-system/components/results-listing",{"title":537,"_path":538,"layout":13},"Search bar","/design-system/components/search-bar",{"title":540,"_path":541,"layout":13},"Skip link","/design-system/components/skip-link",{"title":543,"_path":544,"layout":13},"Social share","/design-system/components/social-share",{"title":546,"_path":547,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":303,"_path":302,"layout":13},{"title":11,"_path":7,"layout":13},{"title":309,"_path":308,"layout":13},{"title":552,"_path":553,"layout":13},"Text area","/design-system/components/text-area",{"title":555,"_path":556,"layout":13},"Timeline","/design-system/components/timeline",{"title":558,"_path":559,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":561,"_path":562,"children":563,"layout":13},"Ripple Framework","/framework",[564,565,583,605],{"title":561,"_path":562,"layout":13},{"title":566,"_path":567,"children":568},"Key Concepts","/framework/key-concepts",[569,571,574,577,580],{"title":376,"_path":570,"layout":13},"/framework/key-concepts/nuxt",{"title":572,"_path":573,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":575,"_path":576,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":578,"_path":579,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":581,"_path":582,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":584,"_path":585,"children":586},"Guides","/framework/guides",[587,590,593,596,599,602],{"title":588,"_path":589,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":591,"_path":592,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":594,"_path":595,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":597,"_path":598,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":600,"_path":601,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":603,"_path":604,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":606,"_path":607,"layout":13},"Core modules","/framework/core-modules",["Reactive",609],["Set"],["Reactive",611],{"module-navigation":612},null,true,1714695154886]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Tabs</h1><p class="rpl-type-p-large" data-v-3163c6df>The Tab component lets you organise related content so that users can switch between related information on the same page.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use tabs to let users stay on the same page, but access more content.<!--]--></p><p><!--[-->Only one tab is active at a time. Tabs help users navigate between, and display and hide, relevant content on your page so long as:<!--]--></p><ul><!--[--><li><!--[-->you can split, categorise and clearly label the content<!--]--></li><li><!--[-->there is a section more relevant for most users, which is placed first<!--]--></li><li><!--[-->seeing the all sections at the same time is not needed<!--]--></li><li><!--[-->you have a minimum of 2 tabs.<!--]--></li><!--]--></ul><p><!--[-->Use tabs to organise content so a user doesn&#39;t have to navigate away to complete their task. Tabs are useful for maps or dashboards.<!--]--></p><p><!--[-->Never use tabs if your content is sequential. Use it to present related content together, as a group.<!--]--></p><p><!--[-->Tabs include:<!--]--></p><ul><!--[--><li><!--[-->labels<!--]--></li><li><!--[-->an optional icon.<!--]--></li><!--]--></ul><p><!--[-->Icons tell the user the category of content under a tab. Keep icons simple and easily understood, and reinforce the label.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-tabs--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-tabs--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Order your tabs according to importance.<!--]--></li><li><!--[-->Labels should clearly and succinctly describe the content within the tab.<!--]--></li><li><!--[-->Only use tabs to group content that all sits at the same level of hierarchy.<!--]--></li><li><!--[-->Limit labels to one word and ensure they are unique.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Never use tabs within tabs.<!--]--></li><li><!--[-->Don&#39;t display disabled tabs.<!--]--></li><li><!--[-->Don&#39;t display more than one row of tabs when using the horizontal variant.<!--]--></li><li><!--[-->Don&#39;t use tabs for important information, since a user will choose which tab to open, so they may not see some content.<!--]--></li><li><!--[-->Don&#39;t use if your content is short, instead use lists or paragraph text.<!--]--></li><li><!--[-->Tabs are not a substitute for primary navigation, so never use tabs as primary navigation.<!--]--></li><li><!--[-->Don&#39;t use tabs to tell the user about their progress through a page or content.<!--]--></li><li><!--[-->Don’t use tabs when the user needs to compare information, since only one tab is visible at a time.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->Tabs have 2 display variants:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->vertical.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><p><!--[-->The default variant sets the tab group bottom border to span the full available content width.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-tabs--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-tabs--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="vertical" data-v-ea525968><a href="#vertical" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Vertical<!--]--></a></h2><p><!--[-->The vertical variant sets the tab group left border to span the height of the tab group.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-tabs--vertical&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-tabs--vertical&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Tabs use colour to represent interaction states.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-tabs--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-tabs--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/tabs.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/tabs/_payload.json">[{"state":1,"once":608,"_errors":610,"serverRendered":613,"path":7,"prerenderedAt":614},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":297,"$sdd-globals":313,"$sdd-navigation":315},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/tabs":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":292,"_id":293,"_source":294,"_file":295,"_extension":296},"/design-system/components/tabs","components",false,"","Tabs","The Tab component lets you organise related content so that users can switch between related information on the same page.","page","Core",{"type":16,"children":17,"toc":279},"root",[18,27,33,38,63,68,73,78,91,96,101,108,131,137,180,184,190,195,208,213,218,221,227,232,236,239,245,250,257],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use tabs to let users stay on the same page, but access more content.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Only one tab is active at a time. Tabs help users navigate between, and display and hide, relevant content on your page so long as:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48,53,58],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"you can split, categorise and clearly label the content",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"there is a section more relevant for most users, which is placed first",{"type":19,"tag":43,"props":54,"children":55},{},[56],{"type":25,"value":57},"seeing the all sections at the same time is not needed",{"type":19,"tag":43,"props":59,"children":60},{},[61],{"type":25,"value":62},"you have a minimum of 2 tabs.",{"type":19,"tag":28,"props":64,"children":65},{},[66],{"type":25,"value":67},"Use tabs to organise content so a user doesn't have to navigate away to complete their task. Tabs are useful for maps or dashboards.",{"type":19,"tag":28,"props":69,"children":70},{},[71],{"type":25,"value":72},"Never use tabs if your content is sequential. Use it to present related content together, as a group.",{"type":19,"tag":28,"props":74,"children":75},{},[76],{"type":25,"value":77},"Tabs include:",{"type":19,"tag":39,"props":79,"children":80},{},[81,86],{"type":19,"tag":43,"props":82,"children":83},{},[84],{"type":25,"value":85},"labels",{"type":19,"tag":43,"props":87,"children":88},{},[89],{"type":25,"value":90},"an optional icon.",{"type":19,"tag":28,"props":92,"children":93},{},[94],{"type":25,"value":95},"Icons tell the user the category of content under a tab. Keep icons simple and easily understood, and reinforce the label.",{"type":19,"tag":97,"props":98,"children":100},"docs-example",{"id":99},"core-navigation-tabs--default-story",[],{"type":19,"tag":102,"props":103,"children":105},"h3",{"id":104},"when-and-how-to-use",[106],{"type":25,"value":107},"When and how to use",{"type":19,"tag":39,"props":109,"children":110},{},[111,116,121,126],{"type":19,"tag":43,"props":112,"children":113},{},[114],{"type":25,"value":115},"Order your tabs according to importance.",{"type":19,"tag":43,"props":117,"children":118},{},[119],{"type":25,"value":120},"Labels should clearly and succinctly describe the content within the tab.",{"type":19,"tag":43,"props":122,"children":123},{},[124],{"type":25,"value":125},"Only use tabs to group content that all sits at the same level of hierarchy.",{"type":19,"tag":43,"props":127,"children":128},{},[129],{"type":25,"value":130},"Limit labels to one word and ensure they are unique.",{"type":19,"tag":102,"props":132,"children":134},{"id":133},"when-and-how-not-to-use",[135],{"type":25,"value":136},"When and how not to use",{"type":19,"tag":39,"props":138,"children":139},{},[140,145,150,155,160,165,170,175],{"type":19,"tag":43,"props":141,"children":142},{},[143],{"type":25,"value":144},"Never use tabs within tabs.",{"type":19,"tag":43,"props":146,"children":147},{},[148],{"type":25,"value":149},"Don't display disabled tabs.",{"type":19,"tag":43,"props":151,"children":152},{},[153],{"type":25,"value":154},"Don't display more than one row of tabs when using the horizontal variant.",{"type":19,"tag":43,"props":156,"children":157},{},[158],{"type":25,"value":159},"Don't use tabs for important information, since a user will choose which tab to open, so they may not see some content.",{"type":19,"tag":43,"props":161,"children":162},{},[163],{"type":25,"value":164},"Don't use if your content is short, instead use lists or paragraph text.",{"type":19,"tag":43,"props":166,"children":167},{},[168],{"type":25,"value":169},"Tabs are not a substitute for primary navigation, so never use tabs as primary navigation.",{"type":19,"tag":43,"props":171,"children":172},{},[173],{"type":25,"value":174},"Don't use tabs to tell the user about their progress through a page or content.",{"type":19,"tag":43,"props":176,"children":177},{},[178],{"type":25,"value":179},"Don’t use tabs when the user needs to compare information, since only one tab is visible at a time.",{"type":19,"tag":181,"props":182,"children":183},"hr",{},[],{"type":19,"tag":20,"props":185,"children":187},{"id":186},"variants",[188],{"type":25,"value":189},"Variants",{"type":19,"tag":28,"props":191,"children":192},{},[193],{"type":25,"value":194},"Tabs have 2 display variants:",{"type":19,"tag":39,"props":196,"children":197},{},[198,203],{"type":19,"tag":43,"props":199,"children":200},{},[201],{"type":25,"value":202},"default",{"type":19,"tag":43,"props":204,"children":205},{},[206],{"type":25,"value":207},"vertical.",{"type":19,"tag":102,"props":209,"children":210},{"id":202},[211],{"type":25,"value":212},"Default",{"type":19,"tag":28,"props":214,"children":215},{},[216],{"type":25,"value":217},"The default variant sets the tab group bottom border to span the full available content width.",{"type":19,"tag":97,"props":219,"children":220},{"id":99},[],{"type":19,"tag":102,"props":222,"children":224},{"id":223},"vertical",[225],{"type":25,"value":226},"Vertical",{"type":19,"tag":28,"props":228,"children":229},{},[230],{"type":25,"value":231},"The vertical variant sets the tab group left border to span the height of the tab group.",{"type":19,"tag":97,"props":233,"children":235},{"id":234},"core-navigation-tabs--vertical",[],{"type":19,"tag":181,"props":237,"children":238},{},[],{"type":19,"tag":20,"props":240,"children":242},{"id":241},"theming",[243],{"type":25,"value":244},"Theming",{"type":19,"tag":28,"props":246,"children":247},{},[248],{"type":25,"value":249},"Tabs use colour to represent interaction states.",{"type":19,"tag":251,"props":252,"children":253},"docs-theme-chooser",{},[254],{"type":19,"tag":97,"props":255,"children":256},{"id":99},[],{"type":19,"tag":28,"props":258,"children":259},{},[260,262,269,271,277],{"type":25,"value":261},"To create your own theme see ",{"type":19,"tag":263,"props":264,"children":266},"a",{"href":265},"/design-system/design/theming-guidance-for-designers",[267],{"type":25,"value":268},"theming guidance for designers",{"type":25,"value":270}," or ",{"type":19,"tag":263,"props":272,"children":274},{"href":273},"/design-system/develop/theming",[275],{"type":25,"value":276},"theming guidance for developers",{"type":25,"value":278},".",{"title":10,"searchDepth":280,"depth":280,"links":281},2,[282,287,291],{"id":22,"depth":280,"text":26,"children":283},[284,286],{"id":104,"depth":285,"text":107},3,{"id":133,"depth":285,"text":136},{"id":186,"depth":280,"text":189,"children":288},[289,290],{"id":202,"depth":285,"text":212},{"id":223,"depth":285,"text":226},{"id":241,"depth":280,"text":244},"markdown","content:design-system:5.components:tabs.md","content","design-system/5.components/tabs.md","md",["ShallowRef",298],["ShallowReactive",299],{"/design-system/components/tabs":300},[301,307],{"_path":302,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":303,"description":304,"layout":13,"label":14,"_type":292,"_id":305,"_source":294,"_file":306,"_extension":296},"/design-system/components/table","Table","The Table component makes it easier for users to scan and compare data and content.","content:design-system:5.components:table.md","design-system/5.components/table.md",{"_path":308,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":309,"description":310,"layout":13,"label":14,"_type":292,"_id":311,"_source":294,"_file":312,"_extension":296},"/design-system/components/tag","Tag","The Tag component adds, and draws attention to, a category name for your content.","content:design-system:5.components:tag.md","design-system/5.components/tag.md",["ShallowRef",314],{},[316,321,560],{"title":317,"_path":318,"icon":319,"layout":320},"Ripple Design System","/","carbon:home","home",{"title":322,"_path":323,"children":324},"Design System","/design-system",[325,341,356,384,418],{"title":326,"_path":327,"children":328},"About","/design-system/about",[329,332,335,338],{"title":330,"_path":331,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":333,"_path":334,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":336,"_path":337,"layout":13},"Support","/design-system/about/getting-support",{"title":339,"_path":340,"layout":13},"Contributing","/design-system/about/contributing",{"title":342,"_path":343,"children":344},"Design","/design-system/design",[345,348,351,354],{"title":346,"_path":347,"layout":13},"Getting started","/design-system/design/getting-started",{"title":349,"_path":350,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":352,"_path":353,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":355,"_path":265,"layout":13},"Theming guidance for designers",{"title":357,"_path":358,"children":359},"Develop","/design-system/develop",[360,362,364,366],{"title":346,"_path":361,"layout":13},"/design-system/develop/getting-started",{"title":339,"_path":363,"layout":13},"/design-system/develop/contributing",{"title":365,"_path":273,"layout":13},"Theme and brand application",{"title":26,"_path":367,"children":368,"layout":13},"/design-system/develop/usage",[369,372,375,378,381],{"title":370,"_path":371,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":373,"_path":374,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":376,"_path":377,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":379,"_path":380,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":382,"_path":383,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":385,"_path":386,"children":387},"Styles","/design-system/styles",[388,391,394,397,400,403,406,409,412,415],{"title":389,"_path":390,"layout":13},"Colour","/design-system/styles/colour",{"title":392,"_path":393,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":395,"_path":396,"layout":13},"Grid","/design-system/styles/grid",{"title":398,"_path":399,"layout":13},"Icons","/design-system/styles/icons",{"title":401,"_path":402,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":404,"_path":405,"layout":13},"Layout","/design-system/styles/layout",{"title":407,"_path":408,"layout":13},"Logo","/design-system/styles/logo",{"title":410,"_path":411,"layout":13},"Motion","/design-system/styles/motion",{"title":413,"_path":414,"layout":13},"Spacing","/design-system/styles/spacing",{"title":416,"_path":417,"layout":13},"Typography","/design-system/styles/typography",{"title":419,"_path":420,"children":421},"Components","/design-system/components",[422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482,485,488,491,494,497,500,503,506,509,512,515,518,521,524,527,530,533,536,539,542,545,548,549,550,551,554,557],{"title":423,"_path":424,"layout":13},"Accordion","/design-system/components/accordion",{"title":426,"_path":427,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":429,"_path":430,"layout":13},"Alert","/design-system/components/alert",{"title":432,"_path":433,"layout":13},"Block quote","/design-system/components/block-quote",{"title":435,"_path":436,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":438,"_path":439,"layout":13},"Button","/design-system/components/button",{"title":441,"_path":442,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":444,"_path":445,"layout":13},"Callout","/design-system/components/callout",{"title":447,"_path":448,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":450,"_path":451,"layout":13},"Card","/design-system/components/card",{"title":453,"_path":454,"layout":13},"Carousel","/design-system/components/carousel",{"title":456,"_path":457,"layout":13},"Category grid","/design-system/components/category-grid",{"title":459,"_path":460,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":462,"_path":463,"layout":13},"Chip","/design-system/components/chip",{"title":465,"_path":466,"layout":13},"Contact us","/design-system/components/contact-us",{"title":468,"_path":469,"layout":13},"Date input","/design-system/components/date-input",{"title":471,"_path":472,"layout":13},"Detail list","/design-system/components/detail-list",{"title":474,"_path":475,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":477,"_path":478,"layout":13},"File","/design-system/components/file",{"title":480,"_path":481,"layout":13},"Footer","/design-system/components/footer",{"title":483,"_path":484,"layout":13},"Form","/design-system/components/form",{"title":486,"_path":487,"layout":13},"Form alert","/design-system/components/form-alert",{"title":489,"_path":490,"layout":13},"Header","/design-system/components/header",{"title":492,"_path":493,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":495,"_path":496,"layout":13},"Input field","/design-system/components/input-field",{"title":498,"_path":499,"layout":13},"Key dates","/design-system/components/key-dates",{"title":501,"_path":502,"layout":13},"Media","/design-system/components/media",{"title":504,"_path":505,"layout":13},"Media embed","/design-system/components/media-embed",{"title":507,"_path":508,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":510,"_path":511,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":513,"_path":514,"layout":13},"Option button","/design-system/components/option-button",{"title":516,"_path":517,"layout":13},"Page action","/design-system/components/page-action",{"title":519,"_path":520,"layout":13},"Pagination","/design-system/components/pagination",{"title":522,"_path":523,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":525,"_path":526,"layout":13},"Profile","/design-system/components/profile",{"title":528,"_path":529,"layout":13},"Radio button","/design-system/components/radio-button",{"title":531,"_path":532,"layout":13},"Related links","/design-system/components/related-links",{"title":534,"_path":535,"layout":13},"Results listing","/design-system/components/results-listing",{"title":537,"_path":538,"layout":13},"Search bar","/design-system/components/search-bar",{"title":540,"_path":541,"layout":13},"Skip link","/design-system/components/skip-link",{"title":543,"_path":544,"layout":13},"Social share","/design-system/components/social-share",{"title":546,"_path":547,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":303,"_path":302,"layout":13},{"title":11,"_path":7,"layout":13},{"title":309,"_path":308,"layout":13},{"title":552,"_path":553,"layout":13},"Text area","/design-system/components/text-area",{"title":555,"_path":556,"layout":13},"Timeline","/design-system/components/timeline",{"title":558,"_path":559,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":561,"_path":562,"children":563,"layout":13},"Ripple Framework","/framework",[564,565,583,605],{"title":561,"_path":562,"layout":13},{"title":566,"_path":567,"children":568},"Key Concepts","/framework/key-concepts",[569,571,574,577,580],{"title":376,"_path":570,"layout":13},"/framework/key-concepts/nuxt",{"title":572,"_path":573,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":575,"_path":576,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":578,"_path":579,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":581,"_path":582,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":584,"_path":585,"children":586},"Guides","/framework/guides",[587,590,593,596,599,602],{"title":588,"_path":589,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":591,"_path":592,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":594,"_path":595,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":597,"_path":598,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":600,"_path":601,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":603,"_path":604,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":606,"_path":607,"layout":13},"Core modules","/framework/core-modules",["Reactive",609],["Set"],["Reactive",611],{"module-navigation":612},null,true,1714695653091]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/tag/_payload.json b/design-system/components/tag/_payload.json
index f4277626ca..5fc8194a26 100644
--- a/design-system/components/tag/_payload.json
+++ b/design-system/components/tag/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":104,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695154925]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":104,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695653096]
\ No newline at end of file
diff --git a/design-system/components/tag/index.html b/design-system/components/tag/index.html
index b708151694..fb71be8f27 100644
--- a/design-system/components/tag/index.html
+++ b/design-system/components/tag/index.html
@@ -27,60 +27,60 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -92,8 +92,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Tag</h1><p class="rpl-type-p-large" data-v-3163c6df>The Tag component adds, and draws attention to, a category name for your content.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use tags to help categorise content. Tags help users to scan and find content that&#39;s relevant to them.<!--]--></p><p><!--[-->Content can have more than one category or theme. Using the tag component helps indicate this to the user.<!--]--></p><p><!--[-->When naming tags, use a noun or adjective. Don&#39;t use verbs as a user may confuse the tag with an action.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-tag--neutral&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-tag--neutral&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use keywords.<!--]--></li><li><!--[-->Use to draw attention to a category of content or information.<!--]--></li><li><!--[-->Use nouns or adjectives.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t use punctuation.<!--]--></li><li><!--[-->Don&#39;t overuse tags.<!--]--></li><li><!--[-->Don&#39;t use icons in the tags.<!--]--></li><li><!--[-->Don&#39;t use as a heading.<!--]--></li><li><!--[-->Don&#39;t use more than 2 words.<!--]--></li><li><!--[-->Don&#39;t use as a link or action.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->Tags have 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, for use on neutral backgrounds<!--]--></li><li><!--[-->neutral, for use on white backgrounds.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-tag--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-tag--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="neutral" data-v-ea525968><a href="#neutral" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Neutral<!--]--></a></h2><p><!--[-->Use the reverse variant when the chip appears on the primary colour.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-tag--neutral&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-tag--neutral&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/tag.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/tag/_payload.json">[{"state":1,"once":496,"_errors":498,"serverRendered":501,"path":7,"prerenderedAt":502},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":183,"$sdd-globals":199,"$sdd-navigation":201},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/tag":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":178,"_id":179,"_source":180,"_file":181,"_extension":182},"/design-system/components/tag","components",false,"","Tag","The Tag component adds, and draws attention to, a category name for your content.","page","Core",{"type":16,"children":17,"toc":166},"root",[18,27,33,38,43,48,55,75,81,114,118,124,129,142,148,152,158,163],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use tags to help categorise content. Tags help users to scan and find content that's relevant to them.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Content can have more than one category or theme. Using the tag component helps indicate this to the user.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"When naming tags, use a noun or adjective. Don't use verbs as a user may confuse the tag with an action.",{"type":19,"tag":44,"props":45,"children":47},"docs-example",{"id":46},"core-containers-tag--neutral",[],{"type":19,"tag":49,"props":50,"children":52},"h3",{"id":51},"when-and-how-to-use",[53],{"type":25,"value":54},"When and how to use",{"type":19,"tag":56,"props":57,"children":58},"ul",{},[59,65,70],{"type":19,"tag":60,"props":61,"children":62},"li",{},[63],{"type":25,"value":64},"Use keywords.",{"type":19,"tag":60,"props":66,"children":67},{},[68],{"type":25,"value":69},"Use to draw attention to a category of content or information.",{"type":19,"tag":60,"props":71,"children":72},{},[73],{"type":25,"value":74},"Use nouns or adjectives.",{"type":19,"tag":49,"props":76,"children":78},{"id":77},"when-and-how-not-to-use",[79],{"type":25,"value":80},"When and how not to use",{"type":19,"tag":56,"props":82,"children":83},{},[84,89,94,99,104,109],{"type":19,"tag":60,"props":85,"children":86},{},[87],{"type":25,"value":88},"Don't use punctuation.",{"type":19,"tag":60,"props":90,"children":91},{},[92],{"type":25,"value":93},"Don't overuse tags.",{"type":19,"tag":60,"props":95,"children":96},{},[97],{"type":25,"value":98},"Don't use icons in the tags.",{"type":19,"tag":60,"props":100,"children":101},{},[102],{"type":25,"value":103},"Don't use as a heading.",{"type":19,"tag":60,"props":105,"children":106},{},[107],{"type":25,"value":108},"Don't use more than 2 words.",{"type":19,"tag":60,"props":110,"children":111},{},[112],{"type":25,"value":113},"Don't use as a link or action.",{"type":19,"tag":115,"props":116,"children":117},"hr",{},[],{"type":19,"tag":20,"props":119,"children":121},{"id":120},"variants",[122],{"type":25,"value":123},"Variants",{"type":19,"tag":28,"props":125,"children":126},{},[127],{"type":25,"value":128},"Tags have 2 variants:",{"type":19,"tag":56,"props":130,"children":131},{},[132,137],{"type":19,"tag":60,"props":133,"children":134},{},[135],{"type":25,"value":136},"default, for use on neutral backgrounds",{"type":19,"tag":60,"props":138,"children":139},{},[140],{"type":25,"value":141},"neutral, for use on white backgrounds.",{"type":19,"tag":49,"props":143,"children":145},{"id":144},"default",[146],{"type":25,"value":147},"Default",{"type":19,"tag":44,"props":149,"children":151},{"id":150},"core-containers-tag--default-story",[],{"type":19,"tag":49,"props":153,"children":155},{"id":154},"neutral",[156],{"type":25,"value":157},"Neutral",{"type":19,"tag":28,"props":159,"children":160},{},[161],{"type":25,"value":162},"Use the reverse variant when the chip appears on the primary colour.",{"type":19,"tag":44,"props":164,"children":165},{"id":46},[],{"title":10,"searchDepth":167,"depth":167,"links":168},2,[169,174],{"id":22,"depth":167,"text":26,"children":170},[171,173],{"id":51,"depth":172,"text":54},3,{"id":77,"depth":172,"text":80},{"id":120,"depth":167,"text":123,"children":175},[176,177],{"id":144,"depth":172,"text":147},{"id":154,"depth":172,"text":157},"markdown","content:design-system:5.components:tag.md","content","design-system/5.components/tag.md","md",["ShallowRef",184],["ShallowReactive",185],{"/design-system/components/tag":186},[187,193],{"_path":188,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":189,"description":190,"layout":13,"label":14,"_type":178,"_id":191,"_source":180,"_file":192,"_extension":182},"/design-system/components/tabs","Tabs","The Tab component lets you organise related content so that users can switch between related information on the same page.","content:design-system:5.components:tabs.md","design-system/5.components/tabs.md",{"_path":194,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":195,"description":196,"layout":13,"label":14,"_type":178,"_id":197,"_source":180,"_file":198,"_extension":182},"/design-system/components/text-area","Text area","The Text area component lets users select one option from a list.","content:design-system:5.components:text-area.md","design-system/5.components/text-area.md",["ShallowRef",200],{},[202,207,448],{"title":203,"_path":204,"icon":205,"layout":206},"Ripple Design System","/","carbon:home","home",{"title":208,"_path":209,"children":210},"Design System","/design-system",[211,227,243,272,306],{"title":212,"_path":213,"children":214},"About","/design-system/about",[215,218,221,224],{"title":216,"_path":217,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":219,"_path":220,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":222,"_path":223,"layout":13},"Support","/design-system/about/getting-support",{"title":225,"_path":226,"layout":13},"Contributing","/design-system/about/contributing",{"title":228,"_path":229,"children":230},"Design","/design-system/design",[231,234,237,240],{"title":232,"_path":233,"layout":13},"Getting started","/design-system/design/getting-started",{"title":235,"_path":236,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":238,"_path":239,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":241,"_path":242,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":244,"_path":245,"children":246},"Develop","/design-system/develop",[247,249,251,254],{"title":232,"_path":248,"layout":13},"/design-system/develop/getting-started",{"title":225,"_path":250,"layout":13},"/design-system/develop/contributing",{"title":252,"_path":253,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":255,"children":256,"layout":13},"/design-system/develop/usage",[257,260,263,266,269],{"title":258,"_path":259,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":261,"_path":262,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":264,"_path":265,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":267,"_path":268,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":270,"_path":271,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":273,"_path":274,"children":275},"Styles","/design-system/styles",[276,279,282,285,288,291,294,297,300,303],{"title":277,"_path":278,"layout":13},"Colour","/design-system/styles/colour",{"title":280,"_path":281,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":283,"_path":284,"layout":13},"Grid","/design-system/styles/grid",{"title":286,"_path":287,"layout":13},"Icons","/design-system/styles/icons",{"title":289,"_path":290,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":292,"_path":293,"layout":13},"Layout","/design-system/styles/layout",{"title":295,"_path":296,"layout":13},"Logo","/design-system/styles/logo",{"title":298,"_path":299,"layout":13},"Motion","/design-system/styles/motion",{"title":301,"_path":302,"layout":13},"Spacing","/design-system/styles/spacing",{"title":304,"_path":305,"layout":13},"Typography","/design-system/styles/typography",{"title":307,"_path":308,"children":309},"Components","/design-system/components",[310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,440,441,442,445],{"title":311,"_path":312,"layout":13},"Accordion","/design-system/components/accordion",{"title":314,"_path":315,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":317,"_path":318,"layout":13},"Alert","/design-system/components/alert",{"title":320,"_path":321,"layout":13},"Block quote","/design-system/components/block-quote",{"title":323,"_path":324,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":326,"_path":327,"layout":13},"Button","/design-system/components/button",{"title":329,"_path":330,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":332,"_path":333,"layout":13},"Callout","/design-system/components/callout",{"title":335,"_path":336,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":338,"_path":339,"layout":13},"Card","/design-system/components/card",{"title":341,"_path":342,"layout":13},"Carousel","/design-system/components/carousel",{"title":344,"_path":345,"layout":13},"Category grid","/design-system/components/category-grid",{"title":347,"_path":348,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":350,"_path":351,"layout":13},"Chip","/design-system/components/chip",{"title":353,"_path":354,"layout":13},"Contact us","/design-system/components/contact-us",{"title":356,"_path":357,"layout":13},"Date input","/design-system/components/date-input",{"title":359,"_path":360,"layout":13},"Detail list","/design-system/components/detail-list",{"title":362,"_path":363,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":365,"_path":366,"layout":13},"File","/design-system/components/file",{"title":368,"_path":369,"layout":13},"Footer","/design-system/components/footer",{"title":371,"_path":372,"layout":13},"Form","/design-system/components/form",{"title":374,"_path":375,"layout":13},"Form alert","/design-system/components/form-alert",{"title":377,"_path":378,"layout":13},"Header","/design-system/components/header",{"title":380,"_path":381,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":383,"_path":384,"layout":13},"Input field","/design-system/components/input-field",{"title":386,"_path":387,"layout":13},"Key dates","/design-system/components/key-dates",{"title":389,"_path":390,"layout":13},"Media","/design-system/components/media",{"title":392,"_path":393,"layout":13},"Media embed","/design-system/components/media-embed",{"title":395,"_path":396,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":398,"_path":399,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":401,"_path":402,"layout":13},"Option button","/design-system/components/option-button",{"title":404,"_path":405,"layout":13},"Page action","/design-system/components/page-action",{"title":407,"_path":408,"layout":13},"Pagination","/design-system/components/pagination",{"title":410,"_path":411,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":413,"_path":414,"layout":13},"Profile","/design-system/components/profile",{"title":416,"_path":417,"layout":13},"Radio button","/design-system/components/radio-button",{"title":419,"_path":420,"layout":13},"Related links","/design-system/components/related-links",{"title":422,"_path":423,"layout":13},"Results listing","/design-system/components/results-listing",{"title":425,"_path":426,"layout":13},"Search bar","/design-system/components/search-bar",{"title":428,"_path":429,"layout":13},"Skip link","/design-system/components/skip-link",{"title":431,"_path":432,"layout":13},"Social share","/design-system/components/social-share",{"title":434,"_path":435,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":437,"_path":438,"layout":13},"Table","/design-system/components/table",{"title":189,"_path":188,"layout":13},{"title":11,"_path":7,"layout":13},{"title":195,"_path":194,"layout":13},{"title":443,"_path":444,"layout":13},"Timeline","/design-system/components/timeline",{"title":446,"_path":447,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":449,"_path":450,"children":451,"layout":13},"Ripple Framework","/framework",[452,453,471,493],{"title":449,"_path":450,"layout":13},{"title":454,"_path":455,"children":456},"Key Concepts","/framework/key-concepts",[457,459,462,465,468],{"title":264,"_path":458,"layout":13},"/framework/key-concepts/nuxt",{"title":460,"_path":461,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":463,"_path":464,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":466,"_path":467,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":469,"_path":470,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":472,"_path":473,"children":474},"Guides","/framework/guides",[475,478,481,484,487,490],{"title":476,"_path":477,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":479,"_path":480,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":482,"_path":483,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":485,"_path":486,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":488,"_path":489,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":491,"_path":492,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":494,"_path":495,"layout":13},"Core modules","/framework/core-modules",["Reactive",497],["Set"],["Reactive",499],{"module-navigation":500},null,true,1714695154925]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Tag</h1><p class="rpl-type-p-large" data-v-3163c6df>The Tag component adds, and draws attention to, a category name for your content.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use tags to help categorise content. Tags help users to scan and find content that&#39;s relevant to them.<!--]--></p><p><!--[-->Content can have more than one category or theme. Using the tag component helps indicate this to the user.<!--]--></p><p><!--[-->When naming tags, use a noun or adjective. Don&#39;t use verbs as a user may confuse the tag with an action.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-tag--neutral&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-tag--neutral&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use keywords.<!--]--></li><li><!--[-->Use to draw attention to a category of content or information.<!--]--></li><li><!--[-->Use nouns or adjectives.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t use punctuation.<!--]--></li><li><!--[-->Don&#39;t overuse tags.<!--]--></li><li><!--[-->Don&#39;t use icons in the tags.<!--]--></li><li><!--[-->Don&#39;t use as a heading.<!--]--></li><li><!--[-->Don&#39;t use more than 2 words.<!--]--></li><li><!--[-->Don&#39;t use as a link or action.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->Tags have 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, for use on neutral backgrounds<!--]--></li><li><!--[-->neutral, for use on white backgrounds.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-tag--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-tag--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="neutral" data-v-ea525968><a href="#neutral" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Neutral<!--]--></a></h2><p><!--[-->Use the reverse variant when the chip appears on the primary colour.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-tag--neutral&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-tag--neutral&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/tag.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/tag/_payload.json">[{"state":1,"once":496,"_errors":498,"serverRendered":501,"path":7,"prerenderedAt":502},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":183,"$sdd-globals":199,"$sdd-navigation":201},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/tag":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":178,"_id":179,"_source":180,"_file":181,"_extension":182},"/design-system/components/tag","components",false,"","Tag","The Tag component adds, and draws attention to, a category name for your content.","page","Core",{"type":16,"children":17,"toc":166},"root",[18,27,33,38,43,48,55,75,81,114,118,124,129,142,148,152,158,163],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use tags to help categorise content. Tags help users to scan and find content that's relevant to them.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Content can have more than one category or theme. Using the tag component helps indicate this to the user.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"When naming tags, use a noun or adjective. Don't use verbs as a user may confuse the tag with an action.",{"type":19,"tag":44,"props":45,"children":47},"docs-example",{"id":46},"core-containers-tag--neutral",[],{"type":19,"tag":49,"props":50,"children":52},"h3",{"id":51},"when-and-how-to-use",[53],{"type":25,"value":54},"When and how to use",{"type":19,"tag":56,"props":57,"children":58},"ul",{},[59,65,70],{"type":19,"tag":60,"props":61,"children":62},"li",{},[63],{"type":25,"value":64},"Use keywords.",{"type":19,"tag":60,"props":66,"children":67},{},[68],{"type":25,"value":69},"Use to draw attention to a category of content or information.",{"type":19,"tag":60,"props":71,"children":72},{},[73],{"type":25,"value":74},"Use nouns or adjectives.",{"type":19,"tag":49,"props":76,"children":78},{"id":77},"when-and-how-not-to-use",[79],{"type":25,"value":80},"When and how not to use",{"type":19,"tag":56,"props":82,"children":83},{},[84,89,94,99,104,109],{"type":19,"tag":60,"props":85,"children":86},{},[87],{"type":25,"value":88},"Don't use punctuation.",{"type":19,"tag":60,"props":90,"children":91},{},[92],{"type":25,"value":93},"Don't overuse tags.",{"type":19,"tag":60,"props":95,"children":96},{},[97],{"type":25,"value":98},"Don't use icons in the tags.",{"type":19,"tag":60,"props":100,"children":101},{},[102],{"type":25,"value":103},"Don't use as a heading.",{"type":19,"tag":60,"props":105,"children":106},{},[107],{"type":25,"value":108},"Don't use more than 2 words.",{"type":19,"tag":60,"props":110,"children":111},{},[112],{"type":25,"value":113},"Don't use as a link or action.",{"type":19,"tag":115,"props":116,"children":117},"hr",{},[],{"type":19,"tag":20,"props":119,"children":121},{"id":120},"variants",[122],{"type":25,"value":123},"Variants",{"type":19,"tag":28,"props":125,"children":126},{},[127],{"type":25,"value":128},"Tags have 2 variants:",{"type":19,"tag":56,"props":130,"children":131},{},[132,137],{"type":19,"tag":60,"props":133,"children":134},{},[135],{"type":25,"value":136},"default, for use on neutral backgrounds",{"type":19,"tag":60,"props":138,"children":139},{},[140],{"type":25,"value":141},"neutral, for use on white backgrounds.",{"type":19,"tag":49,"props":143,"children":145},{"id":144},"default",[146],{"type":25,"value":147},"Default",{"type":19,"tag":44,"props":149,"children":151},{"id":150},"core-containers-tag--default-story",[],{"type":19,"tag":49,"props":153,"children":155},{"id":154},"neutral",[156],{"type":25,"value":157},"Neutral",{"type":19,"tag":28,"props":159,"children":160},{},[161],{"type":25,"value":162},"Use the reverse variant when the chip appears on the primary colour.",{"type":19,"tag":44,"props":164,"children":165},{"id":46},[],{"title":10,"searchDepth":167,"depth":167,"links":168},2,[169,174],{"id":22,"depth":167,"text":26,"children":170},[171,173],{"id":51,"depth":172,"text":54},3,{"id":77,"depth":172,"text":80},{"id":120,"depth":167,"text":123,"children":175},[176,177],{"id":144,"depth":172,"text":147},{"id":154,"depth":172,"text":157},"markdown","content:design-system:5.components:tag.md","content","design-system/5.components/tag.md","md",["ShallowRef",184],["ShallowReactive",185],{"/design-system/components/tag":186},[187,193],{"_path":188,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":189,"description":190,"layout":13,"label":14,"_type":178,"_id":191,"_source":180,"_file":192,"_extension":182},"/design-system/components/tabs","Tabs","The Tab component lets you organise related content so that users can switch between related information on the same page.","content:design-system:5.components:tabs.md","design-system/5.components/tabs.md",{"_path":194,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":195,"description":196,"layout":13,"label":14,"_type":178,"_id":197,"_source":180,"_file":198,"_extension":182},"/design-system/components/text-area","Text area","The Text area component lets users select one option from a list.","content:design-system:5.components:text-area.md","design-system/5.components/text-area.md",["ShallowRef",200],{},[202,207,448],{"title":203,"_path":204,"icon":205,"layout":206},"Ripple Design System","/","carbon:home","home",{"title":208,"_path":209,"children":210},"Design System","/design-system",[211,227,243,272,306],{"title":212,"_path":213,"children":214},"About","/design-system/about",[215,218,221,224],{"title":216,"_path":217,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":219,"_path":220,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":222,"_path":223,"layout":13},"Support","/design-system/about/getting-support",{"title":225,"_path":226,"layout":13},"Contributing","/design-system/about/contributing",{"title":228,"_path":229,"children":230},"Design","/design-system/design",[231,234,237,240],{"title":232,"_path":233,"layout":13},"Getting started","/design-system/design/getting-started",{"title":235,"_path":236,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":238,"_path":239,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":241,"_path":242,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":244,"_path":245,"children":246},"Develop","/design-system/develop",[247,249,251,254],{"title":232,"_path":248,"layout":13},"/design-system/develop/getting-started",{"title":225,"_path":250,"layout":13},"/design-system/develop/contributing",{"title":252,"_path":253,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":26,"_path":255,"children":256,"layout":13},"/design-system/develop/usage",[257,260,263,266,269],{"title":258,"_path":259,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":261,"_path":262,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":264,"_path":265,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":267,"_path":268,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":270,"_path":271,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":273,"_path":274,"children":275},"Styles","/design-system/styles",[276,279,282,285,288,291,294,297,300,303],{"title":277,"_path":278,"layout":13},"Colour","/design-system/styles/colour",{"title":280,"_path":281,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":283,"_path":284,"layout":13},"Grid","/design-system/styles/grid",{"title":286,"_path":287,"layout":13},"Icons","/design-system/styles/icons",{"title":289,"_path":290,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":292,"_path":293,"layout":13},"Layout","/design-system/styles/layout",{"title":295,"_path":296,"layout":13},"Logo","/design-system/styles/logo",{"title":298,"_path":299,"layout":13},"Motion","/design-system/styles/motion",{"title":301,"_path":302,"layout":13},"Spacing","/design-system/styles/spacing",{"title":304,"_path":305,"layout":13},"Typography","/design-system/styles/typography",{"title":307,"_path":308,"children":309},"Components","/design-system/components",[310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,440,441,442,445],{"title":311,"_path":312,"layout":13},"Accordion","/design-system/components/accordion",{"title":314,"_path":315,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":317,"_path":318,"layout":13},"Alert","/design-system/components/alert",{"title":320,"_path":321,"layout":13},"Block quote","/design-system/components/block-quote",{"title":323,"_path":324,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":326,"_path":327,"layout":13},"Button","/design-system/components/button",{"title":329,"_path":330,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":332,"_path":333,"layout":13},"Callout","/design-system/components/callout",{"title":335,"_path":336,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":338,"_path":339,"layout":13},"Card","/design-system/components/card",{"title":341,"_path":342,"layout":13},"Carousel","/design-system/components/carousel",{"title":344,"_path":345,"layout":13},"Category grid","/design-system/components/category-grid",{"title":347,"_path":348,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":350,"_path":351,"layout":13},"Chip","/design-system/components/chip",{"title":353,"_path":354,"layout":13},"Contact us","/design-system/components/contact-us",{"title":356,"_path":357,"layout":13},"Date input","/design-system/components/date-input",{"title":359,"_path":360,"layout":13},"Detail list","/design-system/components/detail-list",{"title":362,"_path":363,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":365,"_path":366,"layout":13},"File","/design-system/components/file",{"title":368,"_path":369,"layout":13},"Footer","/design-system/components/footer",{"title":371,"_path":372,"layout":13},"Form","/design-system/components/form",{"title":374,"_path":375,"layout":13},"Form alert","/design-system/components/form-alert",{"title":377,"_path":378,"layout":13},"Header","/design-system/components/header",{"title":380,"_path":381,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":383,"_path":384,"layout":13},"Input field","/design-system/components/input-field",{"title":386,"_path":387,"layout":13},"Key dates","/design-system/components/key-dates",{"title":389,"_path":390,"layout":13},"Media","/design-system/components/media",{"title":392,"_path":393,"layout":13},"Media embed","/design-system/components/media-embed",{"title":395,"_path":396,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":398,"_path":399,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":401,"_path":402,"layout":13},"Option button","/design-system/components/option-button",{"title":404,"_path":405,"layout":13},"Page action","/design-system/components/page-action",{"title":407,"_path":408,"layout":13},"Pagination","/design-system/components/pagination",{"title":410,"_path":411,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":413,"_path":414,"layout":13},"Profile","/design-system/components/profile",{"title":416,"_path":417,"layout":13},"Radio button","/design-system/components/radio-button",{"title":419,"_path":420,"layout":13},"Related links","/design-system/components/related-links",{"title":422,"_path":423,"layout":13},"Results listing","/design-system/components/results-listing",{"title":425,"_path":426,"layout":13},"Search bar","/design-system/components/search-bar",{"title":428,"_path":429,"layout":13},"Skip link","/design-system/components/skip-link",{"title":431,"_path":432,"layout":13},"Social share","/design-system/components/social-share",{"title":434,"_path":435,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":437,"_path":438,"layout":13},"Table","/design-system/components/table",{"title":189,"_path":188,"layout":13},{"title":11,"_path":7,"layout":13},{"title":195,"_path":194,"layout":13},{"title":443,"_path":444,"layout":13},"Timeline","/design-system/components/timeline",{"title":446,"_path":447,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":449,"_path":450,"children":451,"layout":13},"Ripple Framework","/framework",[452,453,471,493],{"title":449,"_path":450,"layout":13},{"title":454,"_path":455,"children":456},"Key Concepts","/framework/key-concepts",[457,459,462,465,468],{"title":264,"_path":458,"layout":13},"/framework/key-concepts/nuxt",{"title":460,"_path":461,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":463,"_path":464,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":466,"_path":467,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":469,"_path":470,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":472,"_path":473,"children":474},"Guides","/framework/guides",[475,478,481,484,487,490],{"title":476,"_path":477,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":479,"_path":480,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":482,"_path":483,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":485,"_path":486,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":488,"_path":489,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":491,"_path":492,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":494,"_path":495,"layout":13},"Core modules","/framework/core-modules",["Reactive",497],["Set"],["Reactive",499],{"module-navigation":500},null,true,1714695653096]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/text-area/_payload.json b/design-system/components/text-area/_payload.json
index 885ec30cf4..0563ad9029 100644
--- a/design-system/components/text-area/_payload.json
+++ b/design-system/components/text-area/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695156395]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695654463]
\ No newline at end of file
diff --git a/design-system/components/text-area/index.html b/design-system/components/text-area/index.html
index 84a9be218f..17091f1dc8 100644
--- a/design-system/components/text-area/index.html
+++ b/design-system/components/text-area/index.html
@@ -28,65 +28,65 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.CwUV-MIb.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.F9NVvvm4.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.gK7ORMEc.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.GmB4B_NE.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -98,8 +98,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Text area</h1><p class="rpl-type-p-large" data-v-3163c6df>The Text area component lets users select one option from a list.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use text area so users can enter multiple lines of text.<!--]--></p><p><!--[-->Text area is used when information longer than a single line of text is needed or expected. For example, comments fields.<!--]--></p><p><!--[-->Text areas can be resized and can be used with a character counter.<!--]--></p><p><!--[-->Don’t use text area for succinct responses such as email addresses or names. In this case, you should use the input field component.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-textarea--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-textarea--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="how-this-component-works" data-v-ea525968><a href="#how-this-component-works" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->How this component works<!--]--></a></h2><p><!--[-->You must use a form label with a text area component.<!--]--></p><p><!--[-->You can use text area with:<!--]--></p><ul><!--[--><li><!--[-->requirement label<!--]--></li><li><!--[-->hint text<!--]--></li><li><!--[-->metadata<!--]--></li><li><!--[-->placeholder text.<!--]--></li><!--]--></ul><p><!--[-->Guide users about the amount of text wanted. Set the text area to match the amount preferred. It has no maximum height, but has a minimum height of 96px.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="resize-handle"><!--[-->Resize handle<!--]--></h4><p><!--[-->Users can change the text area height (but not width) with the resize handle. They can also scroll within the container.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="avoid-placeholder-text"><!--[-->Avoid placeholder text<!--]--></h4><p><!--[-->Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.<!--]--></p><p><!--[-->If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="hint-text"><!--[-->Hint text<!--]--></h4><p><!--[-->Hint text can be used to tell the user what, or how, to successfully complete a text area.<!--]--></p><p><!--[-->For example, hint text can include:<!--]--></p><ul><!--[--><li><!--[-->an overall description of the text area<!--]--></li><li><!--[-->hints for what kind of information needs to be input<!--]--></li><li><!--[-->specific formatting examples or requirements.<!--]--></li><!--]--></ul><p><!--[-->Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="character-count"><!--[-->Character count<!--]--></h4><p><!--[-->A character count can sit below the text area field. It tells users the maximum characters and their input’s current count.<!--]--></p><p><!--[-->Users can enter more characters than the maximum. The character count then says they’ve entered too many characters before they submit the text area. The user can copy or reduce their full answer.<!--]--></p><p><!--[-->Even though there is a live character count, normal error responses (below) must appear if a user tries to submit a text area with too many characters.<!--]--></p><p><!--[-->Only use character count when there is a good reason. For example, legal reasons, technical reasons or evidence users will give more text than needed.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Always use a label for text areas.<!--]--></li><li><!--[-->Use hint text to specify helpful information such as specific formatting or information requirements.<!--]--></li><li><!--[-->Specify character counts when required.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Never use without a label<!--]--></li><li><!--[-->Avoid placeholder text because it can cause accessibility issues.<!--]--></li><li><!--[-->Don’t disable copy and paste.<!--]--></li><li><!--[-->Don’t set a minimum or maximum input limit without explicitly saying this in the character count.<!--]--></li><li><!--[-->Do not use hint text if it isn’t relevant or meaningful to the user.<!--]--></li><li><!--[-->Don’t use placeholder text to give instructions.<!--]--></li><li><!--[-->Don’t write ambiguous error messages only stating what&#39;s wrong - explain how the user can fix it.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->The text area has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, used on white backgrounds<!--]--></li><li><!--[-->reverse, used on neutral backgrounds.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-textarea--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-textarea--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="reverse" data-v-ea525968><a href="#reverse" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Reverse<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-textarea--reverse&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-textarea--reverse&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="error" data-v-ea525968><a href="#error" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Error<!--]--></a></h2><p><!--[-->All form inputs share error state styling.<!--]--></p><p><!--[-->Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.<!--]--></p><p><!--[-->When creating an error message for an input field, use the wording below.<!--]--></p><p><!--[--><strong><!--[-->Error: empty input<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Enter [the missing information]&#39;.<!--]--></li><li><!--[-->Example: &#39;Enter your name&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input is too long<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must be [number] characters or less&#39;.<!--]--></li><li><!--[-->Example: &#39;Delivery address must be 56 characters or less&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input is too short<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must be [number] characters or more&#39;.<!--]--></li><li><!--[-->Example: &#39;Previous employer must be 3 characters or more&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input is too long or to short<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must be between [number] and [number] characters&#39;.<!--]--></li><li><!--[-->Example: &#39;Justification must be between 3 and 56 characters&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input uses known characters that aren’t allowed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must not include [characters]&#39;.<!--]--></li><li><!--[-->Example: ‘Reasons must not include + &amp; ~&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input uses unknown characters that aren’t allowed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must only include [list of allowed characters]&#39;.<!--]--></li><li><!--[-->Example: ‘Explanations must only include letters, numbers and commas&#39;.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-textarea--error&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-textarea--error&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Text area uses colour to show interactive states. A text area field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a text area remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-textarea--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-textarea--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="rationale" data-v-fff5b905><a href="#rationale" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/text-area.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/text-area/_payload.json">[{"state":1,"once":854,"_errors":856,"serverRendered":859,"path":860,"prerenderedAt":861},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":543,"$sdd-globals":559,"$sdd-navigation":561},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/text-area":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":538,"_id":539,"_source":540,"_file":541,"_extension":542},"/design-system/components/text-area","components",false,"","Text area","The Text area component lets users select one option from a list.","page","Core",{"type":16,"children":17,"toc":522},"root",[18,27,33,38,43,48,53,60,65,70,95,100,107,112,118,123,128,134,139,144,162,167,173,178,183,188,193,199,217,223,261,265,271,276,289,295,298,304,308,314,319,324,329,338,351,359,372,380,393,401,414,422,435,443,456,460,463,469,474,481,503,506,512,517],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use text area so users can enter multiple lines of text.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Text area is used when information longer than a single line of text is needed or expected. For example, comments fields.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Text areas can be resized and can be used with a character counter.",{"type":19,"tag":28,"props":44,"children":45},{},[46],{"type":25,"value":47},"Don’t use text area for succinct responses such as email addresses or names. In this case, you should use the input field component.",{"type":19,"tag":49,"props":50,"children":52},"docs-example",{"id":51},"forms-textarea--default-story",[],{"type":19,"tag":54,"props":55,"children":57},"h3",{"id":56},"how-this-component-works",[58],{"type":25,"value":59},"How this component works",{"type":19,"tag":28,"props":61,"children":62},{},[63],{"type":25,"value":64},"You must use a form label with a text area component.",{"type":19,"tag":28,"props":66,"children":67},{},[68],{"type":25,"value":69},"You can use text area with:",{"type":19,"tag":71,"props":72,"children":73},"ul",{},[74,80,85,90],{"type":19,"tag":75,"props":76,"children":77},"li",{},[78],{"type":25,"value":79},"requirement label",{"type":19,"tag":75,"props":81,"children":82},{},[83],{"type":25,"value":84},"hint text",{"type":19,"tag":75,"props":86,"children":87},{},[88],{"type":25,"value":89},"metadata",{"type":19,"tag":75,"props":91,"children":92},{},[93],{"type":25,"value":94},"placeholder text.",{"type":19,"tag":28,"props":96,"children":97},{},[98],{"type":25,"value":99},"Guide users about the amount of text wanted. Set the text area to match the amount preferred. It has no maximum height, but has a minimum height of 96px.",{"type":19,"tag":101,"props":102,"children":104},"h4",{"id":103},"resize-handle",[105],{"type":25,"value":106},"Resize handle",{"type":19,"tag":28,"props":108,"children":109},{},[110],{"type":25,"value":111},"Users can change the text area height (but not width) with the resize handle. They can also scroll within the container.",{"type":19,"tag":101,"props":113,"children":115},{"id":114},"avoid-placeholder-text",[116],{"type":25,"value":117},"Avoid placeholder text",{"type":19,"tag":28,"props":119,"children":120},{},[121],{"type":25,"value":122},"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.",{"type":19,"tag":28,"props":124,"children":125},{},[126],{"type":25,"value":127},"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.",{"type":19,"tag":101,"props":129,"children":131},{"id":130},"hint-text",[132],{"type":25,"value":133},"Hint text",{"type":19,"tag":28,"props":135,"children":136},{},[137],{"type":25,"value":138},"Hint text can be used to tell the user what, or how, to successfully complete a text area.",{"type":19,"tag":28,"props":140,"children":141},{},[142],{"type":25,"value":143},"For example, hint text can include:",{"type":19,"tag":71,"props":145,"children":146},{},[147,152,157],{"type":19,"tag":75,"props":148,"children":149},{},[150],{"type":25,"value":151},"an overall description of the text area",{"type":19,"tag":75,"props":153,"children":154},{},[155],{"type":25,"value":156},"hints for what kind of information needs to be input",{"type":19,"tag":75,"props":158,"children":159},{},[160],{"type":25,"value":161},"specific formatting examples or requirements.",{"type":19,"tag":28,"props":163,"children":164},{},[165],{"type":25,"value":166},"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.",{"type":19,"tag":101,"props":168,"children":170},{"id":169},"character-count",[171],{"type":25,"value":172},"Character count",{"type":19,"tag":28,"props":174,"children":175},{},[176],{"type":25,"value":177},"A character count can sit below the text area field. It tells users the maximum characters and their input’s current count.",{"type":19,"tag":28,"props":179,"children":180},{},[181],{"type":25,"value":182},"Users can enter more characters than the maximum. The character count then says they’ve entered too many characters before they submit the text area. The user can copy or reduce their full answer.",{"type":19,"tag":28,"props":184,"children":185},{},[186],{"type":25,"value":187},"Even though there is a live character count, normal error responses (below) must appear if a user tries to submit a text area with too many characters.",{"type":19,"tag":28,"props":189,"children":190},{},[191],{"type":25,"value":192},"Only use character count when there is a good reason. For example, legal reasons, technical reasons or evidence users will give more text than needed.",{"type":19,"tag":54,"props":194,"children":196},{"id":195},"when-and-how-to-use",[197],{"type":25,"value":198},"When and how to use",{"type":19,"tag":71,"props":200,"children":201},{},[202,207,212],{"type":19,"tag":75,"props":203,"children":204},{},[205],{"type":25,"value":206},"Always use a label for text areas.",{"type":19,"tag":75,"props":208,"children":209},{},[210],{"type":25,"value":211},"Use hint text to specify helpful information such as specific formatting or information requirements.",{"type":19,"tag":75,"props":213,"children":214},{},[215],{"type":25,"value":216},"Specify character counts when required.",{"type":19,"tag":54,"props":218,"children":220},{"id":219},"when-and-how-not-to-use",[221],{"type":25,"value":222},"When and how not to use",{"type":19,"tag":71,"props":224,"children":225},{},[226,231,236,241,246,251,256],{"type":19,"tag":75,"props":227,"children":228},{},[229],{"type":25,"value":230},"Never use without a label",{"type":19,"tag":75,"props":232,"children":233},{},[234],{"type":25,"value":235},"Avoid placeholder text because it can cause accessibility issues.",{"type":19,"tag":75,"props":237,"children":238},{},[239],{"type":25,"value":240},"Don’t disable copy and paste.",{"type":19,"tag":75,"props":242,"children":243},{},[244],{"type":25,"value":245},"Don’t set a minimum or maximum input limit without explicitly saying this in the character count.",{"type":19,"tag":75,"props":247,"children":248},{},[249],{"type":25,"value":250},"Do not use hint text if it isn’t relevant or meaningful to the user.",{"type":19,"tag":75,"props":252,"children":253},{},[254],{"type":25,"value":255},"Don’t use placeholder text to give instructions.",{"type":19,"tag":75,"props":257,"children":258},{},[259],{"type":25,"value":260},"Don’t write ambiguous error messages only stating what's wrong - explain how the user can fix it.",{"type":19,"tag":262,"props":263,"children":264},"hr",{},[],{"type":19,"tag":20,"props":266,"children":268},{"id":267},"variants",[269],{"type":25,"value":270},"Variants",{"type":19,"tag":28,"props":272,"children":273},{},[274],{"type":25,"value":275},"The text area has 2 variants:",{"type":19,"tag":71,"props":277,"children":278},{},[279,284],{"type":19,"tag":75,"props":280,"children":281},{},[282],{"type":25,"value":283},"default, used on white backgrounds",{"type":19,"tag":75,"props":285,"children":286},{},[287],{"type":25,"value":288},"reverse, used on neutral backgrounds.",{"type":19,"tag":54,"props":290,"children":292},{"id":291},"default",[293],{"type":25,"value":294},"Default",{"type":19,"tag":49,"props":296,"children":297},{"id":51},[],{"type":19,"tag":54,"props":299,"children":301},{"id":300},"reverse",[302],{"type":25,"value":303},"Reverse",{"type":19,"tag":49,"props":305,"children":307},{"id":306},"forms-textarea--reverse",[],{"type":19,"tag":54,"props":309,"children":311},{"id":310},"error",[312],{"type":25,"value":313},"Error",{"type":19,"tag":28,"props":315,"children":316},{},[317],{"type":25,"value":318},"All form inputs share error state styling.",{"type":19,"tag":28,"props":320,"children":321},{},[322],{"type":25,"value":323},"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.",{"type":19,"tag":28,"props":325,"children":326},{},[327],{"type":25,"value":328},"When creating an error message for an input field, use the wording below.",{"type":19,"tag":28,"props":330,"children":331},{},[332],{"type":19,"tag":333,"props":334,"children":335},"strong",{},[336],{"type":25,"value":337},"Error: empty input",{"type":19,"tag":71,"props":339,"children":340},{},[341,346],{"type":19,"tag":75,"props":342,"children":343},{},[344],{"type":25,"value":345},"Error message: ‘Enter [the missing information]'.",{"type":19,"tag":75,"props":347,"children":348},{},[349],{"type":25,"value":350},"Example: 'Enter your name'.",{"type":19,"tag":28,"props":352,"children":353},{},[354],{"type":19,"tag":333,"props":355,"children":356},{},[357],{"type":25,"value":358},"Error: input is too long",{"type":19,"tag":71,"props":360,"children":361},{},[362,367],{"type":19,"tag":75,"props":363,"children":364},{},[365],{"type":25,"value":366},"Error message: ‘[The input] must be [number] characters or less'.",{"type":19,"tag":75,"props":368,"children":369},{},[370],{"type":25,"value":371},"Example: 'Delivery address must be 56 characters or less'.",{"type":19,"tag":28,"props":373,"children":374},{},[375],{"type":19,"tag":333,"props":376,"children":377},{},[378],{"type":25,"value":379},"Error: input is too short",{"type":19,"tag":71,"props":381,"children":382},{},[383,388],{"type":19,"tag":75,"props":384,"children":385},{},[386],{"type":25,"value":387},"Error message: ‘[The input] must be [number] characters or more'.",{"type":19,"tag":75,"props":389,"children":390},{},[391],{"type":25,"value":392},"Example: 'Previous employer must be 3 characters or more'.",{"type":19,"tag":28,"props":394,"children":395},{},[396],{"type":19,"tag":333,"props":397,"children":398},{},[399],{"type":25,"value":400},"Error: input is too long or to short",{"type":19,"tag":71,"props":402,"children":403},{},[404,409],{"type":19,"tag":75,"props":405,"children":406},{},[407],{"type":25,"value":408},"Error message: ‘[The input] must be between [number] and [number] characters'.",{"type":19,"tag":75,"props":410,"children":411},{},[412],{"type":25,"value":413},"Example: 'Justification must be between 3 and 56 characters'.",{"type":19,"tag":28,"props":415,"children":416},{},[417],{"type":19,"tag":333,"props":418,"children":419},{},[420],{"type":25,"value":421},"Error: input uses known characters that aren’t allowed",{"type":19,"tag":71,"props":423,"children":424},{},[425,430],{"type":19,"tag":75,"props":426,"children":427},{},[428],{"type":25,"value":429},"Error message: ‘[The input] must not include [characters]'.",{"type":19,"tag":75,"props":431,"children":432},{},[433],{"type":25,"value":434},"Example: ‘Reasons must not include + & ~'.",{"type":19,"tag":28,"props":436,"children":437},{},[438],{"type":19,"tag":333,"props":439,"children":440},{},[441],{"type":25,"value":442},"Error: input uses unknown characters that aren’t allowed",{"type":19,"tag":71,"props":444,"children":445},{},[446,451],{"type":19,"tag":75,"props":447,"children":448},{},[449],{"type":25,"value":450},"Error message: ‘[The input] must only include [list of allowed characters]'.",{"type":19,"tag":75,"props":452,"children":453},{},[454],{"type":25,"value":455},"Example: ‘Explanations must only include letters, numbers and commas'.",{"type":19,"tag":49,"props":457,"children":459},{"id":458},"forms-textarea--error",[],{"type":19,"tag":262,"props":461,"children":462},{},[],{"type":19,"tag":20,"props":464,"children":466},{"id":465},"theming",[467],{"type":25,"value":468},"Theming",{"type":19,"tag":28,"props":470,"children":471},{},[472],{"type":25,"value":473},"Text area uses colour to show interactive states. A text area field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a text area remains consistent while it transitions from a focus to an active state.",{"type":19,"tag":475,"props":476,"children":477},"docs-theme-chooser",{},[478],{"type":19,"tag":49,"props":479,"children":480},{"id":51},[],{"type":19,"tag":28,"props":482,"children":483},{},[484,486,493,495,501],{"type":25,"value":485},"To create your own theme see ",{"type":19,"tag":487,"props":488,"children":490},"a",{"href":489},"/design-system/design/theming-guidance-for-designers",[491],{"type":25,"value":492},"theming guidance for designers",{"type":25,"value":494}," or ",{"type":19,"tag":487,"props":496,"children":498},{"href":497},"/design-system/develop/theming",[499],{"type":25,"value":500},"theming guidance for developers",{"type":25,"value":502},".",{"type":19,"tag":262,"props":504,"children":505},{},[],{"type":19,"tag":20,"props":507,"children":509},{"id":508},"rationale",[510],{"type":25,"value":511},"Rationale",{"type":19,"tag":28,"props":513,"children":514},{},[515],{"type":25,"value":516},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":19,"tag":28,"props":518,"children":519},{},[520],{"type":25,"value":521},"This occurs across all form and input elements, for a consistent experience.",{"title":10,"searchDepth":523,"depth":523,"links":524},2,[525,531,536,537],{"id":22,"depth":523,"text":26,"children":526},[527,529,530],{"id":56,"depth":528,"text":59},3,{"id":195,"depth":528,"text":198},{"id":219,"depth":528,"text":222},{"id":267,"depth":523,"text":270,"children":532},[533,534,535],{"id":291,"depth":528,"text":294},{"id":300,"depth":528,"text":303},{"id":310,"depth":528,"text":313},{"id":465,"depth":523,"text":468},{"id":508,"depth":523,"text":511},"markdown","content:design-system:5.components:text-area.md","content","design-system/5.components/text-area.md","md",["ShallowRef",544],["ShallowReactive",545],{"/design-system/components/text-area":546},[547,553],{"_path":548,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":549,"description":550,"layout":13,"label":14,"_type":538,"_id":551,"_source":540,"_file":552,"_extension":542},"/design-system/components/tag","Tag","The Tag component adds, and draws attention to, a category name for your content.","content:design-system:5.components:tag.md","design-system/5.components/tag.md",{"_path":554,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":555,"description":556,"layout":13,"label":14,"_type":538,"_id":557,"_source":540,"_file":558,"_extension":542},"/design-system/components/timeline","Timeline","The Timeline component contains blocks of content displayed in a linear order.","content:design-system:5.components:timeline.md","design-system/5.components/timeline.md",["ShallowRef",560],{},[562,567,806],{"title":563,"_path":564,"icon":565,"layout":566},"Ripple Design System","/","carbon:home","home",{"title":568,"_path":569,"children":570},"Design System","/design-system",[571,587,602,630,664],{"title":572,"_path":573,"children":574},"About","/design-system/about",[575,578,581,584],{"title":576,"_path":577,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":579,"_path":580,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":582,"_path":583,"layout":13},"Support","/design-system/about/getting-support",{"title":585,"_path":586,"layout":13},"Contributing","/design-system/about/contributing",{"title":588,"_path":589,"children":590},"Design","/design-system/design",[591,594,597,600],{"title":592,"_path":593,"layout":13},"Getting started","/design-system/design/getting-started",{"title":595,"_path":596,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":598,"_path":599,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":601,"_path":489,"layout":13},"Theming guidance for designers",{"title":603,"_path":604,"children":605},"Develop","/design-system/develop",[606,608,610,612],{"title":592,"_path":607,"layout":13},"/design-system/develop/getting-started",{"title":585,"_path":609,"layout":13},"/design-system/develop/contributing",{"title":611,"_path":497,"layout":13},"Theme and brand application",{"title":26,"_path":613,"children":614,"layout":13},"/design-system/develop/usage",[615,618,621,624,627],{"title":616,"_path":617,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":619,"_path":620,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":622,"_path":623,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":625,"_path":626,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":628,"_path":629,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":631,"_path":632,"children":633},"Styles","/design-system/styles",[634,637,640,643,646,649,652,655,658,661],{"title":635,"_path":636,"layout":13},"Colour","/design-system/styles/colour",{"title":638,"_path":639,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":641,"_path":642,"layout":13},"Grid","/design-system/styles/grid",{"title":644,"_path":645,"layout":13},"Icons","/design-system/styles/icons",{"title":647,"_path":648,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":650,"_path":651,"layout":13},"Layout","/design-system/styles/layout",{"title":653,"_path":654,"layout":13},"Logo","/design-system/styles/logo",{"title":656,"_path":657,"layout":13},"Motion","/design-system/styles/motion",{"title":659,"_path":660,"layout":13},"Spacing","/design-system/styles/spacing",{"title":662,"_path":663,"layout":13},"Typography","/design-system/styles/typography",{"title":665,"_path":666,"children":667},"Components","/design-system/components",[668,671,674,677,680,683,686,689,692,695,698,701,704,707,710,713,716,719,722,725,728,731,734,737,740,743,746,749,752,755,758,761,764,767,770,773,776,779,782,785,788,791,794,797,800,801,802,803],{"title":669,"_path":670,"layout":13},"Accordion","/design-system/components/accordion",{"title":672,"_path":673,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":675,"_path":676,"layout":13},"Alert","/design-system/components/alert",{"title":678,"_path":679,"layout":13},"Block quote","/design-system/components/block-quote",{"title":681,"_path":682,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":684,"_path":685,"layout":13},"Button","/design-system/components/button",{"title":687,"_path":688,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":690,"_path":691,"layout":13},"Callout","/design-system/components/callout",{"title":693,"_path":694,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":696,"_path":697,"layout":13},"Card","/design-system/components/card",{"title":699,"_path":700,"layout":13},"Carousel","/design-system/components/carousel",{"title":702,"_path":703,"layout":13},"Category grid","/design-system/components/category-grid",{"title":705,"_path":706,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":708,"_path":709,"layout":13},"Chip","/design-system/components/chip",{"title":711,"_path":712,"layout":13},"Contact us","/design-system/components/contact-us",{"title":714,"_path":715,"layout":13},"Date input","/design-system/components/date-input",{"title":717,"_path":718,"layout":13},"Detail list","/design-system/components/detail-list",{"title":720,"_path":721,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":723,"_path":724,"layout":13},"File","/design-system/components/file",{"title":726,"_path":727,"layout":13},"Footer","/design-system/components/footer",{"title":729,"_path":730,"layout":13},"Form","/design-system/components/form",{"title":732,"_path":733,"layout":13},"Form alert","/design-system/components/form-alert",{"title":735,"_path":736,"layout":13},"Header","/design-system/components/header",{"title":738,"_path":739,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":741,"_path":742,"layout":13},"Input field","/design-system/components/input-field",{"title":744,"_path":745,"layout":13},"Key dates","/design-system/components/key-dates",{"title":747,"_path":748,"layout":13},"Media","/design-system/components/media",{"title":750,"_path":751,"layout":13},"Media embed","/design-system/components/media-embed",{"title":753,"_path":754,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":756,"_path":757,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":759,"_path":760,"layout":13},"Option button","/design-system/components/option-button",{"title":762,"_path":763,"layout":13},"Page action","/design-system/components/page-action",{"title":765,"_path":766,"layout":13},"Pagination","/design-system/components/pagination",{"title":768,"_path":769,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":771,"_path":772,"layout":13},"Profile","/design-system/components/profile",{"title":774,"_path":775,"layout":13},"Radio button","/design-system/components/radio-button",{"title":777,"_path":778,"layout":13},"Related links","/design-system/components/related-links",{"title":780,"_path":781,"layout":13},"Results listing","/design-system/components/results-listing",{"title":783,"_path":784,"layout":13},"Search bar","/design-system/components/search-bar",{"title":786,"_path":787,"layout":13},"Skip link","/design-system/components/skip-link",{"title":789,"_path":790,"layout":13},"Social share","/design-system/components/social-share",{"title":792,"_path":793,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":795,"_path":796,"layout":13},"Table","/design-system/components/table",{"title":798,"_path":799,"layout":13},"Tabs","/design-system/components/tabs",{"title":549,"_path":548,"layout":13},{"title":11,"_path":7,"layout":13},{"title":555,"_path":554,"layout":13},{"title":804,"_path":805,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":807,"_path":808,"children":809,"layout":13},"Ripple Framework","/framework",[810,811,829,851],{"title":807,"_path":808,"layout":13},{"title":812,"_path":813,"children":814},"Key Concepts","/framework/key-concepts",[815,817,820,823,826],{"title":622,"_path":816,"layout":13},"/framework/key-concepts/nuxt",{"title":818,"_path":819,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":821,"_path":822,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":824,"_path":825,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":827,"_path":828,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":830,"_path":831,"children":832},"Guides","/framework/guides",[833,836,839,842,845,848],{"title":834,"_path":835,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":837,"_path":838,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":840,"_path":841,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":843,"_path":844,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":846,"_path":847,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":849,"_path":850,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":852,"_path":853,"layout":13},"Core modules","/framework/core-modules",["Reactive",855],["Set"],["Reactive",857],{"module-navigation":858},null,true,"/design-system/components/text-area/",1714695156395]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Text area</h1><p class="rpl-type-p-large" data-v-3163c6df>The Text area component lets users select one option from a list.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use text area so users can enter multiple lines of text.<!--]--></p><p><!--[-->Text area is used when information longer than a single line of text is needed or expected. For example, comments fields.<!--]--></p><p><!--[-->Text areas can be resized and can be used with a character counter.<!--]--></p><p><!--[-->Don’t use text area for succinct responses such as email addresses or names. In this case, you should use the input field component.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-textarea--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-textarea--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="how-this-component-works" data-v-ea525968><a href="#how-this-component-works" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->How this component works<!--]--></a></h2><p><!--[-->You must use a form label with a text area component.<!--]--></p><p><!--[-->You can use text area with:<!--]--></p><ul><!--[--><li><!--[-->requirement label<!--]--></li><li><!--[-->hint text<!--]--></li><li><!--[-->metadata<!--]--></li><li><!--[-->placeholder text.<!--]--></li><!--]--></ul><p><!--[-->Guide users about the amount of text wanted. Set the text area to match the amount preferred. It has no maximum height, but has a minimum height of 96px.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="resize-handle"><!--[-->Resize handle<!--]--></h4><p><!--[-->Users can change the text area height (but not width) with the resize handle. They can also scroll within the container.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="avoid-placeholder-text"><!--[-->Avoid placeholder text<!--]--></h4><p><!--[-->Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.<!--]--></p><p><!--[-->If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="hint-text"><!--[-->Hint text<!--]--></h4><p><!--[-->Hint text can be used to tell the user what, or how, to successfully complete a text area.<!--]--></p><p><!--[-->For example, hint text can include:<!--]--></p><ul><!--[--><li><!--[-->an overall description of the text area<!--]--></li><li><!--[-->hints for what kind of information needs to be input<!--]--></li><li><!--[-->specific formatting examples or requirements.<!--]--></li><!--]--></ul><p><!--[-->Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.<!--]--></p><h4 class="rpl-type-h4 docs-h4" id="character-count"><!--[-->Character count<!--]--></h4><p><!--[-->A character count can sit below the text area field. It tells users the maximum characters and their input’s current count.<!--]--></p><p><!--[-->Users can enter more characters than the maximum. The character count then says they’ve entered too many characters before they submit the text area. The user can copy or reduce their full answer.<!--]--></p><p><!--[-->Even though there is a live character count, normal error responses (below) must appear if a user tries to submit a text area with too many characters.<!--]--></p><p><!--[-->Only use character count when there is a good reason. For example, legal reasons, technical reasons or evidence users will give more text than needed.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Always use a label for text areas.<!--]--></li><li><!--[-->Use hint text to specify helpful information such as specific formatting or information requirements.<!--]--></li><li><!--[-->Specify character counts when required.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Never use without a label<!--]--></li><li><!--[-->Avoid placeholder text because it can cause accessibility issues.<!--]--></li><li><!--[-->Don’t disable copy and paste.<!--]--></li><li><!--[-->Don’t set a minimum or maximum input limit without explicitly saying this in the character count.<!--]--></li><li><!--[-->Do not use hint text if it isn’t relevant or meaningful to the user.<!--]--></li><li><!--[-->Don’t use placeholder text to give instructions.<!--]--></li><li><!--[-->Don’t write ambiguous error messages only stating what&#39;s wrong - explain how the user can fix it.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->The text area has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default, used on white backgrounds<!--]--></li><li><!--[-->reverse, used on neutral backgrounds.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-textarea--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-textarea--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="reverse" data-v-ea525968><a href="#reverse" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Reverse<!--]--></a></h2><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-textarea--reverse&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-textarea--reverse&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="error" data-v-ea525968><a href="#error" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Error<!--]--></a></h2><p><!--[-->All form inputs share error state styling.<!--]--></p><p><!--[-->Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.<!--]--></p><p><!--[-->When creating an error message for an input field, use the wording below.<!--]--></p><p><!--[--><strong><!--[-->Error: empty input<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘Enter [the missing information]&#39;.<!--]--></li><li><!--[-->Example: &#39;Enter your name&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input is too long<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must be [number] characters or less&#39;.<!--]--></li><li><!--[-->Example: &#39;Delivery address must be 56 characters or less&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input is too short<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must be [number] characters or more&#39;.<!--]--></li><li><!--[-->Example: &#39;Previous employer must be 3 characters or more&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input is too long or to short<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must be between [number] and [number] characters&#39;.<!--]--></li><li><!--[-->Example: &#39;Justification must be between 3 and 56 characters&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input uses known characters that aren’t allowed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must not include [characters]&#39;.<!--]--></li><li><!--[-->Example: ‘Reasons must not include + &amp; ~&#39;.<!--]--></li><!--]--></ul><p><!--[--><strong><!--[-->Error: input uses unknown characters that aren’t allowed<!--]--></strong><!--]--></p><ul><!--[--><li><!--[-->Error message: ‘[The input] must only include [list of allowed characters]&#39;.<!--]--></li><li><!--[-->Example: ‘Explanations must only include letters, numbers and commas&#39;.<!--]--></li><!--]--></ul><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-textarea--error&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-textarea--error&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Text area uses colour to show interactive states. A text area field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a text area remains consistent while it transitions from a focus to an active state.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-textarea--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-textarea--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="rationale" data-v-fff5b905><a href="#rationale" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Rationale<!--]--></a></h2><p><!--[-->The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.<!--]--></p><p><!--[-->This occurs across all form and input elements, for a consistent experience.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/text-area.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/text-area/_payload.json">[{"state":1,"once":854,"_errors":856,"serverRendered":859,"path":860,"prerenderedAt":861},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":543,"$sdd-globals":559,"$sdd-navigation":561},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/text-area":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":538,"_id":539,"_source":540,"_file":541,"_extension":542},"/design-system/components/text-area","components",false,"","Text area","The Text area component lets users select one option from a list.","page","Core",{"type":16,"children":17,"toc":522},"root",[18,27,33,38,43,48,53,60,65,70,95,100,107,112,118,123,128,134,139,144,162,167,173,178,183,188,193,199,217,223,261,265,271,276,289,295,298,304,308,314,319,324,329,338,351,359,372,380,393,401,414,422,435,443,456,460,463,469,474,481,503,506,512,517],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use text area so users can enter multiple lines of text.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Text area is used when information longer than a single line of text is needed or expected. For example, comments fields.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"Text areas can be resized and can be used with a character counter.",{"type":19,"tag":28,"props":44,"children":45},{},[46],{"type":25,"value":47},"Don’t use text area for succinct responses such as email addresses or names. In this case, you should use the input field component.",{"type":19,"tag":49,"props":50,"children":52},"docs-example",{"id":51},"forms-textarea--default-story",[],{"type":19,"tag":54,"props":55,"children":57},"h3",{"id":56},"how-this-component-works",[58],{"type":25,"value":59},"How this component works",{"type":19,"tag":28,"props":61,"children":62},{},[63],{"type":25,"value":64},"You must use a form label with a text area component.",{"type":19,"tag":28,"props":66,"children":67},{},[68],{"type":25,"value":69},"You can use text area with:",{"type":19,"tag":71,"props":72,"children":73},"ul",{},[74,80,85,90],{"type":19,"tag":75,"props":76,"children":77},"li",{},[78],{"type":25,"value":79},"requirement label",{"type":19,"tag":75,"props":81,"children":82},{},[83],{"type":25,"value":84},"hint text",{"type":19,"tag":75,"props":86,"children":87},{},[88],{"type":25,"value":89},"metadata",{"type":19,"tag":75,"props":91,"children":92},{},[93],{"type":25,"value":94},"placeholder text.",{"type":19,"tag":28,"props":96,"children":97},{},[98],{"type":25,"value":99},"Guide users about the amount of text wanted. Set the text area to match the amount preferred. It has no maximum height, but has a minimum height of 96px.",{"type":19,"tag":101,"props":102,"children":104},"h4",{"id":103},"resize-handle",[105],{"type":25,"value":106},"Resize handle",{"type":19,"tag":28,"props":108,"children":109},{},[110],{"type":25,"value":111},"Users can change the text area height (but not width) with the resize handle. They can also scroll within the container.",{"type":19,"tag":101,"props":113,"children":115},{"id":114},"avoid-placeholder-text",[116],{"type":25,"value":117},"Avoid placeholder text",{"type":19,"tag":28,"props":119,"children":120},{},[121],{"type":25,"value":122},"Avoid using placeholder text where possible. It disappears when a user starts typing. Not all screen readers will read out placeholder text. Its colour often lacks the contrast needed for accessible content when using some browser default styling.",{"type":19,"tag":28,"props":124,"children":125},{},[126],{"type":25,"value":127},"If placeholder text can’t be avoided, don’t use it to replace a label or hint text. Don’t use it to show an example or to include any critical information.",{"type":19,"tag":101,"props":129,"children":131},{"id":130},"hint-text",[132],{"type":25,"value":133},"Hint text",{"type":19,"tag":28,"props":135,"children":136},{},[137],{"type":25,"value":138},"Hint text can be used to tell the user what, or how, to successfully complete a text area.",{"type":19,"tag":28,"props":140,"children":141},{},[142],{"type":25,"value":143},"For example, hint text can include:",{"type":19,"tag":71,"props":145,"children":146},{},[147,152,157],{"type":19,"tag":75,"props":148,"children":149},{},[150],{"type":25,"value":151},"an overall description of the text area",{"type":19,"tag":75,"props":153,"children":154},{},[155],{"type":25,"value":156},"hints for what kind of information needs to be input",{"type":19,"tag":75,"props":158,"children":159},{},[160],{"type":25,"value":161},"specific formatting examples or requirements.",{"type":19,"tag":28,"props":163,"children":164},{},[165],{"type":25,"value":166},"Only use hint text where it’s needed. Don’t repeat the label. Don’t use it just to keep the layout consistent with other fields in the form.",{"type":19,"tag":101,"props":168,"children":170},{"id":169},"character-count",[171],{"type":25,"value":172},"Character count",{"type":19,"tag":28,"props":174,"children":175},{},[176],{"type":25,"value":177},"A character count can sit below the text area field. It tells users the maximum characters and their input’s current count.",{"type":19,"tag":28,"props":179,"children":180},{},[181],{"type":25,"value":182},"Users can enter more characters than the maximum. The character count then says they’ve entered too many characters before they submit the text area. The user can copy or reduce their full answer.",{"type":19,"tag":28,"props":184,"children":185},{},[186],{"type":25,"value":187},"Even though there is a live character count, normal error responses (below) must appear if a user tries to submit a text area with too many characters.",{"type":19,"tag":28,"props":189,"children":190},{},[191],{"type":25,"value":192},"Only use character count when there is a good reason. For example, legal reasons, technical reasons or evidence users will give more text than needed.",{"type":19,"tag":54,"props":194,"children":196},{"id":195},"when-and-how-to-use",[197],{"type":25,"value":198},"When and how to use",{"type":19,"tag":71,"props":200,"children":201},{},[202,207,212],{"type":19,"tag":75,"props":203,"children":204},{},[205],{"type":25,"value":206},"Always use a label for text areas.",{"type":19,"tag":75,"props":208,"children":209},{},[210],{"type":25,"value":211},"Use hint text to specify helpful information such as specific formatting or information requirements.",{"type":19,"tag":75,"props":213,"children":214},{},[215],{"type":25,"value":216},"Specify character counts when required.",{"type":19,"tag":54,"props":218,"children":220},{"id":219},"when-and-how-not-to-use",[221],{"type":25,"value":222},"When and how not to use",{"type":19,"tag":71,"props":224,"children":225},{},[226,231,236,241,246,251,256],{"type":19,"tag":75,"props":227,"children":228},{},[229],{"type":25,"value":230},"Never use without a label",{"type":19,"tag":75,"props":232,"children":233},{},[234],{"type":25,"value":235},"Avoid placeholder text because it can cause accessibility issues.",{"type":19,"tag":75,"props":237,"children":238},{},[239],{"type":25,"value":240},"Don’t disable copy and paste.",{"type":19,"tag":75,"props":242,"children":243},{},[244],{"type":25,"value":245},"Don’t set a minimum or maximum input limit without explicitly saying this in the character count.",{"type":19,"tag":75,"props":247,"children":248},{},[249],{"type":25,"value":250},"Do not use hint text if it isn’t relevant or meaningful to the user.",{"type":19,"tag":75,"props":252,"children":253},{},[254],{"type":25,"value":255},"Don’t use placeholder text to give instructions.",{"type":19,"tag":75,"props":257,"children":258},{},[259],{"type":25,"value":260},"Don’t write ambiguous error messages only stating what's wrong - explain how the user can fix it.",{"type":19,"tag":262,"props":263,"children":264},"hr",{},[],{"type":19,"tag":20,"props":266,"children":268},{"id":267},"variants",[269],{"type":25,"value":270},"Variants",{"type":19,"tag":28,"props":272,"children":273},{},[274],{"type":25,"value":275},"The text area has 2 variants:",{"type":19,"tag":71,"props":277,"children":278},{},[279,284],{"type":19,"tag":75,"props":280,"children":281},{},[282],{"type":25,"value":283},"default, used on white backgrounds",{"type":19,"tag":75,"props":285,"children":286},{},[287],{"type":25,"value":288},"reverse, used on neutral backgrounds.",{"type":19,"tag":54,"props":290,"children":292},{"id":291},"default",[293],{"type":25,"value":294},"Default",{"type":19,"tag":49,"props":296,"children":297},{"id":51},[],{"type":19,"tag":54,"props":299,"children":301},{"id":300},"reverse",[302],{"type":25,"value":303},"Reverse",{"type":19,"tag":49,"props":305,"children":307},{"id":306},"forms-textarea--reverse",[],{"type":19,"tag":54,"props":309,"children":311},{"id":310},"error",[312],{"type":25,"value":313},"Error",{"type":19,"tag":28,"props":315,"children":316},{},[317],{"type":25,"value":318},"All form inputs share error state styling.",{"type":19,"tag":28,"props":320,"children":321},{},[322],{"type":25,"value":323},"Always have specific error messages for specific errors. Users need to understand why their input or selection was not valid.",{"type":19,"tag":28,"props":325,"children":326},{},[327],{"type":25,"value":328},"When creating an error message for an input field, use the wording below.",{"type":19,"tag":28,"props":330,"children":331},{},[332],{"type":19,"tag":333,"props":334,"children":335},"strong",{},[336],{"type":25,"value":337},"Error: empty input",{"type":19,"tag":71,"props":339,"children":340},{},[341,346],{"type":19,"tag":75,"props":342,"children":343},{},[344],{"type":25,"value":345},"Error message: ‘Enter [the missing information]'.",{"type":19,"tag":75,"props":347,"children":348},{},[349],{"type":25,"value":350},"Example: 'Enter your name'.",{"type":19,"tag":28,"props":352,"children":353},{},[354],{"type":19,"tag":333,"props":355,"children":356},{},[357],{"type":25,"value":358},"Error: input is too long",{"type":19,"tag":71,"props":360,"children":361},{},[362,367],{"type":19,"tag":75,"props":363,"children":364},{},[365],{"type":25,"value":366},"Error message: ‘[The input] must be [number] characters or less'.",{"type":19,"tag":75,"props":368,"children":369},{},[370],{"type":25,"value":371},"Example: 'Delivery address must be 56 characters or less'.",{"type":19,"tag":28,"props":373,"children":374},{},[375],{"type":19,"tag":333,"props":376,"children":377},{},[378],{"type":25,"value":379},"Error: input is too short",{"type":19,"tag":71,"props":381,"children":382},{},[383,388],{"type":19,"tag":75,"props":384,"children":385},{},[386],{"type":25,"value":387},"Error message: ‘[The input] must be [number] characters or more'.",{"type":19,"tag":75,"props":389,"children":390},{},[391],{"type":25,"value":392},"Example: 'Previous employer must be 3 characters or more'.",{"type":19,"tag":28,"props":394,"children":395},{},[396],{"type":19,"tag":333,"props":397,"children":398},{},[399],{"type":25,"value":400},"Error: input is too long or to short",{"type":19,"tag":71,"props":402,"children":403},{},[404,409],{"type":19,"tag":75,"props":405,"children":406},{},[407],{"type":25,"value":408},"Error message: ‘[The input] must be between [number] and [number] characters'.",{"type":19,"tag":75,"props":410,"children":411},{},[412],{"type":25,"value":413},"Example: 'Justification must be between 3 and 56 characters'.",{"type":19,"tag":28,"props":415,"children":416},{},[417],{"type":19,"tag":333,"props":418,"children":419},{},[420],{"type":25,"value":421},"Error: input uses known characters that aren’t allowed",{"type":19,"tag":71,"props":423,"children":424},{},[425,430],{"type":19,"tag":75,"props":426,"children":427},{},[428],{"type":25,"value":429},"Error message: ‘[The input] must not include [characters]'.",{"type":19,"tag":75,"props":431,"children":432},{},[433],{"type":25,"value":434},"Example: ‘Reasons must not include + & ~'.",{"type":19,"tag":28,"props":436,"children":437},{},[438],{"type":19,"tag":333,"props":439,"children":440},{},[441],{"type":25,"value":442},"Error: input uses unknown characters that aren’t allowed",{"type":19,"tag":71,"props":444,"children":445},{},[446,451],{"type":19,"tag":75,"props":447,"children":448},{},[449],{"type":25,"value":450},"Error message: ‘[The input] must only include [list of allowed characters]'.",{"type":19,"tag":75,"props":452,"children":453},{},[454],{"type":25,"value":455},"Example: ‘Explanations must only include letters, numbers and commas'.",{"type":19,"tag":49,"props":457,"children":459},{"id":458},"forms-textarea--error",[],{"type":19,"tag":262,"props":461,"children":462},{},[],{"type":19,"tag":20,"props":464,"children":466},{"id":465},"theming",[467],{"type":25,"value":468},"Theming",{"type":19,"tag":28,"props":470,"children":471},{},[472],{"type":25,"value":473},"Text area uses colour to show interactive states. A text area field in an active state will adopt the same colour as the overall site’s focus state colour. This means a user’s experience of a text area remains consistent while it transitions from a focus to an active state.",{"type":19,"tag":475,"props":476,"children":477},"docs-theme-chooser",{},[478],{"type":19,"tag":49,"props":479,"children":480},{"id":51},[],{"type":19,"tag":28,"props":482,"children":483},{},[484,486,493,495,501],{"type":25,"value":485},"To create your own theme see ",{"type":19,"tag":487,"props":488,"children":490},"a",{"href":489},"/design-system/design/theming-guidance-for-designers",[491],{"type":25,"value":492},"theming guidance for designers",{"type":25,"value":494}," or ",{"type":19,"tag":487,"props":496,"children":498},{"href":497},"/design-system/develop/theming",[499],{"type":25,"value":500},"theming guidance for developers",{"type":25,"value":502},".",{"type":19,"tag":262,"props":504,"children":505},{},[],{"type":19,"tag":20,"props":507,"children":509},{"id":508},"rationale",[510],{"type":25,"value":511},"Rationale",{"type":19,"tag":28,"props":513,"children":514},{},[515],{"type":25,"value":516},"The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.",{"type":19,"tag":28,"props":518,"children":519},{},[520],{"type":25,"value":521},"This occurs across all form and input elements, for a consistent experience.",{"title":10,"searchDepth":523,"depth":523,"links":524},2,[525,531,536,537],{"id":22,"depth":523,"text":26,"children":526},[527,529,530],{"id":56,"depth":528,"text":59},3,{"id":195,"depth":528,"text":198},{"id":219,"depth":528,"text":222},{"id":267,"depth":523,"text":270,"children":532},[533,534,535],{"id":291,"depth":528,"text":294},{"id":300,"depth":528,"text":303},{"id":310,"depth":528,"text":313},{"id":465,"depth":523,"text":468},{"id":508,"depth":523,"text":511},"markdown","content:design-system:5.components:text-area.md","content","design-system/5.components/text-area.md","md",["ShallowRef",544],["ShallowReactive",545],{"/design-system/components/text-area":546},[547,553],{"_path":548,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":549,"description":550,"layout":13,"label":14,"_type":538,"_id":551,"_source":540,"_file":552,"_extension":542},"/design-system/components/tag","Tag","The Tag component adds, and draws attention to, a category name for your content.","content:design-system:5.components:tag.md","design-system/5.components/tag.md",{"_path":554,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":555,"description":556,"layout":13,"label":14,"_type":538,"_id":557,"_source":540,"_file":558,"_extension":542},"/design-system/components/timeline","Timeline","The Timeline component contains blocks of content displayed in a linear order.","content:design-system:5.components:timeline.md","design-system/5.components/timeline.md",["ShallowRef",560],{},[562,567,806],{"title":563,"_path":564,"icon":565,"layout":566},"Ripple Design System","/","carbon:home","home",{"title":568,"_path":569,"children":570},"Design System","/design-system",[571,587,602,630,664],{"title":572,"_path":573,"children":574},"About","/design-system/about",[575,578,581,584],{"title":576,"_path":577,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":579,"_path":580,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":582,"_path":583,"layout":13},"Support","/design-system/about/getting-support",{"title":585,"_path":586,"layout":13},"Contributing","/design-system/about/contributing",{"title":588,"_path":589,"children":590},"Design","/design-system/design",[591,594,597,600],{"title":592,"_path":593,"layout":13},"Getting started","/design-system/design/getting-started",{"title":595,"_path":596,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":598,"_path":599,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":601,"_path":489,"layout":13},"Theming guidance for designers",{"title":603,"_path":604,"children":605},"Develop","/design-system/develop",[606,608,610,612],{"title":592,"_path":607,"layout":13},"/design-system/develop/getting-started",{"title":585,"_path":609,"layout":13},"/design-system/develop/contributing",{"title":611,"_path":497,"layout":13},"Theme and brand application",{"title":26,"_path":613,"children":614,"layout":13},"/design-system/develop/usage",[615,618,621,624,627],{"title":616,"_path":617,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":619,"_path":620,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":622,"_path":623,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":625,"_path":626,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":628,"_path":629,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":631,"_path":632,"children":633},"Styles","/design-system/styles",[634,637,640,643,646,649,652,655,658,661],{"title":635,"_path":636,"layout":13},"Colour","/design-system/styles/colour",{"title":638,"_path":639,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":641,"_path":642,"layout":13},"Grid","/design-system/styles/grid",{"title":644,"_path":645,"layout":13},"Icons","/design-system/styles/icons",{"title":647,"_path":648,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":650,"_path":651,"layout":13},"Layout","/design-system/styles/layout",{"title":653,"_path":654,"layout":13},"Logo","/design-system/styles/logo",{"title":656,"_path":657,"layout":13},"Motion","/design-system/styles/motion",{"title":659,"_path":660,"layout":13},"Spacing","/design-system/styles/spacing",{"title":662,"_path":663,"layout":13},"Typography","/design-system/styles/typography",{"title":665,"_path":666,"children":667},"Components","/design-system/components",[668,671,674,677,680,683,686,689,692,695,698,701,704,707,710,713,716,719,722,725,728,731,734,737,740,743,746,749,752,755,758,761,764,767,770,773,776,779,782,785,788,791,794,797,800,801,802,803],{"title":669,"_path":670,"layout":13},"Accordion","/design-system/components/accordion",{"title":672,"_path":673,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":675,"_path":676,"layout":13},"Alert","/design-system/components/alert",{"title":678,"_path":679,"layout":13},"Block quote","/design-system/components/block-quote",{"title":681,"_path":682,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":684,"_path":685,"layout":13},"Button","/design-system/components/button",{"title":687,"_path":688,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":690,"_path":691,"layout":13},"Callout","/design-system/components/callout",{"title":693,"_path":694,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":696,"_path":697,"layout":13},"Card","/design-system/components/card",{"title":699,"_path":700,"layout":13},"Carousel","/design-system/components/carousel",{"title":702,"_path":703,"layout":13},"Category grid","/design-system/components/category-grid",{"title":705,"_path":706,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":708,"_path":709,"layout":13},"Chip","/design-system/components/chip",{"title":711,"_path":712,"layout":13},"Contact us","/design-system/components/contact-us",{"title":714,"_path":715,"layout":13},"Date input","/design-system/components/date-input",{"title":717,"_path":718,"layout":13},"Detail list","/design-system/components/detail-list",{"title":720,"_path":721,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":723,"_path":724,"layout":13},"File","/design-system/components/file",{"title":726,"_path":727,"layout":13},"Footer","/design-system/components/footer",{"title":729,"_path":730,"layout":13},"Form","/design-system/components/form",{"title":732,"_path":733,"layout":13},"Form alert","/design-system/components/form-alert",{"title":735,"_path":736,"layout":13},"Header","/design-system/components/header",{"title":738,"_path":739,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":741,"_path":742,"layout":13},"Input field","/design-system/components/input-field",{"title":744,"_path":745,"layout":13},"Key dates","/design-system/components/key-dates",{"title":747,"_path":748,"layout":13},"Media","/design-system/components/media",{"title":750,"_path":751,"layout":13},"Media embed","/design-system/components/media-embed",{"title":753,"_path":754,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":756,"_path":757,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":759,"_path":760,"layout":13},"Option button","/design-system/components/option-button",{"title":762,"_path":763,"layout":13},"Page action","/design-system/components/page-action",{"title":765,"_path":766,"layout":13},"Pagination","/design-system/components/pagination",{"title":768,"_path":769,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":771,"_path":772,"layout":13},"Profile","/design-system/components/profile",{"title":774,"_path":775,"layout":13},"Radio button","/design-system/components/radio-button",{"title":777,"_path":778,"layout":13},"Related links","/design-system/components/related-links",{"title":780,"_path":781,"layout":13},"Results listing","/design-system/components/results-listing",{"title":783,"_path":784,"layout":13},"Search bar","/design-system/components/search-bar",{"title":786,"_path":787,"layout":13},"Skip link","/design-system/components/skip-link",{"title":789,"_path":790,"layout":13},"Social share","/design-system/components/social-share",{"title":792,"_path":793,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":795,"_path":796,"layout":13},"Table","/design-system/components/table",{"title":798,"_path":799,"layout":13},"Tabs","/design-system/components/tabs",{"title":549,"_path":548,"layout":13},{"title":11,"_path":7,"layout":13},{"title":555,"_path":554,"layout":13},{"title":804,"_path":805,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":807,"_path":808,"children":809,"layout":13},"Ripple Framework","/framework",[810,811,829,851],{"title":807,"_path":808,"layout":13},{"title":812,"_path":813,"children":814},"Key Concepts","/framework/key-concepts",[815,817,820,823,826],{"title":622,"_path":816,"layout":13},"/framework/key-concepts/nuxt",{"title":818,"_path":819,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":821,"_path":822,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":824,"_path":825,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":827,"_path":828,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":830,"_path":831,"children":832},"Guides","/framework/guides",[833,836,839,842,845,848],{"title":834,"_path":835,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":837,"_path":838,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":840,"_path":841,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":843,"_path":844,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":846,"_path":847,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":849,"_path":850,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":852,"_path":853,"layout":13},"Core modules","/framework/core-modules",["Reactive",855],["Set"],["Reactive",857],{"module-navigation":858},null,true,"/design-system/components/text-area/",1714695654463]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/timeline/_payload.json b/design-system/components/timeline/_payload.json
index 34ae7ebb9b..5dc42da137 100644
--- a/design-system/components/timeline/_payload.json
+++ b/design-system/components/timeline/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":104,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695155182]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":104,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695653240]
\ No newline at end of file
diff --git a/design-system/components/timeline/index.html b/design-system/components/timeline/index.html
index a0beede6ec..e1229cf71f 100644
--- a/design-system/components/timeline/index.html
+++ b/design-system/components/timeline/index.html
@@ -28,63 +28,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -96,8 +96,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Timeline</h1><p class="rpl-type-p-large" data-v-3163c6df>The Timeline component contains blocks of content displayed in a linear order.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->A timeline displays a visual journey of short blocks of content in a linear order. Each block can be actionable for users to navigate through to related content.<!--]--></p><p><!--[-->A timeline can include a combination of:<!--]--></p><ul><!--[--><li><!--[-->heading<!--]--></li><li><!--[-->subheading<!--]--></li><li><!--[-->summary<!--]--></li><li><!--[-->image.<!--]--></li><!--]--></ul><p><!--[-->Use timelines to show a clear and sequential order of information. This assists users in linking pieces of information together.<!--]--></p><p><!--[-->Some examples include:<!--]--></p><ul><!--[--><li><!--[-->dates<!--]--></li><li><!--[-->steps<!--]--></li><li><!--[-->stages<!--]--></li><li><!--[-->events<!--]--></li><li><!--[-->actions<!--]--></li><li><!--[-->outcomes.<!--]--></li><!--]--></ul><p><!--[-->The timeline component is ordered from top to bottom.<!--]--></p><p><!--[-->Use between 3 to 8 discrete sections of content, so the user is not overwhelmed.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-timeline--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-timeline--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Always include a title for the entire timeline.<!--]--></li><li><!--[-->Add a heading, subheading, short summary and optional image for each block.<!--]--></li><li><!--[-->Only include 3 to 8 blocks per timeline.<!--]--></li><li><!--[-->Add a link if you&#39;re providing more details on another page.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t add fewer than 3 or more than 8 blocks.<!--]--></li><li><!--[-->Don&#39;t use without a heading for each block.<!--]--></li><li><!--[-->Never include unrelated content.<!--]--></li><li><!--[-->Don&#39;t use if content doesn&#39;t flow in a sequential or linear order. Consider bullets points instead.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->Timeline has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->progressive.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><p><!--[-->This is for steps or stages along a process. Use the default timeline when progress is not relevant to the user.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-timeline--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-timeline--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="progressive" data-v-ea525968><a href="#progressive" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Progressive<!--]--></a></h2><p><!--[-->Use the progressive variant to show the progress or status of the content to the user.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-timeline--progressive-active-2&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-timeline--progressive-active-2&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Timeline uses colour to:<!--]--></p><ul><!--[--><li><!--[-->show progress<!--]--></li><li><!--[-->highlight interactive states.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-timeline--progressive-active-2&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-timeline--progressive-active-2&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/timeline.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/timeline/_payload.json">[{"state":1,"once":621,"_errors":623,"serverRendered":626,"path":7,"prerenderedAt":627},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":310,"$sdd-globals":326,"$sdd-navigation":328},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/timeline":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":305,"_id":306,"_source":307,"_file":308,"_extension":309},"/design-system/components/timeline","components",false,"","Timeline","The Timeline component contains blocks of content displayed in a linear order.","page","Core",{"type":16,"children":17,"toc":292},"root",[18,27,33,38,63,68,73,106,111,116,121,128,151,157,180,184,190,195,208,213,218,221,227,232,236,239,245,250,263,270],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"A timeline displays a visual journey of short blocks of content in a linear order. Each block can be actionable for users to navigate through to related content.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"A timeline can include a combination of:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48,53,58],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"heading",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"subheading",{"type":19,"tag":43,"props":54,"children":55},{},[56],{"type":25,"value":57},"summary",{"type":19,"tag":43,"props":59,"children":60},{},[61],{"type":25,"value":62},"image.",{"type":19,"tag":28,"props":64,"children":65},{},[66],{"type":25,"value":67},"Use timelines to show a clear and sequential order of information. This assists users in linking pieces of information together.",{"type":19,"tag":28,"props":69,"children":70},{},[71],{"type":25,"value":72},"Some examples include:",{"type":19,"tag":39,"props":74,"children":75},{},[76,81,86,91,96,101],{"type":19,"tag":43,"props":77,"children":78},{},[79],{"type":25,"value":80},"dates",{"type":19,"tag":43,"props":82,"children":83},{},[84],{"type":25,"value":85},"steps",{"type":19,"tag":43,"props":87,"children":88},{},[89],{"type":25,"value":90},"stages",{"type":19,"tag":43,"props":92,"children":93},{},[94],{"type":25,"value":95},"events",{"type":19,"tag":43,"props":97,"children":98},{},[99],{"type":25,"value":100},"actions",{"type":19,"tag":43,"props":102,"children":103},{},[104],{"type":25,"value":105},"outcomes.",{"type":19,"tag":28,"props":107,"children":108},{},[109],{"type":25,"value":110},"The timeline component is ordered from top to bottom.",{"type":19,"tag":28,"props":112,"children":113},{},[114],{"type":25,"value":115},"Use between 3 to 8 discrete sections of content, so the user is not overwhelmed.",{"type":19,"tag":117,"props":118,"children":120},"docs-example",{"id":119},"core-containers-timeline--default-story",[],{"type":19,"tag":122,"props":123,"children":125},"h3",{"id":124},"when-and-how-to-use",[126],{"type":25,"value":127},"When and how to use",{"type":19,"tag":39,"props":129,"children":130},{},[131,136,141,146],{"type":19,"tag":43,"props":132,"children":133},{},[134],{"type":25,"value":135},"Always include a title for the entire timeline.",{"type":19,"tag":43,"props":137,"children":138},{},[139],{"type":25,"value":140},"Add a heading, subheading, short summary and optional image for each block.",{"type":19,"tag":43,"props":142,"children":143},{},[144],{"type":25,"value":145},"Only include 3 to 8 blocks per timeline.",{"type":19,"tag":43,"props":147,"children":148},{},[149],{"type":25,"value":150},"Add a link if you're providing more details on another page.",{"type":19,"tag":122,"props":152,"children":154},{"id":153},"when-and-how-not-to-use",[155],{"type":25,"value":156},"When and how not to use",{"type":19,"tag":39,"props":158,"children":159},{},[160,165,170,175],{"type":19,"tag":43,"props":161,"children":162},{},[163],{"type":25,"value":164},"Don't add fewer than 3 or more than 8 blocks.",{"type":19,"tag":43,"props":166,"children":167},{},[168],{"type":25,"value":169},"Don't use without a heading for each block.",{"type":19,"tag":43,"props":171,"children":172},{},[173],{"type":25,"value":174},"Never include unrelated content.",{"type":19,"tag":43,"props":176,"children":177},{},[178],{"type":25,"value":179},"Don't use if content doesn't flow in a sequential or linear order. Consider bullets points instead.",{"type":19,"tag":181,"props":182,"children":183},"hr",{},[],{"type":19,"tag":20,"props":185,"children":187},{"id":186},"variants",[188],{"type":25,"value":189},"Variants",{"type":19,"tag":28,"props":191,"children":192},{},[193],{"type":25,"value":194},"Timeline has 2 variants:",{"type":19,"tag":39,"props":196,"children":197},{},[198,203],{"type":19,"tag":43,"props":199,"children":200},{},[201],{"type":25,"value":202},"default",{"type":19,"tag":43,"props":204,"children":205},{},[206],{"type":25,"value":207},"progressive.",{"type":19,"tag":122,"props":209,"children":210},{"id":202},[211],{"type":25,"value":212},"Default",{"type":19,"tag":28,"props":214,"children":215},{},[216],{"type":25,"value":217},"This is for steps or stages along a process. Use the default timeline when progress is not relevant to the user.",{"type":19,"tag":117,"props":219,"children":220},{"id":119},[],{"type":19,"tag":122,"props":222,"children":224},{"id":223},"progressive",[225],{"type":25,"value":226},"Progressive",{"type":19,"tag":28,"props":228,"children":229},{},[230],{"type":25,"value":231},"Use the progressive variant to show the progress or status of the content to the user.",{"type":19,"tag":117,"props":233,"children":235},{"id":234},"core-containers-timeline--progressive-active-2",[],{"type":19,"tag":181,"props":237,"children":238},{},[],{"type":19,"tag":20,"props":240,"children":242},{"id":241},"theming",[243],{"type":25,"value":244},"Theming",{"type":19,"tag":28,"props":246,"children":247},{},[248],{"type":25,"value":249},"Timeline uses colour to:",{"type":19,"tag":39,"props":251,"children":252},{},[253,258],{"type":19,"tag":43,"props":254,"children":255},{},[256],{"type":25,"value":257},"show progress",{"type":19,"tag":43,"props":259,"children":260},{},[261],{"type":25,"value":262},"highlight interactive states.",{"type":19,"tag":264,"props":265,"children":266},"docs-theme-chooser",{},[267],{"type":19,"tag":117,"props":268,"children":269},{"id":234},[],{"type":19,"tag":28,"props":271,"children":272},{},[273,275,282,284,290],{"type":25,"value":274},"To create your own theme see ",{"type":19,"tag":276,"props":277,"children":279},"a",{"href":278},"/design-system/design/theming-guidance-for-designers",[280],{"type":25,"value":281},"theming guidance for designers",{"type":25,"value":283}," or ",{"type":19,"tag":276,"props":285,"children":287},{"href":286},"/design-system/develop/theming",[288],{"type":25,"value":289},"theming guidance for developers",{"type":25,"value":291},".",{"title":10,"searchDepth":293,"depth":293,"links":294},2,[295,300,304],{"id":22,"depth":293,"text":26,"children":296},[297,299],{"id":124,"depth":298,"text":127},3,{"id":153,"depth":298,"text":156},{"id":186,"depth":293,"text":189,"children":301},[302,303],{"id":202,"depth":298,"text":212},{"id":223,"depth":298,"text":226},{"id":241,"depth":293,"text":244},"markdown","content:design-system:5.components:timeline.md","content","design-system/5.components/timeline.md","md",["ShallowRef",311],["ShallowReactive",312],{"/design-system/components/timeline":313},[314,320],{"_path":315,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":316,"description":317,"layout":13,"label":14,"_type":305,"_id":318,"_source":307,"_file":319,"_extension":309},"/design-system/components/text-area","Text area","The Text area component lets users select one option from a list.","content:design-system:5.components:text-area.md","design-system/5.components/text-area.md",{"_path":321,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":322,"description":323,"layout":13,"label":14,"_type":305,"_id":324,"_source":307,"_file":325,"_extension":309},"/design-system/components/vertical-navigation","Vertical navigation","The Vertical navigation component displays a list of links to help users navigate a section of related pages.","content:design-system:5.components:vertical-navigation.md","design-system/5.components/vertical-navigation.md",["ShallowRef",327],{},[329,334,573],{"title":330,"_path":331,"icon":332,"layout":333},"Ripple Design System","/","carbon:home","home",{"title":335,"_path":336,"children":337},"Design System","/design-system",[338,354,369,397,431],{"title":339,"_path":340,"children":341},"About","/design-system/about",[342,345,348,351],{"title":343,"_path":344,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":346,"_path":347,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":349,"_path":350,"layout":13},"Support","/design-system/about/getting-support",{"title":352,"_path":353,"layout":13},"Contributing","/design-system/about/contributing",{"title":355,"_path":356,"children":357},"Design","/design-system/design",[358,361,364,367],{"title":359,"_path":360,"layout":13},"Getting started","/design-system/design/getting-started",{"title":362,"_path":363,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":365,"_path":366,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":368,"_path":278,"layout":13},"Theming guidance for designers",{"title":370,"_path":371,"children":372},"Develop","/design-system/develop",[373,375,377,379],{"title":359,"_path":374,"layout":13},"/design-system/develop/getting-started",{"title":352,"_path":376,"layout":13},"/design-system/develop/contributing",{"title":378,"_path":286,"layout":13},"Theme and brand application",{"title":26,"_path":380,"children":381,"layout":13},"/design-system/develop/usage",[382,385,388,391,394],{"title":383,"_path":384,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":386,"_path":387,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":389,"_path":390,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":392,"_path":393,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":395,"_path":396,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":398,"_path":399,"children":400},"Styles","/design-system/styles",[401,404,407,410,413,416,419,422,425,428],{"title":402,"_path":403,"layout":13},"Colour","/design-system/styles/colour",{"title":405,"_path":406,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":408,"_path":409,"layout":13},"Grid","/design-system/styles/grid",{"title":411,"_path":412,"layout":13},"Icons","/design-system/styles/icons",{"title":414,"_path":415,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":417,"_path":418,"layout":13},"Layout","/design-system/styles/layout",{"title":420,"_path":421,"layout":13},"Logo","/design-system/styles/logo",{"title":423,"_path":424,"layout":13},"Motion","/design-system/styles/motion",{"title":426,"_path":427,"layout":13},"Spacing","/design-system/styles/spacing",{"title":429,"_path":430,"layout":13},"Typography","/design-system/styles/typography",{"title":432,"_path":433,"children":434},"Components","/design-system/components",[435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543,546,549,552,555,558,561,564,567,570,571,572],{"title":436,"_path":437,"layout":13},"Accordion","/design-system/components/accordion",{"title":439,"_path":440,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":442,"_path":443,"layout":13},"Alert","/design-system/components/alert",{"title":445,"_path":446,"layout":13},"Block quote","/design-system/components/block-quote",{"title":448,"_path":449,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":451,"_path":452,"layout":13},"Button","/design-system/components/button",{"title":454,"_path":455,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":457,"_path":458,"layout":13},"Callout","/design-system/components/callout",{"title":460,"_path":461,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":463,"_path":464,"layout":13},"Card","/design-system/components/card",{"title":466,"_path":467,"layout":13},"Carousel","/design-system/components/carousel",{"title":469,"_path":470,"layout":13},"Category grid","/design-system/components/category-grid",{"title":472,"_path":473,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":475,"_path":476,"layout":13},"Chip","/design-system/components/chip",{"title":478,"_path":479,"layout":13},"Contact us","/design-system/components/contact-us",{"title":481,"_path":482,"layout":13},"Date input","/design-system/components/date-input",{"title":484,"_path":485,"layout":13},"Detail list","/design-system/components/detail-list",{"title":487,"_path":488,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":490,"_path":491,"layout":13},"File","/design-system/components/file",{"title":493,"_path":494,"layout":13},"Footer","/design-system/components/footer",{"title":496,"_path":497,"layout":13},"Form","/design-system/components/form",{"title":499,"_path":500,"layout":13},"Form alert","/design-system/components/form-alert",{"title":502,"_path":503,"layout":13},"Header","/design-system/components/header",{"title":505,"_path":506,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":508,"_path":509,"layout":13},"Input field","/design-system/components/input-field",{"title":511,"_path":512,"layout":13},"Key dates","/design-system/components/key-dates",{"title":514,"_path":515,"layout":13},"Media","/design-system/components/media",{"title":517,"_path":518,"layout":13},"Media embed","/design-system/components/media-embed",{"title":520,"_path":521,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":523,"_path":524,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":526,"_path":527,"layout":13},"Option button","/design-system/components/option-button",{"title":529,"_path":530,"layout":13},"Page action","/design-system/components/page-action",{"title":532,"_path":533,"layout":13},"Pagination","/design-system/components/pagination",{"title":535,"_path":536,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":538,"_path":539,"layout":13},"Profile","/design-system/components/profile",{"title":541,"_path":542,"layout":13},"Radio button","/design-system/components/radio-button",{"title":544,"_path":545,"layout":13},"Related links","/design-system/components/related-links",{"title":547,"_path":548,"layout":13},"Results listing","/design-system/components/results-listing",{"title":550,"_path":551,"layout":13},"Search bar","/design-system/components/search-bar",{"title":553,"_path":554,"layout":13},"Skip link","/design-system/components/skip-link",{"title":556,"_path":557,"layout":13},"Social share","/design-system/components/social-share",{"title":559,"_path":560,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":562,"_path":563,"layout":13},"Table","/design-system/components/table",{"title":565,"_path":566,"layout":13},"Tabs","/design-system/components/tabs",{"title":568,"_path":569,"layout":13},"Tag","/design-system/components/tag",{"title":316,"_path":315,"layout":13},{"title":11,"_path":7,"layout":13},{"title":322,"_path":321,"layout":13},{"title":574,"_path":575,"children":576,"layout":13},"Ripple Framework","/framework",[577,578,596,618],{"title":574,"_path":575,"layout":13},{"title":579,"_path":580,"children":581},"Key Concepts","/framework/key-concepts",[582,584,587,590,593],{"title":389,"_path":583,"layout":13},"/framework/key-concepts/nuxt",{"title":585,"_path":586,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":588,"_path":589,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":591,"_path":592,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":594,"_path":595,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":597,"_path":598,"children":599},"Guides","/framework/guides",[600,603,606,609,612,615],{"title":601,"_path":602,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":604,"_path":605,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":607,"_path":608,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":610,"_path":611,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":613,"_path":614,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":616,"_path":617,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":619,"_path":620,"layout":13},"Core modules","/framework/core-modules",["Reactive",622],["Set"],["Reactive",624],{"module-navigation":625},null,true,1714695155182]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Timeline</h1><p class="rpl-type-p-large" data-v-3163c6df>The Timeline component contains blocks of content displayed in a linear order.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->A timeline displays a visual journey of short blocks of content in a linear order. Each block can be actionable for users to navigate through to related content.<!--]--></p><p><!--[-->A timeline can include a combination of:<!--]--></p><ul><!--[--><li><!--[-->heading<!--]--></li><li><!--[-->subheading<!--]--></li><li><!--[-->summary<!--]--></li><li><!--[-->image.<!--]--></li><!--]--></ul><p><!--[-->Use timelines to show a clear and sequential order of information. This assists users in linking pieces of information together.<!--]--></p><p><!--[-->Some examples include:<!--]--></p><ul><!--[--><li><!--[-->dates<!--]--></li><li><!--[-->steps<!--]--></li><li><!--[-->stages<!--]--></li><li><!--[-->events<!--]--></li><li><!--[-->actions<!--]--></li><li><!--[-->outcomes.<!--]--></li><!--]--></ul><p><!--[-->The timeline component is ordered from top to bottom.<!--]--></p><p><!--[-->Use between 3 to 8 discrete sections of content, so the user is not overwhelmed.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-timeline--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-timeline--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Always include a title for the entire timeline.<!--]--></li><li><!--[-->Add a heading, subheading, short summary and optional image for each block.<!--]--></li><li><!--[-->Only include 3 to 8 blocks per timeline.<!--]--></li><li><!--[-->Add a link if you&#39;re providing more details on another page.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t add fewer than 3 or more than 8 blocks.<!--]--></li><li><!--[-->Don&#39;t use without a heading for each block.<!--]--></li><li><!--[-->Never include unrelated content.<!--]--></li><li><!--[-->Don&#39;t use if content doesn&#39;t flow in a sequential or linear order. Consider bullets points instead.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="variants" data-v-fff5b905><a href="#variants" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Variants<!--]--></a></h2><p><!--[-->Timeline has 2 variants:<!--]--></p><ul><!--[--><li><!--[-->default<!--]--></li><li><!--[-->progressive.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="default" data-v-ea525968><a href="#default" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Default<!--]--></a></h2><p><!--[-->This is for steps or stages along a process. Use the default timeline when progress is not relevant to the user.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-timeline--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-timeline--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="progressive" data-v-ea525968><a href="#progressive" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Progressive<!--]--></a></h2><p><!--[-->Use the progressive variant to show the progress or status of the content to the user.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-timeline--progressive-active-2&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-timeline--progressive-active-2&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Timeline uses colour to:<!--]--></p><ul><!--[--><li><!--[-->show progress<!--]--></li><li><!--[-->highlight interactive states.<!--]--></li><!--]--></ul><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-containers-timeline--progressive-active-2&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-containers-timeline--progressive-active-2&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/timeline.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/timeline/_payload.json">[{"state":1,"once":621,"_errors":623,"serverRendered":626,"path":7,"prerenderedAt":627},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":310,"$sdd-globals":326,"$sdd-navigation":328},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/timeline":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":305,"_id":306,"_source":307,"_file":308,"_extension":309},"/design-system/components/timeline","components",false,"","Timeline","The Timeline component contains blocks of content displayed in a linear order.","page","Core",{"type":16,"children":17,"toc":292},"root",[18,27,33,38,63,68,73,106,111,116,121,128,151,157,180,184,190,195,208,213,218,221,227,232,236,239,245,250,263,270],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"A timeline displays a visual journey of short blocks of content in a linear order. Each block can be actionable for users to navigate through to related content.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"A timeline can include a combination of:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48,53,58],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"heading",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"subheading",{"type":19,"tag":43,"props":54,"children":55},{},[56],{"type":25,"value":57},"summary",{"type":19,"tag":43,"props":59,"children":60},{},[61],{"type":25,"value":62},"image.",{"type":19,"tag":28,"props":64,"children":65},{},[66],{"type":25,"value":67},"Use timelines to show a clear and sequential order of information. This assists users in linking pieces of information together.",{"type":19,"tag":28,"props":69,"children":70},{},[71],{"type":25,"value":72},"Some examples include:",{"type":19,"tag":39,"props":74,"children":75},{},[76,81,86,91,96,101],{"type":19,"tag":43,"props":77,"children":78},{},[79],{"type":25,"value":80},"dates",{"type":19,"tag":43,"props":82,"children":83},{},[84],{"type":25,"value":85},"steps",{"type":19,"tag":43,"props":87,"children":88},{},[89],{"type":25,"value":90},"stages",{"type":19,"tag":43,"props":92,"children":93},{},[94],{"type":25,"value":95},"events",{"type":19,"tag":43,"props":97,"children":98},{},[99],{"type":25,"value":100},"actions",{"type":19,"tag":43,"props":102,"children":103},{},[104],{"type":25,"value":105},"outcomes.",{"type":19,"tag":28,"props":107,"children":108},{},[109],{"type":25,"value":110},"The timeline component is ordered from top to bottom.",{"type":19,"tag":28,"props":112,"children":113},{},[114],{"type":25,"value":115},"Use between 3 to 8 discrete sections of content, so the user is not overwhelmed.",{"type":19,"tag":117,"props":118,"children":120},"docs-example",{"id":119},"core-containers-timeline--default-story",[],{"type":19,"tag":122,"props":123,"children":125},"h3",{"id":124},"when-and-how-to-use",[126],{"type":25,"value":127},"When and how to use",{"type":19,"tag":39,"props":129,"children":130},{},[131,136,141,146],{"type":19,"tag":43,"props":132,"children":133},{},[134],{"type":25,"value":135},"Always include a title for the entire timeline.",{"type":19,"tag":43,"props":137,"children":138},{},[139],{"type":25,"value":140},"Add a heading, subheading, short summary and optional image for each block.",{"type":19,"tag":43,"props":142,"children":143},{},[144],{"type":25,"value":145},"Only include 3 to 8 blocks per timeline.",{"type":19,"tag":43,"props":147,"children":148},{},[149],{"type":25,"value":150},"Add a link if you're providing more details on another page.",{"type":19,"tag":122,"props":152,"children":154},{"id":153},"when-and-how-not-to-use",[155],{"type":25,"value":156},"When and how not to use",{"type":19,"tag":39,"props":158,"children":159},{},[160,165,170,175],{"type":19,"tag":43,"props":161,"children":162},{},[163],{"type":25,"value":164},"Don't add fewer than 3 or more than 8 blocks.",{"type":19,"tag":43,"props":166,"children":167},{},[168],{"type":25,"value":169},"Don't use without a heading for each block.",{"type":19,"tag":43,"props":171,"children":172},{},[173],{"type":25,"value":174},"Never include unrelated content.",{"type":19,"tag":43,"props":176,"children":177},{},[178],{"type":25,"value":179},"Don't use if content doesn't flow in a sequential or linear order. Consider bullets points instead.",{"type":19,"tag":181,"props":182,"children":183},"hr",{},[],{"type":19,"tag":20,"props":185,"children":187},{"id":186},"variants",[188],{"type":25,"value":189},"Variants",{"type":19,"tag":28,"props":191,"children":192},{},[193],{"type":25,"value":194},"Timeline has 2 variants:",{"type":19,"tag":39,"props":196,"children":197},{},[198,203],{"type":19,"tag":43,"props":199,"children":200},{},[201],{"type":25,"value":202},"default",{"type":19,"tag":43,"props":204,"children":205},{},[206],{"type":25,"value":207},"progressive.",{"type":19,"tag":122,"props":209,"children":210},{"id":202},[211],{"type":25,"value":212},"Default",{"type":19,"tag":28,"props":214,"children":215},{},[216],{"type":25,"value":217},"This is for steps or stages along a process. Use the default timeline when progress is not relevant to the user.",{"type":19,"tag":117,"props":219,"children":220},{"id":119},[],{"type":19,"tag":122,"props":222,"children":224},{"id":223},"progressive",[225],{"type":25,"value":226},"Progressive",{"type":19,"tag":28,"props":228,"children":229},{},[230],{"type":25,"value":231},"Use the progressive variant to show the progress or status of the content to the user.",{"type":19,"tag":117,"props":233,"children":235},{"id":234},"core-containers-timeline--progressive-active-2",[],{"type":19,"tag":181,"props":237,"children":238},{},[],{"type":19,"tag":20,"props":240,"children":242},{"id":241},"theming",[243],{"type":25,"value":244},"Theming",{"type":19,"tag":28,"props":246,"children":247},{},[248],{"type":25,"value":249},"Timeline uses colour to:",{"type":19,"tag":39,"props":251,"children":252},{},[253,258],{"type":19,"tag":43,"props":254,"children":255},{},[256],{"type":25,"value":257},"show progress",{"type":19,"tag":43,"props":259,"children":260},{},[261],{"type":25,"value":262},"highlight interactive states.",{"type":19,"tag":264,"props":265,"children":266},"docs-theme-chooser",{},[267],{"type":19,"tag":117,"props":268,"children":269},{"id":234},[],{"type":19,"tag":28,"props":271,"children":272},{},[273,275,282,284,290],{"type":25,"value":274},"To create your own theme see ",{"type":19,"tag":276,"props":277,"children":279},"a",{"href":278},"/design-system/design/theming-guidance-for-designers",[280],{"type":25,"value":281},"theming guidance for designers",{"type":25,"value":283}," or ",{"type":19,"tag":276,"props":285,"children":287},{"href":286},"/design-system/develop/theming",[288],{"type":25,"value":289},"theming guidance for developers",{"type":25,"value":291},".",{"title":10,"searchDepth":293,"depth":293,"links":294},2,[295,300,304],{"id":22,"depth":293,"text":26,"children":296},[297,299],{"id":124,"depth":298,"text":127},3,{"id":153,"depth":298,"text":156},{"id":186,"depth":293,"text":189,"children":301},[302,303],{"id":202,"depth":298,"text":212},{"id":223,"depth":298,"text":226},{"id":241,"depth":293,"text":244},"markdown","content:design-system:5.components:timeline.md","content","design-system/5.components/timeline.md","md",["ShallowRef",311],["ShallowReactive",312],{"/design-system/components/timeline":313},[314,320],{"_path":315,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":316,"description":317,"layout":13,"label":14,"_type":305,"_id":318,"_source":307,"_file":319,"_extension":309},"/design-system/components/text-area","Text area","The Text area component lets users select one option from a list.","content:design-system:5.components:text-area.md","design-system/5.components/text-area.md",{"_path":321,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":322,"description":323,"layout":13,"label":14,"_type":305,"_id":324,"_source":307,"_file":325,"_extension":309},"/design-system/components/vertical-navigation","Vertical navigation","The Vertical navigation component displays a list of links to help users navigate a section of related pages.","content:design-system:5.components:vertical-navigation.md","design-system/5.components/vertical-navigation.md",["ShallowRef",327],{},[329,334,573],{"title":330,"_path":331,"icon":332,"layout":333},"Ripple Design System","/","carbon:home","home",{"title":335,"_path":336,"children":337},"Design System","/design-system",[338,354,369,397,431],{"title":339,"_path":340,"children":341},"About","/design-system/about",[342,345,348,351],{"title":343,"_path":344,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":346,"_path":347,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":349,"_path":350,"layout":13},"Support","/design-system/about/getting-support",{"title":352,"_path":353,"layout":13},"Contributing","/design-system/about/contributing",{"title":355,"_path":356,"children":357},"Design","/design-system/design",[358,361,364,367],{"title":359,"_path":360,"layout":13},"Getting started","/design-system/design/getting-started",{"title":362,"_path":363,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":365,"_path":366,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":368,"_path":278,"layout":13},"Theming guidance for designers",{"title":370,"_path":371,"children":372},"Develop","/design-system/develop",[373,375,377,379],{"title":359,"_path":374,"layout":13},"/design-system/develop/getting-started",{"title":352,"_path":376,"layout":13},"/design-system/develop/contributing",{"title":378,"_path":286,"layout":13},"Theme and brand application",{"title":26,"_path":380,"children":381,"layout":13},"/design-system/develop/usage",[382,385,388,391,394],{"title":383,"_path":384,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":386,"_path":387,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":389,"_path":390,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":392,"_path":393,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":395,"_path":396,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":398,"_path":399,"children":400},"Styles","/design-system/styles",[401,404,407,410,413,416,419,422,425,428],{"title":402,"_path":403,"layout":13},"Colour","/design-system/styles/colour",{"title":405,"_path":406,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":408,"_path":409,"layout":13},"Grid","/design-system/styles/grid",{"title":411,"_path":412,"layout":13},"Icons","/design-system/styles/icons",{"title":414,"_path":415,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":417,"_path":418,"layout":13},"Layout","/design-system/styles/layout",{"title":420,"_path":421,"layout":13},"Logo","/design-system/styles/logo",{"title":423,"_path":424,"layout":13},"Motion","/design-system/styles/motion",{"title":426,"_path":427,"layout":13},"Spacing","/design-system/styles/spacing",{"title":429,"_path":430,"layout":13},"Typography","/design-system/styles/typography",{"title":432,"_path":433,"children":434},"Components","/design-system/components",[435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543,546,549,552,555,558,561,564,567,570,571,572],{"title":436,"_path":437,"layout":13},"Accordion","/design-system/components/accordion",{"title":439,"_path":440,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":442,"_path":443,"layout":13},"Alert","/design-system/components/alert",{"title":445,"_path":446,"layout":13},"Block quote","/design-system/components/block-quote",{"title":448,"_path":449,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":451,"_path":452,"layout":13},"Button","/design-system/components/button",{"title":454,"_path":455,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":457,"_path":458,"layout":13},"Callout","/design-system/components/callout",{"title":460,"_path":461,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":463,"_path":464,"layout":13},"Card","/design-system/components/card",{"title":466,"_path":467,"layout":13},"Carousel","/design-system/components/carousel",{"title":469,"_path":470,"layout":13},"Category grid","/design-system/components/category-grid",{"title":472,"_path":473,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":475,"_path":476,"layout":13},"Chip","/design-system/components/chip",{"title":478,"_path":479,"layout":13},"Contact us","/design-system/components/contact-us",{"title":481,"_path":482,"layout":13},"Date input","/design-system/components/date-input",{"title":484,"_path":485,"layout":13},"Detail list","/design-system/components/detail-list",{"title":487,"_path":488,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":490,"_path":491,"layout":13},"File","/design-system/components/file",{"title":493,"_path":494,"layout":13},"Footer","/design-system/components/footer",{"title":496,"_path":497,"layout":13},"Form","/design-system/components/form",{"title":499,"_path":500,"layout":13},"Form alert","/design-system/components/form-alert",{"title":502,"_path":503,"layout":13},"Header","/design-system/components/header",{"title":505,"_path":506,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":508,"_path":509,"layout":13},"Input field","/design-system/components/input-field",{"title":511,"_path":512,"layout":13},"Key dates","/design-system/components/key-dates",{"title":514,"_path":515,"layout":13},"Media","/design-system/components/media",{"title":517,"_path":518,"layout":13},"Media embed","/design-system/components/media-embed",{"title":520,"_path":521,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":523,"_path":524,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":526,"_path":527,"layout":13},"Option button","/design-system/components/option-button",{"title":529,"_path":530,"layout":13},"Page action","/design-system/components/page-action",{"title":532,"_path":533,"layout":13},"Pagination","/design-system/components/pagination",{"title":535,"_path":536,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":538,"_path":539,"layout":13},"Profile","/design-system/components/profile",{"title":541,"_path":542,"layout":13},"Radio button","/design-system/components/radio-button",{"title":544,"_path":545,"layout":13},"Related links","/design-system/components/related-links",{"title":547,"_path":548,"layout":13},"Results listing","/design-system/components/results-listing",{"title":550,"_path":551,"layout":13},"Search bar","/design-system/components/search-bar",{"title":553,"_path":554,"layout":13},"Skip link","/design-system/components/skip-link",{"title":556,"_path":557,"layout":13},"Social share","/design-system/components/social-share",{"title":559,"_path":560,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":562,"_path":563,"layout":13},"Table","/design-system/components/table",{"title":565,"_path":566,"layout":13},"Tabs","/design-system/components/tabs",{"title":568,"_path":569,"layout":13},"Tag","/design-system/components/tag",{"title":316,"_path":315,"layout":13},{"title":11,"_path":7,"layout":13},{"title":322,"_path":321,"layout":13},{"title":574,"_path":575,"children":576,"layout":13},"Ripple Framework","/framework",[577,578,596,618],{"title":574,"_path":575,"layout":13},{"title":579,"_path":580,"children":581},"Key Concepts","/framework/key-concepts",[582,584,587,590,593],{"title":389,"_path":583,"layout":13},"/framework/key-concepts/nuxt",{"title":585,"_path":586,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":588,"_path":589,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":591,"_path":592,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":594,"_path":595,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":597,"_path":598,"children":599},"Guides","/framework/guides",[600,603,606,609,612,615],{"title":601,"_path":602,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":604,"_path":605,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":607,"_path":608,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":610,"_path":611,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":613,"_path":614,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":616,"_path":617,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":619,"_path":620,"layout":13},"Core modules","/framework/core-modules",["Reactive",622],["Set"],["Reactive",624],{"module-navigation":625},null,true,1714695653240]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/components/vertical-navigation/_payload.json b/design-system/components/vertical-navigation/_payload.json
index e3a18266d4..5957621409 100644
--- a/design-system/components/vertical-navigation/_payload.json
+++ b/design-system/components/vertical-navigation/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":104,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695155235]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,101],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":7,"items":70},"/design-system/styles","Styles",[71,74,77,80,83,86,89,92,95,98],{"id":72,"text":73,"url":72,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":75,"text":76,"url":75,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":78,"text":79,"url":78,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":81,"text":82,"url":81,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":84,"text":85,"url":84,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":87,"text":88,"url":87,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":90,"text":91,"url":90,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":93,"text":94,"url":93,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":96,"text":97,"url":96,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":99,"text":100,"url":99,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":102,"text":103,"url":102,"active":104,"items":105},"/design-system/components","Components",true,[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":104,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695653349]
\ No newline at end of file
diff --git a/design-system/components/vertical-navigation/index.html b/design-system/components/vertical-navigation/index.html
index ab260c3de1..267a3afa3e 100644
--- a/design-system/components/vertical-navigation/index.html
+++ b/design-system/components/vertical-navigation/index.html
@@ -28,65 +28,65 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.MC6JDrOF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.lp_k9Hpd.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.F9NVvvm4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsThemeChooser.xp0uGfRQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.Czpq-HHw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.GmB4B_NE.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -98,8 +98,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Vertical navigation</h1><p class="rpl-type-p-large" data-v-3163c6df>The Vertical navigation component displays a list of links to help users navigate a section of related pages.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use vertical navigation to help users navigate a section of related pages.<!--]--></p><p><!--[-->Use vertical navigation to:<!--]--></p><ul><!--[--><li><!--[-->let users find and navigate to relevant information<!--]--></li><li><!--[-->show the user where, within your site’s content hierarchy, the page they are viewing is located<!--]--></li><li><!--[-->show 4 nested content sections (parent sections) and a heading for the names of each section.<!--]--></li><!--]--></ul><p><!--[-->Vertical navigation is placed next to your page’s body content.<!--]--></p><p><!--[-->A chevron (v-shaped icon) next to each parent section lets users expand that parent section. This reveals the names of content pages falling within the parent section (child pages). Child page links are hidden by default.<!--]--></p><p><!--[-->The chevron flips up and parent sections stay expanded until the user interacts with the chevron to hide the child pages. This helps the user find what they need and minimises visual clutter.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-vertical-navigation--vertical-navigation&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-vertical-navigation--vertical-navigation&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use in a page&#39;s sidebar.<!--]--></li><li><!--[-->Always keep the navigation links short. You can use a shorter version of the page title.<!--]--></li><li><!--[-->Display up to 4 levels of navigation.<!--]--></li><li><!--[-->Add a link for the section&#39;s &#39;home&#39; page.<!--]--></li><li><!--[-->Use with at least 4 links.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t embed on a page that doesn&#39;t have a sidebar.<!--]--></li><li><!--[-->Don&#39;t add more than 4 child levels. Users will not see the indents, so navigation will become confusing.<!--]--></li><li><!--[-->Don&#39;t use on a site with fewer than 5 pages.<!--]--></li><li><!--[-->Don’t use with icons.<!--]--></li><li><!--[-->Never use it to link to other sites.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Vertical navigation uses colour and active state focus to highlight the current page the user is on.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-vertical-navigation--vertical-navigation&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-vertical-navigation--vertical-navigation&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="rationale" data-v-fff5b905><a href="#rationale" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Rationale<!--]--></a></h2><p><!--[-->To show the user which page in the vertical navigation they are currently on, the active state is used. This displays as an underline in addition to colour, to aim to conform with the <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Web Content Accessibility Guidelines 2.0 Success Criterion 1.4.1<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[--><strong><!--[--><a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-without-color" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->1.4.1<!--]--><!--]--><!----><!--]--></a> Use of Color:<!--]--></strong> Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.<!--]--></p><!--]--></blockquote><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/vertical-navigation.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/vertical-navigation/_payload.json">[{"state":1,"once":562,"_errors":564,"serverRendered":567,"path":7,"prerenderedAt":568},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":251,"$sdd-globals":267,"$sdd-navigation":269},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/vertical-navigation":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":246,"_id":247,"_source":248,"_file":249,"_extension":250},"/design-system/components/vertical-navigation","components",false,"","Vertical navigation","The Vertical navigation component displays a list of links to help users navigate a section of related pages.","page","Core",{"type":16,"children":17,"toc":236},"root",[18,27,33,38,58,63,68,73,78,85,113,119,147,151,157,162,169,191,194,200,214],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use vertical navigation to help users navigate a section of related pages.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Use vertical navigation to:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48,53],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"let users find and navigate to relevant information",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"show the user where, within your site’s content hierarchy, the page they are viewing is located",{"type":19,"tag":43,"props":54,"children":55},{},[56],{"type":25,"value":57},"show 4 nested content sections (parent sections) and a heading for the names of each section.",{"type":19,"tag":28,"props":59,"children":60},{},[61],{"type":25,"value":62},"Vertical navigation is placed next to your page’s body content.",{"type":19,"tag":28,"props":64,"children":65},{},[66],{"type":25,"value":67},"A chevron (v-shaped icon) next to each parent section lets users expand that parent section. This reveals the names of content pages falling within the parent section (child pages). Child page links are hidden by default.",{"type":19,"tag":28,"props":69,"children":70},{},[71],{"type":25,"value":72},"The chevron flips up and parent sections stay expanded until the user interacts with the chevron to hide the child pages. This helps the user find what they need and minimises visual clutter.",{"type":19,"tag":74,"props":75,"children":77},"docs-example",{"id":76},"core-navigation-vertical-navigation--vertical-navigation",[],{"type":19,"tag":79,"props":80,"children":82},"h3",{"id":81},"when-and-how-to-use",[83],{"type":25,"value":84},"When and how to use",{"type":19,"tag":39,"props":86,"children":87},{},[88,93,98,103,108],{"type":19,"tag":43,"props":89,"children":90},{},[91],{"type":25,"value":92},"Use in a page's sidebar.",{"type":19,"tag":43,"props":94,"children":95},{},[96],{"type":25,"value":97},"Always keep the navigation links short. You can use a shorter version of the page title.",{"type":19,"tag":43,"props":99,"children":100},{},[101],{"type":25,"value":102},"Display up to 4 levels of navigation.",{"type":19,"tag":43,"props":104,"children":105},{},[106],{"type":25,"value":107},"Add a link for the section's 'home' page.",{"type":19,"tag":43,"props":109,"children":110},{},[111],{"type":25,"value":112},"Use with at least 4 links.",{"type":19,"tag":79,"props":114,"children":116},{"id":115},"when-and-how-not-to-use",[117],{"type":25,"value":118},"When and how not to use",{"type":19,"tag":39,"props":120,"children":121},{},[122,127,132,137,142],{"type":19,"tag":43,"props":123,"children":124},{},[125],{"type":25,"value":126},"Don't embed on a page that doesn't have a sidebar.",{"type":19,"tag":43,"props":128,"children":129},{},[130],{"type":25,"value":131},"Don't add more than 4 child levels. Users will not see the indents, so navigation will become confusing.",{"type":19,"tag":43,"props":133,"children":134},{},[135],{"type":25,"value":136},"Don't use on a site with fewer than 5 pages.",{"type":19,"tag":43,"props":138,"children":139},{},[140],{"type":25,"value":141},"Don’t use with icons.",{"type":19,"tag":43,"props":143,"children":144},{},[145],{"type":25,"value":146},"Never use it to link to other sites.",{"type":19,"tag":148,"props":149,"children":150},"hr",{},[],{"type":19,"tag":20,"props":152,"children":154},{"id":153},"theming",[155],{"type":25,"value":156},"Theming",{"type":19,"tag":28,"props":158,"children":159},{},[160],{"type":25,"value":161},"Vertical navigation uses colour and active state focus to highlight the current page the user is on.",{"type":19,"tag":163,"props":164,"children":165},"docs-theme-chooser",{},[166],{"type":19,"tag":74,"props":167,"children":168},{"id":76},[],{"type":19,"tag":28,"props":170,"children":171},{},[172,174,181,183,189],{"type":25,"value":173},"To create your own theme see ",{"type":19,"tag":175,"props":176,"children":178},"a",{"href":177},"/design-system/design/theming-guidance-for-designers",[179],{"type":25,"value":180},"theming guidance for designers",{"type":25,"value":182}," or ",{"type":19,"tag":175,"props":184,"children":186},{"href":185},"/design-system/develop/theming",[187],{"type":25,"value":188},"theming guidance for developers",{"type":25,"value":190},".",{"type":19,"tag":148,"props":192,"children":193},{},[],{"type":19,"tag":20,"props":195,"children":197},{"id":196},"rationale",[198],{"type":25,"value":199},"Rationale",{"type":19,"tag":28,"props":201,"children":202},{},[203,205,213],{"type":25,"value":204},"To show the user which page in the vertical navigation they are currently on, the active state is used. This displays as an underline in addition to colour, to aim to conform with the ",{"type":19,"tag":175,"props":206,"children":210},{"href":207,"rel":208},"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html",[209],"nofollow",[211],{"type":25,"value":212},"Web Content Accessibility Guidelines 2.0 Success Criterion 1.4.1",{"type":25,"value":190},{"type":19,"tag":215,"props":216,"children":217},"blockquote",{},[218],{"type":19,"tag":28,"props":219,"children":220},{},[221,234],{"type":19,"tag":222,"props":223,"children":224},"strong",{},[225,232],{"type":19,"tag":175,"props":226,"children":229},{"href":227,"rel":228},"https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-without-color",[209],[230],{"type":25,"value":231},"1.4.1",{"type":25,"value":233}," Use of Color:",{"type":25,"value":235}," Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.",{"title":10,"searchDepth":237,"depth":237,"links":238},2,[239,244,245],{"id":22,"depth":237,"text":26,"children":240},[241,243],{"id":81,"depth":242,"text":84},3,{"id":115,"depth":242,"text":118},{"id":153,"depth":237,"text":156},{"id":196,"depth":237,"text":199},"markdown","content:design-system:5.components:vertical-navigation.md","content","design-system/5.components/vertical-navigation.md","md",["ShallowRef",252],["ShallowReactive",253],{"/design-system/components/vertical-navigation":254},[255,261],{"_path":256,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":257,"description":258,"layout":13,"label":14,"_type":246,"_id":259,"_source":248,"_file":260,"_extension":250},"/design-system/components/timeline","Timeline","The Timeline component contains blocks of content displayed in a linear order.","content:design-system:5.components:timeline.md","design-system/5.components/timeline.md",{"_path":262,"_dir":10,"_draft":9,"_partial":9,"_locale":10,"title":263,"description":264,"layout":13,"_type":246,"_id":265,"_source":248,"_file":266,"_extension":250},"/framework","Ripple Framework","Ripple framework contains the tools for building SDP sites using the Ripple design system components.","content:framework:1.index.md","framework/1.index.md",["ShallowRef",268],{},[270,275,516],{"title":271,"_path":272,"icon":273,"layout":274},"Ripple Design System","/","carbon:home","home",{"title":276,"_path":277,"children":278},"Design System","/design-system",[279,295,310,338,372],{"title":280,"_path":281,"children":282},"About","/design-system/about",[283,286,289,292],{"title":284,"_path":285,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":287,"_path":288,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":290,"_path":291,"layout":13},"Support","/design-system/about/getting-support",{"title":293,"_path":294,"layout":13},"Contributing","/design-system/about/contributing",{"title":296,"_path":297,"children":298},"Design","/design-system/design",[299,302,305,308],{"title":300,"_path":301,"layout":13},"Getting started","/design-system/design/getting-started",{"title":303,"_path":304,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":306,"_path":307,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":309,"_path":177,"layout":13},"Theming guidance for designers",{"title":311,"_path":312,"children":313},"Develop","/design-system/develop",[314,316,318,320],{"title":300,"_path":315,"layout":13},"/design-system/develop/getting-started",{"title":293,"_path":317,"layout":13},"/design-system/develop/contributing",{"title":319,"_path":185,"layout":13},"Theme and brand application",{"title":26,"_path":321,"children":322,"layout":13},"/design-system/develop/usage",[323,326,329,332,335],{"title":324,"_path":325,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":327,"_path":328,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":330,"_path":331,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":333,"_path":334,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":336,"_path":337,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":339,"_path":340,"children":341},"Styles","/design-system/styles",[342,345,348,351,354,357,360,363,366,369],{"title":343,"_path":344,"layout":13},"Colour","/design-system/styles/colour",{"title":346,"_path":347,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":349,"_path":350,"layout":13},"Grid","/design-system/styles/grid",{"title":352,"_path":353,"layout":13},"Icons","/design-system/styles/icons",{"title":355,"_path":356,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":358,"_path":359,"layout":13},"Layout","/design-system/styles/layout",{"title":361,"_path":362,"layout":13},"Logo","/design-system/styles/logo",{"title":364,"_path":365,"layout":13},"Motion","/design-system/styles/motion",{"title":367,"_path":368,"layout":13},"Spacing","/design-system/styles/spacing",{"title":370,"_path":371,"layout":13},"Typography","/design-system/styles/typography",{"title":373,"_path":374,"children":375},"Components","/design-system/components",[376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,490,493,496,499,502,505,508,511,514,515],{"title":377,"_path":378,"layout":13},"Accordion","/design-system/components/accordion",{"title":380,"_path":381,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":383,"_path":384,"layout":13},"Alert","/design-system/components/alert",{"title":386,"_path":387,"layout":13},"Block quote","/design-system/components/block-quote",{"title":389,"_path":390,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":392,"_path":393,"layout":13},"Button","/design-system/components/button",{"title":395,"_path":396,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":398,"_path":399,"layout":13},"Callout","/design-system/components/callout",{"title":401,"_path":402,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":404,"_path":405,"layout":13},"Card","/design-system/components/card",{"title":407,"_path":408,"layout":13},"Carousel","/design-system/components/carousel",{"title":410,"_path":411,"layout":13},"Category grid","/design-system/components/category-grid",{"title":413,"_path":414,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":416,"_path":417,"layout":13},"Chip","/design-system/components/chip",{"title":419,"_path":420,"layout":13},"Contact us","/design-system/components/contact-us",{"title":422,"_path":423,"layout":13},"Date input","/design-system/components/date-input",{"title":425,"_path":426,"layout":13},"Detail list","/design-system/components/detail-list",{"title":428,"_path":429,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":431,"_path":432,"layout":13},"File","/design-system/components/file",{"title":434,"_path":435,"layout":13},"Footer","/design-system/components/footer",{"title":437,"_path":438,"layout":13},"Form","/design-system/components/form",{"title":440,"_path":441,"layout":13},"Form alert","/design-system/components/form-alert",{"title":443,"_path":444,"layout":13},"Header","/design-system/components/header",{"title":446,"_path":447,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":449,"_path":450,"layout":13},"Input field","/design-system/components/input-field",{"title":452,"_path":453,"layout":13},"Key dates","/design-system/components/key-dates",{"title":455,"_path":456,"layout":13},"Media","/design-system/components/media",{"title":458,"_path":459,"layout":13},"Media embed","/design-system/components/media-embed",{"title":461,"_path":462,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":464,"_path":465,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":467,"_path":468,"layout":13},"Option button","/design-system/components/option-button",{"title":470,"_path":471,"layout":13},"Page action","/design-system/components/page-action",{"title":473,"_path":474,"layout":13},"Pagination","/design-system/components/pagination",{"title":476,"_path":477,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":479,"_path":480,"layout":13},"Profile","/design-system/components/profile",{"title":482,"_path":483,"layout":13},"Radio button","/design-system/components/radio-button",{"title":485,"_path":486,"layout":13},"Related links","/design-system/components/related-links",{"title":488,"_path":489,"layout":13},"Results listing","/design-system/components/results-listing",{"title":491,"_path":492,"layout":13},"Search bar","/design-system/components/search-bar",{"title":494,"_path":495,"layout":13},"Skip link","/design-system/components/skip-link",{"title":497,"_path":498,"layout":13},"Social share","/design-system/components/social-share",{"title":500,"_path":501,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":503,"_path":504,"layout":13},"Table","/design-system/components/table",{"title":506,"_path":507,"layout":13},"Tabs","/design-system/components/tabs",{"title":509,"_path":510,"layout":13},"Tag","/design-system/components/tag",{"title":512,"_path":513,"layout":13},"Text area","/design-system/components/text-area",{"title":257,"_path":256,"layout":13},{"title":11,"_path":7,"layout":13},{"title":263,"_path":262,"children":517,"layout":13},[518,519,537,559],{"title":263,"_path":262,"layout":13},{"title":520,"_path":521,"children":522},"Key Concepts","/framework/key-concepts",[523,525,528,531,534],{"title":330,"_path":524,"layout":13},"/framework/key-concepts/nuxt",{"title":526,"_path":527,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":529,"_path":530,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":532,"_path":533,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":535,"_path":536,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":538,"_path":539,"children":540},"Guides","/framework/guides",[541,544,547,550,553,556],{"title":542,"_path":543,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":545,"_path":546,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":548,"_path":549,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":551,"_path":552,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":554,"_path":555,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":557,"_path":558,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":560,"_path":561,"layout":13},"Core modules","/framework/core-modules",["Reactive",563],["Set"],["Reactive",565],{"module-navigation":566},null,true,1714695155235]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Vertical navigation</h1><p class="rpl-type-p-large" data-v-3163c6df>The Vertical navigation component displays a list of links to help users navigate a section of related pages.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Use vertical navigation to help users navigate a section of related pages.<!--]--></p><p><!--[-->Use vertical navigation to:<!--]--></p><ul><!--[--><li><!--[-->let users find and navigate to relevant information<!--]--></li><li><!--[-->show the user where, within your site’s content hierarchy, the page they are viewing is located<!--]--></li><li><!--[-->show 4 nested content sections (parent sections) and a heading for the names of each section.<!--]--></li><!--]--></ul><p><!--[-->Vertical navigation is placed next to your page’s body content.<!--]--></p><p><!--[-->A chevron (v-shaped icon) next to each parent section lets users expand that parent section. This reveals the names of content pages falling within the parent section (child pages). Child page links are hidden by default.<!--]--></p><p><!--[-->The chevron flips up and parent sections stay expanded until the user interacts with the chevron to hide the child pages. This helps the user find what they need and minimises visual clutter.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-vertical-navigation--vertical-navigation&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-vertical-navigation--vertical-navigation&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><h2 class="rpl-type-h3 docs-h3" id="when-and-how-to-use" data-v-ea525968><a href="#when-and-how-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how to use<!--]--></a></h2><ul><!--[--><li><!--[-->Use in a page&#39;s sidebar.<!--]--></li><li><!--[-->Always keep the navigation links short. You can use a shorter version of the page title.<!--]--></li><li><!--[-->Display up to 4 levels of navigation.<!--]--></li><li><!--[-->Add a link for the section&#39;s &#39;home&#39; page.<!--]--></li><li><!--[-->Use with at least 4 links.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="when-and-how-not-to-use" data-v-ea525968><a href="#when-and-how-not-to-use" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->When and how not to use<!--]--></a></h2><ul><!--[--><li><!--[-->Don&#39;t embed on a page that doesn&#39;t have a sidebar.<!--]--></li><li><!--[-->Don&#39;t add more than 4 child levels. Users will not see the indents, so navigation will become confusing.<!--]--></li><li><!--[-->Don&#39;t use on a site with fewer than 5 pages.<!--]--></li><li><!--[-->Don’t use with icons.<!--]--></li><li><!--[-->Never use it to link to other sites.<!--]--></li><!--]--></ul><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->Vertical navigation uses colour and active state focus to highlight the current page the user is on.<!--]--></p><!--[--><div class="rpl-form__outer docs-theme-chooser-controls" data-v-058e8db5><label class="rpl-form-label rpl-type-h4-fixed" data-v-058e8db5><span class="rpl-form-label__inner"><!--[-->Theme options<!--]--></span><!----></label><div class="rpl-form-opt-buttons" modelvalue="docsTheme1" data-v-058e8db5><!--[--><div class="rpl-form-opt-buttons-option"><input id="docsTheme1" class="rpl-form-opt-buttons-option__input" type="radio" data-rpl-focus-input="theme-chooser" name="theme-chooser" checked><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme1">Alt 1</label></div><div class="rpl-form-opt-buttons-option"><input id="docsTheme2" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="docsTheme2">Alt 2</label></div><div class="rpl-form-opt-buttons-option"><input id="default" class="rpl-form-opt-buttons-option__input" type="radio" name="theme-chooser"><label class="rpl-form-opt-buttons-option__label rpl-type-label" for="default">vic.gov.au</label></div><!--]--></div></div><div class="docs-theme-chooser-examples" data-v-058e8db5><!--[--><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-vertical-navigation--vertical-navigation&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-vertical-navigation--vertical-navigation&amp;args=&amp;viewMode=story&amp;globals=theme:docsTheme1;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--></div><!--]--><p><!--[-->To create your own theme see <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="rationale" data-v-fff5b905><a href="#rationale" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Rationale<!--]--></a></h2><p><!--[-->To show the user which page in the vertical navigation they are currently on, the active state is used. This displays as an underline in addition to colour, to aim to conform with the <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Web Content Accessibility Guidelines 2.0 Success Criterion 1.4.1<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[--><strong><!--[--><a href="https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-without-color" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->1.4.1<!--]--><!--]--><!----><!--]--></a> Use of Color:<!--]--></strong> Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.<!--]--></p><!--]--></blockquote><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/5.components/vertical-navigation.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/components/vertical-navigation/_payload.json">[{"state":1,"once":562,"_errors":564,"serverRendered":567,"path":7,"prerenderedAt":568},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":251,"$sdd-globals":267,"$sdd-navigation":269},["ShallowRef",4],["ShallowReactive",5],{"/design-system/components/vertical-navigation":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":246,"_id":247,"_source":248,"_file":249,"_extension":250},"/design-system/components/vertical-navigation","components",false,"","Vertical navigation","The Vertical navigation component displays a list of links to help users navigate a section of related pages.","page","Core",{"type":16,"children":17,"toc":236},"root",[18,27,33,38,58,63,68,73,78,85,113,119,147,151,157,162,169,191,194,200,214],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"usage",[24],{"type":25,"value":26},"text","Usage",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Use vertical navigation to help users navigate a section of related pages.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Use vertical navigation to:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48,53],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":25,"value":47},"let users find and navigate to relevant information",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":25,"value":52},"show the user where, within your site’s content hierarchy, the page they are viewing is located",{"type":19,"tag":43,"props":54,"children":55},{},[56],{"type":25,"value":57},"show 4 nested content sections (parent sections) and a heading for the names of each section.",{"type":19,"tag":28,"props":59,"children":60},{},[61],{"type":25,"value":62},"Vertical navigation is placed next to your page’s body content.",{"type":19,"tag":28,"props":64,"children":65},{},[66],{"type":25,"value":67},"A chevron (v-shaped icon) next to each parent section lets users expand that parent section. This reveals the names of content pages falling within the parent section (child pages). Child page links are hidden by default.",{"type":19,"tag":28,"props":69,"children":70},{},[71],{"type":25,"value":72},"The chevron flips up and parent sections stay expanded until the user interacts with the chevron to hide the child pages. This helps the user find what they need and minimises visual clutter.",{"type":19,"tag":74,"props":75,"children":77},"docs-example",{"id":76},"core-navigation-vertical-navigation--vertical-navigation",[],{"type":19,"tag":79,"props":80,"children":82},"h3",{"id":81},"when-and-how-to-use",[83],{"type":25,"value":84},"When and how to use",{"type":19,"tag":39,"props":86,"children":87},{},[88,93,98,103,108],{"type":19,"tag":43,"props":89,"children":90},{},[91],{"type":25,"value":92},"Use in a page's sidebar.",{"type":19,"tag":43,"props":94,"children":95},{},[96],{"type":25,"value":97},"Always keep the navigation links short. You can use a shorter version of the page title.",{"type":19,"tag":43,"props":99,"children":100},{},[101],{"type":25,"value":102},"Display up to 4 levels of navigation.",{"type":19,"tag":43,"props":104,"children":105},{},[106],{"type":25,"value":107},"Add a link for the section's 'home' page.",{"type":19,"tag":43,"props":109,"children":110},{},[111],{"type":25,"value":112},"Use with at least 4 links.",{"type":19,"tag":79,"props":114,"children":116},{"id":115},"when-and-how-not-to-use",[117],{"type":25,"value":118},"When and how not to use",{"type":19,"tag":39,"props":120,"children":121},{},[122,127,132,137,142],{"type":19,"tag":43,"props":123,"children":124},{},[125],{"type":25,"value":126},"Don't embed on a page that doesn't have a sidebar.",{"type":19,"tag":43,"props":128,"children":129},{},[130],{"type":25,"value":131},"Don't add more than 4 child levels. Users will not see the indents, so navigation will become confusing.",{"type":19,"tag":43,"props":133,"children":134},{},[135],{"type":25,"value":136},"Don't use on a site with fewer than 5 pages.",{"type":19,"tag":43,"props":138,"children":139},{},[140],{"type":25,"value":141},"Don’t use with icons.",{"type":19,"tag":43,"props":143,"children":144},{},[145],{"type":25,"value":146},"Never use it to link to other sites.",{"type":19,"tag":148,"props":149,"children":150},"hr",{},[],{"type":19,"tag":20,"props":152,"children":154},{"id":153},"theming",[155],{"type":25,"value":156},"Theming",{"type":19,"tag":28,"props":158,"children":159},{},[160],{"type":25,"value":161},"Vertical navigation uses colour and active state focus to highlight the current page the user is on.",{"type":19,"tag":163,"props":164,"children":165},"docs-theme-chooser",{},[166],{"type":19,"tag":74,"props":167,"children":168},{"id":76},[],{"type":19,"tag":28,"props":170,"children":171},{},[172,174,181,183,189],{"type":25,"value":173},"To create your own theme see ",{"type":19,"tag":175,"props":176,"children":178},"a",{"href":177},"/design-system/design/theming-guidance-for-designers",[179],{"type":25,"value":180},"theming guidance for designers",{"type":25,"value":182}," or ",{"type":19,"tag":175,"props":184,"children":186},{"href":185},"/design-system/develop/theming",[187],{"type":25,"value":188},"theming guidance for developers",{"type":25,"value":190},".",{"type":19,"tag":148,"props":192,"children":193},{},[],{"type":19,"tag":20,"props":195,"children":197},{"id":196},"rationale",[198],{"type":25,"value":199},"Rationale",{"type":19,"tag":28,"props":201,"children":202},{},[203,205,213],{"type":25,"value":204},"To show the user which page in the vertical navigation they are currently on, the active state is used. This displays as an underline in addition to colour, to aim to conform with the ",{"type":19,"tag":175,"props":206,"children":210},{"href":207,"rel":208},"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html",[209],"nofollow",[211],{"type":25,"value":212},"Web Content Accessibility Guidelines 2.0 Success Criterion 1.4.1",{"type":25,"value":190},{"type":19,"tag":215,"props":216,"children":217},"blockquote",{},[218],{"type":19,"tag":28,"props":219,"children":220},{},[221,234],{"type":19,"tag":222,"props":223,"children":224},"strong",{},[225,232],{"type":19,"tag":175,"props":226,"children":229},{"href":227,"rel":228},"https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-without-color",[209],[230],{"type":25,"value":231},"1.4.1",{"type":25,"value":233}," Use of Color:",{"type":25,"value":235}," Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.",{"title":10,"searchDepth":237,"depth":237,"links":238},2,[239,244,245],{"id":22,"depth":237,"text":26,"children":240},[241,243],{"id":81,"depth":242,"text":84},3,{"id":115,"depth":242,"text":118},{"id":153,"depth":237,"text":156},{"id":196,"depth":237,"text":199},"markdown","content:design-system:5.components:vertical-navigation.md","content","design-system/5.components/vertical-navigation.md","md",["ShallowRef",252],["ShallowReactive",253],{"/design-system/components/vertical-navigation":254},[255,261],{"_path":256,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":257,"description":258,"layout":13,"label":14,"_type":246,"_id":259,"_source":248,"_file":260,"_extension":250},"/design-system/components/timeline","Timeline","The Timeline component contains blocks of content displayed in a linear order.","content:design-system:5.components:timeline.md","design-system/5.components/timeline.md",{"_path":262,"_dir":10,"_draft":9,"_partial":9,"_locale":10,"title":263,"description":264,"layout":13,"_type":246,"_id":265,"_source":248,"_file":266,"_extension":250},"/framework","Ripple Framework","Ripple framework contains the tools for building SDP sites using the Ripple design system components.","content:framework:1.index.md","framework/1.index.md",["ShallowRef",268],{},[270,275,516],{"title":271,"_path":272,"icon":273,"layout":274},"Ripple Design System","/","carbon:home","home",{"title":276,"_path":277,"children":278},"Design System","/design-system",[279,295,310,338,372],{"title":280,"_path":281,"children":282},"About","/design-system/about",[283,286,289,292],{"title":284,"_path":285,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":287,"_path":288,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":290,"_path":291,"layout":13},"Support","/design-system/about/getting-support",{"title":293,"_path":294,"layout":13},"Contributing","/design-system/about/contributing",{"title":296,"_path":297,"children":298},"Design","/design-system/design",[299,302,305,308],{"title":300,"_path":301,"layout":13},"Getting started","/design-system/design/getting-started",{"title":303,"_path":304,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":306,"_path":307,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":309,"_path":177,"layout":13},"Theming guidance for designers",{"title":311,"_path":312,"children":313},"Develop","/design-system/develop",[314,316,318,320],{"title":300,"_path":315,"layout":13},"/design-system/develop/getting-started",{"title":293,"_path":317,"layout":13},"/design-system/develop/contributing",{"title":319,"_path":185,"layout":13},"Theme and brand application",{"title":26,"_path":321,"children":322,"layout":13},"/design-system/develop/usage",[323,326,329,332,335],{"title":324,"_path":325,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":327,"_path":328,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":330,"_path":331,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":333,"_path":334,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":336,"_path":337,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":339,"_path":340,"children":341},"Styles","/design-system/styles",[342,345,348,351,354,357,360,363,366,369],{"title":343,"_path":344,"layout":13},"Colour","/design-system/styles/colour",{"title":346,"_path":347,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":349,"_path":350,"layout":13},"Grid","/design-system/styles/grid",{"title":352,"_path":353,"layout":13},"Icons","/design-system/styles/icons",{"title":355,"_path":356,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":358,"_path":359,"layout":13},"Layout","/design-system/styles/layout",{"title":361,"_path":362,"layout":13},"Logo","/design-system/styles/logo",{"title":364,"_path":365,"layout":13},"Motion","/design-system/styles/motion",{"title":367,"_path":368,"layout":13},"Spacing","/design-system/styles/spacing",{"title":370,"_path":371,"layout":13},"Typography","/design-system/styles/typography",{"title":373,"_path":374,"children":375},"Components","/design-system/components",[376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,490,493,496,499,502,505,508,511,514,515],{"title":377,"_path":378,"layout":13},"Accordion","/design-system/components/accordion",{"title":380,"_path":381,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":383,"_path":384,"layout":13},"Alert","/design-system/components/alert",{"title":386,"_path":387,"layout":13},"Block quote","/design-system/components/block-quote",{"title":389,"_path":390,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":392,"_path":393,"layout":13},"Button","/design-system/components/button",{"title":395,"_path":396,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":398,"_path":399,"layout":13},"Callout","/design-system/components/callout",{"title":401,"_path":402,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":404,"_path":405,"layout":13},"Card","/design-system/components/card",{"title":407,"_path":408,"layout":13},"Carousel","/design-system/components/carousel",{"title":410,"_path":411,"layout":13},"Category grid","/design-system/components/category-grid",{"title":413,"_path":414,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":416,"_path":417,"layout":13},"Chip","/design-system/components/chip",{"title":419,"_path":420,"layout":13},"Contact us","/design-system/components/contact-us",{"title":422,"_path":423,"layout":13},"Date input","/design-system/components/date-input",{"title":425,"_path":426,"layout":13},"Detail list","/design-system/components/detail-list",{"title":428,"_path":429,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":431,"_path":432,"layout":13},"File","/design-system/components/file",{"title":434,"_path":435,"layout":13},"Footer","/design-system/components/footer",{"title":437,"_path":438,"layout":13},"Form","/design-system/components/form",{"title":440,"_path":441,"layout":13},"Form alert","/design-system/components/form-alert",{"title":443,"_path":444,"layout":13},"Header","/design-system/components/header",{"title":446,"_path":447,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":449,"_path":450,"layout":13},"Input field","/design-system/components/input-field",{"title":452,"_path":453,"layout":13},"Key dates","/design-system/components/key-dates",{"title":455,"_path":456,"layout":13},"Media","/design-system/components/media",{"title":458,"_path":459,"layout":13},"Media embed","/design-system/components/media-embed",{"title":461,"_path":462,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":464,"_path":465,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":467,"_path":468,"layout":13},"Option button","/design-system/components/option-button",{"title":470,"_path":471,"layout":13},"Page action","/design-system/components/page-action",{"title":473,"_path":474,"layout":13},"Pagination","/design-system/components/pagination",{"title":476,"_path":477,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":479,"_path":480,"layout":13},"Profile","/design-system/components/profile",{"title":482,"_path":483,"layout":13},"Radio button","/design-system/components/radio-button",{"title":485,"_path":486,"layout":13},"Related links","/design-system/components/related-links",{"title":488,"_path":489,"layout":13},"Results listing","/design-system/components/results-listing",{"title":491,"_path":492,"layout":13},"Search bar","/design-system/components/search-bar",{"title":494,"_path":495,"layout":13},"Skip link","/design-system/components/skip-link",{"title":497,"_path":498,"layout":13},"Social share","/design-system/components/social-share",{"title":500,"_path":501,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":503,"_path":504,"layout":13},"Table","/design-system/components/table",{"title":506,"_path":507,"layout":13},"Tabs","/design-system/components/tabs",{"title":509,"_path":510,"layout":13},"Tag","/design-system/components/tag",{"title":512,"_path":513,"layout":13},"Text area","/design-system/components/text-area",{"title":257,"_path":256,"layout":13},{"title":11,"_path":7,"layout":13},{"title":263,"_path":262,"children":517,"layout":13},[518,519,537,559],{"title":263,"_path":262,"layout":13},{"title":520,"_path":521,"children":522},"Key Concepts","/framework/key-concepts",[523,525,528,531,534],{"title":330,"_path":524,"layout":13},"/framework/key-concepts/nuxt",{"title":526,"_path":527,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":529,"_path":530,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":532,"_path":533,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":535,"_path":536,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":538,"_path":539,"children":540},"Guides","/framework/guides",[541,544,547,550,553,556],{"title":542,"_path":543,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":545,"_path":546,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":548,"_path":549,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":551,"_path":552,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":554,"_path":555,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":557,"_path":558,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":560,"_path":561,"layout":13},"Core modules","/framework/core-modules",["Reactive",563],["Set"],["Reactive",565],{"module-navigation":566},null,true,1714695653349]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/design/design-tokens/_payload.json b/design-system/design/design-tokens/_payload.json
index 748ac18075..485517aa87 100644
--- a/design-system/design/design-tokens/_payload.json
+++ b/design-system/design/design-tokens/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,38,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":24,"items":25},"/design-system/design","Design",true,[26,29,32,35],{"id":27,"text":28,"url":27,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":30,"text":31,"url":30,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":33,"text":34,"url":33,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":39,"text":40,"url":39,"active":7,"items":41},"/design-system/develop","Develop",[42,44,46,49],{"id":43,"text":28,"url":43,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":7,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":7,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695155442]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,38,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":24,"items":25},"/design-system/design","Design",true,[26,29,32,35],{"id":27,"text":28,"url":27,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":30,"text":31,"url":30,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":33,"text":34,"url":33,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":39,"text":40,"url":39,"active":7,"items":41},"/design-system/develop","Develop",[42,44,46,49],{"id":43,"text":28,"url":43,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":7,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":7,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695653511]
\ No newline at end of file
diff --git a/design-system/design/design-tokens/index.html b/design-system/design/design-tokens/index.html
index 8be0786466..0b8929819d 100644
--- a/design-system/design/design-tokens/index.html
+++ b/design-system/design/design-tokens/index.html
@@ -23,61 +23,61 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.F9NVvvm4.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseOl.jzxVYZcz.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.GmB4B_NE.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseOl.f55gcGCc.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -89,8 +89,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Design tokens</h1><p class="rpl-type-p-large" data-v-3163c6df>Design tokens store our design decisions in the Ripple Design System. They are the single source of truth.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="what-is-a-design-token" data-v-fff5b905><a href="#what-is-a-design-token" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->What is a Design token?<!--]--></a></h2><p><!--[-->Design tokens store our design decisions that, together, make up the Ripple Design System’s visual style.<!--]--></p><p><!--[-->Tokens apply values in a consistent, reusable and scalable way. They ensure the same style values are used across design files and code.<!--]--></p><p><!--[-->By storing design decisions, they replace the need to use static values (for example, hex code values for colour).<!--]--></p><p><!--[-->Ripple Design System has tokens for:<!--]--></p><ul><!--[--><li><!--[-->colour<!--]--></li><li><!--[-->typography<!--]--></li><li><!--[-->spacing<!--]--></li><li><!--[-->elevation<!--]--></li><li><!--[-->borders<!--]--></li><li><!--[-->motion values.<!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="why-use-design-tokens" data-v-fff5b905><a href="#why-use-design-tokens" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Why use design tokens?<!--]--></a></h2><p><!--[-->Using design tokens keeps your UI consistent across different platforms.<!--]--></p><p><!--[-->Design tokens are the single source of truth. You can use them across designs and code.<!--]--></p><p><!--[-->Since design tokens let you make value changes at scale, design language changes are easier to make.<!--]--></p><p><!--[-->Design tokens aren&#39;t hard-coded. Avoiding hard-coded values in your design system makes it easier to build, maintain and scale products.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="ripple-design-tokens" data-v-fff5b905><a href="#ripple-design-tokens" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Ripple design tokens<!--]--></a></h2><p><!--[-->A Ripple token has 2 parts:<!--]--></p><ul><!--[--><li><!--[-->a token name, such as <strong><!--[-->rpl-clr-primary<!--]--></strong><!--]--></li><li><!--[-->an associated value, such as <strong><!--[-->#0052C2<!--]--></strong>.<!--]--></li><!--]--></ul><p><!--[-->The token&#39;s value can be one of several things: colour, a typeface, a measurement or even another token.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="how-to-read-ripple-design-token-names" data-v-fff5b905><a href="#how-to-read-ripple-design-token-names" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->How to read Ripple design token names<!--]--></a></h2><p><!--[-->Knowing how to read a token name helps you find the right token faster.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="parts-of-design-token-names" data-v-ea525968><a href="#parts-of-design-token-names" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Parts of design token names<!--]--></a></h2><ol><!--[--><li><!--[--><strong><!--[-->rpl<!--]--></strong>: design system<!--]--></li><li><!--[--><strong><!--[-->clr<!--]--></strong> (colour) or <strong><!--[-->type<!--]--></strong> (typography) or <strong><!--[-->sp<!--]--></strong> (spacing) for example: token type<!--]--></li><li><!--[--><strong><!--[-->primary-accessible<!--]--></strong> (a descriptive name) or <strong><!--[-->3<!--]--></strong> (a number), for example: see below<!--]--></li><!--]--></ol><h2 class="rpl-type-h3 docs-h3" id="examples" data-v-ea525968><a href="#examples" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Examples<!--]--></a></h2><ul><!--[--><li><!--[--><strong><!--[-->rpl-clr-primary-accessible<!--]--></strong><!--]--></li><li><!--[--><strong><!--[-->rpl-sp-4<!--]--></strong><!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="steps-and-explanations" data-v-ea525968><a href="#steps-and-explanations" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Steps and explanations<!--]--></a></h2><ol><!--[--><li><!--[-->Start all design tokens with the system name: <strong><!--[-->rpl<!--]--></strong> is for Ripple.<!--]--></li><li><!--[-->Then, place an abbreviation for the token type: <strong><!--[-->clr<!--]--></strong> is for colour; type is for typography; <strong><!--[-->sp<!--]--></strong> is for spacing.<!--]--></li><li><!--[-->End the token name with a descriptive name or number to show the token’s role relative to other Ripple design tokens. For example, <strong><!--[-->primary-accessible<!--]--></strong> in rpl-clr-type-primary-accessible shows this is a colour token that applies one of Ripple’s primary colours (from the colour palette available in Ripple Design System) and is suitable for accessible content. <strong><!--[-->4<!--]--></strong> in rpl-sp-4 shows this is a spacing token where 4 is the fourth spacing step (16x), in size order, from the spacing options available in the Ripple Design System.<!--]--></li><!--]--></ol><h2 class="rpl-type-h2 docs-h2" id="best-practices" data-v-fff5b905><a href="#best-practices" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Best practices<!--]--></a></h2><ul><!--[--><li><!--[-->Choose tokens based on meaning rather than appearance only<!--]--></li><li><!--[-->Choose the token with the most specific meaning that is available and applies to your content’s role on the site<!--]--></li><li><!--[-->Do not choose tokens based only how the end result looks on your site<!--]--></li><li><!--[-->For example, for a heading, it is important to choose rpl-type-h3 (heading token) instead of a rpl-type-p-large (type token), even though the end result looks similar<!--]--></li><li><!--[-->For example, if your content needs to be accessible and a certain colour, you should pick rpl-clr-type-primary-accessible instead of rpl-clr-primary<!--]--></li><li><!--[-->Don&#39;t pick a token just because the colours seem to match - this can break the consistency across other themes and confuse the user’s experience<!--]--></li><li><!--[-->If you do choose tokens based on appearance only, updates to themes, colours, or other features will not apply properly or consistently later<!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="why-are-tokens-important-for-design" data-v-fff5b905><a href="#why-are-tokens-important-for-design" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Why are tokens important for design?<!--]--></a></h2><h2 class="rpl-type-h3 docs-h3" id="purpose-driven" data-v-ea525968><a href="#purpose-driven" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Purpose-driven<!--]--></a></h2><p><!--[-->Tokens can be created with a specific purpose or goal in mind. For example, improve accessibility, enhance visual consistency or make it easier to update and maintain a website or app.<!--]--></p><p><!--[-->Since tokens are purpose-driven, designers and developers can make system-wide updates focused on achieving specific purposes. For example, systematically apply a high-contrast colour scheme for improved visibility, or change the type scale.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="single-source-of-truth" data-v-ea525968><a href="#single-source-of-truth" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Single source of truth<!--]--></a></h2><p><!--[-->Design tokens are like reusable building blocks. They give a design system a single source of truth for making changes to the way a website looks and works.<!--]--></p><p><!--[-->Having a single source of truth lets a design system implement features like global theming, responsive design and user customisation.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="system-wide-updates" data-v-ea525968><a href="#system-wide-updates" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->System-wide updates<!--]--></a></h2><p><!--[-->They let developers and designers change system-wide themes and contexts, using only a single update.<!--]--></p><p><!--[-->Design tokens prevent or reduce the need to find and replace thousands of instances of hard-coded values in the code.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="for-developers" data-v-fff5b905><a href="#for-developers" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->For developers<!--]--></a></h2><p><!--[-->For information for developers using tokens to theme Ripple components see the <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guide<!--]--><!--]--><!----><!--]--></a><!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/2.design/3.design-tokens.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/design/design-tokens/_payload.json">[{"state":1,"once":757,"_errors":759,"serverRendered":761,"path":762,"prerenderedAt":763},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":444,"$sdd-globals":460,"$sdd-navigation":462},["ShallowRef",4],["ShallowReactive",5],{"/design-system/design/design-tokens":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":439,"_id":440,"_source":441,"_file":442,"_extension":443},"/design-system/design/design-tokens","design",false,"","Design tokens","Design tokens store our design decisions in the Ripple Design System. They are the single source of truth.","page","Core",{"type":16,"children":17,"toc":420},"root",[18,27,33,38,43,48,83,89,94,99,104,109,115,120,146,151,157,162,169,224,230,249,255,304,310,348,354,360,365,370,376,381,386,392,397,402,408],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"what-is-a-design-token",[24],{"type":25,"value":26},"text","What is a Design token?",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Design tokens store our design decisions that, together, make up the Ripple Design System’s visual style.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Tokens apply values in a consistent, reusable and scalable way. They ensure the same style values are used across design files and code.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"By storing design decisions, they replace the need to use static values (for example, hex code values for colour).",{"type":19,"tag":28,"props":44,"children":45},{},[46],{"type":25,"value":47},"Ripple Design System has tokens for:",{"type":19,"tag":49,"props":50,"children":51},"ul",{},[52,58,63,68,73,78],{"type":19,"tag":53,"props":54,"children":55},"li",{},[56],{"type":25,"value":57},"colour",{"type":19,"tag":53,"props":59,"children":60},{},[61],{"type":25,"value":62},"typography",{"type":19,"tag":53,"props":64,"children":65},{},[66],{"type":25,"value":67},"spacing",{"type":19,"tag":53,"props":69,"children":70},{},[71],{"type":25,"value":72},"elevation",{"type":19,"tag":53,"props":74,"children":75},{},[76],{"type":25,"value":77},"borders",{"type":19,"tag":53,"props":79,"children":80},{},[81],{"type":25,"value":82},"motion values.",{"type":19,"tag":20,"props":84,"children":86},{"id":85},"why-use-design-tokens",[87],{"type":25,"value":88},"Why use design tokens?",{"type":19,"tag":28,"props":90,"children":91},{},[92],{"type":25,"value":93},"Using design tokens keeps your UI consistent across different platforms.",{"type":19,"tag":28,"props":95,"children":96},{},[97],{"type":25,"value":98},"Design tokens are the single source of truth. You can use them across designs and code.",{"type":19,"tag":28,"props":100,"children":101},{},[102],{"type":25,"value":103},"Since design tokens let you make value changes at scale, design language changes are easier to make.",{"type":19,"tag":28,"props":105,"children":106},{},[107],{"type":25,"value":108},"Design tokens aren't hard-coded. Avoiding hard-coded values in your design system makes it easier to build, maintain and scale products.",{"type":19,"tag":20,"props":110,"children":112},{"id":111},"ripple-design-tokens",[113],{"type":25,"value":114},"Ripple design tokens",{"type":19,"tag":28,"props":116,"children":117},{},[118],{"type":25,"value":119},"A Ripple token has 2 parts:",{"type":19,"tag":49,"props":121,"children":122},{},[123,134],{"type":19,"tag":53,"props":124,"children":125},{},[126,128],{"type":25,"value":127},"a token name, such as ",{"type":19,"tag":129,"props":130,"children":131},"strong",{},[132],{"type":25,"value":133},"rpl-clr-primary",{"type":19,"tag":53,"props":135,"children":136},{},[137,139,144],{"type":25,"value":138},"an associated value, such as ",{"type":19,"tag":129,"props":140,"children":141},{},[142],{"type":25,"value":143},"#0052C2",{"type":25,"value":145},".",{"type":19,"tag":28,"props":147,"children":148},{},[149],{"type":25,"value":150},"The token's value can be one of several things: colour, a typeface, a measurement or even another token.",{"type":19,"tag":20,"props":152,"children":154},{"id":153},"how-to-read-ripple-design-token-names",[155],{"type":25,"value":156},"How to read Ripple design token names",{"type":19,"tag":28,"props":158,"children":159},{},[160],{"type":25,"value":161},"Knowing how to read a token name helps you find the right token faster.",{"type":19,"tag":163,"props":164,"children":166},"h3",{"id":165},"parts-of-design-token-names",[167],{"type":25,"value":168},"Parts of design token names",{"type":19,"tag":170,"props":171,"children":172},"ol",{},[173,183,207],{"type":19,"tag":53,"props":174,"children":175},{},[176,181],{"type":19,"tag":129,"props":177,"children":178},{},[179],{"type":25,"value":180},"rpl",{"type":25,"value":182},": design system",{"type":19,"tag":53,"props":184,"children":185},{},[186,191,193,198,200,205],{"type":19,"tag":129,"props":187,"children":188},{},[189],{"type":25,"value":190},"clr",{"type":25,"value":192}," (colour) or ",{"type":19,"tag":129,"props":194,"children":195},{},[196],{"type":25,"value":197},"type",{"type":25,"value":199}," (typography) or ",{"type":19,"tag":129,"props":201,"children":202},{},[203],{"type":25,"value":204},"sp",{"type":25,"value":206}," (spacing) for example: token type",{"type":19,"tag":53,"props":208,"children":209},{},[210,215,217,222],{"type":19,"tag":129,"props":211,"children":212},{},[213],{"type":25,"value":214},"primary-accessible",{"type":25,"value":216}," (a descriptive name) or ",{"type":19,"tag":129,"props":218,"children":219},{},[220],{"type":25,"value":221},"3",{"type":25,"value":223}," (a number), for example: see below",{"type":19,"tag":163,"props":225,"children":227},{"id":226},"examples",[228],{"type":25,"value":229},"Examples",{"type":19,"tag":49,"props":231,"children":232},{},[233,241],{"type":19,"tag":53,"props":234,"children":235},{},[236],{"type":19,"tag":129,"props":237,"children":238},{},[239],{"type":25,"value":240},"rpl-clr-primary-accessible",{"type":19,"tag":53,"props":242,"children":243},{},[244],{"type":19,"tag":129,"props":245,"children":246},{},[247],{"type":25,"value":248},"rpl-sp-4",{"type":19,"tag":163,"props":250,"children":252},{"id":251},"steps-and-explanations",[253],{"type":25,"value":254},"Steps and explanations",{"type":19,"tag":170,"props":256,"children":257},{},[258,269,286],{"type":19,"tag":53,"props":259,"children":260},{},[261,263,267],{"type":25,"value":262},"Start all design tokens with the system name: ",{"type":19,"tag":129,"props":264,"children":265},{},[266],{"type":25,"value":180},{"type":25,"value":268}," is for Ripple.",{"type":19,"tag":53,"props":270,"children":271},{},[272,274,278,280,284],{"type":25,"value":273},"Then, place an abbreviation for the token type: ",{"type":19,"tag":129,"props":275,"children":276},{},[277],{"type":25,"value":190},{"type":25,"value":279}," is for colour; type is for typography; ",{"type":19,"tag":129,"props":281,"children":282},{},[283],{"type":25,"value":204},{"type":25,"value":285}," is for spacing.",{"type":19,"tag":53,"props":287,"children":288},{},[289,291,295,297,302],{"type":25,"value":290},"End the token name with a descriptive name or number to show the token’s role relative to other Ripple design tokens. For example, ",{"type":19,"tag":129,"props":292,"children":293},{},[294],{"type":25,"value":214},{"type":25,"value":296}," in rpl-clr-type-primary-accessible shows this is a colour token that applies one of Ripple’s primary colours (from the colour palette available in Ripple Design System) and is suitable for accessible content. ",{"type":19,"tag":129,"props":298,"children":299},{},[300],{"type":25,"value":301},"4",{"type":25,"value":303}," in rpl-sp-4 shows this is a spacing token where 4 is the fourth spacing step (16x), in size order, from the spacing options available in the Ripple Design System.",{"type":19,"tag":20,"props":305,"children":307},{"id":306},"best-practices",[308],{"type":25,"value":309},"Best practices",{"type":19,"tag":49,"props":311,"children":312},{},[313,318,323,328,333,338,343],{"type":19,"tag":53,"props":314,"children":315},{},[316],{"type":25,"value":317},"Choose tokens based on meaning rather than appearance only",{"type":19,"tag":53,"props":319,"children":320},{},[321],{"type":25,"value":322},"Choose the token with the most specific meaning that is available and applies to your content’s role on the site",{"type":19,"tag":53,"props":324,"children":325},{},[326],{"type":25,"value":327},"Do not choose tokens based only how the end result looks on your site",{"type":19,"tag":53,"props":329,"children":330},{},[331],{"type":25,"value":332},"For example, for a heading, it is important to choose rpl-type-h3 (heading token) instead of a rpl-type-p-large (type token), even though the end result looks similar",{"type":19,"tag":53,"props":334,"children":335},{},[336],{"type":25,"value":337},"For example, if your content needs to be accessible and a certain colour, you should pick rpl-clr-type-primary-accessible instead of rpl-clr-primary",{"type":19,"tag":53,"props":339,"children":340},{},[341],{"type":25,"value":342},"Don't pick a token just because the colours seem to match - this can break the consistency across other themes and confuse the user’s experience",{"type":19,"tag":53,"props":344,"children":345},{},[346],{"type":25,"value":347},"If you do choose tokens based on appearance only, updates to themes, colours, or other features will not apply properly or consistently later",{"type":19,"tag":20,"props":349,"children":351},{"id":350},"why-are-tokens-important-for-design",[352],{"type":25,"value":353},"Why are tokens important for design?",{"type":19,"tag":163,"props":355,"children":357},{"id":356},"purpose-driven",[358],{"type":25,"value":359},"Purpose-driven",{"type":19,"tag":28,"props":361,"children":362},{},[363],{"type":25,"value":364},"Tokens can be created with a specific purpose or goal in mind. For example, improve accessibility, enhance visual consistency or make it easier to update and maintain a website or app.",{"type":19,"tag":28,"props":366,"children":367},{},[368],{"type":25,"value":369},"Since tokens are purpose-driven, designers and developers can make system-wide updates focused on achieving specific purposes. For example, systematically apply a high-contrast colour scheme for improved visibility, or change the type scale.",{"type":19,"tag":163,"props":371,"children":373},{"id":372},"single-source-of-truth",[374],{"type":25,"value":375},"Single source of truth",{"type":19,"tag":28,"props":377,"children":378},{},[379],{"type":25,"value":380},"Design tokens are like reusable building blocks. They give a design system a single source of truth for making changes to the way a website looks and works.",{"type":19,"tag":28,"props":382,"children":383},{},[384],{"type":25,"value":385},"Having a single source of truth lets a design system implement features like global theming, responsive design and user customisation.",{"type":19,"tag":163,"props":387,"children":389},{"id":388},"system-wide-updates",[390],{"type":25,"value":391},"System-wide updates",{"type":19,"tag":28,"props":393,"children":394},{},[395],{"type":25,"value":396},"They let developers and designers change system-wide themes and contexts, using only a single update.",{"type":19,"tag":28,"props":398,"children":399},{},[400],{"type":25,"value":401},"Design tokens prevent or reduce the need to find and replace thousands of instances of hard-coded values in the code.",{"type":19,"tag":20,"props":403,"children":405},{"id":404},"for-developers",[406],{"type":25,"value":407},"For developers",{"type":19,"tag":28,"props":409,"children":410},{},[411,413],{"type":25,"value":412},"For information for developers using tokens to theme Ripple components see the ",{"type":19,"tag":414,"props":415,"children":417},"a",{"href":416},"/design-system/develop/theming",[418],{"type":25,"value":419},"theming guide",{"title":10,"searchDepth":421,"depth":421,"links":422},2,[423,424,425,426,432,433,438],{"id":22,"depth":421,"text":26},{"id":85,"depth":421,"text":88},{"id":111,"depth":421,"text":114},{"id":153,"depth":421,"text":156,"children":427},[428,430,431],{"id":165,"depth":429,"text":168},3,{"id":226,"depth":429,"text":229},{"id":251,"depth":429,"text":254},{"id":306,"depth":421,"text":309},{"id":350,"depth":421,"text":353,"children":434},[435,436,437],{"id":356,"depth":429,"text":359},{"id":372,"depth":429,"text":375},{"id":388,"depth":429,"text":391},{"id":404,"depth":421,"text":407},"markdown","content:design-system:2.design:3.design-tokens.md","content","design-system/2.design/3.design-tokens.md","md",["ShallowRef",445],["ShallowReactive",446],{"/design-system/design/design-tokens":447},[448,454],{"_path":449,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":450,"description":451,"layout":13,"label":14,"_type":439,"_id":452,"_source":441,"_file":453,"_extension":443},"/design-system/design/our-design-principles","Our design principles","There are 4 design principles that are the foundation of the Ripple Design System.","content:design-system:2.design:2.our-design-principles.md","design-system/2.design/2.our-design-principles.md",{"_path":455,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":456,"description":457,"layout":13,"label":14,"_type":439,"_id":458,"_source":441,"_file":459,"_extension":443},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",null,"content:design-system:2.design:4.theming-guidance-for-designers.md","design-system/2.design/4.theming-guidance-for-designers.md",["ShallowRef",461],{},[463,468,709],{"title":464,"_path":465,"icon":466,"layout":467},"Ripple Design System","/","carbon:home","home",{"title":469,"_path":470,"children":471},"Design System","/design-system",[472,488,498,527,561],{"title":473,"_path":474,"children":475},"About","/design-system/about",[476,479,482,485],{"title":477,"_path":478,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":480,"_path":481,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":483,"_path":484,"layout":13},"Support","/design-system/about/getting-support",{"title":486,"_path":487,"layout":13},"Contributing","/design-system/about/contributing",{"title":489,"_path":490,"children":491},"Design","/design-system/design",[492,495,496,497],{"title":493,"_path":494,"layout":13},"Getting started","/design-system/design/getting-started",{"title":450,"_path":449,"layout":13},{"title":11,"_path":7,"layout":13},{"title":456,"_path":455,"layout":13},{"title":499,"_path":500,"children":501},"Develop","/design-system/develop",[502,504,506,508],{"title":493,"_path":503,"layout":13},"/design-system/develop/getting-started",{"title":486,"_path":505,"layout":13},"/design-system/develop/contributing",{"title":507,"_path":416,"layout":13},"Theme and brand application",{"title":509,"_path":510,"children":511,"layout":13},"Usage","/design-system/develop/usage",[512,515,518,521,524],{"title":513,"_path":514,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":516,"_path":517,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":519,"_path":520,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":522,"_path":523,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":525,"_path":526,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":528,"_path":529,"children":530},"Styles","/design-system/styles",[531,534,537,540,543,546,549,552,555,558],{"title":532,"_path":533,"layout":13},"Colour","/design-system/styles/colour",{"title":535,"_path":536,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":538,"_path":539,"layout":13},"Grid","/design-system/styles/grid",{"title":541,"_path":542,"layout":13},"Icons","/design-system/styles/icons",{"title":544,"_path":545,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":547,"_path":548,"layout":13},"Layout","/design-system/styles/layout",{"title":550,"_path":551,"layout":13},"Logo","/design-system/styles/logo",{"title":553,"_path":554,"layout":13},"Motion","/design-system/styles/motion",{"title":556,"_path":557,"layout":13},"Spacing","/design-system/styles/spacing",{"title":559,"_path":560,"layout":13},"Typography","/design-system/styles/typography",{"title":562,"_path":563,"children":564},"Components","/design-system/components",[565,568,571,574,577,580,583,586,589,592,595,598,601,604,607,610,613,616,619,622,625,628,631,634,637,640,643,646,649,652,655,658,661,664,667,670,673,676,679,682,685,688,691,694,697,700,703,706],{"title":566,"_path":567,"layout":13},"Accordion","/design-system/components/accordion",{"title":569,"_path":570,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":572,"_path":573,"layout":13},"Alert","/design-system/components/alert",{"title":575,"_path":576,"layout":13},"Block quote","/design-system/components/block-quote",{"title":578,"_path":579,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":581,"_path":582,"layout":13},"Button","/design-system/components/button",{"title":584,"_path":585,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":587,"_path":588,"layout":13},"Callout","/design-system/components/callout",{"title":590,"_path":591,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":593,"_path":594,"layout":13},"Card","/design-system/components/card",{"title":596,"_path":597,"layout":13},"Carousel","/design-system/components/carousel",{"title":599,"_path":600,"layout":13},"Category grid","/design-system/components/category-grid",{"title":602,"_path":603,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":605,"_path":606,"layout":13},"Chip","/design-system/components/chip",{"title":608,"_path":609,"layout":13},"Contact us","/design-system/components/contact-us",{"title":611,"_path":612,"layout":13},"Date input","/design-system/components/date-input",{"title":614,"_path":615,"layout":13},"Detail list","/design-system/components/detail-list",{"title":617,"_path":618,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":620,"_path":621,"layout":13},"File","/design-system/components/file",{"title":623,"_path":624,"layout":13},"Footer","/design-system/components/footer",{"title":626,"_path":627,"layout":13},"Form","/design-system/components/form",{"title":629,"_path":630,"layout":13},"Form alert","/design-system/components/form-alert",{"title":632,"_path":633,"layout":13},"Header","/design-system/components/header",{"title":635,"_path":636,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":638,"_path":639,"layout":13},"Input field","/design-system/components/input-field",{"title":641,"_path":642,"layout":13},"Key dates","/design-system/components/key-dates",{"title":644,"_path":645,"layout":13},"Media","/design-system/components/media",{"title":647,"_path":648,"layout":13},"Media embed","/design-system/components/media-embed",{"title":650,"_path":651,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":653,"_path":654,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":656,"_path":657,"layout":13},"Option button","/design-system/components/option-button",{"title":659,"_path":660,"layout":13},"Page action","/design-system/components/page-action",{"title":662,"_path":663,"layout":13},"Pagination","/design-system/components/pagination",{"title":665,"_path":666,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":668,"_path":669,"layout":13},"Profile","/design-system/components/profile",{"title":671,"_path":672,"layout":13},"Radio button","/design-system/components/radio-button",{"title":674,"_path":675,"layout":13},"Related links","/design-system/components/related-links",{"title":677,"_path":678,"layout":13},"Results listing","/design-system/components/results-listing",{"title":680,"_path":681,"layout":13},"Search bar","/design-system/components/search-bar",{"title":683,"_path":684,"layout":13},"Skip link","/design-system/components/skip-link",{"title":686,"_path":687,"layout":13},"Social share","/design-system/components/social-share",{"title":689,"_path":690,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":692,"_path":693,"layout":13},"Table","/design-system/components/table",{"title":695,"_path":696,"layout":13},"Tabs","/design-system/components/tabs",{"title":698,"_path":699,"layout":13},"Tag","/design-system/components/tag",{"title":701,"_path":702,"layout":13},"Text area","/design-system/components/text-area",{"title":704,"_path":705,"layout":13},"Timeline","/design-system/components/timeline",{"title":707,"_path":708,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":710,"_path":711,"children":712,"layout":13},"Ripple Framework","/framework",[713,714,732,754],{"title":710,"_path":711,"layout":13},{"title":715,"_path":716,"children":717},"Key Concepts","/framework/key-concepts",[718,720,723,726,729],{"title":519,"_path":719,"layout":13},"/framework/key-concepts/nuxt",{"title":721,"_path":722,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":724,"_path":725,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":727,"_path":728,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":730,"_path":731,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":733,"_path":734,"children":735},"Guides","/framework/guides",[736,739,742,745,748,751],{"title":737,"_path":738,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":740,"_path":741,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":743,"_path":744,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":746,"_path":747,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":749,"_path":750,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":752,"_path":753,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":755,"_path":756,"layout":13},"Core modules","/framework/core-modules",["Reactive",758],["Set"],["Reactive",760],{"module-navigation":457},true,"/design-system/design/design-tokens/",1714695155442]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Design tokens</h1><p class="rpl-type-p-large" data-v-3163c6df>Design tokens store our design decisions in the Ripple Design System. They are the single source of truth.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="what-is-a-design-token" data-v-fff5b905><a href="#what-is-a-design-token" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->What is a Design token?<!--]--></a></h2><p><!--[-->Design tokens store our design decisions that, together, make up the Ripple Design System’s visual style.<!--]--></p><p><!--[-->Tokens apply values in a consistent, reusable and scalable way. They ensure the same style values are used across design files and code.<!--]--></p><p><!--[-->By storing design decisions, they replace the need to use static values (for example, hex code values for colour).<!--]--></p><p><!--[-->Ripple Design System has tokens for:<!--]--></p><ul><!--[--><li><!--[-->colour<!--]--></li><li><!--[-->typography<!--]--></li><li><!--[-->spacing<!--]--></li><li><!--[-->elevation<!--]--></li><li><!--[-->borders<!--]--></li><li><!--[-->motion values.<!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="why-use-design-tokens" data-v-fff5b905><a href="#why-use-design-tokens" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Why use design tokens?<!--]--></a></h2><p><!--[-->Using design tokens keeps your UI consistent across different platforms.<!--]--></p><p><!--[-->Design tokens are the single source of truth. You can use them across designs and code.<!--]--></p><p><!--[-->Since design tokens let you make value changes at scale, design language changes are easier to make.<!--]--></p><p><!--[-->Design tokens aren&#39;t hard-coded. Avoiding hard-coded values in your design system makes it easier to build, maintain and scale products.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="ripple-design-tokens" data-v-fff5b905><a href="#ripple-design-tokens" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Ripple design tokens<!--]--></a></h2><p><!--[-->A Ripple token has 2 parts:<!--]--></p><ul><!--[--><li><!--[-->a token name, such as <strong><!--[-->rpl-clr-primary<!--]--></strong><!--]--></li><li><!--[-->an associated value, such as <strong><!--[-->#0052C2<!--]--></strong>.<!--]--></li><!--]--></ul><p><!--[-->The token&#39;s value can be one of several things: colour, a typeface, a measurement or even another token.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="how-to-read-ripple-design-token-names" data-v-fff5b905><a href="#how-to-read-ripple-design-token-names" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->How to read Ripple design token names<!--]--></a></h2><p><!--[-->Knowing how to read a token name helps you find the right token faster.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="parts-of-design-token-names" data-v-ea525968><a href="#parts-of-design-token-names" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Parts of design token names<!--]--></a></h2><ol><!--[--><li><!--[--><strong><!--[-->rpl<!--]--></strong>: design system<!--]--></li><li><!--[--><strong><!--[-->clr<!--]--></strong> (colour) or <strong><!--[-->type<!--]--></strong> (typography) or <strong><!--[-->sp<!--]--></strong> (spacing) for example: token type<!--]--></li><li><!--[--><strong><!--[-->primary-accessible<!--]--></strong> (a descriptive name) or <strong><!--[-->3<!--]--></strong> (a number), for example: see below<!--]--></li><!--]--></ol><h2 class="rpl-type-h3 docs-h3" id="examples" data-v-ea525968><a href="#examples" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Examples<!--]--></a></h2><ul><!--[--><li><!--[--><strong><!--[-->rpl-clr-primary-accessible<!--]--></strong><!--]--></li><li><!--[--><strong><!--[-->rpl-sp-4<!--]--></strong><!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="steps-and-explanations" data-v-ea525968><a href="#steps-and-explanations" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Steps and explanations<!--]--></a></h2><ol><!--[--><li><!--[-->Start all design tokens with the system name: <strong><!--[-->rpl<!--]--></strong> is for Ripple.<!--]--></li><li><!--[-->Then, place an abbreviation for the token type: <strong><!--[-->clr<!--]--></strong> is for colour; type is for typography; <strong><!--[-->sp<!--]--></strong> is for spacing.<!--]--></li><li><!--[-->End the token name with a descriptive name or number to show the token’s role relative to other Ripple design tokens. For example, <strong><!--[-->primary-accessible<!--]--></strong> in rpl-clr-type-primary-accessible shows this is a colour token that applies one of Ripple’s primary colours (from the colour palette available in Ripple Design System) and is suitable for accessible content. <strong><!--[-->4<!--]--></strong> in rpl-sp-4 shows this is a spacing token where 4 is the fourth spacing step (16x), in size order, from the spacing options available in the Ripple Design System.<!--]--></li><!--]--></ol><h2 class="rpl-type-h2 docs-h2" id="best-practices" data-v-fff5b905><a href="#best-practices" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Best practices<!--]--></a></h2><ul><!--[--><li><!--[-->Choose tokens based on meaning rather than appearance only<!--]--></li><li><!--[-->Choose the token with the most specific meaning that is available and applies to your content’s role on the site<!--]--></li><li><!--[-->Do not choose tokens based only how the end result looks on your site<!--]--></li><li><!--[-->For example, for a heading, it is important to choose rpl-type-h3 (heading token) instead of a rpl-type-p-large (type token), even though the end result looks similar<!--]--></li><li><!--[-->For example, if your content needs to be accessible and a certain colour, you should pick rpl-clr-type-primary-accessible instead of rpl-clr-primary<!--]--></li><li><!--[-->Don&#39;t pick a token just because the colours seem to match - this can break the consistency across other themes and confuse the user’s experience<!--]--></li><li><!--[-->If you do choose tokens based on appearance only, updates to themes, colours, or other features will not apply properly or consistently later<!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="why-are-tokens-important-for-design" data-v-fff5b905><a href="#why-are-tokens-important-for-design" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Why are tokens important for design?<!--]--></a></h2><h2 class="rpl-type-h3 docs-h3" id="purpose-driven" data-v-ea525968><a href="#purpose-driven" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Purpose-driven<!--]--></a></h2><p><!--[-->Tokens can be created with a specific purpose or goal in mind. For example, improve accessibility, enhance visual consistency or make it easier to update and maintain a website or app.<!--]--></p><p><!--[-->Since tokens are purpose-driven, designers and developers can make system-wide updates focused on achieving specific purposes. For example, systematically apply a high-contrast colour scheme for improved visibility, or change the type scale.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="single-source-of-truth" data-v-ea525968><a href="#single-source-of-truth" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Single source of truth<!--]--></a></h2><p><!--[-->Design tokens are like reusable building blocks. They give a design system a single source of truth for making changes to the way a website looks and works.<!--]--></p><p><!--[-->Having a single source of truth lets a design system implement features like global theming, responsive design and user customisation.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="system-wide-updates" data-v-ea525968><a href="#system-wide-updates" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->System-wide updates<!--]--></a></h2><p><!--[-->They let developers and designers change system-wide themes and contexts, using only a single update.<!--]--></p><p><!--[-->Design tokens prevent or reduce the need to find and replace thousands of instances of hard-coded values in the code.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="for-developers" data-v-fff5b905><a href="#for-developers" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->For developers<!--]--></a></h2><p><!--[-->For information for developers using tokens to theme Ripple components see the <a href="/design-system/develop/theming" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guide<!--]--><!--]--><!----><!--]--></a><!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/2.design/3.design-tokens.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/design/design-tokens/_payload.json">[{"state":1,"once":757,"_errors":759,"serverRendered":761,"path":762,"prerenderedAt":763},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":444,"$sdd-globals":460,"$sdd-navigation":462},["ShallowRef",4],["ShallowReactive",5],{"/design-system/design/design-tokens":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":439,"_id":440,"_source":441,"_file":442,"_extension":443},"/design-system/design/design-tokens","design",false,"","Design tokens","Design tokens store our design decisions in the Ripple Design System. They are the single source of truth.","page","Core",{"type":16,"children":17,"toc":420},"root",[18,27,33,38,43,48,83,89,94,99,104,109,115,120,146,151,157,162,169,224,230,249,255,304,310,348,354,360,365,370,376,381,386,392,397,402,408],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"what-is-a-design-token",[24],{"type":25,"value":26},"text","What is a Design token?",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Design tokens store our design decisions that, together, make up the Ripple Design System’s visual style.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Tokens apply values in a consistent, reusable and scalable way. They ensure the same style values are used across design files and code.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"By storing design decisions, they replace the need to use static values (for example, hex code values for colour).",{"type":19,"tag":28,"props":44,"children":45},{},[46],{"type":25,"value":47},"Ripple Design System has tokens for:",{"type":19,"tag":49,"props":50,"children":51},"ul",{},[52,58,63,68,73,78],{"type":19,"tag":53,"props":54,"children":55},"li",{},[56],{"type":25,"value":57},"colour",{"type":19,"tag":53,"props":59,"children":60},{},[61],{"type":25,"value":62},"typography",{"type":19,"tag":53,"props":64,"children":65},{},[66],{"type":25,"value":67},"spacing",{"type":19,"tag":53,"props":69,"children":70},{},[71],{"type":25,"value":72},"elevation",{"type":19,"tag":53,"props":74,"children":75},{},[76],{"type":25,"value":77},"borders",{"type":19,"tag":53,"props":79,"children":80},{},[81],{"type":25,"value":82},"motion values.",{"type":19,"tag":20,"props":84,"children":86},{"id":85},"why-use-design-tokens",[87],{"type":25,"value":88},"Why use design tokens?",{"type":19,"tag":28,"props":90,"children":91},{},[92],{"type":25,"value":93},"Using design tokens keeps your UI consistent across different platforms.",{"type":19,"tag":28,"props":95,"children":96},{},[97],{"type":25,"value":98},"Design tokens are the single source of truth. You can use them across designs and code.",{"type":19,"tag":28,"props":100,"children":101},{},[102],{"type":25,"value":103},"Since design tokens let you make value changes at scale, design language changes are easier to make.",{"type":19,"tag":28,"props":105,"children":106},{},[107],{"type":25,"value":108},"Design tokens aren't hard-coded. Avoiding hard-coded values in your design system makes it easier to build, maintain and scale products.",{"type":19,"tag":20,"props":110,"children":112},{"id":111},"ripple-design-tokens",[113],{"type":25,"value":114},"Ripple design tokens",{"type":19,"tag":28,"props":116,"children":117},{},[118],{"type":25,"value":119},"A Ripple token has 2 parts:",{"type":19,"tag":49,"props":121,"children":122},{},[123,134],{"type":19,"tag":53,"props":124,"children":125},{},[126,128],{"type":25,"value":127},"a token name, such as ",{"type":19,"tag":129,"props":130,"children":131},"strong",{},[132],{"type":25,"value":133},"rpl-clr-primary",{"type":19,"tag":53,"props":135,"children":136},{},[137,139,144],{"type":25,"value":138},"an associated value, such as ",{"type":19,"tag":129,"props":140,"children":141},{},[142],{"type":25,"value":143},"#0052C2",{"type":25,"value":145},".",{"type":19,"tag":28,"props":147,"children":148},{},[149],{"type":25,"value":150},"The token's value can be one of several things: colour, a typeface, a measurement or even another token.",{"type":19,"tag":20,"props":152,"children":154},{"id":153},"how-to-read-ripple-design-token-names",[155],{"type":25,"value":156},"How to read Ripple design token names",{"type":19,"tag":28,"props":158,"children":159},{},[160],{"type":25,"value":161},"Knowing how to read a token name helps you find the right token faster.",{"type":19,"tag":163,"props":164,"children":166},"h3",{"id":165},"parts-of-design-token-names",[167],{"type":25,"value":168},"Parts of design token names",{"type":19,"tag":170,"props":171,"children":172},"ol",{},[173,183,207],{"type":19,"tag":53,"props":174,"children":175},{},[176,181],{"type":19,"tag":129,"props":177,"children":178},{},[179],{"type":25,"value":180},"rpl",{"type":25,"value":182},": design system",{"type":19,"tag":53,"props":184,"children":185},{},[186,191,193,198,200,205],{"type":19,"tag":129,"props":187,"children":188},{},[189],{"type":25,"value":190},"clr",{"type":25,"value":192}," (colour) or ",{"type":19,"tag":129,"props":194,"children":195},{},[196],{"type":25,"value":197},"type",{"type":25,"value":199}," (typography) or ",{"type":19,"tag":129,"props":201,"children":202},{},[203],{"type":25,"value":204},"sp",{"type":25,"value":206}," (spacing) for example: token type",{"type":19,"tag":53,"props":208,"children":209},{},[210,215,217,222],{"type":19,"tag":129,"props":211,"children":212},{},[213],{"type":25,"value":214},"primary-accessible",{"type":25,"value":216}," (a descriptive name) or ",{"type":19,"tag":129,"props":218,"children":219},{},[220],{"type":25,"value":221},"3",{"type":25,"value":223}," (a number), for example: see below",{"type":19,"tag":163,"props":225,"children":227},{"id":226},"examples",[228],{"type":25,"value":229},"Examples",{"type":19,"tag":49,"props":231,"children":232},{},[233,241],{"type":19,"tag":53,"props":234,"children":235},{},[236],{"type":19,"tag":129,"props":237,"children":238},{},[239],{"type":25,"value":240},"rpl-clr-primary-accessible",{"type":19,"tag":53,"props":242,"children":243},{},[244],{"type":19,"tag":129,"props":245,"children":246},{},[247],{"type":25,"value":248},"rpl-sp-4",{"type":19,"tag":163,"props":250,"children":252},{"id":251},"steps-and-explanations",[253],{"type":25,"value":254},"Steps and explanations",{"type":19,"tag":170,"props":256,"children":257},{},[258,269,286],{"type":19,"tag":53,"props":259,"children":260},{},[261,263,267],{"type":25,"value":262},"Start all design tokens with the system name: ",{"type":19,"tag":129,"props":264,"children":265},{},[266],{"type":25,"value":180},{"type":25,"value":268}," is for Ripple.",{"type":19,"tag":53,"props":270,"children":271},{},[272,274,278,280,284],{"type":25,"value":273},"Then, place an abbreviation for the token type: ",{"type":19,"tag":129,"props":275,"children":276},{},[277],{"type":25,"value":190},{"type":25,"value":279}," is for colour; type is for typography; ",{"type":19,"tag":129,"props":281,"children":282},{},[283],{"type":25,"value":204},{"type":25,"value":285}," is for spacing.",{"type":19,"tag":53,"props":287,"children":288},{},[289,291,295,297,302],{"type":25,"value":290},"End the token name with a descriptive name or number to show the token’s role relative to other Ripple design tokens. For example, ",{"type":19,"tag":129,"props":292,"children":293},{},[294],{"type":25,"value":214},{"type":25,"value":296}," in rpl-clr-type-primary-accessible shows this is a colour token that applies one of Ripple’s primary colours (from the colour palette available in Ripple Design System) and is suitable for accessible content. ",{"type":19,"tag":129,"props":298,"children":299},{},[300],{"type":25,"value":301},"4",{"type":25,"value":303}," in rpl-sp-4 shows this is a spacing token where 4 is the fourth spacing step (16x), in size order, from the spacing options available in the Ripple Design System.",{"type":19,"tag":20,"props":305,"children":307},{"id":306},"best-practices",[308],{"type":25,"value":309},"Best practices",{"type":19,"tag":49,"props":311,"children":312},{},[313,318,323,328,333,338,343],{"type":19,"tag":53,"props":314,"children":315},{},[316],{"type":25,"value":317},"Choose tokens based on meaning rather than appearance only",{"type":19,"tag":53,"props":319,"children":320},{},[321],{"type":25,"value":322},"Choose the token with the most specific meaning that is available and applies to your content’s role on the site",{"type":19,"tag":53,"props":324,"children":325},{},[326],{"type":25,"value":327},"Do not choose tokens based only how the end result looks on your site",{"type":19,"tag":53,"props":329,"children":330},{},[331],{"type":25,"value":332},"For example, for a heading, it is important to choose rpl-type-h3 (heading token) instead of a rpl-type-p-large (type token), even though the end result looks similar",{"type":19,"tag":53,"props":334,"children":335},{},[336],{"type":25,"value":337},"For example, if your content needs to be accessible and a certain colour, you should pick rpl-clr-type-primary-accessible instead of rpl-clr-primary",{"type":19,"tag":53,"props":339,"children":340},{},[341],{"type":25,"value":342},"Don't pick a token just because the colours seem to match - this can break the consistency across other themes and confuse the user’s experience",{"type":19,"tag":53,"props":344,"children":345},{},[346],{"type":25,"value":347},"If you do choose tokens based on appearance only, updates to themes, colours, or other features will not apply properly or consistently later",{"type":19,"tag":20,"props":349,"children":351},{"id":350},"why-are-tokens-important-for-design",[352],{"type":25,"value":353},"Why are tokens important for design?",{"type":19,"tag":163,"props":355,"children":357},{"id":356},"purpose-driven",[358],{"type":25,"value":359},"Purpose-driven",{"type":19,"tag":28,"props":361,"children":362},{},[363],{"type":25,"value":364},"Tokens can be created with a specific purpose or goal in mind. For example, improve accessibility, enhance visual consistency or make it easier to update and maintain a website or app.",{"type":19,"tag":28,"props":366,"children":367},{},[368],{"type":25,"value":369},"Since tokens are purpose-driven, designers and developers can make system-wide updates focused on achieving specific purposes. For example, systematically apply a high-contrast colour scheme for improved visibility, or change the type scale.",{"type":19,"tag":163,"props":371,"children":373},{"id":372},"single-source-of-truth",[374],{"type":25,"value":375},"Single source of truth",{"type":19,"tag":28,"props":377,"children":378},{},[379],{"type":25,"value":380},"Design tokens are like reusable building blocks. They give a design system a single source of truth for making changes to the way a website looks and works.",{"type":19,"tag":28,"props":382,"children":383},{},[384],{"type":25,"value":385},"Having a single source of truth lets a design system implement features like global theming, responsive design and user customisation.",{"type":19,"tag":163,"props":387,"children":389},{"id":388},"system-wide-updates",[390],{"type":25,"value":391},"System-wide updates",{"type":19,"tag":28,"props":393,"children":394},{},[395],{"type":25,"value":396},"They let developers and designers change system-wide themes and contexts, using only a single update.",{"type":19,"tag":28,"props":398,"children":399},{},[400],{"type":25,"value":401},"Design tokens prevent or reduce the need to find and replace thousands of instances of hard-coded values in the code.",{"type":19,"tag":20,"props":403,"children":405},{"id":404},"for-developers",[406],{"type":25,"value":407},"For developers",{"type":19,"tag":28,"props":409,"children":410},{},[411,413],{"type":25,"value":412},"For information for developers using tokens to theme Ripple components see the ",{"type":19,"tag":414,"props":415,"children":417},"a",{"href":416},"/design-system/develop/theming",[418],{"type":25,"value":419},"theming guide",{"title":10,"searchDepth":421,"depth":421,"links":422},2,[423,424,425,426,432,433,438],{"id":22,"depth":421,"text":26},{"id":85,"depth":421,"text":88},{"id":111,"depth":421,"text":114},{"id":153,"depth":421,"text":156,"children":427},[428,430,431],{"id":165,"depth":429,"text":168},3,{"id":226,"depth":429,"text":229},{"id":251,"depth":429,"text":254},{"id":306,"depth":421,"text":309},{"id":350,"depth":421,"text":353,"children":434},[435,436,437],{"id":356,"depth":429,"text":359},{"id":372,"depth":429,"text":375},{"id":388,"depth":429,"text":391},{"id":404,"depth":421,"text":407},"markdown","content:design-system:2.design:3.design-tokens.md","content","design-system/2.design/3.design-tokens.md","md",["ShallowRef",445],["ShallowReactive",446],{"/design-system/design/design-tokens":447},[448,454],{"_path":449,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":450,"description":451,"layout":13,"label":14,"_type":439,"_id":452,"_source":441,"_file":453,"_extension":443},"/design-system/design/our-design-principles","Our design principles","There are 4 design principles that are the foundation of the Ripple Design System.","content:design-system:2.design:2.our-design-principles.md","design-system/2.design/2.our-design-principles.md",{"_path":455,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":456,"description":457,"layout":13,"label":14,"_type":439,"_id":458,"_source":441,"_file":459,"_extension":443},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",null,"content:design-system:2.design:4.theming-guidance-for-designers.md","design-system/2.design/4.theming-guidance-for-designers.md",["ShallowRef",461],{},[463,468,709],{"title":464,"_path":465,"icon":466,"layout":467},"Ripple Design System","/","carbon:home","home",{"title":469,"_path":470,"children":471},"Design System","/design-system",[472,488,498,527,561],{"title":473,"_path":474,"children":475},"About","/design-system/about",[476,479,482,485],{"title":477,"_path":478,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":480,"_path":481,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":483,"_path":484,"layout":13},"Support","/design-system/about/getting-support",{"title":486,"_path":487,"layout":13},"Contributing","/design-system/about/contributing",{"title":489,"_path":490,"children":491},"Design","/design-system/design",[492,495,496,497],{"title":493,"_path":494,"layout":13},"Getting started","/design-system/design/getting-started",{"title":450,"_path":449,"layout":13},{"title":11,"_path":7,"layout":13},{"title":456,"_path":455,"layout":13},{"title":499,"_path":500,"children":501},"Develop","/design-system/develop",[502,504,506,508],{"title":493,"_path":503,"layout":13},"/design-system/develop/getting-started",{"title":486,"_path":505,"layout":13},"/design-system/develop/contributing",{"title":507,"_path":416,"layout":13},"Theme and brand application",{"title":509,"_path":510,"children":511,"layout":13},"Usage","/design-system/develop/usage",[512,515,518,521,524],{"title":513,"_path":514,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":516,"_path":517,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":519,"_path":520,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":522,"_path":523,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":525,"_path":526,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":528,"_path":529,"children":530},"Styles","/design-system/styles",[531,534,537,540,543,546,549,552,555,558],{"title":532,"_path":533,"layout":13},"Colour","/design-system/styles/colour",{"title":535,"_path":536,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":538,"_path":539,"layout":13},"Grid","/design-system/styles/grid",{"title":541,"_path":542,"layout":13},"Icons","/design-system/styles/icons",{"title":544,"_path":545,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":547,"_path":548,"layout":13},"Layout","/design-system/styles/layout",{"title":550,"_path":551,"layout":13},"Logo","/design-system/styles/logo",{"title":553,"_path":554,"layout":13},"Motion","/design-system/styles/motion",{"title":556,"_path":557,"layout":13},"Spacing","/design-system/styles/spacing",{"title":559,"_path":560,"layout":13},"Typography","/design-system/styles/typography",{"title":562,"_path":563,"children":564},"Components","/design-system/components",[565,568,571,574,577,580,583,586,589,592,595,598,601,604,607,610,613,616,619,622,625,628,631,634,637,640,643,646,649,652,655,658,661,664,667,670,673,676,679,682,685,688,691,694,697,700,703,706],{"title":566,"_path":567,"layout":13},"Accordion","/design-system/components/accordion",{"title":569,"_path":570,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":572,"_path":573,"layout":13},"Alert","/design-system/components/alert",{"title":575,"_path":576,"layout":13},"Block quote","/design-system/components/block-quote",{"title":578,"_path":579,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":581,"_path":582,"layout":13},"Button","/design-system/components/button",{"title":584,"_path":585,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":587,"_path":588,"layout":13},"Callout","/design-system/components/callout",{"title":590,"_path":591,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":593,"_path":594,"layout":13},"Card","/design-system/components/card",{"title":596,"_path":597,"layout":13},"Carousel","/design-system/components/carousel",{"title":599,"_path":600,"layout":13},"Category grid","/design-system/components/category-grid",{"title":602,"_path":603,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":605,"_path":606,"layout":13},"Chip","/design-system/components/chip",{"title":608,"_path":609,"layout":13},"Contact us","/design-system/components/contact-us",{"title":611,"_path":612,"layout":13},"Date input","/design-system/components/date-input",{"title":614,"_path":615,"layout":13},"Detail list","/design-system/components/detail-list",{"title":617,"_path":618,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":620,"_path":621,"layout":13},"File","/design-system/components/file",{"title":623,"_path":624,"layout":13},"Footer","/design-system/components/footer",{"title":626,"_path":627,"layout":13},"Form","/design-system/components/form",{"title":629,"_path":630,"layout":13},"Form alert","/design-system/components/form-alert",{"title":632,"_path":633,"layout":13},"Header","/design-system/components/header",{"title":635,"_path":636,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":638,"_path":639,"layout":13},"Input field","/design-system/components/input-field",{"title":641,"_path":642,"layout":13},"Key dates","/design-system/components/key-dates",{"title":644,"_path":645,"layout":13},"Media","/design-system/components/media",{"title":647,"_path":648,"layout":13},"Media embed","/design-system/components/media-embed",{"title":650,"_path":651,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":653,"_path":654,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":656,"_path":657,"layout":13},"Option button","/design-system/components/option-button",{"title":659,"_path":660,"layout":13},"Page action","/design-system/components/page-action",{"title":662,"_path":663,"layout":13},"Pagination","/design-system/components/pagination",{"title":665,"_path":666,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":668,"_path":669,"layout":13},"Profile","/design-system/components/profile",{"title":671,"_path":672,"layout":13},"Radio button","/design-system/components/radio-button",{"title":674,"_path":675,"layout":13},"Related links","/design-system/components/related-links",{"title":677,"_path":678,"layout":13},"Results listing","/design-system/components/results-listing",{"title":680,"_path":681,"layout":13},"Search bar","/design-system/components/search-bar",{"title":683,"_path":684,"layout":13},"Skip link","/design-system/components/skip-link",{"title":686,"_path":687,"layout":13},"Social share","/design-system/components/social-share",{"title":689,"_path":690,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":692,"_path":693,"layout":13},"Table","/design-system/components/table",{"title":695,"_path":696,"layout":13},"Tabs","/design-system/components/tabs",{"title":698,"_path":699,"layout":13},"Tag","/design-system/components/tag",{"title":701,"_path":702,"layout":13},"Text area","/design-system/components/text-area",{"title":704,"_path":705,"layout":13},"Timeline","/design-system/components/timeline",{"title":707,"_path":708,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":710,"_path":711,"children":712,"layout":13},"Ripple Framework","/framework",[713,714,732,754],{"title":710,"_path":711,"layout":13},{"title":715,"_path":716,"children":717},"Key Concepts","/framework/key-concepts",[718,720,723,726,729],{"title":519,"_path":719,"layout":13},"/framework/key-concepts/nuxt",{"title":721,"_path":722,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":724,"_path":725,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":727,"_path":728,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":730,"_path":731,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":733,"_path":734,"children":735},"Guides","/framework/guides",[736,739,742,745,748,751],{"title":737,"_path":738,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":740,"_path":741,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":743,"_path":744,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":746,"_path":747,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":749,"_path":750,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":752,"_path":753,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":755,"_path":756,"layout":13},"Core modules","/framework/core-modules",["Reactive",758],["Set"],["Reactive",760],{"module-navigation":457},true,"/design-system/design/design-tokens/",1714695653511]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/design/getting-started/_payload.json b/design-system/design/getting-started/_payload.json
index 3b11ae9b02..2456eb499e 100644
--- a/design-system/design/getting-started/_payload.json
+++ b/design-system/design/getting-started/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,38,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":24,"items":25},"/design-system/design","Design",true,[26,29,32,35],{"id":27,"text":28,"url":27,"active":24,"items":-1},"/design-system/design/getting-started","Getting started",{"id":30,"text":31,"url":30,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":33,"text":34,"url":33,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":39,"text":40,"url":39,"active":7,"items":41},"/design-system/develop","Develop",[42,44,46,49],{"id":43,"text":28,"url":43,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":7,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":7,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695150818]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,38,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":24,"items":25},"/design-system/design","Design",true,[26,29,32,35],{"id":27,"text":28,"url":27,"active":24,"items":-1},"/design-system/design/getting-started","Getting started",{"id":30,"text":31,"url":30,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":33,"text":34,"url":33,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":39,"text":40,"url":39,"active":7,"items":41},"/design-system/develop","Develop",[42,44,46,49],{"id":43,"text":28,"url":43,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":7,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":7,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695649076]
\ No newline at end of file
diff --git a/design-system/design/getting-started/index.html b/design-system/design/getting-started/index.html
index 64487fe16b..39ec34d36d 100644
--- a/design-system/design/getting-started/index.html
+++ b/design-system/design/getting-started/index.html
@@ -21,61 +21,61 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.F9NVvvm4.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseOl.jzxVYZcz.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.GmB4B_NE.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseOl.f55gcGCc.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -87,8 +87,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Getting started</h1><p class="rpl-type-p-large" data-v-3163c6df></p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->Ripple is the design system for Victorian Government digital products. The Ripple Design System makes websites and other digital products look and feel like part of the vic.gov.au brand.<!--]--></p><p><!--[-->The Ripple Design System creates an accessible and consistent visual user interface across all our digital products. This helps citizens trust they are visiting an official source of Victorian Government information.<!--]--></p><p><!--[-->It also provides a single source of truth when choosing styles, components and patterns for Single Digital Presence (SDP) websites.<!--]--></p><p><!--[-->The Ripple Design System offers tools users can apply, adapt and expand to create a vic.gov.au-branded digital experience. These include:<!--]--></p><ul><!--[--><li><!--[--><strong><!--[-->styles<!--]--></strong> - foundations of colour, typography, spacing, motion and graphic devices that communicate the Victorian Government’s visual identity<!--]--></li><li><!--[--><strong><!--[-->components<!--]--></strong> - customisable parts (including base components) that give a website its functionality and, when combined with styles, user interface<!--]--></li><li><!--[--><strong><!--[-->guidance<!--]--></strong> - detailed instructions for designers and and developers on using Ripple 2.0 styles, components and other Ripple tools to create consistent digital experiences.<!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="first-steps" data-v-fff5b905><a href="#first-steps" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->First steps<!--]--></a></h2><p><!--[-->Some key areas of the Ripple Design System that will help you create your digital product.<!--]--></p><ul><!--[--><li><!--[--><a href="/design-system/design/design-tokens/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Design tokens<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://www.vic.gov.au/ripple-design-system#request-access-to-the-design-system" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Sign up for access to the Ripple 2.0 Figma file<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/design/theming-guidance-for-designers/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Theming<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="the-ripple-20-figma-file" data-v-fff5b905><a href="#the-ripple-20-figma-file" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->The Ripple 2.0 Figma file<!--]--></a></h2><p><!--[-->Ripple 2.0 Design System is available in <a href="https://www.figma.com/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Figma<!--]--><!--]--><!----><!--]--></a>. It contains all the design assets needed to design, prototype and share.<!--]--></p><p><!--[-->Only use the Figma file in conjunction with the Ripple 2.0 guidance about the component or style you are using. Read the guidance to understand the usage and behaviour of styles and components.<!--]--></p><p><!--[--><strong><!--[-->To create quality user experiences, do not use the Figma file in isolation.<!--]--></strong> This is important because the Ripple Design System provides more than a website’s appearance. It encompasses developer, user experience, inclusive design and other human-centred design considerations. For example, Ripple automatically ensures accessible colour pairings, cross-browser functionality and consistent error messaging. Using the Figma file without Ripple guidance will confuse users and degrade your site’s accessibility and functionality.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="figma-file-access" data-v-ea525968><a href="#figma-file-access" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Figma file access<!--]--></a></h2><ol><!--[--><li><!--[--><strong><!--[-->Sign up to Figma<!--]--></strong><br>Create a free <a href="https://www.figma.com/pricing/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Figma Starter account<!--]--><!--]--><!----><!--]--></a>.<!--]--></li><li><!--[--><strong><!--[-->Install Ripple font<!--]--></strong><br>Ripple uses the VIC font family.<br><a href="https://www.vic.gov.au/brand-victoria-fonts" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Download and install VIC<!--]--><!--]--><!----><!--]--></a> to use this typeface in Figma.<!--]--></li><li><!--[--><strong><!--[-->Request access to Ripple Figma file<!--]--></strong><br>Ripple has been built as a Figma project.<br><a href="https://www.vic.gov.au/ripple-design-system#request-access-to-the-design-system" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Request access to the Ripple 2.0 Design System<!--]--><!--]--><!----><!--]--></a>.<br>You will receive access to the Ripple Design System Figma file.<!--]--></li><li><!--[--><strong><!--[-->Add Ripple to your Figma account<!--]--></strong><br>Add the Ripple 2.0 Design System Figma file to your Figma account.<!--]--></li><li><!--[--><strong><!--[-->Set up Asset Library<!--]--></strong><br>In your Figma account, go to the Getting Started page.<br>Follow these instructions to set up the Asset Library.<!--]--></li><!--]--></ol><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/2.design/1.getting-started.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/design/getting-started/_payload.json">[{"state":1,"once":602,"_errors":604,"serverRendered":606,"path":7,"prerenderedAt":607},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":287,"$sdd-globals":305,"$sdd-navigation":307},["ShallowRef",4],["ShallowReactive",5],{"/design-system/design/getting-started":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":282,"_id":283,"_source":284,"_file":285,"_extension":286},"/design-system/design/getting-started","design",false,"","Getting started",null,"page",{"type":15,"children":16,"toc":274},"root",[17,25,30,35,40,76,83,88,121,127,141,146,156,163],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22],{"type":23,"value":24},"text","Ripple is the design system for Victorian Government digital products. The Ripple Design System makes websites and other digital products look and feel like part of the vic.gov.au brand.",{"type":18,"tag":19,"props":26,"children":27},{},[28],{"type":23,"value":29},"The Ripple Design System creates an accessible and consistent visual user interface across all our digital products. This helps citizens trust they are visiting an official source of Victorian Government information.",{"type":18,"tag":19,"props":31,"children":32},{},[33],{"type":23,"value":34},"It also provides a single source of truth when choosing styles, components and patterns for Single Digital Presence (SDP) websites.",{"type":18,"tag":19,"props":36,"children":37},{},[38],{"type":23,"value":39},"The Ripple Design System offers tools users can apply, adapt and expand to create a vic.gov.au-branded digital experience. These include:",{"type":18,"tag":41,"props":42,"children":43},"ul",{},[44,56,66],{"type":18,"tag":45,"props":46,"children":47},"li",{},[48,54],{"type":18,"tag":49,"props":50,"children":51},"strong",{},[52],{"type":23,"value":53},"styles",{"type":23,"value":55}," - foundations of colour, typography, spacing, motion and graphic devices that communicate the Victorian Government’s visual identity",{"type":18,"tag":45,"props":57,"children":58},{},[59,64],{"type":18,"tag":49,"props":60,"children":61},{},[62],{"type":23,"value":63},"components",{"type":23,"value":65}," - customisable parts (including base components) that give a website its functionality and, when combined with styles, user interface",{"type":18,"tag":45,"props":67,"children":68},{},[69,74],{"type":18,"tag":49,"props":70,"children":71},{},[72],{"type":23,"value":73},"guidance",{"type":23,"value":75}," - detailed instructions for designers and and developers on using Ripple 2.0 styles, components and other Ripple tools to create consistent digital experiences.",{"type":18,"tag":77,"props":78,"children":80},"h2",{"id":79},"first-steps",[81],{"type":23,"value":82},"First steps",{"type":18,"tag":19,"props":84,"children":85},{},[86],{"type":23,"value":87},"Some key areas of the Ripple Design System that will help you create your digital product.",{"type":18,"tag":41,"props":89,"children":90},{},[91,101,112],{"type":18,"tag":45,"props":92,"children":93},{},[94],{"type":18,"tag":95,"props":96,"children":98},"a",{"href":97},"/design-system/design/design-tokens/",[99],{"type":23,"value":100},"Design tokens",{"type":18,"tag":45,"props":102,"children":103},{},[104],{"type":18,"tag":95,"props":105,"children":109},{"href":106,"rel":107},"https://www.vic.gov.au/ripple-design-system#request-access-to-the-design-system",[108],"nofollow",[110],{"type":23,"value":111},"Sign up for access to the Ripple 2.0 Figma file",{"type":18,"tag":45,"props":113,"children":114},{},[115],{"type":18,"tag":95,"props":116,"children":118},{"href":117},"/design-system/design/theming-guidance-for-designers/",[119],{"type":23,"value":120},"Theming",{"type":18,"tag":77,"props":122,"children":124},{"id":123},"the-ripple-20-figma-file",[125],{"type":23,"value":126},"The Ripple 2.0 Figma file",{"type":18,"tag":19,"props":128,"children":129},{},[130,132,139],{"type":23,"value":131},"Ripple 2.0 Design System is available in ",{"type":18,"tag":95,"props":133,"children":136},{"href":134,"rel":135},"https://www.figma.com/",[108],[137],{"type":23,"value":138},"Figma",{"type":23,"value":140},". It contains all the design assets needed to design, prototype and share.",{"type":18,"tag":19,"props":142,"children":143},{},[144],{"type":23,"value":145},"Only use the Figma file in conjunction with the Ripple 2.0 guidance about the component or style you are using. Read the guidance to understand the usage and behaviour of styles and components.",{"type":18,"tag":19,"props":147,"children":148},{},[149,154],{"type":18,"tag":49,"props":150,"children":151},{},[152],{"type":23,"value":153},"To create quality user experiences, do not use the Figma file in isolation.",{"type":23,"value":155}," This is important because the Ripple Design System provides more than a website’s appearance. It encompasses developer, user experience, inclusive design and other human-centred design considerations. For example, Ripple automatically ensures accessible colour pairings, cross-browser functionality and consistent error messaging. Using the Figma file without Ripple guidance will confuse users and degrade your site’s accessibility and functionality.",{"type":18,"tag":157,"props":158,"children":160},"h3",{"id":159},"figma-file-access",[161],{"type":23,"value":162},"Figma file access",{"type":18,"tag":164,"props":165,"children":166},"ol",{},[167,190,215,243,256],{"type":18,"tag":45,"props":168,"children":169},{},[170,175,179,181,188],{"type":18,"tag":49,"props":171,"children":172},{},[173],{"type":23,"value":174},"Sign up to Figma",{"type":18,"tag":176,"props":177,"children":178},"br",{},[],{"type":23,"value":180},"Create a free ",{"type":18,"tag":95,"props":182,"children":185},{"href":183,"rel":184},"https://www.figma.com/pricing/",[108],[186],{"type":23,"value":187},"Figma Starter account",{"type":23,"value":189},".",{"type":18,"tag":45,"props":191,"children":192},{},[193,198,201,203,206,213],{"type":18,"tag":49,"props":194,"children":195},{},[196],{"type":23,"value":197},"Install Ripple font",{"type":18,"tag":176,"props":199,"children":200},{},[],{"type":23,"value":202},"Ripple uses the VIC font family.",{"type":18,"tag":176,"props":204,"children":205},{},[],{"type":18,"tag":95,"props":207,"children":210},{"href":208,"rel":209},"https://www.vic.gov.au/brand-victoria-fonts",[108],[211],{"type":23,"value":212},"Download and install VIC",{"type":23,"value":214}," to use this typeface in Figma.",{"type":18,"tag":45,"props":216,"children":217},{},[218,223,226,228,231,237,238,241],{"type":18,"tag":49,"props":219,"children":220},{},[221],{"type":23,"value":222},"Request access to Ripple Figma file",{"type":18,"tag":176,"props":224,"children":225},{},[],{"type":23,"value":227},"Ripple has been built as a Figma project.",{"type":18,"tag":176,"props":229,"children":230},{},[],{"type":18,"tag":95,"props":232,"children":234},{"href":106,"rel":233},[108],[235],{"type":23,"value":236},"Request access to the Ripple 2.0 Design System",{"type":23,"value":189},{"type":18,"tag":176,"props":239,"children":240},{},[],{"type":23,"value":242},"You will receive access to the Ripple Design System Figma file.",{"type":18,"tag":45,"props":244,"children":245},{},[246,251,254],{"type":18,"tag":49,"props":247,"children":248},{},[249],{"type":23,"value":250},"Add Ripple to your Figma account",{"type":18,"tag":176,"props":252,"children":253},{},[],{"type":23,"value":255},"Add the Ripple 2.0 Design System Figma file to your Figma account.",{"type":18,"tag":45,"props":257,"children":258},{},[259,264,267,269,272],{"type":18,"tag":49,"props":260,"children":261},{},[262],{"type":23,"value":263},"Set up Asset Library",{"type":18,"tag":176,"props":265,"children":266},{},[],{"type":23,"value":268},"In your Figma account, go to the Getting Started page.",{"type":18,"tag":176,"props":270,"children":271},{},[],{"type":23,"value":273},"Follow these instructions to set up the Asset Library.",{"title":10,"searchDepth":275,"depth":275,"links":276},2,[277,278],{"id":79,"depth":275,"text":82},{"id":123,"depth":275,"text":126,"children":279},[280],{"id":159,"depth":281,"text":162},3,"markdown","content:design-system:2.design:1.getting-started.md","content","design-system/2.design/1.getting-started.md","md",["ShallowRef",288],["ShallowReactive",289],{"/design-system/design/getting-started":290},[291,298],{"_path":292,"_dir":293,"_draft":9,"_partial":9,"_locale":10,"title":294,"description":295,"layout":13,"_type":282,"_id":296,"_source":284,"_file":297,"_extension":286},"/design-system/about/contributing","about","Contributing","Found an issue?","content:design-system:1.about:4.contributing.md","design-system/1.about/4.contributing.md",{"_path":299,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":300,"description":301,"layout":13,"label":302,"_type":282,"_id":303,"_source":284,"_file":304,"_extension":286},"/design-system/design/our-design-principles","Our design principles","There are 4 design principles that are the foundation of the Ripple Design System.","Core","content:design-system:2.design:2.our-design-principles.md","design-system/2.design/2.our-design-principles.md",["ShallowRef",306],{},[308,313,554],{"title":309,"_path":310,"icon":311,"layout":312},"Ripple Design System","/","carbon:home","home",{"title":314,"_path":315,"children":316},"Design System","/design-system",[317,331,342,372,406],{"title":318,"_path":319,"children":320},"About","/design-system/about",[321,324,327,330],{"title":322,"_path":323,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":325,"_path":326,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":328,"_path":329,"layout":13},"Support","/design-system/about/getting-support",{"title":294,"_path":292,"layout":13},{"title":332,"_path":333,"children":334},"Design","/design-system/design",[335,336,337,339],{"title":11,"_path":7,"layout":13},{"title":300,"_path":299,"layout":13},{"title":100,"_path":338,"layout":13},"/design-system/design/design-tokens",{"title":340,"_path":341,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":343,"_path":344,"children":345},"Develop","/design-system/develop",[346,348,350,353],{"title":11,"_path":347,"layout":13},"/design-system/develop/getting-started",{"title":294,"_path":349,"layout":13},"/design-system/develop/contributing",{"title":351,"_path":352,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":354,"_path":355,"children":356,"layout":13},"Usage","/design-system/develop/usage",[357,360,363,366,369],{"title":358,"_path":359,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":361,"_path":362,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":364,"_path":365,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":367,"_path":368,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":370,"_path":371,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":373,"_path":374,"children":375},"Styles","/design-system/styles",[376,379,382,385,388,391,394,397,400,403],{"title":377,"_path":378,"layout":13},"Colour","/design-system/styles/colour",{"title":380,"_path":381,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":383,"_path":384,"layout":13},"Grid","/design-system/styles/grid",{"title":386,"_path":387,"layout":13},"Icons","/design-system/styles/icons",{"title":389,"_path":390,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":392,"_path":393,"layout":13},"Layout","/design-system/styles/layout",{"title":395,"_path":396,"layout":13},"Logo","/design-system/styles/logo",{"title":398,"_path":399,"layout":13},"Motion","/design-system/styles/motion",{"title":401,"_path":402,"layout":13},"Spacing","/design-system/styles/spacing",{"title":404,"_path":405,"layout":13},"Typography","/design-system/styles/typography",{"title":407,"_path":408,"children":409},"Components","/design-system/components",[410,413,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482,485,488,491,494,497,500,503,506,509,512,515,518,521,524,527,530,533,536,539,542,545,548,551],{"title":411,"_path":412,"layout":13},"Accordion","/design-system/components/accordion",{"title":414,"_path":415,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":417,"_path":418,"layout":13},"Alert","/design-system/components/alert",{"title":420,"_path":421,"layout":13},"Block quote","/design-system/components/block-quote",{"title":423,"_path":424,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":426,"_path":427,"layout":13},"Button","/design-system/components/button",{"title":429,"_path":430,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":432,"_path":433,"layout":13},"Callout","/design-system/components/callout",{"title":435,"_path":436,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":438,"_path":439,"layout":13},"Card","/design-system/components/card",{"title":441,"_path":442,"layout":13},"Carousel","/design-system/components/carousel",{"title":444,"_path":445,"layout":13},"Category grid","/design-system/components/category-grid",{"title":447,"_path":448,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":450,"_path":451,"layout":13},"Chip","/design-system/components/chip",{"title":453,"_path":454,"layout":13},"Contact us","/design-system/components/contact-us",{"title":456,"_path":457,"layout":13},"Date input","/design-system/components/date-input",{"title":459,"_path":460,"layout":13},"Detail list","/design-system/components/detail-list",{"title":462,"_path":463,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":465,"_path":466,"layout":13},"File","/design-system/components/file",{"title":468,"_path":469,"layout":13},"Footer","/design-system/components/footer",{"title":471,"_path":472,"layout":13},"Form","/design-system/components/form",{"title":474,"_path":475,"layout":13},"Form alert","/design-system/components/form-alert",{"title":477,"_path":478,"layout":13},"Header","/design-system/components/header",{"title":480,"_path":481,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":483,"_path":484,"layout":13},"Input field","/design-system/components/input-field",{"title":486,"_path":487,"layout":13},"Key dates","/design-system/components/key-dates",{"title":489,"_path":490,"layout":13},"Media","/design-system/components/media",{"title":492,"_path":493,"layout":13},"Media embed","/design-system/components/media-embed",{"title":495,"_path":496,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":498,"_path":499,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":501,"_path":502,"layout":13},"Option button","/design-system/components/option-button",{"title":504,"_path":505,"layout":13},"Page action","/design-system/components/page-action",{"title":507,"_path":508,"layout":13},"Pagination","/design-system/components/pagination",{"title":510,"_path":511,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":513,"_path":514,"layout":13},"Profile","/design-system/components/profile",{"title":516,"_path":517,"layout":13},"Radio button","/design-system/components/radio-button",{"title":519,"_path":520,"layout":13},"Related links","/design-system/components/related-links",{"title":522,"_path":523,"layout":13},"Results listing","/design-system/components/results-listing",{"title":525,"_path":526,"layout":13},"Search bar","/design-system/components/search-bar",{"title":528,"_path":529,"layout":13},"Skip link","/design-system/components/skip-link",{"title":531,"_path":532,"layout":13},"Social share","/design-system/components/social-share",{"title":534,"_path":535,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":537,"_path":538,"layout":13},"Table","/design-system/components/table",{"title":540,"_path":541,"layout":13},"Tabs","/design-system/components/tabs",{"title":543,"_path":544,"layout":13},"Tag","/design-system/components/tag",{"title":546,"_path":547,"layout":13},"Text area","/design-system/components/text-area",{"title":549,"_path":550,"layout":13},"Timeline","/design-system/components/timeline",{"title":552,"_path":553,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":555,"_path":556,"children":557,"layout":13},"Ripple Framework","/framework",[558,559,577,599],{"title":555,"_path":556,"layout":13},{"title":560,"_path":561,"children":562},"Key Concepts","/framework/key-concepts",[563,565,568,571,574],{"title":364,"_path":564,"layout":13},"/framework/key-concepts/nuxt",{"title":566,"_path":567,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":569,"_path":570,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":572,"_path":573,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":575,"_path":576,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":578,"_path":579,"children":580},"Guides","/framework/guides",[581,584,587,590,593,596],{"title":582,"_path":583,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":585,"_path":586,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":588,"_path":589,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":591,"_path":592,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":594,"_path":595,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":597,"_path":598,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":600,"_path":601,"layout":13},"Core modules","/framework/core-modules",["Reactive",603],["Set"],["Reactive",605],{"module-navigation":12},true,1714695150818]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Getting started</h1><p class="rpl-type-p-large" data-v-3163c6df></p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->Ripple is the design system for Victorian Government digital products. The Ripple Design System makes websites and other digital products look and feel like part of the vic.gov.au brand.<!--]--></p><p><!--[-->The Ripple Design System creates an accessible and consistent visual user interface across all our digital products. This helps citizens trust they are visiting an official source of Victorian Government information.<!--]--></p><p><!--[-->It also provides a single source of truth when choosing styles, components and patterns for Single Digital Presence (SDP) websites.<!--]--></p><p><!--[-->The Ripple Design System offers tools users can apply, adapt and expand to create a vic.gov.au-branded digital experience. These include:<!--]--></p><ul><!--[--><li><!--[--><strong><!--[-->styles<!--]--></strong> - foundations of colour, typography, spacing, motion and graphic devices that communicate the Victorian Government’s visual identity<!--]--></li><li><!--[--><strong><!--[-->components<!--]--></strong> - customisable parts (including base components) that give a website its functionality and, when combined with styles, user interface<!--]--></li><li><!--[--><strong><!--[-->guidance<!--]--></strong> - detailed instructions for designers and and developers on using Ripple 2.0 styles, components and other Ripple tools to create consistent digital experiences.<!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="first-steps" data-v-fff5b905><a href="#first-steps" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->First steps<!--]--></a></h2><p><!--[-->Some key areas of the Ripple Design System that will help you create your digital product.<!--]--></p><ul><!--[--><li><!--[--><a href="/design-system/design/design-tokens/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Design tokens<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://www.vic.gov.au/ripple-design-system#request-access-to-the-design-system" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Sign up for access to the Ripple 2.0 Figma file<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/design/theming-guidance-for-designers/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Theming<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="the-ripple-20-figma-file" data-v-fff5b905><a href="#the-ripple-20-figma-file" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->The Ripple 2.0 Figma file<!--]--></a></h2><p><!--[-->Ripple 2.0 Design System is available in <a href="https://www.figma.com/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Figma<!--]--><!--]--><!----><!--]--></a>. It contains all the design assets needed to design, prototype and share.<!--]--></p><p><!--[-->Only use the Figma file in conjunction with the Ripple 2.0 guidance about the component or style you are using. Read the guidance to understand the usage and behaviour of styles and components.<!--]--></p><p><!--[--><strong><!--[-->To create quality user experiences, do not use the Figma file in isolation.<!--]--></strong> This is important because the Ripple Design System provides more than a website’s appearance. It encompasses developer, user experience, inclusive design and other human-centred design considerations. For example, Ripple automatically ensures accessible colour pairings, cross-browser functionality and consistent error messaging. Using the Figma file without Ripple guidance will confuse users and degrade your site’s accessibility and functionality.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="figma-file-access" data-v-ea525968><a href="#figma-file-access" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Figma file access<!--]--></a></h2><ol><!--[--><li><!--[--><strong><!--[-->Sign up to Figma<!--]--></strong><br>Create a free <a href="https://www.figma.com/pricing/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Figma Starter account<!--]--><!--]--><!----><!--]--></a>.<!--]--></li><li><!--[--><strong><!--[-->Install Ripple font<!--]--></strong><br>Ripple uses the VIC font family.<br><a href="https://www.vic.gov.au/brand-victoria-fonts" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Download and install VIC<!--]--><!--]--><!----><!--]--></a> to use this typeface in Figma.<!--]--></li><li><!--[--><strong><!--[-->Request access to Ripple Figma file<!--]--></strong><br>Ripple has been built as a Figma project.<br><a href="https://www.vic.gov.au/ripple-design-system#request-access-to-the-design-system" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Request access to the Ripple 2.0 Design System<!--]--><!--]--><!----><!--]--></a>.<br>You will receive access to the Ripple Design System Figma file.<!--]--></li><li><!--[--><strong><!--[-->Add Ripple to your Figma account<!--]--></strong><br>Add the Ripple 2.0 Design System Figma file to your Figma account.<!--]--></li><li><!--[--><strong><!--[-->Set up Asset Library<!--]--></strong><br>In your Figma account, go to the Getting Started page.<br>Follow these instructions to set up the Asset Library.<!--]--></li><!--]--></ol><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/2.design/1.getting-started.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/design/getting-started/_payload.json">[{"state":1,"once":602,"_errors":604,"serverRendered":606,"path":7,"prerenderedAt":607},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":287,"$sdd-globals":305,"$sdd-navigation":307},["ShallowRef",4],["ShallowReactive",5],{"/design-system/design/getting-started":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":282,"_id":283,"_source":284,"_file":285,"_extension":286},"/design-system/design/getting-started","design",false,"","Getting started",null,"page",{"type":15,"children":16,"toc":274},"root",[17,25,30,35,40,76,83,88,121,127,141,146,156,163],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22],{"type":23,"value":24},"text","Ripple is the design system for Victorian Government digital products. The Ripple Design System makes websites and other digital products look and feel like part of the vic.gov.au brand.",{"type":18,"tag":19,"props":26,"children":27},{},[28],{"type":23,"value":29},"The Ripple Design System creates an accessible and consistent visual user interface across all our digital products. This helps citizens trust they are visiting an official source of Victorian Government information.",{"type":18,"tag":19,"props":31,"children":32},{},[33],{"type":23,"value":34},"It also provides a single source of truth when choosing styles, components and patterns for Single Digital Presence (SDP) websites.",{"type":18,"tag":19,"props":36,"children":37},{},[38],{"type":23,"value":39},"The Ripple Design System offers tools users can apply, adapt and expand to create a vic.gov.au-branded digital experience. These include:",{"type":18,"tag":41,"props":42,"children":43},"ul",{},[44,56,66],{"type":18,"tag":45,"props":46,"children":47},"li",{},[48,54],{"type":18,"tag":49,"props":50,"children":51},"strong",{},[52],{"type":23,"value":53},"styles",{"type":23,"value":55}," - foundations of colour, typography, spacing, motion and graphic devices that communicate the Victorian Government’s visual identity",{"type":18,"tag":45,"props":57,"children":58},{},[59,64],{"type":18,"tag":49,"props":60,"children":61},{},[62],{"type":23,"value":63},"components",{"type":23,"value":65}," - customisable parts (including base components) that give a website its functionality and, when combined with styles, user interface",{"type":18,"tag":45,"props":67,"children":68},{},[69,74],{"type":18,"tag":49,"props":70,"children":71},{},[72],{"type":23,"value":73},"guidance",{"type":23,"value":75}," - detailed instructions for designers and and developers on using Ripple 2.0 styles, components and other Ripple tools to create consistent digital experiences.",{"type":18,"tag":77,"props":78,"children":80},"h2",{"id":79},"first-steps",[81],{"type":23,"value":82},"First steps",{"type":18,"tag":19,"props":84,"children":85},{},[86],{"type":23,"value":87},"Some key areas of the Ripple Design System that will help you create your digital product.",{"type":18,"tag":41,"props":89,"children":90},{},[91,101,112],{"type":18,"tag":45,"props":92,"children":93},{},[94],{"type":18,"tag":95,"props":96,"children":98},"a",{"href":97},"/design-system/design/design-tokens/",[99],{"type":23,"value":100},"Design tokens",{"type":18,"tag":45,"props":102,"children":103},{},[104],{"type":18,"tag":95,"props":105,"children":109},{"href":106,"rel":107},"https://www.vic.gov.au/ripple-design-system#request-access-to-the-design-system",[108],"nofollow",[110],{"type":23,"value":111},"Sign up for access to the Ripple 2.0 Figma file",{"type":18,"tag":45,"props":113,"children":114},{},[115],{"type":18,"tag":95,"props":116,"children":118},{"href":117},"/design-system/design/theming-guidance-for-designers/",[119],{"type":23,"value":120},"Theming",{"type":18,"tag":77,"props":122,"children":124},{"id":123},"the-ripple-20-figma-file",[125],{"type":23,"value":126},"The Ripple 2.0 Figma file",{"type":18,"tag":19,"props":128,"children":129},{},[130,132,139],{"type":23,"value":131},"Ripple 2.0 Design System is available in ",{"type":18,"tag":95,"props":133,"children":136},{"href":134,"rel":135},"https://www.figma.com/",[108],[137],{"type":23,"value":138},"Figma",{"type":23,"value":140},". It contains all the design assets needed to design, prototype and share.",{"type":18,"tag":19,"props":142,"children":143},{},[144],{"type":23,"value":145},"Only use the Figma file in conjunction with the Ripple 2.0 guidance about the component or style you are using. Read the guidance to understand the usage and behaviour of styles and components.",{"type":18,"tag":19,"props":147,"children":148},{},[149,154],{"type":18,"tag":49,"props":150,"children":151},{},[152],{"type":23,"value":153},"To create quality user experiences, do not use the Figma file in isolation.",{"type":23,"value":155}," This is important because the Ripple Design System provides more than a website’s appearance. It encompasses developer, user experience, inclusive design and other human-centred design considerations. For example, Ripple automatically ensures accessible colour pairings, cross-browser functionality and consistent error messaging. Using the Figma file without Ripple guidance will confuse users and degrade your site’s accessibility and functionality.",{"type":18,"tag":157,"props":158,"children":160},"h3",{"id":159},"figma-file-access",[161],{"type":23,"value":162},"Figma file access",{"type":18,"tag":164,"props":165,"children":166},"ol",{},[167,190,215,243,256],{"type":18,"tag":45,"props":168,"children":169},{},[170,175,179,181,188],{"type":18,"tag":49,"props":171,"children":172},{},[173],{"type":23,"value":174},"Sign up to Figma",{"type":18,"tag":176,"props":177,"children":178},"br",{},[],{"type":23,"value":180},"Create a free ",{"type":18,"tag":95,"props":182,"children":185},{"href":183,"rel":184},"https://www.figma.com/pricing/",[108],[186],{"type":23,"value":187},"Figma Starter account",{"type":23,"value":189},".",{"type":18,"tag":45,"props":191,"children":192},{},[193,198,201,203,206,213],{"type":18,"tag":49,"props":194,"children":195},{},[196],{"type":23,"value":197},"Install Ripple font",{"type":18,"tag":176,"props":199,"children":200},{},[],{"type":23,"value":202},"Ripple uses the VIC font family.",{"type":18,"tag":176,"props":204,"children":205},{},[],{"type":18,"tag":95,"props":207,"children":210},{"href":208,"rel":209},"https://www.vic.gov.au/brand-victoria-fonts",[108],[211],{"type":23,"value":212},"Download and install VIC",{"type":23,"value":214}," to use this typeface in Figma.",{"type":18,"tag":45,"props":216,"children":217},{},[218,223,226,228,231,237,238,241],{"type":18,"tag":49,"props":219,"children":220},{},[221],{"type":23,"value":222},"Request access to Ripple Figma file",{"type":18,"tag":176,"props":224,"children":225},{},[],{"type":23,"value":227},"Ripple has been built as a Figma project.",{"type":18,"tag":176,"props":229,"children":230},{},[],{"type":18,"tag":95,"props":232,"children":234},{"href":106,"rel":233},[108],[235],{"type":23,"value":236},"Request access to the Ripple 2.0 Design System",{"type":23,"value":189},{"type":18,"tag":176,"props":239,"children":240},{},[],{"type":23,"value":242},"You will receive access to the Ripple Design System Figma file.",{"type":18,"tag":45,"props":244,"children":245},{},[246,251,254],{"type":18,"tag":49,"props":247,"children":248},{},[249],{"type":23,"value":250},"Add Ripple to your Figma account",{"type":18,"tag":176,"props":252,"children":253},{},[],{"type":23,"value":255},"Add the Ripple 2.0 Design System Figma file to your Figma account.",{"type":18,"tag":45,"props":257,"children":258},{},[259,264,267,269,272],{"type":18,"tag":49,"props":260,"children":261},{},[262],{"type":23,"value":263},"Set up Asset Library",{"type":18,"tag":176,"props":265,"children":266},{},[],{"type":23,"value":268},"In your Figma account, go to the Getting Started page.",{"type":18,"tag":176,"props":270,"children":271},{},[],{"type":23,"value":273},"Follow these instructions to set up the Asset Library.",{"title":10,"searchDepth":275,"depth":275,"links":276},2,[277,278],{"id":79,"depth":275,"text":82},{"id":123,"depth":275,"text":126,"children":279},[280],{"id":159,"depth":281,"text":162},3,"markdown","content:design-system:2.design:1.getting-started.md","content","design-system/2.design/1.getting-started.md","md",["ShallowRef",288],["ShallowReactive",289],{"/design-system/design/getting-started":290},[291,298],{"_path":292,"_dir":293,"_draft":9,"_partial":9,"_locale":10,"title":294,"description":295,"layout":13,"_type":282,"_id":296,"_source":284,"_file":297,"_extension":286},"/design-system/about/contributing","about","Contributing","Found an issue?","content:design-system:1.about:4.contributing.md","design-system/1.about/4.contributing.md",{"_path":299,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":300,"description":301,"layout":13,"label":302,"_type":282,"_id":303,"_source":284,"_file":304,"_extension":286},"/design-system/design/our-design-principles","Our design principles","There are 4 design principles that are the foundation of the Ripple Design System.","Core","content:design-system:2.design:2.our-design-principles.md","design-system/2.design/2.our-design-principles.md",["ShallowRef",306],{},[308,313,554],{"title":309,"_path":310,"icon":311,"layout":312},"Ripple Design System","/","carbon:home","home",{"title":314,"_path":315,"children":316},"Design System","/design-system",[317,331,342,372,406],{"title":318,"_path":319,"children":320},"About","/design-system/about",[321,324,327,330],{"title":322,"_path":323,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":325,"_path":326,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":328,"_path":329,"layout":13},"Support","/design-system/about/getting-support",{"title":294,"_path":292,"layout":13},{"title":332,"_path":333,"children":334},"Design","/design-system/design",[335,336,337,339],{"title":11,"_path":7,"layout":13},{"title":300,"_path":299,"layout":13},{"title":100,"_path":338,"layout":13},"/design-system/design/design-tokens",{"title":340,"_path":341,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":343,"_path":344,"children":345},"Develop","/design-system/develop",[346,348,350,353],{"title":11,"_path":347,"layout":13},"/design-system/develop/getting-started",{"title":294,"_path":349,"layout":13},"/design-system/develop/contributing",{"title":351,"_path":352,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":354,"_path":355,"children":356,"layout":13},"Usage","/design-system/develop/usage",[357,360,363,366,369],{"title":358,"_path":359,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":361,"_path":362,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":364,"_path":365,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":367,"_path":368,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":370,"_path":371,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":373,"_path":374,"children":375},"Styles","/design-system/styles",[376,379,382,385,388,391,394,397,400,403],{"title":377,"_path":378,"layout":13},"Colour","/design-system/styles/colour",{"title":380,"_path":381,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":383,"_path":384,"layout":13},"Grid","/design-system/styles/grid",{"title":386,"_path":387,"layout":13},"Icons","/design-system/styles/icons",{"title":389,"_path":390,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":392,"_path":393,"layout":13},"Layout","/design-system/styles/layout",{"title":395,"_path":396,"layout":13},"Logo","/design-system/styles/logo",{"title":398,"_path":399,"layout":13},"Motion","/design-system/styles/motion",{"title":401,"_path":402,"layout":13},"Spacing","/design-system/styles/spacing",{"title":404,"_path":405,"layout":13},"Typography","/design-system/styles/typography",{"title":407,"_path":408,"children":409},"Components","/design-system/components",[410,413,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482,485,488,491,494,497,500,503,506,509,512,515,518,521,524,527,530,533,536,539,542,545,548,551],{"title":411,"_path":412,"layout":13},"Accordion","/design-system/components/accordion",{"title":414,"_path":415,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":417,"_path":418,"layout":13},"Alert","/design-system/components/alert",{"title":420,"_path":421,"layout":13},"Block quote","/design-system/components/block-quote",{"title":423,"_path":424,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":426,"_path":427,"layout":13},"Button","/design-system/components/button",{"title":429,"_path":430,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":432,"_path":433,"layout":13},"Callout","/design-system/components/callout",{"title":435,"_path":436,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":438,"_path":439,"layout":13},"Card","/design-system/components/card",{"title":441,"_path":442,"layout":13},"Carousel","/design-system/components/carousel",{"title":444,"_path":445,"layout":13},"Category grid","/design-system/components/category-grid",{"title":447,"_path":448,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":450,"_path":451,"layout":13},"Chip","/design-system/components/chip",{"title":453,"_path":454,"layout":13},"Contact us","/design-system/components/contact-us",{"title":456,"_path":457,"layout":13},"Date input","/design-system/components/date-input",{"title":459,"_path":460,"layout":13},"Detail list","/design-system/components/detail-list",{"title":462,"_path":463,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":465,"_path":466,"layout":13},"File","/design-system/components/file",{"title":468,"_path":469,"layout":13},"Footer","/design-system/components/footer",{"title":471,"_path":472,"layout":13},"Form","/design-system/components/form",{"title":474,"_path":475,"layout":13},"Form alert","/design-system/components/form-alert",{"title":477,"_path":478,"layout":13},"Header","/design-system/components/header",{"title":480,"_path":481,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":483,"_path":484,"layout":13},"Input field","/design-system/components/input-field",{"title":486,"_path":487,"layout":13},"Key dates","/design-system/components/key-dates",{"title":489,"_path":490,"layout":13},"Media","/design-system/components/media",{"title":492,"_path":493,"layout":13},"Media embed","/design-system/components/media-embed",{"title":495,"_path":496,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":498,"_path":499,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":501,"_path":502,"layout":13},"Option button","/design-system/components/option-button",{"title":504,"_path":505,"layout":13},"Page action","/design-system/components/page-action",{"title":507,"_path":508,"layout":13},"Pagination","/design-system/components/pagination",{"title":510,"_path":511,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":513,"_path":514,"layout":13},"Profile","/design-system/components/profile",{"title":516,"_path":517,"layout":13},"Radio button","/design-system/components/radio-button",{"title":519,"_path":520,"layout":13},"Related links","/design-system/components/related-links",{"title":522,"_path":523,"layout":13},"Results listing","/design-system/components/results-listing",{"title":525,"_path":526,"layout":13},"Search bar","/design-system/components/search-bar",{"title":528,"_path":529,"layout":13},"Skip link","/design-system/components/skip-link",{"title":531,"_path":532,"layout":13},"Social share","/design-system/components/social-share",{"title":534,"_path":535,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":537,"_path":538,"layout":13},"Table","/design-system/components/table",{"title":540,"_path":541,"layout":13},"Tabs","/design-system/components/tabs",{"title":543,"_path":544,"layout":13},"Tag","/design-system/components/tag",{"title":546,"_path":547,"layout":13},"Text area","/design-system/components/text-area",{"title":549,"_path":550,"layout":13},"Timeline","/design-system/components/timeline",{"title":552,"_path":553,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":555,"_path":556,"children":557,"layout":13},"Ripple Framework","/framework",[558,559,577,599],{"title":555,"_path":556,"layout":13},{"title":560,"_path":561,"children":562},"Key Concepts","/framework/key-concepts",[563,565,568,571,574],{"title":364,"_path":564,"layout":13},"/framework/key-concepts/nuxt",{"title":566,"_path":567,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":569,"_path":570,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":572,"_path":573,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":575,"_path":576,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":578,"_path":579,"children":580},"Guides","/framework/guides",[581,584,587,590,593,596],{"title":582,"_path":583,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":585,"_path":586,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":588,"_path":589,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":591,"_path":592,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":594,"_path":595,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":597,"_path":598,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":600,"_path":601,"layout":13},"Core modules","/framework/core-modules",["Reactive",603],["Set"],["Reactive",605],{"module-navigation":12},true,1714695649076]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/design/our-design-principles/_payload.json b/design-system/design/our-design-principles/_payload.json
index 86a2ca3b32..e94980ef4e 100644
--- a/design-system/design/our-design-principles/_payload.json
+++ b/design-system/design/our-design-principles/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,38,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":24,"items":25},"/design-system/design","Design",true,[26,29,32,35],{"id":27,"text":28,"url":27,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":30,"text":31,"url":30,"active":24,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":33,"text":34,"url":33,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":39,"text":40,"url":39,"active":7,"items":41},"/design-system/develop","Develop",[42,44,46,49],{"id":43,"text":28,"url":43,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":7,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":7,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695150856]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,38,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":24,"items":25},"/design-system/design","Design",true,[26,29,32,35],{"id":27,"text":28,"url":27,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":30,"text":31,"url":30,"active":24,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":33,"text":34,"url":33,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":39,"text":40,"url":39,"active":7,"items":41},"/design-system/develop","Develop",[42,44,46,49],{"id":43,"text":28,"url":43,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":7,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":7,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695649105]
\ No newline at end of file
diff --git a/design-system/design/our-design-principles/index.html b/design-system/design/our-design-principles/index.html
index 6bc94ac2a4..091f5e320e 100644
--- a/design-system/design/our-design-principles/index.html
+++ b/design-system/design/our-design-principles/index.html
@@ -22,57 +22,57 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -84,8 +84,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Our design principles</h1><p class="rpl-type-p-large" data-v-3163c6df>There are 4 design principles that are the foundation of the Ripple Design System.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->There are 4 design principles that underpin the Ripple Design System:<!--]--></p><ul><!--[--><li><!--[-->Inclusive.<!--]--></li><li><!--[-->Efficient.<!--]--></li><li><!--[-->Flexible.<!--]--></li><li><!--[-->Easy.<!--]--></li><!--]--></ul><p><!--[-->The Ripple Design System uses these principles when making design decisions.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="inclusive" data-v-fff5b905><a href="#inclusive" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Inclusive<!--]--></a></h2><ul><!--[--><li><!--[-->Accessibility is top priority.<!--]--></li><li><!--[-->Collaborative in design.<!--]--></li><li><!--[-->Transparent documentation.<!--]--></li><li><!--[-->Friendly, helpful and trustworthy.<!--]--></li><!--]--></ul><p><!--[-->Include all users, abilities and backgrounds in the process and design intent.<!--]--></p><p><!--[-->Support best practices, provide guidance and build trust with the community.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="efficient" data-v-fff5b905><a href="#efficient" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Efficient<!--]--></a></h2><ul><!--[--><li><!--[-->Less is more.<!--]--></li><li><!--[-->Clean and clear.<!--]--></li><li><!--[-->Considered.<!--]--></li><li><!--[-->Economic design.<!--]--></li><!--]--></ul><p><!--[-->Think holistically to create considered sustainable outcomes that make sense to all users.<!--]--></p><p><!--[-->Increase efficiencies while reducing complexities and risks.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="flexible" data-v-fff5b905><a href="#flexible" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Flexible<!--]--></a></h2><ul><!--[--><li><!--[-->Responsive to data.<!--]--></li><li><!--[-->Responsive to sub-brands.<!--]--></li><li><!--[-->Considers context.<!--]--></li><li><!--[-->Iterative improvements.<!--]--></li><!--]--></ul><p><!--[-->Use meaningful evidence to improve impact and add value.<!--]--></p><p><!--[-->Find improvement opportunities that elevate the experience for multiple contexts and end users.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="easy" data-v-fff5b905><a href="#easy" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Easy<!--]--></a></h2><p><!--[-->Easy to:<!--]--></p><ul><!--[--><li><!--[-->contribute to<!--]--></li><li><!--[-->learn and understand<!--]--></li><li><!--[-->create and recreate<!--]--></li><li><!--[-->find information.<!--]--></li><!--]--></ul><p><!--[-->Consider the needs and experiences of end users of Victorian digital products.<!--]--></p><p><!--[-->Make the Ripple experience easy to use. Create experiences and contribute to the design system with end users in mind.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/2.design/2.our-design-principles.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/design/our-design-principles/_payload.json">[{"state":1,"once":544,"_errors":546,"serverRendered":548,"path":7,"prerenderedAt":549},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":230,"$sdd-globals":246,"$sdd-navigation":248},["ShallowRef",4],["ShallowReactive",5],{"/design-system/design/our-design-principles":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":225,"_id":226,"_source":227,"_file":228,"_extension":229},"/design-system/design/our-design-principles","design",false,"","Our design principles","There are 4 design principles that are the foundation of the Ripple Design System.","page","Core",{"type":16,"children":17,"toc":218},"root",[18,26,51,56,63,86,91,96,102,125,130,135,141,164,169,174,180,185,208,213],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","There are 4 design principles that underpin the Ripple Design System:",{"type":19,"tag":27,"props":28,"children":29},"ul",{},[30,36,41,46],{"type":19,"tag":31,"props":32,"children":33},"li",{},[34],{"type":24,"value":35},"Inclusive.",{"type":19,"tag":31,"props":37,"children":38},{},[39],{"type":24,"value":40},"Efficient.",{"type":19,"tag":31,"props":42,"children":43},{},[44],{"type":24,"value":45},"Flexible.",{"type":19,"tag":31,"props":47,"children":48},{},[49],{"type":24,"value":50},"Easy.",{"type":19,"tag":20,"props":52,"children":53},{},[54],{"type":24,"value":55},"The Ripple Design System uses these principles when making design decisions.",{"type":19,"tag":57,"props":58,"children":60},"h2",{"id":59},"inclusive",[61],{"type":24,"value":62},"Inclusive",{"type":19,"tag":27,"props":64,"children":65},{},[66,71,76,81],{"type":19,"tag":31,"props":67,"children":68},{},[69],{"type":24,"value":70},"Accessibility is top priority.",{"type":19,"tag":31,"props":72,"children":73},{},[74],{"type":24,"value":75},"Collaborative in design.",{"type":19,"tag":31,"props":77,"children":78},{},[79],{"type":24,"value":80},"Transparent documentation.",{"type":19,"tag":31,"props":82,"children":83},{},[84],{"type":24,"value":85},"Friendly, helpful and trustworthy.",{"type":19,"tag":20,"props":87,"children":88},{},[89],{"type":24,"value":90},"Include all users, abilities and backgrounds in the process and design intent.",{"type":19,"tag":20,"props":92,"children":93},{},[94],{"type":24,"value":95},"Support best practices, provide guidance and build trust with the community.",{"type":19,"tag":57,"props":97,"children":99},{"id":98},"efficient",[100],{"type":24,"value":101},"Efficient",{"type":19,"tag":27,"props":103,"children":104},{},[105,110,115,120],{"type":19,"tag":31,"props":106,"children":107},{},[108],{"type":24,"value":109},"Less is more.",{"type":19,"tag":31,"props":111,"children":112},{},[113],{"type":24,"value":114},"Clean and clear.",{"type":19,"tag":31,"props":116,"children":117},{},[118],{"type":24,"value":119},"Considered.",{"type":19,"tag":31,"props":121,"children":122},{},[123],{"type":24,"value":124},"Economic design.",{"type":19,"tag":20,"props":126,"children":127},{},[128],{"type":24,"value":129},"Think holistically to create considered sustainable outcomes that make sense to all users.",{"type":19,"tag":20,"props":131,"children":132},{},[133],{"type":24,"value":134},"Increase efficiencies while reducing complexities and risks.",{"type":19,"tag":57,"props":136,"children":138},{"id":137},"flexible",[139],{"type":24,"value":140},"Flexible",{"type":19,"tag":27,"props":142,"children":143},{},[144,149,154,159],{"type":19,"tag":31,"props":145,"children":146},{},[147],{"type":24,"value":148},"Responsive to data.",{"type":19,"tag":31,"props":150,"children":151},{},[152],{"type":24,"value":153},"Responsive to sub-brands.",{"type":19,"tag":31,"props":155,"children":156},{},[157],{"type":24,"value":158},"Considers context.",{"type":19,"tag":31,"props":160,"children":161},{},[162],{"type":24,"value":163},"Iterative improvements.",{"type":19,"tag":20,"props":165,"children":166},{},[167],{"type":24,"value":168},"Use meaningful evidence to improve impact and add value.",{"type":19,"tag":20,"props":170,"children":171},{},[172],{"type":24,"value":173},"Find improvement opportunities that elevate the experience for multiple contexts and end users.",{"type":19,"tag":57,"props":175,"children":177},{"id":176},"easy",[178],{"type":24,"value":179},"Easy",{"type":19,"tag":20,"props":181,"children":182},{},[183],{"type":24,"value":184},"Easy to:",{"type":19,"tag":27,"props":186,"children":187},{},[188,193,198,203],{"type":19,"tag":31,"props":189,"children":190},{},[191],{"type":24,"value":192},"contribute to",{"type":19,"tag":31,"props":194,"children":195},{},[196],{"type":24,"value":197},"learn and understand",{"type":19,"tag":31,"props":199,"children":200},{},[201],{"type":24,"value":202},"create and recreate",{"type":19,"tag":31,"props":204,"children":205},{},[206],{"type":24,"value":207},"find information.",{"type":19,"tag":20,"props":209,"children":210},{},[211],{"type":24,"value":212},"Consider the needs and experiences of end users of Victorian digital products.",{"type":19,"tag":20,"props":214,"children":215},{},[216],{"type":24,"value":217},"Make the Ripple experience easy to use. Create experiences and contribute to the design system with end users in mind.",{"title":10,"searchDepth":219,"depth":219,"links":220},2,[221,222,223,224],{"id":59,"depth":219,"text":62},{"id":98,"depth":219,"text":101},{"id":137,"depth":219,"text":140},{"id":176,"depth":219,"text":179},"markdown","content:design-system:2.design:2.our-design-principles.md","content","design-system/2.design/2.our-design-principles.md","md",["ShallowRef",231],["ShallowReactive",232],{"/design-system/design/our-design-principles":233},[234,240],{"_path":235,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":236,"description":237,"layout":13,"_type":225,"_id":238,"_source":227,"_file":239,"_extension":229},"/design-system/design/getting-started","Getting started",null,"content:design-system:2.design:1.getting-started.md","design-system/2.design/1.getting-started.md",{"_path":241,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":242,"description":243,"layout":13,"label":14,"_type":225,"_id":244,"_source":227,"_file":245,"_extension":229},"/design-system/design/design-tokens","Design tokens","Design tokens store our design decisions in the Ripple Design System. They are the single source of truth.","content:design-system:2.design:3.design-tokens.md","design-system/2.design/3.design-tokens.md",["ShallowRef",247],{},[249,254,496],{"title":250,"_path":251,"icon":252,"layout":253},"Ripple Design System","/","carbon:home","home",{"title":255,"_path":256,"children":257},"Design System","/design-system",[258,274,284,314,348],{"title":259,"_path":260,"children":261},"About","/design-system/about",[262,265,268,271],{"title":263,"_path":264,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":266,"_path":267,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":269,"_path":270,"layout":13},"Support","/design-system/about/getting-support",{"title":272,"_path":273,"layout":13},"Contributing","/design-system/about/contributing",{"title":275,"_path":276,"children":277},"Design","/design-system/design",[278,279,280,281],{"title":236,"_path":235,"layout":13},{"title":11,"_path":7,"layout":13},{"title":242,"_path":241,"layout":13},{"title":282,"_path":283,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":285,"_path":286,"children":287},"Develop","/design-system/develop",[288,290,292,295],{"title":236,"_path":289,"layout":13},"/design-system/develop/getting-started",{"title":272,"_path":291,"layout":13},"/design-system/develop/contributing",{"title":293,"_path":294,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":296,"_path":297,"children":298,"layout":13},"Usage","/design-system/develop/usage",[299,302,305,308,311],{"title":300,"_path":301,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":303,"_path":304,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":306,"_path":307,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":309,"_path":310,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":312,"_path":313,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":315,"_path":316,"children":317},"Styles","/design-system/styles",[318,321,324,327,330,333,336,339,342,345],{"title":319,"_path":320,"layout":13},"Colour","/design-system/styles/colour",{"title":322,"_path":323,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":325,"_path":326,"layout":13},"Grid","/design-system/styles/grid",{"title":328,"_path":329,"layout":13},"Icons","/design-system/styles/icons",{"title":331,"_path":332,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":334,"_path":335,"layout":13},"Layout","/design-system/styles/layout",{"title":337,"_path":338,"layout":13},"Logo","/design-system/styles/logo",{"title":340,"_path":341,"layout":13},"Motion","/design-system/styles/motion",{"title":343,"_path":344,"layout":13},"Spacing","/design-system/styles/spacing",{"title":346,"_path":347,"layout":13},"Typography","/design-system/styles/typography",{"title":349,"_path":350,"children":351},"Components","/design-system/components",[352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,490,493],{"title":353,"_path":354,"layout":13},"Accordion","/design-system/components/accordion",{"title":356,"_path":357,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":359,"_path":360,"layout":13},"Alert","/design-system/components/alert",{"title":362,"_path":363,"layout":13},"Block quote","/design-system/components/block-quote",{"title":365,"_path":366,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":368,"_path":369,"layout":13},"Button","/design-system/components/button",{"title":371,"_path":372,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":374,"_path":375,"layout":13},"Callout","/design-system/components/callout",{"title":377,"_path":378,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":380,"_path":381,"layout":13},"Card","/design-system/components/card",{"title":383,"_path":384,"layout":13},"Carousel","/design-system/components/carousel",{"title":386,"_path":387,"layout":13},"Category grid","/design-system/components/category-grid",{"title":389,"_path":390,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":392,"_path":393,"layout":13},"Chip","/design-system/components/chip",{"title":395,"_path":396,"layout":13},"Contact us","/design-system/components/contact-us",{"title":398,"_path":399,"layout":13},"Date input","/design-system/components/date-input",{"title":401,"_path":402,"layout":13},"Detail list","/design-system/components/detail-list",{"title":404,"_path":405,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":407,"_path":408,"layout":13},"File","/design-system/components/file",{"title":410,"_path":411,"layout":13},"Footer","/design-system/components/footer",{"title":413,"_path":414,"layout":13},"Form","/design-system/components/form",{"title":416,"_path":417,"layout":13},"Form alert","/design-system/components/form-alert",{"title":419,"_path":420,"layout":13},"Header","/design-system/components/header",{"title":422,"_path":423,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":425,"_path":426,"layout":13},"Input field","/design-system/components/input-field",{"title":428,"_path":429,"layout":13},"Key dates","/design-system/components/key-dates",{"title":431,"_path":432,"layout":13},"Media","/design-system/components/media",{"title":434,"_path":435,"layout":13},"Media embed","/design-system/components/media-embed",{"title":437,"_path":438,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":440,"_path":441,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":443,"_path":444,"layout":13},"Option button","/design-system/components/option-button",{"title":446,"_path":447,"layout":13},"Page action","/design-system/components/page-action",{"title":449,"_path":450,"layout":13},"Pagination","/design-system/components/pagination",{"title":452,"_path":453,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":455,"_path":456,"layout":13},"Profile","/design-system/components/profile",{"title":458,"_path":459,"layout":13},"Radio button","/design-system/components/radio-button",{"title":461,"_path":462,"layout":13},"Related links","/design-system/components/related-links",{"title":464,"_path":465,"layout":13},"Results listing","/design-system/components/results-listing",{"title":467,"_path":468,"layout":13},"Search bar","/design-system/components/search-bar",{"title":470,"_path":471,"layout":13},"Skip link","/design-system/components/skip-link",{"title":473,"_path":474,"layout":13},"Social share","/design-system/components/social-share",{"title":476,"_path":477,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":479,"_path":480,"layout":13},"Table","/design-system/components/table",{"title":482,"_path":483,"layout":13},"Tabs","/design-system/components/tabs",{"title":485,"_path":486,"layout":13},"Tag","/design-system/components/tag",{"title":488,"_path":489,"layout":13},"Text area","/design-system/components/text-area",{"title":491,"_path":492,"layout":13},"Timeline","/design-system/components/timeline",{"title":494,"_path":495,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":497,"_path":498,"children":499,"layout":13},"Ripple Framework","/framework",[500,501,519,541],{"title":497,"_path":498,"layout":13},{"title":502,"_path":503,"children":504},"Key Concepts","/framework/key-concepts",[505,507,510,513,516],{"title":306,"_path":506,"layout":13},"/framework/key-concepts/nuxt",{"title":508,"_path":509,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":511,"_path":512,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":514,"_path":515,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":517,"_path":518,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":520,"_path":521,"children":522},"Guides","/framework/guides",[523,526,529,532,535,538],{"title":524,"_path":525,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":527,"_path":528,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":530,"_path":531,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":533,"_path":534,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":536,"_path":537,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":539,"_path":540,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":542,"_path":543,"layout":13},"Core modules","/framework/core-modules",["Reactive",545],["Set"],["Reactive",547],{"module-navigation":237},true,1714695150856]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Our design principles</h1><p class="rpl-type-p-large" data-v-3163c6df>There are 4 design principles that are the foundation of the Ripple Design System.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->There are 4 design principles that underpin the Ripple Design System:<!--]--></p><ul><!--[--><li><!--[-->Inclusive.<!--]--></li><li><!--[-->Efficient.<!--]--></li><li><!--[-->Flexible.<!--]--></li><li><!--[-->Easy.<!--]--></li><!--]--></ul><p><!--[-->The Ripple Design System uses these principles when making design decisions.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="inclusive" data-v-fff5b905><a href="#inclusive" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Inclusive<!--]--></a></h2><ul><!--[--><li><!--[-->Accessibility is top priority.<!--]--></li><li><!--[-->Collaborative in design.<!--]--></li><li><!--[-->Transparent documentation.<!--]--></li><li><!--[-->Friendly, helpful and trustworthy.<!--]--></li><!--]--></ul><p><!--[-->Include all users, abilities and backgrounds in the process and design intent.<!--]--></p><p><!--[-->Support best practices, provide guidance and build trust with the community.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="efficient" data-v-fff5b905><a href="#efficient" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Efficient<!--]--></a></h2><ul><!--[--><li><!--[-->Less is more.<!--]--></li><li><!--[-->Clean and clear.<!--]--></li><li><!--[-->Considered.<!--]--></li><li><!--[-->Economic design.<!--]--></li><!--]--></ul><p><!--[-->Think holistically to create considered sustainable outcomes that make sense to all users.<!--]--></p><p><!--[-->Increase efficiencies while reducing complexities and risks.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="flexible" data-v-fff5b905><a href="#flexible" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Flexible<!--]--></a></h2><ul><!--[--><li><!--[-->Responsive to data.<!--]--></li><li><!--[-->Responsive to sub-brands.<!--]--></li><li><!--[-->Considers context.<!--]--></li><li><!--[-->Iterative improvements.<!--]--></li><!--]--></ul><p><!--[-->Use meaningful evidence to improve impact and add value.<!--]--></p><p><!--[-->Find improvement opportunities that elevate the experience for multiple contexts and end users.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="easy" data-v-fff5b905><a href="#easy" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Easy<!--]--></a></h2><p><!--[-->Easy to:<!--]--></p><ul><!--[--><li><!--[-->contribute to<!--]--></li><li><!--[-->learn and understand<!--]--></li><li><!--[-->create and recreate<!--]--></li><li><!--[-->find information.<!--]--></li><!--]--></ul><p><!--[-->Consider the needs and experiences of end users of Victorian digital products.<!--]--></p><p><!--[-->Make the Ripple experience easy to use. Create experiences and contribute to the design system with end users in mind.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/2.design/2.our-design-principles.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/design/our-design-principles/_payload.json">[{"state":1,"once":544,"_errors":546,"serverRendered":548,"path":7,"prerenderedAt":549},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":230,"$sdd-globals":246,"$sdd-navigation":248},["ShallowRef",4],["ShallowReactive",5],{"/design-system/design/our-design-principles":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":225,"_id":226,"_source":227,"_file":228,"_extension":229},"/design-system/design/our-design-principles","design",false,"","Our design principles","There are 4 design principles that are the foundation of the Ripple Design System.","page","Core",{"type":16,"children":17,"toc":218},"root",[18,26,51,56,63,86,91,96,102,125,130,135,141,164,169,174,180,185,208,213],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","There are 4 design principles that underpin the Ripple Design System:",{"type":19,"tag":27,"props":28,"children":29},"ul",{},[30,36,41,46],{"type":19,"tag":31,"props":32,"children":33},"li",{},[34],{"type":24,"value":35},"Inclusive.",{"type":19,"tag":31,"props":37,"children":38},{},[39],{"type":24,"value":40},"Efficient.",{"type":19,"tag":31,"props":42,"children":43},{},[44],{"type":24,"value":45},"Flexible.",{"type":19,"tag":31,"props":47,"children":48},{},[49],{"type":24,"value":50},"Easy.",{"type":19,"tag":20,"props":52,"children":53},{},[54],{"type":24,"value":55},"The Ripple Design System uses these principles when making design decisions.",{"type":19,"tag":57,"props":58,"children":60},"h2",{"id":59},"inclusive",[61],{"type":24,"value":62},"Inclusive",{"type":19,"tag":27,"props":64,"children":65},{},[66,71,76,81],{"type":19,"tag":31,"props":67,"children":68},{},[69],{"type":24,"value":70},"Accessibility is top priority.",{"type":19,"tag":31,"props":72,"children":73},{},[74],{"type":24,"value":75},"Collaborative in design.",{"type":19,"tag":31,"props":77,"children":78},{},[79],{"type":24,"value":80},"Transparent documentation.",{"type":19,"tag":31,"props":82,"children":83},{},[84],{"type":24,"value":85},"Friendly, helpful and trustworthy.",{"type":19,"tag":20,"props":87,"children":88},{},[89],{"type":24,"value":90},"Include all users, abilities and backgrounds in the process and design intent.",{"type":19,"tag":20,"props":92,"children":93},{},[94],{"type":24,"value":95},"Support best practices, provide guidance and build trust with the community.",{"type":19,"tag":57,"props":97,"children":99},{"id":98},"efficient",[100],{"type":24,"value":101},"Efficient",{"type":19,"tag":27,"props":103,"children":104},{},[105,110,115,120],{"type":19,"tag":31,"props":106,"children":107},{},[108],{"type":24,"value":109},"Less is more.",{"type":19,"tag":31,"props":111,"children":112},{},[113],{"type":24,"value":114},"Clean and clear.",{"type":19,"tag":31,"props":116,"children":117},{},[118],{"type":24,"value":119},"Considered.",{"type":19,"tag":31,"props":121,"children":122},{},[123],{"type":24,"value":124},"Economic design.",{"type":19,"tag":20,"props":126,"children":127},{},[128],{"type":24,"value":129},"Think holistically to create considered sustainable outcomes that make sense to all users.",{"type":19,"tag":20,"props":131,"children":132},{},[133],{"type":24,"value":134},"Increase efficiencies while reducing complexities and risks.",{"type":19,"tag":57,"props":136,"children":138},{"id":137},"flexible",[139],{"type":24,"value":140},"Flexible",{"type":19,"tag":27,"props":142,"children":143},{},[144,149,154,159],{"type":19,"tag":31,"props":145,"children":146},{},[147],{"type":24,"value":148},"Responsive to data.",{"type":19,"tag":31,"props":150,"children":151},{},[152],{"type":24,"value":153},"Responsive to sub-brands.",{"type":19,"tag":31,"props":155,"children":156},{},[157],{"type":24,"value":158},"Considers context.",{"type":19,"tag":31,"props":160,"children":161},{},[162],{"type":24,"value":163},"Iterative improvements.",{"type":19,"tag":20,"props":165,"children":166},{},[167],{"type":24,"value":168},"Use meaningful evidence to improve impact and add value.",{"type":19,"tag":20,"props":170,"children":171},{},[172],{"type":24,"value":173},"Find improvement opportunities that elevate the experience for multiple contexts and end users.",{"type":19,"tag":57,"props":175,"children":177},{"id":176},"easy",[178],{"type":24,"value":179},"Easy",{"type":19,"tag":20,"props":181,"children":182},{},[183],{"type":24,"value":184},"Easy to:",{"type":19,"tag":27,"props":186,"children":187},{},[188,193,198,203],{"type":19,"tag":31,"props":189,"children":190},{},[191],{"type":24,"value":192},"contribute to",{"type":19,"tag":31,"props":194,"children":195},{},[196],{"type":24,"value":197},"learn and understand",{"type":19,"tag":31,"props":199,"children":200},{},[201],{"type":24,"value":202},"create and recreate",{"type":19,"tag":31,"props":204,"children":205},{},[206],{"type":24,"value":207},"find information.",{"type":19,"tag":20,"props":209,"children":210},{},[211],{"type":24,"value":212},"Consider the needs and experiences of end users of Victorian digital products.",{"type":19,"tag":20,"props":214,"children":215},{},[216],{"type":24,"value":217},"Make the Ripple experience easy to use. Create experiences and contribute to the design system with end users in mind.",{"title":10,"searchDepth":219,"depth":219,"links":220},2,[221,222,223,224],{"id":59,"depth":219,"text":62},{"id":98,"depth":219,"text":101},{"id":137,"depth":219,"text":140},{"id":176,"depth":219,"text":179},"markdown","content:design-system:2.design:2.our-design-principles.md","content","design-system/2.design/2.our-design-principles.md","md",["ShallowRef",231],["ShallowReactive",232],{"/design-system/design/our-design-principles":233},[234,240],{"_path":235,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":236,"description":237,"layout":13,"_type":225,"_id":238,"_source":227,"_file":239,"_extension":229},"/design-system/design/getting-started","Getting started",null,"content:design-system:2.design:1.getting-started.md","design-system/2.design/1.getting-started.md",{"_path":241,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":242,"description":243,"layout":13,"label":14,"_type":225,"_id":244,"_source":227,"_file":245,"_extension":229},"/design-system/design/design-tokens","Design tokens","Design tokens store our design decisions in the Ripple Design System. They are the single source of truth.","content:design-system:2.design:3.design-tokens.md","design-system/2.design/3.design-tokens.md",["ShallowRef",247],{},[249,254,496],{"title":250,"_path":251,"icon":252,"layout":253},"Ripple Design System","/","carbon:home","home",{"title":255,"_path":256,"children":257},"Design System","/design-system",[258,274,284,314,348],{"title":259,"_path":260,"children":261},"About","/design-system/about",[262,265,268,271],{"title":263,"_path":264,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":266,"_path":267,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":269,"_path":270,"layout":13},"Support","/design-system/about/getting-support",{"title":272,"_path":273,"layout":13},"Contributing","/design-system/about/contributing",{"title":275,"_path":276,"children":277},"Design","/design-system/design",[278,279,280,281],{"title":236,"_path":235,"layout":13},{"title":11,"_path":7,"layout":13},{"title":242,"_path":241,"layout":13},{"title":282,"_path":283,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":285,"_path":286,"children":287},"Develop","/design-system/develop",[288,290,292,295],{"title":236,"_path":289,"layout":13},"/design-system/develop/getting-started",{"title":272,"_path":291,"layout":13},"/design-system/develop/contributing",{"title":293,"_path":294,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":296,"_path":297,"children":298,"layout":13},"Usage","/design-system/develop/usage",[299,302,305,308,311],{"title":300,"_path":301,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":303,"_path":304,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":306,"_path":307,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":309,"_path":310,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":312,"_path":313,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":315,"_path":316,"children":317},"Styles","/design-system/styles",[318,321,324,327,330,333,336,339,342,345],{"title":319,"_path":320,"layout":13},"Colour","/design-system/styles/colour",{"title":322,"_path":323,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":325,"_path":326,"layout":13},"Grid","/design-system/styles/grid",{"title":328,"_path":329,"layout":13},"Icons","/design-system/styles/icons",{"title":331,"_path":332,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":334,"_path":335,"layout":13},"Layout","/design-system/styles/layout",{"title":337,"_path":338,"layout":13},"Logo","/design-system/styles/logo",{"title":340,"_path":341,"layout":13},"Motion","/design-system/styles/motion",{"title":343,"_path":344,"layout":13},"Spacing","/design-system/styles/spacing",{"title":346,"_path":347,"layout":13},"Typography","/design-system/styles/typography",{"title":349,"_path":350,"children":351},"Components","/design-system/components",[352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,490,493],{"title":353,"_path":354,"layout":13},"Accordion","/design-system/components/accordion",{"title":356,"_path":357,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":359,"_path":360,"layout":13},"Alert","/design-system/components/alert",{"title":362,"_path":363,"layout":13},"Block quote","/design-system/components/block-quote",{"title":365,"_path":366,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":368,"_path":369,"layout":13},"Button","/design-system/components/button",{"title":371,"_path":372,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":374,"_path":375,"layout":13},"Callout","/design-system/components/callout",{"title":377,"_path":378,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":380,"_path":381,"layout":13},"Card","/design-system/components/card",{"title":383,"_path":384,"layout":13},"Carousel","/design-system/components/carousel",{"title":386,"_path":387,"layout":13},"Category grid","/design-system/components/category-grid",{"title":389,"_path":390,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":392,"_path":393,"layout":13},"Chip","/design-system/components/chip",{"title":395,"_path":396,"layout":13},"Contact us","/design-system/components/contact-us",{"title":398,"_path":399,"layout":13},"Date input","/design-system/components/date-input",{"title":401,"_path":402,"layout":13},"Detail list","/design-system/components/detail-list",{"title":404,"_path":405,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":407,"_path":408,"layout":13},"File","/design-system/components/file",{"title":410,"_path":411,"layout":13},"Footer","/design-system/components/footer",{"title":413,"_path":414,"layout":13},"Form","/design-system/components/form",{"title":416,"_path":417,"layout":13},"Form alert","/design-system/components/form-alert",{"title":419,"_path":420,"layout":13},"Header","/design-system/components/header",{"title":422,"_path":423,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":425,"_path":426,"layout":13},"Input field","/design-system/components/input-field",{"title":428,"_path":429,"layout":13},"Key dates","/design-system/components/key-dates",{"title":431,"_path":432,"layout":13},"Media","/design-system/components/media",{"title":434,"_path":435,"layout":13},"Media embed","/design-system/components/media-embed",{"title":437,"_path":438,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":440,"_path":441,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":443,"_path":444,"layout":13},"Option button","/design-system/components/option-button",{"title":446,"_path":447,"layout":13},"Page action","/design-system/components/page-action",{"title":449,"_path":450,"layout":13},"Pagination","/design-system/components/pagination",{"title":452,"_path":453,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":455,"_path":456,"layout":13},"Profile","/design-system/components/profile",{"title":458,"_path":459,"layout":13},"Radio button","/design-system/components/radio-button",{"title":461,"_path":462,"layout":13},"Related links","/design-system/components/related-links",{"title":464,"_path":465,"layout":13},"Results listing","/design-system/components/results-listing",{"title":467,"_path":468,"layout":13},"Search bar","/design-system/components/search-bar",{"title":470,"_path":471,"layout":13},"Skip link","/design-system/components/skip-link",{"title":473,"_path":474,"layout":13},"Social share","/design-system/components/social-share",{"title":476,"_path":477,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":479,"_path":480,"layout":13},"Table","/design-system/components/table",{"title":482,"_path":483,"layout":13},"Tabs","/design-system/components/tabs",{"title":485,"_path":486,"layout":13},"Tag","/design-system/components/tag",{"title":488,"_path":489,"layout":13},"Text area","/design-system/components/text-area",{"title":491,"_path":492,"layout":13},"Timeline","/design-system/components/timeline",{"title":494,"_path":495,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":497,"_path":498,"children":499,"layout":13},"Ripple Framework","/framework",[500,501,519,541],{"title":497,"_path":498,"layout":13},{"title":502,"_path":503,"children":504},"Key Concepts","/framework/key-concepts",[505,507,510,513,516],{"title":306,"_path":506,"layout":13},"/framework/key-concepts/nuxt",{"title":508,"_path":509,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":511,"_path":512,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":514,"_path":515,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":517,"_path":518,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":520,"_path":521,"children":522},"Guides","/framework/guides",[523,526,529,532,535,538],{"title":524,"_path":525,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":527,"_path":528,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":530,"_path":531,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":533,"_path":534,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":536,"_path":537,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":539,"_path":540,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":542,"_path":543,"layout":13},"Core modules","/framework/core-modules",["Reactive",545],["Set"],["Reactive",547],{"module-navigation":237},true,1714695649105]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/design/theming-guidance-for-designers/_payload.json b/design-system/design/theming-guidance-for-designers/_payload.json
index 99a18676f9..c9b556c3f4 100644
--- a/design-system/design/theming-guidance-for-designers/_payload.json
+++ b/design-system/design/theming-guidance-for-designers/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,38,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":24,"items":25},"/design-system/design","Design",true,[26,29,32,35],{"id":27,"text":28,"url":27,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":30,"text":31,"url":30,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":33,"text":34,"url":33,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":39,"text":40,"url":39,"active":7,"items":41},"/design-system/develop","Develop",[42,44,46,49],{"id":43,"text":28,"url":43,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":7,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":7,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695155446]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,38,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":24,"items":25},"/design-system/design","Design",true,[26,29,32,35],{"id":27,"text":28,"url":27,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":30,"text":31,"url":30,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":33,"text":34,"url":33,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":39,"text":40,"url":39,"active":7,"items":41},"/design-system/develop","Develop",[42,44,46,49],{"id":43,"text":28,"url":43,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":7,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":7,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695653515]
\ No newline at end of file
diff --git a/design-system/design/theming-guidance-for-designers/index.html b/design-system/design/theming-guidance-for-designers/index.html
index 0c1751a9c8..a6e98bf66c 100644
--- a/design-system/design/theming-guidance-for-designers/index.html
+++ b/design-system/design/theming-guidance-for-designers/index.html
@@ -23,69 +23,69 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.lp_k9Hpd.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTable.Nr-94ppo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseThead.x0xD32yi.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTr.NjbdsN4h.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTh.15m2hyNr.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTbody.pO4HZmMb.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTd.KWvY0UVz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.CwUV-MIb.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseEm.D-92YCoe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.Czpq-HHw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTable.d8cdIzif.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseThead.alimbSyj.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTr.rCUlpnCA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTh.GnFrmIgb.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTbody.FPzd5AuU.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTd.ydAecYY-.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.gK7ORMEc.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseEm.jWeQl8xp.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -315,8 +315,8 @@
 
 
 
-<div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Token<!--]--></th><th><!--[-->Gradient<!--]--></th><th><!--[-->Accent<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->rpl-clr-gradient-horizontal<!--]--></td><td><!--[-->rpl-clr-gradient (90 degrees)<!--]--></td><td><!--[-->rpl-clr-accent<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-gradient-vertical<!--]--></td><td><!--[-->rpl-clr-gradient (180 degrees)<!--]--></td><td><!--[-->rpl-clr-accent<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/2.design/4.theming-guidance-for-designers.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/design/theming-guidance-for-designers/_payload.json">[{"state":1,"once":1594,"_errors":1596,"serverRendered":1598,"path":1599,"prerenderedAt":1600},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":1272,"$sdd-globals":1296,"$sdd-navigation":1298},["ShallowRef",4],["ShallowReactive",5],{"/design-system/design/theming-guidance-for-designers":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":1267,"_id":1268,"_source":1269,"_file":1270,"_extension":1271},"/design-system/design/theming-guidance-for-designers","design",false,"","Theming guidance for designers",null,"page","Core",{"type":16,"children":17,"toc":1246},"root",[18,26,73,77,82,87,92,97,102,107,110,116,121,126,131,144,168,173,178,191,204,207,212,217,222,235,241,246,264,269,275,280,285,296,299,304,318,323,328,410,416,429,434,439,452,457,475,488,491,497,502,507,520,525,527,664,670,672,768,774,785,787,857,860,866,871,884,890,897,899,1005,1011,1013,1052,1058,1059,1098,1104,1106,1168,1174,1179,1184,1189,1190],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","Jump to:",{"type":19,"tag":27,"props":28,"children":29},"ul",{},[30,43,53,63],{"type":19,"tag":31,"props":32,"children":33},"li",{},[34,41],{"type":19,"tag":35,"props":36,"children":38},"a",{"href":37},"/design-system/design/theming-guidance-for-designers/#create-a-custom-theme",[39],{"type":24,"value":40},"Create a custom theme",{"type":24,"value":42},".",{"type":19,"tag":31,"props":44,"children":45},{},[46,52],{"type":19,"tag":35,"props":47,"children":49},{"href":48},"/design-system/design/theming-guidance-for-designers/#component-specific-theming",[50],{"type":24,"value":51},"Component-specific theming",{"type":24,"value":42},{"type":19,"tag":31,"props":54,"children":55},{},[56,62],{"type":19,"tag":35,"props":57,"children":59},{"href":58},"/design-system/design/theming-guidance-for-designers/#theme-accessibility",[60],{"type":24,"value":61},"Theme accessibility",{"type":24,"value":42},{"type":19,"tag":31,"props":64,"children":65},{},[66,72],{"type":19,"tag":35,"props":67,"children":69},{"href":68},"/design-system/design/theming-guidance-for-designers/#automatic-colour-token-logic",[70],{"type":24,"value":71},"Automatic colour token logic",{"type":24,"value":42},{"type":19,"tag":74,"props":75,"children":76},"hr",{},[],{"type":19,"tag":20,"props":78,"children":79},{},[80],{"type":24,"value":81},"Ripple 2.0 has been designed with in-built custom theming capabilities. Theming can be applied if your site requires department or entity branding and has been approved to use theming. Please note it is recommend you utilise the brand equity of vic.gov.au where possible and only theme your site if needed and approved. Please contact the SDP team for more information on approvals for theming.",{"type":19,"tag":20,"props":83,"children":84},{},[85],{"type":24,"value":86},"Ripple uses primary and accent colours, an optional gradient, a link colour and a focus state colour. You can read more about their roles and uses in the colour documentation.",{"type":19,"tag":20,"props":88,"children":89},{},[90],{"type":24,"value":91},"When theming your site, its styles and components will re-theme automatically. This has been done through the use of design tokens. Design tokens represent repeated design decisions that make up a design system's visual style. Tokens replace static values, such as hex codes for colour. The token informs how colour is used and inherited to ensure a consistent and accessible user experience.",{"type":19,"tag":20,"props":93,"children":94},{},[95],{"type":24,"value":96},"We’ve designed a colour testing process so the selected colours will pass the accessibility contrast ratios. It classifies the selected colours into a ‘light’ or ‘dark’ category. The colour system will then automatically provide accessible colour contrast.",{"type":19,"tag":20,"props":98,"children":99},{},[100],{"type":24,"value":101},"We have aimed to conform to the Web Content Accessibility Guideline (WCAG) requirements, but we recommend you perform your own accessibility checks where possible to ensure the guidelines are being met.",{"type":19,"tag":20,"props":103,"children":104},{},[105],{"type":24,"value":106},"To learn more about if your site should be themed, please contact the Single Digital Presence (SDP) team.",{"type":19,"tag":74,"props":108,"children":109},{},[],{"type":19,"tag":111,"props":112,"children":114},"h2",{"id":113},"create-a-custom-theme",[115],{"type":24,"value":40},{"type":19,"tag":20,"props":117,"children":118},{},[119],{"type":24,"value":120},"Ripple has been designed with a primary and accent colour. These inform the colour framework.",{"type":19,"tag":20,"props":122,"children":123},{},[124],{"type":24,"value":125},"A link colour, focus colour and optional gradient are also required when theming.",{"type":19,"tag":20,"props":127,"children":128},{},[129],{"type":24,"value":130},"The primary, accent and focus colours can be either light or dark:",{"type":19,"tag":27,"props":132,"children":133},{},[134,139],{"type":19,"tag":31,"props":135,"children":136},{},[137],{"type":24,"value":138},"'Light' means the colour is WCAG 2.1 AA compliant with dark type (rpl-clr-dark / #1A1A1A).",{"type":19,"tag":31,"props":140,"children":141},{},[142],{"type":24,"value":143},"‘Dark’ means the colour is WCAG 2.1 AA compliant with light type (rpl-clr-light / #FFFFFF).",{"type":19,"tag":20,"props":145,"children":146},{},[147,149,157,159,166],{"type":24,"value":148},"To classify your colour as light or dark, we recommend the use ",{"type":19,"tag":35,"props":150,"children":154},{"href":151,"rel":152},"https://webaim.org/resources/contrastchecker/",[153],"nofollow",[155],{"type":24,"value":156},"WebAim Colour Contrast Checker",{"type":24,"value":158}," or the ",{"type":19,"tag":35,"props":160,"children":163},{"href":161,"rel":162},"https://www.figma.com/community/plugin/733159460536249875",[153],[164],{"type":24,"value":165},"Figma plugin, A11y - Colour Contrast Checker",{"type":24,"value":167}," to see if the colour is accessible with the Ripple 2.0 dark or light type colours listed above.",{"type":19,"tag":20,"props":169,"children":170},{},[171],{"type":24,"value":172},"Classifying colours as either ‘dark’ or ‘light’ informs the implementation of other colour tokens, aiming to conform to WCAG 2.1 AA colour contrast requirements.",{"type":19,"tag":20,"props":174,"children":175},{},[176],{"type":24,"value":177},"It is recommended that the primary colour is always visually darker than the accent and is visually different at glance. This will ensure your users are quickly and easily directed to the most important areas of a web page.",{"type":19,"tag":20,"props":179,"children":180},{},[181,183,190],{"type":24,"value":182},"Guidance for creating your own theme can be found on the Theming page of the ",{"type":19,"tag":35,"props":184,"children":187},{"href":185,"rel":186},"https://www.figma.com/file/mgPlLh5IFKAkDoSID9Vpi1/Ripple-2.0?type=design&node-id=9557%3A70609&t=dK1cmsWLfSmpr9Ff-1",[153],[188],{"type":24,"value":189},"Ripple 2.0 Design System Figma file",{"type":24,"value":42},{"type":19,"tag":20,"props":192,"children":193},{},[194,196,203],{"type":24,"value":195},"If you don’t have access, you can ",{"type":19,"tag":35,"props":197,"children":200},{"href":198,"rel":199},"https://www.vic.gov.au/ripple-design-system",[153],[201],{"type":24,"value":202},"request access to view the Ripple 2.0 Design System",{"type":24,"value":42},{"type":19,"tag":74,"props":205,"children":206},{},[],{"type":19,"tag":111,"props":208,"children":210},{"id":209},"component-specific-theming",[211],{"type":24,"value":51},{"type":19,"tag":20,"props":213,"children":214},{},[215],{"type":24,"value":216},"The Ripple 2.0 Design System has components that allow for specific theming. This is optional and if not used, components will adopt the default framework styling. Component-specific theming is defined at a site level, and will affect all instances of the component.",{"type":19,"tag":20,"props":218,"children":219},{},[220],{"type":24,"value":221},"There are 2 options for component-specific styling:",{"type":19,"tag":27,"props":223,"children":224},{},[225,230],{"type":19,"tag":31,"props":226,"children":227},{},[228],{"type":24,"value":229},"neutral",{"type":19,"tag":31,"props":231,"children":232},{},[233],{"type":24,"value":234},"custom.",{"type":19,"tag":236,"props":237,"children":238},"h3",{"id":229},[239],{"type":24,"value":240},"Neutral",{"type":19,"tag":20,"props":242,"children":243},{},[244],{"type":24,"value":245},"Neutral can be applied to the following components:",{"type":19,"tag":27,"props":247,"children":248},{},[249,254,259],{"type":19,"tag":31,"props":250,"children":251},{},[252],{"type":24,"value":253},"buttons",{"type":19,"tag":31,"props":255,"children":256},{},[257],{"type":24,"value":258},"header (only reverse and image variants)",{"type":19,"tag":31,"props":260,"children":261},{},[262],{"type":24,"value":263},"footer.",{"type":19,"tag":20,"props":265,"children":266},{},[267],{"type":24,"value":268},"The colour of neutral component variants cannot be changed. Neutral components have predefined neutral styling and cannot be edited or customised.",{"type":19,"tag":236,"props":270,"children":272},{"id":271},"custom",[273],{"type":24,"value":274},"Custom",{"type":19,"tag":20,"props":276,"children":277},{},[278],{"type":24,"value":279},"Custom component theming can only be applied to the footer.",{"type":19,"tag":20,"props":281,"children":282},{},[283],{"type":24,"value":284},"The footer has been created with component-specific design tokens. It is recommended custom theming is only done if required.",{"type":19,"tag":20,"props":286,"children":287},{},[288,290,295],{"type":24,"value":289},"To learn more about custom styling please see the Theming page of the ",{"type":19,"tag":35,"props":291,"children":293},{"href":185,"rel":292},[153],[294],{"type":24,"value":189},{"type":24,"value":42},{"type":19,"tag":74,"props":297,"children":298},{},[],{"type":19,"tag":111,"props":300,"children":302},{"id":301},"theme-accessibility",[303],{"type":24,"value":61},{"type":19,"tag":20,"props":305,"children":306},{},[307,309,316],{"type":24,"value":308},"Ripple 2.0 has been designed with the aim to conform to WCAG 2.1 AA standards (below). For websites built on the SDP platform, it is mandatory to meet WCAG 2.1 AA level standards. These accessibility standards are also strongly recommended for all Victorian Government communications built using the Ripple design system (see: ",{"type":19,"tag":35,"props":310,"children":313},{"href":311,"rel":312},"https://www.vic.gov.au/brand-victoria-guidelines-logos",[153],[314],{"type":24,"value":315},"Brand Victoria guidelines",{"type":24,"value":317}," for more information).",{"type":19,"tag":20,"props":319,"children":320},{},[321],{"type":24,"value":322},"Colour contrast is the amount of perceived difference between 2 colours. This is represented as a ratio. A high ratio indicates greater difference between colours and therefore higher contrast.",{"type":19,"tag":20,"props":324,"children":325},{},[326],{"type":24,"value":327},"Colour contrast impacts the readability of your content. It is important for users with low vision or a colour vision deficiency.",{"type":19,"tag":329,"props":330,"children":331},"blockquote",{},[332,370,382,405],{"type":19,"tag":20,"props":333,"children":334},{},[335,342,344,350,352,359,361,368],{"type":19,"tag":35,"props":336,"children":339},{"href":337,"rel":338},"https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html",[153],[340],{"type":24,"value":341},"1.4.3 Contrast Minimum (Level AA)",{"type":24,"value":343},"\nThe visual presentation of ",{"type":19,"tag":35,"props":345,"children":348},{"href":346,"rel":347},"https://www.w3.org/TR/WCAG21/#dfn-text",[153],[349],{"type":24,"value":24},{"type":24,"value":351}," and ",{"type":19,"tag":35,"props":353,"children":356},{"href":354,"rel":355},"https://www.w3.org/TR/WCAG21/#dfn-images-of-text",[153],[357],{"type":24,"value":358},"images of text",{"type":24,"value":360}," has a ",{"type":19,"tag":35,"props":362,"children":365},{"href":363,"rel":364},"https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio",[153],[366],{"type":24,"value":367},"contrast ratio",{"type":24,"value":369}," of at least 4.5:1, except for the following:",{"type":19,"tag":20,"props":371,"children":372},{},[373,380],{"type":19,"tag":35,"props":374,"children":377},{"href":375,"rel":376},"https://www.w3.org/TR/WCAG21/#dfn-large-scale",[153],[378],{"type":24,"value":379},"Large-scale",{"type":24,"value":381}," text and images of large-scale text have a contrast ratio of at least 3:1;",{"type":19,"tag":20,"props":383,"children":384},{},[385,387,394,396,403],{"type":24,"value":386},"Text or images of text that are part of an inactive ",{"type":19,"tag":35,"props":388,"children":391},{"href":389,"rel":390},"https://www.w3.org/TR/WCAG21/#dfn-user-interface-components",[153],[392],{"type":24,"value":393},"user interface component",{"type":24,"value":395},", that are ",{"type":19,"tag":35,"props":397,"children":400},{"href":398,"rel":399},"https://www.w3.org/TR/WCAG21/#dfn-pure-decoration",[153],[401],{"type":24,"value":402},"pure decoration",{"type":24,"value":404},", that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.",{"type":19,"tag":20,"props":406,"children":407},{},[408],{"type":24,"value":409},"Text that is part of a logo or brand name has no contrast requirement.",{"type":19,"tag":236,"props":411,"children":413},{"id":412},"accessibility-testing-requirements",[414],{"type":24,"value":415},"Accessibility testing requirements",{"type":19,"tag":20,"props":417,"children":418},{},[419,421,427],{"type":24,"value":420},"When testing, websites on the SDP platform are required to meet AA standards. Your website must meet a ",{"type":19,"tag":35,"props":422,"children":424},{"href":337,"rel":423},[153],[425],{"type":24,"value":426},"minimum contrast ratio of 4:5:1",{"type":24,"value":428}," for normal text contrast, 3:1 for large text and non-text elements must be met.",{"type":19,"tag":20,"props":430,"children":431},{},[432],{"type":24,"value":433},"Links are required to meet a ratio of 4.5:1 colour contrast.",{"type":19,"tag":20,"props":435,"children":436},{},[437],{"type":24,"value":438},"In the Ripple 2.0 Design System the primary, accent and focus colours are tested against:",{"type":19,"tag":27,"props":440,"children":441},{},[442,447],{"type":19,"tag":31,"props":443,"children":444},{},[445],{"type":24,"value":446},"dark type / rpl-clr-dark / #1A1A1A",{"type":19,"tag":31,"props":448,"children":449},{},[450],{"type":24,"value":451},"light type / rpl-clr-light / #FFFFFF.",{"type":19,"tag":20,"props":453,"children":454},{},[455],{"type":24,"value":456},"The link colour is tested against 3 colours:",{"type":19,"tag":27,"props":458,"children":459},{},[460,465,470],{"type":19,"tag":31,"props":461,"children":462},{},[463],{"type":24,"value":464},"light type / rpl-clr-light / #FFFFFF",{"type":19,"tag":31,"props":466,"children":467},{},[468],{"type":24,"value":469},"rpl-clr-neutral-100 / #F5F5F5",{"type":19,"tag":31,"props":471,"children":472},{},[473],{"type":24,"value":474},"rpl-clr-accent-alt / #E6F5FD (example hex only).",{"type":19,"tag":20,"props":476,"children":477},{},[478,480,487],{"type":24,"value":479},"Colour vision deficiency: it is recommended to also test your colour palette for colour blindness. Some colours can appear similar to people with colour vision deficiency. We recommend using the ",{"type":19,"tag":35,"props":481,"children":484},{"href":482,"rel":483},"https://www.figma.com/community/plugin/733343906244951586",[153],[485],{"type":24,"value":486},"Figma plugin 'Color Blind'",{"type":24,"value":42},{"type":19,"tag":74,"props":489,"children":490},{},[],{"type":19,"tag":111,"props":492,"children":494},{"id":493},"colour-token-automatic-logic",[495],{"type":24,"value":496},"Colour token automatic logic",{"type":19,"tag":20,"props":498,"children":499},{},[500],{"type":24,"value":501},"Below is a full list of colour tokens required to theme the Ripple 2.0 Design System.",{"type":19,"tag":20,"props":503,"children":504},{},[505],{"type":24,"value":506},"Aiming to meet WCAG 2.1 AA colour contrast requirements, some token values are automatic based on their use in the system. This ensures all text-based content meets colour contrast accessibility requirements.\nFor example, if the primary colour is classified as dark:",{"type":19,"tag":27,"props":508,"children":509},{},[510,515],{"type":19,"tag":31,"props":511,"children":512},{},[513],{"type":24,"value":514},"rpl-clr-type-primary-contrast will automatically be rpl-clr-light",{"type":19,"tag":31,"props":516,"children":517},{},[518],{"type":24,"value":519},"rpl-clr-type-primary-accessible will automatically be rpl-clr-primary.",{"type":19,"tag":236,"props":521,"children":523},{"id":522},"core",[524],{"type":24,"value":14},{"type":24,"value":526},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":528,"props":529,"children":530},"table",{},[531,550],{"type":19,"tag":532,"props":533,"children":534},"thead",{},[535],{"type":19,"tag":536,"props":537,"children":538},"tr",{},[539,545],{"type":19,"tag":540,"props":541,"children":542},"th",{},[543],{"type":24,"value":544},"Token",{"type":19,"tag":540,"props":546,"children":547},{},[548],{"type":24,"value":549},"Custom / Automatic",{"type":19,"tag":551,"props":552,"children":553},"tbody",{},[554,567,579,592,604,616,628,640,652],{"type":19,"tag":536,"props":555,"children":556},{},[557,563],{"type":19,"tag":558,"props":559,"children":560},"td",{},[561],{"type":24,"value":562},"rpl-clr-primary",{"type":19,"tag":558,"props":564,"children":565},{},[566],{"type":24,"value":274},{"type":19,"tag":536,"props":568,"children":569},{},[570,575],{"type":19,"tag":558,"props":571,"children":572},{},[573],{"type":24,"value":574},"rpl-clr-primary-alt",{"type":19,"tag":558,"props":576,"children":577},{},[578],{"type":24,"value":274},{"type":19,"tag":536,"props":580,"children":581},{},[582,587],{"type":19,"tag":558,"props":583,"children":584},{},[585],{"type":24,"value":586},"rpl-clr-primary-alpha",{"type":19,"tag":558,"props":588,"children":589},{},[590],{"type":24,"value":591},"Automatic (based on ‘rlp-clr-primary')",{"type":19,"tag":536,"props":593,"children":594},{},[595,600],{"type":19,"tag":558,"props":596,"children":597},{},[598],{"type":24,"value":599},"rpl-clr-accent",{"type":19,"tag":558,"props":601,"children":602},{},[603],{"type":24,"value":274},{"type":19,"tag":536,"props":605,"children":606},{},[607,612],{"type":19,"tag":558,"props":608,"children":609},{},[610],{"type":24,"value":611},"rpl-clr-accent-alt",{"type":19,"tag":558,"props":613,"children":614},{},[615],{"type":24,"value":274},{"type":19,"tag":536,"props":617,"children":618},{},[619,624],{"type":19,"tag":558,"props":620,"children":621},{},[622],{"type":24,"value":623},"rpl-clr-focus",{"type":19,"tag":558,"props":625,"children":626},{},[627],{"type":24,"value":274},{"type":19,"tag":536,"props":629,"children":630},{},[631,636],{"type":19,"tag":558,"props":632,"children":633},{},[634],{"type":24,"value":635},"rpl-clr-link",{"type":19,"tag":558,"props":637,"children":638},{},[639],{"type":24,"value":274},{"type":19,"tag":536,"props":641,"children":642},{},[643,648],{"type":19,"tag":558,"props":644,"children":645},{},[646],{"type":24,"value":647},"rpl-clr-gradient-horizontal",{"type":19,"tag":558,"props":649,"children":650},{},[651],{"type":24,"value":274},{"type":19,"tag":536,"props":653,"children":654},{},[655,660],{"type":19,"tag":558,"props":656,"children":657},{},[658],{"type":24,"value":659},"rpl-clr-gradient-vertical",{"type":19,"tag":558,"props":661,"children":662},{},[663],{"type":24,"value":274},{"type":19,"tag":236,"props":665,"children":667},{"id":666},"typography-colour-tokens",[668],{"type":24,"value":669},"Typography colour tokens",{"type":24,"value":671},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":528,"props":673,"children":674},{},[675,689],{"type":19,"tag":532,"props":676,"children":677},{},[678],{"type":19,"tag":536,"props":679,"children":680},{},[681,685],{"type":19,"tag":540,"props":682,"children":683},{},[684],{"type":24,"value":544},{"type":19,"tag":540,"props":686,"children":687},{},[688],{"type":24,"value":549},{"type":19,"tag":551,"props":690,"children":691},{},[692,705,718,731,743,755],{"type":19,"tag":536,"props":693,"children":694},{},[695,700],{"type":19,"tag":558,"props":696,"children":697},{},[698],{"type":24,"value":699},"rpl-clr-type-primary-contrast",{"type":19,"tag":558,"props":701,"children":702},{},[703],{"type":24,"value":704},"Automatic (based on ‘rlp-clr-primary’ contrast requirements)",{"type":19,"tag":536,"props":706,"children":707},{},[708,713],{"type":19,"tag":558,"props":709,"children":710},{},[711],{"type":24,"value":712},"rpl-clr-type-primary-contrast-alpha",{"type":19,"tag":558,"props":714,"children":715},{},[716],{"type":24,"value":717},"Automatic (based on ‘rlp-clr-type-primary-contrast')",{"type":19,"tag":536,"props":719,"children":720},{},[721,726],{"type":19,"tag":558,"props":722,"children":723},{},[724],{"type":24,"value":725},"rpl-clr-type-accent-contrast",{"type":19,"tag":558,"props":727,"children":728},{},[729],{"type":24,"value":730},"Automatic (based on ‘rlp-clr-accent’ contrast requirements)",{"type":19,"tag":536,"props":732,"children":733},{},[734,739],{"type":19,"tag":558,"props":735,"children":736},{},[737],{"type":24,"value":738},"rpl-clr-type-primary-accessible",{"type":19,"tag":558,"props":740,"children":741},{},[742],{"type":24,"value":704},{"type":19,"tag":536,"props":744,"children":745},{},[746,751],{"type":19,"tag":558,"props":747,"children":748},{},[749],{"type":24,"value":750},"rpl-clr-type-primary-alt-accessible",{"type":19,"tag":558,"props":752,"children":753},{},[754],{"type":24,"value":704},{"type":19,"tag":536,"props":756,"children":757},{},[758,763],{"type":19,"tag":558,"props":759,"children":760},{},[761],{"type":24,"value":762},"rpl-clr-type-focus-contrast",{"type":19,"tag":558,"props":764,"children":765},{},[766],{"type":24,"value":767},"Automatic (based on ‘rlp-clr-focus’ contrast requirements)",{"type":19,"tag":236,"props":769,"children":771},{"id":770},"footer-specific-optional",[772],{"type":24,"value":773},"Footer-specific (optional)",{"type":19,"tag":20,"props":775,"children":776},{},[777,779,784],{"type":24,"value":778},"See: ",{"type":19,"tag":35,"props":780,"children":781},{"href":48},[782],{"type":24,"value":783},"component-specific theming",{"type":24,"value":42},{"type":24,"value":786},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":528,"props":788,"children":789},{},[790,804],{"type":19,"tag":532,"props":791,"children":792},{},[793],{"type":19,"tag":536,"props":794,"children":795},{},[796,800],{"type":19,"tag":540,"props":797,"children":798},{},[799],{"type":24,"value":544},{"type":19,"tag":540,"props":801,"children":802},{},[803],{"type":24,"value":549},{"type":19,"tag":551,"props":805,"children":806},{},[807,820,832,845],{"type":19,"tag":536,"props":808,"children":809},{},[810,815],{"type":19,"tag":558,"props":811,"children":812},{},[813],{"type":24,"value":814},"rpl-clr-footer",{"type":19,"tag":558,"props":816,"children":817},{},[818],{"type":24,"value":819},"Custom or automatic",{"type":19,"tag":536,"props":821,"children":822},{},[823,828],{"type":19,"tag":558,"props":824,"children":825},{},[826],{"type":24,"value":827},"rpl-clr-footer-alt",{"type":19,"tag":558,"props":829,"children":830},{},[831],{"type":24,"value":819},{"type":19,"tag":536,"props":833,"children":834},{},[835,840],{"type":19,"tag":558,"props":836,"children":837},{},[838],{"type":24,"value":839},"rpl-clr-footer-contrast",{"type":19,"tag":558,"props":841,"children":842},{},[843],{"type":24,"value":844},"Automatic (based on ‘rlp-clr-footer’ contrast requirements)",{"type":19,"tag":536,"props":846,"children":847},{},[848,853],{"type":19,"tag":558,"props":849,"children":850},{},[851],{"type":24,"value":852},"rpl-clr-type-footer-accessible",{"type":19,"tag":558,"props":854,"children":855},{},[856],{"type":24,"value":844},{"type":19,"tag":74,"props":858,"children":859},{},[],{"type":19,"tag":111,"props":861,"children":863},{"id":862},"automatic-colour-token-logic",[864],{"type":24,"value":865},"Automatic Colour Token Logic",{"type":19,"tag":20,"props":867,"children":868},{},[869],{"type":24,"value":870},"Based on the colour contrast requirements for the primary, accent and focus colours, some tokens are automatic to aim to conform to WCAG 2.0 AA colour contrast accessibility.",{"type":19,"tag":27,"props":872,"children":873},{},[874,879],{"type":19,"tag":31,"props":875,"children":876},{},[877],{"type":24,"value":878},"‘Light’ means the colour (for example, primary) is AA compliant with dark type (rpl-clr-dark / #1A1A1A).",{"type":19,"tag":31,"props":880,"children":881},{},[882],{"type":24,"value":883},"‘Dark’ means the colour (for example, primary) is AA compliant with light type (rpl-clr-light / #FFFFFF).",{"type":19,"tag":236,"props":885,"children":887},{"id":886},"primary-access-focus-and-link",[888],{"type":24,"value":889},"Primary, Access, Focus and Link",{"type":19,"tag":891,"props":892,"children":894},"h4",{"id":893},"primary",[895],{"type":24,"value":896},"Primary",{"type":24,"value":898},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":528,"props":900,"children":901},{},[902,922],{"type":19,"tag":532,"props":903,"children":904},{},[905],{"type":19,"tag":536,"props":906,"children":907},{},[908,912,917],{"type":19,"tag":540,"props":909,"children":910},{},[911],{"type":24,"value":544},{"type":19,"tag":540,"props":913,"children":914},{},[915],{"type":24,"value":916},"Colour ‘Dark’",{"type":19,"tag":540,"props":918,"children":919},{},[920],{"type":24,"value":921},"Colour 'Light",{"type":19,"tag":551,"props":923,"children":924},{},[925,941,958,974,989],{"type":19,"tag":536,"props":926,"children":927},{},[928,932,937],{"type":19,"tag":558,"props":929,"children":930},{},[931],{"type":24,"value":586},{"type":19,"tag":558,"props":933,"children":934},{},[935],{"type":24,"value":936},"rpl-clr-primary at 50% opacity",{"type":19,"tag":558,"props":938,"children":939},{},[940],{"type":24,"value":936},{"type":19,"tag":536,"props":942,"children":943},{},[944,948,953],{"type":19,"tag":558,"props":945,"children":946},{},[947],{"type":24,"value":699},{"type":19,"tag":558,"props":949,"children":950},{},[951],{"type":24,"value":952},"rpl-clr-light",{"type":19,"tag":558,"props":954,"children":955},{},[956],{"type":24,"value":957},"rpl-clr-dark",{"type":19,"tag":536,"props":959,"children":960},{},[961,965,970],{"type":19,"tag":558,"props":962,"children":963},{},[964],{"type":24,"value":712},{"type":19,"tag":558,"props":966,"children":967},{},[968],{"type":24,"value":969},"rpl-clr-type-primary-contrast at 75% opacity",{"type":19,"tag":558,"props":971,"children":972},{},[973],{"type":24,"value":969},{"type":19,"tag":536,"props":975,"children":976},{},[977,981,985],{"type":19,"tag":558,"props":978,"children":979},{},[980],{"type":24,"value":738},{"type":19,"tag":558,"props":982,"children":983},{},[984],{"type":24,"value":562},{"type":19,"tag":558,"props":986,"children":987},{},[988],{"type":24,"value":957},{"type":19,"tag":536,"props":990,"children":991},{},[992,996,1001],{"type":19,"tag":558,"props":993,"children":994},{},[995],{"type":24,"value":750},{"type":19,"tag":558,"props":997,"children":998},{},[999],{"type":24,"value":1000},"rlpl-clr-primary-alt",{"type":19,"tag":558,"props":1002,"children":1003},{},[1004],{"type":24,"value":957},{"type":19,"tag":891,"props":1006,"children":1008},{"id":1007},"accent",[1009],{"type":24,"value":1010},"Accent",{"type":24,"value":1012},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":528,"props":1014,"children":1015},{},[1016,1034],{"type":19,"tag":532,"props":1017,"children":1018},{},[1019],{"type":19,"tag":536,"props":1020,"children":1021},{},[1022,1026,1030],{"type":19,"tag":540,"props":1023,"children":1024},{},[1025],{"type":24,"value":544},{"type":19,"tag":540,"props":1027,"children":1028},{},[1029],{"type":24,"value":916},{"type":19,"tag":540,"props":1031,"children":1032},{},[1033],{"type":24,"value":921},{"type":19,"tag":551,"props":1035,"children":1036},{},[1037],{"type":19,"tag":536,"props":1038,"children":1039},{},[1040,1044,1048],{"type":19,"tag":558,"props":1041,"children":1042},{},[1043],{"type":24,"value":725},{"type":19,"tag":558,"props":1045,"children":1046},{},[1047],{"type":24,"value":952},{"type":19,"tag":558,"props":1049,"children":1050},{},[1051],{"type":24,"value":957},{"type":19,"tag":891,"props":1053,"children":1055},{"id":1054},"focus",[1056],{"type":24,"value":1057},"Focus",{"type":24,"value":1012},{"type":19,"tag":528,"props":1060,"children":1061},{},[1062,1080],{"type":19,"tag":532,"props":1063,"children":1064},{},[1065],{"type":19,"tag":536,"props":1066,"children":1067},{},[1068,1072,1076],{"type":19,"tag":540,"props":1069,"children":1070},{},[1071],{"type":24,"value":544},{"type":19,"tag":540,"props":1073,"children":1074},{},[1075],{"type":24,"value":916},{"type":19,"tag":540,"props":1077,"children":1078},{},[1079],{"type":24,"value":921},{"type":19,"tag":551,"props":1081,"children":1082},{},[1083],{"type":19,"tag":536,"props":1084,"children":1085},{},[1086,1090,1094],{"type":19,"tag":558,"props":1087,"children":1088},{},[1089],{"type":24,"value":762},{"type":19,"tag":558,"props":1091,"children":1092},{},[1093],{"type":24,"value":952},{"type":19,"tag":558,"props":1095,"children":1096},{},[1097],{"type":24,"value":957},{"type":19,"tag":891,"props":1099,"children":1101},{"id":1100},"link",[1102],{"type":24,"value":1103},"Link",{"type":24,"value":1105},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":528,"props":1107,"children":1108},{},[1109,1127],{"type":19,"tag":532,"props":1110,"children":1111},{},[1112],{"type":19,"tag":536,"props":1113,"children":1114},{},[1115,1119,1123],{"type":19,"tag":540,"props":1116,"children":1117},{},[1118],{"type":24,"value":544},{"type":19,"tag":540,"props":1120,"children":1121},{},[1122],{"type":24,"value":916},{"type":19,"tag":540,"props":1124,"children":1125},{},[1126],{"type":24,"value":921},{"type":19,"tag":551,"props":1128,"children":1129},{},[1130,1153],{"type":19,"tag":536,"props":1131,"children":1132},{},[1133,1136,1145],{"type":19,"tag":558,"props":1134,"children":1135},{},[],{"type":19,"tag":558,"props":1137,"children":1138},{},[1139],{"type":19,"tag":1140,"props":1141,"children":1142},"em",{},[1143],{"type":24,"value":1144},"If Primary ‘Dark’",{"type":19,"tag":558,"props":1146,"children":1147},{},[1148],{"type":19,"tag":1140,"props":1149,"children":1150},{},[1151],{"type":24,"value":1152},"If Primary ‘Light’",{"type":19,"tag":536,"props":1154,"children":1155},{},[1156,1160,1164],{"type":19,"tag":558,"props":1157,"children":1158},{},[1159],{"type":24,"value":635},{"type":19,"tag":558,"props":1161,"children":1162},{},[1163],{"type":24,"value":562},{"type":19,"tag":558,"props":1165,"children":1166},{},[1167],{"type":24,"value":274},{"type":19,"tag":236,"props":1169,"children":1171},{"id":1170},"gradient",[1172],{"type":24,"value":1173},"Gradient",{"type":19,"tag":20,"props":1175,"children":1176},{},[1177],{"type":24,"value":1178},"Including a gradient is optional for theming.",{"type":19,"tag":20,"props":1180,"children":1181},{},[1182],{"type":24,"value":1183},"If a gradient is not used, 'rpl-clr-accent' will be used in its place.",{"type":19,"tag":891,"props":1185,"children":1187},{"id":1186},"gradient-1",[1188],{"type":24,"value":1173},{"type":24,"value":1105},{"type":19,"tag":528,"props":1191,"children":1192},{},[1193,1211],{"type":19,"tag":532,"props":1194,"children":1195},{},[1196],{"type":19,"tag":536,"props":1197,"children":1198},{},[1199,1203,1207],{"type":19,"tag":540,"props":1200,"children":1201},{},[1202],{"type":24,"value":544},{"type":19,"tag":540,"props":1204,"children":1205},{},[1206],{"type":24,"value":1173},{"type":19,"tag":540,"props":1208,"children":1209},{},[1210],{"type":24,"value":1010},{"type":19,"tag":551,"props":1212,"children":1213},{},[1214,1230],{"type":19,"tag":536,"props":1215,"children":1216},{},[1217,1221,1226],{"type":19,"tag":558,"props":1218,"children":1219},{},[1220],{"type":24,"value":647},{"type":19,"tag":558,"props":1222,"children":1223},{},[1224],{"type":24,"value":1225},"rpl-clr-gradient (90 degrees)",{"type":19,"tag":558,"props":1227,"children":1228},{},[1229],{"type":24,"value":599},{"type":19,"tag":536,"props":1231,"children":1232},{},[1233,1237,1242],{"type":19,"tag":558,"props":1234,"children":1235},{},[1236],{"type":24,"value":659},{"type":19,"tag":558,"props":1238,"children":1239},{},[1240],{"type":24,"value":1241},"rpl-clr-gradient (180 degrees)",{"type":19,"tag":558,"props":1243,"children":1244},{},[1245],{"type":24,"value":599},{"title":10,"searchDepth":1247,"depth":1247,"links":1248},2,[1249,1250,1255,1258,1263],{"id":113,"depth":1247,"text":40},{"id":209,"depth":1247,"text":51,"children":1251},[1252,1254],{"id":229,"depth":1253,"text":240},3,{"id":271,"depth":1253,"text":274},{"id":301,"depth":1247,"text":61,"children":1256},[1257],{"id":412,"depth":1253,"text":415},{"id":493,"depth":1247,"text":496,"children":1259},[1260,1261,1262],{"id":522,"depth":1253,"text":14},{"id":666,"depth":1253,"text":669},{"id":770,"depth":1253,"text":773},{"id":862,"depth":1247,"text":865,"children":1264},[1265,1266],{"id":886,"depth":1253,"text":889},{"id":1170,"depth":1253,"text":1173},"markdown","content:design-system:2.design:4.theming-guidance-for-designers.md","content","design-system/2.design/4.theming-guidance-for-designers.md","md",["ShallowRef",1273],["ShallowReactive",1274],{"/design-system/design/theming-guidance-for-designers":1275},[1276,1282],{"_path":1277,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":1278,"description":1279,"layout":13,"label":14,"_type":1267,"_id":1280,"_source":1269,"_file":1281,"_extension":1271},"/design-system/design/design-tokens","Design tokens","Design tokens store our design decisions in the Ripple Design System. They are the single source of truth.","content:design-system:2.design:3.design-tokens.md","design-system/2.design/3.design-tokens.md",{"_path":1283,"_dir":1284,"_draft":9,"_partial":9,"_locale":10,"title":1285,"description":1286,"layout":13,"links":1287,"_type":1267,"_id":1294,"_source":1269,"_file":1295,"_extension":1271},"/design-system/develop/getting-started","develop","Getting started","Information for developers using the Ripple 2 UI libraries",[1288,1291],{"text":1289,"url":1290},"Github","https://github.com/dpc-sdp/ripple-framework",{"text":1292,"url":1293},"Storybook","/storybook","content:design-system:3.develop:1.getting-started.md","design-system/3.develop/1.getting-started.md",["ShallowRef",1297],{},[1299,1304,1546],{"title":1300,"_path":1301,"icon":1302,"layout":1303},"Ripple Design System","/","carbon:home","home",{"title":1305,"_path":1306,"children":1307},"Design System","/design-system",[1308,1324,1335,1364,1398],{"title":1309,"_path":1310,"children":1311},"About","/design-system/about",[1312,1315,1318,1321],{"title":1313,"_path":1314,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":1316,"_path":1317,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":1319,"_path":1320,"layout":13},"Support","/design-system/about/getting-support",{"title":1322,"_path":1323,"layout":13},"Contributing","/design-system/about/contributing",{"title":1325,"_path":1326,"children":1327},"Design","/design-system/design",[1328,1330,1333,1334],{"title":1285,"_path":1329,"layout":13},"/design-system/design/getting-started",{"title":1331,"_path":1332,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":1278,"_path":1277,"layout":13},{"title":11,"_path":7,"layout":13},{"title":1336,"_path":1337,"children":1338},"Develop","/design-system/develop",[1339,1340,1342,1345],{"title":1285,"_path":1283,"layout":13},{"title":1322,"_path":1341,"layout":13},"/design-system/develop/contributing",{"title":1343,"_path":1344,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":1346,"_path":1347,"children":1348,"layout":13},"Usage","/design-system/develop/usage",[1349,1352,1355,1358,1361],{"title":1350,"_path":1351,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":1353,"_path":1354,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":1356,"_path":1357,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":1359,"_path":1360,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":1362,"_path":1363,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":1365,"_path":1366,"children":1367},"Styles","/design-system/styles",[1368,1371,1374,1377,1380,1383,1386,1389,1392,1395],{"title":1369,"_path":1370,"layout":13},"Colour","/design-system/styles/colour",{"title":1372,"_path":1373,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":1375,"_path":1376,"layout":13},"Grid","/design-system/styles/grid",{"title":1378,"_path":1379,"layout":13},"Icons","/design-system/styles/icons",{"title":1381,"_path":1382,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":1384,"_path":1385,"layout":13},"Layout","/design-system/styles/layout",{"title":1387,"_path":1388,"layout":13},"Logo","/design-system/styles/logo",{"title":1390,"_path":1391,"layout":13},"Motion","/design-system/styles/motion",{"title":1393,"_path":1394,"layout":13},"Spacing","/design-system/styles/spacing",{"title":1396,"_path":1397,"layout":13},"Typography","/design-system/styles/typography",{"title":1399,"_path":1400,"children":1401},"Components","/design-system/components",[1402,1405,1408,1411,1414,1417,1420,1423,1426,1429,1432,1435,1438,1441,1444,1447,1450,1453,1456,1459,1462,1465,1468,1471,1474,1477,1480,1483,1486,1489,1492,1495,1498,1501,1504,1507,1510,1513,1516,1519,1522,1525,1528,1531,1534,1537,1540,1543],{"title":1403,"_path":1404,"layout":13},"Accordion","/design-system/components/accordion",{"title":1406,"_path":1407,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":1409,"_path":1410,"layout":13},"Alert","/design-system/components/alert",{"title":1412,"_path":1413,"layout":13},"Block quote","/design-system/components/block-quote",{"title":1415,"_path":1416,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":1418,"_path":1419,"layout":13},"Button","/design-system/components/button",{"title":1421,"_path":1422,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":1424,"_path":1425,"layout":13},"Callout","/design-system/components/callout",{"title":1427,"_path":1428,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":1430,"_path":1431,"layout":13},"Card","/design-system/components/card",{"title":1433,"_path":1434,"layout":13},"Carousel","/design-system/components/carousel",{"title":1436,"_path":1437,"layout":13},"Category grid","/design-system/components/category-grid",{"title":1439,"_path":1440,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":1442,"_path":1443,"layout":13},"Chip","/design-system/components/chip",{"title":1445,"_path":1446,"layout":13},"Contact us","/design-system/components/contact-us",{"title":1448,"_path":1449,"layout":13},"Date input","/design-system/components/date-input",{"title":1451,"_path":1452,"layout":13},"Detail list","/design-system/components/detail-list",{"title":1454,"_path":1455,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":1457,"_path":1458,"layout":13},"File","/design-system/components/file",{"title":1460,"_path":1461,"layout":13},"Footer","/design-system/components/footer",{"title":1463,"_path":1464,"layout":13},"Form","/design-system/components/form",{"title":1466,"_path":1467,"layout":13},"Form alert","/design-system/components/form-alert",{"title":1469,"_path":1470,"layout":13},"Header","/design-system/components/header",{"title":1472,"_path":1473,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":1475,"_path":1476,"layout":13},"Input field","/design-system/components/input-field",{"title":1478,"_path":1479,"layout":13},"Key dates","/design-system/components/key-dates",{"title":1481,"_path":1482,"layout":13},"Media","/design-system/components/media",{"title":1484,"_path":1485,"layout":13},"Media embed","/design-system/components/media-embed",{"title":1487,"_path":1488,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":1490,"_path":1491,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":1493,"_path":1494,"layout":13},"Option button","/design-system/components/option-button",{"title":1496,"_path":1497,"layout":13},"Page action","/design-system/components/page-action",{"title":1499,"_path":1500,"layout":13},"Pagination","/design-system/components/pagination",{"title":1502,"_path":1503,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":1505,"_path":1506,"layout":13},"Profile","/design-system/components/profile",{"title":1508,"_path":1509,"layout":13},"Radio button","/design-system/components/radio-button",{"title":1511,"_path":1512,"layout":13},"Related links","/design-system/components/related-links",{"title":1514,"_path":1515,"layout":13},"Results listing","/design-system/components/results-listing",{"title":1517,"_path":1518,"layout":13},"Search bar","/design-system/components/search-bar",{"title":1520,"_path":1521,"layout":13},"Skip link","/design-system/components/skip-link",{"title":1523,"_path":1524,"layout":13},"Social share","/design-system/components/social-share",{"title":1526,"_path":1527,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":1529,"_path":1530,"layout":13},"Table","/design-system/components/table",{"title":1532,"_path":1533,"layout":13},"Tabs","/design-system/components/tabs",{"title":1535,"_path":1536,"layout":13},"Tag","/design-system/components/tag",{"title":1538,"_path":1539,"layout":13},"Text area","/design-system/components/text-area",{"title":1541,"_path":1542,"layout":13},"Timeline","/design-system/components/timeline",{"title":1544,"_path":1545,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":1547,"_path":1548,"children":1549,"layout":13},"Ripple Framework","/framework",[1550,1551,1569,1591],{"title":1547,"_path":1548,"layout":13},{"title":1552,"_path":1553,"children":1554},"Key Concepts","/framework/key-concepts",[1555,1557,1560,1563,1566],{"title":1356,"_path":1556,"layout":13},"/framework/key-concepts/nuxt",{"title":1558,"_path":1559,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":1561,"_path":1562,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":1564,"_path":1565,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":1567,"_path":1568,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":1570,"_path":1571,"children":1572},"Guides","/framework/guides",[1573,1576,1579,1582,1585,1588],{"title":1574,"_path":1575,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":1577,"_path":1578,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":1580,"_path":1581,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":1583,"_path":1584,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":1586,"_path":1587,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":1589,"_path":1590,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":1592,"_path":1593,"layout":13},"Core modules","/framework/core-modules",["Reactive",1595],["Set"],["Reactive",1597],{"module-navigation":12},true,"/design-system/design/theming-guidance-for-designers/",1714695155446]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+<div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Token<!--]--></th><th><!--[-->Gradient<!--]--></th><th><!--[-->Accent<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->rpl-clr-gradient-horizontal<!--]--></td><td><!--[-->rpl-clr-gradient (90 degrees)<!--]--></td><td><!--[-->rpl-clr-accent<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->rpl-clr-gradient-vertical<!--]--></td><td><!--[-->rpl-clr-gradient (180 degrees)<!--]--></td><td><!--[-->rpl-clr-accent<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/2.design/4.theming-guidance-for-designers.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/design/theming-guidance-for-designers/_payload.json">[{"state":1,"once":1594,"_errors":1596,"serverRendered":1598,"path":1599,"prerenderedAt":1600},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":1272,"$sdd-globals":1296,"$sdd-navigation":1298},["ShallowRef",4],["ShallowReactive",5],{"/design-system/design/theming-guidance-for-designers":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":1267,"_id":1268,"_source":1269,"_file":1270,"_extension":1271},"/design-system/design/theming-guidance-for-designers","design",false,"","Theming guidance for designers",null,"page","Core",{"type":16,"children":17,"toc":1246},"root",[18,26,73,77,82,87,92,97,102,107,110,116,121,126,131,144,168,173,178,191,204,207,212,217,222,235,241,246,264,269,275,280,285,296,299,304,318,323,328,410,416,429,434,439,452,457,475,488,491,497,502,507,520,525,527,664,670,672,768,774,785,787,857,860,866,871,884,890,897,899,1005,1011,1013,1052,1058,1059,1098,1104,1106,1168,1174,1179,1184,1189,1190],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","Jump to:",{"type":19,"tag":27,"props":28,"children":29},"ul",{},[30,43,53,63],{"type":19,"tag":31,"props":32,"children":33},"li",{},[34,41],{"type":19,"tag":35,"props":36,"children":38},"a",{"href":37},"/design-system/design/theming-guidance-for-designers/#create-a-custom-theme",[39],{"type":24,"value":40},"Create a custom theme",{"type":24,"value":42},".",{"type":19,"tag":31,"props":44,"children":45},{},[46,52],{"type":19,"tag":35,"props":47,"children":49},{"href":48},"/design-system/design/theming-guidance-for-designers/#component-specific-theming",[50],{"type":24,"value":51},"Component-specific theming",{"type":24,"value":42},{"type":19,"tag":31,"props":54,"children":55},{},[56,62],{"type":19,"tag":35,"props":57,"children":59},{"href":58},"/design-system/design/theming-guidance-for-designers/#theme-accessibility",[60],{"type":24,"value":61},"Theme accessibility",{"type":24,"value":42},{"type":19,"tag":31,"props":64,"children":65},{},[66,72],{"type":19,"tag":35,"props":67,"children":69},{"href":68},"/design-system/design/theming-guidance-for-designers/#automatic-colour-token-logic",[70],{"type":24,"value":71},"Automatic colour token logic",{"type":24,"value":42},{"type":19,"tag":74,"props":75,"children":76},"hr",{},[],{"type":19,"tag":20,"props":78,"children":79},{},[80],{"type":24,"value":81},"Ripple 2.0 has been designed with in-built custom theming capabilities. Theming can be applied if your site requires department or entity branding and has been approved to use theming. Please note it is recommend you utilise the brand equity of vic.gov.au where possible and only theme your site if needed and approved. Please contact the SDP team for more information on approvals for theming.",{"type":19,"tag":20,"props":83,"children":84},{},[85],{"type":24,"value":86},"Ripple uses primary and accent colours, an optional gradient, a link colour and a focus state colour. You can read more about their roles and uses in the colour documentation.",{"type":19,"tag":20,"props":88,"children":89},{},[90],{"type":24,"value":91},"When theming your site, its styles and components will re-theme automatically. This has been done through the use of design tokens. Design tokens represent repeated design decisions that make up a design system's visual style. Tokens replace static values, such as hex codes for colour. The token informs how colour is used and inherited to ensure a consistent and accessible user experience.",{"type":19,"tag":20,"props":93,"children":94},{},[95],{"type":24,"value":96},"We’ve designed a colour testing process so the selected colours will pass the accessibility contrast ratios. It classifies the selected colours into a ‘light’ or ‘dark’ category. The colour system will then automatically provide accessible colour contrast.",{"type":19,"tag":20,"props":98,"children":99},{},[100],{"type":24,"value":101},"We have aimed to conform to the Web Content Accessibility Guideline (WCAG) requirements, but we recommend you perform your own accessibility checks where possible to ensure the guidelines are being met.",{"type":19,"tag":20,"props":103,"children":104},{},[105],{"type":24,"value":106},"To learn more about if your site should be themed, please contact the Single Digital Presence (SDP) team.",{"type":19,"tag":74,"props":108,"children":109},{},[],{"type":19,"tag":111,"props":112,"children":114},"h2",{"id":113},"create-a-custom-theme",[115],{"type":24,"value":40},{"type":19,"tag":20,"props":117,"children":118},{},[119],{"type":24,"value":120},"Ripple has been designed with a primary and accent colour. These inform the colour framework.",{"type":19,"tag":20,"props":122,"children":123},{},[124],{"type":24,"value":125},"A link colour, focus colour and optional gradient are also required when theming.",{"type":19,"tag":20,"props":127,"children":128},{},[129],{"type":24,"value":130},"The primary, accent and focus colours can be either light or dark:",{"type":19,"tag":27,"props":132,"children":133},{},[134,139],{"type":19,"tag":31,"props":135,"children":136},{},[137],{"type":24,"value":138},"'Light' means the colour is WCAG 2.1 AA compliant with dark type (rpl-clr-dark / #1A1A1A).",{"type":19,"tag":31,"props":140,"children":141},{},[142],{"type":24,"value":143},"‘Dark’ means the colour is WCAG 2.1 AA compliant with light type (rpl-clr-light / #FFFFFF).",{"type":19,"tag":20,"props":145,"children":146},{},[147,149,157,159,166],{"type":24,"value":148},"To classify your colour as light or dark, we recommend the use ",{"type":19,"tag":35,"props":150,"children":154},{"href":151,"rel":152},"https://webaim.org/resources/contrastchecker/",[153],"nofollow",[155],{"type":24,"value":156},"WebAim Colour Contrast Checker",{"type":24,"value":158}," or the ",{"type":19,"tag":35,"props":160,"children":163},{"href":161,"rel":162},"https://www.figma.com/community/plugin/733159460536249875",[153],[164],{"type":24,"value":165},"Figma plugin, A11y - Colour Contrast Checker",{"type":24,"value":167}," to see if the colour is accessible with the Ripple 2.0 dark or light type colours listed above.",{"type":19,"tag":20,"props":169,"children":170},{},[171],{"type":24,"value":172},"Classifying colours as either ‘dark’ or ‘light’ informs the implementation of other colour tokens, aiming to conform to WCAG 2.1 AA colour contrast requirements.",{"type":19,"tag":20,"props":174,"children":175},{},[176],{"type":24,"value":177},"It is recommended that the primary colour is always visually darker than the accent and is visually different at glance. This will ensure your users are quickly and easily directed to the most important areas of a web page.",{"type":19,"tag":20,"props":179,"children":180},{},[181,183,190],{"type":24,"value":182},"Guidance for creating your own theme can be found on the Theming page of the ",{"type":19,"tag":35,"props":184,"children":187},{"href":185,"rel":186},"https://www.figma.com/file/mgPlLh5IFKAkDoSID9Vpi1/Ripple-2.0?type=design&node-id=9557%3A70609&t=dK1cmsWLfSmpr9Ff-1",[153],[188],{"type":24,"value":189},"Ripple 2.0 Design System Figma file",{"type":24,"value":42},{"type":19,"tag":20,"props":192,"children":193},{},[194,196,203],{"type":24,"value":195},"If you don’t have access, you can ",{"type":19,"tag":35,"props":197,"children":200},{"href":198,"rel":199},"https://www.vic.gov.au/ripple-design-system",[153],[201],{"type":24,"value":202},"request access to view the Ripple 2.0 Design System",{"type":24,"value":42},{"type":19,"tag":74,"props":205,"children":206},{},[],{"type":19,"tag":111,"props":208,"children":210},{"id":209},"component-specific-theming",[211],{"type":24,"value":51},{"type":19,"tag":20,"props":213,"children":214},{},[215],{"type":24,"value":216},"The Ripple 2.0 Design System has components that allow for specific theming. This is optional and if not used, components will adopt the default framework styling. Component-specific theming is defined at a site level, and will affect all instances of the component.",{"type":19,"tag":20,"props":218,"children":219},{},[220],{"type":24,"value":221},"There are 2 options for component-specific styling:",{"type":19,"tag":27,"props":223,"children":224},{},[225,230],{"type":19,"tag":31,"props":226,"children":227},{},[228],{"type":24,"value":229},"neutral",{"type":19,"tag":31,"props":231,"children":232},{},[233],{"type":24,"value":234},"custom.",{"type":19,"tag":236,"props":237,"children":238},"h3",{"id":229},[239],{"type":24,"value":240},"Neutral",{"type":19,"tag":20,"props":242,"children":243},{},[244],{"type":24,"value":245},"Neutral can be applied to the following components:",{"type":19,"tag":27,"props":247,"children":248},{},[249,254,259],{"type":19,"tag":31,"props":250,"children":251},{},[252],{"type":24,"value":253},"buttons",{"type":19,"tag":31,"props":255,"children":256},{},[257],{"type":24,"value":258},"header (only reverse and image variants)",{"type":19,"tag":31,"props":260,"children":261},{},[262],{"type":24,"value":263},"footer.",{"type":19,"tag":20,"props":265,"children":266},{},[267],{"type":24,"value":268},"The colour of neutral component variants cannot be changed. Neutral components have predefined neutral styling and cannot be edited or customised.",{"type":19,"tag":236,"props":270,"children":272},{"id":271},"custom",[273],{"type":24,"value":274},"Custom",{"type":19,"tag":20,"props":276,"children":277},{},[278],{"type":24,"value":279},"Custom component theming can only be applied to the footer.",{"type":19,"tag":20,"props":281,"children":282},{},[283],{"type":24,"value":284},"The footer has been created with component-specific design tokens. It is recommended custom theming is only done if required.",{"type":19,"tag":20,"props":286,"children":287},{},[288,290,295],{"type":24,"value":289},"To learn more about custom styling please see the Theming page of the ",{"type":19,"tag":35,"props":291,"children":293},{"href":185,"rel":292},[153],[294],{"type":24,"value":189},{"type":24,"value":42},{"type":19,"tag":74,"props":297,"children":298},{},[],{"type":19,"tag":111,"props":300,"children":302},{"id":301},"theme-accessibility",[303],{"type":24,"value":61},{"type":19,"tag":20,"props":305,"children":306},{},[307,309,316],{"type":24,"value":308},"Ripple 2.0 has been designed with the aim to conform to WCAG 2.1 AA standards (below). For websites built on the SDP platform, it is mandatory to meet WCAG 2.1 AA level standards. These accessibility standards are also strongly recommended for all Victorian Government communications built using the Ripple design system (see: ",{"type":19,"tag":35,"props":310,"children":313},{"href":311,"rel":312},"https://www.vic.gov.au/brand-victoria-guidelines-logos",[153],[314],{"type":24,"value":315},"Brand Victoria guidelines",{"type":24,"value":317}," for more information).",{"type":19,"tag":20,"props":319,"children":320},{},[321],{"type":24,"value":322},"Colour contrast is the amount of perceived difference between 2 colours. This is represented as a ratio. A high ratio indicates greater difference between colours and therefore higher contrast.",{"type":19,"tag":20,"props":324,"children":325},{},[326],{"type":24,"value":327},"Colour contrast impacts the readability of your content. It is important for users with low vision or a colour vision deficiency.",{"type":19,"tag":329,"props":330,"children":331},"blockquote",{},[332,370,382,405],{"type":19,"tag":20,"props":333,"children":334},{},[335,342,344,350,352,359,361,368],{"type":19,"tag":35,"props":336,"children":339},{"href":337,"rel":338},"https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html",[153],[340],{"type":24,"value":341},"1.4.3 Contrast Minimum (Level AA)",{"type":24,"value":343},"\nThe visual presentation of ",{"type":19,"tag":35,"props":345,"children":348},{"href":346,"rel":347},"https://www.w3.org/TR/WCAG21/#dfn-text",[153],[349],{"type":24,"value":24},{"type":24,"value":351}," and ",{"type":19,"tag":35,"props":353,"children":356},{"href":354,"rel":355},"https://www.w3.org/TR/WCAG21/#dfn-images-of-text",[153],[357],{"type":24,"value":358},"images of text",{"type":24,"value":360}," has a ",{"type":19,"tag":35,"props":362,"children":365},{"href":363,"rel":364},"https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio",[153],[366],{"type":24,"value":367},"contrast ratio",{"type":24,"value":369}," of at least 4.5:1, except for the following:",{"type":19,"tag":20,"props":371,"children":372},{},[373,380],{"type":19,"tag":35,"props":374,"children":377},{"href":375,"rel":376},"https://www.w3.org/TR/WCAG21/#dfn-large-scale",[153],[378],{"type":24,"value":379},"Large-scale",{"type":24,"value":381}," text and images of large-scale text have a contrast ratio of at least 3:1;",{"type":19,"tag":20,"props":383,"children":384},{},[385,387,394,396,403],{"type":24,"value":386},"Text or images of text that are part of an inactive ",{"type":19,"tag":35,"props":388,"children":391},{"href":389,"rel":390},"https://www.w3.org/TR/WCAG21/#dfn-user-interface-components",[153],[392],{"type":24,"value":393},"user interface component",{"type":24,"value":395},", that are ",{"type":19,"tag":35,"props":397,"children":400},{"href":398,"rel":399},"https://www.w3.org/TR/WCAG21/#dfn-pure-decoration",[153],[401],{"type":24,"value":402},"pure decoration",{"type":24,"value":404},", that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.",{"type":19,"tag":20,"props":406,"children":407},{},[408],{"type":24,"value":409},"Text that is part of a logo or brand name has no contrast requirement.",{"type":19,"tag":236,"props":411,"children":413},{"id":412},"accessibility-testing-requirements",[414],{"type":24,"value":415},"Accessibility testing requirements",{"type":19,"tag":20,"props":417,"children":418},{},[419,421,427],{"type":24,"value":420},"When testing, websites on the SDP platform are required to meet AA standards. Your website must meet a ",{"type":19,"tag":35,"props":422,"children":424},{"href":337,"rel":423},[153],[425],{"type":24,"value":426},"minimum contrast ratio of 4:5:1",{"type":24,"value":428}," for normal text contrast, 3:1 for large text and non-text elements must be met.",{"type":19,"tag":20,"props":430,"children":431},{},[432],{"type":24,"value":433},"Links are required to meet a ratio of 4.5:1 colour contrast.",{"type":19,"tag":20,"props":435,"children":436},{},[437],{"type":24,"value":438},"In the Ripple 2.0 Design System the primary, accent and focus colours are tested against:",{"type":19,"tag":27,"props":440,"children":441},{},[442,447],{"type":19,"tag":31,"props":443,"children":444},{},[445],{"type":24,"value":446},"dark type / rpl-clr-dark / #1A1A1A",{"type":19,"tag":31,"props":448,"children":449},{},[450],{"type":24,"value":451},"light type / rpl-clr-light / #FFFFFF.",{"type":19,"tag":20,"props":453,"children":454},{},[455],{"type":24,"value":456},"The link colour is tested against 3 colours:",{"type":19,"tag":27,"props":458,"children":459},{},[460,465,470],{"type":19,"tag":31,"props":461,"children":462},{},[463],{"type":24,"value":464},"light type / rpl-clr-light / #FFFFFF",{"type":19,"tag":31,"props":466,"children":467},{},[468],{"type":24,"value":469},"rpl-clr-neutral-100 / #F5F5F5",{"type":19,"tag":31,"props":471,"children":472},{},[473],{"type":24,"value":474},"rpl-clr-accent-alt / #E6F5FD (example hex only).",{"type":19,"tag":20,"props":476,"children":477},{},[478,480,487],{"type":24,"value":479},"Colour vision deficiency: it is recommended to also test your colour palette for colour blindness. Some colours can appear similar to people with colour vision deficiency. We recommend using the ",{"type":19,"tag":35,"props":481,"children":484},{"href":482,"rel":483},"https://www.figma.com/community/plugin/733343906244951586",[153],[485],{"type":24,"value":486},"Figma plugin 'Color Blind'",{"type":24,"value":42},{"type":19,"tag":74,"props":489,"children":490},{},[],{"type":19,"tag":111,"props":492,"children":494},{"id":493},"colour-token-automatic-logic",[495],{"type":24,"value":496},"Colour token automatic logic",{"type":19,"tag":20,"props":498,"children":499},{},[500],{"type":24,"value":501},"Below is a full list of colour tokens required to theme the Ripple 2.0 Design System.",{"type":19,"tag":20,"props":503,"children":504},{},[505],{"type":24,"value":506},"Aiming to meet WCAG 2.1 AA colour contrast requirements, some token values are automatic based on their use in the system. This ensures all text-based content meets colour contrast accessibility requirements.\nFor example, if the primary colour is classified as dark:",{"type":19,"tag":27,"props":508,"children":509},{},[510,515],{"type":19,"tag":31,"props":511,"children":512},{},[513],{"type":24,"value":514},"rpl-clr-type-primary-contrast will automatically be rpl-clr-light",{"type":19,"tag":31,"props":516,"children":517},{},[518],{"type":24,"value":519},"rpl-clr-type-primary-accessible will automatically be rpl-clr-primary.",{"type":19,"tag":236,"props":521,"children":523},{"id":522},"core",[524],{"type":24,"value":14},{"type":24,"value":526},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":528,"props":529,"children":530},"table",{},[531,550],{"type":19,"tag":532,"props":533,"children":534},"thead",{},[535],{"type":19,"tag":536,"props":537,"children":538},"tr",{},[539,545],{"type":19,"tag":540,"props":541,"children":542},"th",{},[543],{"type":24,"value":544},"Token",{"type":19,"tag":540,"props":546,"children":547},{},[548],{"type":24,"value":549},"Custom / Automatic",{"type":19,"tag":551,"props":552,"children":553},"tbody",{},[554,567,579,592,604,616,628,640,652],{"type":19,"tag":536,"props":555,"children":556},{},[557,563],{"type":19,"tag":558,"props":559,"children":560},"td",{},[561],{"type":24,"value":562},"rpl-clr-primary",{"type":19,"tag":558,"props":564,"children":565},{},[566],{"type":24,"value":274},{"type":19,"tag":536,"props":568,"children":569},{},[570,575],{"type":19,"tag":558,"props":571,"children":572},{},[573],{"type":24,"value":574},"rpl-clr-primary-alt",{"type":19,"tag":558,"props":576,"children":577},{},[578],{"type":24,"value":274},{"type":19,"tag":536,"props":580,"children":581},{},[582,587],{"type":19,"tag":558,"props":583,"children":584},{},[585],{"type":24,"value":586},"rpl-clr-primary-alpha",{"type":19,"tag":558,"props":588,"children":589},{},[590],{"type":24,"value":591},"Automatic (based on ‘rlp-clr-primary')",{"type":19,"tag":536,"props":593,"children":594},{},[595,600],{"type":19,"tag":558,"props":596,"children":597},{},[598],{"type":24,"value":599},"rpl-clr-accent",{"type":19,"tag":558,"props":601,"children":602},{},[603],{"type":24,"value":274},{"type":19,"tag":536,"props":605,"children":606},{},[607,612],{"type":19,"tag":558,"props":608,"children":609},{},[610],{"type":24,"value":611},"rpl-clr-accent-alt",{"type":19,"tag":558,"props":613,"children":614},{},[615],{"type":24,"value":274},{"type":19,"tag":536,"props":617,"children":618},{},[619,624],{"type":19,"tag":558,"props":620,"children":621},{},[622],{"type":24,"value":623},"rpl-clr-focus",{"type":19,"tag":558,"props":625,"children":626},{},[627],{"type":24,"value":274},{"type":19,"tag":536,"props":629,"children":630},{},[631,636],{"type":19,"tag":558,"props":632,"children":633},{},[634],{"type":24,"value":635},"rpl-clr-link",{"type":19,"tag":558,"props":637,"children":638},{},[639],{"type":24,"value":274},{"type":19,"tag":536,"props":641,"children":642},{},[643,648],{"type":19,"tag":558,"props":644,"children":645},{},[646],{"type":24,"value":647},"rpl-clr-gradient-horizontal",{"type":19,"tag":558,"props":649,"children":650},{},[651],{"type":24,"value":274},{"type":19,"tag":536,"props":653,"children":654},{},[655,660],{"type":19,"tag":558,"props":656,"children":657},{},[658],{"type":24,"value":659},"rpl-clr-gradient-vertical",{"type":19,"tag":558,"props":661,"children":662},{},[663],{"type":24,"value":274},{"type":19,"tag":236,"props":665,"children":667},{"id":666},"typography-colour-tokens",[668],{"type":24,"value":669},"Typography colour tokens",{"type":24,"value":671},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":528,"props":673,"children":674},{},[675,689],{"type":19,"tag":532,"props":676,"children":677},{},[678],{"type":19,"tag":536,"props":679,"children":680},{},[681,685],{"type":19,"tag":540,"props":682,"children":683},{},[684],{"type":24,"value":544},{"type":19,"tag":540,"props":686,"children":687},{},[688],{"type":24,"value":549},{"type":19,"tag":551,"props":690,"children":691},{},[692,705,718,731,743,755],{"type":19,"tag":536,"props":693,"children":694},{},[695,700],{"type":19,"tag":558,"props":696,"children":697},{},[698],{"type":24,"value":699},"rpl-clr-type-primary-contrast",{"type":19,"tag":558,"props":701,"children":702},{},[703],{"type":24,"value":704},"Automatic (based on ‘rlp-clr-primary’ contrast requirements)",{"type":19,"tag":536,"props":706,"children":707},{},[708,713],{"type":19,"tag":558,"props":709,"children":710},{},[711],{"type":24,"value":712},"rpl-clr-type-primary-contrast-alpha",{"type":19,"tag":558,"props":714,"children":715},{},[716],{"type":24,"value":717},"Automatic (based on ‘rlp-clr-type-primary-contrast')",{"type":19,"tag":536,"props":719,"children":720},{},[721,726],{"type":19,"tag":558,"props":722,"children":723},{},[724],{"type":24,"value":725},"rpl-clr-type-accent-contrast",{"type":19,"tag":558,"props":727,"children":728},{},[729],{"type":24,"value":730},"Automatic (based on ‘rlp-clr-accent’ contrast requirements)",{"type":19,"tag":536,"props":732,"children":733},{},[734,739],{"type":19,"tag":558,"props":735,"children":736},{},[737],{"type":24,"value":738},"rpl-clr-type-primary-accessible",{"type":19,"tag":558,"props":740,"children":741},{},[742],{"type":24,"value":704},{"type":19,"tag":536,"props":744,"children":745},{},[746,751],{"type":19,"tag":558,"props":747,"children":748},{},[749],{"type":24,"value":750},"rpl-clr-type-primary-alt-accessible",{"type":19,"tag":558,"props":752,"children":753},{},[754],{"type":24,"value":704},{"type":19,"tag":536,"props":756,"children":757},{},[758,763],{"type":19,"tag":558,"props":759,"children":760},{},[761],{"type":24,"value":762},"rpl-clr-type-focus-contrast",{"type":19,"tag":558,"props":764,"children":765},{},[766],{"type":24,"value":767},"Automatic (based on ‘rlp-clr-focus’ contrast requirements)",{"type":19,"tag":236,"props":769,"children":771},{"id":770},"footer-specific-optional",[772],{"type":24,"value":773},"Footer-specific (optional)",{"type":19,"tag":20,"props":775,"children":776},{},[777,779,784],{"type":24,"value":778},"See: ",{"type":19,"tag":35,"props":780,"children":781},{"href":48},[782],{"type":24,"value":783},"component-specific theming",{"type":24,"value":42},{"type":24,"value":786},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":528,"props":788,"children":789},{},[790,804],{"type":19,"tag":532,"props":791,"children":792},{},[793],{"type":19,"tag":536,"props":794,"children":795},{},[796,800],{"type":19,"tag":540,"props":797,"children":798},{},[799],{"type":24,"value":544},{"type":19,"tag":540,"props":801,"children":802},{},[803],{"type":24,"value":549},{"type":19,"tag":551,"props":805,"children":806},{},[807,820,832,845],{"type":19,"tag":536,"props":808,"children":809},{},[810,815],{"type":19,"tag":558,"props":811,"children":812},{},[813],{"type":24,"value":814},"rpl-clr-footer",{"type":19,"tag":558,"props":816,"children":817},{},[818],{"type":24,"value":819},"Custom or automatic",{"type":19,"tag":536,"props":821,"children":822},{},[823,828],{"type":19,"tag":558,"props":824,"children":825},{},[826],{"type":24,"value":827},"rpl-clr-footer-alt",{"type":19,"tag":558,"props":829,"children":830},{},[831],{"type":24,"value":819},{"type":19,"tag":536,"props":833,"children":834},{},[835,840],{"type":19,"tag":558,"props":836,"children":837},{},[838],{"type":24,"value":839},"rpl-clr-footer-contrast",{"type":19,"tag":558,"props":841,"children":842},{},[843],{"type":24,"value":844},"Automatic (based on ‘rlp-clr-footer’ contrast requirements)",{"type":19,"tag":536,"props":846,"children":847},{},[848,853],{"type":19,"tag":558,"props":849,"children":850},{},[851],{"type":24,"value":852},"rpl-clr-type-footer-accessible",{"type":19,"tag":558,"props":854,"children":855},{},[856],{"type":24,"value":844},{"type":19,"tag":74,"props":858,"children":859},{},[],{"type":19,"tag":111,"props":861,"children":863},{"id":862},"automatic-colour-token-logic",[864],{"type":24,"value":865},"Automatic Colour Token Logic",{"type":19,"tag":20,"props":867,"children":868},{},[869],{"type":24,"value":870},"Based on the colour contrast requirements for the primary, accent and focus colours, some tokens are automatic to aim to conform to WCAG 2.0 AA colour contrast accessibility.",{"type":19,"tag":27,"props":872,"children":873},{},[874,879],{"type":19,"tag":31,"props":875,"children":876},{},[877],{"type":24,"value":878},"‘Light’ means the colour (for example, primary) is AA compliant with dark type (rpl-clr-dark / #1A1A1A).",{"type":19,"tag":31,"props":880,"children":881},{},[882],{"type":24,"value":883},"‘Dark’ means the colour (for example, primary) is AA compliant with light type (rpl-clr-light / #FFFFFF).",{"type":19,"tag":236,"props":885,"children":887},{"id":886},"primary-access-focus-and-link",[888],{"type":24,"value":889},"Primary, Access, Focus and Link",{"type":19,"tag":891,"props":892,"children":894},"h4",{"id":893},"primary",[895],{"type":24,"value":896},"Primary",{"type":24,"value":898},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":528,"props":900,"children":901},{},[902,922],{"type":19,"tag":532,"props":903,"children":904},{},[905],{"type":19,"tag":536,"props":906,"children":907},{},[908,912,917],{"type":19,"tag":540,"props":909,"children":910},{},[911],{"type":24,"value":544},{"type":19,"tag":540,"props":913,"children":914},{},[915],{"type":24,"value":916},"Colour ‘Dark’",{"type":19,"tag":540,"props":918,"children":919},{},[920],{"type":24,"value":921},"Colour 'Light",{"type":19,"tag":551,"props":923,"children":924},{},[925,941,958,974,989],{"type":19,"tag":536,"props":926,"children":927},{},[928,932,937],{"type":19,"tag":558,"props":929,"children":930},{},[931],{"type":24,"value":586},{"type":19,"tag":558,"props":933,"children":934},{},[935],{"type":24,"value":936},"rpl-clr-primary at 50% opacity",{"type":19,"tag":558,"props":938,"children":939},{},[940],{"type":24,"value":936},{"type":19,"tag":536,"props":942,"children":943},{},[944,948,953],{"type":19,"tag":558,"props":945,"children":946},{},[947],{"type":24,"value":699},{"type":19,"tag":558,"props":949,"children":950},{},[951],{"type":24,"value":952},"rpl-clr-light",{"type":19,"tag":558,"props":954,"children":955},{},[956],{"type":24,"value":957},"rpl-clr-dark",{"type":19,"tag":536,"props":959,"children":960},{},[961,965,970],{"type":19,"tag":558,"props":962,"children":963},{},[964],{"type":24,"value":712},{"type":19,"tag":558,"props":966,"children":967},{},[968],{"type":24,"value":969},"rpl-clr-type-primary-contrast at 75% opacity",{"type":19,"tag":558,"props":971,"children":972},{},[973],{"type":24,"value":969},{"type":19,"tag":536,"props":975,"children":976},{},[977,981,985],{"type":19,"tag":558,"props":978,"children":979},{},[980],{"type":24,"value":738},{"type":19,"tag":558,"props":982,"children":983},{},[984],{"type":24,"value":562},{"type":19,"tag":558,"props":986,"children":987},{},[988],{"type":24,"value":957},{"type":19,"tag":536,"props":990,"children":991},{},[992,996,1001],{"type":19,"tag":558,"props":993,"children":994},{},[995],{"type":24,"value":750},{"type":19,"tag":558,"props":997,"children":998},{},[999],{"type":24,"value":1000},"rlpl-clr-primary-alt",{"type":19,"tag":558,"props":1002,"children":1003},{},[1004],{"type":24,"value":957},{"type":19,"tag":891,"props":1006,"children":1008},{"id":1007},"accent",[1009],{"type":24,"value":1010},"Accent",{"type":24,"value":1012},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":528,"props":1014,"children":1015},{},[1016,1034],{"type":19,"tag":532,"props":1017,"children":1018},{},[1019],{"type":19,"tag":536,"props":1020,"children":1021},{},[1022,1026,1030],{"type":19,"tag":540,"props":1023,"children":1024},{},[1025],{"type":24,"value":544},{"type":19,"tag":540,"props":1027,"children":1028},{},[1029],{"type":24,"value":916},{"type":19,"tag":540,"props":1031,"children":1032},{},[1033],{"type":24,"value":921},{"type":19,"tag":551,"props":1035,"children":1036},{},[1037],{"type":19,"tag":536,"props":1038,"children":1039},{},[1040,1044,1048],{"type":19,"tag":558,"props":1041,"children":1042},{},[1043],{"type":24,"value":725},{"type":19,"tag":558,"props":1045,"children":1046},{},[1047],{"type":24,"value":952},{"type":19,"tag":558,"props":1049,"children":1050},{},[1051],{"type":24,"value":957},{"type":19,"tag":891,"props":1053,"children":1055},{"id":1054},"focus",[1056],{"type":24,"value":1057},"Focus",{"type":24,"value":1012},{"type":19,"tag":528,"props":1060,"children":1061},{},[1062,1080],{"type":19,"tag":532,"props":1063,"children":1064},{},[1065],{"type":19,"tag":536,"props":1066,"children":1067},{},[1068,1072,1076],{"type":19,"tag":540,"props":1069,"children":1070},{},[1071],{"type":24,"value":544},{"type":19,"tag":540,"props":1073,"children":1074},{},[1075],{"type":24,"value":916},{"type":19,"tag":540,"props":1077,"children":1078},{},[1079],{"type":24,"value":921},{"type":19,"tag":551,"props":1081,"children":1082},{},[1083],{"type":19,"tag":536,"props":1084,"children":1085},{},[1086,1090,1094],{"type":19,"tag":558,"props":1087,"children":1088},{},[1089],{"type":24,"value":762},{"type":19,"tag":558,"props":1091,"children":1092},{},[1093],{"type":24,"value":952},{"type":19,"tag":558,"props":1095,"children":1096},{},[1097],{"type":24,"value":957},{"type":19,"tag":891,"props":1099,"children":1101},{"id":1100},"link",[1102],{"type":24,"value":1103},"Link",{"type":24,"value":1105},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":528,"props":1107,"children":1108},{},[1109,1127],{"type":19,"tag":532,"props":1110,"children":1111},{},[1112],{"type":19,"tag":536,"props":1113,"children":1114},{},[1115,1119,1123],{"type":19,"tag":540,"props":1116,"children":1117},{},[1118],{"type":24,"value":544},{"type":19,"tag":540,"props":1120,"children":1121},{},[1122],{"type":24,"value":916},{"type":19,"tag":540,"props":1124,"children":1125},{},[1126],{"type":24,"value":921},{"type":19,"tag":551,"props":1128,"children":1129},{},[1130,1153],{"type":19,"tag":536,"props":1131,"children":1132},{},[1133,1136,1145],{"type":19,"tag":558,"props":1134,"children":1135},{},[],{"type":19,"tag":558,"props":1137,"children":1138},{},[1139],{"type":19,"tag":1140,"props":1141,"children":1142},"em",{},[1143],{"type":24,"value":1144},"If Primary ‘Dark’",{"type":19,"tag":558,"props":1146,"children":1147},{},[1148],{"type":19,"tag":1140,"props":1149,"children":1150},{},[1151],{"type":24,"value":1152},"If Primary ‘Light’",{"type":19,"tag":536,"props":1154,"children":1155},{},[1156,1160,1164],{"type":19,"tag":558,"props":1157,"children":1158},{},[1159],{"type":24,"value":635},{"type":19,"tag":558,"props":1161,"children":1162},{},[1163],{"type":24,"value":562},{"type":19,"tag":558,"props":1165,"children":1166},{},[1167],{"type":24,"value":274},{"type":19,"tag":236,"props":1169,"children":1171},{"id":1170},"gradient",[1172],{"type":24,"value":1173},"Gradient",{"type":19,"tag":20,"props":1175,"children":1176},{},[1177],{"type":24,"value":1178},"Including a gradient is optional for theming.",{"type":19,"tag":20,"props":1180,"children":1181},{},[1182],{"type":24,"value":1183},"If a gradient is not used, 'rpl-clr-accent' will be used in its place.",{"type":19,"tag":891,"props":1185,"children":1187},{"id":1186},"gradient-1",[1188],{"type":24,"value":1173},{"type":24,"value":1105},{"type":19,"tag":528,"props":1191,"children":1192},{},[1193,1211],{"type":19,"tag":532,"props":1194,"children":1195},{},[1196],{"type":19,"tag":536,"props":1197,"children":1198},{},[1199,1203,1207],{"type":19,"tag":540,"props":1200,"children":1201},{},[1202],{"type":24,"value":544},{"type":19,"tag":540,"props":1204,"children":1205},{},[1206],{"type":24,"value":1173},{"type":19,"tag":540,"props":1208,"children":1209},{},[1210],{"type":24,"value":1010},{"type":19,"tag":551,"props":1212,"children":1213},{},[1214,1230],{"type":19,"tag":536,"props":1215,"children":1216},{},[1217,1221,1226],{"type":19,"tag":558,"props":1218,"children":1219},{},[1220],{"type":24,"value":647},{"type":19,"tag":558,"props":1222,"children":1223},{},[1224],{"type":24,"value":1225},"rpl-clr-gradient (90 degrees)",{"type":19,"tag":558,"props":1227,"children":1228},{},[1229],{"type":24,"value":599},{"type":19,"tag":536,"props":1231,"children":1232},{},[1233,1237,1242],{"type":19,"tag":558,"props":1234,"children":1235},{},[1236],{"type":24,"value":659},{"type":19,"tag":558,"props":1238,"children":1239},{},[1240],{"type":24,"value":1241},"rpl-clr-gradient (180 degrees)",{"type":19,"tag":558,"props":1243,"children":1244},{},[1245],{"type":24,"value":599},{"title":10,"searchDepth":1247,"depth":1247,"links":1248},2,[1249,1250,1255,1258,1263],{"id":113,"depth":1247,"text":40},{"id":209,"depth":1247,"text":51,"children":1251},[1252,1254],{"id":229,"depth":1253,"text":240},3,{"id":271,"depth":1253,"text":274},{"id":301,"depth":1247,"text":61,"children":1256},[1257],{"id":412,"depth":1253,"text":415},{"id":493,"depth":1247,"text":496,"children":1259},[1260,1261,1262],{"id":522,"depth":1253,"text":14},{"id":666,"depth":1253,"text":669},{"id":770,"depth":1253,"text":773},{"id":862,"depth":1247,"text":865,"children":1264},[1265,1266],{"id":886,"depth":1253,"text":889},{"id":1170,"depth":1253,"text":1173},"markdown","content:design-system:2.design:4.theming-guidance-for-designers.md","content","design-system/2.design/4.theming-guidance-for-designers.md","md",["ShallowRef",1273],["ShallowReactive",1274],{"/design-system/design/theming-guidance-for-designers":1275},[1276,1282],{"_path":1277,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":1278,"description":1279,"layout":13,"label":14,"_type":1267,"_id":1280,"_source":1269,"_file":1281,"_extension":1271},"/design-system/design/design-tokens","Design tokens","Design tokens store our design decisions in the Ripple Design System. They are the single source of truth.","content:design-system:2.design:3.design-tokens.md","design-system/2.design/3.design-tokens.md",{"_path":1283,"_dir":1284,"_draft":9,"_partial":9,"_locale":10,"title":1285,"description":1286,"layout":13,"links":1287,"_type":1267,"_id":1294,"_source":1269,"_file":1295,"_extension":1271},"/design-system/develop/getting-started","develop","Getting started","Information for developers using the Ripple 2 UI libraries",[1288,1291],{"text":1289,"url":1290},"Github","https://github.com/dpc-sdp/ripple-framework",{"text":1292,"url":1293},"Storybook","/storybook","content:design-system:3.develop:1.getting-started.md","design-system/3.develop/1.getting-started.md",["ShallowRef",1297],{},[1299,1304,1546],{"title":1300,"_path":1301,"icon":1302,"layout":1303},"Ripple Design System","/","carbon:home","home",{"title":1305,"_path":1306,"children":1307},"Design System","/design-system",[1308,1324,1335,1364,1398],{"title":1309,"_path":1310,"children":1311},"About","/design-system/about",[1312,1315,1318,1321],{"title":1313,"_path":1314,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":1316,"_path":1317,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":1319,"_path":1320,"layout":13},"Support","/design-system/about/getting-support",{"title":1322,"_path":1323,"layout":13},"Contributing","/design-system/about/contributing",{"title":1325,"_path":1326,"children":1327},"Design","/design-system/design",[1328,1330,1333,1334],{"title":1285,"_path":1329,"layout":13},"/design-system/design/getting-started",{"title":1331,"_path":1332,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":1278,"_path":1277,"layout":13},{"title":11,"_path":7,"layout":13},{"title":1336,"_path":1337,"children":1338},"Develop","/design-system/develop",[1339,1340,1342,1345],{"title":1285,"_path":1283,"layout":13},{"title":1322,"_path":1341,"layout":13},"/design-system/develop/contributing",{"title":1343,"_path":1344,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":1346,"_path":1347,"children":1348,"layout":13},"Usage","/design-system/develop/usage",[1349,1352,1355,1358,1361],{"title":1350,"_path":1351,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":1353,"_path":1354,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":1356,"_path":1357,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":1359,"_path":1360,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":1362,"_path":1363,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":1365,"_path":1366,"children":1367},"Styles","/design-system/styles",[1368,1371,1374,1377,1380,1383,1386,1389,1392,1395],{"title":1369,"_path":1370,"layout":13},"Colour","/design-system/styles/colour",{"title":1372,"_path":1373,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":1375,"_path":1376,"layout":13},"Grid","/design-system/styles/grid",{"title":1378,"_path":1379,"layout":13},"Icons","/design-system/styles/icons",{"title":1381,"_path":1382,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":1384,"_path":1385,"layout":13},"Layout","/design-system/styles/layout",{"title":1387,"_path":1388,"layout":13},"Logo","/design-system/styles/logo",{"title":1390,"_path":1391,"layout":13},"Motion","/design-system/styles/motion",{"title":1393,"_path":1394,"layout":13},"Spacing","/design-system/styles/spacing",{"title":1396,"_path":1397,"layout":13},"Typography","/design-system/styles/typography",{"title":1399,"_path":1400,"children":1401},"Components","/design-system/components",[1402,1405,1408,1411,1414,1417,1420,1423,1426,1429,1432,1435,1438,1441,1444,1447,1450,1453,1456,1459,1462,1465,1468,1471,1474,1477,1480,1483,1486,1489,1492,1495,1498,1501,1504,1507,1510,1513,1516,1519,1522,1525,1528,1531,1534,1537,1540,1543],{"title":1403,"_path":1404,"layout":13},"Accordion","/design-system/components/accordion",{"title":1406,"_path":1407,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":1409,"_path":1410,"layout":13},"Alert","/design-system/components/alert",{"title":1412,"_path":1413,"layout":13},"Block quote","/design-system/components/block-quote",{"title":1415,"_path":1416,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":1418,"_path":1419,"layout":13},"Button","/design-system/components/button",{"title":1421,"_path":1422,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":1424,"_path":1425,"layout":13},"Callout","/design-system/components/callout",{"title":1427,"_path":1428,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":1430,"_path":1431,"layout":13},"Card","/design-system/components/card",{"title":1433,"_path":1434,"layout":13},"Carousel","/design-system/components/carousel",{"title":1436,"_path":1437,"layout":13},"Category grid","/design-system/components/category-grid",{"title":1439,"_path":1440,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":1442,"_path":1443,"layout":13},"Chip","/design-system/components/chip",{"title":1445,"_path":1446,"layout":13},"Contact us","/design-system/components/contact-us",{"title":1448,"_path":1449,"layout":13},"Date input","/design-system/components/date-input",{"title":1451,"_path":1452,"layout":13},"Detail list","/design-system/components/detail-list",{"title":1454,"_path":1455,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":1457,"_path":1458,"layout":13},"File","/design-system/components/file",{"title":1460,"_path":1461,"layout":13},"Footer","/design-system/components/footer",{"title":1463,"_path":1464,"layout":13},"Form","/design-system/components/form",{"title":1466,"_path":1467,"layout":13},"Form alert","/design-system/components/form-alert",{"title":1469,"_path":1470,"layout":13},"Header","/design-system/components/header",{"title":1472,"_path":1473,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":1475,"_path":1476,"layout":13},"Input field","/design-system/components/input-field",{"title":1478,"_path":1479,"layout":13},"Key dates","/design-system/components/key-dates",{"title":1481,"_path":1482,"layout":13},"Media","/design-system/components/media",{"title":1484,"_path":1485,"layout":13},"Media embed","/design-system/components/media-embed",{"title":1487,"_path":1488,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":1490,"_path":1491,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":1493,"_path":1494,"layout":13},"Option button","/design-system/components/option-button",{"title":1496,"_path":1497,"layout":13},"Page action","/design-system/components/page-action",{"title":1499,"_path":1500,"layout":13},"Pagination","/design-system/components/pagination",{"title":1502,"_path":1503,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":1505,"_path":1506,"layout":13},"Profile","/design-system/components/profile",{"title":1508,"_path":1509,"layout":13},"Radio button","/design-system/components/radio-button",{"title":1511,"_path":1512,"layout":13},"Related links","/design-system/components/related-links",{"title":1514,"_path":1515,"layout":13},"Results listing","/design-system/components/results-listing",{"title":1517,"_path":1518,"layout":13},"Search bar","/design-system/components/search-bar",{"title":1520,"_path":1521,"layout":13},"Skip link","/design-system/components/skip-link",{"title":1523,"_path":1524,"layout":13},"Social share","/design-system/components/social-share",{"title":1526,"_path":1527,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":1529,"_path":1530,"layout":13},"Table","/design-system/components/table",{"title":1532,"_path":1533,"layout":13},"Tabs","/design-system/components/tabs",{"title":1535,"_path":1536,"layout":13},"Tag","/design-system/components/tag",{"title":1538,"_path":1539,"layout":13},"Text area","/design-system/components/text-area",{"title":1541,"_path":1542,"layout":13},"Timeline","/design-system/components/timeline",{"title":1544,"_path":1545,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":1547,"_path":1548,"children":1549,"layout":13},"Ripple Framework","/framework",[1550,1551,1569,1591],{"title":1547,"_path":1548,"layout":13},{"title":1552,"_path":1553,"children":1554},"Key Concepts","/framework/key-concepts",[1555,1557,1560,1563,1566],{"title":1356,"_path":1556,"layout":13},"/framework/key-concepts/nuxt",{"title":1558,"_path":1559,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":1561,"_path":1562,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":1564,"_path":1565,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":1567,"_path":1568,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":1570,"_path":1571,"children":1572},"Guides","/framework/guides",[1573,1576,1579,1582,1585,1588],{"title":1574,"_path":1575,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":1577,"_path":1578,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":1580,"_path":1581,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":1583,"_path":1584,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":1586,"_path":1587,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":1589,"_path":1590,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":1592,"_path":1593,"layout":13},"Core modules","/framework/core-modules",["Reactive",1595],["Set"],["Reactive",1597],{"module-navigation":12},true,"/design-system/design/theming-guidance-for-designers/",1714695653515]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/develop/contributing/_payload.json b/design-system/develop/contributing/_payload.json
index 84dbf53298..526fae7cf9 100644
--- a/design-system/develop/contributing/_payload.json
+++ b/design-system/develop/contributing/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":40,"items":41},"/design-system/develop","Develop",true,[42,44,46,49],{"id":43,"text":27,"url":43,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":40,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":7,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695151695]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":40,"items":41},"/design-system/develop","Develop",true,[42,44,46,49],{"id":43,"text":27,"url":43,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":40,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":7,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695649936]
\ No newline at end of file
diff --git a/design-system/develop/contributing/index.html b/design-system/develop/contributing/index.html
index 90bd598cfd..2024f43679 100644
--- a/design-system/develop/contributing/index.html
+++ b/design-system/develop/contributing/index.html
@@ -22,57 +22,57 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.lp_k9Hpd.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.Czpq-HHw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -84,8 +84,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Contributing</h1><p class="rpl-type-p-large" data-v-3163c6df>Information for developers wishing to contribute to the Ripple 2 UI libraries</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><blockquote class="rpl-callout"><!--[--><p><!--[-->When contributing or participating in discussions, ensure that you are following our <a href="https://github.com/dpc-sdp/ripple-framework/blob/develop/CODE_OF_CONDUCT.md" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->contributor code of conduct<!--]--><!--]--><!----><!--]--></a><!--]--></p><!--]--></blockquote><h2 class="rpl-type-h2 docs-h2" id="report-an-issue" data-v-fff5b905><a href="#report-an-issue" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Report an issue<!--]--></a></h2><p><!--[-->If you find an issue in Ripple, you can create an issue in github here <a href="https://github.com/dpc-sdp/ripple-framework/issues" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://github.com/dpc-sdp/ripple-framework/issues<!--]--><!--]--><!----><!--]--></a>. Make sure to follow the template provided and provide plenty of detail so that your issue has a better chance of being fixed.<!--]--></p><p><!--[-->Ripple is an open source project, so PRs are always welcomed if you&#39;ve already found a fix for the issue.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="join-the-discussion" data-v-fff5b905><a href="#join-the-discussion" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Join the discussion<!--]--></a></h2><p><!--[-->Do you have an idea for a new component or feature? Use the <a href="https://github.com/dpc-sdp/ripple-framework/discussions" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Discussions<!--]--><!--]--><!----><!--]--></a> feature in Ripple Github repo to start the conversation.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="writing-code" data-v-fff5b905><a href="#writing-code" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Writing code<!--]--></a></h2><p><!--[-->If you are ready to write some code in the Ripple git repo, please see the <a href="https://github.com/dpc-sdp/ripple-framework/blob/develop/CONTRIBUTING.md" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Contributing guide<!--]--><!--]--><!----><!--]--></a> in Github.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/2.contributing.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/contributing/_payload.json">[{"state":1,"once":435,"_errors":437,"serverRendered":440,"path":7,"prerenderedAt":441},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":114,"$sdd-globals":137,"$sdd-navigation":139},["ShallowRef",4],["ShallowReactive",5],{"/design-system/develop/contributing":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":109,"_id":110,"_source":111,"_file":112,"_extension":113},"/design-system/develop/contributing","develop",false,"","Contributing","Information for developers wishing to contribute to the Ripple 2 UI libraries","page",{"type":15,"children":16,"toc":103},"root",[17,38,45,58,63,69,83,89],{"type":18,"tag":19,"props":20,"children":21},"element","blockquote",{},[22],{"type":18,"tag":23,"props":24,"children":25},"p",{},[26,29],{"type":27,"value":28},"text","When contributing or participating in discussions, ensure that you are following our ",{"type":18,"tag":30,"props":31,"children":35},"a",{"href":32,"rel":33},"https://github.com/dpc-sdp/ripple-framework/blob/develop/CODE_OF_CONDUCT.md",[34],"nofollow",[36],{"type":27,"value":37},"contributor code of conduct",{"type":18,"tag":39,"props":40,"children":42},"h2",{"id":41},"report-an-issue",[43],{"type":27,"value":44},"Report an issue",{"type":18,"tag":23,"props":46,"children":47},{},[48,50,56],{"type":27,"value":49},"If you find an issue in Ripple, you can create an issue in github here ",{"type":18,"tag":30,"props":51,"children":54},{"href":52,"rel":53},"https://github.com/dpc-sdp/ripple-framework/issues",[34],[55],{"type":27,"value":52},{"type":27,"value":57},". Make sure to follow the template provided and provide plenty of detail so that your issue has a better chance of being fixed.",{"type":18,"tag":23,"props":59,"children":60},{},[61],{"type":27,"value":62},"Ripple is an open source project, so PRs are always welcomed if you've already found a fix for the issue.",{"type":18,"tag":39,"props":64,"children":66},{"id":65},"join-the-discussion",[67],{"type":27,"value":68},"Join the discussion",{"type":18,"tag":23,"props":70,"children":71},{},[72,74,81],{"type":27,"value":73},"Do you have an idea for a new component or feature? Use the ",{"type":18,"tag":30,"props":75,"children":78},{"href":76,"rel":77},"https://github.com/dpc-sdp/ripple-framework/discussions",[34],[79],{"type":27,"value":80},"Discussions",{"type":27,"value":82}," feature in Ripple Github repo to start the conversation.",{"type":18,"tag":39,"props":84,"children":86},{"id":85},"writing-code",[87],{"type":27,"value":88},"Writing code",{"type":18,"tag":23,"props":90,"children":91},{},[92,94,101],{"type":27,"value":93},"If you are ready to write some code in the Ripple git repo, please see the ",{"type":18,"tag":30,"props":95,"children":98},{"href":96,"rel":97},"https://github.com/dpc-sdp/ripple-framework/blob/develop/CONTRIBUTING.md",[34],[99],{"type":27,"value":100},"Contributing guide",{"type":27,"value":102}," in Github.",{"title":10,"searchDepth":104,"depth":104,"links":105},2,[106,107,108],{"id":41,"depth":104,"text":44},{"id":65,"depth":104,"text":68},{"id":85,"depth":104,"text":88},"markdown","content:design-system:3.develop:2.contributing.md","content","design-system/3.develop/2.contributing.md","md",["ShallowRef",115],["ShallowReactive",116],{"/design-system/develop/contributing":117},[118,131],{"_path":119,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":120,"description":121,"layout":13,"links":122,"_type":109,"_id":129,"_source":111,"_file":130,"_extension":113},"/design-system/develop/getting-started","Getting started","Information for developers using the Ripple 2 UI libraries",[123,126],{"text":124,"url":125},"Github","https://github.com/dpc-sdp/ripple-framework",{"text":127,"url":128},"Storybook","/storybook","content:design-system:3.develop:1.getting-started.md","design-system/3.develop/1.getting-started.md",{"_path":132,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":133,"description":134,"layout":13,"_type":109,"_id":135,"_source":111,"_file":136,"_extension":113},"/design-system/develop/theming","Theme and brand application","Information for developers using Ripple 2 UI libraries","content:design-system:3.develop:2.theming.md","design-system/3.develop/2.theming.md",["ShallowRef",138],{},[140,145,387],{"title":141,"_path":142,"icon":143,"layout":144},"Ripple Design System","/","carbon:home","home",{"title":146,"_path":147,"children":148},"Design System","/design-system",[149,164,179,205,239],{"title":150,"_path":151,"children":152},"About","/design-system/about",[153,156,159,162],{"title":154,"_path":155,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":157,"_path":158,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":160,"_path":161,"layout":13},"Support","/design-system/about/getting-support",{"title":11,"_path":163,"layout":13},"/design-system/about/contributing",{"title":165,"_path":166,"children":167},"Design","/design-system/design",[168,170,173,176],{"title":120,"_path":169,"layout":13},"/design-system/design/getting-started",{"title":171,"_path":172,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":174,"_path":175,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":177,"_path":178,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":180,"_path":181,"children":182},"Develop","/design-system/develop",[183,184,185,186],{"title":120,"_path":119,"layout":13},{"title":11,"_path":7,"layout":13},{"title":133,"_path":132,"layout":13},{"title":187,"_path":188,"children":189,"layout":13},"Usage","/design-system/develop/usage",[190,193,196,199,202],{"title":191,"_path":192,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":194,"_path":195,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":197,"_path":198,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":200,"_path":201,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":203,"_path":204,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":206,"_path":207,"children":208},"Styles","/design-system/styles",[209,212,215,218,221,224,227,230,233,236],{"title":210,"_path":211,"layout":13},"Colour","/design-system/styles/colour",{"title":213,"_path":214,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":216,"_path":217,"layout":13},"Grid","/design-system/styles/grid",{"title":219,"_path":220,"layout":13},"Icons","/design-system/styles/icons",{"title":222,"_path":223,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":225,"_path":226,"layout":13},"Layout","/design-system/styles/layout",{"title":228,"_path":229,"layout":13},"Logo","/design-system/styles/logo",{"title":231,"_path":232,"layout":13},"Motion","/design-system/styles/motion",{"title":234,"_path":235,"layout":13},"Spacing","/design-system/styles/spacing",{"title":237,"_path":238,"layout":13},"Typography","/design-system/styles/typography",{"title":240,"_path":241,"children":242},"Components","/design-system/components",[243,246,249,252,255,258,261,264,267,270,273,276,279,282,285,288,291,294,297,300,303,306,309,312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384],{"title":244,"_path":245,"layout":13},"Accordion","/design-system/components/accordion",{"title":247,"_path":248,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":250,"_path":251,"layout":13},"Alert","/design-system/components/alert",{"title":253,"_path":254,"layout":13},"Block quote","/design-system/components/block-quote",{"title":256,"_path":257,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":259,"_path":260,"layout":13},"Button","/design-system/components/button",{"title":262,"_path":263,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":265,"_path":266,"layout":13},"Callout","/design-system/components/callout",{"title":268,"_path":269,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":271,"_path":272,"layout":13},"Card","/design-system/components/card",{"title":274,"_path":275,"layout":13},"Carousel","/design-system/components/carousel",{"title":277,"_path":278,"layout":13},"Category grid","/design-system/components/category-grid",{"title":280,"_path":281,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":283,"_path":284,"layout":13},"Chip","/design-system/components/chip",{"title":286,"_path":287,"layout":13},"Contact us","/design-system/components/contact-us",{"title":289,"_path":290,"layout":13},"Date input","/design-system/components/date-input",{"title":292,"_path":293,"layout":13},"Detail list","/design-system/components/detail-list",{"title":295,"_path":296,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":298,"_path":299,"layout":13},"File","/design-system/components/file",{"title":301,"_path":302,"layout":13},"Footer","/design-system/components/footer",{"title":304,"_path":305,"layout":13},"Form","/design-system/components/form",{"title":307,"_path":308,"layout":13},"Form alert","/design-system/components/form-alert",{"title":310,"_path":311,"layout":13},"Header","/design-system/components/header",{"title":313,"_path":314,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":316,"_path":317,"layout":13},"Input field","/design-system/components/input-field",{"title":319,"_path":320,"layout":13},"Key dates","/design-system/components/key-dates",{"title":322,"_path":323,"layout":13},"Media","/design-system/components/media",{"title":325,"_path":326,"layout":13},"Media embed","/design-system/components/media-embed",{"title":328,"_path":329,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":331,"_path":332,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":334,"_path":335,"layout":13},"Option button","/design-system/components/option-button",{"title":337,"_path":338,"layout":13},"Page action","/design-system/components/page-action",{"title":340,"_path":341,"layout":13},"Pagination","/design-system/components/pagination",{"title":343,"_path":344,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":346,"_path":347,"layout":13},"Profile","/design-system/components/profile",{"title":349,"_path":350,"layout":13},"Radio button","/design-system/components/radio-button",{"title":352,"_path":353,"layout":13},"Related links","/design-system/components/related-links",{"title":355,"_path":356,"layout":13},"Results listing","/design-system/components/results-listing",{"title":358,"_path":359,"layout":13},"Search bar","/design-system/components/search-bar",{"title":361,"_path":362,"layout":13},"Skip link","/design-system/components/skip-link",{"title":364,"_path":365,"layout":13},"Social share","/design-system/components/social-share",{"title":367,"_path":368,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":370,"_path":371,"layout":13},"Table","/design-system/components/table",{"title":373,"_path":374,"layout":13},"Tabs","/design-system/components/tabs",{"title":376,"_path":377,"layout":13},"Tag","/design-system/components/tag",{"title":379,"_path":380,"layout":13},"Text area","/design-system/components/text-area",{"title":382,"_path":383,"layout":13},"Timeline","/design-system/components/timeline",{"title":385,"_path":386,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":388,"_path":389,"children":390,"layout":13},"Ripple Framework","/framework",[391,392,410,432],{"title":388,"_path":389,"layout":13},{"title":393,"_path":394,"children":395},"Key Concepts","/framework/key-concepts",[396,398,401,404,407],{"title":197,"_path":397,"layout":13},"/framework/key-concepts/nuxt",{"title":399,"_path":400,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":402,"_path":403,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":405,"_path":406,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":408,"_path":409,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":411,"_path":412,"children":413},"Guides","/framework/guides",[414,417,420,423,426,429],{"title":415,"_path":416,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":418,"_path":419,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":421,"_path":422,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":424,"_path":425,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":427,"_path":428,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":430,"_path":431,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":433,"_path":434,"layout":13},"Core modules","/framework/core-modules",["Reactive",436],["Set"],["Reactive",438],{"module-navigation":439},null,true,1714695151695]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Contributing</h1><p class="rpl-type-p-large" data-v-3163c6df>Information for developers wishing to contribute to the Ripple 2 UI libraries</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><blockquote class="rpl-callout"><!--[--><p><!--[-->When contributing or participating in discussions, ensure that you are following our <a href="https://github.com/dpc-sdp/ripple-framework/blob/develop/CODE_OF_CONDUCT.md" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->contributor code of conduct<!--]--><!--]--><!----><!--]--></a><!--]--></p><!--]--></blockquote><h2 class="rpl-type-h2 docs-h2" id="report-an-issue" data-v-fff5b905><a href="#report-an-issue" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Report an issue<!--]--></a></h2><p><!--[-->If you find an issue in Ripple, you can create an issue in github here <a href="https://github.com/dpc-sdp/ripple-framework/issues" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://github.com/dpc-sdp/ripple-framework/issues<!--]--><!--]--><!----><!--]--></a>. Make sure to follow the template provided and provide plenty of detail so that your issue has a better chance of being fixed.<!--]--></p><p><!--[-->Ripple is an open source project, so PRs are always welcomed if you&#39;ve already found a fix for the issue.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="join-the-discussion" data-v-fff5b905><a href="#join-the-discussion" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Join the discussion<!--]--></a></h2><p><!--[-->Do you have an idea for a new component or feature? Use the <a href="https://github.com/dpc-sdp/ripple-framework/discussions" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Discussions<!--]--><!--]--><!----><!--]--></a> feature in Ripple Github repo to start the conversation.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="writing-code" data-v-fff5b905><a href="#writing-code" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Writing code<!--]--></a></h2><p><!--[-->If you are ready to write some code in the Ripple git repo, please see the <a href="https://github.com/dpc-sdp/ripple-framework/blob/develop/CONTRIBUTING.md" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Contributing guide<!--]--><!--]--><!----><!--]--></a> in Github.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/2.contributing.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/contributing/_payload.json">[{"state":1,"once":435,"_errors":437,"serverRendered":440,"path":7,"prerenderedAt":441},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":114,"$sdd-globals":137,"$sdd-navigation":139},["ShallowRef",4],["ShallowReactive",5],{"/design-system/develop/contributing":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":109,"_id":110,"_source":111,"_file":112,"_extension":113},"/design-system/develop/contributing","develop",false,"","Contributing","Information for developers wishing to contribute to the Ripple 2 UI libraries","page",{"type":15,"children":16,"toc":103},"root",[17,38,45,58,63,69,83,89],{"type":18,"tag":19,"props":20,"children":21},"element","blockquote",{},[22],{"type":18,"tag":23,"props":24,"children":25},"p",{},[26,29],{"type":27,"value":28},"text","When contributing or participating in discussions, ensure that you are following our ",{"type":18,"tag":30,"props":31,"children":35},"a",{"href":32,"rel":33},"https://github.com/dpc-sdp/ripple-framework/blob/develop/CODE_OF_CONDUCT.md",[34],"nofollow",[36],{"type":27,"value":37},"contributor code of conduct",{"type":18,"tag":39,"props":40,"children":42},"h2",{"id":41},"report-an-issue",[43],{"type":27,"value":44},"Report an issue",{"type":18,"tag":23,"props":46,"children":47},{},[48,50,56],{"type":27,"value":49},"If you find an issue in Ripple, you can create an issue in github here ",{"type":18,"tag":30,"props":51,"children":54},{"href":52,"rel":53},"https://github.com/dpc-sdp/ripple-framework/issues",[34],[55],{"type":27,"value":52},{"type":27,"value":57},". Make sure to follow the template provided and provide plenty of detail so that your issue has a better chance of being fixed.",{"type":18,"tag":23,"props":59,"children":60},{},[61],{"type":27,"value":62},"Ripple is an open source project, so PRs are always welcomed if you've already found a fix for the issue.",{"type":18,"tag":39,"props":64,"children":66},{"id":65},"join-the-discussion",[67],{"type":27,"value":68},"Join the discussion",{"type":18,"tag":23,"props":70,"children":71},{},[72,74,81],{"type":27,"value":73},"Do you have an idea for a new component or feature? Use the ",{"type":18,"tag":30,"props":75,"children":78},{"href":76,"rel":77},"https://github.com/dpc-sdp/ripple-framework/discussions",[34],[79],{"type":27,"value":80},"Discussions",{"type":27,"value":82}," feature in Ripple Github repo to start the conversation.",{"type":18,"tag":39,"props":84,"children":86},{"id":85},"writing-code",[87],{"type":27,"value":88},"Writing code",{"type":18,"tag":23,"props":90,"children":91},{},[92,94,101],{"type":27,"value":93},"If you are ready to write some code in the Ripple git repo, please see the ",{"type":18,"tag":30,"props":95,"children":98},{"href":96,"rel":97},"https://github.com/dpc-sdp/ripple-framework/blob/develop/CONTRIBUTING.md",[34],[99],{"type":27,"value":100},"Contributing guide",{"type":27,"value":102}," in Github.",{"title":10,"searchDepth":104,"depth":104,"links":105},2,[106,107,108],{"id":41,"depth":104,"text":44},{"id":65,"depth":104,"text":68},{"id":85,"depth":104,"text":88},"markdown","content:design-system:3.develop:2.contributing.md","content","design-system/3.develop/2.contributing.md","md",["ShallowRef",115],["ShallowReactive",116],{"/design-system/develop/contributing":117},[118,131],{"_path":119,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":120,"description":121,"layout":13,"links":122,"_type":109,"_id":129,"_source":111,"_file":130,"_extension":113},"/design-system/develop/getting-started","Getting started","Information for developers using the Ripple 2 UI libraries",[123,126],{"text":124,"url":125},"Github","https://github.com/dpc-sdp/ripple-framework",{"text":127,"url":128},"Storybook","/storybook","content:design-system:3.develop:1.getting-started.md","design-system/3.develop/1.getting-started.md",{"_path":132,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":133,"description":134,"layout":13,"_type":109,"_id":135,"_source":111,"_file":136,"_extension":113},"/design-system/develop/theming","Theme and brand application","Information for developers using Ripple 2 UI libraries","content:design-system:3.develop:2.theming.md","design-system/3.develop/2.theming.md",["ShallowRef",138],{},[140,145,387],{"title":141,"_path":142,"icon":143,"layout":144},"Ripple Design System","/","carbon:home","home",{"title":146,"_path":147,"children":148},"Design System","/design-system",[149,164,179,205,239],{"title":150,"_path":151,"children":152},"About","/design-system/about",[153,156,159,162],{"title":154,"_path":155,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":157,"_path":158,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":160,"_path":161,"layout":13},"Support","/design-system/about/getting-support",{"title":11,"_path":163,"layout":13},"/design-system/about/contributing",{"title":165,"_path":166,"children":167},"Design","/design-system/design",[168,170,173,176],{"title":120,"_path":169,"layout":13},"/design-system/design/getting-started",{"title":171,"_path":172,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":174,"_path":175,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":177,"_path":178,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":180,"_path":181,"children":182},"Develop","/design-system/develop",[183,184,185,186],{"title":120,"_path":119,"layout":13},{"title":11,"_path":7,"layout":13},{"title":133,"_path":132,"layout":13},{"title":187,"_path":188,"children":189,"layout":13},"Usage","/design-system/develop/usage",[190,193,196,199,202],{"title":191,"_path":192,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":194,"_path":195,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":197,"_path":198,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":200,"_path":201,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":203,"_path":204,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":206,"_path":207,"children":208},"Styles","/design-system/styles",[209,212,215,218,221,224,227,230,233,236],{"title":210,"_path":211,"layout":13},"Colour","/design-system/styles/colour",{"title":213,"_path":214,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":216,"_path":217,"layout":13},"Grid","/design-system/styles/grid",{"title":219,"_path":220,"layout":13},"Icons","/design-system/styles/icons",{"title":222,"_path":223,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":225,"_path":226,"layout":13},"Layout","/design-system/styles/layout",{"title":228,"_path":229,"layout":13},"Logo","/design-system/styles/logo",{"title":231,"_path":232,"layout":13},"Motion","/design-system/styles/motion",{"title":234,"_path":235,"layout":13},"Spacing","/design-system/styles/spacing",{"title":237,"_path":238,"layout":13},"Typography","/design-system/styles/typography",{"title":240,"_path":241,"children":242},"Components","/design-system/components",[243,246,249,252,255,258,261,264,267,270,273,276,279,282,285,288,291,294,297,300,303,306,309,312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384],{"title":244,"_path":245,"layout":13},"Accordion","/design-system/components/accordion",{"title":247,"_path":248,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":250,"_path":251,"layout":13},"Alert","/design-system/components/alert",{"title":253,"_path":254,"layout":13},"Block quote","/design-system/components/block-quote",{"title":256,"_path":257,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":259,"_path":260,"layout":13},"Button","/design-system/components/button",{"title":262,"_path":263,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":265,"_path":266,"layout":13},"Callout","/design-system/components/callout",{"title":268,"_path":269,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":271,"_path":272,"layout":13},"Card","/design-system/components/card",{"title":274,"_path":275,"layout":13},"Carousel","/design-system/components/carousel",{"title":277,"_path":278,"layout":13},"Category grid","/design-system/components/category-grid",{"title":280,"_path":281,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":283,"_path":284,"layout":13},"Chip","/design-system/components/chip",{"title":286,"_path":287,"layout":13},"Contact us","/design-system/components/contact-us",{"title":289,"_path":290,"layout":13},"Date input","/design-system/components/date-input",{"title":292,"_path":293,"layout":13},"Detail list","/design-system/components/detail-list",{"title":295,"_path":296,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":298,"_path":299,"layout":13},"File","/design-system/components/file",{"title":301,"_path":302,"layout":13},"Footer","/design-system/components/footer",{"title":304,"_path":305,"layout":13},"Form","/design-system/components/form",{"title":307,"_path":308,"layout":13},"Form alert","/design-system/components/form-alert",{"title":310,"_path":311,"layout":13},"Header","/design-system/components/header",{"title":313,"_path":314,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":316,"_path":317,"layout":13},"Input field","/design-system/components/input-field",{"title":319,"_path":320,"layout":13},"Key dates","/design-system/components/key-dates",{"title":322,"_path":323,"layout":13},"Media","/design-system/components/media",{"title":325,"_path":326,"layout":13},"Media embed","/design-system/components/media-embed",{"title":328,"_path":329,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":331,"_path":332,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":334,"_path":335,"layout":13},"Option button","/design-system/components/option-button",{"title":337,"_path":338,"layout":13},"Page action","/design-system/components/page-action",{"title":340,"_path":341,"layout":13},"Pagination","/design-system/components/pagination",{"title":343,"_path":344,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":346,"_path":347,"layout":13},"Profile","/design-system/components/profile",{"title":349,"_path":350,"layout":13},"Radio button","/design-system/components/radio-button",{"title":352,"_path":353,"layout":13},"Related links","/design-system/components/related-links",{"title":355,"_path":356,"layout":13},"Results listing","/design-system/components/results-listing",{"title":358,"_path":359,"layout":13},"Search bar","/design-system/components/search-bar",{"title":361,"_path":362,"layout":13},"Skip link","/design-system/components/skip-link",{"title":364,"_path":365,"layout":13},"Social share","/design-system/components/social-share",{"title":367,"_path":368,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":370,"_path":371,"layout":13},"Table","/design-system/components/table",{"title":373,"_path":374,"layout":13},"Tabs","/design-system/components/tabs",{"title":376,"_path":377,"layout":13},"Tag","/design-system/components/tag",{"title":379,"_path":380,"layout":13},"Text area","/design-system/components/text-area",{"title":382,"_path":383,"layout":13},"Timeline","/design-system/components/timeline",{"title":385,"_path":386,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":388,"_path":389,"children":390,"layout":13},"Ripple Framework","/framework",[391,392,410,432],{"title":388,"_path":389,"layout":13},{"title":393,"_path":394,"children":395},"Key Concepts","/framework/key-concepts",[396,398,401,404,407],{"title":197,"_path":397,"layout":13},"/framework/key-concepts/nuxt",{"title":399,"_path":400,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":402,"_path":403,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":405,"_path":406,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":408,"_path":409,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":411,"_path":412,"children":413},"Guides","/framework/guides",[414,417,420,423,426,429],{"title":415,"_path":416,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":418,"_path":419,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":421,"_path":422,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":424,"_path":425,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":427,"_path":428,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":430,"_path":431,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":433,"_path":434,"layout":13},"Core modules","/framework/core-modules",["Reactive",436],["Set"],["Reactive",438],{"module-navigation":439},null,true,1714695649936]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/develop/getting-started/_payload.json b/design-system/develop/getting-started/_payload.json
index 57348892b7..1cd15b2a9a 100644
--- a/design-system/develop/getting-started/_payload.json
+++ b/design-system/develop/getting-started/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":40,"items":41},"/design-system/develop","Develop",true,[42,44,46,49],{"id":43,"text":27,"url":43,"active":40,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":7,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":7,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695150838]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":40,"items":41},"/design-system/develop","Develop",true,[42,44,46,49],{"id":43,"text":27,"url":43,"active":40,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":7,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":7,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695649088]
\ No newline at end of file
diff --git a/design-system/develop/getting-started/index.html b/design-system/develop/getting-started/index.html
index 9777d9fa11..654a14315a 100644
--- a/design-system/develop/getting-started/index.html
+++ b/design-system/develop/getting-started/index.html
@@ -25,62 +25,62 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.uDpSgjM7.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.lp_k9Hpd.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.F9NVvvm4.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.iJ9KJvnk.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.Czpq-HHw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.GmB4B_NE.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -92,8 +92,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Getting started</h1><p class="rpl-type-p-large" data-v-3163c6df>Information for developers using the Ripple 2 UI libraries</p><ul class="links rpl-u-margin-t-5" data-v-3163c6df><!--[--><li data-v-3163c6df><a href="https://github.com/dpc-sdp/ripple-framework" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p rpl-type-p" target="_blank" data-v-3163c6df data-v-5d4aedf1><!--[--><!--[--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--[-->Github<!--]--><!----><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></li><li data-v-3163c6df><a href="/storybook" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p rpl-type-p" target="_blank" data-v-3163c6df data-v-5d4aedf1><!--[--><!--[--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--[-->Storybook<!--]--><!----><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></li><!--]--></ul></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->This section contains information about the Ripple user interface libraries. These libraries are a collection of UI components which implement the Ripple Design System. The components are written in Vue and are split accross two packages:<!--]--></p><ul><!--[--><li><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-ui-core<!--]--></code>: A collection of common UI components used in SDP sites. For example buttons, cards, icons and typography.<!--]--></li><li><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-ui-forms<!--]--></code>: A collection of form inputs and support for building complex forms via <a href="https://formkit.com/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Formkit<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><blockquote class="rpl-callout"><!--[--><p><!--[--><strong><!--[-->These docs are for Ripple 2<!--]--></strong><!--]--></p><p><!--[-->Ripple 2 is a complete rebuild. If you are looking for information about the previous version of Ripple please visit the <a href="https://github.com/dpc-sdp/ripple" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->original Ripple GitHub repo<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--></blockquote><blockquote class="rpl-callout"><!--[--><p><!--[--><strong><!--[-->Are you developing a site on the SDP platform?<!--]--></strong><!--]--></p><p><!--[-->This section is about the Ripple UI component libraries, and there is a lot more to developing a site on the Single Digital Presence (SDP) stack that is not covered here.<!--]--></p><p><!--[-->For information about using Ripple in SDP sites, visit the <a href="/framework" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Ripple Framework for SDP documentation<!--]--><!--]--><!----><!--]--></a><!--]--></p><!--]--></blockquote><h2 class="rpl-type-h2 docs-h2" id="accessing-the-source-code" data-v-fff5b905><a href="#accessing-the-source-code" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Accessing the Source code<!--]--></a></h2><p><!--[-->Ripple 2 is an open source project and the source code can be found in the <a href="https://github.com/dpc-sdp/ripple-framework" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->ripple-framework monorepo on Github<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><p><!--[-->This monorepo contains a lot more than just the UI libraries so we&#39;ve provided direct links to packages below:<!--]--></p><ul><!--[--><li><!--[--><a href="https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-core" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->View <code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-ui-core<!--]--></code> on Github<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-forms" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->View <code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-ui-forms<!--]--></code> on Github<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="viewing-examples-in-storybook" data-v-fff5b905><a href="#viewing-examples-in-storybook" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Viewing examples in Storybook<!--]--></a></h2><p><!--[-->The Ripple Storybook has information about props and slots that each Vue component supports. <a href="/storybook" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->View the Ripple storybook<!--]--><!--]--><!----><!--]--></a> to start exploring the available components.<!--]--></p><p><!--[-->Most of the examples found on this documentation site link directly examples in storybook.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->See the <a href="/design-system/develop/usage" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->usage<!--]--><!--]--><!----><!--]--></a> guide for information about getting started with the different ways of implementing Ripple.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/1.getting-started.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/getting-started/_payload.json">[{"state":1,"once":551,"_errors":553,"serverRendered":555,"path":7,"prerenderedAt":556},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":238,"$sdd-globals":256,"$sdd-navigation":258},["ShallowRef",4],["ShallowReactive",5],{"/design-system/develop/getting-started":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"links":14,"body":21,"_type":233,"_id":234,"_source":235,"_file":236,"_extension":237},"/design-system/develop/getting-started","develop",false,"","Getting started","Information for developers using the Ripple 2 UI libraries","page",[15,18],{"text":16,"url":17},"Github","https://github.com/dpc-sdp/ripple-framework",{"text":19,"url":20},"Storybook","/storybook",{"type":22,"children":23,"toc":227},"root",[24,32,69,96,123,130,142,147,182,188,200,205,209,215],{"type":25,"tag":26,"props":27,"children":28},"element","p",{},[29],{"type":30,"value":31},"text","This section contains information about the Ripple user interface libraries. These libraries are a collection of UI components which implement the Ripple Design System. The components are written in Vue and are split accross two packages:",{"type":25,"tag":33,"props":34,"children":35},"ul",{},[36,49],{"type":25,"tag":37,"props":38,"children":39},"li",{},[40,47],{"type":25,"tag":41,"props":42,"children":44},"code",{"className":43},[],[45],{"type":30,"value":46},"ripple-ui-core",{"type":30,"value":48},": A collection of common UI components used in SDP sites. For example buttons, cards, icons and typography.",{"type":25,"tag":37,"props":50,"children":51},{},[52,58,60],{"type":25,"tag":41,"props":53,"children":55},{"className":54},[],[56],{"type":30,"value":57},"ripple-ui-forms",{"type":30,"value":59},": A collection of form inputs and support for building complex forms via ",{"type":25,"tag":61,"props":62,"children":66},"a",{"href":63,"rel":64},"https://formkit.com/",[65],"nofollow",[67],{"type":30,"value":68},"Formkit",{"type":25,"tag":70,"props":71,"children":72},"blockquote",{},[73,82],{"type":25,"tag":26,"props":74,"children":75},{},[76],{"type":25,"tag":77,"props":78,"children":79},"strong",{},[80],{"type":30,"value":81},"These docs are for Ripple 2",{"type":25,"tag":26,"props":83,"children":84},{},[85,87,94],{"type":30,"value":86},"Ripple 2 is a complete rebuild. If you are looking for information about the previous version of Ripple please visit the ",{"type":25,"tag":61,"props":88,"children":91},{"href":89,"rel":90},"https://github.com/dpc-sdp/ripple",[65],[92],{"type":30,"value":93},"original Ripple GitHub repo",{"type":30,"value":95},".",{"type":25,"tag":70,"props":97,"children":98},{},[99,107,112],{"type":25,"tag":26,"props":100,"children":101},{},[102],{"type":25,"tag":77,"props":103,"children":104},{},[105],{"type":30,"value":106},"Are you developing a site on the SDP platform?",{"type":25,"tag":26,"props":108,"children":109},{},[110],{"type":30,"value":111},"This section is about the Ripple UI component libraries, and there is a lot more to developing a site on the Single Digital Presence (SDP) stack that is not covered here.",{"type":25,"tag":26,"props":113,"children":114},{},[115,117],{"type":30,"value":116},"For information about using Ripple in SDP sites, visit the ",{"type":25,"tag":61,"props":118,"children":120},{"href":119},"/framework",[121],{"type":30,"value":122},"Ripple Framework for SDP documentation",{"type":25,"tag":124,"props":125,"children":127},"h2",{"id":126},"accessing-the-source-code",[128],{"type":30,"value":129},"Accessing the Source code",{"type":25,"tag":26,"props":131,"children":132},{},[133,135,141],{"type":30,"value":134},"Ripple 2 is an open source project and the source code can be found in the ",{"type":25,"tag":61,"props":136,"children":138},{"href":17,"rel":137},[65],[139],{"type":30,"value":140},"ripple-framework monorepo on Github",{"type":30,"value":95},{"type":25,"tag":26,"props":143,"children":144},{},[145],{"type":30,"value":146},"This monorepo contains a lot more than just the UI libraries so we've provided direct links to packages below:",{"type":25,"tag":33,"props":148,"children":149},{},[150,167],{"type":25,"tag":37,"props":151,"children":152},{},[153],{"type":25,"tag":61,"props":154,"children":157},{"href":155,"rel":156},"https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-core",[65],[158,160,165],{"type":30,"value":159},"View ",{"type":25,"tag":41,"props":161,"children":163},{"className":162},[],[164],{"type":30,"value":46},{"type":30,"value":166}," on Github",{"type":25,"tag":37,"props":168,"children":169},{},[170],{"type":25,"tag":61,"props":171,"children":174},{"href":172,"rel":173},"https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-forms",[65],[175,176,181],{"type":30,"value":159},{"type":25,"tag":41,"props":177,"children":179},{"className":178},[],[180],{"type":30,"value":57},{"type":30,"value":166},{"type":25,"tag":124,"props":183,"children":185},{"id":184},"viewing-examples-in-storybook",[186],{"type":30,"value":187},"Viewing examples in Storybook",{"type":25,"tag":26,"props":189,"children":190},{},[191,193,198],{"type":30,"value":192},"The Ripple Storybook has information about props and slots that each Vue component supports. ",{"type":25,"tag":61,"props":194,"children":195},{"href":20},[196],{"type":30,"value":197},"View the Ripple storybook",{"type":30,"value":199}," to start exploring the available components.",{"type":25,"tag":26,"props":201,"children":202},{},[203],{"type":30,"value":204},"Most of the examples found on this documentation site link directly examples in storybook.",{"type":25,"tag":206,"props":207,"children":208},"hr",{},[],{"type":25,"tag":124,"props":210,"children":212},{"id":211},"usage",[213],{"type":30,"value":214},"Usage",{"type":25,"tag":26,"props":216,"children":217},{},[218,220,225],{"type":30,"value":219},"See the ",{"type":25,"tag":61,"props":221,"children":223},{"href":222},"/design-system/develop/usage",[224],{"type":30,"value":211},{"type":30,"value":226}," guide for information about getting started with the different ways of implementing Ripple.",{"title":10,"searchDepth":228,"depth":228,"links":229},2,[230,231,232],{"id":126,"depth":228,"text":129},{"id":184,"depth":228,"text":187},{"id":211,"depth":228,"text":214},"markdown","content:design-system:3.develop:1.getting-started.md","content","design-system/3.develop/1.getting-started.md","md",["ShallowRef",239],["ShallowReactive",240],{"/design-system/develop/getting-started":241},[242,250],{"_path":243,"_dir":244,"_draft":9,"_partial":9,"_locale":10,"title":245,"description":246,"layout":13,"label":247,"_type":233,"_id":248,"_source":235,"_file":249,"_extension":237},"/design-system/design/theming-guidance-for-designers","design","Theming guidance for designers",null,"Core","content:design-system:2.design:4.theming-guidance-for-designers.md","design-system/2.design/4.theming-guidance-for-designers.md",{"_path":251,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":252,"description":253,"layout":13,"_type":233,"_id":254,"_source":235,"_file":255,"_extension":237},"/design-system/develop/contributing","Contributing","Information for developers wishing to contribute to the Ripple 2 UI libraries","content:design-system:3.develop:2.contributing.md","design-system/3.develop/2.contributing.md",["ShallowRef",257],{},[259,264,504],{"title":260,"_path":261,"icon":262,"layout":263},"Ripple Design System","/","carbon:home","home",{"title":265,"_path":266,"children":267},"Design System","/design-system",[268,283,296,322,356],{"title":269,"_path":270,"children":271},"About","/design-system/about",[272,275,278,281],{"title":273,"_path":274,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":276,"_path":277,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":279,"_path":280,"layout":13},"Support","/design-system/about/getting-support",{"title":252,"_path":282,"layout":13},"/design-system/about/contributing",{"title":284,"_path":285,"children":286},"Design","/design-system/design",[287,289,292,295],{"title":11,"_path":288,"layout":13},"/design-system/design/getting-started",{"title":290,"_path":291,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":293,"_path":294,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":245,"_path":243,"layout":13},{"title":297,"_path":298,"children":299},"Develop","/design-system/develop",[300,301,302,305],{"title":11,"_path":7,"layout":13},{"title":252,"_path":251,"layout":13},{"title":303,"_path":304,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":214,"_path":222,"children":306,"layout":13},[307,310,313,316,319],{"title":308,"_path":309,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":311,"_path":312,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":314,"_path":315,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":317,"_path":318,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":320,"_path":321,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":323,"_path":324,"children":325},"Styles","/design-system/styles",[326,329,332,335,338,341,344,347,350,353],{"title":327,"_path":328,"layout":13},"Colour","/design-system/styles/colour",{"title":330,"_path":331,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":333,"_path":334,"layout":13},"Grid","/design-system/styles/grid",{"title":336,"_path":337,"layout":13},"Icons","/design-system/styles/icons",{"title":339,"_path":340,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":342,"_path":343,"layout":13},"Layout","/design-system/styles/layout",{"title":345,"_path":346,"layout":13},"Logo","/design-system/styles/logo",{"title":348,"_path":349,"layout":13},"Motion","/design-system/styles/motion",{"title":351,"_path":352,"layout":13},"Spacing","/design-system/styles/spacing",{"title":354,"_path":355,"layout":13},"Typography","/design-system/styles/typography",{"title":357,"_path":358,"children":359},"Components","/design-system/components",[360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501],{"title":361,"_path":362,"layout":13},"Accordion","/design-system/components/accordion",{"title":364,"_path":365,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":367,"_path":368,"layout":13},"Alert","/design-system/components/alert",{"title":370,"_path":371,"layout":13},"Block quote","/design-system/components/block-quote",{"title":373,"_path":374,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":376,"_path":377,"layout":13},"Button","/design-system/components/button",{"title":379,"_path":380,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":382,"_path":383,"layout":13},"Callout","/design-system/components/callout",{"title":385,"_path":386,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":388,"_path":389,"layout":13},"Card","/design-system/components/card",{"title":391,"_path":392,"layout":13},"Carousel","/design-system/components/carousel",{"title":394,"_path":395,"layout":13},"Category grid","/design-system/components/category-grid",{"title":397,"_path":398,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":400,"_path":401,"layout":13},"Chip","/design-system/components/chip",{"title":403,"_path":404,"layout":13},"Contact us","/design-system/components/contact-us",{"title":406,"_path":407,"layout":13},"Date input","/design-system/components/date-input",{"title":409,"_path":410,"layout":13},"Detail list","/design-system/components/detail-list",{"title":412,"_path":413,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":415,"_path":416,"layout":13},"File","/design-system/components/file",{"title":418,"_path":419,"layout":13},"Footer","/design-system/components/footer",{"title":421,"_path":422,"layout":13},"Form","/design-system/components/form",{"title":424,"_path":425,"layout":13},"Form alert","/design-system/components/form-alert",{"title":427,"_path":428,"layout":13},"Header","/design-system/components/header",{"title":430,"_path":431,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":433,"_path":434,"layout":13},"Input field","/design-system/components/input-field",{"title":436,"_path":437,"layout":13},"Key dates","/design-system/components/key-dates",{"title":439,"_path":440,"layout":13},"Media","/design-system/components/media",{"title":442,"_path":443,"layout":13},"Media embed","/design-system/components/media-embed",{"title":445,"_path":446,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":448,"_path":449,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":451,"_path":452,"layout":13},"Option button","/design-system/components/option-button",{"title":454,"_path":455,"layout":13},"Page action","/design-system/components/page-action",{"title":457,"_path":458,"layout":13},"Pagination","/design-system/components/pagination",{"title":460,"_path":461,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":463,"_path":464,"layout":13},"Profile","/design-system/components/profile",{"title":466,"_path":467,"layout":13},"Radio button","/design-system/components/radio-button",{"title":469,"_path":470,"layout":13},"Related links","/design-system/components/related-links",{"title":472,"_path":473,"layout":13},"Results listing","/design-system/components/results-listing",{"title":475,"_path":476,"layout":13},"Search bar","/design-system/components/search-bar",{"title":478,"_path":479,"layout":13},"Skip link","/design-system/components/skip-link",{"title":481,"_path":482,"layout":13},"Social share","/design-system/components/social-share",{"title":484,"_path":485,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":487,"_path":488,"layout":13},"Table","/design-system/components/table",{"title":490,"_path":491,"layout":13},"Tabs","/design-system/components/tabs",{"title":493,"_path":494,"layout":13},"Tag","/design-system/components/tag",{"title":496,"_path":497,"layout":13},"Text area","/design-system/components/text-area",{"title":499,"_path":500,"layout":13},"Timeline","/design-system/components/timeline",{"title":502,"_path":503,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":505,"_path":119,"children":506,"layout":13},"Ripple Framework",[507,508,526,548],{"title":505,"_path":119,"layout":13},{"title":509,"_path":510,"children":511},"Key Concepts","/framework/key-concepts",[512,514,517,520,523],{"title":314,"_path":513,"layout":13},"/framework/key-concepts/nuxt",{"title":515,"_path":516,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":518,"_path":519,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":521,"_path":522,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":524,"_path":525,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":527,"_path":528,"children":529},"Guides","/framework/guides",[530,533,536,539,542,545],{"title":531,"_path":532,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":534,"_path":535,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":537,"_path":538,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":540,"_path":541,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":543,"_path":544,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":546,"_path":547,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":549,"_path":550,"layout":13},"Core modules","/framework/core-modules",["Reactive",552],["Set"],["Reactive",554],{"module-navigation":246},true,1714695150838]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Getting started</h1><p class="rpl-type-p-large" data-v-3163c6df>Information for developers using the Ripple 2 UI libraries</p><ul class="links rpl-u-margin-t-5" data-v-3163c6df><!--[--><li data-v-3163c6df><a href="https://github.com/dpc-sdp/ripple-framework" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p rpl-type-p" target="_blank" data-v-3163c6df data-v-5d4aedf1><!--[--><!--[--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--[-->Github<!--]--><!----><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></li><li data-v-3163c6df><a href="/storybook" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p rpl-type-p" target="_blank" data-v-3163c6df data-v-5d4aedf1><!--[--><!--[--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--[-->Storybook<!--]--><!----><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></li><!--]--></ul></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->This section contains information about the Ripple user interface libraries. These libraries are a collection of UI components which implement the Ripple Design System. The components are written in Vue and are split accross two packages:<!--]--></p><ul><!--[--><li><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-ui-core<!--]--></code>: A collection of common UI components used in SDP sites. For example buttons, cards, icons and typography.<!--]--></li><li><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-ui-forms<!--]--></code>: A collection of form inputs and support for building complex forms via <a href="https://formkit.com/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Formkit<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><blockquote class="rpl-callout"><!--[--><p><!--[--><strong><!--[-->These docs are for Ripple 2<!--]--></strong><!--]--></p><p><!--[-->Ripple 2 is a complete rebuild. If you are looking for information about the previous version of Ripple please visit the <a href="https://github.com/dpc-sdp/ripple" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->original Ripple GitHub repo<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--></blockquote><blockquote class="rpl-callout"><!--[--><p><!--[--><strong><!--[-->Are you developing a site on the SDP platform?<!--]--></strong><!--]--></p><p><!--[-->This section is about the Ripple UI component libraries, and there is a lot more to developing a site on the Single Digital Presence (SDP) stack that is not covered here.<!--]--></p><p><!--[-->For information about using Ripple in SDP sites, visit the <a href="/framework" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Ripple Framework for SDP documentation<!--]--><!--]--><!----><!--]--></a><!--]--></p><!--]--></blockquote><h2 class="rpl-type-h2 docs-h2" id="accessing-the-source-code" data-v-fff5b905><a href="#accessing-the-source-code" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Accessing the Source code<!--]--></a></h2><p><!--[-->Ripple 2 is an open source project and the source code can be found in the <a href="https://github.com/dpc-sdp/ripple-framework" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->ripple-framework monorepo on Github<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><p><!--[-->This monorepo contains a lot more than just the UI libraries so we&#39;ve provided direct links to packages below:<!--]--></p><ul><!--[--><li><!--[--><a href="https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-core" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->View <code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-ui-core<!--]--></code> on Github<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-forms" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->View <code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-ui-forms<!--]--></code> on Github<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="viewing-examples-in-storybook" data-v-fff5b905><a href="#viewing-examples-in-storybook" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Viewing examples in Storybook<!--]--></a></h2><p><!--[-->The Ripple Storybook has information about props and slots that each Vue component supports. <a href="/storybook" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->View the Ripple storybook<!--]--><!--]--><!----><!--]--></a> to start exploring the available components.<!--]--></p><p><!--[-->Most of the examples found on this documentation site link directly examples in storybook.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="usage" data-v-fff5b905><a href="#usage" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->See the <a href="/design-system/develop/usage" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->usage<!--]--><!--]--><!----><!--]--></a> guide for information about getting started with the different ways of implementing Ripple.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/1.getting-started.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/getting-started/_payload.json">[{"state":1,"once":551,"_errors":553,"serverRendered":555,"path":7,"prerenderedAt":556},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":238,"$sdd-globals":256,"$sdd-navigation":258},["ShallowRef",4],["ShallowReactive",5],{"/design-system/develop/getting-started":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"links":14,"body":21,"_type":233,"_id":234,"_source":235,"_file":236,"_extension":237},"/design-system/develop/getting-started","develop",false,"","Getting started","Information for developers using the Ripple 2 UI libraries","page",[15,18],{"text":16,"url":17},"Github","https://github.com/dpc-sdp/ripple-framework",{"text":19,"url":20},"Storybook","/storybook",{"type":22,"children":23,"toc":227},"root",[24,32,69,96,123,130,142,147,182,188,200,205,209,215],{"type":25,"tag":26,"props":27,"children":28},"element","p",{},[29],{"type":30,"value":31},"text","This section contains information about the Ripple user interface libraries. These libraries are a collection of UI components which implement the Ripple Design System. The components are written in Vue and are split accross two packages:",{"type":25,"tag":33,"props":34,"children":35},"ul",{},[36,49],{"type":25,"tag":37,"props":38,"children":39},"li",{},[40,47],{"type":25,"tag":41,"props":42,"children":44},"code",{"className":43},[],[45],{"type":30,"value":46},"ripple-ui-core",{"type":30,"value":48},": A collection of common UI components used in SDP sites. For example buttons, cards, icons and typography.",{"type":25,"tag":37,"props":50,"children":51},{},[52,58,60],{"type":25,"tag":41,"props":53,"children":55},{"className":54},[],[56],{"type":30,"value":57},"ripple-ui-forms",{"type":30,"value":59},": A collection of form inputs and support for building complex forms via ",{"type":25,"tag":61,"props":62,"children":66},"a",{"href":63,"rel":64},"https://formkit.com/",[65],"nofollow",[67],{"type":30,"value":68},"Formkit",{"type":25,"tag":70,"props":71,"children":72},"blockquote",{},[73,82],{"type":25,"tag":26,"props":74,"children":75},{},[76],{"type":25,"tag":77,"props":78,"children":79},"strong",{},[80],{"type":30,"value":81},"These docs are for Ripple 2",{"type":25,"tag":26,"props":83,"children":84},{},[85,87,94],{"type":30,"value":86},"Ripple 2 is a complete rebuild. If you are looking for information about the previous version of Ripple please visit the ",{"type":25,"tag":61,"props":88,"children":91},{"href":89,"rel":90},"https://github.com/dpc-sdp/ripple",[65],[92],{"type":30,"value":93},"original Ripple GitHub repo",{"type":30,"value":95},".",{"type":25,"tag":70,"props":97,"children":98},{},[99,107,112],{"type":25,"tag":26,"props":100,"children":101},{},[102],{"type":25,"tag":77,"props":103,"children":104},{},[105],{"type":30,"value":106},"Are you developing a site on the SDP platform?",{"type":25,"tag":26,"props":108,"children":109},{},[110],{"type":30,"value":111},"This section is about the Ripple UI component libraries, and there is a lot more to developing a site on the Single Digital Presence (SDP) stack that is not covered here.",{"type":25,"tag":26,"props":113,"children":114},{},[115,117],{"type":30,"value":116},"For information about using Ripple in SDP sites, visit the ",{"type":25,"tag":61,"props":118,"children":120},{"href":119},"/framework",[121],{"type":30,"value":122},"Ripple Framework for SDP documentation",{"type":25,"tag":124,"props":125,"children":127},"h2",{"id":126},"accessing-the-source-code",[128],{"type":30,"value":129},"Accessing the Source code",{"type":25,"tag":26,"props":131,"children":132},{},[133,135,141],{"type":30,"value":134},"Ripple 2 is an open source project and the source code can be found in the ",{"type":25,"tag":61,"props":136,"children":138},{"href":17,"rel":137},[65],[139],{"type":30,"value":140},"ripple-framework monorepo on Github",{"type":30,"value":95},{"type":25,"tag":26,"props":143,"children":144},{},[145],{"type":30,"value":146},"This monorepo contains a lot more than just the UI libraries so we've provided direct links to packages below:",{"type":25,"tag":33,"props":148,"children":149},{},[150,167],{"type":25,"tag":37,"props":151,"children":152},{},[153],{"type":25,"tag":61,"props":154,"children":157},{"href":155,"rel":156},"https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-core",[65],[158,160,165],{"type":30,"value":159},"View ",{"type":25,"tag":41,"props":161,"children":163},{"className":162},[],[164],{"type":30,"value":46},{"type":30,"value":166}," on Github",{"type":25,"tag":37,"props":168,"children":169},{},[170],{"type":25,"tag":61,"props":171,"children":174},{"href":172,"rel":173},"https://github.com/dpc-sdp/ripple-framework/tree/develop/packages/ripple-ui-forms",[65],[175,176,181],{"type":30,"value":159},{"type":25,"tag":41,"props":177,"children":179},{"className":178},[],[180],{"type":30,"value":57},{"type":30,"value":166},{"type":25,"tag":124,"props":183,"children":185},{"id":184},"viewing-examples-in-storybook",[186],{"type":30,"value":187},"Viewing examples in Storybook",{"type":25,"tag":26,"props":189,"children":190},{},[191,193,198],{"type":30,"value":192},"The Ripple Storybook has information about props and slots that each Vue component supports. ",{"type":25,"tag":61,"props":194,"children":195},{"href":20},[196],{"type":30,"value":197},"View the Ripple storybook",{"type":30,"value":199}," to start exploring the available components.",{"type":25,"tag":26,"props":201,"children":202},{},[203],{"type":30,"value":204},"Most of the examples found on this documentation site link directly examples in storybook.",{"type":25,"tag":206,"props":207,"children":208},"hr",{},[],{"type":25,"tag":124,"props":210,"children":212},{"id":211},"usage",[213],{"type":30,"value":214},"Usage",{"type":25,"tag":26,"props":216,"children":217},{},[218,220,225],{"type":30,"value":219},"See the ",{"type":25,"tag":61,"props":221,"children":223},{"href":222},"/design-system/develop/usage",[224],{"type":30,"value":211},{"type":30,"value":226}," guide for information about getting started with the different ways of implementing Ripple.",{"title":10,"searchDepth":228,"depth":228,"links":229},2,[230,231,232],{"id":126,"depth":228,"text":129},{"id":184,"depth":228,"text":187},{"id":211,"depth":228,"text":214},"markdown","content:design-system:3.develop:1.getting-started.md","content","design-system/3.develop/1.getting-started.md","md",["ShallowRef",239],["ShallowReactive",240],{"/design-system/develop/getting-started":241},[242,250],{"_path":243,"_dir":244,"_draft":9,"_partial":9,"_locale":10,"title":245,"description":246,"layout":13,"label":247,"_type":233,"_id":248,"_source":235,"_file":249,"_extension":237},"/design-system/design/theming-guidance-for-designers","design","Theming guidance for designers",null,"Core","content:design-system:2.design:4.theming-guidance-for-designers.md","design-system/2.design/4.theming-guidance-for-designers.md",{"_path":251,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":252,"description":253,"layout":13,"_type":233,"_id":254,"_source":235,"_file":255,"_extension":237},"/design-system/develop/contributing","Contributing","Information for developers wishing to contribute to the Ripple 2 UI libraries","content:design-system:3.develop:2.contributing.md","design-system/3.develop/2.contributing.md",["ShallowRef",257],{},[259,264,504],{"title":260,"_path":261,"icon":262,"layout":263},"Ripple Design System","/","carbon:home","home",{"title":265,"_path":266,"children":267},"Design System","/design-system",[268,283,296,322,356],{"title":269,"_path":270,"children":271},"About","/design-system/about",[272,275,278,281],{"title":273,"_path":274,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":276,"_path":277,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":279,"_path":280,"layout":13},"Support","/design-system/about/getting-support",{"title":252,"_path":282,"layout":13},"/design-system/about/contributing",{"title":284,"_path":285,"children":286},"Design","/design-system/design",[287,289,292,295],{"title":11,"_path":288,"layout":13},"/design-system/design/getting-started",{"title":290,"_path":291,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":293,"_path":294,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":245,"_path":243,"layout":13},{"title":297,"_path":298,"children":299},"Develop","/design-system/develop",[300,301,302,305],{"title":11,"_path":7,"layout":13},{"title":252,"_path":251,"layout":13},{"title":303,"_path":304,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":214,"_path":222,"children":306,"layout":13},[307,310,313,316,319],{"title":308,"_path":309,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":311,"_path":312,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":314,"_path":315,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":317,"_path":318,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":320,"_path":321,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":323,"_path":324,"children":325},"Styles","/design-system/styles",[326,329,332,335,338,341,344,347,350,353],{"title":327,"_path":328,"layout":13},"Colour","/design-system/styles/colour",{"title":330,"_path":331,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":333,"_path":334,"layout":13},"Grid","/design-system/styles/grid",{"title":336,"_path":337,"layout":13},"Icons","/design-system/styles/icons",{"title":339,"_path":340,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":342,"_path":343,"layout":13},"Layout","/design-system/styles/layout",{"title":345,"_path":346,"layout":13},"Logo","/design-system/styles/logo",{"title":348,"_path":349,"layout":13},"Motion","/design-system/styles/motion",{"title":351,"_path":352,"layout":13},"Spacing","/design-system/styles/spacing",{"title":354,"_path":355,"layout":13},"Typography","/design-system/styles/typography",{"title":357,"_path":358,"children":359},"Components","/design-system/components",[360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501],{"title":361,"_path":362,"layout":13},"Accordion","/design-system/components/accordion",{"title":364,"_path":365,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":367,"_path":368,"layout":13},"Alert","/design-system/components/alert",{"title":370,"_path":371,"layout":13},"Block quote","/design-system/components/block-quote",{"title":373,"_path":374,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":376,"_path":377,"layout":13},"Button","/design-system/components/button",{"title":379,"_path":380,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":382,"_path":383,"layout":13},"Callout","/design-system/components/callout",{"title":385,"_path":386,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":388,"_path":389,"layout":13},"Card","/design-system/components/card",{"title":391,"_path":392,"layout":13},"Carousel","/design-system/components/carousel",{"title":394,"_path":395,"layout":13},"Category grid","/design-system/components/category-grid",{"title":397,"_path":398,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":400,"_path":401,"layout":13},"Chip","/design-system/components/chip",{"title":403,"_path":404,"layout":13},"Contact us","/design-system/components/contact-us",{"title":406,"_path":407,"layout":13},"Date input","/design-system/components/date-input",{"title":409,"_path":410,"layout":13},"Detail list","/design-system/components/detail-list",{"title":412,"_path":413,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":415,"_path":416,"layout":13},"File","/design-system/components/file",{"title":418,"_path":419,"layout":13},"Footer","/design-system/components/footer",{"title":421,"_path":422,"layout":13},"Form","/design-system/components/form",{"title":424,"_path":425,"layout":13},"Form alert","/design-system/components/form-alert",{"title":427,"_path":428,"layout":13},"Header","/design-system/components/header",{"title":430,"_path":431,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":433,"_path":434,"layout":13},"Input field","/design-system/components/input-field",{"title":436,"_path":437,"layout":13},"Key dates","/design-system/components/key-dates",{"title":439,"_path":440,"layout":13},"Media","/design-system/components/media",{"title":442,"_path":443,"layout":13},"Media embed","/design-system/components/media-embed",{"title":445,"_path":446,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":448,"_path":449,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":451,"_path":452,"layout":13},"Option button","/design-system/components/option-button",{"title":454,"_path":455,"layout":13},"Page action","/design-system/components/page-action",{"title":457,"_path":458,"layout":13},"Pagination","/design-system/components/pagination",{"title":460,"_path":461,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":463,"_path":464,"layout":13},"Profile","/design-system/components/profile",{"title":466,"_path":467,"layout":13},"Radio button","/design-system/components/radio-button",{"title":469,"_path":470,"layout":13},"Related links","/design-system/components/related-links",{"title":472,"_path":473,"layout":13},"Results listing","/design-system/components/results-listing",{"title":475,"_path":476,"layout":13},"Search bar","/design-system/components/search-bar",{"title":478,"_path":479,"layout":13},"Skip link","/design-system/components/skip-link",{"title":481,"_path":482,"layout":13},"Social share","/design-system/components/social-share",{"title":484,"_path":485,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":487,"_path":488,"layout":13},"Table","/design-system/components/table",{"title":490,"_path":491,"layout":13},"Tabs","/design-system/components/tabs",{"title":493,"_path":494,"layout":13},"Tag","/design-system/components/tag",{"title":496,"_path":497,"layout":13},"Text area","/design-system/components/text-area",{"title":499,"_path":500,"layout":13},"Timeline","/design-system/components/timeline",{"title":502,"_path":503,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":505,"_path":119,"children":506,"layout":13},"Ripple Framework",[507,508,526,548],{"title":505,"_path":119,"layout":13},{"title":509,"_path":510,"children":511},"Key Concepts","/framework/key-concepts",[512,514,517,520,523],{"title":314,"_path":513,"layout":13},"/framework/key-concepts/nuxt",{"title":515,"_path":516,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":518,"_path":519,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":521,"_path":522,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":524,"_path":525,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":527,"_path":528,"children":529},"Guides","/framework/guides",[530,533,536,539,542,545],{"title":531,"_path":532,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":534,"_path":535,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":537,"_path":538,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":540,"_path":541,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":543,"_path":544,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":546,"_path":547,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":549,"_path":550,"layout":13},"Core modules","/framework/core-modules",["Reactive",552],["Set"],["Reactive",554],{"module-navigation":246},true,1714695649088]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/develop/theming/_payload.json b/design-system/develop/theming/_payload.json
index dfad8e11bc..2357a3d626 100644
--- a/design-system/develop/theming/_payload.json
+++ b/design-system/develop/theming/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":40,"items":41},"/design-system/develop","Develop",true,[42,44,46,49],{"id":43,"text":27,"url":43,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":7,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":40,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":7,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695151718]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":40,"items":41},"/design-system/develop","Develop",true,[42,44,46,49],{"id":43,"text":27,"url":43,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":7,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":40,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":7,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695649940]
\ No newline at end of file
diff --git a/design-system/develop/theming/index.html b/design-system/develop/theming/index.html
index bba1176ee5..52603c7caa 100644
--- a/design-system/develop/theming/index.html
+++ b/design-system/develop/theming/index.html
@@ -25,61 +25,61 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.uDpSgjM7.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProsePre.1p0bzX0t.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCode.ggTmuEB2.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.iJ9KJvnk.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProsePre.928ctTB_.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCode.Xz7xMLuq.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -94,8 +94,8 @@
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Theme and brand application</h1><p class="rpl-type-p-large" data-v-3163c6df>Information for developers using Ripple 2 UI libraries</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->Ripple allows for customisation of it&#39;s components to allow application of Victorian government departments and agencies brand and identity within a common framework. For guidance on how to theme Ripple in an accessible and consistent way, see the <a href="/design-system/design/theming-guidance-for-designers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a><!--]--></p><h2 class="rpl-type-h2 docs-h2" id="css-variables" data-v-fff5b905><a href="#css-variables" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->CSS Variables<!--]--></a></h2><p><!--[-->Ripple is fully theme-able using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->CSS variables<!--]--><!--]--><!----><!--]--></a>, this allows runtime customisation of site variables within all modern browsers. CSS variables form the API for allowing customisation of SDP sites by setting base tokens for your site.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="example" data-v-fff5b905><a href="#example" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Example<!--]--></a></h2><p><!--[-->To override theme values, simply set the css variable at <code class="docs-code-inline" data-v-2e6046ca><!--[-->:root<!--]--></code> or an element that wraps elements you want to theme.<!--]--></p><div class="docs-code-block" meta data-v-efa4b2dc><!--[--><pre class="language-css shiki shiki-themes github-light" style=""><!--[--><code><span class="line" line="1"><span style="--shiki-default:#6F42C1">:root</span><span style="--shiki-default:#24292E"> {
 </span></span><span class="line" line="2"><span style="--shiki-default:#E36209">  --rpl-clr-primary</span><span style="--shiki-default:#24292E">: </span><span style="--shiki-default:#005CC5">#6B19A3</span><span style="--shiki-default:#24292E">;
 </span></span><span class="line" line="3"><span style="--shiki-default:#24292E">}
-</span></span></code><!--]--></pre><!--]--></div><p><!--[-->See the <a href="/design-system/styles/colour" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->colour<!--]--><!--]--><!----><!--]--></a> page for a list of theme-able colours.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="assets" data-v-fff5b905><a href="#assets" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Assets<!--]--></a></h2><p><!--[-->Alongside the inclusion of site logos, Ripple also uses graphic devices in several key components that allow for customising to apply brand.<!--]--></p><p><!--[-->See the following components for guidance on providing graphic elements to theme your site:<!--]--></p><ul><!--[--><li><!--[--><a href="/design-system/styles/logo" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Logos<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/header" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Header<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="brand-application-in-sdp-sites" data-v-fff5b905><a href="#brand-application-in-sdp-sites" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Brand application in SDP sites<!--]--></a></h2><p><!--[-->See the <a href="/framework" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->SDP Ripple framework<!--]--><!--]--><!----><!--]--></a> section for more information on customising SDP websites and applying brand.<!--]--></p><style>html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}</style><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/2.theming.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/theming/_payload.json">[{"state":1,"once":538,"_errors":540,"serverRendered":543,"path":544,"prerenderedAt":545},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":223,"$sdd-globals":246,"$sdd-navigation":248},["ShallowRef",4],["ShallowReactive",5],{"/design-system/develop/theming":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":218,"_id":219,"_source":220,"_file":221,"_extension":222},"/design-system/develop/theming","develop",false,"","Theme and brand application","Information for developers using Ripple 2 UI libraries","page",{"type":15,"children":16,"toc":212},"root",[17,32,39,54,60,74,136,149,155,160,165,188,194,206],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22,25],{"type":23,"value":24},"text","Ripple allows for customisation of it's components to allow application of Victorian government departments and agencies brand and identity within a common framework. For guidance on how to theme Ripple in an accessible and consistent way, see the ",{"type":18,"tag":26,"props":27,"children":29},"a",{"href":28},"/design-system/design/theming-guidance-for-designers",[30],{"type":23,"value":31},"theming guidance for designers",{"type":18,"tag":33,"props":34,"children":36},"h2",{"id":35},"css-variables",[37],{"type":23,"value":38},"CSS Variables",{"type":18,"tag":19,"props":40,"children":41},{},[42,44,52],{"type":23,"value":43},"Ripple is fully theme-able using ",{"type":18,"tag":26,"props":45,"children":49},{"href":46,"rel":47},"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties",[48],"nofollow",[50],{"type":23,"value":51},"CSS variables",{"type":23,"value":53},", this allows runtime customisation of site variables within all modern browsers. CSS variables form the API for allowing customisation of SDP sites by setting base tokens for your site.",{"type":18,"tag":33,"props":55,"children":57},{"id":56},"example",[58],{"type":23,"value":59},"Example",{"type":18,"tag":19,"props":61,"children":62},{},[63,65,72],{"type":23,"value":64},"To override theme values, simply set the css variable at ",{"type":18,"tag":66,"props":67,"children":69},"code",{"className":68},[],[70],{"type":23,"value":71},":root",{"type":23,"value":73}," or an element that wraps elements you want to theme.",{"type":18,"tag":75,"props":76,"children":80},"pre",{"className":77,"code":78,"language":79,"meta":10,"style":10},"language-css shiki shiki-themes github-light",":root {\n  --rpl-clr-primary: #6B19A3;\n}\n","css",[81],{"type":18,"tag":66,"props":82,"children":83},{"__ignoreMap":10},[84,101,127],{"type":18,"tag":85,"props":86,"children":89},"span",{"class":87,"line":88},"line",1,[90,95],{"type":18,"tag":85,"props":91,"children":93},{"style":92},"--shiki-default:#6F42C1",[94],{"type":23,"value":71},{"type":18,"tag":85,"props":96,"children":98},{"style":97},"--shiki-default:#24292E",[99],{"type":23,"value":100}," {\n",{"type":18,"tag":85,"props":102,"children":104},{"class":87,"line":103},2,[105,111,116,122],{"type":18,"tag":85,"props":106,"children":108},{"style":107},"--shiki-default:#E36209",[109],{"type":23,"value":110},"  --rpl-clr-primary",{"type":18,"tag":85,"props":112,"children":113},{"style":97},[114],{"type":23,"value":115},": ",{"type":18,"tag":85,"props":117,"children":119},{"style":118},"--shiki-default:#005CC5",[120],{"type":23,"value":121},"#6B19A3",{"type":18,"tag":85,"props":123,"children":124},{"style":97},[125],{"type":23,"value":126},";\n",{"type":18,"tag":85,"props":128,"children":130},{"class":87,"line":129},3,[131],{"type":18,"tag":85,"props":132,"children":133},{"style":97},[134],{"type":23,"value":135},"}\n",{"type":18,"tag":19,"props":137,"children":138},{},[139,141,147],{"type":23,"value":140},"See the ",{"type":18,"tag":26,"props":142,"children":144},{"href":143},"/design-system/styles/colour",[145],{"type":23,"value":146},"colour",{"type":23,"value":148}," page for a list of theme-able colours.",{"type":18,"tag":33,"props":150,"children":152},{"id":151},"assets",[153],{"type":23,"value":154},"Assets",{"type":18,"tag":19,"props":156,"children":157},{},[158],{"type":23,"value":159},"Alongside the inclusion of site logos, Ripple also uses graphic devices in several key components that allow for customising to apply brand.",{"type":18,"tag":19,"props":161,"children":162},{},[163],{"type":23,"value":164},"See the following components for guidance on providing graphic elements to theme your site:",{"type":18,"tag":166,"props":167,"children":168},"ul",{},[169,179],{"type":18,"tag":170,"props":171,"children":172},"li",{},[173],{"type":18,"tag":26,"props":174,"children":176},{"href":175},"/design-system/styles/logo",[177],{"type":23,"value":178},"Logos",{"type":18,"tag":170,"props":180,"children":181},{},[182],{"type":18,"tag":26,"props":183,"children":185},{"href":184},"/design-system/components/header",[186],{"type":23,"value":187},"Header",{"type":18,"tag":33,"props":189,"children":191},{"id":190},"brand-application-in-sdp-sites",[192],{"type":23,"value":193},"Brand application in SDP sites",{"type":18,"tag":19,"props":195,"children":196},{},[197,198,204],{"type":23,"value":140},{"type":18,"tag":26,"props":199,"children":201},{"href":200},"/framework",[202],{"type":23,"value":203},"SDP Ripple framework",{"type":23,"value":205}," section for more information on customising SDP websites and applying brand.",{"type":18,"tag":207,"props":208,"children":209},"style",{},[210],{"type":23,"value":211},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":10,"searchDepth":103,"depth":103,"links":213},[214,215,216,217],{"id":35,"depth":103,"text":38},{"id":56,"depth":103,"text":59},{"id":151,"depth":103,"text":154},{"id":190,"depth":103,"text":193},"markdown","content:design-system:3.develop:2.theming.md","content","design-system/3.develop/2.theming.md","md",["ShallowRef",224],["ShallowReactive",225],{"/design-system/develop/theming":226},[227,233],{"_path":228,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":229,"description":230,"layout":13,"_type":218,"_id":231,"_source":220,"_file":232,"_extension":222},"/design-system/develop/contributing","Contributing","Information for developers wishing to contribute to the Ripple 2 UI libraries","content:design-system:3.develop:2.contributing.md","design-system/3.develop/2.contributing.md",{"_path":234,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":235,"description":236,"layout":13,"links":237,"_type":218,"_id":244,"_source":220,"_file":245,"_extension":222},"/design-system/develop/usage","Usage","Ripple components can be used in several different ways depending on your project needs.",[238,241],{"text":239,"url":240},"Github","https://github.com/dpc-sdp/ripple-framework",{"text":242,"url":243},"Storybook","/storybook","content:design-system:3.develop:3.usage.md","design-system/3.develop/3.usage.md",["ShallowRef",247],{},[249,254,491],{"title":250,"_path":251,"icon":252,"layout":253},"Ripple Design System","/","carbon:home","home",{"title":255,"_path":256,"children":257},"Design System","/design-system",[258,273,288,313,345],{"title":259,"_path":260,"children":261},"About","/design-system/about",[262,265,268,271],{"title":263,"_path":264,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":266,"_path":267,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":269,"_path":270,"layout":13},"Support","/design-system/about/getting-support",{"title":229,"_path":272,"layout":13},"/design-system/about/contributing",{"title":274,"_path":275,"children":276},"Design","/design-system/design",[277,280,283,286],{"title":278,"_path":279,"layout":13},"Getting started","/design-system/design/getting-started",{"title":281,"_path":282,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":284,"_path":285,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":287,"_path":28,"layout":13},"Theming guidance for designers",{"title":289,"_path":290,"children":291},"Develop","/design-system/develop",[292,294,295,296],{"title":278,"_path":293,"layout":13},"/design-system/develop/getting-started",{"title":229,"_path":228,"layout":13},{"title":11,"_path":7,"layout":13},{"title":235,"_path":234,"children":297,"layout":13},[298,301,304,307,310],{"title":299,"_path":300,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":302,"_path":303,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":305,"_path":306,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":308,"_path":309,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":311,"_path":312,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":314,"_path":315,"children":316},"Styles","/design-system/styles",[317,319,322,325,328,331,334,336,339,342],{"title":318,"_path":143,"layout":13},"Colour",{"title":320,"_path":321,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":323,"_path":324,"layout":13},"Grid","/design-system/styles/grid",{"title":326,"_path":327,"layout":13},"Icons","/design-system/styles/icons",{"title":329,"_path":330,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":332,"_path":333,"layout":13},"Layout","/design-system/styles/layout",{"title":335,"_path":175,"layout":13},"Logo",{"title":337,"_path":338,"layout":13},"Motion","/design-system/styles/motion",{"title":340,"_path":341,"layout":13},"Spacing","/design-system/styles/spacing",{"title":343,"_path":344,"layout":13},"Typography","/design-system/styles/typography",{"title":346,"_path":347,"children":348},"Components","/design-system/components",[349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482,485,488],{"title":350,"_path":351,"layout":13},"Accordion","/design-system/components/accordion",{"title":353,"_path":354,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":356,"_path":357,"layout":13},"Alert","/design-system/components/alert",{"title":359,"_path":360,"layout":13},"Block quote","/design-system/components/block-quote",{"title":362,"_path":363,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":365,"_path":366,"layout":13},"Button","/design-system/components/button",{"title":368,"_path":369,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":371,"_path":372,"layout":13},"Callout","/design-system/components/callout",{"title":374,"_path":375,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":377,"_path":378,"layout":13},"Card","/design-system/components/card",{"title":380,"_path":381,"layout":13},"Carousel","/design-system/components/carousel",{"title":383,"_path":384,"layout":13},"Category grid","/design-system/components/category-grid",{"title":386,"_path":387,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":389,"_path":390,"layout":13},"Chip","/design-system/components/chip",{"title":392,"_path":393,"layout":13},"Contact us","/design-system/components/contact-us",{"title":395,"_path":396,"layout":13},"Date input","/design-system/components/date-input",{"title":398,"_path":399,"layout":13},"Detail list","/design-system/components/detail-list",{"title":401,"_path":402,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":404,"_path":405,"layout":13},"File","/design-system/components/file",{"title":407,"_path":408,"layout":13},"Footer","/design-system/components/footer",{"title":410,"_path":411,"layout":13},"Form","/design-system/components/form",{"title":413,"_path":414,"layout":13},"Form alert","/design-system/components/form-alert",{"title":187,"_path":184,"layout":13},{"title":417,"_path":418,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":420,"_path":421,"layout":13},"Input field","/design-system/components/input-field",{"title":423,"_path":424,"layout":13},"Key dates","/design-system/components/key-dates",{"title":426,"_path":427,"layout":13},"Media","/design-system/components/media",{"title":429,"_path":430,"layout":13},"Media embed","/design-system/components/media-embed",{"title":432,"_path":433,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":435,"_path":436,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":438,"_path":439,"layout":13},"Option button","/design-system/components/option-button",{"title":441,"_path":442,"layout":13},"Page action","/design-system/components/page-action",{"title":444,"_path":445,"layout":13},"Pagination","/design-system/components/pagination",{"title":447,"_path":448,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":450,"_path":451,"layout":13},"Profile","/design-system/components/profile",{"title":453,"_path":454,"layout":13},"Radio button","/design-system/components/radio-button",{"title":456,"_path":457,"layout":13},"Related links","/design-system/components/related-links",{"title":459,"_path":460,"layout":13},"Results listing","/design-system/components/results-listing",{"title":462,"_path":463,"layout":13},"Search bar","/design-system/components/search-bar",{"title":465,"_path":466,"layout":13},"Skip link","/design-system/components/skip-link",{"title":468,"_path":469,"layout":13},"Social share","/design-system/components/social-share",{"title":471,"_path":472,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":474,"_path":475,"layout":13},"Table","/design-system/components/table",{"title":477,"_path":478,"layout":13},"Tabs","/design-system/components/tabs",{"title":480,"_path":481,"layout":13},"Tag","/design-system/components/tag",{"title":483,"_path":484,"layout":13},"Text area","/design-system/components/text-area",{"title":486,"_path":487,"layout":13},"Timeline","/design-system/components/timeline",{"title":489,"_path":490,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":492,"_path":200,"children":493,"layout":13},"Ripple Framework",[494,495,513,535],{"title":492,"_path":200,"layout":13},{"title":496,"_path":497,"children":498},"Key Concepts","/framework/key-concepts",[499,501,504,507,510],{"title":305,"_path":500,"layout":13},"/framework/key-concepts/nuxt",{"title":502,"_path":503,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":505,"_path":506,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":508,"_path":509,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":511,"_path":512,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":514,"_path":515,"children":516},"Guides","/framework/guides",[517,520,523,526,529,532],{"title":518,"_path":519,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":521,"_path":522,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":524,"_path":525,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":527,"_path":528,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":530,"_path":531,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":533,"_path":534,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":536,"_path":537,"layout":13},"Core modules","/framework/core-modules",["Reactive",539],["Set"],["Reactive",541],{"module-navigation":542},null,true,"/design-system/develop/theming/",1714695155818]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+</span></span></code><!--]--></pre><!--]--></div><p><!--[-->See the <a href="/design-system/styles/colour" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->colour<!--]--><!--]--><!----><!--]--></a> page for a list of theme-able colours.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="assets" data-v-fff5b905><a href="#assets" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Assets<!--]--></a></h2><p><!--[-->Alongside the inclusion of site logos, Ripple also uses graphic devices in several key components that allow for customising to apply brand.<!--]--></p><p><!--[-->See the following components for guidance on providing graphic elements to theme your site:<!--]--></p><ul><!--[--><li><!--[--><a href="/design-system/styles/logo" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Logos<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/design-system/components/header" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Header<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="brand-application-in-sdp-sites" data-v-fff5b905><a href="#brand-application-in-sdp-sites" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Brand application in SDP sites<!--]--></a></h2><p><!--[-->See the <a href="/framework" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->SDP Ripple framework<!--]--><!--]--><!----><!--]--></a> section for more information on customising SDP websites and applying brand.<!--]--></p><style>html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}</style><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/2.theming.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/theming/_payload.json">[{"state":1,"once":538,"_errors":540,"serverRendered":543,"path":544,"prerenderedAt":545},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":223,"$sdd-globals":246,"$sdd-navigation":248},["ShallowRef",4],["ShallowReactive",5],{"/design-system/develop/theming":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":218,"_id":219,"_source":220,"_file":221,"_extension":222},"/design-system/develop/theming","develop",false,"","Theme and brand application","Information for developers using Ripple 2 UI libraries","page",{"type":15,"children":16,"toc":212},"root",[17,32,39,54,60,74,136,149,155,160,165,188,194,206],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22,25],{"type":23,"value":24},"text","Ripple allows for customisation of it's components to allow application of Victorian government departments and agencies brand and identity within a common framework. For guidance on how to theme Ripple in an accessible and consistent way, see the ",{"type":18,"tag":26,"props":27,"children":29},"a",{"href":28},"/design-system/design/theming-guidance-for-designers",[30],{"type":23,"value":31},"theming guidance for designers",{"type":18,"tag":33,"props":34,"children":36},"h2",{"id":35},"css-variables",[37],{"type":23,"value":38},"CSS Variables",{"type":18,"tag":19,"props":40,"children":41},{},[42,44,52],{"type":23,"value":43},"Ripple is fully theme-able using ",{"type":18,"tag":26,"props":45,"children":49},{"href":46,"rel":47},"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties",[48],"nofollow",[50],{"type":23,"value":51},"CSS variables",{"type":23,"value":53},", this allows runtime customisation of site variables within all modern browsers. CSS variables form the API for allowing customisation of SDP sites by setting base tokens for your site.",{"type":18,"tag":33,"props":55,"children":57},{"id":56},"example",[58],{"type":23,"value":59},"Example",{"type":18,"tag":19,"props":61,"children":62},{},[63,65,72],{"type":23,"value":64},"To override theme values, simply set the css variable at ",{"type":18,"tag":66,"props":67,"children":69},"code",{"className":68},[],[70],{"type":23,"value":71},":root",{"type":23,"value":73}," or an element that wraps elements you want to theme.",{"type":18,"tag":75,"props":76,"children":80},"pre",{"className":77,"code":78,"language":79,"meta":10,"style":10},"language-css shiki shiki-themes github-light",":root {\n  --rpl-clr-primary: #6B19A3;\n}\n","css",[81],{"type":18,"tag":66,"props":82,"children":83},{"__ignoreMap":10},[84,101,127],{"type":18,"tag":85,"props":86,"children":89},"span",{"class":87,"line":88},"line",1,[90,95],{"type":18,"tag":85,"props":91,"children":93},{"style":92},"--shiki-default:#6F42C1",[94],{"type":23,"value":71},{"type":18,"tag":85,"props":96,"children":98},{"style":97},"--shiki-default:#24292E",[99],{"type":23,"value":100}," {\n",{"type":18,"tag":85,"props":102,"children":104},{"class":87,"line":103},2,[105,111,116,122],{"type":18,"tag":85,"props":106,"children":108},{"style":107},"--shiki-default:#E36209",[109],{"type":23,"value":110},"  --rpl-clr-primary",{"type":18,"tag":85,"props":112,"children":113},{"style":97},[114],{"type":23,"value":115},": ",{"type":18,"tag":85,"props":117,"children":119},{"style":118},"--shiki-default:#005CC5",[120],{"type":23,"value":121},"#6B19A3",{"type":18,"tag":85,"props":123,"children":124},{"style":97},[125],{"type":23,"value":126},";\n",{"type":18,"tag":85,"props":128,"children":130},{"class":87,"line":129},3,[131],{"type":18,"tag":85,"props":132,"children":133},{"style":97},[134],{"type":23,"value":135},"}\n",{"type":18,"tag":19,"props":137,"children":138},{},[139,141,147],{"type":23,"value":140},"See the ",{"type":18,"tag":26,"props":142,"children":144},{"href":143},"/design-system/styles/colour",[145],{"type":23,"value":146},"colour",{"type":23,"value":148}," page for a list of theme-able colours.",{"type":18,"tag":33,"props":150,"children":152},{"id":151},"assets",[153],{"type":23,"value":154},"Assets",{"type":18,"tag":19,"props":156,"children":157},{},[158],{"type":23,"value":159},"Alongside the inclusion of site logos, Ripple also uses graphic devices in several key components that allow for customising to apply brand.",{"type":18,"tag":19,"props":161,"children":162},{},[163],{"type":23,"value":164},"See the following components for guidance on providing graphic elements to theme your site:",{"type":18,"tag":166,"props":167,"children":168},"ul",{},[169,179],{"type":18,"tag":170,"props":171,"children":172},"li",{},[173],{"type":18,"tag":26,"props":174,"children":176},{"href":175},"/design-system/styles/logo",[177],{"type":23,"value":178},"Logos",{"type":18,"tag":170,"props":180,"children":181},{},[182],{"type":18,"tag":26,"props":183,"children":185},{"href":184},"/design-system/components/header",[186],{"type":23,"value":187},"Header",{"type":18,"tag":33,"props":189,"children":191},{"id":190},"brand-application-in-sdp-sites",[192],{"type":23,"value":193},"Brand application in SDP sites",{"type":18,"tag":19,"props":195,"children":196},{},[197,198,204],{"type":23,"value":140},{"type":18,"tag":26,"props":199,"children":201},{"href":200},"/framework",[202],{"type":23,"value":203},"SDP Ripple framework",{"type":23,"value":205}," section for more information on customising SDP websites and applying brand.",{"type":18,"tag":207,"props":208,"children":209},"style",{},[210],{"type":23,"value":211},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":10,"searchDepth":103,"depth":103,"links":213},[214,215,216,217],{"id":35,"depth":103,"text":38},{"id":56,"depth":103,"text":59},{"id":151,"depth":103,"text":154},{"id":190,"depth":103,"text":193},"markdown","content:design-system:3.develop:2.theming.md","content","design-system/3.develop/2.theming.md","md",["ShallowRef",224],["ShallowReactive",225],{"/design-system/develop/theming":226},[227,233],{"_path":228,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":229,"description":230,"layout":13,"_type":218,"_id":231,"_source":220,"_file":232,"_extension":222},"/design-system/develop/contributing","Contributing","Information for developers wishing to contribute to the Ripple 2 UI libraries","content:design-system:3.develop:2.contributing.md","design-system/3.develop/2.contributing.md",{"_path":234,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":235,"description":236,"layout":13,"links":237,"_type":218,"_id":244,"_source":220,"_file":245,"_extension":222},"/design-system/develop/usage","Usage","Ripple components can be used in several different ways depending on your project needs.",[238,241],{"text":239,"url":240},"Github","https://github.com/dpc-sdp/ripple-framework",{"text":242,"url":243},"Storybook","/storybook","content:design-system:3.develop:3.usage.md","design-system/3.develop/3.usage.md",["ShallowRef",247],{},[249,254,491],{"title":250,"_path":251,"icon":252,"layout":253},"Ripple Design System","/","carbon:home","home",{"title":255,"_path":256,"children":257},"Design System","/design-system",[258,273,288,313,345],{"title":259,"_path":260,"children":261},"About","/design-system/about",[262,265,268,271],{"title":263,"_path":264,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":266,"_path":267,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":269,"_path":270,"layout":13},"Support","/design-system/about/getting-support",{"title":229,"_path":272,"layout":13},"/design-system/about/contributing",{"title":274,"_path":275,"children":276},"Design","/design-system/design",[277,280,283,286],{"title":278,"_path":279,"layout":13},"Getting started","/design-system/design/getting-started",{"title":281,"_path":282,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":284,"_path":285,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":287,"_path":28,"layout":13},"Theming guidance for designers",{"title":289,"_path":290,"children":291},"Develop","/design-system/develop",[292,294,295,296],{"title":278,"_path":293,"layout":13},"/design-system/develop/getting-started",{"title":229,"_path":228,"layout":13},{"title":11,"_path":7,"layout":13},{"title":235,"_path":234,"children":297,"layout":13},[298,301,304,307,310],{"title":299,"_path":300,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":302,"_path":303,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":305,"_path":306,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":308,"_path":309,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":311,"_path":312,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":314,"_path":315,"children":316},"Styles","/design-system/styles",[317,319,322,325,328,331,334,336,339,342],{"title":318,"_path":143,"layout":13},"Colour",{"title":320,"_path":321,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":323,"_path":324,"layout":13},"Grid","/design-system/styles/grid",{"title":326,"_path":327,"layout":13},"Icons","/design-system/styles/icons",{"title":329,"_path":330,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":332,"_path":333,"layout":13},"Layout","/design-system/styles/layout",{"title":335,"_path":175,"layout":13},"Logo",{"title":337,"_path":338,"layout":13},"Motion","/design-system/styles/motion",{"title":340,"_path":341,"layout":13},"Spacing","/design-system/styles/spacing",{"title":343,"_path":344,"layout":13},"Typography","/design-system/styles/typography",{"title":346,"_path":347,"children":348},"Components","/design-system/components",[349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482,485,488],{"title":350,"_path":351,"layout":13},"Accordion","/design-system/components/accordion",{"title":353,"_path":354,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":356,"_path":357,"layout":13},"Alert","/design-system/components/alert",{"title":359,"_path":360,"layout":13},"Block quote","/design-system/components/block-quote",{"title":362,"_path":363,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":365,"_path":366,"layout":13},"Button","/design-system/components/button",{"title":368,"_path":369,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":371,"_path":372,"layout":13},"Callout","/design-system/components/callout",{"title":374,"_path":375,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":377,"_path":378,"layout":13},"Card","/design-system/components/card",{"title":380,"_path":381,"layout":13},"Carousel","/design-system/components/carousel",{"title":383,"_path":384,"layout":13},"Category grid","/design-system/components/category-grid",{"title":386,"_path":387,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":389,"_path":390,"layout":13},"Chip","/design-system/components/chip",{"title":392,"_path":393,"layout":13},"Contact us","/design-system/components/contact-us",{"title":395,"_path":396,"layout":13},"Date input","/design-system/components/date-input",{"title":398,"_path":399,"layout":13},"Detail list","/design-system/components/detail-list",{"title":401,"_path":402,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":404,"_path":405,"layout":13},"File","/design-system/components/file",{"title":407,"_path":408,"layout":13},"Footer","/design-system/components/footer",{"title":410,"_path":411,"layout":13},"Form","/design-system/components/form",{"title":413,"_path":414,"layout":13},"Form alert","/design-system/components/form-alert",{"title":187,"_path":184,"layout":13},{"title":417,"_path":418,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":420,"_path":421,"layout":13},"Input field","/design-system/components/input-field",{"title":423,"_path":424,"layout":13},"Key dates","/design-system/components/key-dates",{"title":426,"_path":427,"layout":13},"Media","/design-system/components/media",{"title":429,"_path":430,"layout":13},"Media embed","/design-system/components/media-embed",{"title":432,"_path":433,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":435,"_path":436,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":438,"_path":439,"layout":13},"Option button","/design-system/components/option-button",{"title":441,"_path":442,"layout":13},"Page action","/design-system/components/page-action",{"title":444,"_path":445,"layout":13},"Pagination","/design-system/components/pagination",{"title":447,"_path":448,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":450,"_path":451,"layout":13},"Profile","/design-system/components/profile",{"title":453,"_path":454,"layout":13},"Radio button","/design-system/components/radio-button",{"title":456,"_path":457,"layout":13},"Related links","/design-system/components/related-links",{"title":459,"_path":460,"layout":13},"Results listing","/design-system/components/results-listing",{"title":462,"_path":463,"layout":13},"Search bar","/design-system/components/search-bar",{"title":465,"_path":466,"layout":13},"Skip link","/design-system/components/skip-link",{"title":468,"_path":469,"layout":13},"Social share","/design-system/components/social-share",{"title":471,"_path":472,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":474,"_path":475,"layout":13},"Table","/design-system/components/table",{"title":477,"_path":478,"layout":13},"Tabs","/design-system/components/tabs",{"title":480,"_path":481,"layout":13},"Tag","/design-system/components/tag",{"title":483,"_path":484,"layout":13},"Text area","/design-system/components/text-area",{"title":486,"_path":487,"layout":13},"Timeline","/design-system/components/timeline",{"title":489,"_path":490,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":492,"_path":200,"children":493,"layout":13},"Ripple Framework",[494,495,513,535],{"title":492,"_path":200,"layout":13},{"title":496,"_path":497,"children":498},"Key Concepts","/framework/key-concepts",[499,501,504,507,510],{"title":305,"_path":500,"layout":13},"/framework/key-concepts/nuxt",{"title":502,"_path":503,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":505,"_path":506,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":508,"_path":509,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":511,"_path":512,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":514,"_path":515,"children":516},"Guides","/framework/guides",[517,520,523,526,529,532],{"title":518,"_path":519,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":521,"_path":522,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":524,"_path":525,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":527,"_path":528,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":530,"_path":531,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":533,"_path":534,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":536,"_path":537,"layout":13},"Core modules","/framework/core-modules",["Reactive",539],["Set"],["Reactive",541],{"module-navigation":542},null,true,"/design-system/develop/theming/",1714695653925]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/develop/usage/_payload.json b/design-system/develop/usage/_payload.json
index 8d02fc1e28..e4fde5e220 100644
--- a/design-system/develop/usage/_payload.json
+++ b/design-system/develop/usage/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":40,"items":41},"/design-system/develop","Develop",true,[42,44,46,49],{"id":43,"text":27,"url":43,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":7,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":40,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695151723]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":40,"items":41},"/design-system/develop","Develop",true,[42,44,46,49],{"id":43,"text":27,"url":43,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":7,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":40,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695649972]
\ No newline at end of file
diff --git a/design-system/develop/usage/access-to-github-packages/_payload.json b/design-system/develop/usage/access-to-github-packages/_payload.json
index 6b76b10314..5b86765877 100644
--- a/design-system/develop/usage/access-to-github-packages/_payload.json
+++ b/design-system/develop/usage/access-to-github-packages/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":40,"items":41},"/design-system/develop","Develop",true,[42,44,46,49],{"id":43,"text":27,"url":43,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":7,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":40,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":40,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695151727]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":40,"items":41},"/design-system/develop","Develop",true,[42,44,46,49],{"id":43,"text":27,"url":43,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":7,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":40,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":40,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695649976]
\ No newline at end of file
diff --git a/design-system/develop/usage/access-to-github-packages/index.html b/design-system/develop/usage/access-to-github-packages/index.html
index e2f1b1d299..c543aa7f11 100644
--- a/design-system/develop/usage/access-to-github-packages/index.html
+++ b/design-system/develop/usage/access-to-github-packages/index.html
@@ -25,63 +25,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.F9NVvvm4.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseOl.jzxVYZcz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsImageExample.gzBXNxRI.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.GmB4B_NE.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseOl.f55gcGCc.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsImageExample.8UN1-6g4.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/node.uMQX-T_c.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.uDpSgjM7.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProsePre.1p0bzX0t.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCode.ggTmuEB2.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.iJ9KJvnk.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProsePre.928ctTB_.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCode.Xz7xMLuq.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -95,8 +95,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Access to Github Packages</h1><p class="rpl-type-p-large" data-v-3163c6df>How to access and use repos hosted on Github Packages.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->NPM allows the use of multiple repo hosts, as long as they can be identified by namespace.<!--]--></p><p><!--[-->Ripple 2 is hosted publicly on Github Packages (ghcr) under the <strong><!--[-->@dpc/sdp<!--]--></strong> namespace, so a few steps need to be followed access these packages, while also co-existing with the npm ecosystem.<!--]--></p><p><!--[-->First, create a Personal Access Token on Github:<!--]--></p><ol><!--[--><li><!--[-->Visit <a href="https://github.com/settings/tokens" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://github.com/settings/tokens<!--]--><!--]--><!----><!--]--></a> and select <strong><!--[-->Generate new token<!--]--></strong> &gt; <strong><!--[-->Generate new token (classic)<!--]--></strong><!--]--></li><!--]--></ol><figure class="docs-example" style="width:360px;" data-v-d653ba7c><div class="docs-example-body" data-v-d653ba7c><img src="/img/generate.jpg" alt="Screenshot of a clicked button (title Generate new token) that has opened a drop-down menu with two options: fine-grained and classic" data-v-d653ba7c></div><!----></figure><ol start="2"><!--[--><li><!--[-->Fill in the <strong><!--[-->Note<!--]--></strong> and choose an <strong><!--[-->Expiration<!--]--></strong> - the 30 day default is generally fine, you&#39;ll receive a reminder to regenerate the token just before expiry<!--]--></li><!--]--></ol><figure class="docs-example" style="width:505px;" data-v-d653ba7c><div class="docs-example-body" data-v-d653ba7c><img src="/img/token.jpg" alt="Screenshot of personal access token setup form, with &#39;Note&#39; filled in as &#39;public ghcr access&#39; and &#39;Expiration&#39; set to default of 30 days" data-v-d653ba7c></div><!----></figure><ol start="3"><!--[--><li><!--[-->Set the scope to only allow <code class="docs-code-inline" data-v-2e6046ca><!--[-->read:packages<!--]--></code>, and <strong><!--[-->Generate<!--]--></strong> token<!--]--></li><!--]--></ol><figure class="docs-example" style="width:827px;" data-v-d653ba7c><div class="docs-example-body" data-v-d653ba7c><img src="/img/permissions.jpg" alt="Screenshot of scope, with only read:packages selected" data-v-d653ba7c></div><!----></figure><ol start="4"><!--[--><li><!--[-->Store the resulting token somewhere secure, and add it to either a user <code class="docs-code-inline" data-v-2e6046ca><!--[-->.npmrc<!--]--></code> (recommended) or the project-level <code class="docs-code-inline" data-v-2e6046ca><!--[-->.npmrc<!--]--></code> (the url on line 2 below is protocol-less, not a comment):<!--]--></li><!--]--></ol><div class="docs-code-block" data-v-efa4b2dc><!--[--><pre class="" style=""><!--[--><code>@dpc-sdp:registry=https://npm.pkg.github.com
 //npm.pkg.github.com/:_authToken=&lt;github personal access token&gt;
-</code><!--]--></pre><!--]--></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/4.usage/1.access-to-github-packages.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/usage/access-to-github-packages/_payload.json">[{"state":1,"once":504,"_errors":506,"serverRendered":509,"path":7,"prerenderedAt":510},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":182,"$sdd-globals":206,"$sdd-navigation":208},["ShallowRef",4],["ShallowReactive",5],{"/design-system/develop/usage/access-to-github-packages":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":177,"_id":178,"_source":179,"_file":180,"_extension":181},"/design-system/develop/usage/access-to-github-packages","usage",false,"","Access to Github Packages","How to access and use repos hosted on Github Packages.","page",{"type":15,"children":16,"toc":175},"root",[17,25,38,43,75,82,105,111,136,142,166],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22],{"type":23,"value":24},"text","NPM allows the use of multiple repo hosts, as long as they can be identified by namespace.",{"type":18,"tag":19,"props":26,"children":27},{},[28,30,36],{"type":23,"value":29},"Ripple 2 is hosted publicly on Github Packages (ghcr) under the ",{"type":18,"tag":31,"props":32,"children":33},"strong",{},[34],{"type":23,"value":35},"@dpc/sdp",{"type":23,"value":37}," namespace, so a few steps need to be followed access these packages, while also co-existing with the npm ecosystem.",{"type":18,"tag":19,"props":39,"children":40},{},[41],{"type":23,"value":42},"First, create a Personal Access Token on Github:",{"type":18,"tag":44,"props":45,"children":46},"ol",{},[47],{"type":18,"tag":48,"props":49,"children":50},"li",{},[51,53,61,63,68,70],{"type":23,"value":52},"Visit ",{"type":18,"tag":54,"props":55,"children":59},"a",{"href":56,"rel":57},"https://github.com/settings/tokens",[58],"nofollow",[60],{"type":23,"value":56},{"type":23,"value":62}," and select ",{"type":18,"tag":31,"props":64,"children":65},{},[66],{"type":23,"value":67},"Generate new token",{"type":23,"value":69}," > ",{"type":18,"tag":31,"props":71,"children":72},{},[73],{"type":23,"value":74},"Generate new token (classic)",{"type":18,"tag":76,"props":77,"children":81},"docs-image-example",{"alt":78,"src":79,"style":80},"Screenshot of a clicked button (title Generate new token) that has opened a drop-down menu with two options: fine-grained and classic","/img/generate.jpg","width:360px",[],{"type":18,"tag":44,"props":83,"children":85},{"start":84},2,[86],{"type":18,"tag":48,"props":87,"children":88},{},[89,91,96,98,103],{"type":23,"value":90},"Fill in the ",{"type":18,"tag":31,"props":92,"children":93},{},[94],{"type":23,"value":95},"Note",{"type":23,"value":97}," and choose an ",{"type":18,"tag":31,"props":99,"children":100},{},[101],{"type":23,"value":102},"Expiration",{"type":23,"value":104}," - the 30 day default is generally fine, you'll receive a reminder to regenerate the token just before expiry",{"type":18,"tag":76,"props":106,"children":110},{"alt":107,"src":108,"style":109},"Screenshot of personal access token setup form, with 'Note' filled in as 'public ghcr access' and 'Expiration' set to default of 30 days","/img/token.jpg","width:505px",[],{"type":18,"tag":44,"props":112,"children":114},{"start":113},3,[115],{"type":18,"tag":48,"props":116,"children":117},{},[118,120,127,129,134],{"type":23,"value":119},"Set the scope to only allow ",{"type":18,"tag":121,"props":122,"children":124},"code",{"className":123},[],[125],{"type":23,"value":126},"read:packages",{"type":23,"value":128},", and ",{"type":18,"tag":31,"props":130,"children":131},{},[132],{"type":23,"value":133},"Generate",{"type":23,"value":135}," token",{"type":18,"tag":76,"props":137,"children":141},{"alt":138,"src":139,"style":140},"Screenshot of scope, with only read:packages selected","/img/permissions.jpg","width:827px",[],{"type":18,"tag":44,"props":143,"children":145},{"start":144},4,[146],{"type":18,"tag":48,"props":147,"children":148},{},[149,151,157,159,164],{"type":23,"value":150},"Store the resulting token somewhere secure, and add it to either a user ",{"type":18,"tag":121,"props":152,"children":154},{"className":153},[],[155],{"type":23,"value":156},".npmrc",{"type":23,"value":158}," (recommended) or the project-level ",{"type":18,"tag":121,"props":160,"children":162},{"className":161},[],[163],{"type":23,"value":156},{"type":23,"value":165}," (the url on line 2 below is protocol-less, not a comment):",{"type":18,"tag":167,"props":168,"children":170},"pre",{"code":169},"@dpc-sdp:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=\u003Cgithub personal access token>\n",[171],{"type":18,"tag":121,"props":172,"children":173},{"__ignoreMap":10},[174],{"type":23,"value":169},{"title":10,"searchDepth":84,"depth":84,"links":176},[],"markdown","content:design-system:3.develop:4.usage:1.access-to-github-packages.md","content","design-system/3.develop/4.usage/1.access-to-github-packages.md","md",["ShallowRef",183],["ShallowReactive",184],{"/design-system/develop/usage/access-to-github-packages":185},[186,200],{"_path":187,"_dir":188,"_draft":9,"_partial":9,"_locale":10,"title":189,"description":190,"layout":13,"links":191,"_type":177,"_id":198,"_source":179,"_file":199,"_extension":181},"/design-system/develop/usage","develop","Usage","Ripple components can be used in several different ways depending on your project needs.",[192,195],{"text":193,"url":194},"Github","https://github.com/dpc-sdp/ripple-framework",{"text":196,"url":197},"Storybook","/storybook","content:design-system:3.develop:3.usage.md","design-system/3.develop/3.usage.md",{"_path":201,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":202,"description":203,"layout":13,"_type":177,"_id":204,"_source":179,"_file":205,"_extension":181},"/design-system/develop/usage/vue","Vue","How to use Ripple components with Vue.","content:design-system:3.develop:4.usage:2.vue.md","design-system/3.develop/4.usage/2.vue.md",["ShallowRef",207],{},[209,214,456],{"title":210,"_path":211,"icon":212,"layout":213},"Ripple Design System","/","carbon:home","home",{"title":215,"_path":216,"children":217},"Design System","/design-system",[218,234,250,274,308],{"title":219,"_path":220,"children":221},"About","/design-system/about",[222,225,228,231],{"title":223,"_path":224,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":226,"_path":227,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":229,"_path":230,"layout":13},"Support","/design-system/about/getting-support",{"title":232,"_path":233,"layout":13},"Contributing","/design-system/about/contributing",{"title":235,"_path":236,"children":237},"Design","/design-system/design",[238,241,244,247],{"title":239,"_path":240,"layout":13},"Getting started","/design-system/design/getting-started",{"title":242,"_path":243,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":245,"_path":246,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":248,"_path":249,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":251,"_path":252,"children":253},"Develop","/design-system/develop",[254,256,258,261],{"title":239,"_path":255,"layout":13},"/design-system/develop/getting-started",{"title":232,"_path":257,"layout":13},"/design-system/develop/contributing",{"title":259,"_path":260,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":189,"_path":187,"children":262,"layout":13},[263,264,265,268,271],{"title":11,"_path":7,"layout":13},{"title":202,"_path":201,"layout":13},{"title":266,"_path":267,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":269,"_path":270,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":272,"_path":273,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":275,"_path":276,"children":277},"Styles","/design-system/styles",[278,281,284,287,290,293,296,299,302,305],{"title":279,"_path":280,"layout":13},"Colour","/design-system/styles/colour",{"title":282,"_path":283,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":285,"_path":286,"layout":13},"Grid","/design-system/styles/grid",{"title":288,"_path":289,"layout":13},"Icons","/design-system/styles/icons",{"title":291,"_path":292,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":294,"_path":295,"layout":13},"Layout","/design-system/styles/layout",{"title":297,"_path":298,"layout":13},"Logo","/design-system/styles/logo",{"title":300,"_path":301,"layout":13},"Motion","/design-system/styles/motion",{"title":303,"_path":304,"layout":13},"Spacing","/design-system/styles/spacing",{"title":306,"_path":307,"layout":13},"Typography","/design-system/styles/typography",{"title":309,"_path":310,"children":311},"Components","/design-system/components",[312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,441,444,447,450,453],{"title":313,"_path":314,"layout":13},"Accordion","/design-system/components/accordion",{"title":316,"_path":317,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":319,"_path":320,"layout":13},"Alert","/design-system/components/alert",{"title":322,"_path":323,"layout":13},"Block quote","/design-system/components/block-quote",{"title":325,"_path":326,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":328,"_path":329,"layout":13},"Button","/design-system/components/button",{"title":331,"_path":332,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":334,"_path":335,"layout":13},"Callout","/design-system/components/callout",{"title":337,"_path":338,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":340,"_path":341,"layout":13},"Card","/design-system/components/card",{"title":343,"_path":344,"layout":13},"Carousel","/design-system/components/carousel",{"title":346,"_path":347,"layout":13},"Category grid","/design-system/components/category-grid",{"title":349,"_path":350,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":352,"_path":353,"layout":13},"Chip","/design-system/components/chip",{"title":355,"_path":356,"layout":13},"Contact us","/design-system/components/contact-us",{"title":358,"_path":359,"layout":13},"Date input","/design-system/components/date-input",{"title":361,"_path":362,"layout":13},"Detail list","/design-system/components/detail-list",{"title":364,"_path":365,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":367,"_path":368,"layout":13},"File","/design-system/components/file",{"title":370,"_path":371,"layout":13},"Footer","/design-system/components/footer",{"title":373,"_path":374,"layout":13},"Form","/design-system/components/form",{"title":376,"_path":377,"layout":13},"Form alert","/design-system/components/form-alert",{"title":379,"_path":380,"layout":13},"Header","/design-system/components/header",{"title":382,"_path":383,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":385,"_path":386,"layout":13},"Input field","/design-system/components/input-field",{"title":388,"_path":389,"layout":13},"Key dates","/design-system/components/key-dates",{"title":391,"_path":392,"layout":13},"Media","/design-system/components/media",{"title":394,"_path":395,"layout":13},"Media embed","/design-system/components/media-embed",{"title":397,"_path":398,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":400,"_path":401,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":403,"_path":404,"layout":13},"Option button","/design-system/components/option-button",{"title":406,"_path":407,"layout":13},"Page action","/design-system/components/page-action",{"title":409,"_path":410,"layout":13},"Pagination","/design-system/components/pagination",{"title":412,"_path":413,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":415,"_path":416,"layout":13},"Profile","/design-system/components/profile",{"title":418,"_path":419,"layout":13},"Radio button","/design-system/components/radio-button",{"title":421,"_path":422,"layout":13},"Related links","/design-system/components/related-links",{"title":424,"_path":425,"layout":13},"Results listing","/design-system/components/results-listing",{"title":427,"_path":428,"layout":13},"Search bar","/design-system/components/search-bar",{"title":430,"_path":431,"layout":13},"Skip link","/design-system/components/skip-link",{"title":433,"_path":434,"layout":13},"Social share","/design-system/components/social-share",{"title":436,"_path":437,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":439,"_path":440,"layout":13},"Table","/design-system/components/table",{"title":442,"_path":443,"layout":13},"Tabs","/design-system/components/tabs",{"title":445,"_path":446,"layout":13},"Tag","/design-system/components/tag",{"title":448,"_path":449,"layout":13},"Text area","/design-system/components/text-area",{"title":451,"_path":452,"layout":13},"Timeline","/design-system/components/timeline",{"title":454,"_path":455,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":457,"_path":458,"children":459,"layout":13},"Ripple Framework","/framework",[460,461,479,501],{"title":457,"_path":458,"layout":13},{"title":462,"_path":463,"children":464},"Key Concepts","/framework/key-concepts",[465,467,470,473,476],{"title":266,"_path":466,"layout":13},"/framework/key-concepts/nuxt",{"title":468,"_path":469,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":471,"_path":472,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":474,"_path":475,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":477,"_path":478,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":480,"_path":481,"children":482},"Guides","/framework/guides",[483,486,489,492,495,498],{"title":484,"_path":485,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":487,"_path":488,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":490,"_path":491,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":493,"_path":494,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":496,"_path":497,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":499,"_path":500,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":502,"_path":503,"layout":13},"Core modules","/framework/core-modules",["Reactive",505],["Set"],["Reactive",507],{"module-navigation":508},null,true,1714695151727]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+</code><!--]--></pre><!--]--></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/4.usage/1.access-to-github-packages.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/usage/access-to-github-packages/_payload.json">[{"state":1,"once":504,"_errors":506,"serverRendered":509,"path":7,"prerenderedAt":510},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":182,"$sdd-globals":206,"$sdd-navigation":208},["ShallowRef",4],["ShallowReactive",5],{"/design-system/develop/usage/access-to-github-packages":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":177,"_id":178,"_source":179,"_file":180,"_extension":181},"/design-system/develop/usage/access-to-github-packages","usage",false,"","Access to Github Packages","How to access and use repos hosted on Github Packages.","page",{"type":15,"children":16,"toc":175},"root",[17,25,38,43,75,82,105,111,136,142,166],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22],{"type":23,"value":24},"text","NPM allows the use of multiple repo hosts, as long as they can be identified by namespace.",{"type":18,"tag":19,"props":26,"children":27},{},[28,30,36],{"type":23,"value":29},"Ripple 2 is hosted publicly on Github Packages (ghcr) under the ",{"type":18,"tag":31,"props":32,"children":33},"strong",{},[34],{"type":23,"value":35},"@dpc/sdp",{"type":23,"value":37}," namespace, so a few steps need to be followed access these packages, while also co-existing with the npm ecosystem.",{"type":18,"tag":19,"props":39,"children":40},{},[41],{"type":23,"value":42},"First, create a Personal Access Token on Github:",{"type":18,"tag":44,"props":45,"children":46},"ol",{},[47],{"type":18,"tag":48,"props":49,"children":50},"li",{},[51,53,61,63,68,70],{"type":23,"value":52},"Visit ",{"type":18,"tag":54,"props":55,"children":59},"a",{"href":56,"rel":57},"https://github.com/settings/tokens",[58],"nofollow",[60],{"type":23,"value":56},{"type":23,"value":62}," and select ",{"type":18,"tag":31,"props":64,"children":65},{},[66],{"type":23,"value":67},"Generate new token",{"type":23,"value":69}," > ",{"type":18,"tag":31,"props":71,"children":72},{},[73],{"type":23,"value":74},"Generate new token (classic)",{"type":18,"tag":76,"props":77,"children":81},"docs-image-example",{"alt":78,"src":79,"style":80},"Screenshot of a clicked button (title Generate new token) that has opened a drop-down menu with two options: fine-grained and classic","/img/generate.jpg","width:360px",[],{"type":18,"tag":44,"props":83,"children":85},{"start":84},2,[86],{"type":18,"tag":48,"props":87,"children":88},{},[89,91,96,98,103],{"type":23,"value":90},"Fill in the ",{"type":18,"tag":31,"props":92,"children":93},{},[94],{"type":23,"value":95},"Note",{"type":23,"value":97}," and choose an ",{"type":18,"tag":31,"props":99,"children":100},{},[101],{"type":23,"value":102},"Expiration",{"type":23,"value":104}," - the 30 day default is generally fine, you'll receive a reminder to regenerate the token just before expiry",{"type":18,"tag":76,"props":106,"children":110},{"alt":107,"src":108,"style":109},"Screenshot of personal access token setup form, with 'Note' filled in as 'public ghcr access' and 'Expiration' set to default of 30 days","/img/token.jpg","width:505px",[],{"type":18,"tag":44,"props":112,"children":114},{"start":113},3,[115],{"type":18,"tag":48,"props":116,"children":117},{},[118,120,127,129,134],{"type":23,"value":119},"Set the scope to only allow ",{"type":18,"tag":121,"props":122,"children":124},"code",{"className":123},[],[125],{"type":23,"value":126},"read:packages",{"type":23,"value":128},", and ",{"type":18,"tag":31,"props":130,"children":131},{},[132],{"type":23,"value":133},"Generate",{"type":23,"value":135}," token",{"type":18,"tag":76,"props":137,"children":141},{"alt":138,"src":139,"style":140},"Screenshot of scope, with only read:packages selected","/img/permissions.jpg","width:827px",[],{"type":18,"tag":44,"props":143,"children":145},{"start":144},4,[146],{"type":18,"tag":48,"props":147,"children":148},{},[149,151,157,159,164],{"type":23,"value":150},"Store the resulting token somewhere secure, and add it to either a user ",{"type":18,"tag":121,"props":152,"children":154},{"className":153},[],[155],{"type":23,"value":156},".npmrc",{"type":23,"value":158}," (recommended) or the project-level ",{"type":18,"tag":121,"props":160,"children":162},{"className":161},[],[163],{"type":23,"value":156},{"type":23,"value":165}," (the url on line 2 below is protocol-less, not a comment):",{"type":18,"tag":167,"props":168,"children":170},"pre",{"code":169},"@dpc-sdp:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=\u003Cgithub personal access token>\n",[171],{"type":18,"tag":121,"props":172,"children":173},{"__ignoreMap":10},[174],{"type":23,"value":169},{"title":10,"searchDepth":84,"depth":84,"links":176},[],"markdown","content:design-system:3.develop:4.usage:1.access-to-github-packages.md","content","design-system/3.develop/4.usage/1.access-to-github-packages.md","md",["ShallowRef",183],["ShallowReactive",184],{"/design-system/develop/usage/access-to-github-packages":185},[186,200],{"_path":187,"_dir":188,"_draft":9,"_partial":9,"_locale":10,"title":189,"description":190,"layout":13,"links":191,"_type":177,"_id":198,"_source":179,"_file":199,"_extension":181},"/design-system/develop/usage","develop","Usage","Ripple components can be used in several different ways depending on your project needs.",[192,195],{"text":193,"url":194},"Github","https://github.com/dpc-sdp/ripple-framework",{"text":196,"url":197},"Storybook","/storybook","content:design-system:3.develop:3.usage.md","design-system/3.develop/3.usage.md",{"_path":201,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":202,"description":203,"layout":13,"_type":177,"_id":204,"_source":179,"_file":205,"_extension":181},"/design-system/develop/usage/vue","Vue","How to use Ripple components with Vue.","content:design-system:3.develop:4.usage:2.vue.md","design-system/3.develop/4.usage/2.vue.md",["ShallowRef",207],{},[209,214,456],{"title":210,"_path":211,"icon":212,"layout":213},"Ripple Design System","/","carbon:home","home",{"title":215,"_path":216,"children":217},"Design System","/design-system",[218,234,250,274,308],{"title":219,"_path":220,"children":221},"About","/design-system/about",[222,225,228,231],{"title":223,"_path":224,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":226,"_path":227,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":229,"_path":230,"layout":13},"Support","/design-system/about/getting-support",{"title":232,"_path":233,"layout":13},"Contributing","/design-system/about/contributing",{"title":235,"_path":236,"children":237},"Design","/design-system/design",[238,241,244,247],{"title":239,"_path":240,"layout":13},"Getting started","/design-system/design/getting-started",{"title":242,"_path":243,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":245,"_path":246,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":248,"_path":249,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":251,"_path":252,"children":253},"Develop","/design-system/develop",[254,256,258,261],{"title":239,"_path":255,"layout":13},"/design-system/develop/getting-started",{"title":232,"_path":257,"layout":13},"/design-system/develop/contributing",{"title":259,"_path":260,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":189,"_path":187,"children":262,"layout":13},[263,264,265,268,271],{"title":11,"_path":7,"layout":13},{"title":202,"_path":201,"layout":13},{"title":266,"_path":267,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":269,"_path":270,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":272,"_path":273,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":275,"_path":276,"children":277},"Styles","/design-system/styles",[278,281,284,287,290,293,296,299,302,305],{"title":279,"_path":280,"layout":13},"Colour","/design-system/styles/colour",{"title":282,"_path":283,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":285,"_path":286,"layout":13},"Grid","/design-system/styles/grid",{"title":288,"_path":289,"layout":13},"Icons","/design-system/styles/icons",{"title":291,"_path":292,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":294,"_path":295,"layout":13},"Layout","/design-system/styles/layout",{"title":297,"_path":298,"layout":13},"Logo","/design-system/styles/logo",{"title":300,"_path":301,"layout":13},"Motion","/design-system/styles/motion",{"title":303,"_path":304,"layout":13},"Spacing","/design-system/styles/spacing",{"title":306,"_path":307,"layout":13},"Typography","/design-system/styles/typography",{"title":309,"_path":310,"children":311},"Components","/design-system/components",[312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,441,444,447,450,453],{"title":313,"_path":314,"layout":13},"Accordion","/design-system/components/accordion",{"title":316,"_path":317,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":319,"_path":320,"layout":13},"Alert","/design-system/components/alert",{"title":322,"_path":323,"layout":13},"Block quote","/design-system/components/block-quote",{"title":325,"_path":326,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":328,"_path":329,"layout":13},"Button","/design-system/components/button",{"title":331,"_path":332,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":334,"_path":335,"layout":13},"Callout","/design-system/components/callout",{"title":337,"_path":338,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":340,"_path":341,"layout":13},"Card","/design-system/components/card",{"title":343,"_path":344,"layout":13},"Carousel","/design-system/components/carousel",{"title":346,"_path":347,"layout":13},"Category grid","/design-system/components/category-grid",{"title":349,"_path":350,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":352,"_path":353,"layout":13},"Chip","/design-system/components/chip",{"title":355,"_path":356,"layout":13},"Contact us","/design-system/components/contact-us",{"title":358,"_path":359,"layout":13},"Date input","/design-system/components/date-input",{"title":361,"_path":362,"layout":13},"Detail list","/design-system/components/detail-list",{"title":364,"_path":365,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":367,"_path":368,"layout":13},"File","/design-system/components/file",{"title":370,"_path":371,"layout":13},"Footer","/design-system/components/footer",{"title":373,"_path":374,"layout":13},"Form","/design-system/components/form",{"title":376,"_path":377,"layout":13},"Form alert","/design-system/components/form-alert",{"title":379,"_path":380,"layout":13},"Header","/design-system/components/header",{"title":382,"_path":383,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":385,"_path":386,"layout":13},"Input field","/design-system/components/input-field",{"title":388,"_path":389,"layout":13},"Key dates","/design-system/components/key-dates",{"title":391,"_path":392,"layout":13},"Media","/design-system/components/media",{"title":394,"_path":395,"layout":13},"Media embed","/design-system/components/media-embed",{"title":397,"_path":398,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":400,"_path":401,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":403,"_path":404,"layout":13},"Option button","/design-system/components/option-button",{"title":406,"_path":407,"layout":13},"Page action","/design-system/components/page-action",{"title":409,"_path":410,"layout":13},"Pagination","/design-system/components/pagination",{"title":412,"_path":413,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":415,"_path":416,"layout":13},"Profile","/design-system/components/profile",{"title":418,"_path":419,"layout":13},"Radio button","/design-system/components/radio-button",{"title":421,"_path":422,"layout":13},"Related links","/design-system/components/related-links",{"title":424,"_path":425,"layout":13},"Results listing","/design-system/components/results-listing",{"title":427,"_path":428,"layout":13},"Search bar","/design-system/components/search-bar",{"title":430,"_path":431,"layout":13},"Skip link","/design-system/components/skip-link",{"title":433,"_path":434,"layout":13},"Social share","/design-system/components/social-share",{"title":436,"_path":437,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":439,"_path":440,"layout":13},"Table","/design-system/components/table",{"title":442,"_path":443,"layout":13},"Tabs","/design-system/components/tabs",{"title":445,"_path":446,"layout":13},"Tag","/design-system/components/tag",{"title":448,"_path":449,"layout":13},"Text area","/design-system/components/text-area",{"title":451,"_path":452,"layout":13},"Timeline","/design-system/components/timeline",{"title":454,"_path":455,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":457,"_path":458,"children":459,"layout":13},"Ripple Framework","/framework",[460,461,479,501],{"title":457,"_path":458,"layout":13},{"title":462,"_path":463,"children":464},"Key Concepts","/framework/key-concepts",[465,467,470,473,476],{"title":266,"_path":466,"layout":13},"/framework/key-concepts/nuxt",{"title":468,"_path":469,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":471,"_path":472,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":474,"_path":475,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":477,"_path":478,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":480,"_path":481,"children":482},"Guides","/framework/guides",[483,486,489,492,495,498],{"title":484,"_path":485,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":487,"_path":488,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":490,"_path":491,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":493,"_path":494,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":496,"_path":497,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":499,"_path":500,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":502,"_path":503,"layout":13},"Core modules","/framework/core-modules",["Reactive",505],["Set"],["Reactive",507],{"module-navigation":508},null,true,1714695649976]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/develop/usage/css-only/_payload.json b/design-system/develop/usage/css-only/_payload.json
index fb0ad064d1..7958f00cd5 100644
--- a/design-system/develop/usage/css-only/_payload.json
+++ b/design-system/develop/usage/css-only/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":40,"items":41},"/design-system/develop","Develop",true,[42,44,46,49],{"id":43,"text":27,"url":43,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":7,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":40,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":40,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695151911]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":40,"items":41},"/design-system/develop","Develop",true,[42,44,46,49],{"id":43,"text":27,"url":43,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":7,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":40,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":40,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695650163]
\ No newline at end of file
diff --git a/design-system/develop/usage/css-only/index.html b/design-system/develop/usage/css-only/index.html
index b8825bcff8..479f92d9fe 100644
--- a/design-system/develop/usage/css-only/index.html
+++ b/design-system/develop/usage/css-only/index.html
@@ -24,58 +24,58 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.uDpSgjM7.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProsePre.1p0bzX0t.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCode.ggTmuEB2.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.iJ9KJvnk.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProsePre.928ctTB_.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCode.Xz7xMLuq.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -89,8 +89,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Styles only</h1><p class="rpl-type-p-large" data-v-3163c6df>Using the design system styles without a front-end framework.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->Ripple UI core exports it&#39;s CSS stylesheets directly. If you have a use case where you can&#39;t use any of the other outputs, you can use our styles directly and provide your own markup based upon the rendered examples in Storybook.<!--]--></p><p><!--[-->First, set up <a href="access-to-github-packages" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->access to Github Packages<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><p><!--[-->Next, install Ripple UI in your project:<!--]--></p><p><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->npm install @dpc-sdp/ripple-ui-core --save<!--]--></code><!--]--></p><p><!--[-->You can import CSS styles from the ripple-ui-core package.<!--]--></p><div class="docs-code-block" meta data-v-efa4b2dc><!--[--><pre class="language-js shiki shiki-themes github-light" style=""><!--[--><code><span class="line" line="1"><span style="--shiki-default:#D73A49">import</span><span style="--shiki-default:#032F62"> &#39;@dpc-sdp/ripple-ui-core/style&#39;</span><span style="--shiki-default:#24292E">;
 </span></span><span class="line" line="2"><span style="--shiki-default:#D73A49">import</span><span style="--shiki-default:#032F62"> &#39;@dpc-sdp/ripple-ui-core/style/components&#39;</span><span style="--shiki-default:#24292E">;
-</span></span></code><!--]--></pre><!--]--></div><p><!--[-->We recommend that you lock the version of <code class="docs-code-inline" data-v-2e6046ca><!--[-->@dpc-sdp/ripple-ui-core<!--]--></code> so that any future changes of styles without changes to markup do not break your application.<!--]--></p><style>html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}</style><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/4.usage/5.css-only.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/usage/css-only/_payload.json">[{"state":1,"once":452,"_errors":454,"serverRendered":457,"path":7,"prerenderedAt":458},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":136,"$sdd-globals":154,"$sdd-navigation":156},["ShallowRef",4],["ShallowReactive",5],{"/design-system/develop/usage/css-only":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":131,"_id":132,"_source":133,"_file":134,"_extension":135},"/design-system/develop/usage/css-only","usage",false,"","Styles only","Using the design system styles without a front-end framework.","page",{"type":15,"children":16,"toc":129},"root",[17,25,39,44,54,59,110,123],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22],{"type":23,"value":24},"text","Ripple UI core exports it's CSS stylesheets directly. If you have a use case where you can't use any of the other outputs, you can use our styles directly and provide your own markup based upon the rendered examples in Storybook.",{"type":18,"tag":19,"props":26,"children":27},{},[28,30,37],{"type":23,"value":29},"First, set up ",{"type":18,"tag":31,"props":32,"children":34},"a",{"href":33},"access-to-github-packages",[35],{"type":23,"value":36},"access to Github Packages",{"type":23,"value":38},".",{"type":18,"tag":19,"props":40,"children":41},{},[42],{"type":23,"value":43},"Next, install Ripple UI in your project:",{"type":18,"tag":19,"props":45,"children":46},{},[47],{"type":18,"tag":48,"props":49,"children":51},"code",{"className":50},[],[52],{"type":23,"value":53},"npm install @dpc-sdp/ripple-ui-core --save",{"type":18,"tag":19,"props":55,"children":56},{},[57],{"type":23,"value":58},"You can import CSS styles from the ripple-ui-core package.",{"type":18,"tag":60,"props":61,"children":65},"pre",{"className":62,"code":63,"language":64,"meta":10,"style":10},"language-js shiki shiki-themes github-light","import '@dpc-sdp/ripple-ui-core/style';\nimport '@dpc-sdp/ripple-ui-core/style/components';\n","js",[66],{"type":18,"tag":48,"props":67,"children":68},{"__ignoreMap":10},[69,93],{"type":18,"tag":70,"props":71,"children":74},"span",{"class":72,"line":73},"line",1,[75,81,87],{"type":18,"tag":70,"props":76,"children":78},{"style":77},"--shiki-default:#D73A49",[79],{"type":23,"value":80},"import",{"type":18,"tag":70,"props":82,"children":84},{"style":83},"--shiki-default:#032F62",[85],{"type":23,"value":86}," '@dpc-sdp/ripple-ui-core/style'",{"type":18,"tag":70,"props":88,"children":90},{"style":89},"--shiki-default:#24292E",[91],{"type":23,"value":92},";\n",{"type":18,"tag":70,"props":94,"children":96},{"class":72,"line":95},2,[97,101,106],{"type":18,"tag":70,"props":98,"children":99},{"style":77},[100],{"type":23,"value":80},{"type":18,"tag":70,"props":102,"children":103},{"style":83},[104],{"type":23,"value":105}," '@dpc-sdp/ripple-ui-core/style/components'",{"type":18,"tag":70,"props":107,"children":108},{"style":89},[109],{"type":23,"value":92},{"type":18,"tag":19,"props":111,"children":112},{},[113,115,121],{"type":23,"value":114},"We recommend that you lock the version of ",{"type":18,"tag":48,"props":116,"children":118},{"className":117},[],[119],{"type":23,"value":120},"@dpc-sdp/ripple-ui-core",{"type":23,"value":122}," so that any future changes of styles without changes to markup do not break your application.",{"type":18,"tag":124,"props":125,"children":126},"style",{},[127],{"type":23,"value":128},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":10,"searchDepth":95,"depth":95,"links":130},[],"markdown","content:design-system:3.develop:4.usage:5.css-only.md","content","design-system/3.develop/4.usage/5.css-only.md","md",["ShallowRef",137],["ShallowReactive",138],{"/design-system/develop/usage/css-only":139},[140,146],{"_path":141,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":142,"description":143,"layout":13,"_type":131,"_id":144,"_source":133,"_file":145,"_extension":135},"/design-system/develop/usage/webcomponents","Web components","How to use the web component exports with other front-end systems.","content:design-system:3.develop:4.usage:4.webcomponents.md","design-system/3.develop/4.usage/4.webcomponents.md",{"_path":147,"_dir":148,"_draft":9,"_partial":9,"_locale":10,"title":149,"description":150,"layout":13,"label":151,"_type":131,"_id":152,"_source":133,"_file":153,"_extension":135},"/design-system/styles/colour","styles","Colour","Colour plays an important role in creating a consistent and strong visual digital products and services.","Core","content:design-system:4.styles:colour.md","design-system/4.styles/colour.md",["ShallowRef",155],{},[157,162,404],{"title":158,"_path":159,"icon":160,"layout":161},"Ripple Design System","/","carbon:home","home",{"title":163,"_path":164,"children":165},"Design System","/design-system",[166,182,198,224,256],{"title":167,"_path":168,"children":169},"About","/design-system/about",[170,173,176,179],{"title":171,"_path":172,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":174,"_path":175,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":177,"_path":178,"layout":13},"Support","/design-system/about/getting-support",{"title":180,"_path":181,"layout":13},"Contributing","/design-system/about/contributing",{"title":183,"_path":184,"children":185},"Design","/design-system/design",[186,189,192,195],{"title":187,"_path":188,"layout":13},"Getting started","/design-system/design/getting-started",{"title":190,"_path":191,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":193,"_path":194,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":196,"_path":197,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":199,"_path":200,"children":201},"Develop","/design-system/develop",[202,204,206,209],{"title":187,"_path":203,"layout":13},"/design-system/develop/getting-started",{"title":180,"_path":205,"layout":13},"/design-system/develop/contributing",{"title":207,"_path":208,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":210,"_path":211,"children":212,"layout":13},"Usage","/design-system/develop/usage",[213,216,219,222,223],{"title":214,"_path":215,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":217,"_path":218,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":220,"_path":221,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":142,"_path":141,"layout":13},{"title":11,"_path":7,"layout":13},{"title":225,"_path":226,"children":227},"Styles","/design-system/styles",[228,229,232,235,238,241,244,247,250,253],{"title":149,"_path":147,"layout":13},{"title":230,"_path":231,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":233,"_path":234,"layout":13},"Grid","/design-system/styles/grid",{"title":236,"_path":237,"layout":13},"Icons","/design-system/styles/icons",{"title":239,"_path":240,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":242,"_path":243,"layout":13},"Layout","/design-system/styles/layout",{"title":245,"_path":246,"layout":13},"Logo","/design-system/styles/logo",{"title":248,"_path":249,"layout":13},"Motion","/design-system/styles/motion",{"title":251,"_path":252,"layout":13},"Spacing","/design-system/styles/spacing",{"title":254,"_path":255,"layout":13},"Typography","/design-system/styles/typography",{"title":257,"_path":258,"children":259},"Components","/design-system/components",[260,263,266,269,272,275,278,281,284,287,290,293,296,299,302,305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401],{"title":261,"_path":262,"layout":13},"Accordion","/design-system/components/accordion",{"title":264,"_path":265,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":267,"_path":268,"layout":13},"Alert","/design-system/components/alert",{"title":270,"_path":271,"layout":13},"Block quote","/design-system/components/block-quote",{"title":273,"_path":274,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":276,"_path":277,"layout":13},"Button","/design-system/components/button",{"title":279,"_path":280,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":282,"_path":283,"layout":13},"Callout","/design-system/components/callout",{"title":285,"_path":286,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":288,"_path":289,"layout":13},"Card","/design-system/components/card",{"title":291,"_path":292,"layout":13},"Carousel","/design-system/components/carousel",{"title":294,"_path":295,"layout":13},"Category grid","/design-system/components/category-grid",{"title":297,"_path":298,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":300,"_path":301,"layout":13},"Chip","/design-system/components/chip",{"title":303,"_path":304,"layout":13},"Contact us","/design-system/components/contact-us",{"title":306,"_path":307,"layout":13},"Date input","/design-system/components/date-input",{"title":309,"_path":310,"layout":13},"Detail list","/design-system/components/detail-list",{"title":312,"_path":313,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":315,"_path":316,"layout":13},"File","/design-system/components/file",{"title":318,"_path":319,"layout":13},"Footer","/design-system/components/footer",{"title":321,"_path":322,"layout":13},"Form","/design-system/components/form",{"title":324,"_path":325,"layout":13},"Form alert","/design-system/components/form-alert",{"title":327,"_path":328,"layout":13},"Header","/design-system/components/header",{"title":330,"_path":331,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":333,"_path":334,"layout":13},"Input field","/design-system/components/input-field",{"title":336,"_path":337,"layout":13},"Key dates","/design-system/components/key-dates",{"title":339,"_path":340,"layout":13},"Media","/design-system/components/media",{"title":342,"_path":343,"layout":13},"Media embed","/design-system/components/media-embed",{"title":345,"_path":346,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":348,"_path":349,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":351,"_path":352,"layout":13},"Option button","/design-system/components/option-button",{"title":354,"_path":355,"layout":13},"Page action","/design-system/components/page-action",{"title":357,"_path":358,"layout":13},"Pagination","/design-system/components/pagination",{"title":360,"_path":361,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":363,"_path":364,"layout":13},"Profile","/design-system/components/profile",{"title":366,"_path":367,"layout":13},"Radio button","/design-system/components/radio-button",{"title":369,"_path":370,"layout":13},"Related links","/design-system/components/related-links",{"title":372,"_path":373,"layout":13},"Results listing","/design-system/components/results-listing",{"title":375,"_path":376,"layout":13},"Search bar","/design-system/components/search-bar",{"title":378,"_path":379,"layout":13},"Skip link","/design-system/components/skip-link",{"title":381,"_path":382,"layout":13},"Social share","/design-system/components/social-share",{"title":384,"_path":385,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":387,"_path":388,"layout":13},"Table","/design-system/components/table",{"title":390,"_path":391,"layout":13},"Tabs","/design-system/components/tabs",{"title":393,"_path":394,"layout":13},"Tag","/design-system/components/tag",{"title":396,"_path":397,"layout":13},"Text area","/design-system/components/text-area",{"title":399,"_path":400,"layout":13},"Timeline","/design-system/components/timeline",{"title":402,"_path":403,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":405,"_path":406,"children":407,"layout":13},"Ripple Framework","/framework",[408,409,427,449],{"title":405,"_path":406,"layout":13},{"title":410,"_path":411,"children":412},"Key Concepts","/framework/key-concepts",[413,415,418,421,424],{"title":220,"_path":414,"layout":13},"/framework/key-concepts/nuxt",{"title":416,"_path":417,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":419,"_path":420,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":422,"_path":423,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":425,"_path":426,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":428,"_path":429,"children":430},"Guides","/framework/guides",[431,434,437,440,443,446],{"title":432,"_path":433,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":435,"_path":436,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":438,"_path":439,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":441,"_path":442,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":444,"_path":445,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":447,"_path":448,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":450,"_path":451,"layout":13},"Core modules","/framework/core-modules",["Reactive",453],["Set"],["Reactive",455],{"module-navigation":456},null,true,1714695151911]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+</span></span></code><!--]--></pre><!--]--></div><p><!--[-->We recommend that you lock the version of <code class="docs-code-inline" data-v-2e6046ca><!--[-->@dpc-sdp/ripple-ui-core<!--]--></code> so that any future changes of styles without changes to markup do not break your application.<!--]--></p><style>html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}</style><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/4.usage/5.css-only.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/usage/css-only/_payload.json">[{"state":1,"once":452,"_errors":454,"serverRendered":457,"path":7,"prerenderedAt":458},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":136,"$sdd-globals":154,"$sdd-navigation":156},["ShallowRef",4],["ShallowReactive",5],{"/design-system/develop/usage/css-only":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":131,"_id":132,"_source":133,"_file":134,"_extension":135},"/design-system/develop/usage/css-only","usage",false,"","Styles only","Using the design system styles without a front-end framework.","page",{"type":15,"children":16,"toc":129},"root",[17,25,39,44,54,59,110,123],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22],{"type":23,"value":24},"text","Ripple UI core exports it's CSS stylesheets directly. If you have a use case where you can't use any of the other outputs, you can use our styles directly and provide your own markup based upon the rendered examples in Storybook.",{"type":18,"tag":19,"props":26,"children":27},{},[28,30,37],{"type":23,"value":29},"First, set up ",{"type":18,"tag":31,"props":32,"children":34},"a",{"href":33},"access-to-github-packages",[35],{"type":23,"value":36},"access to Github Packages",{"type":23,"value":38},".",{"type":18,"tag":19,"props":40,"children":41},{},[42],{"type":23,"value":43},"Next, install Ripple UI in your project:",{"type":18,"tag":19,"props":45,"children":46},{},[47],{"type":18,"tag":48,"props":49,"children":51},"code",{"className":50},[],[52],{"type":23,"value":53},"npm install @dpc-sdp/ripple-ui-core --save",{"type":18,"tag":19,"props":55,"children":56},{},[57],{"type":23,"value":58},"You can import CSS styles from the ripple-ui-core package.",{"type":18,"tag":60,"props":61,"children":65},"pre",{"className":62,"code":63,"language":64,"meta":10,"style":10},"language-js shiki shiki-themes github-light","import '@dpc-sdp/ripple-ui-core/style';\nimport '@dpc-sdp/ripple-ui-core/style/components';\n","js",[66],{"type":18,"tag":48,"props":67,"children":68},{"__ignoreMap":10},[69,93],{"type":18,"tag":70,"props":71,"children":74},"span",{"class":72,"line":73},"line",1,[75,81,87],{"type":18,"tag":70,"props":76,"children":78},{"style":77},"--shiki-default:#D73A49",[79],{"type":23,"value":80},"import",{"type":18,"tag":70,"props":82,"children":84},{"style":83},"--shiki-default:#032F62",[85],{"type":23,"value":86}," '@dpc-sdp/ripple-ui-core/style'",{"type":18,"tag":70,"props":88,"children":90},{"style":89},"--shiki-default:#24292E",[91],{"type":23,"value":92},";\n",{"type":18,"tag":70,"props":94,"children":96},{"class":72,"line":95},2,[97,101,106],{"type":18,"tag":70,"props":98,"children":99},{"style":77},[100],{"type":23,"value":80},{"type":18,"tag":70,"props":102,"children":103},{"style":83},[104],{"type":23,"value":105}," '@dpc-sdp/ripple-ui-core/style/components'",{"type":18,"tag":70,"props":107,"children":108},{"style":89},[109],{"type":23,"value":92},{"type":18,"tag":19,"props":111,"children":112},{},[113,115,121],{"type":23,"value":114},"We recommend that you lock the version of ",{"type":18,"tag":48,"props":116,"children":118},{"className":117},[],[119],{"type":23,"value":120},"@dpc-sdp/ripple-ui-core",{"type":23,"value":122}," so that any future changes of styles without changes to markup do not break your application.",{"type":18,"tag":124,"props":125,"children":126},"style",{},[127],{"type":23,"value":128},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":10,"searchDepth":95,"depth":95,"links":130},[],"markdown","content:design-system:3.develop:4.usage:5.css-only.md","content","design-system/3.develop/4.usage/5.css-only.md","md",["ShallowRef",137],["ShallowReactive",138],{"/design-system/develop/usage/css-only":139},[140,146],{"_path":141,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":142,"description":143,"layout":13,"_type":131,"_id":144,"_source":133,"_file":145,"_extension":135},"/design-system/develop/usage/webcomponents","Web components","How to use the web component exports with other front-end systems.","content:design-system:3.develop:4.usage:4.webcomponents.md","design-system/3.develop/4.usage/4.webcomponents.md",{"_path":147,"_dir":148,"_draft":9,"_partial":9,"_locale":10,"title":149,"description":150,"layout":13,"label":151,"_type":131,"_id":152,"_source":133,"_file":153,"_extension":135},"/design-system/styles/colour","styles","Colour","Colour plays an important role in creating a consistent and strong visual digital products and services.","Core","content:design-system:4.styles:colour.md","design-system/4.styles/colour.md",["ShallowRef",155],{},[157,162,404],{"title":158,"_path":159,"icon":160,"layout":161},"Ripple Design System","/","carbon:home","home",{"title":163,"_path":164,"children":165},"Design System","/design-system",[166,182,198,224,256],{"title":167,"_path":168,"children":169},"About","/design-system/about",[170,173,176,179],{"title":171,"_path":172,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":174,"_path":175,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":177,"_path":178,"layout":13},"Support","/design-system/about/getting-support",{"title":180,"_path":181,"layout":13},"Contributing","/design-system/about/contributing",{"title":183,"_path":184,"children":185},"Design","/design-system/design",[186,189,192,195],{"title":187,"_path":188,"layout":13},"Getting started","/design-system/design/getting-started",{"title":190,"_path":191,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":193,"_path":194,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":196,"_path":197,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":199,"_path":200,"children":201},"Develop","/design-system/develop",[202,204,206,209],{"title":187,"_path":203,"layout":13},"/design-system/develop/getting-started",{"title":180,"_path":205,"layout":13},"/design-system/develop/contributing",{"title":207,"_path":208,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":210,"_path":211,"children":212,"layout":13},"Usage","/design-system/develop/usage",[213,216,219,222,223],{"title":214,"_path":215,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":217,"_path":218,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":220,"_path":221,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":142,"_path":141,"layout":13},{"title":11,"_path":7,"layout":13},{"title":225,"_path":226,"children":227},"Styles","/design-system/styles",[228,229,232,235,238,241,244,247,250,253],{"title":149,"_path":147,"layout":13},{"title":230,"_path":231,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":233,"_path":234,"layout":13},"Grid","/design-system/styles/grid",{"title":236,"_path":237,"layout":13},"Icons","/design-system/styles/icons",{"title":239,"_path":240,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":242,"_path":243,"layout":13},"Layout","/design-system/styles/layout",{"title":245,"_path":246,"layout":13},"Logo","/design-system/styles/logo",{"title":248,"_path":249,"layout":13},"Motion","/design-system/styles/motion",{"title":251,"_path":252,"layout":13},"Spacing","/design-system/styles/spacing",{"title":254,"_path":255,"layout":13},"Typography","/design-system/styles/typography",{"title":257,"_path":258,"children":259},"Components","/design-system/components",[260,263,266,269,272,275,278,281,284,287,290,293,296,299,302,305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401],{"title":261,"_path":262,"layout":13},"Accordion","/design-system/components/accordion",{"title":264,"_path":265,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":267,"_path":268,"layout":13},"Alert","/design-system/components/alert",{"title":270,"_path":271,"layout":13},"Block quote","/design-system/components/block-quote",{"title":273,"_path":274,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":276,"_path":277,"layout":13},"Button","/design-system/components/button",{"title":279,"_path":280,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":282,"_path":283,"layout":13},"Callout","/design-system/components/callout",{"title":285,"_path":286,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":288,"_path":289,"layout":13},"Card","/design-system/components/card",{"title":291,"_path":292,"layout":13},"Carousel","/design-system/components/carousel",{"title":294,"_path":295,"layout":13},"Category grid","/design-system/components/category-grid",{"title":297,"_path":298,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":300,"_path":301,"layout":13},"Chip","/design-system/components/chip",{"title":303,"_path":304,"layout":13},"Contact us","/design-system/components/contact-us",{"title":306,"_path":307,"layout":13},"Date input","/design-system/components/date-input",{"title":309,"_path":310,"layout":13},"Detail list","/design-system/components/detail-list",{"title":312,"_path":313,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":315,"_path":316,"layout":13},"File","/design-system/components/file",{"title":318,"_path":319,"layout":13},"Footer","/design-system/components/footer",{"title":321,"_path":322,"layout":13},"Form","/design-system/components/form",{"title":324,"_path":325,"layout":13},"Form alert","/design-system/components/form-alert",{"title":327,"_path":328,"layout":13},"Header","/design-system/components/header",{"title":330,"_path":331,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":333,"_path":334,"layout":13},"Input field","/design-system/components/input-field",{"title":336,"_path":337,"layout":13},"Key dates","/design-system/components/key-dates",{"title":339,"_path":340,"layout":13},"Media","/design-system/components/media",{"title":342,"_path":343,"layout":13},"Media embed","/design-system/components/media-embed",{"title":345,"_path":346,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":348,"_path":349,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":351,"_path":352,"layout":13},"Option button","/design-system/components/option-button",{"title":354,"_path":355,"layout":13},"Page action","/design-system/components/page-action",{"title":357,"_path":358,"layout":13},"Pagination","/design-system/components/pagination",{"title":360,"_path":361,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":363,"_path":364,"layout":13},"Profile","/design-system/components/profile",{"title":366,"_path":367,"layout":13},"Radio button","/design-system/components/radio-button",{"title":369,"_path":370,"layout":13},"Related links","/design-system/components/related-links",{"title":372,"_path":373,"layout":13},"Results listing","/design-system/components/results-listing",{"title":375,"_path":376,"layout":13},"Search bar","/design-system/components/search-bar",{"title":378,"_path":379,"layout":13},"Skip link","/design-system/components/skip-link",{"title":381,"_path":382,"layout":13},"Social share","/design-system/components/social-share",{"title":384,"_path":385,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":387,"_path":388,"layout":13},"Table","/design-system/components/table",{"title":390,"_path":391,"layout":13},"Tabs","/design-system/components/tabs",{"title":393,"_path":394,"layout":13},"Tag","/design-system/components/tag",{"title":396,"_path":397,"layout":13},"Text area","/design-system/components/text-area",{"title":399,"_path":400,"layout":13},"Timeline","/design-system/components/timeline",{"title":402,"_path":403,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":405,"_path":406,"children":407,"layout":13},"Ripple Framework","/framework",[408,409,427,449],{"title":405,"_path":406,"layout":13},{"title":410,"_path":411,"children":412},"Key Concepts","/framework/key-concepts",[413,415,418,421,424],{"title":220,"_path":414,"layout":13},"/framework/key-concepts/nuxt",{"title":416,"_path":417,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":419,"_path":420,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":422,"_path":423,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":425,"_path":426,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":428,"_path":429,"children":430},"Guides","/framework/guides",[431,434,437,440,443,446],{"title":432,"_path":433,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":435,"_path":436,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":438,"_path":439,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":441,"_path":442,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":444,"_path":445,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":447,"_path":448,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":450,"_path":451,"layout":13},"Core modules","/framework/core-modules",["Reactive",453],["Set"],["Reactive",455],{"module-navigation":456},null,true,1714695650163]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/develop/usage/index.html b/design-system/develop/usage/index.html
index 52c30e4e3e..659bb72fc9 100644
--- a/design-system/develop/usage/index.html
+++ b/design-system/develop/usage/index.html
@@ -25,66 +25,66 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseImg.wgVpK8mn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTable.Nr-94ppo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseThead.x0xD32yi.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTr.NjbdsN4h.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTh.15m2hyNr.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTbody.pO4HZmMb.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTd.KWvY0UVz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.lp_k9Hpd.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.F9NVvvm4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseImg.Wu9xgcX7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTable.d8cdIzif.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseThead.alimbSyj.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTr.rCUlpnCA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTh.GnFrmIgb.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTbody.FPzd5AuU.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTd.ydAecYY-.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.Czpq-HHw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.GmB4B_NE.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -123,8 +123,8 @@
 
 
 
-<div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Library<!--]--></th><th><!--[-->CSS styles<!--]--></th><th><!--[-->Vue Components<!--]--></th><th><!--[-->Ripple Framework (Nuxt)<!--]--></th><th><!--[-->Web components<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->Ripple UI Core<!--]--></td><td><!--[--><svg width="12" height="12"><title>supported</title><use xlink:href="#icon-check"></use></svg><!--]--></td><td><!--[--><svg width="12" height="12"><title>supported</title><use xlink:href="#icon-check"></use></svg><!--]--></td><td><!--[--><svg width="12" height="12"><title>supported</title><use xlink:href="#icon-check"></use></svg><!--]--></td><td><!--[-->Partial support<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->Ripple UI Forms<!--]--></td><td><!--[--><svg width="12" height="12"><title>supported</title><use xlink:href="#icon-check"></use></svg><!--]--></td><td><!--[--><svg width="12" height="12"><title>supported</title><use xlink:href="#icon-check"></use></svg><!--]--></td><td><!--[--><svg width="12" height="12"><title>supported</title><use xlink:href="#icon-check"></use></svg><!--]--></td><td><!--[--><svg width="12" height="12"><title>not supported</title><use xlink:href="#icon-cancel"></use></svg><!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><h2 class="rpl-type-h3 docs-h3" id="using-in-an-sdp-website" data-v-ea525968><a href="#using-in-an-sdp-website" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Using in an SDP website<!--]--></a></h2><blockquote class="rpl-callout"><!--[--><p><!--[-->If you are using Ripple 2 to build a site on the SDP platform, the UI libraries will be included automatically when scaffolding your project.<!--]--></p><p><!--[-->For documentation on using Ripple with Nuxt in SDP sites, visit the <a href="/framework" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Ripple Framework documentation<!--]--><!--]--><!----><!--]--></a><!--]--></p><!--]--></blockquote><h2 class="rpl-type-h3 docs-h3" id="github-packages" data-v-ea525968><a href="#github-packages" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Github Packages<!--]--></a></h2><p><!--[-->Ripple 2 is hosted publicly on Github Packages (ghcr) under the <strong><!--[-->@dpc/sdp<!--]--></strong> namespace, please read these <a href="/design-system/develop/usage/access-to-github-packages" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->setup instructions for accessing Github Packages<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/3.usage.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/usage/_payload.json">[{"state":1,"once":624,"_errors":626,"serverRendered":629,"path":7,"prerenderedAt":630},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":312,"$sdd-globals":328,"$sdd-navigation":330},["ShallowRef",4],["ShallowReactive",5],{"/design-system/develop/usage":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"links":14,"body":21,"_type":307,"_id":308,"_source":309,"_file":310,"_extension":311},"/design-system/develop/usage","develop",false,"","Usage","Ripple components can be used in several different ways depending on your project needs.","page",[15,18],{"text":16,"url":17},"Github","https://github.com/dpc-sdp/ripple-framework",{"text":19,"url":20},"Storybook","/storybook",{"type":22,"children":23,"toc":299},"root",[24,33,39,48,53,80,82,244,251,272,278],{"type":25,"tag":26,"props":27,"children":29},"element","h2",{"id":28},"using-ripple-ui-components",[30],{"type":31,"value":32},"text","Using Ripple UI components",{"type":25,"tag":34,"props":35,"children":36},"p",{},[37],{"type":31,"value":38},"Whilst Ripple is built to implement sites using a framework built on Vue JS and Nuxt, its modular architecture allows adopting different parts depending on your requirements.",{"type":25,"tag":34,"props":40,"children":41},{},[42],{"type":25,"tag":43,"props":44,"children":47},"img",{"alt":45,"src":46},"ripple is made up of Figma design, CSS styles, Vue JS components and Nuxt JS Sites","/assets/img/modules/rpl-modules.png",[],{"type":25,"tag":34,"props":49,"children":50},{},[51],{"type":31,"value":52},"Ripple UI libraries are usable in the following contexts:",{"type":25,"tag":34,"props":54,"children":55},{},[56],{"type":25,"tag":57,"props":58,"children":63},"svg",{"id":59,"ariaHidden":60,"className":61},"docs-sprite","true",[62],"rpl-svg-sprite--hidden",[64],{"type":25,"tag":65,"props":66,"children":67},"defs",{},[68],{"type":25,"tag":69,"props":70,"children":74},"symbol",{"xmlns":71,"id":72,"viewBox":73},"http://www.w3.org/2000/svg","icon-check","0 0 24 24",[75],{"type":25,"tag":76,"props":77,"children":79},"path",{"d":78},"M22.9.4c-1.1-.7-2.6-.4-3.3.8L9.2 17.8l-5.1-5.1c-.9-.9-2.5-.9-3.4 0s-.9 2.5 0 3.4l7.2 7.2c1.1 1.1 2.9.9 3.7-.4l12-19.2c.7-1.2.4-2.6-.7-3.3z",[],{"type":31,"value":81},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":25,"tag":83,"props":84,"children":85},"table",{},[86,120],{"type":25,"tag":87,"props":88,"children":89},"thead",{},[90],{"type":25,"tag":91,"props":92,"children":93},"tr",{},[94,100,105,110,115],{"type":25,"tag":95,"props":96,"children":97},"th",{},[98],{"type":31,"value":99},"Library",{"type":25,"tag":95,"props":101,"children":102},{},[103],{"type":31,"value":104},"CSS styles",{"type":25,"tag":95,"props":106,"children":107},{},[108],{"type":31,"value":109},"Vue Components",{"type":25,"tag":95,"props":111,"children":112},{},[113],{"type":31,"value":114},"Ripple Framework (Nuxt)",{"type":25,"tag":95,"props":116,"children":117},{},[118],{"type":31,"value":119},"Web components",{"type":25,"tag":121,"props":122,"children":123},"tbody",{},[124,182],{"type":25,"tag":91,"props":125,"children":126},{},[127,133,151,164,177],{"type":25,"tag":128,"props":129,"children":130},"td",{},[131],{"type":31,"value":132},"Ripple UI Core",{"type":25,"tag":128,"props":134,"children":135},{},[136],{"type":25,"tag":57,"props":137,"children":139},{"width":138,"height":138},"12",[140,146],{"type":25,"tag":141,"props":142,"children":143},"title",{},[144],{"type":31,"value":145},"supported",{"type":25,"tag":147,"props":148,"children":150},"use",{"xLinkHref":149},"#icon-check",[],{"type":25,"tag":128,"props":152,"children":153},{},[154],{"type":25,"tag":57,"props":155,"children":156},{"width":138,"height":138},[157,161],{"type":25,"tag":141,"props":158,"children":159},{},[160],{"type":31,"value":145},{"type":25,"tag":147,"props":162,"children":163},{"xLinkHref":149},[],{"type":25,"tag":128,"props":165,"children":166},{},[167],{"type":25,"tag":57,"props":168,"children":169},{"width":138,"height":138},[170,174],{"type":25,"tag":141,"props":171,"children":172},{},[173],{"type":31,"value":145},{"type":25,"tag":147,"props":175,"children":176},{"xLinkHref":149},[],{"type":25,"tag":128,"props":178,"children":179},{},[180],{"type":31,"value":181},"Partial support",{"type":25,"tag":91,"props":183,"children":184},{},[185,190,203,216,229],{"type":25,"tag":128,"props":186,"children":187},{},[188],{"type":31,"value":189},"Ripple UI Forms",{"type":25,"tag":128,"props":191,"children":192},{},[193],{"type":25,"tag":57,"props":194,"children":195},{"width":138,"height":138},[196,200],{"type":25,"tag":141,"props":197,"children":198},{},[199],{"type":31,"value":145},{"type":25,"tag":147,"props":201,"children":202},{"xLinkHref":149},[],{"type":25,"tag":128,"props":204,"children":205},{},[206],{"type":25,"tag":57,"props":207,"children":208},{"width":138,"height":138},[209,213],{"type":25,"tag":141,"props":210,"children":211},{},[212],{"type":31,"value":145},{"type":25,"tag":147,"props":214,"children":215},{"xLinkHref":149},[],{"type":25,"tag":128,"props":217,"children":218},{},[219],{"type":25,"tag":57,"props":220,"children":221},{"width":138,"height":138},[222,226],{"type":25,"tag":141,"props":223,"children":224},{},[225],{"type":31,"value":145},{"type":25,"tag":147,"props":227,"children":228},{"xLinkHref":149},[],{"type":25,"tag":128,"props":230,"children":231},{},[232],{"type":25,"tag":57,"props":233,"children":234},{"width":138,"height":138},[235,240],{"type":25,"tag":141,"props":236,"children":237},{},[238],{"type":31,"value":239},"not supported",{"type":25,"tag":147,"props":241,"children":243},{"xLinkHref":242},"#icon-cancel",[],{"type":25,"tag":245,"props":246,"children":248},"h3",{"id":247},"using-in-an-sdp-website",[249],{"type":31,"value":250},"Using in an SDP website",{"type":25,"tag":252,"props":253,"children":254},"blockquote",{},[255,260],{"type":25,"tag":34,"props":256,"children":257},{},[258],{"type":31,"value":259},"If you are using Ripple 2 to build a site on the SDP platform, the UI libraries will be included automatically when scaffolding your project.",{"type":25,"tag":34,"props":261,"children":262},{},[263,265],{"type":31,"value":264},"For documentation on using Ripple with Nuxt in SDP sites, visit the ",{"type":25,"tag":266,"props":267,"children":269},"a",{"href":268},"/framework",[270],{"type":31,"value":271},"Ripple Framework documentation",{"type":25,"tag":245,"props":273,"children":275},{"id":274},"github-packages",[276],{"type":31,"value":277},"Github Packages",{"type":25,"tag":34,"props":279,"children":280},{},[281,283,289,291,297],{"type":31,"value":282},"Ripple 2 is hosted publicly on Github Packages (ghcr) under the ",{"type":25,"tag":284,"props":285,"children":286},"strong",{},[287],{"type":31,"value":288},"@dpc/sdp",{"type":31,"value":290}," namespace, please read these ",{"type":25,"tag":266,"props":292,"children":294},{"href":293},"/design-system/develop/usage/access-to-github-packages",[295],{"type":31,"value":296},"setup instructions for accessing Github Packages",{"type":31,"value":298},".",{"title":10,"searchDepth":300,"depth":300,"links":301},2,[302],{"id":28,"depth":300,"text":32,"children":303},[304,306],{"id":247,"depth":305,"text":250},3,{"id":274,"depth":305,"text":277},"markdown","content:design-system:3.develop:3.usage.md","content","design-system/3.develop/3.usage.md","md",["ShallowRef",313],["ShallowReactive",314],{"/design-system/develop/usage":315},[316,322],{"_path":317,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":318,"description":319,"layout":13,"_type":307,"_id":320,"_source":309,"_file":321,"_extension":311},"/design-system/develop/theming","Theme and brand application","Information for developers using Ripple 2 UI libraries","content:design-system:3.develop:2.theming.md","design-system/3.develop/2.theming.md",{"_path":293,"_dir":323,"_draft":9,"_partial":9,"_locale":10,"title":324,"description":325,"layout":13,"_type":307,"_id":326,"_source":309,"_file":327,"_extension":311},"usage","Access to Github Packages","How to access and use repos hosted on Github Packages.","content:design-system:3.develop:4.usage:1.access-to-github-packages.md","design-system/3.develop/4.usage/1.access-to-github-packages.md",["ShallowRef",329],{},[331,336,577],{"title":332,"_path":333,"icon":334,"layout":335},"Ripple Design System","/","carbon:home","home",{"title":337,"_path":338,"children":339},"Design System","/design-system",[340,356,372,395,429],{"title":341,"_path":342,"children":343},"About","/design-system/about",[344,347,350,353],{"title":345,"_path":346,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":348,"_path":349,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":351,"_path":352,"layout":13},"Support","/design-system/about/getting-support",{"title":354,"_path":355,"layout":13},"Contributing","/design-system/about/contributing",{"title":357,"_path":358,"children":359},"Design","/design-system/design",[360,363,366,369],{"title":361,"_path":362,"layout":13},"Getting started","/design-system/design/getting-started",{"title":364,"_path":365,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":367,"_path":368,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":370,"_path":371,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":373,"_path":374,"children":375},"Develop","/design-system/develop",[376,378,380,381],{"title":361,"_path":377,"layout":13},"/design-system/develop/getting-started",{"title":354,"_path":379,"layout":13},"/design-system/develop/contributing",{"title":318,"_path":317,"layout":13},{"title":11,"_path":7,"children":382,"layout":13},[383,384,387,390,392],{"title":324,"_path":293,"layout":13},{"title":385,"_path":386,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":388,"_path":389,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":119,"_path":391,"layout":13},"/design-system/develop/usage/webcomponents",{"title":393,"_path":394,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":396,"_path":397,"children":398},"Styles","/design-system/styles",[399,402,405,408,411,414,417,420,423,426],{"title":400,"_path":401,"layout":13},"Colour","/design-system/styles/colour",{"title":403,"_path":404,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":406,"_path":407,"layout":13},"Grid","/design-system/styles/grid",{"title":409,"_path":410,"layout":13},"Icons","/design-system/styles/icons",{"title":412,"_path":413,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":415,"_path":416,"layout":13},"Layout","/design-system/styles/layout",{"title":418,"_path":419,"layout":13},"Logo","/design-system/styles/logo",{"title":421,"_path":422,"layout":13},"Motion","/design-system/styles/motion",{"title":424,"_path":425,"layout":13},"Spacing","/design-system/styles/spacing",{"title":427,"_path":428,"layout":13},"Typography","/design-system/styles/typography",{"title":430,"_path":431,"children":432},"Components","/design-system/components",[433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,490,493,496,499,502,505,508,511,514,517,520,523,526,529,532,535,538,541,544,547,550,553,556,559,562,565,568,571,574],{"title":434,"_path":435,"layout":13},"Accordion","/design-system/components/accordion",{"title":437,"_path":438,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":440,"_path":441,"layout":13},"Alert","/design-system/components/alert",{"title":443,"_path":444,"layout":13},"Block quote","/design-system/components/block-quote",{"title":446,"_path":447,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":449,"_path":450,"layout":13},"Button","/design-system/components/button",{"title":452,"_path":453,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":455,"_path":456,"layout":13},"Callout","/design-system/components/callout",{"title":458,"_path":459,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":461,"_path":462,"layout":13},"Card","/design-system/components/card",{"title":464,"_path":465,"layout":13},"Carousel","/design-system/components/carousel",{"title":467,"_path":468,"layout":13},"Category grid","/design-system/components/category-grid",{"title":470,"_path":471,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":473,"_path":474,"layout":13},"Chip","/design-system/components/chip",{"title":476,"_path":477,"layout":13},"Contact us","/design-system/components/contact-us",{"title":479,"_path":480,"layout":13},"Date input","/design-system/components/date-input",{"title":482,"_path":483,"layout":13},"Detail list","/design-system/components/detail-list",{"title":485,"_path":486,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":488,"_path":489,"layout":13},"File","/design-system/components/file",{"title":491,"_path":492,"layout":13},"Footer","/design-system/components/footer",{"title":494,"_path":495,"layout":13},"Form","/design-system/components/form",{"title":497,"_path":498,"layout":13},"Form alert","/design-system/components/form-alert",{"title":500,"_path":501,"layout":13},"Header","/design-system/components/header",{"title":503,"_path":504,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":506,"_path":507,"layout":13},"Input field","/design-system/components/input-field",{"title":509,"_path":510,"layout":13},"Key dates","/design-system/components/key-dates",{"title":512,"_path":513,"layout":13},"Media","/design-system/components/media",{"title":515,"_path":516,"layout":13},"Media embed","/design-system/components/media-embed",{"title":518,"_path":519,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":521,"_path":522,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":524,"_path":525,"layout":13},"Option button","/design-system/components/option-button",{"title":527,"_path":528,"layout":13},"Page action","/design-system/components/page-action",{"title":530,"_path":531,"layout":13},"Pagination","/design-system/components/pagination",{"title":533,"_path":534,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":536,"_path":537,"layout":13},"Profile","/design-system/components/profile",{"title":539,"_path":540,"layout":13},"Radio button","/design-system/components/radio-button",{"title":542,"_path":543,"layout":13},"Related links","/design-system/components/related-links",{"title":545,"_path":546,"layout":13},"Results listing","/design-system/components/results-listing",{"title":548,"_path":549,"layout":13},"Search bar","/design-system/components/search-bar",{"title":551,"_path":552,"layout":13},"Skip link","/design-system/components/skip-link",{"title":554,"_path":555,"layout":13},"Social share","/design-system/components/social-share",{"title":557,"_path":558,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":560,"_path":561,"layout":13},"Table","/design-system/components/table",{"title":563,"_path":564,"layout":13},"Tabs","/design-system/components/tabs",{"title":566,"_path":567,"layout":13},"Tag","/design-system/components/tag",{"title":569,"_path":570,"layout":13},"Text area","/design-system/components/text-area",{"title":572,"_path":573,"layout":13},"Timeline","/design-system/components/timeline",{"title":575,"_path":576,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":578,"_path":268,"children":579,"layout":13},"Ripple Framework",[580,581,599,621],{"title":578,"_path":268,"layout":13},{"title":582,"_path":583,"children":584},"Key Concepts","/framework/key-concepts",[585,587,590,593,596],{"title":388,"_path":586,"layout":13},"/framework/key-concepts/nuxt",{"title":588,"_path":589,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":591,"_path":592,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":594,"_path":595,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":597,"_path":598,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":600,"_path":601,"children":602},"Guides","/framework/guides",[603,606,609,612,615,618],{"title":604,"_path":605,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":607,"_path":608,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":610,"_path":611,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":613,"_path":614,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":616,"_path":617,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":619,"_path":620,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":622,"_path":623,"layout":13},"Core modules","/framework/core-modules",["Reactive",625],["Set"],["Reactive",627],{"module-navigation":628},null,true,1714695151723]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+<div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Library<!--]--></th><th><!--[-->CSS styles<!--]--></th><th><!--[-->Vue Components<!--]--></th><th><!--[-->Ripple Framework (Nuxt)<!--]--></th><th><!--[-->Web components<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->Ripple UI Core<!--]--></td><td><!--[--><svg width="12" height="12"><title>supported</title><use xlink:href="#icon-check"></use></svg><!--]--></td><td><!--[--><svg width="12" height="12"><title>supported</title><use xlink:href="#icon-check"></use></svg><!--]--></td><td><!--[--><svg width="12" height="12"><title>supported</title><use xlink:href="#icon-check"></use></svg><!--]--></td><td><!--[-->Partial support<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->Ripple UI Forms<!--]--></td><td><!--[--><svg width="12" height="12"><title>supported</title><use xlink:href="#icon-check"></use></svg><!--]--></td><td><!--[--><svg width="12" height="12"><title>supported</title><use xlink:href="#icon-check"></use></svg><!--]--></td><td><!--[--><svg width="12" height="12"><title>supported</title><use xlink:href="#icon-check"></use></svg><!--]--></td><td><!--[--><svg width="12" height="12"><title>not supported</title><use xlink:href="#icon-cancel"></use></svg><!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><h2 class="rpl-type-h3 docs-h3" id="using-in-an-sdp-website" data-v-ea525968><a href="#using-in-an-sdp-website" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Using in an SDP website<!--]--></a></h2><blockquote class="rpl-callout"><!--[--><p><!--[-->If you are using Ripple 2 to build a site on the SDP platform, the UI libraries will be included automatically when scaffolding your project.<!--]--></p><p><!--[-->For documentation on using Ripple with Nuxt in SDP sites, visit the <a href="/framework" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Ripple Framework documentation<!--]--><!--]--><!----><!--]--></a><!--]--></p><!--]--></blockquote><h2 class="rpl-type-h3 docs-h3" id="github-packages" data-v-ea525968><a href="#github-packages" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Github Packages<!--]--></a></h2><p><!--[-->Ripple 2 is hosted publicly on Github Packages (ghcr) under the <strong><!--[-->@dpc/sdp<!--]--></strong> namespace, please read these <a href="/design-system/develop/usage/access-to-github-packages" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->setup instructions for accessing Github Packages<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/3.usage.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/usage/_payload.json">[{"state":1,"once":624,"_errors":626,"serverRendered":629,"path":7,"prerenderedAt":630},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":312,"$sdd-globals":328,"$sdd-navigation":330},["ShallowRef",4],["ShallowReactive",5],{"/design-system/develop/usage":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"links":14,"body":21,"_type":307,"_id":308,"_source":309,"_file":310,"_extension":311},"/design-system/develop/usage","develop",false,"","Usage","Ripple components can be used in several different ways depending on your project needs.","page",[15,18],{"text":16,"url":17},"Github","https://github.com/dpc-sdp/ripple-framework",{"text":19,"url":20},"Storybook","/storybook",{"type":22,"children":23,"toc":299},"root",[24,33,39,48,53,80,82,244,251,272,278],{"type":25,"tag":26,"props":27,"children":29},"element","h2",{"id":28},"using-ripple-ui-components",[30],{"type":31,"value":32},"text","Using Ripple UI components",{"type":25,"tag":34,"props":35,"children":36},"p",{},[37],{"type":31,"value":38},"Whilst Ripple is built to implement sites using a framework built on Vue JS and Nuxt, its modular architecture allows adopting different parts depending on your requirements.",{"type":25,"tag":34,"props":40,"children":41},{},[42],{"type":25,"tag":43,"props":44,"children":47},"img",{"alt":45,"src":46},"ripple is made up of Figma design, CSS styles, Vue JS components and Nuxt JS Sites","/assets/img/modules/rpl-modules.png",[],{"type":25,"tag":34,"props":49,"children":50},{},[51],{"type":31,"value":52},"Ripple UI libraries are usable in the following contexts:",{"type":25,"tag":34,"props":54,"children":55},{},[56],{"type":25,"tag":57,"props":58,"children":63},"svg",{"id":59,"ariaHidden":60,"className":61},"docs-sprite","true",[62],"rpl-svg-sprite--hidden",[64],{"type":25,"tag":65,"props":66,"children":67},"defs",{},[68],{"type":25,"tag":69,"props":70,"children":74},"symbol",{"xmlns":71,"id":72,"viewBox":73},"http://www.w3.org/2000/svg","icon-check","0 0 24 24",[75],{"type":25,"tag":76,"props":77,"children":79},"path",{"d":78},"M22.9.4c-1.1-.7-2.6-.4-3.3.8L9.2 17.8l-5.1-5.1c-.9-.9-2.5-.9-3.4 0s-.9 2.5 0 3.4l7.2 7.2c1.1 1.1 2.9.9 3.7-.4l12-19.2c.7-1.2.4-2.6-.7-3.3z",[],{"type":31,"value":81},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":25,"tag":83,"props":84,"children":85},"table",{},[86,120],{"type":25,"tag":87,"props":88,"children":89},"thead",{},[90],{"type":25,"tag":91,"props":92,"children":93},"tr",{},[94,100,105,110,115],{"type":25,"tag":95,"props":96,"children":97},"th",{},[98],{"type":31,"value":99},"Library",{"type":25,"tag":95,"props":101,"children":102},{},[103],{"type":31,"value":104},"CSS styles",{"type":25,"tag":95,"props":106,"children":107},{},[108],{"type":31,"value":109},"Vue Components",{"type":25,"tag":95,"props":111,"children":112},{},[113],{"type":31,"value":114},"Ripple Framework (Nuxt)",{"type":25,"tag":95,"props":116,"children":117},{},[118],{"type":31,"value":119},"Web components",{"type":25,"tag":121,"props":122,"children":123},"tbody",{},[124,182],{"type":25,"tag":91,"props":125,"children":126},{},[127,133,151,164,177],{"type":25,"tag":128,"props":129,"children":130},"td",{},[131],{"type":31,"value":132},"Ripple UI Core",{"type":25,"tag":128,"props":134,"children":135},{},[136],{"type":25,"tag":57,"props":137,"children":139},{"width":138,"height":138},"12",[140,146],{"type":25,"tag":141,"props":142,"children":143},"title",{},[144],{"type":31,"value":145},"supported",{"type":25,"tag":147,"props":148,"children":150},"use",{"xLinkHref":149},"#icon-check",[],{"type":25,"tag":128,"props":152,"children":153},{},[154],{"type":25,"tag":57,"props":155,"children":156},{"width":138,"height":138},[157,161],{"type":25,"tag":141,"props":158,"children":159},{},[160],{"type":31,"value":145},{"type":25,"tag":147,"props":162,"children":163},{"xLinkHref":149},[],{"type":25,"tag":128,"props":165,"children":166},{},[167],{"type":25,"tag":57,"props":168,"children":169},{"width":138,"height":138},[170,174],{"type":25,"tag":141,"props":171,"children":172},{},[173],{"type":31,"value":145},{"type":25,"tag":147,"props":175,"children":176},{"xLinkHref":149},[],{"type":25,"tag":128,"props":178,"children":179},{},[180],{"type":31,"value":181},"Partial support",{"type":25,"tag":91,"props":183,"children":184},{},[185,190,203,216,229],{"type":25,"tag":128,"props":186,"children":187},{},[188],{"type":31,"value":189},"Ripple UI Forms",{"type":25,"tag":128,"props":191,"children":192},{},[193],{"type":25,"tag":57,"props":194,"children":195},{"width":138,"height":138},[196,200],{"type":25,"tag":141,"props":197,"children":198},{},[199],{"type":31,"value":145},{"type":25,"tag":147,"props":201,"children":202},{"xLinkHref":149},[],{"type":25,"tag":128,"props":204,"children":205},{},[206],{"type":25,"tag":57,"props":207,"children":208},{"width":138,"height":138},[209,213],{"type":25,"tag":141,"props":210,"children":211},{},[212],{"type":31,"value":145},{"type":25,"tag":147,"props":214,"children":215},{"xLinkHref":149},[],{"type":25,"tag":128,"props":217,"children":218},{},[219],{"type":25,"tag":57,"props":220,"children":221},{"width":138,"height":138},[222,226],{"type":25,"tag":141,"props":223,"children":224},{},[225],{"type":31,"value":145},{"type":25,"tag":147,"props":227,"children":228},{"xLinkHref":149},[],{"type":25,"tag":128,"props":230,"children":231},{},[232],{"type":25,"tag":57,"props":233,"children":234},{"width":138,"height":138},[235,240],{"type":25,"tag":141,"props":236,"children":237},{},[238],{"type":31,"value":239},"not supported",{"type":25,"tag":147,"props":241,"children":243},{"xLinkHref":242},"#icon-cancel",[],{"type":25,"tag":245,"props":246,"children":248},"h3",{"id":247},"using-in-an-sdp-website",[249],{"type":31,"value":250},"Using in an SDP website",{"type":25,"tag":252,"props":253,"children":254},"blockquote",{},[255,260],{"type":25,"tag":34,"props":256,"children":257},{},[258],{"type":31,"value":259},"If you are using Ripple 2 to build a site on the SDP platform, the UI libraries will be included automatically when scaffolding your project.",{"type":25,"tag":34,"props":261,"children":262},{},[263,265],{"type":31,"value":264},"For documentation on using Ripple with Nuxt in SDP sites, visit the ",{"type":25,"tag":266,"props":267,"children":269},"a",{"href":268},"/framework",[270],{"type":31,"value":271},"Ripple Framework documentation",{"type":25,"tag":245,"props":273,"children":275},{"id":274},"github-packages",[276],{"type":31,"value":277},"Github Packages",{"type":25,"tag":34,"props":279,"children":280},{},[281,283,289,291,297],{"type":31,"value":282},"Ripple 2 is hosted publicly on Github Packages (ghcr) under the ",{"type":25,"tag":284,"props":285,"children":286},"strong",{},[287],{"type":31,"value":288},"@dpc/sdp",{"type":31,"value":290}," namespace, please read these ",{"type":25,"tag":266,"props":292,"children":294},{"href":293},"/design-system/develop/usage/access-to-github-packages",[295],{"type":31,"value":296},"setup instructions for accessing Github Packages",{"type":31,"value":298},".",{"title":10,"searchDepth":300,"depth":300,"links":301},2,[302],{"id":28,"depth":300,"text":32,"children":303},[304,306],{"id":247,"depth":305,"text":250},3,{"id":274,"depth":305,"text":277},"markdown","content:design-system:3.develop:3.usage.md","content","design-system/3.develop/3.usage.md","md",["ShallowRef",313],["ShallowReactive",314],{"/design-system/develop/usage":315},[316,322],{"_path":317,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":318,"description":319,"layout":13,"_type":307,"_id":320,"_source":309,"_file":321,"_extension":311},"/design-system/develop/theming","Theme and brand application","Information for developers using Ripple 2 UI libraries","content:design-system:3.develop:2.theming.md","design-system/3.develop/2.theming.md",{"_path":293,"_dir":323,"_draft":9,"_partial":9,"_locale":10,"title":324,"description":325,"layout":13,"_type":307,"_id":326,"_source":309,"_file":327,"_extension":311},"usage","Access to Github Packages","How to access and use repos hosted on Github Packages.","content:design-system:3.develop:4.usage:1.access-to-github-packages.md","design-system/3.develop/4.usage/1.access-to-github-packages.md",["ShallowRef",329],{},[331,336,577],{"title":332,"_path":333,"icon":334,"layout":335},"Ripple Design System","/","carbon:home","home",{"title":337,"_path":338,"children":339},"Design System","/design-system",[340,356,372,395,429],{"title":341,"_path":342,"children":343},"About","/design-system/about",[344,347,350,353],{"title":345,"_path":346,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":348,"_path":349,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":351,"_path":352,"layout":13},"Support","/design-system/about/getting-support",{"title":354,"_path":355,"layout":13},"Contributing","/design-system/about/contributing",{"title":357,"_path":358,"children":359},"Design","/design-system/design",[360,363,366,369],{"title":361,"_path":362,"layout":13},"Getting started","/design-system/design/getting-started",{"title":364,"_path":365,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":367,"_path":368,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":370,"_path":371,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":373,"_path":374,"children":375},"Develop","/design-system/develop",[376,378,380,381],{"title":361,"_path":377,"layout":13},"/design-system/develop/getting-started",{"title":354,"_path":379,"layout":13},"/design-system/develop/contributing",{"title":318,"_path":317,"layout":13},{"title":11,"_path":7,"children":382,"layout":13},[383,384,387,390,392],{"title":324,"_path":293,"layout":13},{"title":385,"_path":386,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":388,"_path":389,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":119,"_path":391,"layout":13},"/design-system/develop/usage/webcomponents",{"title":393,"_path":394,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":396,"_path":397,"children":398},"Styles","/design-system/styles",[399,402,405,408,411,414,417,420,423,426],{"title":400,"_path":401,"layout":13},"Colour","/design-system/styles/colour",{"title":403,"_path":404,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":406,"_path":407,"layout":13},"Grid","/design-system/styles/grid",{"title":409,"_path":410,"layout":13},"Icons","/design-system/styles/icons",{"title":412,"_path":413,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":415,"_path":416,"layout":13},"Layout","/design-system/styles/layout",{"title":418,"_path":419,"layout":13},"Logo","/design-system/styles/logo",{"title":421,"_path":422,"layout":13},"Motion","/design-system/styles/motion",{"title":424,"_path":425,"layout":13},"Spacing","/design-system/styles/spacing",{"title":427,"_path":428,"layout":13},"Typography","/design-system/styles/typography",{"title":430,"_path":431,"children":432},"Components","/design-system/components",[433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,490,493,496,499,502,505,508,511,514,517,520,523,526,529,532,535,538,541,544,547,550,553,556,559,562,565,568,571,574],{"title":434,"_path":435,"layout":13},"Accordion","/design-system/components/accordion",{"title":437,"_path":438,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":440,"_path":441,"layout":13},"Alert","/design-system/components/alert",{"title":443,"_path":444,"layout":13},"Block quote","/design-system/components/block-quote",{"title":446,"_path":447,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":449,"_path":450,"layout":13},"Button","/design-system/components/button",{"title":452,"_path":453,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":455,"_path":456,"layout":13},"Callout","/design-system/components/callout",{"title":458,"_path":459,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":461,"_path":462,"layout":13},"Card","/design-system/components/card",{"title":464,"_path":465,"layout":13},"Carousel","/design-system/components/carousel",{"title":467,"_path":468,"layout":13},"Category grid","/design-system/components/category-grid",{"title":470,"_path":471,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":473,"_path":474,"layout":13},"Chip","/design-system/components/chip",{"title":476,"_path":477,"layout":13},"Contact us","/design-system/components/contact-us",{"title":479,"_path":480,"layout":13},"Date input","/design-system/components/date-input",{"title":482,"_path":483,"layout":13},"Detail list","/design-system/components/detail-list",{"title":485,"_path":486,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":488,"_path":489,"layout":13},"File","/design-system/components/file",{"title":491,"_path":492,"layout":13},"Footer","/design-system/components/footer",{"title":494,"_path":495,"layout":13},"Form","/design-system/components/form",{"title":497,"_path":498,"layout":13},"Form alert","/design-system/components/form-alert",{"title":500,"_path":501,"layout":13},"Header","/design-system/components/header",{"title":503,"_path":504,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":506,"_path":507,"layout":13},"Input field","/design-system/components/input-field",{"title":509,"_path":510,"layout":13},"Key dates","/design-system/components/key-dates",{"title":512,"_path":513,"layout":13},"Media","/design-system/components/media",{"title":515,"_path":516,"layout":13},"Media embed","/design-system/components/media-embed",{"title":518,"_path":519,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":521,"_path":522,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":524,"_path":525,"layout":13},"Option button","/design-system/components/option-button",{"title":527,"_path":528,"layout":13},"Page action","/design-system/components/page-action",{"title":530,"_path":531,"layout":13},"Pagination","/design-system/components/pagination",{"title":533,"_path":534,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":536,"_path":537,"layout":13},"Profile","/design-system/components/profile",{"title":539,"_path":540,"layout":13},"Radio button","/design-system/components/radio-button",{"title":542,"_path":543,"layout":13},"Related links","/design-system/components/related-links",{"title":545,"_path":546,"layout":13},"Results listing","/design-system/components/results-listing",{"title":548,"_path":549,"layout":13},"Search bar","/design-system/components/search-bar",{"title":551,"_path":552,"layout":13},"Skip link","/design-system/components/skip-link",{"title":554,"_path":555,"layout":13},"Social share","/design-system/components/social-share",{"title":557,"_path":558,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":560,"_path":561,"layout":13},"Table","/design-system/components/table",{"title":563,"_path":564,"layout":13},"Tabs","/design-system/components/tabs",{"title":566,"_path":567,"layout":13},"Tag","/design-system/components/tag",{"title":569,"_path":570,"layout":13},"Text area","/design-system/components/text-area",{"title":572,"_path":573,"layout":13},"Timeline","/design-system/components/timeline",{"title":575,"_path":576,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":578,"_path":268,"children":579,"layout":13},"Ripple Framework",[580,581,599,621],{"title":578,"_path":268,"layout":13},{"title":582,"_path":583,"children":584},"Key Concepts","/framework/key-concepts",[585,587,590,593,596],{"title":388,"_path":586,"layout":13},"/framework/key-concepts/nuxt",{"title":588,"_path":589,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":591,"_path":592,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":594,"_path":595,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":597,"_path":598,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":600,"_path":601,"children":602},"Guides","/framework/guides",[603,606,609,612,615,618],{"title":604,"_path":605,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":607,"_path":608,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":610,"_path":611,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":613,"_path":614,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":616,"_path":617,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":619,"_path":620,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":622,"_path":623,"layout":13},"Core modules","/framework/core-modules",["Reactive",625],["Set"],["Reactive",627],{"module-navigation":628},null,true,1714695649972]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/develop/usage/nuxt/_payload.json b/design-system/develop/usage/nuxt/_payload.json
index 68f9512473..7e711cc553 100644
--- a/design-system/develop/usage/nuxt/_payload.json
+++ b/design-system/develop/usage/nuxt/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":40,"items":41},"/design-system/develop","Develop",true,[42,44,46,49],{"id":43,"text":27,"url":43,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":7,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":40,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":40,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695151735]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":40,"items":41},"/design-system/develop","Develop",true,[42,44,46,49],{"id":43,"text":27,"url":43,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":7,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":40,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":40,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695649984]
\ No newline at end of file
diff --git a/design-system/develop/usage/nuxt/index.html b/design-system/develop/usage/nuxt/index.html
index 136ee442fc..0d61d56d03 100644
--- a/design-system/develop/usage/nuxt/index.html
+++ b/design-system/develop/usage/nuxt/index.html
@@ -24,58 +24,58 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.uDpSgjM7.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProsePre.1p0bzX0t.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCode.ggTmuEB2.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.iJ9KJvnk.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProsePre.928ctTB_.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCode.Xz7xMLuq.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -97,8 +97,8 @@
 </span></span></code><!--]--></pre><!--]--></div><p><!--[-->There is no need to import the components as they will be registered globally by the nuxt module<!--]--></p><div class="docs-code-block" meta data-v-efa4b2dc><!--[--><pre class="language-js shiki shiki-themes github-light" style=""><!--[--><code><span class="line" line="1"><span style="--shiki-default:#24292E">&lt;</span><span style="--shiki-default:#22863A">template</span><span style="--shiki-default:#24292E">&gt;
 </span></span><span class="line" line="2"><span style="--shiki-default:#24292E">  &lt;</span><span style="--shiki-default:#005CC5">RplButton</span><span style="--shiki-default:#6F42C1"> variant</span><span style="--shiki-default:#D73A49">=</span><span style="--shiki-default:#032F62">&quot;outlined&quot;</span><span style="--shiki-default:#24292E"> /&gt;
 </span></span><span class="line" line="3"><span style="--shiki-default:#24292E">&lt;/</span><span style="--shiki-default:#22863A">template</span><span style="--shiki-default:#24292E">&gt;
-</span></span></code><!--]--></pre><!--]--></div><p><!--[-->Even if you are not using SDP, the <a href="/framework" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Ripple Framework documentation<!--]--><!--]--><!----><!--]--></a> is a good starting point for any Nuxt development using Ripple.<!--]--></p><style>html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}</style><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/4.usage/3.nuxt.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/usage/nuxt/_payload.json">[{"state":1,"once":604,"_errors":606,"serverRendered":609,"path":7,"prerenderedAt":610},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":291,"$sdd-globals":307,"$sdd-navigation":309},["ShallowRef",4],["ShallowReactive",5],{"/design-system/develop/usage/nuxt":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":286,"_id":287,"_source":288,"_file":289,"_extension":290},"/design-system/develop/usage/nuxt","usage",false,"","Nuxt","How to use Ripple components with Nuxt in a non-SDP context.","page",{"type":15,"children":16,"toc":284},"root",[17,34,39,49,62,138,143,184,189,265,278],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22,25,32],{"type":23,"value":24},"text","First, set up ",{"type":18,"tag":26,"props":27,"children":29},"a",{"href":28},"access-to-github-packages",[30],{"type":23,"value":31},"access to Github Packages",{"type":23,"value":33},".",{"type":18,"tag":19,"props":35,"children":36},{},[37],{"type":23,"value":38},"Next, install Ripple UI in your project:",{"type":18,"tag":19,"props":40,"children":41},{},[42],{"type":18,"tag":43,"props":44,"children":46},"code",{"className":45},[],[47],{"type":23,"value":48},"npm install @dpc-sdp/ripple-ui-core --save",{"type":18,"tag":19,"props":50,"children":51},{},[52,54,60],{"type":23,"value":53},"Ripple UI exports a nuxt module that you can add to your nuxt config, note the addition of ",{"type":18,"tag":43,"props":55,"children":57},{"className":56},[],[58],{"type":23,"value":59},"/nuxt",{"type":23,"value":61},":",{"type":18,"tag":63,"props":64,"children":68},"pre",{"className":65,"code":66,"language":67,"meta":10,"style":10},"language-js shiki shiki-themes github-light","export default defineNuxtConfig({\n  modules: [\n    '@dpc-sdp/ripple-ui-core/nuxt'\n  ]\n})\n","js",[69],{"type":18,"tag":43,"props":70,"children":71},{"__ignoreMap":10},[72,101,110,120,129],{"type":18,"tag":73,"props":74,"children":77},"span",{"class":75,"line":76},"line",1,[78,84,89,95],{"type":18,"tag":73,"props":79,"children":81},{"style":80},"--shiki-default:#D73A49",[82],{"type":23,"value":83},"export",{"type":18,"tag":73,"props":85,"children":86},{"style":80},[87],{"type":23,"value":88}," default",{"type":18,"tag":73,"props":90,"children":92},{"style":91},"--shiki-default:#6F42C1",[93],{"type":23,"value":94}," defineNuxtConfig",{"type":18,"tag":73,"props":96,"children":98},{"style":97},"--shiki-default:#24292E",[99],{"type":23,"value":100},"({\n",{"type":18,"tag":73,"props":102,"children":104},{"class":75,"line":103},2,[105],{"type":18,"tag":73,"props":106,"children":107},{"style":97},[108],{"type":23,"value":109},"  modules: [\n",{"type":18,"tag":73,"props":111,"children":113},{"class":75,"line":112},3,[114],{"type":18,"tag":73,"props":115,"children":117},{"style":116},"--shiki-default:#032F62",[118],{"type":23,"value":119},"    '@dpc-sdp/ripple-ui-core/nuxt'\n",{"type":18,"tag":73,"props":121,"children":123},{"class":75,"line":122},4,[124],{"type":18,"tag":73,"props":125,"children":126},{"style":97},[127],{"type":23,"value":128},"  ]\n",{"type":18,"tag":73,"props":130,"children":132},{"class":75,"line":131},5,[133],{"type":18,"tag":73,"props":134,"children":135},{"style":97},[136],{"type":23,"value":137},"})\n",{"type":18,"tag":19,"props":139,"children":140},{},[141],{"type":23,"value":142},"In order for the styles to appear correctly, you will need to import them. Do this at the root of your project (usually in your app.vue file):",{"type":18,"tag":63,"props":144,"children":146},{"className":65,"code":145,"language":67,"meta":10,"style":10},"import '@dpc-sdp/ripple-ui-core/style';\nimport '@dpc-sdp/ripple-ui-core/style/components';\n",[147],{"type":18,"tag":43,"props":148,"children":149},{"__ignoreMap":10},[150,168],{"type":18,"tag":73,"props":151,"children":152},{"class":75,"line":76},[153,158,163],{"type":18,"tag":73,"props":154,"children":155},{"style":80},[156],{"type":23,"value":157},"import",{"type":18,"tag":73,"props":159,"children":160},{"style":116},[161],{"type":23,"value":162}," '@dpc-sdp/ripple-ui-core/style'",{"type":18,"tag":73,"props":164,"children":165},{"style":97},[166],{"type":23,"value":167},";\n",{"type":18,"tag":73,"props":169,"children":170},{"class":75,"line":103},[171,175,180],{"type":18,"tag":73,"props":172,"children":173},{"style":80},[174],{"type":23,"value":157},{"type":18,"tag":73,"props":176,"children":177},{"style":116},[178],{"type":23,"value":179}," '@dpc-sdp/ripple-ui-core/style/components'",{"type":18,"tag":73,"props":181,"children":182},{"style":97},[183],{"type":23,"value":167},{"type":18,"tag":19,"props":185,"children":186},{},[187],{"type":23,"value":188},"There is no need to import the components as they will be registered globally by the nuxt module",{"type":18,"tag":63,"props":190,"children":192},{"className":65,"code":191,"language":67,"meta":10,"style":10},"\u003Ctemplate>\n  \u003CRplButton variant=\"outlined\" />\n\u003C/template>\n",[193],{"type":18,"tag":43,"props":194,"children":195},{"__ignoreMap":10},[196,215,249],{"type":18,"tag":73,"props":197,"children":198},{"class":75,"line":76},[199,204,210],{"type":18,"tag":73,"props":200,"children":201},{"style":97},[202],{"type":23,"value":203},"\u003C",{"type":18,"tag":73,"props":205,"children":207},{"style":206},"--shiki-default:#22863A",[208],{"type":23,"value":209},"template",{"type":18,"tag":73,"props":211,"children":212},{"style":97},[213],{"type":23,"value":214},">\n",{"type":18,"tag":73,"props":216,"children":217},{"class":75,"line":103},[218,223,229,234,239,244],{"type":18,"tag":73,"props":219,"children":220},{"style":97},[221],{"type":23,"value":222},"  \u003C",{"type":18,"tag":73,"props":224,"children":226},{"style":225},"--shiki-default:#005CC5",[227],{"type":23,"value":228},"RplButton",{"type":18,"tag":73,"props":230,"children":231},{"style":91},[232],{"type":23,"value":233}," variant",{"type":18,"tag":73,"props":235,"children":236},{"style":80},[237],{"type":23,"value":238},"=",{"type":18,"tag":73,"props":240,"children":241},{"style":116},[242],{"type":23,"value":243},"\"outlined\"",{"type":18,"tag":73,"props":245,"children":246},{"style":97},[247],{"type":23,"value":248}," />\n",{"type":18,"tag":73,"props":250,"children":251},{"class":75,"line":112},[252,257,261],{"type":18,"tag":73,"props":253,"children":254},{"style":97},[255],{"type":23,"value":256},"\u003C/",{"type":18,"tag":73,"props":258,"children":259},{"style":206},[260],{"type":23,"value":209},{"type":18,"tag":73,"props":262,"children":263},{"style":97},[264],{"type":23,"value":214},{"type":18,"tag":19,"props":266,"children":267},{},[268,270,276],{"type":23,"value":269},"Even if you are not using SDP, the ",{"type":18,"tag":26,"props":271,"children":273},{"href":272},"/framework",[274],{"type":23,"value":275},"Ripple Framework documentation",{"type":23,"value":277}," is a good starting point for any Nuxt development using Ripple.",{"type":18,"tag":279,"props":280,"children":281},"style",{},[282],{"type":23,"value":283},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":10,"searchDepth":103,"depth":103,"links":285},[],"markdown","content:design-system:3.develop:4.usage:3.nuxt.md","content","design-system/3.develop/4.usage/3.nuxt.md","md",["ShallowRef",292],["ShallowReactive",293],{"/design-system/develop/usage/nuxt":294},[295,301],{"_path":296,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":297,"description":298,"layout":13,"_type":286,"_id":299,"_source":288,"_file":300,"_extension":290},"/design-system/develop/usage/vue","Vue","How to use Ripple components with Vue.","content:design-system:3.develop:4.usage:2.vue.md","design-system/3.develop/4.usage/2.vue.md",{"_path":302,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":303,"description":304,"layout":13,"_type":286,"_id":305,"_source":288,"_file":306,"_extension":290},"/design-system/develop/usage/webcomponents","Web components","How to use the web component exports with other front-end systems.","content:design-system:3.develop:4.usage:4.webcomponents.md","design-system/3.develop/4.usage/4.webcomponents.md",["ShallowRef",308],{},[310,315,557],{"title":311,"_path":312,"icon":313,"layout":314},"Ripple Design System","/","carbon:home","home",{"title":316,"_path":317,"children":318},"Design System","/design-system",[319,335,351,375,409],{"title":320,"_path":321,"children":322},"About","/design-system/about",[323,326,329,332],{"title":324,"_path":325,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":327,"_path":328,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":330,"_path":331,"layout":13},"Support","/design-system/about/getting-support",{"title":333,"_path":334,"layout":13},"Contributing","/design-system/about/contributing",{"title":336,"_path":337,"children":338},"Design","/design-system/design",[339,342,345,348],{"title":340,"_path":341,"layout":13},"Getting started","/design-system/design/getting-started",{"title":343,"_path":344,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":346,"_path":347,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":349,"_path":350,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":352,"_path":353,"children":354},"Develop","/design-system/develop",[355,357,359,362],{"title":340,"_path":356,"layout":13},"/design-system/develop/getting-started",{"title":333,"_path":358,"layout":13},"/design-system/develop/contributing",{"title":360,"_path":361,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":363,"_path":364,"children":365,"layout":13},"Usage","/design-system/develop/usage",[366,369,370,371,372],{"title":367,"_path":368,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":297,"_path":296,"layout":13},{"title":11,"_path":7,"layout":13},{"title":303,"_path":302,"layout":13},{"title":373,"_path":374,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":376,"_path":377,"children":378},"Styles","/design-system/styles",[379,382,385,388,391,394,397,400,403,406],{"title":380,"_path":381,"layout":13},"Colour","/design-system/styles/colour",{"title":383,"_path":384,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":386,"_path":387,"layout":13},"Grid","/design-system/styles/grid",{"title":389,"_path":390,"layout":13},"Icons","/design-system/styles/icons",{"title":392,"_path":393,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":395,"_path":396,"layout":13},"Layout","/design-system/styles/layout",{"title":398,"_path":399,"layout":13},"Logo","/design-system/styles/logo",{"title":401,"_path":402,"layout":13},"Motion","/design-system/styles/motion",{"title":404,"_path":405,"layout":13},"Spacing","/design-system/styles/spacing",{"title":407,"_path":408,"layout":13},"Typography","/design-system/styles/typography",{"title":410,"_path":411,"children":412},"Components","/design-system/components",[413,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482,485,488,491,494,497,500,503,506,509,512,515,518,521,524,527,530,533,536,539,542,545,548,551,554],{"title":414,"_path":415,"layout":13},"Accordion","/design-system/components/accordion",{"title":417,"_path":418,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":420,"_path":421,"layout":13},"Alert","/design-system/components/alert",{"title":423,"_path":424,"layout":13},"Block quote","/design-system/components/block-quote",{"title":426,"_path":427,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":429,"_path":430,"layout":13},"Button","/design-system/components/button",{"title":432,"_path":433,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":435,"_path":436,"layout":13},"Callout","/design-system/components/callout",{"title":438,"_path":439,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":441,"_path":442,"layout":13},"Card","/design-system/components/card",{"title":444,"_path":445,"layout":13},"Carousel","/design-system/components/carousel",{"title":447,"_path":448,"layout":13},"Category grid","/design-system/components/category-grid",{"title":450,"_path":451,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":453,"_path":454,"layout":13},"Chip","/design-system/components/chip",{"title":456,"_path":457,"layout":13},"Contact us","/design-system/components/contact-us",{"title":459,"_path":460,"layout":13},"Date input","/design-system/components/date-input",{"title":462,"_path":463,"layout":13},"Detail list","/design-system/components/detail-list",{"title":465,"_path":466,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":468,"_path":469,"layout":13},"File","/design-system/components/file",{"title":471,"_path":472,"layout":13},"Footer","/design-system/components/footer",{"title":474,"_path":475,"layout":13},"Form","/design-system/components/form",{"title":477,"_path":478,"layout":13},"Form alert","/design-system/components/form-alert",{"title":480,"_path":481,"layout":13},"Header","/design-system/components/header",{"title":483,"_path":484,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":486,"_path":487,"layout":13},"Input field","/design-system/components/input-field",{"title":489,"_path":490,"layout":13},"Key dates","/design-system/components/key-dates",{"title":492,"_path":493,"layout":13},"Media","/design-system/components/media",{"title":495,"_path":496,"layout":13},"Media embed","/design-system/components/media-embed",{"title":498,"_path":499,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":501,"_path":502,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":504,"_path":505,"layout":13},"Option button","/design-system/components/option-button",{"title":507,"_path":508,"layout":13},"Page action","/design-system/components/page-action",{"title":510,"_path":511,"layout":13},"Pagination","/design-system/components/pagination",{"title":513,"_path":514,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":516,"_path":517,"layout":13},"Profile","/design-system/components/profile",{"title":519,"_path":520,"layout":13},"Radio button","/design-system/components/radio-button",{"title":522,"_path":523,"layout":13},"Related links","/design-system/components/related-links",{"title":525,"_path":526,"layout":13},"Results listing","/design-system/components/results-listing",{"title":528,"_path":529,"layout":13},"Search bar","/design-system/components/search-bar",{"title":531,"_path":532,"layout":13},"Skip link","/design-system/components/skip-link",{"title":534,"_path":535,"layout":13},"Social share","/design-system/components/social-share",{"title":537,"_path":538,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":540,"_path":541,"layout":13},"Table","/design-system/components/table",{"title":543,"_path":544,"layout":13},"Tabs","/design-system/components/tabs",{"title":546,"_path":547,"layout":13},"Tag","/design-system/components/tag",{"title":549,"_path":550,"layout":13},"Text area","/design-system/components/text-area",{"title":552,"_path":553,"layout":13},"Timeline","/design-system/components/timeline",{"title":555,"_path":556,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":558,"_path":272,"children":559,"layout":13},"Ripple Framework",[560,561,579,601],{"title":558,"_path":272,"layout":13},{"title":562,"_path":563,"children":564},"Key Concepts","/framework/key-concepts",[565,567,570,573,576],{"title":11,"_path":566,"layout":13},"/framework/key-concepts/nuxt",{"title":568,"_path":569,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":571,"_path":572,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":574,"_path":575,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":577,"_path":578,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":580,"_path":581,"children":582},"Guides","/framework/guides",[583,586,589,592,595,598],{"title":584,"_path":585,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":587,"_path":588,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":590,"_path":591,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":593,"_path":594,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":596,"_path":597,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":599,"_path":600,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":602,"_path":603,"layout":13},"Core modules","/framework/core-modules",["Reactive",605],["Set"],["Reactive",607],{"module-navigation":608},null,true,1714695151735]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+</span></span></code><!--]--></pre><!--]--></div><p><!--[-->Even if you are not using SDP, the <a href="/framework" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Ripple Framework documentation<!--]--><!--]--><!----><!--]--></a> is a good starting point for any Nuxt development using Ripple.<!--]--></p><style>html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}</style><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/4.usage/3.nuxt.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/usage/nuxt/_payload.json">[{"state":1,"once":604,"_errors":606,"serverRendered":609,"path":7,"prerenderedAt":610},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":291,"$sdd-globals":307,"$sdd-navigation":309},["ShallowRef",4],["ShallowReactive",5],{"/design-system/develop/usage/nuxt":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":286,"_id":287,"_source":288,"_file":289,"_extension":290},"/design-system/develop/usage/nuxt","usage",false,"","Nuxt","How to use Ripple components with Nuxt in a non-SDP context.","page",{"type":15,"children":16,"toc":284},"root",[17,34,39,49,62,138,143,184,189,265,278],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22,25,32],{"type":23,"value":24},"text","First, set up ",{"type":18,"tag":26,"props":27,"children":29},"a",{"href":28},"access-to-github-packages",[30],{"type":23,"value":31},"access to Github Packages",{"type":23,"value":33},".",{"type":18,"tag":19,"props":35,"children":36},{},[37],{"type":23,"value":38},"Next, install Ripple UI in your project:",{"type":18,"tag":19,"props":40,"children":41},{},[42],{"type":18,"tag":43,"props":44,"children":46},"code",{"className":45},[],[47],{"type":23,"value":48},"npm install @dpc-sdp/ripple-ui-core --save",{"type":18,"tag":19,"props":50,"children":51},{},[52,54,60],{"type":23,"value":53},"Ripple UI exports a nuxt module that you can add to your nuxt config, note the addition of ",{"type":18,"tag":43,"props":55,"children":57},{"className":56},[],[58],{"type":23,"value":59},"/nuxt",{"type":23,"value":61},":",{"type":18,"tag":63,"props":64,"children":68},"pre",{"className":65,"code":66,"language":67,"meta":10,"style":10},"language-js shiki shiki-themes github-light","export default defineNuxtConfig({\n  modules: [\n    '@dpc-sdp/ripple-ui-core/nuxt'\n  ]\n})\n","js",[69],{"type":18,"tag":43,"props":70,"children":71},{"__ignoreMap":10},[72,101,110,120,129],{"type":18,"tag":73,"props":74,"children":77},"span",{"class":75,"line":76},"line",1,[78,84,89,95],{"type":18,"tag":73,"props":79,"children":81},{"style":80},"--shiki-default:#D73A49",[82],{"type":23,"value":83},"export",{"type":18,"tag":73,"props":85,"children":86},{"style":80},[87],{"type":23,"value":88}," default",{"type":18,"tag":73,"props":90,"children":92},{"style":91},"--shiki-default:#6F42C1",[93],{"type":23,"value":94}," defineNuxtConfig",{"type":18,"tag":73,"props":96,"children":98},{"style":97},"--shiki-default:#24292E",[99],{"type":23,"value":100},"({\n",{"type":18,"tag":73,"props":102,"children":104},{"class":75,"line":103},2,[105],{"type":18,"tag":73,"props":106,"children":107},{"style":97},[108],{"type":23,"value":109},"  modules: [\n",{"type":18,"tag":73,"props":111,"children":113},{"class":75,"line":112},3,[114],{"type":18,"tag":73,"props":115,"children":117},{"style":116},"--shiki-default:#032F62",[118],{"type":23,"value":119},"    '@dpc-sdp/ripple-ui-core/nuxt'\n",{"type":18,"tag":73,"props":121,"children":123},{"class":75,"line":122},4,[124],{"type":18,"tag":73,"props":125,"children":126},{"style":97},[127],{"type":23,"value":128},"  ]\n",{"type":18,"tag":73,"props":130,"children":132},{"class":75,"line":131},5,[133],{"type":18,"tag":73,"props":134,"children":135},{"style":97},[136],{"type":23,"value":137},"})\n",{"type":18,"tag":19,"props":139,"children":140},{},[141],{"type":23,"value":142},"In order for the styles to appear correctly, you will need to import them. Do this at the root of your project (usually in your app.vue file):",{"type":18,"tag":63,"props":144,"children":146},{"className":65,"code":145,"language":67,"meta":10,"style":10},"import '@dpc-sdp/ripple-ui-core/style';\nimport '@dpc-sdp/ripple-ui-core/style/components';\n",[147],{"type":18,"tag":43,"props":148,"children":149},{"__ignoreMap":10},[150,168],{"type":18,"tag":73,"props":151,"children":152},{"class":75,"line":76},[153,158,163],{"type":18,"tag":73,"props":154,"children":155},{"style":80},[156],{"type":23,"value":157},"import",{"type":18,"tag":73,"props":159,"children":160},{"style":116},[161],{"type":23,"value":162}," '@dpc-sdp/ripple-ui-core/style'",{"type":18,"tag":73,"props":164,"children":165},{"style":97},[166],{"type":23,"value":167},";\n",{"type":18,"tag":73,"props":169,"children":170},{"class":75,"line":103},[171,175,180],{"type":18,"tag":73,"props":172,"children":173},{"style":80},[174],{"type":23,"value":157},{"type":18,"tag":73,"props":176,"children":177},{"style":116},[178],{"type":23,"value":179}," '@dpc-sdp/ripple-ui-core/style/components'",{"type":18,"tag":73,"props":181,"children":182},{"style":97},[183],{"type":23,"value":167},{"type":18,"tag":19,"props":185,"children":186},{},[187],{"type":23,"value":188},"There is no need to import the components as they will be registered globally by the nuxt module",{"type":18,"tag":63,"props":190,"children":192},{"className":65,"code":191,"language":67,"meta":10,"style":10},"\u003Ctemplate>\n  \u003CRplButton variant=\"outlined\" />\n\u003C/template>\n",[193],{"type":18,"tag":43,"props":194,"children":195},{"__ignoreMap":10},[196,215,249],{"type":18,"tag":73,"props":197,"children":198},{"class":75,"line":76},[199,204,210],{"type":18,"tag":73,"props":200,"children":201},{"style":97},[202],{"type":23,"value":203},"\u003C",{"type":18,"tag":73,"props":205,"children":207},{"style":206},"--shiki-default:#22863A",[208],{"type":23,"value":209},"template",{"type":18,"tag":73,"props":211,"children":212},{"style":97},[213],{"type":23,"value":214},">\n",{"type":18,"tag":73,"props":216,"children":217},{"class":75,"line":103},[218,223,229,234,239,244],{"type":18,"tag":73,"props":219,"children":220},{"style":97},[221],{"type":23,"value":222},"  \u003C",{"type":18,"tag":73,"props":224,"children":226},{"style":225},"--shiki-default:#005CC5",[227],{"type":23,"value":228},"RplButton",{"type":18,"tag":73,"props":230,"children":231},{"style":91},[232],{"type":23,"value":233}," variant",{"type":18,"tag":73,"props":235,"children":236},{"style":80},[237],{"type":23,"value":238},"=",{"type":18,"tag":73,"props":240,"children":241},{"style":116},[242],{"type":23,"value":243},"\"outlined\"",{"type":18,"tag":73,"props":245,"children":246},{"style":97},[247],{"type":23,"value":248}," />\n",{"type":18,"tag":73,"props":250,"children":251},{"class":75,"line":112},[252,257,261],{"type":18,"tag":73,"props":253,"children":254},{"style":97},[255],{"type":23,"value":256},"\u003C/",{"type":18,"tag":73,"props":258,"children":259},{"style":206},[260],{"type":23,"value":209},{"type":18,"tag":73,"props":262,"children":263},{"style":97},[264],{"type":23,"value":214},{"type":18,"tag":19,"props":266,"children":267},{},[268,270,276],{"type":23,"value":269},"Even if you are not using SDP, the ",{"type":18,"tag":26,"props":271,"children":273},{"href":272},"/framework",[274],{"type":23,"value":275},"Ripple Framework documentation",{"type":23,"value":277}," is a good starting point for any Nuxt development using Ripple.",{"type":18,"tag":279,"props":280,"children":281},"style",{},[282],{"type":23,"value":283},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":10,"searchDepth":103,"depth":103,"links":285},[],"markdown","content:design-system:3.develop:4.usage:3.nuxt.md","content","design-system/3.develop/4.usage/3.nuxt.md","md",["ShallowRef",292],["ShallowReactive",293],{"/design-system/develop/usage/nuxt":294},[295,301],{"_path":296,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":297,"description":298,"layout":13,"_type":286,"_id":299,"_source":288,"_file":300,"_extension":290},"/design-system/develop/usage/vue","Vue","How to use Ripple components with Vue.","content:design-system:3.develop:4.usage:2.vue.md","design-system/3.develop/4.usage/2.vue.md",{"_path":302,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":303,"description":304,"layout":13,"_type":286,"_id":305,"_source":288,"_file":306,"_extension":290},"/design-system/develop/usage/webcomponents","Web components","How to use the web component exports with other front-end systems.","content:design-system:3.develop:4.usage:4.webcomponents.md","design-system/3.develop/4.usage/4.webcomponents.md",["ShallowRef",308],{},[310,315,557],{"title":311,"_path":312,"icon":313,"layout":314},"Ripple Design System","/","carbon:home","home",{"title":316,"_path":317,"children":318},"Design System","/design-system",[319,335,351,375,409],{"title":320,"_path":321,"children":322},"About","/design-system/about",[323,326,329,332],{"title":324,"_path":325,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":327,"_path":328,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":330,"_path":331,"layout":13},"Support","/design-system/about/getting-support",{"title":333,"_path":334,"layout":13},"Contributing","/design-system/about/contributing",{"title":336,"_path":337,"children":338},"Design","/design-system/design",[339,342,345,348],{"title":340,"_path":341,"layout":13},"Getting started","/design-system/design/getting-started",{"title":343,"_path":344,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":346,"_path":347,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":349,"_path":350,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":352,"_path":353,"children":354},"Develop","/design-system/develop",[355,357,359,362],{"title":340,"_path":356,"layout":13},"/design-system/develop/getting-started",{"title":333,"_path":358,"layout":13},"/design-system/develop/contributing",{"title":360,"_path":361,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":363,"_path":364,"children":365,"layout":13},"Usage","/design-system/develop/usage",[366,369,370,371,372],{"title":367,"_path":368,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":297,"_path":296,"layout":13},{"title":11,"_path":7,"layout":13},{"title":303,"_path":302,"layout":13},{"title":373,"_path":374,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":376,"_path":377,"children":378},"Styles","/design-system/styles",[379,382,385,388,391,394,397,400,403,406],{"title":380,"_path":381,"layout":13},"Colour","/design-system/styles/colour",{"title":383,"_path":384,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":386,"_path":387,"layout":13},"Grid","/design-system/styles/grid",{"title":389,"_path":390,"layout":13},"Icons","/design-system/styles/icons",{"title":392,"_path":393,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":395,"_path":396,"layout":13},"Layout","/design-system/styles/layout",{"title":398,"_path":399,"layout":13},"Logo","/design-system/styles/logo",{"title":401,"_path":402,"layout":13},"Motion","/design-system/styles/motion",{"title":404,"_path":405,"layout":13},"Spacing","/design-system/styles/spacing",{"title":407,"_path":408,"layout":13},"Typography","/design-system/styles/typography",{"title":410,"_path":411,"children":412},"Components","/design-system/components",[413,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482,485,488,491,494,497,500,503,506,509,512,515,518,521,524,527,530,533,536,539,542,545,548,551,554],{"title":414,"_path":415,"layout":13},"Accordion","/design-system/components/accordion",{"title":417,"_path":418,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":420,"_path":421,"layout":13},"Alert","/design-system/components/alert",{"title":423,"_path":424,"layout":13},"Block quote","/design-system/components/block-quote",{"title":426,"_path":427,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":429,"_path":430,"layout":13},"Button","/design-system/components/button",{"title":432,"_path":433,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":435,"_path":436,"layout":13},"Callout","/design-system/components/callout",{"title":438,"_path":439,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":441,"_path":442,"layout":13},"Card","/design-system/components/card",{"title":444,"_path":445,"layout":13},"Carousel","/design-system/components/carousel",{"title":447,"_path":448,"layout":13},"Category grid","/design-system/components/category-grid",{"title":450,"_path":451,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":453,"_path":454,"layout":13},"Chip","/design-system/components/chip",{"title":456,"_path":457,"layout":13},"Contact us","/design-system/components/contact-us",{"title":459,"_path":460,"layout":13},"Date input","/design-system/components/date-input",{"title":462,"_path":463,"layout":13},"Detail list","/design-system/components/detail-list",{"title":465,"_path":466,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":468,"_path":469,"layout":13},"File","/design-system/components/file",{"title":471,"_path":472,"layout":13},"Footer","/design-system/components/footer",{"title":474,"_path":475,"layout":13},"Form","/design-system/components/form",{"title":477,"_path":478,"layout":13},"Form alert","/design-system/components/form-alert",{"title":480,"_path":481,"layout":13},"Header","/design-system/components/header",{"title":483,"_path":484,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":486,"_path":487,"layout":13},"Input field","/design-system/components/input-field",{"title":489,"_path":490,"layout":13},"Key dates","/design-system/components/key-dates",{"title":492,"_path":493,"layout":13},"Media","/design-system/components/media",{"title":495,"_path":496,"layout":13},"Media embed","/design-system/components/media-embed",{"title":498,"_path":499,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":501,"_path":502,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":504,"_path":505,"layout":13},"Option button","/design-system/components/option-button",{"title":507,"_path":508,"layout":13},"Page action","/design-system/components/page-action",{"title":510,"_path":511,"layout":13},"Pagination","/design-system/components/pagination",{"title":513,"_path":514,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":516,"_path":517,"layout":13},"Profile","/design-system/components/profile",{"title":519,"_path":520,"layout":13},"Radio button","/design-system/components/radio-button",{"title":522,"_path":523,"layout":13},"Related links","/design-system/components/related-links",{"title":525,"_path":526,"layout":13},"Results listing","/design-system/components/results-listing",{"title":528,"_path":529,"layout":13},"Search bar","/design-system/components/search-bar",{"title":531,"_path":532,"layout":13},"Skip link","/design-system/components/skip-link",{"title":534,"_path":535,"layout":13},"Social share","/design-system/components/social-share",{"title":537,"_path":538,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":540,"_path":541,"layout":13},"Table","/design-system/components/table",{"title":543,"_path":544,"layout":13},"Tabs","/design-system/components/tabs",{"title":546,"_path":547,"layout":13},"Tag","/design-system/components/tag",{"title":549,"_path":550,"layout":13},"Text area","/design-system/components/text-area",{"title":552,"_path":553,"layout":13},"Timeline","/design-system/components/timeline",{"title":555,"_path":556,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":558,"_path":272,"children":559,"layout":13},"Ripple Framework",[560,561,579,601],{"title":558,"_path":272,"layout":13},{"title":562,"_path":563,"children":564},"Key Concepts","/framework/key-concepts",[565,567,570,573,576],{"title":11,"_path":566,"layout":13},"/framework/key-concepts/nuxt",{"title":568,"_path":569,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":571,"_path":572,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":574,"_path":575,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":577,"_path":578,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":580,"_path":581,"children":582},"Guides","/framework/guides",[583,586,589,592,595,598],{"title":584,"_path":585,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":587,"_path":588,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":590,"_path":591,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":593,"_path":594,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":596,"_path":597,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":599,"_path":600,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":602,"_path":603,"layout":13},"Core modules","/framework/core-modules",["Reactive",605],["Set"],["Reactive",607],{"module-navigation":608},null,true,1714695649984]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/develop/usage/vue/_payload.json b/design-system/develop/usage/vue/_payload.json
index cd460fdf02..d1a57e132a 100644
--- a/design-system/develop/usage/vue/_payload.json
+++ b/design-system/develop/usage/vue/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":40,"items":41},"/design-system/develop","Develop",true,[42,44,46,49],{"id":43,"text":27,"url":43,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":7,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":40,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":40,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695151731]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":40,"items":41},"/design-system/develop","Develop",true,[42,44,46,49],{"id":43,"text":27,"url":43,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":7,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":40,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":40,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695649980]
\ No newline at end of file
diff --git a/design-system/develop/usage/vue/index.html b/design-system/develop/usage/vue/index.html
index 6c24f49c1a..502d6b81e7 100644
--- a/design-system/develop/usage/vue/index.html
+++ b/design-system/develop/usage/vue/index.html
@@ -24,58 +24,58 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.uDpSgjM7.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProsePre.1p0bzX0t.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCode.ggTmuEB2.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.iJ9KJvnk.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProsePre.928ctTB_.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCode.Xz7xMLuq.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -96,8 +96,8 @@
 </span></span><span class="line" line="5"><span style="--shiki-default:#24292E">&lt;</span><span style="--shiki-default:#22863A">template</span><span style="--shiki-default:#24292E">&gt;
 </span></span><span class="line" line="6"><span style="--shiki-default:#24292E">  &lt;</span><span style="--shiki-default:#005CC5">RplButton</span><span style="--shiki-default:#6F42C1"> variant</span><span style="--shiki-default:#D73A49">=</span><span style="--shiki-default:#032F62">&quot;outlined&quot;</span><span style="--shiki-default:#24292E"> /&gt;
 </span></span><span class="line" line="7"><span style="--shiki-default:#24292E">&lt;/</span><span style="--shiki-default:#22863A">template</span><span style="--shiki-default:#24292E">&gt;
-</span></span></code><!--]--></pre><!--]--></div><p><!--[-->Please see this <a href="https://github.com/dpc-sdp/ripple-vue-example" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->example app<!--]--><!--]--><!----><!--]--></a> for a basic demonstration of how to use Ripple components in a Vue app.<!--]--></p><style>html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}</style><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/4.usage/2.vue.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/usage/vue/_payload.json">[{"state":1,"once":602,"_errors":604,"serverRendered":188,"path":7,"prerenderedAt":607},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":288,"$sdd-globals":304,"$sdd-navigation":306},["ShallowRef",4],["ShallowReactive",5],{"/design-system/develop/usage/vue":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":283,"_id":284,"_source":285,"_file":286,"_extension":287},"/design-system/develop/usage/vue","usage",false,"","Vue","How to use Ripple components with Vue.","page",{"type":15,"children":16,"toc":281},"root",[17,34,39,49,54,105,125,260,275],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22,25,32],{"type":23,"value":24},"text","First, set up ",{"type":18,"tag":26,"props":27,"children":29},"a",{"href":28},"access-to-github-packages",[30],{"type":23,"value":31},"access to Github Packages",{"type":23,"value":33},".",{"type":18,"tag":19,"props":35,"children":36},{},[37],{"type":23,"value":38},"Next, install Ripple UI in your project:",{"type":18,"tag":19,"props":40,"children":41},{},[42],{"type":18,"tag":43,"props":44,"children":46},"code",{"className":45},[],[47],{"type":23,"value":48},"npm install @dpc-sdp/ripple-ui-core --save",{"type":18,"tag":19,"props":50,"children":51},{},[52],{"type":23,"value":53},"In order for the styles to appear correctly, you will need to import them. Do this at the root of your project (usually in your app.vue or index.js file):",{"type":18,"tag":55,"props":56,"children":60},"pre",{"className":57,"code":58,"language":59,"meta":10,"style":10},"language-js shiki shiki-themes github-light","import '@dpc-sdp/ripple-ui-core/style';\nimport '@dpc-sdp/ripple-ui-core/style/components';\n","js",[61],{"type":18,"tag":43,"props":62,"children":63},{"__ignoreMap":10},[64,88],{"type":18,"tag":65,"props":66,"children":69},"span",{"class":67,"line":68},"line",1,[70,76,82],{"type":18,"tag":65,"props":71,"children":73},{"style":72},"--shiki-default:#D73A49",[74],{"type":23,"value":75},"import",{"type":18,"tag":65,"props":77,"children":79},{"style":78},"--shiki-default:#032F62",[80],{"type":23,"value":81}," '@dpc-sdp/ripple-ui-core/style'",{"type":18,"tag":65,"props":83,"children":85},{"style":84},"--shiki-default:#24292E",[86],{"type":23,"value":87},";\n",{"type":18,"tag":65,"props":89,"children":91},{"class":67,"line":90},2,[92,96,101],{"type":18,"tag":65,"props":93,"children":94},{"style":72},[95],{"type":23,"value":75},{"type":18,"tag":65,"props":97,"children":98},{"style":78},[99],{"type":23,"value":100}," '@dpc-sdp/ripple-ui-core/style/components'",{"type":18,"tag":65,"props":102,"children":103},{"style":84},[104],{"type":23,"value":87},{"type":18,"tag":19,"props":106,"children":107},{},[108,110,116,118,124],{"type":23,"value":109},"To use a component, import it from ",{"type":18,"tag":43,"props":111,"children":113},{"className":112},[],[114],{"type":23,"value":115},"@dpc-sdp/ripple-ui-core/vue",{"type":23,"value":117},", note the addition of ",{"type":18,"tag":43,"props":119,"children":121},{"className":120},[],[122],{"type":23,"value":123},"/vue",{"type":23,"value":33},{"type":18,"tag":55,"props":126,"children":128},{"className":57,"code":127,"language":59,"meta":10,"style":10},"\u003Cscript setup>\nimport { RplButton } from '@dpc-sdp/ripple-ui-core/vue';\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CRplButton variant=\"outlined\" />\n\u003C/template>\n",[129],{"type":18,"tag":43,"props":130,"children":131},{"__ignoreMap":10},[132,157,165,182,192,209,244],{"type":18,"tag":65,"props":133,"children":134},{"class":67,"line":68},[135,140,146,152],{"type":18,"tag":65,"props":136,"children":137},{"style":84},[138],{"type":23,"value":139},"\u003C",{"type":18,"tag":65,"props":141,"children":143},{"style":142},"--shiki-default:#22863A",[144],{"type":23,"value":145},"script",{"type":18,"tag":65,"props":147,"children":149},{"style":148},"--shiki-default:#6F42C1",[150],{"type":23,"value":151}," setup",{"type":18,"tag":65,"props":153,"children":154},{"style":84},[155],{"type":23,"value":156},">\n",{"type":18,"tag":65,"props":158,"children":159},{"class":67,"line":90},[160],{"type":18,"tag":65,"props":161,"children":162},{"style":84},[163],{"type":23,"value":164},"import { RplButton } from '@dpc-sdp/ripple-ui-core/vue';\n",{"type":18,"tag":65,"props":166,"children":168},{"class":67,"line":167},3,[169,174,178],{"type":18,"tag":65,"props":170,"children":171},{"style":84},[172],{"type":23,"value":173},"\u003C/",{"type":18,"tag":65,"props":175,"children":176},{"style":142},[177],{"type":23,"value":145},{"type":18,"tag":65,"props":179,"children":180},{"style":84},[181],{"type":23,"value":156},{"type":18,"tag":65,"props":183,"children":185},{"class":67,"line":184},4,[186],{"type":18,"tag":65,"props":187,"children":189},{"emptyLinePlaceholder":188},true,[190],{"type":23,"value":191},"\n",{"type":18,"tag":65,"props":193,"children":195},{"class":67,"line":194},5,[196,200,205],{"type":18,"tag":65,"props":197,"children":198},{"style":84},[199],{"type":23,"value":139},{"type":18,"tag":65,"props":201,"children":202},{"style":142},[203],{"type":23,"value":204},"template",{"type":18,"tag":65,"props":206,"children":207},{"style":84},[208],{"type":23,"value":156},{"type":18,"tag":65,"props":210,"children":212},{"class":67,"line":211},6,[213,218,224,229,234,239],{"type":18,"tag":65,"props":214,"children":215},{"style":84},[216],{"type":23,"value":217},"  \u003C",{"type":18,"tag":65,"props":219,"children":221},{"style":220},"--shiki-default:#005CC5",[222],{"type":23,"value":223},"RplButton",{"type":18,"tag":65,"props":225,"children":226},{"style":148},[227],{"type":23,"value":228}," variant",{"type":18,"tag":65,"props":230,"children":231},{"style":72},[232],{"type":23,"value":233},"=",{"type":18,"tag":65,"props":235,"children":236},{"style":78},[237],{"type":23,"value":238},"\"outlined\"",{"type":18,"tag":65,"props":240,"children":241},{"style":84},[242],{"type":23,"value":243}," />\n",{"type":18,"tag":65,"props":245,"children":247},{"class":67,"line":246},7,[248,252,256],{"type":18,"tag":65,"props":249,"children":250},{"style":84},[251],{"type":23,"value":173},{"type":18,"tag":65,"props":253,"children":254},{"style":142},[255],{"type":23,"value":204},{"type":18,"tag":65,"props":257,"children":258},{"style":84},[259],{"type":23,"value":156},{"type":18,"tag":19,"props":261,"children":262},{},[263,265,273],{"type":23,"value":264},"Please see this ",{"type":18,"tag":26,"props":266,"children":270},{"href":267,"rel":268},"https://github.com/dpc-sdp/ripple-vue-example",[269],"nofollow",[271],{"type":23,"value":272},"example app",{"type":23,"value":274}," for a basic demonstration of how to use Ripple components in a Vue app.",{"type":18,"tag":276,"props":277,"children":278},"style",{},[279],{"type":23,"value":280},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":10,"searchDepth":90,"depth":90,"links":282},[],"markdown","content:design-system:3.develop:4.usage:2.vue.md","content","design-system/3.develop/4.usage/2.vue.md","md",["ShallowRef",289],["ShallowReactive",290],{"/design-system/develop/usage/vue":291},[292,298],{"_path":293,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":294,"description":295,"layout":13,"_type":283,"_id":296,"_source":285,"_file":297,"_extension":287},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages","How to access and use repos hosted on Github Packages.","content:design-system:3.develop:4.usage:1.access-to-github-packages.md","design-system/3.develop/4.usage/1.access-to-github-packages.md",{"_path":299,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":300,"description":301,"layout":13,"_type":283,"_id":302,"_source":285,"_file":303,"_extension":287},"/design-system/develop/usage/nuxt","Nuxt","How to use Ripple components with Nuxt in a non-SDP context.","content:design-system:3.develop:4.usage:3.nuxt.md","design-system/3.develop/4.usage/3.nuxt.md",["ShallowRef",305],{},[307,312,554],{"title":308,"_path":309,"icon":310,"layout":311},"Ripple Design System","/","carbon:home","home",{"title":313,"_path":314,"children":315},"Design System","/design-system",[316,332,348,372,406],{"title":317,"_path":318,"children":319},"About","/design-system/about",[320,323,326,329],{"title":321,"_path":322,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":324,"_path":325,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":327,"_path":328,"layout":13},"Support","/design-system/about/getting-support",{"title":330,"_path":331,"layout":13},"Contributing","/design-system/about/contributing",{"title":333,"_path":334,"children":335},"Design","/design-system/design",[336,339,342,345],{"title":337,"_path":338,"layout":13},"Getting started","/design-system/design/getting-started",{"title":340,"_path":341,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":343,"_path":344,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":346,"_path":347,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":349,"_path":350,"children":351},"Develop","/design-system/develop",[352,354,356,359],{"title":337,"_path":353,"layout":13},"/design-system/develop/getting-started",{"title":330,"_path":355,"layout":13},"/design-system/develop/contributing",{"title":357,"_path":358,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":360,"_path":361,"children":362,"layout":13},"Usage","/design-system/develop/usage",[363,364,365,366,369],{"title":294,"_path":293,"layout":13},{"title":11,"_path":7,"layout":13},{"title":300,"_path":299,"layout":13},{"title":367,"_path":368,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":370,"_path":371,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":373,"_path":374,"children":375},"Styles","/design-system/styles",[376,379,382,385,388,391,394,397,400,403],{"title":377,"_path":378,"layout":13},"Colour","/design-system/styles/colour",{"title":380,"_path":381,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":383,"_path":384,"layout":13},"Grid","/design-system/styles/grid",{"title":386,"_path":387,"layout":13},"Icons","/design-system/styles/icons",{"title":389,"_path":390,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":392,"_path":393,"layout":13},"Layout","/design-system/styles/layout",{"title":395,"_path":396,"layout":13},"Logo","/design-system/styles/logo",{"title":398,"_path":399,"layout":13},"Motion","/design-system/styles/motion",{"title":401,"_path":402,"layout":13},"Spacing","/design-system/styles/spacing",{"title":404,"_path":405,"layout":13},"Typography","/design-system/styles/typography",{"title":407,"_path":408,"children":409},"Components","/design-system/components",[410,413,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482,485,488,491,494,497,500,503,506,509,512,515,518,521,524,527,530,533,536,539,542,545,548,551],{"title":411,"_path":412,"layout":13},"Accordion","/design-system/components/accordion",{"title":414,"_path":415,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":417,"_path":418,"layout":13},"Alert","/design-system/components/alert",{"title":420,"_path":421,"layout":13},"Block quote","/design-system/components/block-quote",{"title":423,"_path":424,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":426,"_path":427,"layout":13},"Button","/design-system/components/button",{"title":429,"_path":430,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":432,"_path":433,"layout":13},"Callout","/design-system/components/callout",{"title":435,"_path":436,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":438,"_path":439,"layout":13},"Card","/design-system/components/card",{"title":441,"_path":442,"layout":13},"Carousel","/design-system/components/carousel",{"title":444,"_path":445,"layout":13},"Category grid","/design-system/components/category-grid",{"title":447,"_path":448,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":450,"_path":451,"layout":13},"Chip","/design-system/components/chip",{"title":453,"_path":454,"layout":13},"Contact us","/design-system/components/contact-us",{"title":456,"_path":457,"layout":13},"Date input","/design-system/components/date-input",{"title":459,"_path":460,"layout":13},"Detail list","/design-system/components/detail-list",{"title":462,"_path":463,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":465,"_path":466,"layout":13},"File","/design-system/components/file",{"title":468,"_path":469,"layout":13},"Footer","/design-system/components/footer",{"title":471,"_path":472,"layout":13},"Form","/design-system/components/form",{"title":474,"_path":475,"layout":13},"Form alert","/design-system/components/form-alert",{"title":477,"_path":478,"layout":13},"Header","/design-system/components/header",{"title":480,"_path":481,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":483,"_path":484,"layout":13},"Input field","/design-system/components/input-field",{"title":486,"_path":487,"layout":13},"Key dates","/design-system/components/key-dates",{"title":489,"_path":490,"layout":13},"Media","/design-system/components/media",{"title":492,"_path":493,"layout":13},"Media embed","/design-system/components/media-embed",{"title":495,"_path":496,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":498,"_path":499,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":501,"_path":502,"layout":13},"Option button","/design-system/components/option-button",{"title":504,"_path":505,"layout":13},"Page action","/design-system/components/page-action",{"title":507,"_path":508,"layout":13},"Pagination","/design-system/components/pagination",{"title":510,"_path":511,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":513,"_path":514,"layout":13},"Profile","/design-system/components/profile",{"title":516,"_path":517,"layout":13},"Radio button","/design-system/components/radio-button",{"title":519,"_path":520,"layout":13},"Related links","/design-system/components/related-links",{"title":522,"_path":523,"layout":13},"Results listing","/design-system/components/results-listing",{"title":525,"_path":526,"layout":13},"Search bar","/design-system/components/search-bar",{"title":528,"_path":529,"layout":13},"Skip link","/design-system/components/skip-link",{"title":531,"_path":532,"layout":13},"Social share","/design-system/components/social-share",{"title":534,"_path":535,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":537,"_path":538,"layout":13},"Table","/design-system/components/table",{"title":540,"_path":541,"layout":13},"Tabs","/design-system/components/tabs",{"title":543,"_path":544,"layout":13},"Tag","/design-system/components/tag",{"title":546,"_path":547,"layout":13},"Text area","/design-system/components/text-area",{"title":549,"_path":550,"layout":13},"Timeline","/design-system/components/timeline",{"title":552,"_path":553,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":555,"_path":556,"children":557,"layout":13},"Ripple Framework","/framework",[558,559,577,599],{"title":555,"_path":556,"layout":13},{"title":560,"_path":561,"children":562},"Key Concepts","/framework/key-concepts",[563,565,568,571,574],{"title":300,"_path":564,"layout":13},"/framework/key-concepts/nuxt",{"title":566,"_path":567,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":569,"_path":570,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":572,"_path":573,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":575,"_path":576,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":578,"_path":579,"children":580},"Guides","/framework/guides",[581,584,587,590,593,596],{"title":582,"_path":583,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":585,"_path":586,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":588,"_path":589,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":591,"_path":592,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":594,"_path":595,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":597,"_path":598,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":600,"_path":601,"layout":13},"Core modules","/framework/core-modules",["Reactive",603],["Set"],["Reactive",605],{"module-navigation":606},null,1714695151731]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+</span></span></code><!--]--></pre><!--]--></div><p><!--[-->Please see this <a href="https://github.com/dpc-sdp/ripple-vue-example" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->example app<!--]--><!--]--><!----><!--]--></a> for a basic demonstration of how to use Ripple components in a Vue app.<!--]--></p><style>html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}</style><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/4.usage/2.vue.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/usage/vue/_payload.json">[{"state":1,"once":602,"_errors":604,"serverRendered":188,"path":7,"prerenderedAt":607},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":288,"$sdd-globals":304,"$sdd-navigation":306},["ShallowRef",4],["ShallowReactive",5],{"/design-system/develop/usage/vue":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":283,"_id":284,"_source":285,"_file":286,"_extension":287},"/design-system/develop/usage/vue","usage",false,"","Vue","How to use Ripple components with Vue.","page",{"type":15,"children":16,"toc":281},"root",[17,34,39,49,54,105,125,260,275],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22,25,32],{"type":23,"value":24},"text","First, set up ",{"type":18,"tag":26,"props":27,"children":29},"a",{"href":28},"access-to-github-packages",[30],{"type":23,"value":31},"access to Github Packages",{"type":23,"value":33},".",{"type":18,"tag":19,"props":35,"children":36},{},[37],{"type":23,"value":38},"Next, install Ripple UI in your project:",{"type":18,"tag":19,"props":40,"children":41},{},[42],{"type":18,"tag":43,"props":44,"children":46},"code",{"className":45},[],[47],{"type":23,"value":48},"npm install @dpc-sdp/ripple-ui-core --save",{"type":18,"tag":19,"props":50,"children":51},{},[52],{"type":23,"value":53},"In order for the styles to appear correctly, you will need to import them. Do this at the root of your project (usually in your app.vue or index.js file):",{"type":18,"tag":55,"props":56,"children":60},"pre",{"className":57,"code":58,"language":59,"meta":10,"style":10},"language-js shiki shiki-themes github-light","import '@dpc-sdp/ripple-ui-core/style';\nimport '@dpc-sdp/ripple-ui-core/style/components';\n","js",[61],{"type":18,"tag":43,"props":62,"children":63},{"__ignoreMap":10},[64,88],{"type":18,"tag":65,"props":66,"children":69},"span",{"class":67,"line":68},"line",1,[70,76,82],{"type":18,"tag":65,"props":71,"children":73},{"style":72},"--shiki-default:#D73A49",[74],{"type":23,"value":75},"import",{"type":18,"tag":65,"props":77,"children":79},{"style":78},"--shiki-default:#032F62",[80],{"type":23,"value":81}," '@dpc-sdp/ripple-ui-core/style'",{"type":18,"tag":65,"props":83,"children":85},{"style":84},"--shiki-default:#24292E",[86],{"type":23,"value":87},";\n",{"type":18,"tag":65,"props":89,"children":91},{"class":67,"line":90},2,[92,96,101],{"type":18,"tag":65,"props":93,"children":94},{"style":72},[95],{"type":23,"value":75},{"type":18,"tag":65,"props":97,"children":98},{"style":78},[99],{"type":23,"value":100}," '@dpc-sdp/ripple-ui-core/style/components'",{"type":18,"tag":65,"props":102,"children":103},{"style":84},[104],{"type":23,"value":87},{"type":18,"tag":19,"props":106,"children":107},{},[108,110,116,118,124],{"type":23,"value":109},"To use a component, import it from ",{"type":18,"tag":43,"props":111,"children":113},{"className":112},[],[114],{"type":23,"value":115},"@dpc-sdp/ripple-ui-core/vue",{"type":23,"value":117},", note the addition of ",{"type":18,"tag":43,"props":119,"children":121},{"className":120},[],[122],{"type":23,"value":123},"/vue",{"type":23,"value":33},{"type":18,"tag":55,"props":126,"children":128},{"className":57,"code":127,"language":59,"meta":10,"style":10},"\u003Cscript setup>\nimport { RplButton } from '@dpc-sdp/ripple-ui-core/vue';\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CRplButton variant=\"outlined\" />\n\u003C/template>\n",[129],{"type":18,"tag":43,"props":130,"children":131},{"__ignoreMap":10},[132,157,165,182,192,209,244],{"type":18,"tag":65,"props":133,"children":134},{"class":67,"line":68},[135,140,146,152],{"type":18,"tag":65,"props":136,"children":137},{"style":84},[138],{"type":23,"value":139},"\u003C",{"type":18,"tag":65,"props":141,"children":143},{"style":142},"--shiki-default:#22863A",[144],{"type":23,"value":145},"script",{"type":18,"tag":65,"props":147,"children":149},{"style":148},"--shiki-default:#6F42C1",[150],{"type":23,"value":151}," setup",{"type":18,"tag":65,"props":153,"children":154},{"style":84},[155],{"type":23,"value":156},">\n",{"type":18,"tag":65,"props":158,"children":159},{"class":67,"line":90},[160],{"type":18,"tag":65,"props":161,"children":162},{"style":84},[163],{"type":23,"value":164},"import { RplButton } from '@dpc-sdp/ripple-ui-core/vue';\n",{"type":18,"tag":65,"props":166,"children":168},{"class":67,"line":167},3,[169,174,178],{"type":18,"tag":65,"props":170,"children":171},{"style":84},[172],{"type":23,"value":173},"\u003C/",{"type":18,"tag":65,"props":175,"children":176},{"style":142},[177],{"type":23,"value":145},{"type":18,"tag":65,"props":179,"children":180},{"style":84},[181],{"type":23,"value":156},{"type":18,"tag":65,"props":183,"children":185},{"class":67,"line":184},4,[186],{"type":18,"tag":65,"props":187,"children":189},{"emptyLinePlaceholder":188},true,[190],{"type":23,"value":191},"\n",{"type":18,"tag":65,"props":193,"children":195},{"class":67,"line":194},5,[196,200,205],{"type":18,"tag":65,"props":197,"children":198},{"style":84},[199],{"type":23,"value":139},{"type":18,"tag":65,"props":201,"children":202},{"style":142},[203],{"type":23,"value":204},"template",{"type":18,"tag":65,"props":206,"children":207},{"style":84},[208],{"type":23,"value":156},{"type":18,"tag":65,"props":210,"children":212},{"class":67,"line":211},6,[213,218,224,229,234,239],{"type":18,"tag":65,"props":214,"children":215},{"style":84},[216],{"type":23,"value":217},"  \u003C",{"type":18,"tag":65,"props":219,"children":221},{"style":220},"--shiki-default:#005CC5",[222],{"type":23,"value":223},"RplButton",{"type":18,"tag":65,"props":225,"children":226},{"style":148},[227],{"type":23,"value":228}," variant",{"type":18,"tag":65,"props":230,"children":231},{"style":72},[232],{"type":23,"value":233},"=",{"type":18,"tag":65,"props":235,"children":236},{"style":78},[237],{"type":23,"value":238},"\"outlined\"",{"type":18,"tag":65,"props":240,"children":241},{"style":84},[242],{"type":23,"value":243}," />\n",{"type":18,"tag":65,"props":245,"children":247},{"class":67,"line":246},7,[248,252,256],{"type":18,"tag":65,"props":249,"children":250},{"style":84},[251],{"type":23,"value":173},{"type":18,"tag":65,"props":253,"children":254},{"style":142},[255],{"type":23,"value":204},{"type":18,"tag":65,"props":257,"children":258},{"style":84},[259],{"type":23,"value":156},{"type":18,"tag":19,"props":261,"children":262},{},[263,265,273],{"type":23,"value":264},"Please see this ",{"type":18,"tag":26,"props":266,"children":270},{"href":267,"rel":268},"https://github.com/dpc-sdp/ripple-vue-example",[269],"nofollow",[271],{"type":23,"value":272},"example app",{"type":23,"value":274}," for a basic demonstration of how to use Ripple components in a Vue app.",{"type":18,"tag":276,"props":277,"children":278},"style",{},[279],{"type":23,"value":280},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":10,"searchDepth":90,"depth":90,"links":282},[],"markdown","content:design-system:3.develop:4.usage:2.vue.md","content","design-system/3.develop/4.usage/2.vue.md","md",["ShallowRef",289],["ShallowReactive",290],{"/design-system/develop/usage/vue":291},[292,298],{"_path":293,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":294,"description":295,"layout":13,"_type":283,"_id":296,"_source":285,"_file":297,"_extension":287},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages","How to access and use repos hosted on Github Packages.","content:design-system:3.develop:4.usage:1.access-to-github-packages.md","design-system/3.develop/4.usage/1.access-to-github-packages.md",{"_path":299,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":300,"description":301,"layout":13,"_type":283,"_id":302,"_source":285,"_file":303,"_extension":287},"/design-system/develop/usage/nuxt","Nuxt","How to use Ripple components with Nuxt in a non-SDP context.","content:design-system:3.develop:4.usage:3.nuxt.md","design-system/3.develop/4.usage/3.nuxt.md",["ShallowRef",305],{},[307,312,554],{"title":308,"_path":309,"icon":310,"layout":311},"Ripple Design System","/","carbon:home","home",{"title":313,"_path":314,"children":315},"Design System","/design-system",[316,332,348,372,406],{"title":317,"_path":318,"children":319},"About","/design-system/about",[320,323,326,329],{"title":321,"_path":322,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":324,"_path":325,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":327,"_path":328,"layout":13},"Support","/design-system/about/getting-support",{"title":330,"_path":331,"layout":13},"Contributing","/design-system/about/contributing",{"title":333,"_path":334,"children":335},"Design","/design-system/design",[336,339,342,345],{"title":337,"_path":338,"layout":13},"Getting started","/design-system/design/getting-started",{"title":340,"_path":341,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":343,"_path":344,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":346,"_path":347,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":349,"_path":350,"children":351},"Develop","/design-system/develop",[352,354,356,359],{"title":337,"_path":353,"layout":13},"/design-system/develop/getting-started",{"title":330,"_path":355,"layout":13},"/design-system/develop/contributing",{"title":357,"_path":358,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":360,"_path":361,"children":362,"layout":13},"Usage","/design-system/develop/usage",[363,364,365,366,369],{"title":294,"_path":293,"layout":13},{"title":11,"_path":7,"layout":13},{"title":300,"_path":299,"layout":13},{"title":367,"_path":368,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":370,"_path":371,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":373,"_path":374,"children":375},"Styles","/design-system/styles",[376,379,382,385,388,391,394,397,400,403],{"title":377,"_path":378,"layout":13},"Colour","/design-system/styles/colour",{"title":380,"_path":381,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":383,"_path":384,"layout":13},"Grid","/design-system/styles/grid",{"title":386,"_path":387,"layout":13},"Icons","/design-system/styles/icons",{"title":389,"_path":390,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":392,"_path":393,"layout":13},"Layout","/design-system/styles/layout",{"title":395,"_path":396,"layout":13},"Logo","/design-system/styles/logo",{"title":398,"_path":399,"layout":13},"Motion","/design-system/styles/motion",{"title":401,"_path":402,"layout":13},"Spacing","/design-system/styles/spacing",{"title":404,"_path":405,"layout":13},"Typography","/design-system/styles/typography",{"title":407,"_path":408,"children":409},"Components","/design-system/components",[410,413,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467,470,473,476,479,482,485,488,491,494,497,500,503,506,509,512,515,518,521,524,527,530,533,536,539,542,545,548,551],{"title":411,"_path":412,"layout":13},"Accordion","/design-system/components/accordion",{"title":414,"_path":415,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":417,"_path":418,"layout":13},"Alert","/design-system/components/alert",{"title":420,"_path":421,"layout":13},"Block quote","/design-system/components/block-quote",{"title":423,"_path":424,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":426,"_path":427,"layout":13},"Button","/design-system/components/button",{"title":429,"_path":430,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":432,"_path":433,"layout":13},"Callout","/design-system/components/callout",{"title":435,"_path":436,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":438,"_path":439,"layout":13},"Card","/design-system/components/card",{"title":441,"_path":442,"layout":13},"Carousel","/design-system/components/carousel",{"title":444,"_path":445,"layout":13},"Category grid","/design-system/components/category-grid",{"title":447,"_path":448,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":450,"_path":451,"layout":13},"Chip","/design-system/components/chip",{"title":453,"_path":454,"layout":13},"Contact us","/design-system/components/contact-us",{"title":456,"_path":457,"layout":13},"Date input","/design-system/components/date-input",{"title":459,"_path":460,"layout":13},"Detail list","/design-system/components/detail-list",{"title":462,"_path":463,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":465,"_path":466,"layout":13},"File","/design-system/components/file",{"title":468,"_path":469,"layout":13},"Footer","/design-system/components/footer",{"title":471,"_path":472,"layout":13},"Form","/design-system/components/form",{"title":474,"_path":475,"layout":13},"Form alert","/design-system/components/form-alert",{"title":477,"_path":478,"layout":13},"Header","/design-system/components/header",{"title":480,"_path":481,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":483,"_path":484,"layout":13},"Input field","/design-system/components/input-field",{"title":486,"_path":487,"layout":13},"Key dates","/design-system/components/key-dates",{"title":489,"_path":490,"layout":13},"Media","/design-system/components/media",{"title":492,"_path":493,"layout":13},"Media embed","/design-system/components/media-embed",{"title":495,"_path":496,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":498,"_path":499,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":501,"_path":502,"layout":13},"Option button","/design-system/components/option-button",{"title":504,"_path":505,"layout":13},"Page action","/design-system/components/page-action",{"title":507,"_path":508,"layout":13},"Pagination","/design-system/components/pagination",{"title":510,"_path":511,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":513,"_path":514,"layout":13},"Profile","/design-system/components/profile",{"title":516,"_path":517,"layout":13},"Radio button","/design-system/components/radio-button",{"title":519,"_path":520,"layout":13},"Related links","/design-system/components/related-links",{"title":522,"_path":523,"layout":13},"Results listing","/design-system/components/results-listing",{"title":525,"_path":526,"layout":13},"Search bar","/design-system/components/search-bar",{"title":528,"_path":529,"layout":13},"Skip link","/design-system/components/skip-link",{"title":531,"_path":532,"layout":13},"Social share","/design-system/components/social-share",{"title":534,"_path":535,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":537,"_path":538,"layout":13},"Table","/design-system/components/table",{"title":540,"_path":541,"layout":13},"Tabs","/design-system/components/tabs",{"title":543,"_path":544,"layout":13},"Tag","/design-system/components/tag",{"title":546,"_path":547,"layout":13},"Text area","/design-system/components/text-area",{"title":549,"_path":550,"layout":13},"Timeline","/design-system/components/timeline",{"title":552,"_path":553,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":555,"_path":556,"children":557,"layout":13},"Ripple Framework","/framework",[558,559,577,599],{"title":555,"_path":556,"layout":13},{"title":560,"_path":561,"children":562},"Key Concepts","/framework/key-concepts",[563,565,568,571,574],{"title":300,"_path":564,"layout":13},"/framework/key-concepts/nuxt",{"title":566,"_path":567,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":569,"_path":570,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":572,"_path":573,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":575,"_path":576,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":578,"_path":579,"children":580},"Guides","/framework/guides",[581,584,587,590,593,596],{"title":582,"_path":583,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":585,"_path":586,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":588,"_path":589,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":591,"_path":592,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":594,"_path":595,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":597,"_path":598,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":600,"_path":601,"layout":13},"Core modules","/framework/core-modules",["Reactive",603],["Set"],["Reactive",605],{"module-navigation":606},null,1714695649980]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/develop/usage/webcomponents/_payload.json b/design-system/develop/usage/webcomponents/_payload.json
index ef45899810..b36d904e60 100644
--- a/design-system/develop/usage/webcomponents/_payload.json
+++ b/design-system/develop/usage/webcomponents/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":40,"items":41},"/design-system/develop","Develop",true,[42,44,46,49],{"id":43,"text":27,"url":43,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":7,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":40,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":40,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695151765]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,68,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":40,"items":41},"/design-system/develop","Develop",true,[42,44,46,49],{"id":43,"text":27,"url":43,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":45,"text":20,"url":45,"active":7,"items":-1},"/design-system/develop/contributing",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":50,"text":51,"url":50,"active":40,"items":52},"/design-system/develop/usage","Usage",[53,56,59,62,65],{"id":54,"text":55,"url":54,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":57,"text":58,"url":57,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":60,"text":61,"url":60,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":63,"text":64,"url":63,"active":40,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":66,"text":67,"url":66,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":69,"text":70,"url":69,"active":7,"items":71},"/design-system/styles","Styles",[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695649996]
\ No newline at end of file
diff --git a/design-system/develop/usage/webcomponents/index.html b/design-system/develop/usage/webcomponents/index.html
index e82e8be97b..9a9f3e99c2 100644
--- a/design-system/develop/usage/webcomponents/index.html
+++ b/design-system/develop/usage/webcomponents/index.html
@@ -22,57 +22,57 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.lp_k9Hpd.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.uDpSgjM7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.Czpq-HHw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.iJ9KJvnk.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -85,8 +85,8 @@
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Web components</h1><p class="rpl-type-p-large" data-v-3163c6df>How to use the web component exports with other front-end systems.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><blockquote class="rpl-callout"><!--[--><p><!--[-->Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.<!--]--></p><p><!--[-->Web components are based on existing web standards. Features to support web components are currently being added to the HTML and DOM specs, letting web developers easily extend HTML with new elements with encapsulated styling and custom behavior.
-<a href="https://www.webcomponents.org/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.webcomponents.org/<!--]--><!--]--><!----><!--]--></a><!--]--></p><!--]--></blockquote><p><!--[-->Ripple exports a limited set of components as standard browser native web components. The advantage of using Web components is they can be dropped straight into conventional webpages and any CMS without a javascript build pipeline, such as Squiz Matrix and Salesforce.<!--]--></p><p><!--[-->Support for this output target is currently experimental, if you think you have a use case for using Web components in your project please add a comment <a href="https://github.com/dpc-sdp/ripple-framework/discussions/658" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->here<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><p><!--[-->As with the other methods, set up <a href="access-to-github-packages" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->access to Github Packages<!--]--><!--]--><!----><!--]--></a> and then install Ripple UI in your project:<!--]--></p><p><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->npm install @dpc-sdp/ripple-ui-core --save<!--]--></code><!--]--></p><p><!--[-->A basic example of how to use the web component exports can be found under <a href="https://github.com/dpc-sdp/ripple-framework/tree/develop/examples/webcomponents" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->examples/webcomponents<!--]--><!--]--><!----><!--]--></a> in the ripple-framework monorepo.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/4.usage/4.webcomponents.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/usage/webcomponents/_payload.json">[{"state":1,"once":420,"_errors":422,"serverRendered":425,"path":7,"prerenderedAt":426},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":106,"$sdd-globals":122,"$sdd-navigation":124},["ShallowRef",4],["ShallowReactive",5],{"/design-system/develop/usage/webcomponents":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":101,"_id":102,"_source":103,"_file":104,"_extension":105},"/design-system/develop/usage/webcomponents","usage",false,"","Web components","How to use the web component exports with other front-end systems.","page",{"type":15,"children":16,"toc":98},"root",[17,42,47,61,74,84],{"type":18,"tag":19,"props":20,"children":21},"element","blockquote",{},[22,29],{"type":18,"tag":23,"props":24,"children":25},"p",{},[26],{"type":27,"value":28},"text","Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.",{"type":18,"tag":23,"props":30,"children":31},{},[32,34],{"type":27,"value":33},"Web components are based on existing web standards. Features to support web components are currently being added to the HTML and DOM specs, letting web developers easily extend HTML with new elements with encapsulated styling and custom behavior.\n",{"type":18,"tag":35,"props":36,"children":40},"a",{"href":37,"rel":38},"https://www.webcomponents.org/",[39],"nofollow",[41],{"type":27,"value":37},{"type":18,"tag":23,"props":43,"children":44},{},[45],{"type":27,"value":46},"Ripple exports a limited set of components as standard browser native web components. The advantage of using Web components is they can be dropped straight into conventional webpages and any CMS without a javascript build pipeline, such as Squiz Matrix and Salesforce.",{"type":18,"tag":23,"props":48,"children":49},{},[50,52,59],{"type":27,"value":51},"Support for this output target is currently experimental, if you think you have a use case for using Web components in your project please add a comment ",{"type":18,"tag":35,"props":53,"children":56},{"href":54,"rel":55},"https://github.com/dpc-sdp/ripple-framework/discussions/658",[39],[57],{"type":27,"value":58},"here",{"type":27,"value":60},".",{"type":18,"tag":23,"props":62,"children":63},{},[64,66,72],{"type":27,"value":65},"As with the other methods, set up ",{"type":18,"tag":35,"props":67,"children":69},{"href":68},"access-to-github-packages",[70],{"type":27,"value":71},"access to Github Packages",{"type":27,"value":73}," and then install Ripple UI in your project:",{"type":18,"tag":23,"props":75,"children":76},{},[77],{"type":18,"tag":78,"props":79,"children":81},"code",{"className":80},[],[82],{"type":27,"value":83},"npm install @dpc-sdp/ripple-ui-core --save",{"type":18,"tag":23,"props":85,"children":86},{},[87,89,96],{"type":27,"value":88},"A basic example of how to use the web component exports can be found under ",{"type":18,"tag":35,"props":90,"children":93},{"href":91,"rel":92},"https://github.com/dpc-sdp/ripple-framework/tree/develop/examples/webcomponents",[39],[94],{"type":27,"value":95},"examples/webcomponents",{"type":27,"value":97}," in the ripple-framework monorepo.",{"title":10,"searchDepth":99,"depth":99,"links":100},2,[],"markdown","content:design-system:3.develop:4.usage:4.webcomponents.md","content","design-system/3.develop/4.usage/4.webcomponents.md","md",["ShallowRef",107],["ShallowReactive",108],{"/design-system/develop/usage/webcomponents":109},[110,116],{"_path":111,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":112,"description":113,"layout":13,"_type":101,"_id":114,"_source":103,"_file":115,"_extension":105},"/design-system/develop/usage/nuxt","Nuxt","How to use Ripple components with Nuxt in a non-SDP context.","content:design-system:3.develop:4.usage:3.nuxt.md","design-system/3.develop/4.usage/3.nuxt.md",{"_path":117,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":118,"description":119,"layout":13,"_type":101,"_id":120,"_source":103,"_file":121,"_extension":105},"/design-system/develop/usage/css-only","Styles only","Using the design system styles without a front-end framework.","content:design-system:3.develop:4.usage:5.css-only.md","design-system/3.develop/4.usage/5.css-only.md",["ShallowRef",123],{},[125,130,372],{"title":126,"_path":127,"icon":128,"layout":129},"Ripple Design System","/","carbon:home","home",{"title":131,"_path":132,"children":133},"Design System","/design-system",[134,150,166,190,224],{"title":135,"_path":136,"children":137},"About","/design-system/about",[138,141,144,147],{"title":139,"_path":140,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":142,"_path":143,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":145,"_path":146,"layout":13},"Support","/design-system/about/getting-support",{"title":148,"_path":149,"layout":13},"Contributing","/design-system/about/contributing",{"title":151,"_path":152,"children":153},"Design","/design-system/design",[154,157,160,163],{"title":155,"_path":156,"layout":13},"Getting started","/design-system/design/getting-started",{"title":158,"_path":159,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":161,"_path":162,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":164,"_path":165,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":167,"_path":168,"children":169},"Develop","/design-system/develop",[170,172,174,177],{"title":155,"_path":171,"layout":13},"/design-system/develop/getting-started",{"title":148,"_path":173,"layout":13},"/design-system/develop/contributing",{"title":175,"_path":176,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":178,"_path":179,"children":180,"layout":13},"Usage","/design-system/develop/usage",[181,184,187,188,189],{"title":182,"_path":183,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":185,"_path":186,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":112,"_path":111,"layout":13},{"title":11,"_path":7,"layout":13},{"title":118,"_path":117,"layout":13},{"title":191,"_path":192,"children":193},"Styles","/design-system/styles",[194,197,200,203,206,209,212,215,218,221],{"title":195,"_path":196,"layout":13},"Colour","/design-system/styles/colour",{"title":198,"_path":199,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":201,"_path":202,"layout":13},"Grid","/design-system/styles/grid",{"title":204,"_path":205,"layout":13},"Icons","/design-system/styles/icons",{"title":207,"_path":208,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":210,"_path":211,"layout":13},"Layout","/design-system/styles/layout",{"title":213,"_path":214,"layout":13},"Logo","/design-system/styles/logo",{"title":216,"_path":217,"layout":13},"Motion","/design-system/styles/motion",{"title":219,"_path":220,"layout":13},"Spacing","/design-system/styles/spacing",{"title":222,"_path":223,"layout":13},"Typography","/design-system/styles/typography",{"title":225,"_path":226,"children":227},"Components","/design-system/components",[228,231,234,237,240,243,246,249,252,255,258,261,264,267,270,273,276,279,282,285,288,291,294,297,300,303,306,309,312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369],{"title":229,"_path":230,"layout":13},"Accordion","/design-system/components/accordion",{"title":232,"_path":233,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":235,"_path":236,"layout":13},"Alert","/design-system/components/alert",{"title":238,"_path":239,"layout":13},"Block quote","/design-system/components/block-quote",{"title":241,"_path":242,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":244,"_path":245,"layout":13},"Button","/design-system/components/button",{"title":247,"_path":248,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":250,"_path":251,"layout":13},"Callout","/design-system/components/callout",{"title":253,"_path":254,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":256,"_path":257,"layout":13},"Card","/design-system/components/card",{"title":259,"_path":260,"layout":13},"Carousel","/design-system/components/carousel",{"title":262,"_path":263,"layout":13},"Category grid","/design-system/components/category-grid",{"title":265,"_path":266,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":268,"_path":269,"layout":13},"Chip","/design-system/components/chip",{"title":271,"_path":272,"layout":13},"Contact us","/design-system/components/contact-us",{"title":274,"_path":275,"layout":13},"Date input","/design-system/components/date-input",{"title":277,"_path":278,"layout":13},"Detail list","/design-system/components/detail-list",{"title":280,"_path":281,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":283,"_path":284,"layout":13},"File","/design-system/components/file",{"title":286,"_path":287,"layout":13},"Footer","/design-system/components/footer",{"title":289,"_path":290,"layout":13},"Form","/design-system/components/form",{"title":292,"_path":293,"layout":13},"Form alert","/design-system/components/form-alert",{"title":295,"_path":296,"layout":13},"Header","/design-system/components/header",{"title":298,"_path":299,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":301,"_path":302,"layout":13},"Input field","/design-system/components/input-field",{"title":304,"_path":305,"layout":13},"Key dates","/design-system/components/key-dates",{"title":307,"_path":308,"layout":13},"Media","/design-system/components/media",{"title":310,"_path":311,"layout":13},"Media embed","/design-system/components/media-embed",{"title":313,"_path":314,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":316,"_path":317,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":319,"_path":320,"layout":13},"Option button","/design-system/components/option-button",{"title":322,"_path":323,"layout":13},"Page action","/design-system/components/page-action",{"title":325,"_path":326,"layout":13},"Pagination","/design-system/components/pagination",{"title":328,"_path":329,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":331,"_path":332,"layout":13},"Profile","/design-system/components/profile",{"title":334,"_path":335,"layout":13},"Radio button","/design-system/components/radio-button",{"title":337,"_path":338,"layout":13},"Related links","/design-system/components/related-links",{"title":340,"_path":341,"layout":13},"Results listing","/design-system/components/results-listing",{"title":343,"_path":344,"layout":13},"Search bar","/design-system/components/search-bar",{"title":346,"_path":347,"layout":13},"Skip link","/design-system/components/skip-link",{"title":349,"_path":350,"layout":13},"Social share","/design-system/components/social-share",{"title":352,"_path":353,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":355,"_path":356,"layout":13},"Table","/design-system/components/table",{"title":358,"_path":359,"layout":13},"Tabs","/design-system/components/tabs",{"title":361,"_path":362,"layout":13},"Tag","/design-system/components/tag",{"title":364,"_path":365,"layout":13},"Text area","/design-system/components/text-area",{"title":367,"_path":368,"layout":13},"Timeline","/design-system/components/timeline",{"title":370,"_path":371,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":373,"_path":374,"children":375,"layout":13},"Ripple Framework","/framework",[376,377,395,417],{"title":373,"_path":374,"layout":13},{"title":378,"_path":379,"children":380},"Key Concepts","/framework/key-concepts",[381,383,386,389,392],{"title":112,"_path":382,"layout":13},"/framework/key-concepts/nuxt",{"title":384,"_path":385,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":387,"_path":388,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":390,"_path":391,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":393,"_path":394,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":396,"_path":397,"children":398},"Guides","/framework/guides",[399,402,405,408,411,414],{"title":400,"_path":401,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":403,"_path":404,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":406,"_path":407,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":409,"_path":410,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":412,"_path":413,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":415,"_path":416,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":418,"_path":419,"layout":13},"Core modules","/framework/core-modules",["Reactive",421],["Set"],["Reactive",423],{"module-navigation":424},null,true,1714695151765]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+<a href="https://www.webcomponents.org/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.webcomponents.org/<!--]--><!--]--><!----><!--]--></a><!--]--></p><!--]--></blockquote><p><!--[-->Ripple exports a limited set of components as standard browser native web components. The advantage of using Web components is they can be dropped straight into conventional webpages and any CMS without a javascript build pipeline, such as Squiz Matrix and Salesforce.<!--]--></p><p><!--[-->Support for this output target is currently experimental, if you think you have a use case for using Web components in your project please add a comment <a href="https://github.com/dpc-sdp/ripple-framework/discussions/658" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->here<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><p><!--[-->As with the other methods, set up <a href="access-to-github-packages" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->access to Github Packages<!--]--><!--]--><!----><!--]--></a> and then install Ripple UI in your project:<!--]--></p><p><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->npm install @dpc-sdp/ripple-ui-core --save<!--]--></code><!--]--></p><p><!--[-->A basic example of how to use the web component exports can be found under <a href="https://github.com/dpc-sdp/ripple-framework/tree/develop/examples/webcomponents" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->examples/webcomponents<!--]--><!--]--><!----><!--]--></a> in the ripple-framework monorepo.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/3.develop/4.usage/4.webcomponents.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/develop/usage/webcomponents/_payload.json">[{"state":1,"once":420,"_errors":422,"serverRendered":425,"path":7,"prerenderedAt":426},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":106,"$sdd-globals":122,"$sdd-navigation":124},["ShallowRef",4],["ShallowReactive",5],{"/design-system/develop/usage/webcomponents":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":101,"_id":102,"_source":103,"_file":104,"_extension":105},"/design-system/develop/usage/webcomponents","usage",false,"","Web components","How to use the web component exports with other front-end systems.","page",{"type":15,"children":16,"toc":98},"root",[17,42,47,61,74,84],{"type":18,"tag":19,"props":20,"children":21},"element","blockquote",{},[22,29],{"type":18,"tag":23,"props":24,"children":25},"p",{},[26],{"type":27,"value":28},"text","Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.",{"type":18,"tag":23,"props":30,"children":31},{},[32,34],{"type":27,"value":33},"Web components are based on existing web standards. Features to support web components are currently being added to the HTML and DOM specs, letting web developers easily extend HTML with new elements with encapsulated styling and custom behavior.\n",{"type":18,"tag":35,"props":36,"children":40},"a",{"href":37,"rel":38},"https://www.webcomponents.org/",[39],"nofollow",[41],{"type":27,"value":37},{"type":18,"tag":23,"props":43,"children":44},{},[45],{"type":27,"value":46},"Ripple exports a limited set of components as standard browser native web components. The advantage of using Web components is they can be dropped straight into conventional webpages and any CMS without a javascript build pipeline, such as Squiz Matrix and Salesforce.",{"type":18,"tag":23,"props":48,"children":49},{},[50,52,59],{"type":27,"value":51},"Support for this output target is currently experimental, if you think you have a use case for using Web components in your project please add a comment ",{"type":18,"tag":35,"props":53,"children":56},{"href":54,"rel":55},"https://github.com/dpc-sdp/ripple-framework/discussions/658",[39],[57],{"type":27,"value":58},"here",{"type":27,"value":60},".",{"type":18,"tag":23,"props":62,"children":63},{},[64,66,72],{"type":27,"value":65},"As with the other methods, set up ",{"type":18,"tag":35,"props":67,"children":69},{"href":68},"access-to-github-packages",[70],{"type":27,"value":71},"access to Github Packages",{"type":27,"value":73}," and then install Ripple UI in your project:",{"type":18,"tag":23,"props":75,"children":76},{},[77],{"type":18,"tag":78,"props":79,"children":81},"code",{"className":80},[],[82],{"type":27,"value":83},"npm install @dpc-sdp/ripple-ui-core --save",{"type":18,"tag":23,"props":85,"children":86},{},[87,89,96],{"type":27,"value":88},"A basic example of how to use the web component exports can be found under ",{"type":18,"tag":35,"props":90,"children":93},{"href":91,"rel":92},"https://github.com/dpc-sdp/ripple-framework/tree/develop/examples/webcomponents",[39],[94],{"type":27,"value":95},"examples/webcomponents",{"type":27,"value":97}," in the ripple-framework monorepo.",{"title":10,"searchDepth":99,"depth":99,"links":100},2,[],"markdown","content:design-system:3.develop:4.usage:4.webcomponents.md","content","design-system/3.develop/4.usage/4.webcomponents.md","md",["ShallowRef",107],["ShallowReactive",108],{"/design-system/develop/usage/webcomponents":109},[110,116],{"_path":111,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":112,"description":113,"layout":13,"_type":101,"_id":114,"_source":103,"_file":115,"_extension":105},"/design-system/develop/usage/nuxt","Nuxt","How to use Ripple components with Nuxt in a non-SDP context.","content:design-system:3.develop:4.usage:3.nuxt.md","design-system/3.develop/4.usage/3.nuxt.md",{"_path":117,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":118,"description":119,"layout":13,"_type":101,"_id":120,"_source":103,"_file":121,"_extension":105},"/design-system/develop/usage/css-only","Styles only","Using the design system styles without a front-end framework.","content:design-system:3.develop:4.usage:5.css-only.md","design-system/3.develop/4.usage/5.css-only.md",["ShallowRef",123],{},[125,130,372],{"title":126,"_path":127,"icon":128,"layout":129},"Ripple Design System","/","carbon:home","home",{"title":131,"_path":132,"children":133},"Design System","/design-system",[134,150,166,190,224],{"title":135,"_path":136,"children":137},"About","/design-system/about",[138,141,144,147],{"title":139,"_path":140,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":142,"_path":143,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":145,"_path":146,"layout":13},"Support","/design-system/about/getting-support",{"title":148,"_path":149,"layout":13},"Contributing","/design-system/about/contributing",{"title":151,"_path":152,"children":153},"Design","/design-system/design",[154,157,160,163],{"title":155,"_path":156,"layout":13},"Getting started","/design-system/design/getting-started",{"title":158,"_path":159,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":161,"_path":162,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":164,"_path":165,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":167,"_path":168,"children":169},"Develop","/design-system/develop",[170,172,174,177],{"title":155,"_path":171,"layout":13},"/design-system/develop/getting-started",{"title":148,"_path":173,"layout":13},"/design-system/develop/contributing",{"title":175,"_path":176,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":178,"_path":179,"children":180,"layout":13},"Usage","/design-system/develop/usage",[181,184,187,188,189],{"title":182,"_path":183,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":185,"_path":186,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":112,"_path":111,"layout":13},{"title":11,"_path":7,"layout":13},{"title":118,"_path":117,"layout":13},{"title":191,"_path":192,"children":193},"Styles","/design-system/styles",[194,197,200,203,206,209,212,215,218,221],{"title":195,"_path":196,"layout":13},"Colour","/design-system/styles/colour",{"title":198,"_path":199,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":201,"_path":202,"layout":13},"Grid","/design-system/styles/grid",{"title":204,"_path":205,"layout":13},"Icons","/design-system/styles/icons",{"title":207,"_path":208,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":210,"_path":211,"layout":13},"Layout","/design-system/styles/layout",{"title":213,"_path":214,"layout":13},"Logo","/design-system/styles/logo",{"title":216,"_path":217,"layout":13},"Motion","/design-system/styles/motion",{"title":219,"_path":220,"layout":13},"Spacing","/design-system/styles/spacing",{"title":222,"_path":223,"layout":13},"Typography","/design-system/styles/typography",{"title":225,"_path":226,"children":227},"Components","/design-system/components",[228,231,234,237,240,243,246,249,252,255,258,261,264,267,270,273,276,279,282,285,288,291,294,297,300,303,306,309,312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369],{"title":229,"_path":230,"layout":13},"Accordion","/design-system/components/accordion",{"title":232,"_path":233,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":235,"_path":236,"layout":13},"Alert","/design-system/components/alert",{"title":238,"_path":239,"layout":13},"Block quote","/design-system/components/block-quote",{"title":241,"_path":242,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":244,"_path":245,"layout":13},"Button","/design-system/components/button",{"title":247,"_path":248,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":250,"_path":251,"layout":13},"Callout","/design-system/components/callout",{"title":253,"_path":254,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":256,"_path":257,"layout":13},"Card","/design-system/components/card",{"title":259,"_path":260,"layout":13},"Carousel","/design-system/components/carousel",{"title":262,"_path":263,"layout":13},"Category grid","/design-system/components/category-grid",{"title":265,"_path":266,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":268,"_path":269,"layout":13},"Chip","/design-system/components/chip",{"title":271,"_path":272,"layout":13},"Contact us","/design-system/components/contact-us",{"title":274,"_path":275,"layout":13},"Date input","/design-system/components/date-input",{"title":277,"_path":278,"layout":13},"Detail list","/design-system/components/detail-list",{"title":280,"_path":281,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":283,"_path":284,"layout":13},"File","/design-system/components/file",{"title":286,"_path":287,"layout":13},"Footer","/design-system/components/footer",{"title":289,"_path":290,"layout":13},"Form","/design-system/components/form",{"title":292,"_path":293,"layout":13},"Form alert","/design-system/components/form-alert",{"title":295,"_path":296,"layout":13},"Header","/design-system/components/header",{"title":298,"_path":299,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":301,"_path":302,"layout":13},"Input field","/design-system/components/input-field",{"title":304,"_path":305,"layout":13},"Key dates","/design-system/components/key-dates",{"title":307,"_path":308,"layout":13},"Media","/design-system/components/media",{"title":310,"_path":311,"layout":13},"Media embed","/design-system/components/media-embed",{"title":313,"_path":314,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":316,"_path":317,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":319,"_path":320,"layout":13},"Option button","/design-system/components/option-button",{"title":322,"_path":323,"layout":13},"Page action","/design-system/components/page-action",{"title":325,"_path":326,"layout":13},"Pagination","/design-system/components/pagination",{"title":328,"_path":329,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":331,"_path":332,"layout":13},"Profile","/design-system/components/profile",{"title":334,"_path":335,"layout":13},"Radio button","/design-system/components/radio-button",{"title":337,"_path":338,"layout":13},"Related links","/design-system/components/related-links",{"title":340,"_path":341,"layout":13},"Results listing","/design-system/components/results-listing",{"title":343,"_path":344,"layout":13},"Search bar","/design-system/components/search-bar",{"title":346,"_path":347,"layout":13},"Skip link","/design-system/components/skip-link",{"title":349,"_path":350,"layout":13},"Social share","/design-system/components/social-share",{"title":352,"_path":353,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":355,"_path":356,"layout":13},"Table","/design-system/components/table",{"title":358,"_path":359,"layout":13},"Tabs","/design-system/components/tabs",{"title":361,"_path":362,"layout":13},"Tag","/design-system/components/tag",{"title":364,"_path":365,"layout":13},"Text area","/design-system/components/text-area",{"title":367,"_path":368,"layout":13},"Timeline","/design-system/components/timeline",{"title":370,"_path":371,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":373,"_path":374,"children":375,"layout":13},"Ripple Framework","/framework",[376,377,395,417],{"title":373,"_path":374,"layout":13},{"title":378,"_path":379,"children":380},"Key Concepts","/framework/key-concepts",[381,383,386,389,392],{"title":112,"_path":382,"layout":13},"/framework/key-concepts/nuxt",{"title":384,"_path":385,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":387,"_path":388,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":390,"_path":391,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":393,"_path":394,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":396,"_path":397,"children":398},"Guides","/framework/guides",[399,402,405,408,411,414],{"title":400,"_path":401,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":403,"_path":404,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":406,"_path":407,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":409,"_path":410,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":412,"_path":413,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":415,"_path":416,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":418,"_path":419,"layout":13},"Core modules","/framework/core-modules",["Reactive",421],["Set"],["Reactive",423],{"module-navigation":424},null,true,1714695649996]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/styles/colour/_payload.json b/design-system/styles/colour/_payload.json
index 965afa63ff..074739955d 100644
--- a/design-system/styles/colour/_payload.json
+++ b/design-system/styles/colour/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":70,"items":71},"/design-system/styles","Styles",true,[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":70,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695151920]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":70,"items":71},"/design-system/styles","Styles",true,[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":70,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695650168]
\ No newline at end of file
diff --git a/design-system/styles/colour/index.html b/design-system/styles/colour/index.html
index 7d133c97a7..43ee5809a1 100644
--- a/design-system/styles/colour/index.html
+++ b/design-system/styles/colour/index.html
@@ -27,66 +27,66 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.lp_k9Hpd.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.F9NVvvm4.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsColourTable.N8n5f2_3.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/Swatch.pCyR0PCQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.Czpq-HHw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.GmB4B_NE.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsColourTable.LKiaprrs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/Swatch.FPuuW78y.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/colour.GNNGiHzW.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsGradientTable.j5XMaAB_.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsGradientTable.eMExAp1K.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -98,8 +98,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Colour</h1><p class="rpl-type-p-large" data-v-3163c6df>Colour plays an important role in creating a consistent and strong visual digital products and services.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->You want users to recognise your brand. A well-designed colour palette can help you create a consistent look and feel.<!--]--></p><p><!--[-->The default colours, made up of two blues, reflect vic.gov.au branding. This strengthens the association with the Victorian Government.<!--]--></p><p><!--[-->The design system contains a colour framework. You can change it if your site requires department or entity branding.<!--]--></p><p><!--[-->We&#39;ve designed and tested colour pairings that already pass accessibility contrast ratios. However, we recommend you perform your own checks to ensure you&#39;re meeting WCAG requirements.<!--]--></p><p><!--[-->If you change your core brand colours, your styles and components will re-theme automatically using the design system&#39;s colour framework.<!--]--></p><p><!--[-->For more guidance on theming options, see <a href="/design-system/design/theming-guidance-for-designers/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[--><strong><!--[-->You don’t need to use hex colours in code.<!--]--></strong><!--]--></p><p><!--[-->By using CSS variables, any branding or theming changes will automatically reflect in your product. See CSS variables below, or see the theming documentation.<!--]--></p><!--]--></blockquote><h2 class="rpl-type-h2 docs-h2" id="core-palette" data-v-fff5b905><a href="#core-palette" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Core palette<!--]--></a></h2><p><!--[-->The core palette includes primary and secondary colours.<!--]--></p><ul><!--[--><li><!--[-->The ‘Primary’ colour is for key visual elements and components. They form the foundation of the colour palette.<!--]--></li><li><!--[-->The ‘Accent’ colour is an accent to help highlight key components or pieces of information. It&#39;s used in combination with the primary colour to create a more dynamic and engaging visual experience.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="primary" data-v-ea525968><a href="#primary" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Primary<!--]--></a></h2><div class="rpl-table rpl-table--no-stripes" data-v-b048886a><div class="rpl-table__scroll-container" tabindex="0" data-v-b048886a><table class="w-full" data-v-b048886a><thead data-v-b048886a><tr data-v-b048886a><th data-v-b048886a>Swatch</th><th data-v-b048886a>Colour</th><th data-v-b048886a>Value</th><th data-v-b048886a>CSS Variable</th></tr></thead><tbody data-v-b048886a><!--[--><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-primary);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> primary  </td><td data-v-b048886a>#0052C2</td><td data-v-b048886a>rpl-clr-primary</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-primary-alpha);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> primary alpha</td><td data-v-b048886a>rgb(0 82 194 / 50%)</td><td data-v-b048886a>rpl-clr-primary-alpha</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-primary-alt);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> primary alt</td><td data-v-b048886a>#003174</td><td data-v-b048886a>rpl-clr-primary-alt</td></tr><!--]--></tbody></table></div></div><h2 class="rpl-type-h3 docs-h3" id="accent" data-v-ea525968><a href="#accent" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Accent<!--]--></a></h2><div class="rpl-table rpl-table--no-stripes" data-v-b048886a><div class="rpl-table__scroll-container" tabindex="0" data-v-b048886a><table class="w-full" data-v-b048886a><thead data-v-b048886a><tr data-v-b048886a><th data-v-b048886a>Swatch</th><th data-v-b048886a>Colour</th><th data-v-b048886a>Value</th><th data-v-b048886a>CSS Variable</th></tr></thead><tbody data-v-b048886a><!--[--><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-accent);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> accent  </td><td data-v-b048886a>#0095EC</td><td data-v-b048886a>rpl-clr-accent</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-accent-alt);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> accent alt</td><td data-v-b048886a>#E6F5FD</td><td data-v-b048886a>rpl-clr-accent-alt</td></tr><!--]--></tbody></table></div></div><h2 class="rpl-type-h2 docs-h2" id="neutral-palette" data-v-fff5b905><a href="#neutral-palette" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Neutral palette<!--]--></a></h2><p><!--[-->The Neutral palette is on a colour scale of white to black.<!--]--></p><p><!--[-->The 10 steps represent this scale based on our requirements.<!--]--></p><p><!--[-->Neutral colours are consistent throughout the design system. They are for:<!--]--></p><ul><!--[--><li><!--[-->text colours<!--]--></li><li><!--[-->borders<!--]--></li><li><!--[-->other elements, like a neutral background.<!--]--></li><!--]--></ul><div class="rpl-table rpl-table--no-stripes" data-v-b048886a><div class="rpl-table__scroll-container" tabindex="0" data-v-b048886a><table class="w-full" data-v-b048886a><thead data-v-b048886a><tr data-v-b048886a><th data-v-b048886a>Swatch</th><th data-v-b048886a>Colour</th><th data-v-b048886a>Value</th><th data-v-b048886a>CSS Variable</th></tr></thead><tbody data-v-b048886a><!--[--><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-neutral-0);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> neutral 0</td><td data-v-b048886a>#FFFFFF</td><td data-v-b048886a>rpl-clr-neutral-0</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-neutral-100);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> neutral 100</td><td data-v-b048886a>#F5F5F5</td><td data-v-b048886a>rpl-clr-neutral-100</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-neutral-200);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> neutral 200</td><td data-v-b048886a>#E6E6E6</td><td data-v-b048886a>rpl-clr-neutral-200</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-neutral-300);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> neutral 300</td><td data-v-b048886a>#CCCCCC</td><td data-v-b048886a>rpl-clr-neutral-300</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-neutral-400);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> neutral 400</td><td data-v-b048886a>#999999</td><td data-v-b048886a>rpl-clr-neutral-400</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-neutral-500);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> neutral 500</td><td data-v-b048886a>#7F7F7F</td><td data-v-b048886a>rpl-clr-neutral-500</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-neutral-600);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> neutral 600</td><td data-v-b048886a>#666666</td><td data-v-b048886a>rpl-clr-neutral-600</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-neutral-700);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> neutral 700</td><td data-v-b048886a>#333333</td><td data-v-b048886a>rpl-clr-neutral-700</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-neutral-800);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> neutral 800</td><td data-v-b048886a>#1A1A1A</td><td data-v-b048886a>rpl-clr-neutral-800</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-neutral-900);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> neutral 900</td><td data-v-b048886a>#0D0D0D</td><td data-v-b048886a>rpl-clr-neutral-900</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-neutral-alpha-0);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> neutral alpha 0</td><td data-v-b048886a>rgb(255 255 255 / 75%)</td><td data-v-b048886a>rpl-clr-neutral-alpha-0</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-neutral-alpha-700);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> neutral alpha 700</td><td data-v-b048886a>rgb(51 51 51 / 90%)</td><td data-v-b048886a>rpl-clr-neutral-alpha-700</td></tr><!--]--></tbody></table></div></div><div class="rpl-table rpl-table--no-stripes" data-v-b048886a><div class="rpl-table__scroll-container" tabindex="0" data-v-b048886a><table class="w-full" data-v-b048886a><thead data-v-b048886a><tr data-v-b048886a><th data-v-b048886a>Swatch</th><th data-v-b048886a>Colour</th><th data-v-b048886a>Value</th><th data-v-b048886a>CSS Variable</th></tr></thead><tbody data-v-b048886a><!--[--><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-light);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> light</td><td data-v-b048886a>#FFFFFF</td><td data-v-b048886a>rpl-clr-light</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-dark);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> dark</td><td data-v-b048886a>#1A1A1A</td><td data-v-b048886a>rpl-clr-dark</td></tr><!--]--></tbody></table></div></div><h2 class="rpl-type-h2 docs-h2" id="typography-colours" data-v-fff5b905><a href="#typography-colours" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Typography colours<!--]--></a></h2><p><!--[-->Type colours have a ratio of at least 4.5:1 (or 3:1 for text larger than 18 point). This was selected to try and conform to the Web Content Accessibility Guidelines (WCAG 2.1).<!--]--></p><p><!--[-->Interaction colours are in addition to the core colour palette. This guarantees accessible text.<!--]--></p><div class="rpl-table rpl-table--no-stripes" data-v-b048886a><div class="rpl-table__scroll-container" tabindex="0" data-v-b048886a><table class="w-full" data-v-b048886a><thead data-v-b048886a><tr data-v-b048886a><th data-v-b048886a>Swatch</th><th data-v-b048886a>Colour</th><th data-v-b048886a>Value</th><th data-v-b048886a>CSS Variable</th></tr></thead><tbody data-v-b048886a><!--[--><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-type-default);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> type default</td><td data-v-b048886a>#1A1A1A</td><td data-v-b048886a>rpl-clr-type-default</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-type-light);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> type light</td><td data-v-b048886a>#FFFFFF</td><td data-v-b048886a>rpl-clr-type-light</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-type-primary-contrast);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> type primary contrast</td><td data-v-b048886a>#FFFFFF</td><td data-v-b048886a>rpl-clr-type-primary-contrast</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-type-accent-contrast);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> type accent contrast</td><td data-v-b048886a>#FFFFFF</td><td data-v-b048886a>rpl-clr-type-accent-contrast</td></tr><!--]--></tbody></table></div></div><div class="rpl-table rpl-table--no-stripes" data-v-b048886a><div class="rpl-table__scroll-container" tabindex="0" data-v-b048886a><table class="w-full" data-v-b048886a><thead data-v-b048886a><tr data-v-b048886a><th data-v-b048886a>Swatch</th><th data-v-b048886a>Colour</th><th data-v-b048886a>Value</th><th data-v-b048886a>CSS Variable</th></tr></thead><tbody data-v-b048886a><!--[--><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-link);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> link</td><td data-v-b048886a>#0052C2</td><td data-v-b048886a>rpl-clr-link</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-link-visited);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> link visited</td><td data-v-b048886a>#9F46B1</td><td data-v-b048886a>rpl-clr-link-visited</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-focus);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> focus</td><td data-v-b048886a>#FF9E1B</td><td data-v-b048886a>rpl-clr-focus</td></tr><!--]--></tbody></table></div></div><h2 class="rpl-type-h2 docs-h2" id="gradients" data-v-fff5b905><a href="#gradients" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Gradients<!--]--></a></h2><p><!--[-->Gradients bring attention to components or information. Only use them on occasion.<!--]--></p><p><!--[-->All gradients should appear from dark to light in their usage.<!--]--></p><div class="rpl-table rpl-table--no-stripes" data-v-8e2514b8><div class="rpl-table__scroll-container" tabindex="0" data-v-8e2514b8><table class="w-full" data-v-8e2514b8><thead data-v-8e2514b8><tr data-v-8e2514b8><th data-v-8e2514b8>Swatch</th><th data-v-8e2514b8>Colour</th><th data-v-8e2514b8>CSS Variable</th></tr></thead><tbody data-v-8e2514b8><!--[--><tr data-v-8e2514b8><td data-v-8e2514b8><div class="docs-colour-swatch" style="background:var(--rpl-clr-gradient-horizontal);" data-v-8e2514b8 data-v-a0076e87></div></td><td data-v-8e2514b8> gradient horizontal</td><td data-v-8e2514b8>rpl-clr-gradient-horizontal</td></tr><tr data-v-8e2514b8><td data-v-8e2514b8><div class="docs-colour-swatch" style="background:var(--rpl-clr-gradient-vertical);" data-v-8e2514b8 data-v-a0076e87></div></td><td data-v-8e2514b8> gradient vertical</td><td data-v-8e2514b8>rpl-clr-gradient-vertical</td></tr><!--]--></tbody><thead data-v-8e2514b8><tr data-v-8e2514b8><th data-v-8e2514b8></th><th data-v-8e2514b8>Value</th><th data-v-8e2514b8>Position</th></tr></thead><tbody data-v-8e2514b8><!--[--><tr data-v-8e2514b8><td data-v-8e2514b8><div class="docs-colour-swatch" style="background:#0052C2;" data-v-8e2514b8 data-v-a0076e87></div></td><td data-v-8e2514b8>#0052C2</td><td data-v-8e2514b8>0%</td></tr><tr data-v-8e2514b8><td data-v-8e2514b8><div class="docs-colour-swatch" style="background:#825DFF;" data-v-8e2514b8 data-v-a0076e87></div></td><td data-v-8e2514b8>#825DFF</td><td data-v-8e2514b8>12%</td></tr><tr data-v-8e2514b8><td data-v-8e2514b8><div class="docs-colour-swatch" style="background:#EF4A81;" data-v-8e2514b8 data-v-a0076e87></div></td><td data-v-8e2514b8>#EF4A81</td><td data-v-8e2514b8>24%</td></tr><tr data-v-8e2514b8><td data-v-8e2514b8><div class="docs-colour-swatch" style="background:#E57200;" data-v-8e2514b8 data-v-a0076e87></div></td><td data-v-8e2514b8>#E57200</td><td data-v-8e2514b8>36%</td></tr><tr data-v-8e2514b8><td data-v-8e2514b8><div class="docs-colour-swatch" style="background:#FFC166;" data-v-8e2514b8 data-v-a0076e87></div></td><td data-v-8e2514b8>#FFC166</td><td data-v-8e2514b8>52%</td></tr><tr data-v-8e2514b8><td data-v-8e2514b8><div class="docs-colour-swatch" style="background:#F9E062;" data-v-8e2514b8 data-v-a0076e87></div></td><td data-v-8e2514b8>#F9E062</td><td data-v-8e2514b8>80%</td></tr><!--]--></tbody></table></div></div><h2 class="rpl-type-h2 docs-h2" id="sematics" data-v-fff5b905><a href="#sematics" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Sematics<!--]--></a></h2><p><!--[-->Semantic colours add meaning to element. They provide contextual or transactional feedback to the user. We have four semantic uses:<!--]--></p><ul><!--[--><li><!--[-->Information<!--]--></li><li><!--[-->Success<!--]--></li><li><!--[-->Warning<!--]--></li><li><!--[-->Error<!--]--></li><!--]--></ul><p><!--[-->Avoid using them outside of their semantic meaning.<!--]--></p><p><!--[-->These colours help signal to users the meaning of some components. For example, for alerts or error messages.<!--]--></p><div class="rpl-table rpl-table--no-stripes" data-v-b048886a><div class="rpl-table__scroll-container" tabindex="0" data-v-b048886a><table class="w-full" data-v-b048886a><thead data-v-b048886a><tr data-v-b048886a><th data-v-b048886a>Swatch</th><th data-v-b048886a>Colour</th><th data-v-b048886a>Value</th><th data-v-b048886a>CSS Variable</th></tr></thead><tbody data-v-b048886a><!--[--><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-information);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> information  </td><td data-v-b048886a>#005BA5</td><td data-v-b048886a>rpl-clr-information</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-information-light);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> information light</td><td data-v-b048886a>#E6EFF6</td><td data-v-b048886a>rpl-clr-information-light</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-information-dark);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> information dark</td><td data-v-b048886a>#004984</td><td data-v-b048886a>rpl-clr-information-dark</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-success);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> success  </td><td data-v-b048886a>#007D85</td><td data-v-b048886a>rpl-clr-success</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-success-light);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> success light</td><td data-v-b048886a>#E6F2F3</td><td data-v-b048886a>rpl-clr-success-light</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-success-dark);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> success dark</td><td data-v-b048886a>#00646A</td><td data-v-b048886a>rpl-clr-success-dark</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-warning);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> warning  </td><td data-v-b048886a>#B75B00</td><td data-v-b048886a>rpl-clr-warning</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-warning-light);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> warning light</td><td data-v-b048886a>#F8EFE6</td><td data-v-b048886a>rpl-clr-warning-light</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-warning-dark);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> warning dark</td><td data-v-b048886a>#924900</td><td data-v-b048886a>rpl-clr-warning-dark</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-error);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> error  </td><td data-v-b048886a>#AA0028</td><td data-v-b048886a>rpl-clr-error</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-error-light);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> error light</td><td data-v-b048886a>#F7E6EA</td><td data-v-b048886a>rpl-clr-error-light</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-error-dark);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> error dark</td><td data-v-b048886a>#880020</td><td data-v-b048886a>rpl-clr-error-dark</td></tr><!--]--></tbody></table></div></div><h2 class="rpl-type-h2 docs-h2" id="focus" data-v-fff5b905><a href="#focus" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Focus<!--]--></a></h2><p><!--[-->See <a href="/design-system/styles/focus-state/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->focus state<!--]--><!--]--><!----><!--]--></a> for guidance.<!--]--></p><div class="rpl-table rpl-table--no-stripes" data-v-b048886a><div class="rpl-table__scroll-container" tabindex="0" data-v-b048886a><table class="w-full" data-v-b048886a><thead data-v-b048886a><tr data-v-b048886a><th data-v-b048886a>Swatch</th><th data-v-b048886a>Colour</th><th data-v-b048886a>Value</th><th data-v-b048886a>CSS Variable</th></tr></thead><tbody data-v-b048886a><!--[--><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-focus);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> focus</td><td data-v-b048886a>#FF9E1B</td><td data-v-b048886a>rpl-clr-focus</td></tr><!--]--></tbody></table></div></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->To create your own theme, see theming guidance for designers or developers.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/4.styles/colour.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/styles/colour/_payload.json">[{"state":1,"once":646,"_errors":648,"serverRendered":651,"path":7,"prerenderedAt":652},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":331,"$sdd-globals":348,"$sdd-navigation":350},["ShallowRef",4],["ShallowReactive",5],{"/design-system/styles/colour":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":326,"_id":327,"_source":328,"_file":329,"_extension":330},"/design-system/styles/colour","styles",false,"","Colour","Colour plays an important role in creating a consistent and strong visual digital products and services.","page","Core",{"type":16,"children":17,"toc":312},"root",[18,26,31,36,41,46,68,86,93,98,113,120,125,131,135,141,146,151,156,174,178,182,188,193,198,202,206,212,217,222,226,232,237,260,265,270,274,280,293,297,301,307],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","You want users to recognise your brand. A well-designed colour palette can help you create a consistent look and feel.",{"type":19,"tag":20,"props":27,"children":28},{},[29],{"type":24,"value":30},"The default colours, made up of two blues, reflect vic.gov.au branding. This strengthens the association with the Victorian Government.",{"type":19,"tag":20,"props":32,"children":33},{},[34],{"type":24,"value":35},"The design system contains a colour framework. You can change it if your site requires department or entity branding.",{"type":19,"tag":20,"props":37,"children":38},{},[39],{"type":24,"value":40},"We've designed and tested colour pairings that already pass accessibility contrast ratios. However, we recommend you perform your own checks to ensure you're meeting WCAG requirements.",{"type":19,"tag":20,"props":42,"children":43},{},[44],{"type":24,"value":45},"If you change your core brand colours, your styles and components will re-theme automatically using the design system's colour framework.",{"type":19,"tag":20,"props":47,"children":48},{},[49,51,58,60,66],{"type":24,"value":50},"For more guidance on theming options, see ",{"type":19,"tag":52,"props":53,"children":55},"a",{"href":54},"/design-system/design/theming-guidance-for-designers/",[56],{"type":24,"value":57},"theming guidance for designers",{"type":24,"value":59}," or ",{"type":19,"tag":52,"props":61,"children":63},{"href":62},"/design-system/develop/theming/",[64],{"type":24,"value":65},"theming guidance for developers",{"type":24,"value":67},".",{"type":19,"tag":69,"props":70,"children":71},"blockquote",{},[72,81],{"type":19,"tag":20,"props":73,"children":74},{},[75],{"type":19,"tag":76,"props":77,"children":78},"strong",{},[79],{"type":24,"value":80},"You don’t need to use hex colours in code.",{"type":19,"tag":20,"props":82,"children":83},{},[84],{"type":24,"value":85},"By using CSS variables, any branding or theming changes will automatically reflect in your product. See CSS variables below, or see the theming documentation.",{"type":19,"tag":87,"props":88,"children":90},"h2",{"id":89},"core-palette",[91],{"type":24,"value":92},"Core palette",{"type":19,"tag":20,"props":94,"children":95},{},[96],{"type":24,"value":97},"The core palette includes primary and secondary colours.",{"type":19,"tag":99,"props":100,"children":101},"ul",{},[102,108],{"type":19,"tag":103,"props":104,"children":105},"li",{},[106],{"type":24,"value":107},"The ‘Primary’ colour is for key visual elements and components. They form the foundation of the colour palette.",{"type":19,"tag":103,"props":109,"children":110},{},[111],{"type":24,"value":112},"The ‘Accent’ colour is an accent to help highlight key components or pieces of information. It's used in combination with the primary colour to create a more dynamic and engaging visual experience.",{"type":19,"tag":114,"props":115,"children":117},"h3",{"id":116},"primary",[118],{"type":24,"value":119},"Primary",{"type":19,"tag":121,"props":122,"children":124},"docs-colour-table",{":colours":123},"[\"clr.primary\"]",[],{"type":19,"tag":114,"props":126,"children":128},{"id":127},"accent",[129],{"type":24,"value":130},"Accent",{"type":19,"tag":121,"props":132,"children":134},{":colours":133},"[\"clr.accent\"]",[],{"type":19,"tag":87,"props":136,"children":138},{"id":137},"neutral-palette",[139],{"type":24,"value":140},"Neutral palette",{"type":19,"tag":20,"props":142,"children":143},{},[144],{"type":24,"value":145},"The Neutral palette is on a colour scale of white to black.",{"type":19,"tag":20,"props":147,"children":148},{},[149],{"type":24,"value":150},"The 10 steps represent this scale based on our requirements.",{"type":19,"tag":20,"props":152,"children":153},{},[154],{"type":24,"value":155},"Neutral colours are consistent throughout the design system. They are for:",{"type":19,"tag":99,"props":157,"children":158},{},[159,164,169],{"type":19,"tag":103,"props":160,"children":161},{},[162],{"type":24,"value":163},"text colours",{"type":19,"tag":103,"props":165,"children":166},{},[167],{"type":24,"value":168},"borders",{"type":19,"tag":103,"props":170,"children":171},{},[172],{"type":24,"value":173},"other elements, like a neutral background.",{"type":19,"tag":121,"props":175,"children":177},{":colours":176},"[\"clr.neutral\"]",[],{"type":19,"tag":121,"props":179,"children":181},{":colours":180},"[\"clr.light\",\"clr.dark\"]",[],{"type":19,"tag":87,"props":183,"children":185},{"id":184},"typography-colours",[186],{"type":24,"value":187},"Typography colours",{"type":19,"tag":20,"props":189,"children":190},{},[191],{"type":24,"value":192},"Type colours have a ratio of at least 4.5:1 (or 3:1 for text larger than 18 point). This was selected to try and conform to the Web Content Accessibility Guidelines (WCAG 2.1).",{"type":19,"tag":20,"props":194,"children":195},{},[196],{"type":24,"value":197},"Interaction colours are in addition to the core colour palette. This guarantees accessible text.",{"type":19,"tag":121,"props":199,"children":201},{":colours":200},"[\"clr.type.default\",\"clr.type.light\",\"clr.type.primary.contrast\",\"clr.type.accent.contrast\"]",[],{"type":19,"tag":121,"props":203,"children":205},{":colours":204},"[\"clr.link\",\"clr.link-visited\",\"clr.focus\"]",[],{"type":19,"tag":87,"props":207,"children":209},{"id":208},"gradients",[210],{"type":24,"value":211},"Gradients",{"type":19,"tag":20,"props":213,"children":214},{},[215],{"type":24,"value":216},"Gradients bring attention to components or information. Only use them on occasion.",{"type":19,"tag":20,"props":218,"children":219},{},[220],{"type":24,"value":221},"All gradients should appear from dark to light in their usage.",{"type":19,"tag":223,"props":224,"children":225},"docs-gradient-table",{},[],{"type":19,"tag":87,"props":227,"children":229},{"id":228},"sematics",[230],{"type":24,"value":231},"Sematics",{"type":19,"tag":20,"props":233,"children":234},{},[235],{"type":24,"value":236},"Semantic colours add meaning to element. They provide contextual or transactional feedback to the user. We have four semantic uses:",{"type":19,"tag":99,"props":238,"children":239},{},[240,245,250,255],{"type":19,"tag":103,"props":241,"children":242},{},[243],{"type":24,"value":244},"Information",{"type":19,"tag":103,"props":246,"children":247},{},[248],{"type":24,"value":249},"Success",{"type":19,"tag":103,"props":251,"children":252},{},[253],{"type":24,"value":254},"Warning",{"type":19,"tag":103,"props":256,"children":257},{},[258],{"type":24,"value":259},"Error",{"type":19,"tag":20,"props":261,"children":262},{},[263],{"type":24,"value":264},"Avoid using them outside of their semantic meaning.",{"type":19,"tag":20,"props":266,"children":267},{},[268],{"type":24,"value":269},"These colours help signal to users the meaning of some components. For example, for alerts or error messages.",{"type":19,"tag":121,"props":271,"children":273},{":colours":272},"[\"clr.information\",\"clr.success\",\"clr.warning\",\"clr.error\"]",[],{"type":19,"tag":87,"props":275,"children":277},{"id":276},"focus",[278],{"type":24,"value":279},"Focus",{"type":19,"tag":20,"props":281,"children":282},{},[283,285,291],{"type":24,"value":284},"See ",{"type":19,"tag":52,"props":286,"children":288},{"href":287},"/design-system/styles/focus-state/",[289],{"type":24,"value":290},"focus state",{"type":24,"value":292}," for guidance.",{"type":19,"tag":121,"props":294,"children":296},{":colours":295},"[\"clr.focus\"]",[],{"type":19,"tag":298,"props":299,"children":300},"hr",{},[],{"type":19,"tag":87,"props":302,"children":304},{"id":303},"theming",[305],{"type":24,"value":306},"Theming",{"type":19,"tag":20,"props":308,"children":309},{},[310],{"type":24,"value":311},"To create your own theme, see theming guidance for designers or developers.",{"title":10,"searchDepth":313,"depth":313,"links":314},2,[315,320,321,322,323,324,325],{"id":89,"depth":313,"text":92,"children":316},[317,319],{"id":116,"depth":318,"text":119},3,{"id":127,"depth":318,"text":130},{"id":137,"depth":313,"text":140},{"id":184,"depth":313,"text":187},{"id":208,"depth":313,"text":211},{"id":228,"depth":313,"text":231},{"id":276,"depth":313,"text":279},{"id":303,"depth":313,"text":306},"markdown","content:design-system:4.styles:colour.md","content","design-system/4.styles/colour.md","md",["ShallowRef",332],["ShallowReactive",333],{"/design-system/styles/colour":334},[335,342],{"_path":336,"_dir":337,"_draft":9,"_partial":9,"_locale":10,"title":338,"description":339,"layout":13,"_type":326,"_id":340,"_source":328,"_file":341,"_extension":330},"/design-system/develop/usage/css-only","usage","Styles only","Using the design system styles without a front-end framework.","content:design-system:3.develop:4.usage:5.css-only.md","design-system/3.develop/4.usage/5.css-only.md",{"_path":343,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":344,"description":345,"layout":13,"label":14,"_type":326,"_id":346,"_source":328,"_file":347,"_extension":330},"/design-system/styles/focus-state","Focus state","Focus states show when a user has highlighted an element, using an input method such as a keyboard or voice.","content:design-system:4.styles:focus-state.md","design-system/4.styles/focus-state.md",["ShallowRef",349],{},[351,356,598],{"title":352,"_path":353,"icon":354,"layout":355},"Ripple Design System","/","carbon:home","home",{"title":357,"_path":358,"children":359},"Design System","/design-system",[360,376,392,420,450],{"title":361,"_path":362,"children":363},"About","/design-system/about",[364,367,370,373],{"title":365,"_path":366,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":368,"_path":369,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":371,"_path":372,"layout":13},"Support","/design-system/about/getting-support",{"title":374,"_path":375,"layout":13},"Contributing","/design-system/about/contributing",{"title":377,"_path":378,"children":379},"Design","/design-system/design",[380,383,386,389],{"title":381,"_path":382,"layout":13},"Getting started","/design-system/design/getting-started",{"title":384,"_path":385,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":387,"_path":388,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":390,"_path":391,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":393,"_path":394,"children":395},"Develop","/design-system/develop",[396,398,400,403],{"title":381,"_path":397,"layout":13},"/design-system/develop/getting-started",{"title":374,"_path":399,"layout":13},"/design-system/develop/contributing",{"title":401,"_path":402,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":404,"_path":405,"children":406,"layout":13},"Usage","/design-system/develop/usage",[407,410,413,416,419],{"title":408,"_path":409,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":411,"_path":412,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":414,"_path":415,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":417,"_path":418,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":338,"_path":336,"layout":13},{"title":421,"_path":422,"children":423},"Styles","/design-system/styles",[424,425,426,429,432,435,438,441,444,447],{"title":11,"_path":7,"layout":13},{"title":344,"_path":343,"layout":13},{"title":427,"_path":428,"layout":13},"Grid","/design-system/styles/grid",{"title":430,"_path":431,"layout":13},"Icons","/design-system/styles/icons",{"title":433,"_path":434,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":436,"_path":437,"layout":13},"Layout","/design-system/styles/layout",{"title":439,"_path":440,"layout":13},"Logo","/design-system/styles/logo",{"title":442,"_path":443,"layout":13},"Motion","/design-system/styles/motion",{"title":445,"_path":446,"layout":13},"Spacing","/design-system/styles/spacing",{"title":448,"_path":449,"layout":13},"Typography","/design-system/styles/typography",{"title":451,"_path":452,"children":453},"Components","/design-system/components",[454,457,460,463,466,469,472,475,478,481,484,487,490,493,496,499,502,505,508,511,514,517,520,523,526,529,532,535,538,541,544,547,550,553,556,559,562,565,568,571,574,577,580,583,586,589,592,595],{"title":455,"_path":456,"layout":13},"Accordion","/design-system/components/accordion",{"title":458,"_path":459,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":461,"_path":462,"layout":13},"Alert","/design-system/components/alert",{"title":464,"_path":465,"layout":13},"Block quote","/design-system/components/block-quote",{"title":467,"_path":468,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":470,"_path":471,"layout":13},"Button","/design-system/components/button",{"title":473,"_path":474,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":476,"_path":477,"layout":13},"Callout","/design-system/components/callout",{"title":479,"_path":480,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":482,"_path":483,"layout":13},"Card","/design-system/components/card",{"title":485,"_path":486,"layout":13},"Carousel","/design-system/components/carousel",{"title":488,"_path":489,"layout":13},"Category grid","/design-system/components/category-grid",{"title":491,"_path":492,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":494,"_path":495,"layout":13},"Chip","/design-system/components/chip",{"title":497,"_path":498,"layout":13},"Contact us","/design-system/components/contact-us",{"title":500,"_path":501,"layout":13},"Date input","/design-system/components/date-input",{"title":503,"_path":504,"layout":13},"Detail list","/design-system/components/detail-list",{"title":506,"_path":507,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":509,"_path":510,"layout":13},"File","/design-system/components/file",{"title":512,"_path":513,"layout":13},"Footer","/design-system/components/footer",{"title":515,"_path":516,"layout":13},"Form","/design-system/components/form",{"title":518,"_path":519,"layout":13},"Form alert","/design-system/components/form-alert",{"title":521,"_path":522,"layout":13},"Header","/design-system/components/header",{"title":524,"_path":525,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":527,"_path":528,"layout":13},"Input field","/design-system/components/input-field",{"title":530,"_path":531,"layout":13},"Key dates","/design-system/components/key-dates",{"title":533,"_path":534,"layout":13},"Media","/design-system/components/media",{"title":536,"_path":537,"layout":13},"Media embed","/design-system/components/media-embed",{"title":539,"_path":540,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":542,"_path":543,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":545,"_path":546,"layout":13},"Option button","/design-system/components/option-button",{"title":548,"_path":549,"layout":13},"Page action","/design-system/components/page-action",{"title":551,"_path":552,"layout":13},"Pagination","/design-system/components/pagination",{"title":554,"_path":555,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":557,"_path":558,"layout":13},"Profile","/design-system/components/profile",{"title":560,"_path":561,"layout":13},"Radio button","/design-system/components/radio-button",{"title":563,"_path":564,"layout":13},"Related links","/design-system/components/related-links",{"title":566,"_path":567,"layout":13},"Results listing","/design-system/components/results-listing",{"title":569,"_path":570,"layout":13},"Search bar","/design-system/components/search-bar",{"title":572,"_path":573,"layout":13},"Skip link","/design-system/components/skip-link",{"title":575,"_path":576,"layout":13},"Social share","/design-system/components/social-share",{"title":578,"_path":579,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":581,"_path":582,"layout":13},"Table","/design-system/components/table",{"title":584,"_path":585,"layout":13},"Tabs","/design-system/components/tabs",{"title":587,"_path":588,"layout":13},"Tag","/design-system/components/tag",{"title":590,"_path":591,"layout":13},"Text area","/design-system/components/text-area",{"title":593,"_path":594,"layout":13},"Timeline","/design-system/components/timeline",{"title":596,"_path":597,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":599,"_path":600,"children":601,"layout":13},"Ripple Framework","/framework",[602,603,621,643],{"title":599,"_path":600,"layout":13},{"title":604,"_path":605,"children":606},"Key Concepts","/framework/key-concepts",[607,609,612,615,618],{"title":414,"_path":608,"layout":13},"/framework/key-concepts/nuxt",{"title":610,"_path":611,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":613,"_path":614,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":616,"_path":617,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":619,"_path":620,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":622,"_path":623,"children":624},"Guides","/framework/guides",[625,628,631,634,637,640],{"title":626,"_path":627,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":629,"_path":630,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":632,"_path":633,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":635,"_path":636,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":638,"_path":639,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":641,"_path":642,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":644,"_path":645,"layout":13},"Core modules","/framework/core-modules",["Reactive",647],["Set"],["Reactive",649],{"module-navigation":650},null,true,1714695151920]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Colour</h1><p class="rpl-type-p-large" data-v-3163c6df>Colour plays an important role in creating a consistent and strong visual digital products and services.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->You want users to recognise your brand. A well-designed colour palette can help you create a consistent look and feel.<!--]--></p><p><!--[-->The default colours, made up of two blues, reflect vic.gov.au branding. This strengthens the association with the Victorian Government.<!--]--></p><p><!--[-->The design system contains a colour framework. You can change it if your site requires department or entity branding.<!--]--></p><p><!--[-->We&#39;ve designed and tested colour pairings that already pass accessibility contrast ratios. However, we recommend you perform your own checks to ensure you&#39;re meeting WCAG requirements.<!--]--></p><p><!--[-->If you change your core brand colours, your styles and components will re-theme automatically using the design system&#39;s colour framework.<!--]--></p><p><!--[-->For more guidance on theming options, see <a href="/design-system/design/theming-guidance-for-designers/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[--><strong><!--[-->You don’t need to use hex colours in code.<!--]--></strong><!--]--></p><p><!--[-->By using CSS variables, any branding or theming changes will automatically reflect in your product. See CSS variables below, or see the theming documentation.<!--]--></p><!--]--></blockquote><h2 class="rpl-type-h2 docs-h2" id="core-palette" data-v-fff5b905><a href="#core-palette" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Core palette<!--]--></a></h2><p><!--[-->The core palette includes primary and secondary colours.<!--]--></p><ul><!--[--><li><!--[-->The ‘Primary’ colour is for key visual elements and components. They form the foundation of the colour palette.<!--]--></li><li><!--[-->The ‘Accent’ colour is an accent to help highlight key components or pieces of information. It&#39;s used in combination with the primary colour to create a more dynamic and engaging visual experience.<!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="primary" data-v-ea525968><a href="#primary" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Primary<!--]--></a></h2><div class="rpl-table rpl-table--no-stripes" data-v-b048886a><div class="rpl-table__scroll-container" tabindex="0" data-v-b048886a><table class="w-full" data-v-b048886a><thead data-v-b048886a><tr data-v-b048886a><th data-v-b048886a>Swatch</th><th data-v-b048886a>Colour</th><th data-v-b048886a>Value</th><th data-v-b048886a>CSS Variable</th></tr></thead><tbody data-v-b048886a><!--[--><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-primary);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> primary  </td><td data-v-b048886a>#0052C2</td><td data-v-b048886a>rpl-clr-primary</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-primary-alpha);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> primary alpha</td><td data-v-b048886a>rgb(0 82 194 / 50%)</td><td data-v-b048886a>rpl-clr-primary-alpha</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-primary-alt);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> primary alt</td><td data-v-b048886a>#003174</td><td data-v-b048886a>rpl-clr-primary-alt</td></tr><!--]--></tbody></table></div></div><h2 class="rpl-type-h3 docs-h3" id="accent" data-v-ea525968><a href="#accent" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Accent<!--]--></a></h2><div class="rpl-table rpl-table--no-stripes" data-v-b048886a><div class="rpl-table__scroll-container" tabindex="0" data-v-b048886a><table class="w-full" data-v-b048886a><thead data-v-b048886a><tr data-v-b048886a><th data-v-b048886a>Swatch</th><th data-v-b048886a>Colour</th><th data-v-b048886a>Value</th><th data-v-b048886a>CSS Variable</th></tr></thead><tbody data-v-b048886a><!--[--><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-accent);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> accent  </td><td data-v-b048886a>#0095EC</td><td data-v-b048886a>rpl-clr-accent</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-accent-alt);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> accent alt</td><td data-v-b048886a>#E6F5FD</td><td data-v-b048886a>rpl-clr-accent-alt</td></tr><!--]--></tbody></table></div></div><h2 class="rpl-type-h2 docs-h2" id="neutral-palette" data-v-fff5b905><a href="#neutral-palette" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Neutral palette<!--]--></a></h2><p><!--[-->The Neutral palette is on a colour scale of white to black.<!--]--></p><p><!--[-->The 10 steps represent this scale based on our requirements.<!--]--></p><p><!--[-->Neutral colours are consistent throughout the design system. They are for:<!--]--></p><ul><!--[--><li><!--[-->text colours<!--]--></li><li><!--[-->borders<!--]--></li><li><!--[-->other elements, like a neutral background.<!--]--></li><!--]--></ul><div class="rpl-table rpl-table--no-stripes" data-v-b048886a><div class="rpl-table__scroll-container" tabindex="0" data-v-b048886a><table class="w-full" data-v-b048886a><thead data-v-b048886a><tr data-v-b048886a><th data-v-b048886a>Swatch</th><th data-v-b048886a>Colour</th><th data-v-b048886a>Value</th><th data-v-b048886a>CSS Variable</th></tr></thead><tbody data-v-b048886a><!--[--><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-neutral-0);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> neutral 0</td><td data-v-b048886a>#FFFFFF</td><td data-v-b048886a>rpl-clr-neutral-0</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-neutral-100);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> neutral 100</td><td data-v-b048886a>#F5F5F5</td><td data-v-b048886a>rpl-clr-neutral-100</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-neutral-200);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> neutral 200</td><td data-v-b048886a>#E6E6E6</td><td data-v-b048886a>rpl-clr-neutral-200</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-neutral-300);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> neutral 300</td><td data-v-b048886a>#CCCCCC</td><td data-v-b048886a>rpl-clr-neutral-300</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-neutral-400);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> neutral 400</td><td data-v-b048886a>#999999</td><td data-v-b048886a>rpl-clr-neutral-400</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-neutral-500);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> neutral 500</td><td data-v-b048886a>#7F7F7F</td><td data-v-b048886a>rpl-clr-neutral-500</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-neutral-600);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> neutral 600</td><td data-v-b048886a>#666666</td><td data-v-b048886a>rpl-clr-neutral-600</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-neutral-700);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> neutral 700</td><td data-v-b048886a>#333333</td><td data-v-b048886a>rpl-clr-neutral-700</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-neutral-800);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> neutral 800</td><td data-v-b048886a>#1A1A1A</td><td data-v-b048886a>rpl-clr-neutral-800</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-neutral-900);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> neutral 900</td><td data-v-b048886a>#0D0D0D</td><td data-v-b048886a>rpl-clr-neutral-900</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-neutral-alpha-0);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> neutral alpha 0</td><td data-v-b048886a>rgb(255 255 255 / 75%)</td><td data-v-b048886a>rpl-clr-neutral-alpha-0</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-neutral-alpha-700);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> neutral alpha 700</td><td data-v-b048886a>rgb(51 51 51 / 90%)</td><td data-v-b048886a>rpl-clr-neutral-alpha-700</td></tr><!--]--></tbody></table></div></div><div class="rpl-table rpl-table--no-stripes" data-v-b048886a><div class="rpl-table__scroll-container" tabindex="0" data-v-b048886a><table class="w-full" data-v-b048886a><thead data-v-b048886a><tr data-v-b048886a><th data-v-b048886a>Swatch</th><th data-v-b048886a>Colour</th><th data-v-b048886a>Value</th><th data-v-b048886a>CSS Variable</th></tr></thead><tbody data-v-b048886a><!--[--><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-light);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> light</td><td data-v-b048886a>#FFFFFF</td><td data-v-b048886a>rpl-clr-light</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-dark);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> dark</td><td data-v-b048886a>#1A1A1A</td><td data-v-b048886a>rpl-clr-dark</td></tr><!--]--></tbody></table></div></div><h2 class="rpl-type-h2 docs-h2" id="typography-colours" data-v-fff5b905><a href="#typography-colours" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Typography colours<!--]--></a></h2><p><!--[-->Type colours have a ratio of at least 4.5:1 (or 3:1 for text larger than 18 point). This was selected to try and conform to the Web Content Accessibility Guidelines (WCAG 2.1).<!--]--></p><p><!--[-->Interaction colours are in addition to the core colour palette. This guarantees accessible text.<!--]--></p><div class="rpl-table rpl-table--no-stripes" data-v-b048886a><div class="rpl-table__scroll-container" tabindex="0" data-v-b048886a><table class="w-full" data-v-b048886a><thead data-v-b048886a><tr data-v-b048886a><th data-v-b048886a>Swatch</th><th data-v-b048886a>Colour</th><th data-v-b048886a>Value</th><th data-v-b048886a>CSS Variable</th></tr></thead><tbody data-v-b048886a><!--[--><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-type-default);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> type default</td><td data-v-b048886a>#1A1A1A</td><td data-v-b048886a>rpl-clr-type-default</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-type-light);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> type light</td><td data-v-b048886a>#FFFFFF</td><td data-v-b048886a>rpl-clr-type-light</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-type-primary-contrast);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> type primary contrast</td><td data-v-b048886a>#FFFFFF</td><td data-v-b048886a>rpl-clr-type-primary-contrast</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-type-accent-contrast);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> type accent contrast</td><td data-v-b048886a>#FFFFFF</td><td data-v-b048886a>rpl-clr-type-accent-contrast</td></tr><!--]--></tbody></table></div></div><div class="rpl-table rpl-table--no-stripes" data-v-b048886a><div class="rpl-table__scroll-container" tabindex="0" data-v-b048886a><table class="w-full" data-v-b048886a><thead data-v-b048886a><tr data-v-b048886a><th data-v-b048886a>Swatch</th><th data-v-b048886a>Colour</th><th data-v-b048886a>Value</th><th data-v-b048886a>CSS Variable</th></tr></thead><tbody data-v-b048886a><!--[--><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-link);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> link</td><td data-v-b048886a>#0052C2</td><td data-v-b048886a>rpl-clr-link</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-link-visited);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> link visited</td><td data-v-b048886a>#9F46B1</td><td data-v-b048886a>rpl-clr-link-visited</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-focus);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> focus</td><td data-v-b048886a>#FF9E1B</td><td data-v-b048886a>rpl-clr-focus</td></tr><!--]--></tbody></table></div></div><h2 class="rpl-type-h2 docs-h2" id="gradients" data-v-fff5b905><a href="#gradients" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Gradients<!--]--></a></h2><p><!--[-->Gradients bring attention to components or information. Only use them on occasion.<!--]--></p><p><!--[-->All gradients should appear from dark to light in their usage.<!--]--></p><div class="rpl-table rpl-table--no-stripes" data-v-8e2514b8><div class="rpl-table__scroll-container" tabindex="0" data-v-8e2514b8><table class="w-full" data-v-8e2514b8><thead data-v-8e2514b8><tr data-v-8e2514b8><th data-v-8e2514b8>Swatch</th><th data-v-8e2514b8>Colour</th><th data-v-8e2514b8>CSS Variable</th></tr></thead><tbody data-v-8e2514b8><!--[--><tr data-v-8e2514b8><td data-v-8e2514b8><div class="docs-colour-swatch" style="background:var(--rpl-clr-gradient-horizontal);" data-v-8e2514b8 data-v-a0076e87></div></td><td data-v-8e2514b8> gradient horizontal</td><td data-v-8e2514b8>rpl-clr-gradient-horizontal</td></tr><tr data-v-8e2514b8><td data-v-8e2514b8><div class="docs-colour-swatch" style="background:var(--rpl-clr-gradient-vertical);" data-v-8e2514b8 data-v-a0076e87></div></td><td data-v-8e2514b8> gradient vertical</td><td data-v-8e2514b8>rpl-clr-gradient-vertical</td></tr><!--]--></tbody><thead data-v-8e2514b8><tr data-v-8e2514b8><th data-v-8e2514b8></th><th data-v-8e2514b8>Value</th><th data-v-8e2514b8>Position</th></tr></thead><tbody data-v-8e2514b8><!--[--><tr data-v-8e2514b8><td data-v-8e2514b8><div class="docs-colour-swatch" style="background:#0052C2;" data-v-8e2514b8 data-v-a0076e87></div></td><td data-v-8e2514b8>#0052C2</td><td data-v-8e2514b8>0%</td></tr><tr data-v-8e2514b8><td data-v-8e2514b8><div class="docs-colour-swatch" style="background:#825DFF;" data-v-8e2514b8 data-v-a0076e87></div></td><td data-v-8e2514b8>#825DFF</td><td data-v-8e2514b8>12%</td></tr><tr data-v-8e2514b8><td data-v-8e2514b8><div class="docs-colour-swatch" style="background:#EF4A81;" data-v-8e2514b8 data-v-a0076e87></div></td><td data-v-8e2514b8>#EF4A81</td><td data-v-8e2514b8>24%</td></tr><tr data-v-8e2514b8><td data-v-8e2514b8><div class="docs-colour-swatch" style="background:#E57200;" data-v-8e2514b8 data-v-a0076e87></div></td><td data-v-8e2514b8>#E57200</td><td data-v-8e2514b8>36%</td></tr><tr data-v-8e2514b8><td data-v-8e2514b8><div class="docs-colour-swatch" style="background:#FFC166;" data-v-8e2514b8 data-v-a0076e87></div></td><td data-v-8e2514b8>#FFC166</td><td data-v-8e2514b8>52%</td></tr><tr data-v-8e2514b8><td data-v-8e2514b8><div class="docs-colour-swatch" style="background:#F9E062;" data-v-8e2514b8 data-v-a0076e87></div></td><td data-v-8e2514b8>#F9E062</td><td data-v-8e2514b8>80%</td></tr><!--]--></tbody></table></div></div><h2 class="rpl-type-h2 docs-h2" id="sematics" data-v-fff5b905><a href="#sematics" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Sematics<!--]--></a></h2><p><!--[-->Semantic colours add meaning to element. They provide contextual or transactional feedback to the user. We have four semantic uses:<!--]--></p><ul><!--[--><li><!--[-->Information<!--]--></li><li><!--[-->Success<!--]--></li><li><!--[-->Warning<!--]--></li><li><!--[-->Error<!--]--></li><!--]--></ul><p><!--[-->Avoid using them outside of their semantic meaning.<!--]--></p><p><!--[-->These colours help signal to users the meaning of some components. For example, for alerts or error messages.<!--]--></p><div class="rpl-table rpl-table--no-stripes" data-v-b048886a><div class="rpl-table__scroll-container" tabindex="0" data-v-b048886a><table class="w-full" data-v-b048886a><thead data-v-b048886a><tr data-v-b048886a><th data-v-b048886a>Swatch</th><th data-v-b048886a>Colour</th><th data-v-b048886a>Value</th><th data-v-b048886a>CSS Variable</th></tr></thead><tbody data-v-b048886a><!--[--><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-information);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> information  </td><td data-v-b048886a>#005BA5</td><td data-v-b048886a>rpl-clr-information</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-information-light);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> information light</td><td data-v-b048886a>#E6EFF6</td><td data-v-b048886a>rpl-clr-information-light</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-information-dark);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> information dark</td><td data-v-b048886a>#004984</td><td data-v-b048886a>rpl-clr-information-dark</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-success);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> success  </td><td data-v-b048886a>#007D85</td><td data-v-b048886a>rpl-clr-success</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-success-light);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> success light</td><td data-v-b048886a>#E6F2F3</td><td data-v-b048886a>rpl-clr-success-light</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-success-dark);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> success dark</td><td data-v-b048886a>#00646A</td><td data-v-b048886a>rpl-clr-success-dark</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-warning);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> warning  </td><td data-v-b048886a>#B75B00</td><td data-v-b048886a>rpl-clr-warning</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-warning-light);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> warning light</td><td data-v-b048886a>#F8EFE6</td><td data-v-b048886a>rpl-clr-warning-light</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-warning-dark);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> warning dark</td><td data-v-b048886a>#924900</td><td data-v-b048886a>rpl-clr-warning-dark</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-error);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> error  </td><td data-v-b048886a>#AA0028</td><td data-v-b048886a>rpl-clr-error</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-error-light);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> error light</td><td data-v-b048886a>#F7E6EA</td><td data-v-b048886a>rpl-clr-error-light</td></tr><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-error-dark);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> error dark</td><td data-v-b048886a>#880020</td><td data-v-b048886a>rpl-clr-error-dark</td></tr><!--]--></tbody></table></div></div><h2 class="rpl-type-h2 docs-h2" id="focus" data-v-fff5b905><a href="#focus" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Focus<!--]--></a></h2><p><!--[-->See <a href="/design-system/styles/focus-state/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->focus state<!--]--><!--]--><!----><!--]--></a> for guidance.<!--]--></p><div class="rpl-table rpl-table--no-stripes" data-v-b048886a><div class="rpl-table__scroll-container" tabindex="0" data-v-b048886a><table class="w-full" data-v-b048886a><thead data-v-b048886a><tr data-v-b048886a><th data-v-b048886a>Swatch</th><th data-v-b048886a>Colour</th><th data-v-b048886a>Value</th><th data-v-b048886a>CSS Variable</th></tr></thead><tbody data-v-b048886a><!--[--><tr data-v-b048886a><td data-v-b048886a><div class="docs-colour-swatch" style="background:var(--rpl-clr-focus);" data-v-b048886a data-v-a0076e87></div></td><td data-v-b048886a> focus</td><td data-v-b048886a>#FF9E1B</td><td data-v-b048886a>rpl-clr-focus</td></tr><!--]--></tbody></table></div></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="theming" data-v-fff5b905><a href="#theming" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->To create your own theme, see theming guidance for designers or developers.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/4.styles/colour.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/styles/colour/_payload.json">[{"state":1,"once":646,"_errors":648,"serverRendered":651,"path":7,"prerenderedAt":652},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":331,"$sdd-globals":348,"$sdd-navigation":350},["ShallowRef",4],["ShallowReactive",5],{"/design-system/styles/colour":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":326,"_id":327,"_source":328,"_file":329,"_extension":330},"/design-system/styles/colour","styles",false,"","Colour","Colour plays an important role in creating a consistent and strong visual digital products and services.","page","Core",{"type":16,"children":17,"toc":312},"root",[18,26,31,36,41,46,68,86,93,98,113,120,125,131,135,141,146,151,156,174,178,182,188,193,198,202,206,212,217,222,226,232,237,260,265,270,274,280,293,297,301,307],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","You want users to recognise your brand. A well-designed colour palette can help you create a consistent look and feel.",{"type":19,"tag":20,"props":27,"children":28},{},[29],{"type":24,"value":30},"The default colours, made up of two blues, reflect vic.gov.au branding. This strengthens the association with the Victorian Government.",{"type":19,"tag":20,"props":32,"children":33},{},[34],{"type":24,"value":35},"The design system contains a colour framework. You can change it if your site requires department or entity branding.",{"type":19,"tag":20,"props":37,"children":38},{},[39],{"type":24,"value":40},"We've designed and tested colour pairings that already pass accessibility contrast ratios. However, we recommend you perform your own checks to ensure you're meeting WCAG requirements.",{"type":19,"tag":20,"props":42,"children":43},{},[44],{"type":24,"value":45},"If you change your core brand colours, your styles and components will re-theme automatically using the design system's colour framework.",{"type":19,"tag":20,"props":47,"children":48},{},[49,51,58,60,66],{"type":24,"value":50},"For more guidance on theming options, see ",{"type":19,"tag":52,"props":53,"children":55},"a",{"href":54},"/design-system/design/theming-guidance-for-designers/",[56],{"type":24,"value":57},"theming guidance for designers",{"type":24,"value":59}," or ",{"type":19,"tag":52,"props":61,"children":63},{"href":62},"/design-system/develop/theming/",[64],{"type":24,"value":65},"theming guidance for developers",{"type":24,"value":67},".",{"type":19,"tag":69,"props":70,"children":71},"blockquote",{},[72,81],{"type":19,"tag":20,"props":73,"children":74},{},[75],{"type":19,"tag":76,"props":77,"children":78},"strong",{},[79],{"type":24,"value":80},"You don’t need to use hex colours in code.",{"type":19,"tag":20,"props":82,"children":83},{},[84],{"type":24,"value":85},"By using CSS variables, any branding or theming changes will automatically reflect in your product. See CSS variables below, or see the theming documentation.",{"type":19,"tag":87,"props":88,"children":90},"h2",{"id":89},"core-palette",[91],{"type":24,"value":92},"Core palette",{"type":19,"tag":20,"props":94,"children":95},{},[96],{"type":24,"value":97},"The core palette includes primary and secondary colours.",{"type":19,"tag":99,"props":100,"children":101},"ul",{},[102,108],{"type":19,"tag":103,"props":104,"children":105},"li",{},[106],{"type":24,"value":107},"The ‘Primary’ colour is for key visual elements and components. They form the foundation of the colour palette.",{"type":19,"tag":103,"props":109,"children":110},{},[111],{"type":24,"value":112},"The ‘Accent’ colour is an accent to help highlight key components or pieces of information. It's used in combination with the primary colour to create a more dynamic and engaging visual experience.",{"type":19,"tag":114,"props":115,"children":117},"h3",{"id":116},"primary",[118],{"type":24,"value":119},"Primary",{"type":19,"tag":121,"props":122,"children":124},"docs-colour-table",{":colours":123},"[\"clr.primary\"]",[],{"type":19,"tag":114,"props":126,"children":128},{"id":127},"accent",[129],{"type":24,"value":130},"Accent",{"type":19,"tag":121,"props":132,"children":134},{":colours":133},"[\"clr.accent\"]",[],{"type":19,"tag":87,"props":136,"children":138},{"id":137},"neutral-palette",[139],{"type":24,"value":140},"Neutral palette",{"type":19,"tag":20,"props":142,"children":143},{},[144],{"type":24,"value":145},"The Neutral palette is on a colour scale of white to black.",{"type":19,"tag":20,"props":147,"children":148},{},[149],{"type":24,"value":150},"The 10 steps represent this scale based on our requirements.",{"type":19,"tag":20,"props":152,"children":153},{},[154],{"type":24,"value":155},"Neutral colours are consistent throughout the design system. They are for:",{"type":19,"tag":99,"props":157,"children":158},{},[159,164,169],{"type":19,"tag":103,"props":160,"children":161},{},[162],{"type":24,"value":163},"text colours",{"type":19,"tag":103,"props":165,"children":166},{},[167],{"type":24,"value":168},"borders",{"type":19,"tag":103,"props":170,"children":171},{},[172],{"type":24,"value":173},"other elements, like a neutral background.",{"type":19,"tag":121,"props":175,"children":177},{":colours":176},"[\"clr.neutral\"]",[],{"type":19,"tag":121,"props":179,"children":181},{":colours":180},"[\"clr.light\",\"clr.dark\"]",[],{"type":19,"tag":87,"props":183,"children":185},{"id":184},"typography-colours",[186],{"type":24,"value":187},"Typography colours",{"type":19,"tag":20,"props":189,"children":190},{},[191],{"type":24,"value":192},"Type colours have a ratio of at least 4.5:1 (or 3:1 for text larger than 18 point). This was selected to try and conform to the Web Content Accessibility Guidelines (WCAG 2.1).",{"type":19,"tag":20,"props":194,"children":195},{},[196],{"type":24,"value":197},"Interaction colours are in addition to the core colour palette. This guarantees accessible text.",{"type":19,"tag":121,"props":199,"children":201},{":colours":200},"[\"clr.type.default\",\"clr.type.light\",\"clr.type.primary.contrast\",\"clr.type.accent.contrast\"]",[],{"type":19,"tag":121,"props":203,"children":205},{":colours":204},"[\"clr.link\",\"clr.link-visited\",\"clr.focus\"]",[],{"type":19,"tag":87,"props":207,"children":209},{"id":208},"gradients",[210],{"type":24,"value":211},"Gradients",{"type":19,"tag":20,"props":213,"children":214},{},[215],{"type":24,"value":216},"Gradients bring attention to components or information. Only use them on occasion.",{"type":19,"tag":20,"props":218,"children":219},{},[220],{"type":24,"value":221},"All gradients should appear from dark to light in their usage.",{"type":19,"tag":223,"props":224,"children":225},"docs-gradient-table",{},[],{"type":19,"tag":87,"props":227,"children":229},{"id":228},"sematics",[230],{"type":24,"value":231},"Sematics",{"type":19,"tag":20,"props":233,"children":234},{},[235],{"type":24,"value":236},"Semantic colours add meaning to element. They provide contextual or transactional feedback to the user. We have four semantic uses:",{"type":19,"tag":99,"props":238,"children":239},{},[240,245,250,255],{"type":19,"tag":103,"props":241,"children":242},{},[243],{"type":24,"value":244},"Information",{"type":19,"tag":103,"props":246,"children":247},{},[248],{"type":24,"value":249},"Success",{"type":19,"tag":103,"props":251,"children":252},{},[253],{"type":24,"value":254},"Warning",{"type":19,"tag":103,"props":256,"children":257},{},[258],{"type":24,"value":259},"Error",{"type":19,"tag":20,"props":261,"children":262},{},[263],{"type":24,"value":264},"Avoid using them outside of their semantic meaning.",{"type":19,"tag":20,"props":266,"children":267},{},[268],{"type":24,"value":269},"These colours help signal to users the meaning of some components. For example, for alerts or error messages.",{"type":19,"tag":121,"props":271,"children":273},{":colours":272},"[\"clr.information\",\"clr.success\",\"clr.warning\",\"clr.error\"]",[],{"type":19,"tag":87,"props":275,"children":277},{"id":276},"focus",[278],{"type":24,"value":279},"Focus",{"type":19,"tag":20,"props":281,"children":282},{},[283,285,291],{"type":24,"value":284},"See ",{"type":19,"tag":52,"props":286,"children":288},{"href":287},"/design-system/styles/focus-state/",[289],{"type":24,"value":290},"focus state",{"type":24,"value":292}," for guidance.",{"type":19,"tag":121,"props":294,"children":296},{":colours":295},"[\"clr.focus\"]",[],{"type":19,"tag":298,"props":299,"children":300},"hr",{},[],{"type":19,"tag":87,"props":302,"children":304},{"id":303},"theming",[305],{"type":24,"value":306},"Theming",{"type":19,"tag":20,"props":308,"children":309},{},[310],{"type":24,"value":311},"To create your own theme, see theming guidance for designers or developers.",{"title":10,"searchDepth":313,"depth":313,"links":314},2,[315,320,321,322,323,324,325],{"id":89,"depth":313,"text":92,"children":316},[317,319],{"id":116,"depth":318,"text":119},3,{"id":127,"depth":318,"text":130},{"id":137,"depth":313,"text":140},{"id":184,"depth":313,"text":187},{"id":208,"depth":313,"text":211},{"id":228,"depth":313,"text":231},{"id":276,"depth":313,"text":279},{"id":303,"depth":313,"text":306},"markdown","content:design-system:4.styles:colour.md","content","design-system/4.styles/colour.md","md",["ShallowRef",332],["ShallowReactive",333],{"/design-system/styles/colour":334},[335,342],{"_path":336,"_dir":337,"_draft":9,"_partial":9,"_locale":10,"title":338,"description":339,"layout":13,"_type":326,"_id":340,"_source":328,"_file":341,"_extension":330},"/design-system/develop/usage/css-only","usage","Styles only","Using the design system styles without a front-end framework.","content:design-system:3.develop:4.usage:5.css-only.md","design-system/3.develop/4.usage/5.css-only.md",{"_path":343,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":344,"description":345,"layout":13,"label":14,"_type":326,"_id":346,"_source":328,"_file":347,"_extension":330},"/design-system/styles/focus-state","Focus state","Focus states show when a user has highlighted an element, using an input method such as a keyboard or voice.","content:design-system:4.styles:focus-state.md","design-system/4.styles/focus-state.md",["ShallowRef",349],{},[351,356,598],{"title":352,"_path":353,"icon":354,"layout":355},"Ripple Design System","/","carbon:home","home",{"title":357,"_path":358,"children":359},"Design System","/design-system",[360,376,392,420,450],{"title":361,"_path":362,"children":363},"About","/design-system/about",[364,367,370,373],{"title":365,"_path":366,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":368,"_path":369,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":371,"_path":372,"layout":13},"Support","/design-system/about/getting-support",{"title":374,"_path":375,"layout":13},"Contributing","/design-system/about/contributing",{"title":377,"_path":378,"children":379},"Design","/design-system/design",[380,383,386,389],{"title":381,"_path":382,"layout":13},"Getting started","/design-system/design/getting-started",{"title":384,"_path":385,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":387,"_path":388,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":390,"_path":391,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":393,"_path":394,"children":395},"Develop","/design-system/develop",[396,398,400,403],{"title":381,"_path":397,"layout":13},"/design-system/develop/getting-started",{"title":374,"_path":399,"layout":13},"/design-system/develop/contributing",{"title":401,"_path":402,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":404,"_path":405,"children":406,"layout":13},"Usage","/design-system/develop/usage",[407,410,413,416,419],{"title":408,"_path":409,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":411,"_path":412,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":414,"_path":415,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":417,"_path":418,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":338,"_path":336,"layout":13},{"title":421,"_path":422,"children":423},"Styles","/design-system/styles",[424,425,426,429,432,435,438,441,444,447],{"title":11,"_path":7,"layout":13},{"title":344,"_path":343,"layout":13},{"title":427,"_path":428,"layout":13},"Grid","/design-system/styles/grid",{"title":430,"_path":431,"layout":13},"Icons","/design-system/styles/icons",{"title":433,"_path":434,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":436,"_path":437,"layout":13},"Layout","/design-system/styles/layout",{"title":439,"_path":440,"layout":13},"Logo","/design-system/styles/logo",{"title":442,"_path":443,"layout":13},"Motion","/design-system/styles/motion",{"title":445,"_path":446,"layout":13},"Spacing","/design-system/styles/spacing",{"title":448,"_path":449,"layout":13},"Typography","/design-system/styles/typography",{"title":451,"_path":452,"children":453},"Components","/design-system/components",[454,457,460,463,466,469,472,475,478,481,484,487,490,493,496,499,502,505,508,511,514,517,520,523,526,529,532,535,538,541,544,547,550,553,556,559,562,565,568,571,574,577,580,583,586,589,592,595],{"title":455,"_path":456,"layout":13},"Accordion","/design-system/components/accordion",{"title":458,"_path":459,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":461,"_path":462,"layout":13},"Alert","/design-system/components/alert",{"title":464,"_path":465,"layout":13},"Block quote","/design-system/components/block-quote",{"title":467,"_path":468,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":470,"_path":471,"layout":13},"Button","/design-system/components/button",{"title":473,"_path":474,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":476,"_path":477,"layout":13},"Callout","/design-system/components/callout",{"title":479,"_path":480,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":482,"_path":483,"layout":13},"Card","/design-system/components/card",{"title":485,"_path":486,"layout":13},"Carousel","/design-system/components/carousel",{"title":488,"_path":489,"layout":13},"Category grid","/design-system/components/category-grid",{"title":491,"_path":492,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":494,"_path":495,"layout":13},"Chip","/design-system/components/chip",{"title":497,"_path":498,"layout":13},"Contact us","/design-system/components/contact-us",{"title":500,"_path":501,"layout":13},"Date input","/design-system/components/date-input",{"title":503,"_path":504,"layout":13},"Detail list","/design-system/components/detail-list",{"title":506,"_path":507,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":509,"_path":510,"layout":13},"File","/design-system/components/file",{"title":512,"_path":513,"layout":13},"Footer","/design-system/components/footer",{"title":515,"_path":516,"layout":13},"Form","/design-system/components/form",{"title":518,"_path":519,"layout":13},"Form alert","/design-system/components/form-alert",{"title":521,"_path":522,"layout":13},"Header","/design-system/components/header",{"title":524,"_path":525,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":527,"_path":528,"layout":13},"Input field","/design-system/components/input-field",{"title":530,"_path":531,"layout":13},"Key dates","/design-system/components/key-dates",{"title":533,"_path":534,"layout":13},"Media","/design-system/components/media",{"title":536,"_path":537,"layout":13},"Media embed","/design-system/components/media-embed",{"title":539,"_path":540,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":542,"_path":543,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":545,"_path":546,"layout":13},"Option button","/design-system/components/option-button",{"title":548,"_path":549,"layout":13},"Page action","/design-system/components/page-action",{"title":551,"_path":552,"layout":13},"Pagination","/design-system/components/pagination",{"title":554,"_path":555,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":557,"_path":558,"layout":13},"Profile","/design-system/components/profile",{"title":560,"_path":561,"layout":13},"Radio button","/design-system/components/radio-button",{"title":563,"_path":564,"layout":13},"Related links","/design-system/components/related-links",{"title":566,"_path":567,"layout":13},"Results listing","/design-system/components/results-listing",{"title":569,"_path":570,"layout":13},"Search bar","/design-system/components/search-bar",{"title":572,"_path":573,"layout":13},"Skip link","/design-system/components/skip-link",{"title":575,"_path":576,"layout":13},"Social share","/design-system/components/social-share",{"title":578,"_path":579,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":581,"_path":582,"layout":13},"Table","/design-system/components/table",{"title":584,"_path":585,"layout":13},"Tabs","/design-system/components/tabs",{"title":587,"_path":588,"layout":13},"Tag","/design-system/components/tag",{"title":590,"_path":591,"layout":13},"Text area","/design-system/components/text-area",{"title":593,"_path":594,"layout":13},"Timeline","/design-system/components/timeline",{"title":596,"_path":597,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":599,"_path":600,"children":601,"layout":13},"Ripple Framework","/framework",[602,603,621,643],{"title":599,"_path":600,"layout":13},{"title":604,"_path":605,"children":606},"Key Concepts","/framework/key-concepts",[607,609,612,615,618],{"title":414,"_path":608,"layout":13},"/framework/key-concepts/nuxt",{"title":610,"_path":611,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":613,"_path":614,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":616,"_path":617,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":619,"_path":620,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":622,"_path":623,"children":624},"Guides","/framework/guides",[625,628,631,634,637,640],{"title":626,"_path":627,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":629,"_path":630,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":632,"_path":633,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":635,"_path":636,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":638,"_path":639,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":641,"_path":642,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":644,"_path":645,"layout":13},"Core modules","/framework/core-modules",["Reactive",647],["Set"],["Reactive",649],{"module-navigation":650},null,true,1714695650168]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/styles/focus-state/_payload.json b/design-system/styles/focus-state/_payload.json
index 597ca3580a..20b033707d 100644
--- a/design-system/styles/focus-state/_payload.json
+++ b/design-system/styles/focus-state/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":70,"items":71},"/design-system/styles","Styles",true,[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":70,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695151924]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":70,"items":71},"/design-system/styles","Styles",true,[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":70,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695650172]
\ No newline at end of file
diff --git a/design-system/styles/focus-state/index.html b/design-system/styles/focus-state/index.html
index 75cbc6487a..c71b94330d 100644
--- a/design-system/styles/focus-state/index.html
+++ b/design-system/styles/focus-state/index.html
@@ -25,65 +25,65 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsImageExample.gzBXNxRI.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsImageExample.8UN1-6g4.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/node.uMQX-T_c.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTable.Nr-94ppo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseThead.x0xD32yi.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTr.NjbdsN4h.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTh.15m2hyNr.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTbody.pO4HZmMb.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTd.KWvY0UVz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/Swatch.pCyR0PCQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTable.d8cdIzif.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseThead.alimbSyj.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTr.rCUlpnCA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTh.GnFrmIgb.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTbody.FPzd5AuU.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTd.ydAecYY-.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/Swatch.FPuuW78y.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -125,8 +125,8 @@
 
 
 
-<div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Swatch<!--]--></th><th><!--[-->Element<!--]--></th><th><!--[-->Value<!--]--></th><th><!--[-->CSS Variable<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[--><div class="docs-colour-swatch" style="background:#FF9E1B;" data-v-a0076e87></div><!--]--></td><td><!--[-->Background Fill<!--]--></td><td><!--[-->#FF9E1B<!--]--></td><td><!--[-->rpl-clr-focus<!--]--></td><!--]--></tr><tr><!--[--><td><!--[--><div class="docs-colour-swatch" style="background:#1A1A1A;" data-v-a0076e87></div><!--]--></td><td><!--[-->Content / Text / Icons<!--]--></td><td><!--[-->#1A1A1A<!--]--></td><td><!--[-->rpl-clr-focus-contrast<!--]--></td><!--]--></tr><tr><!--[--><td><!--[--><div class="docs-colour-swatch" style="background:#1A1A1A;" data-v-a0076e87></div><!--]--></td><td><!--[-->Bottom Border<!--]--></td><td><!--[-->#1A1A1A<!--]--></td><td><!--[-->rpl-clr-dark<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><h2 class="rpl-type-h3 docs-h3" id="theming" data-v-ea525968><a href="#theming" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->For advice on focus state theming, see <a href="/design-system/design/theming-guidance-for-designers/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/4.styles/focus-state.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/styles/focus-state/_payload.json">[{"state":1,"once":612,"_errors":614,"serverRendered":617,"path":618,"prerenderedAt":619},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":298,"$sdd-globals":314,"$sdd-navigation":316},["ShallowRef",4],["ShallowReactive",5],{"/design-system/styles/focus-state":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":293,"_id":294,"_source":295,"_file":296,"_extension":297},"/design-system/styles/focus-state","styles",false,"","Focus state","Focus states show when a user has highlighted an element, using an input method such as a keyboard or voice.","page","Core",{"type":16,"children":17,"toc":283},"root",[18,26,42,47,54,59,70,76,81,91,97,102,112,118,123,128,133,139,144,146,256,262],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","Some users use keyboards or other devices to navigate through a page by jumping from one interactive element to the next. Focus states help users understand which element is currently selected and ready for interaction.",{"type":19,"tag":20,"props":27,"children":28},{},[29,31,40],{"type":24,"value":30},"Focus states are orange and neutral-800, aiming to conform to the WCAG 2.1 Level AA ",{"type":19,"tag":32,"props":33,"children":37},"a",{"href":34,"rel":35},"https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html",[36],"nofollow",[38],{"type":24,"value":39},"non-text contrast",{"type":24,"value":41}," on any background colour.",{"type":19,"tag":20,"props":43,"children":44},{},[45],{"type":24,"value":46},"We have chosen this orange colour as it is a direct opposite of our primary colour. This allows all colourblind users to see a visual difference. Focus state styling also removes any border radius to create a bigger visual difference to surrounding elements.",{"type":19,"tag":48,"props":49,"children":51},"h3",{"id":50},"inline-style",[52],{"type":24,"value":53},"Inline style",{"type":19,"tag":20,"props":55,"children":56},{},[57],{"type":24,"value":58},"The inline focus state helps links stand out from the rest of the content on a page. When a link receives focus, it will underline and change background colour. Other components and elements that look like links use the inline style.",{"type":19,"tag":60,"props":61,"children":64},"docs-image-example",{"alt":62,"src":63},"An example of focus state colour contrast","/assets/img/focus-inline-focus.png",[65],{"type":19,"tag":20,"props":66,"children":67},{},[68],{"type":24,"value":69},".rpl-u-focusable-inline",{"type":19,"tag":48,"props":71,"children":73},{"id":72},"block-style",[74],{"type":24,"value":75},"Block style",{"type":19,"tag":20,"props":77,"children":78},{},[79],{"type":24,"value":80},"The block style completely highlights a section or whole component with the focus state. For example, when a button receives focus, a border is added to the bottom of the container and the background colour will change.",{"type":19,"tag":60,"props":82,"children":85},{"alt":83,"src":84},"Focus Link Visual Block Sample","/assets/img/focus-block-focus.png",[86],{"type":19,"tag":20,"props":87,"children":88},{},[89],{"type":24,"value":90},".rpl-u-focusable-block",{"type":19,"tag":48,"props":92,"children":94},{"id":93},"outline-focus-state-style",[95],{"type":24,"value":96},"Outline focus state style",{"type":19,"tag":20,"props":98,"children":99},{},[100],{"type":24,"value":101},"The outline styles are for when form inputs are focused. When a form field receives focus, it adds a border. If the element already has a border, the border gets thicker.",{"type":19,"tag":60,"props":103,"children":106},{"alt":104,"src":105},"Focus Link Visual Outline Focus Sample","/assets/img/focus-outline-focus.png",[107],{"type":19,"tag":20,"props":108,"children":109},{},[110],{"type":24,"value":111},".rpl-u-focusable-outline",{"type":19,"tag":48,"props":113,"children":115},{"id":114},"modified-focus-states-for-components",[116],{"type":24,"value":117},"Modified focus states for components",{"type":19,"tag":20,"props":119,"children":120},{},[121],{"type":24,"value":122},"The alert component has a modified focus state colour. This is consistent across all alert variants. It meets colour contrast requirements on all semantic colours, including danger and warning.",{"type":19,"tag":20,"props":124,"children":125},{},[126],{"type":24,"value":127},"The modified styling uses a white background in place of the orange, still with the dark content and border.",{"type":19,"tag":60,"props":129,"children":132},{"alt":130,"src":131},"Component Modified Focus State Sample","/assets/img/focus-alert-focus.png",[],{"type":19,"tag":48,"props":134,"children":136},{"id":135},"css-variables",[137],{"type":24,"value":138},"CSS Variables",{"type":19,"tag":20,"props":140,"children":141},{},[142],{"type":24,"value":143},"The focus state has three CSS Variables.",{"type":24,"value":145},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":147,"props":148,"children":149},"table",{},[150,179],{"type":19,"tag":151,"props":152,"children":153},"thead",{},[154],{"type":19,"tag":155,"props":156,"children":157},"tr",{},[158,164,169,174],{"type":19,"tag":159,"props":160,"children":161},"th",{},[162],{"type":24,"value":163},"Swatch",{"type":19,"tag":159,"props":165,"children":166},{},[167],{"type":24,"value":168},"Element",{"type":19,"tag":159,"props":170,"children":171},{},[172],{"type":24,"value":173},"Value",{"type":19,"tag":159,"props":175,"children":176},{},[177],{"type":24,"value":178},"CSS Variable",{"type":19,"tag":180,"props":181,"children":182},"tbody",{},[183,209,233],{"type":19,"tag":155,"props":184,"children":185},{},[186,195,200,204],{"type":19,"tag":187,"props":188,"children":189},"td",{},[190],{"type":19,"tag":191,"props":192,"children":194},"swatch",{"colour":193},"#FF9E1B",[],{"type":19,"tag":187,"props":196,"children":197},{},[198],{"type":24,"value":199},"Background Fill",{"type":19,"tag":187,"props":201,"children":202},{},[203],{"type":24,"value":193},{"type":19,"tag":187,"props":205,"children":206},{},[207],{"type":24,"value":208},"rpl-clr-focus",{"type":19,"tag":155,"props":210,"children":211},{},[212,219,224,228],{"type":19,"tag":187,"props":213,"children":214},{},[215],{"type":19,"tag":191,"props":216,"children":218},{"colour":217},"#1A1A1A",[],{"type":19,"tag":187,"props":220,"children":221},{},[222],{"type":24,"value":223},"Content / Text / Icons",{"type":19,"tag":187,"props":225,"children":226},{},[227],{"type":24,"value":217},{"type":19,"tag":187,"props":229,"children":230},{},[231],{"type":24,"value":232},"rpl-clr-focus-contrast",{"type":19,"tag":155,"props":234,"children":235},{},[236,242,247,251],{"type":19,"tag":187,"props":237,"children":238},{},[239],{"type":19,"tag":191,"props":240,"children":241},{"colour":217},[],{"type":19,"tag":187,"props":243,"children":244},{},[245],{"type":24,"value":246},"Bottom Border",{"type":19,"tag":187,"props":248,"children":249},{},[250],{"type":24,"value":217},{"type":19,"tag":187,"props":252,"children":253},{},[254],{"type":24,"value":255},"rpl-clr-dark",{"type":19,"tag":48,"props":257,"children":259},{"id":258},"theming",[260],{"type":24,"value":261},"Theming",{"type":19,"tag":20,"props":263,"children":264},{},[265,267,273,275,281],{"type":24,"value":266},"For advice on focus state theming, see ",{"type":19,"tag":32,"props":268,"children":270},{"href":269},"/design-system/design/theming-guidance-for-designers/",[271],{"type":24,"value":272},"theming guidance for designers",{"type":24,"value":274}," or ",{"type":19,"tag":32,"props":276,"children":278},{"href":277},"/design-system/develop/theming/",[279],{"type":24,"value":280},"theming guidance for developers",{"type":24,"value":282},".",{"title":10,"searchDepth":284,"depth":284,"links":285},2,[286,288,289,290,291,292],{"id":50,"depth":287,"text":53},3,{"id":72,"depth":287,"text":75},{"id":93,"depth":287,"text":96},{"id":114,"depth":287,"text":117},{"id":135,"depth":287,"text":138},{"id":258,"depth":287,"text":261},"markdown","content:design-system:4.styles:focus-state.md","content","design-system/4.styles/focus-state.md","md",["ShallowRef",299],["ShallowReactive",300],{"/design-system/styles/focus-state":301},[302,308],{"_path":303,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":304,"description":305,"layout":13,"label":14,"_type":293,"_id":306,"_source":295,"_file":307,"_extension":297},"/design-system/styles/colour","Colour","Colour plays an important role in creating a consistent and strong visual digital products and services.","content:design-system:4.styles:colour.md","design-system/4.styles/colour.md",{"_path":309,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":310,"description":311,"layout":13,"label":14,"_type":293,"_id":312,"_source":295,"_file":313,"_extension":297},"/design-system/styles/grid","Grid","With up to 12 columns, you can build grids with responsive layouts across different breakpoints.","content:design-system:4.styles:grid.md","design-system/4.styles/grid.md",["ShallowRef",315],{},[317,322,564],{"title":318,"_path":319,"icon":320,"layout":321},"Ripple Design System","/","carbon:home","home",{"title":323,"_path":324,"children":325},"Design System","/design-system",[326,342,358,388,416],{"title":327,"_path":328,"children":329},"About","/design-system/about",[330,333,336,339],{"title":331,"_path":332,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":334,"_path":335,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":337,"_path":338,"layout":13},"Support","/design-system/about/getting-support",{"title":340,"_path":341,"layout":13},"Contributing","/design-system/about/contributing",{"title":343,"_path":344,"children":345},"Design","/design-system/design",[346,349,352,355],{"title":347,"_path":348,"layout":13},"Getting started","/design-system/design/getting-started",{"title":350,"_path":351,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":353,"_path":354,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":356,"_path":357,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":359,"_path":360,"children":361},"Develop","/design-system/develop",[362,364,366,369],{"title":347,"_path":363,"layout":13},"/design-system/develop/getting-started",{"title":340,"_path":365,"layout":13},"/design-system/develop/contributing",{"title":367,"_path":368,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":370,"_path":371,"children":372,"layout":13},"Usage","/design-system/develop/usage",[373,376,379,382,385],{"title":374,"_path":375,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":377,"_path":378,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":380,"_path":381,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":383,"_path":384,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":386,"_path":387,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":389,"_path":390,"children":391},"Styles","/design-system/styles",[392,393,394,395,398,401,404,407,410,413],{"title":304,"_path":303,"layout":13},{"title":11,"_path":7,"layout":13},{"title":310,"_path":309,"layout":13},{"title":396,"_path":397,"layout":13},"Icons","/design-system/styles/icons",{"title":399,"_path":400,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":402,"_path":403,"layout":13},"Layout","/design-system/styles/layout",{"title":405,"_path":406,"layout":13},"Logo","/design-system/styles/logo",{"title":408,"_path":409,"layout":13},"Motion","/design-system/styles/motion",{"title":411,"_path":412,"layout":13},"Spacing","/design-system/styles/spacing",{"title":414,"_path":415,"layout":13},"Typography","/design-system/styles/typography",{"title":417,"_path":418,"children":419},"Components","/design-system/components",[420,423,426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543,546,549,552,555,558,561],{"title":421,"_path":422,"layout":13},"Accordion","/design-system/components/accordion",{"title":424,"_path":425,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":427,"_path":428,"layout":13},"Alert","/design-system/components/alert",{"title":430,"_path":431,"layout":13},"Block quote","/design-system/components/block-quote",{"title":433,"_path":434,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":436,"_path":437,"layout":13},"Button","/design-system/components/button",{"title":439,"_path":440,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":442,"_path":443,"layout":13},"Callout","/design-system/components/callout",{"title":445,"_path":446,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":448,"_path":449,"layout":13},"Card","/design-system/components/card",{"title":451,"_path":452,"layout":13},"Carousel","/design-system/components/carousel",{"title":454,"_path":455,"layout":13},"Category grid","/design-system/components/category-grid",{"title":457,"_path":458,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":460,"_path":461,"layout":13},"Chip","/design-system/components/chip",{"title":463,"_path":464,"layout":13},"Contact us","/design-system/components/contact-us",{"title":466,"_path":467,"layout":13},"Date input","/design-system/components/date-input",{"title":469,"_path":470,"layout":13},"Detail list","/design-system/components/detail-list",{"title":472,"_path":473,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":475,"_path":476,"layout":13},"File","/design-system/components/file",{"title":478,"_path":479,"layout":13},"Footer","/design-system/components/footer",{"title":481,"_path":482,"layout":13},"Form","/design-system/components/form",{"title":484,"_path":485,"layout":13},"Form alert","/design-system/components/form-alert",{"title":487,"_path":488,"layout":13},"Header","/design-system/components/header",{"title":490,"_path":491,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":493,"_path":494,"layout":13},"Input field","/design-system/components/input-field",{"title":496,"_path":497,"layout":13},"Key dates","/design-system/components/key-dates",{"title":499,"_path":500,"layout":13},"Media","/design-system/components/media",{"title":502,"_path":503,"layout":13},"Media embed","/design-system/components/media-embed",{"title":505,"_path":506,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":508,"_path":509,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":511,"_path":512,"layout":13},"Option button","/design-system/components/option-button",{"title":514,"_path":515,"layout":13},"Page action","/design-system/components/page-action",{"title":517,"_path":518,"layout":13},"Pagination","/design-system/components/pagination",{"title":520,"_path":521,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":523,"_path":524,"layout":13},"Profile","/design-system/components/profile",{"title":526,"_path":527,"layout":13},"Radio button","/design-system/components/radio-button",{"title":529,"_path":530,"layout":13},"Related links","/design-system/components/related-links",{"title":532,"_path":533,"layout":13},"Results listing","/design-system/components/results-listing",{"title":535,"_path":536,"layout":13},"Search bar","/design-system/components/search-bar",{"title":538,"_path":539,"layout":13},"Skip link","/design-system/components/skip-link",{"title":541,"_path":542,"layout":13},"Social share","/design-system/components/social-share",{"title":544,"_path":545,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":547,"_path":548,"layout":13},"Table","/design-system/components/table",{"title":550,"_path":551,"layout":13},"Tabs","/design-system/components/tabs",{"title":553,"_path":554,"layout":13},"Tag","/design-system/components/tag",{"title":556,"_path":557,"layout":13},"Text area","/design-system/components/text-area",{"title":559,"_path":560,"layout":13},"Timeline","/design-system/components/timeline",{"title":562,"_path":563,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":565,"_path":566,"children":567,"layout":13},"Ripple Framework","/framework",[568,569,587,609],{"title":565,"_path":566,"layout":13},{"title":570,"_path":571,"children":572},"Key Concepts","/framework/key-concepts",[573,575,578,581,584],{"title":380,"_path":574,"layout":13},"/framework/key-concepts/nuxt",{"title":576,"_path":577,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":579,"_path":580,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":582,"_path":583,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":585,"_path":586,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":588,"_path":589,"children":590},"Guides","/framework/guides",[591,594,597,600,603,606],{"title":592,"_path":593,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":595,"_path":596,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":598,"_path":599,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":601,"_path":602,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":604,"_path":605,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":607,"_path":608,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":610,"_path":611,"layout":13},"Core modules","/framework/core-modules",["Reactive",613],["Set"],["Reactive",615],{"module-navigation":616},null,true,"/design-system/styles/focus-state/",1714695155856]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+<div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Swatch<!--]--></th><th><!--[-->Element<!--]--></th><th><!--[-->Value<!--]--></th><th><!--[-->CSS Variable<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[--><div class="docs-colour-swatch" style="background:#FF9E1B;" data-v-a0076e87></div><!--]--></td><td><!--[-->Background Fill<!--]--></td><td><!--[-->#FF9E1B<!--]--></td><td><!--[-->rpl-clr-focus<!--]--></td><!--]--></tr><tr><!--[--><td><!--[--><div class="docs-colour-swatch" style="background:#1A1A1A;" data-v-a0076e87></div><!--]--></td><td><!--[-->Content / Text / Icons<!--]--></td><td><!--[-->#1A1A1A<!--]--></td><td><!--[-->rpl-clr-focus-contrast<!--]--></td><!--]--></tr><tr><!--[--><td><!--[--><div class="docs-colour-swatch" style="background:#1A1A1A;" data-v-a0076e87></div><!--]--></td><td><!--[-->Bottom Border<!--]--></td><td><!--[-->#1A1A1A<!--]--></td><td><!--[-->rpl-clr-dark<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><h2 class="rpl-type-h3 docs-h3" id="theming" data-v-ea525968><a href="#theming" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Theming<!--]--></a></h2><p><!--[-->For advice on focus state theming, see <a href="/design-system/design/theming-guidance-for-designers/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for designers<!--]--><!--]--><!----><!--]--></a> or <a href="/design-system/develop/theming/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->theming guidance for developers<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/4.styles/focus-state.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/styles/focus-state/_payload.json">[{"state":1,"once":612,"_errors":614,"serverRendered":617,"path":618,"prerenderedAt":619},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":298,"$sdd-globals":314,"$sdd-navigation":316},["ShallowRef",4],["ShallowReactive",5],{"/design-system/styles/focus-state":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":293,"_id":294,"_source":295,"_file":296,"_extension":297},"/design-system/styles/focus-state","styles",false,"","Focus state","Focus states show when a user has highlighted an element, using an input method such as a keyboard or voice.","page","Core",{"type":16,"children":17,"toc":283},"root",[18,26,42,47,54,59,70,76,81,91,97,102,112,118,123,128,133,139,144,146,256,262],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","Some users use keyboards or other devices to navigate through a page by jumping from one interactive element to the next. Focus states help users understand which element is currently selected and ready for interaction.",{"type":19,"tag":20,"props":27,"children":28},{},[29,31,40],{"type":24,"value":30},"Focus states are orange and neutral-800, aiming to conform to the WCAG 2.1 Level AA ",{"type":19,"tag":32,"props":33,"children":37},"a",{"href":34,"rel":35},"https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html",[36],"nofollow",[38],{"type":24,"value":39},"non-text contrast",{"type":24,"value":41}," on any background colour.",{"type":19,"tag":20,"props":43,"children":44},{},[45],{"type":24,"value":46},"We have chosen this orange colour as it is a direct opposite of our primary colour. This allows all colourblind users to see a visual difference. Focus state styling also removes any border radius to create a bigger visual difference to surrounding elements.",{"type":19,"tag":48,"props":49,"children":51},"h3",{"id":50},"inline-style",[52],{"type":24,"value":53},"Inline style",{"type":19,"tag":20,"props":55,"children":56},{},[57],{"type":24,"value":58},"The inline focus state helps links stand out from the rest of the content on a page. When a link receives focus, it will underline and change background colour. Other components and elements that look like links use the inline style.",{"type":19,"tag":60,"props":61,"children":64},"docs-image-example",{"alt":62,"src":63},"An example of focus state colour contrast","/assets/img/focus-inline-focus.png",[65],{"type":19,"tag":20,"props":66,"children":67},{},[68],{"type":24,"value":69},".rpl-u-focusable-inline",{"type":19,"tag":48,"props":71,"children":73},{"id":72},"block-style",[74],{"type":24,"value":75},"Block style",{"type":19,"tag":20,"props":77,"children":78},{},[79],{"type":24,"value":80},"The block style completely highlights a section or whole component with the focus state. For example, when a button receives focus, a border is added to the bottom of the container and the background colour will change.",{"type":19,"tag":60,"props":82,"children":85},{"alt":83,"src":84},"Focus Link Visual Block Sample","/assets/img/focus-block-focus.png",[86],{"type":19,"tag":20,"props":87,"children":88},{},[89],{"type":24,"value":90},".rpl-u-focusable-block",{"type":19,"tag":48,"props":92,"children":94},{"id":93},"outline-focus-state-style",[95],{"type":24,"value":96},"Outline focus state style",{"type":19,"tag":20,"props":98,"children":99},{},[100],{"type":24,"value":101},"The outline styles are for when form inputs are focused. When a form field receives focus, it adds a border. If the element already has a border, the border gets thicker.",{"type":19,"tag":60,"props":103,"children":106},{"alt":104,"src":105},"Focus Link Visual Outline Focus Sample","/assets/img/focus-outline-focus.png",[107],{"type":19,"tag":20,"props":108,"children":109},{},[110],{"type":24,"value":111},".rpl-u-focusable-outline",{"type":19,"tag":48,"props":113,"children":115},{"id":114},"modified-focus-states-for-components",[116],{"type":24,"value":117},"Modified focus states for components",{"type":19,"tag":20,"props":119,"children":120},{},[121],{"type":24,"value":122},"The alert component has a modified focus state colour. This is consistent across all alert variants. It meets colour contrast requirements on all semantic colours, including danger and warning.",{"type":19,"tag":20,"props":124,"children":125},{},[126],{"type":24,"value":127},"The modified styling uses a white background in place of the orange, still with the dark content and border.",{"type":19,"tag":60,"props":129,"children":132},{"alt":130,"src":131},"Component Modified Focus State Sample","/assets/img/focus-alert-focus.png",[],{"type":19,"tag":48,"props":134,"children":136},{"id":135},"css-variables",[137],{"type":24,"value":138},"CSS Variables",{"type":19,"tag":20,"props":140,"children":141},{},[142],{"type":24,"value":143},"The focus state has three CSS Variables.",{"type":24,"value":145},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":147,"props":148,"children":149},"table",{},[150,179],{"type":19,"tag":151,"props":152,"children":153},"thead",{},[154],{"type":19,"tag":155,"props":156,"children":157},"tr",{},[158,164,169,174],{"type":19,"tag":159,"props":160,"children":161},"th",{},[162],{"type":24,"value":163},"Swatch",{"type":19,"tag":159,"props":165,"children":166},{},[167],{"type":24,"value":168},"Element",{"type":19,"tag":159,"props":170,"children":171},{},[172],{"type":24,"value":173},"Value",{"type":19,"tag":159,"props":175,"children":176},{},[177],{"type":24,"value":178},"CSS Variable",{"type":19,"tag":180,"props":181,"children":182},"tbody",{},[183,209,233],{"type":19,"tag":155,"props":184,"children":185},{},[186,195,200,204],{"type":19,"tag":187,"props":188,"children":189},"td",{},[190],{"type":19,"tag":191,"props":192,"children":194},"swatch",{"colour":193},"#FF9E1B",[],{"type":19,"tag":187,"props":196,"children":197},{},[198],{"type":24,"value":199},"Background Fill",{"type":19,"tag":187,"props":201,"children":202},{},[203],{"type":24,"value":193},{"type":19,"tag":187,"props":205,"children":206},{},[207],{"type":24,"value":208},"rpl-clr-focus",{"type":19,"tag":155,"props":210,"children":211},{},[212,219,224,228],{"type":19,"tag":187,"props":213,"children":214},{},[215],{"type":19,"tag":191,"props":216,"children":218},{"colour":217},"#1A1A1A",[],{"type":19,"tag":187,"props":220,"children":221},{},[222],{"type":24,"value":223},"Content / Text / Icons",{"type":19,"tag":187,"props":225,"children":226},{},[227],{"type":24,"value":217},{"type":19,"tag":187,"props":229,"children":230},{},[231],{"type":24,"value":232},"rpl-clr-focus-contrast",{"type":19,"tag":155,"props":234,"children":235},{},[236,242,247,251],{"type":19,"tag":187,"props":237,"children":238},{},[239],{"type":19,"tag":191,"props":240,"children":241},{"colour":217},[],{"type":19,"tag":187,"props":243,"children":244},{},[245],{"type":24,"value":246},"Bottom Border",{"type":19,"tag":187,"props":248,"children":249},{},[250],{"type":24,"value":217},{"type":19,"tag":187,"props":252,"children":253},{},[254],{"type":24,"value":255},"rpl-clr-dark",{"type":19,"tag":48,"props":257,"children":259},{"id":258},"theming",[260],{"type":24,"value":261},"Theming",{"type":19,"tag":20,"props":263,"children":264},{},[265,267,273,275,281],{"type":24,"value":266},"For advice on focus state theming, see ",{"type":19,"tag":32,"props":268,"children":270},{"href":269},"/design-system/design/theming-guidance-for-designers/",[271],{"type":24,"value":272},"theming guidance for designers",{"type":24,"value":274}," or ",{"type":19,"tag":32,"props":276,"children":278},{"href":277},"/design-system/develop/theming/",[279],{"type":24,"value":280},"theming guidance for developers",{"type":24,"value":282},".",{"title":10,"searchDepth":284,"depth":284,"links":285},2,[286,288,289,290,291,292],{"id":50,"depth":287,"text":53},3,{"id":72,"depth":287,"text":75},{"id":93,"depth":287,"text":96},{"id":114,"depth":287,"text":117},{"id":135,"depth":287,"text":138},{"id":258,"depth":287,"text":261},"markdown","content:design-system:4.styles:focus-state.md","content","design-system/4.styles/focus-state.md","md",["ShallowRef",299],["ShallowReactive",300],{"/design-system/styles/focus-state":301},[302,308],{"_path":303,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":304,"description":305,"layout":13,"label":14,"_type":293,"_id":306,"_source":295,"_file":307,"_extension":297},"/design-system/styles/colour","Colour","Colour plays an important role in creating a consistent and strong visual digital products and services.","content:design-system:4.styles:colour.md","design-system/4.styles/colour.md",{"_path":309,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":310,"description":311,"layout":13,"label":14,"_type":293,"_id":312,"_source":295,"_file":313,"_extension":297},"/design-system/styles/grid","Grid","With up to 12 columns, you can build grids with responsive layouts across different breakpoints.","content:design-system:4.styles:grid.md","design-system/4.styles/grid.md",["ShallowRef",315],{},[317,322,564],{"title":318,"_path":319,"icon":320,"layout":321},"Ripple Design System","/","carbon:home","home",{"title":323,"_path":324,"children":325},"Design System","/design-system",[326,342,358,388,416],{"title":327,"_path":328,"children":329},"About","/design-system/about",[330,333,336,339],{"title":331,"_path":332,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":334,"_path":335,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":337,"_path":338,"layout":13},"Support","/design-system/about/getting-support",{"title":340,"_path":341,"layout":13},"Contributing","/design-system/about/contributing",{"title":343,"_path":344,"children":345},"Design","/design-system/design",[346,349,352,355],{"title":347,"_path":348,"layout":13},"Getting started","/design-system/design/getting-started",{"title":350,"_path":351,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":353,"_path":354,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":356,"_path":357,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":359,"_path":360,"children":361},"Develop","/design-system/develop",[362,364,366,369],{"title":347,"_path":363,"layout":13},"/design-system/develop/getting-started",{"title":340,"_path":365,"layout":13},"/design-system/develop/contributing",{"title":367,"_path":368,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":370,"_path":371,"children":372,"layout":13},"Usage","/design-system/develop/usage",[373,376,379,382,385],{"title":374,"_path":375,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":377,"_path":378,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":380,"_path":381,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":383,"_path":384,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":386,"_path":387,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":389,"_path":390,"children":391},"Styles","/design-system/styles",[392,393,394,395,398,401,404,407,410,413],{"title":304,"_path":303,"layout":13},{"title":11,"_path":7,"layout":13},{"title":310,"_path":309,"layout":13},{"title":396,"_path":397,"layout":13},"Icons","/design-system/styles/icons",{"title":399,"_path":400,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":402,"_path":403,"layout":13},"Layout","/design-system/styles/layout",{"title":405,"_path":406,"layout":13},"Logo","/design-system/styles/logo",{"title":408,"_path":409,"layout":13},"Motion","/design-system/styles/motion",{"title":411,"_path":412,"layout":13},"Spacing","/design-system/styles/spacing",{"title":414,"_path":415,"layout":13},"Typography","/design-system/styles/typography",{"title":417,"_path":418,"children":419},"Components","/design-system/components",[420,423,426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543,546,549,552,555,558,561],{"title":421,"_path":422,"layout":13},"Accordion","/design-system/components/accordion",{"title":424,"_path":425,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":427,"_path":428,"layout":13},"Alert","/design-system/components/alert",{"title":430,"_path":431,"layout":13},"Block quote","/design-system/components/block-quote",{"title":433,"_path":434,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":436,"_path":437,"layout":13},"Button","/design-system/components/button",{"title":439,"_path":440,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":442,"_path":443,"layout":13},"Callout","/design-system/components/callout",{"title":445,"_path":446,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":448,"_path":449,"layout":13},"Card","/design-system/components/card",{"title":451,"_path":452,"layout":13},"Carousel","/design-system/components/carousel",{"title":454,"_path":455,"layout":13},"Category grid","/design-system/components/category-grid",{"title":457,"_path":458,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":460,"_path":461,"layout":13},"Chip","/design-system/components/chip",{"title":463,"_path":464,"layout":13},"Contact us","/design-system/components/contact-us",{"title":466,"_path":467,"layout":13},"Date input","/design-system/components/date-input",{"title":469,"_path":470,"layout":13},"Detail list","/design-system/components/detail-list",{"title":472,"_path":473,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":475,"_path":476,"layout":13},"File","/design-system/components/file",{"title":478,"_path":479,"layout":13},"Footer","/design-system/components/footer",{"title":481,"_path":482,"layout":13},"Form","/design-system/components/form",{"title":484,"_path":485,"layout":13},"Form alert","/design-system/components/form-alert",{"title":487,"_path":488,"layout":13},"Header","/design-system/components/header",{"title":490,"_path":491,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":493,"_path":494,"layout":13},"Input field","/design-system/components/input-field",{"title":496,"_path":497,"layout":13},"Key dates","/design-system/components/key-dates",{"title":499,"_path":500,"layout":13},"Media","/design-system/components/media",{"title":502,"_path":503,"layout":13},"Media embed","/design-system/components/media-embed",{"title":505,"_path":506,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":508,"_path":509,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":511,"_path":512,"layout":13},"Option button","/design-system/components/option-button",{"title":514,"_path":515,"layout":13},"Page action","/design-system/components/page-action",{"title":517,"_path":518,"layout":13},"Pagination","/design-system/components/pagination",{"title":520,"_path":521,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":523,"_path":524,"layout":13},"Profile","/design-system/components/profile",{"title":526,"_path":527,"layout":13},"Radio button","/design-system/components/radio-button",{"title":529,"_path":530,"layout":13},"Related links","/design-system/components/related-links",{"title":532,"_path":533,"layout":13},"Results listing","/design-system/components/results-listing",{"title":535,"_path":536,"layout":13},"Search bar","/design-system/components/search-bar",{"title":538,"_path":539,"layout":13},"Skip link","/design-system/components/skip-link",{"title":541,"_path":542,"layout":13},"Social share","/design-system/components/social-share",{"title":544,"_path":545,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":547,"_path":548,"layout":13},"Table","/design-system/components/table",{"title":550,"_path":551,"layout":13},"Tabs","/design-system/components/tabs",{"title":553,"_path":554,"layout":13},"Tag","/design-system/components/tag",{"title":556,"_path":557,"layout":13},"Text area","/design-system/components/text-area",{"title":559,"_path":560,"layout":13},"Timeline","/design-system/components/timeline",{"title":562,"_path":563,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":565,"_path":566,"children":567,"layout":13},"Ripple Framework","/framework",[568,569,587,609],{"title":565,"_path":566,"layout":13},{"title":570,"_path":571,"children":572},"Key Concepts","/framework/key-concepts",[573,575,578,581,584],{"title":380,"_path":574,"layout":13},"/framework/key-concepts/nuxt",{"title":576,"_path":577,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":579,"_path":580,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":582,"_path":583,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":585,"_path":586,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":588,"_path":589,"children":590},"Guides","/framework/guides",[591,594,597,600,603,606],{"title":592,"_path":593,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":595,"_path":596,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":598,"_path":599,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":601,"_path":602,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":604,"_path":605,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":607,"_path":608,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":610,"_path":611,"layout":13},"Core modules","/framework/core-modules",["Reactive",613],["Set"],["Reactive",615],{"module-navigation":616},null,true,"/design-system/styles/focus-state/",1714695653964]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/styles/grid/_payload.json b/design-system/styles/grid/_payload.json
index 2491903e6d..3eb4b0c9b8 100644
--- a/design-system/styles/grid/_payload.json
+++ b/design-system/styles/grid/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":70,"items":71},"/design-system/styles","Styles",true,[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":70,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695151928]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":70,"items":71},"/design-system/styles","Styles",true,[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":70,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695650176]
\ No newline at end of file
diff --git a/design-system/styles/grid/index.html b/design-system/styles/grid/index.html
index 857aea803d..059101c890 100644
--- a/design-system/styles/grid/index.html
+++ b/design-system/styles/grid/index.html
@@ -24,63 +24,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTable.Nr-94ppo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseThead.x0xD32yi.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTr.NjbdsN4h.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTh.15m2hyNr.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTbody.pO4HZmMb.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTd.KWvY0UVz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseImg.wgVpK8mn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTable.d8cdIzif.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseThead.alimbSyj.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTr.rCUlpnCA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTh.GnFrmIgb.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTbody.FPzd5AuU.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTd.ydAecYY-.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseImg.Wu9xgcX7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -206,8 +206,8 @@
 
 
 
-<div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Column Span<!--]--></th><th><!--[-->Layout<!--]--></th><th><!--[-->Breakpoint<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->12<!--]--></td><td><!--[-->Full<!--]--></td><td><!--[-->XS • S • M • L • XL<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->6<!--]--></td><td><!--[-->Half<!--]--></td><td><!--[-->XS • S • M • L • XL<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->7<!--]--></td><td><!--[-->Two thirds<!--]--></td><td><!--[-->M • L • XL<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->4<!--]--></td><td><!--[-->One third<!--]--></td><td><!--[-->M • L • XL<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->3<!--]--></td><td><!--[-->One quarter<!--]--></td><td><!--[-->L • XL<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/4.styles/grid.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/styles/grid/_payload.json">[{"state":1,"once":798,"_errors":800,"serverRendered":803,"path":7,"prerenderedAt":804},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":486,"$sdd-globals":502,"$sdd-navigation":504},["ShallowRef",4],["ShallowReactive",5],{"/design-system/styles/grid":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":481,"_id":482,"_source":483,"_file":484,"_extension":485},"/design-system/styles/grid","styles",false,"","Grid","With up to 12 columns, you can build grids with responsive layouts across different breakpoints.","page","Core",{"type":16,"children":17,"toc":472},"root",[18,26,31,38,43,45,168,174,179,188,190,329,335,340,345,350,357,358],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","Grids are a crucial component of any design system. They provide a framework for arranging content in an appealing and structured manner.",{"type":19,"tag":20,"props":27,"children":28},{},[29],{"type":24,"value":30},"We've designed the grid for a high degree of flexibility and responsiveness.",{"type":19,"tag":32,"props":33,"children":35},"h2",{"id":34},"breakpoints",[36],{"type":24,"value":37},"Breakpoints",{"type":19,"tag":20,"props":39,"children":40},{},[41],{"type":24,"value":42},"Ripple has 5 breakpoints. These ensure content is at an optimal layout for readability and accessibility.",{"type":24,"value":44},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":46,"props":47,"children":48},"table",{},[49,73],{"type":19,"tag":50,"props":51,"children":52},"thead",{},[53],{"type":19,"tag":54,"props":55,"children":56},"tr",{},[57,63,68],{"type":19,"tag":58,"props":59,"children":60},"th",{},[61],{"type":24,"value":62},"Breakpoint",{"type":19,"tag":58,"props":64,"children":65},{},[66],{"type":24,"value":67},"Width",{"type":19,"tag":58,"props":69,"children":70},{},[71],{"type":24,"value":72},"Active content area",{"type":19,"tag":74,"props":75,"children":76},"tbody",{},[77,96,114,132,150],{"type":19,"tag":54,"props":78,"children":79},{},[80,86,91],{"type":19,"tag":81,"props":82,"children":83},"td",{},[84],{"type":24,"value":85},"XS",{"type":19,"tag":81,"props":87,"children":88},{},[89],{"type":24,"value":90},"\u003C575px",{"type":19,"tag":81,"props":92,"children":93},{},[94],{"type":24,"value":95},"288 – 543px",{"type":19,"tag":54,"props":97,"children":98},{},[99,104,109],{"type":19,"tag":81,"props":100,"children":101},{},[102],{"type":24,"value":103},"S",{"type":19,"tag":81,"props":105,"children":106},{},[107],{"type":24,"value":108},"576 – 767px",{"type":19,"tag":81,"props":110,"children":111},{},[112],{"type":24,"value":113},"544 – 735px",{"type":19,"tag":54,"props":115,"children":116},{},[117,122,127],{"type":19,"tag":81,"props":118,"children":119},{},[120],{"type":24,"value":121},"M",{"type":19,"tag":81,"props":123,"children":124},{},[125],{"type":24,"value":126},"768 – 991px",{"type":19,"tag":81,"props":128,"children":129},{},[130],{"type":24,"value":131},"736 – 927px",{"type":19,"tag":54,"props":133,"children":134},{},[135,140,145],{"type":19,"tag":81,"props":136,"children":137},{},[138],{"type":24,"value":139},"L",{"type":19,"tag":81,"props":141,"children":142},{},[143],{"type":24,"value":144},"992 – 1199px",{"type":19,"tag":81,"props":146,"children":147},{},[148],{"type":24,"value":149},"864 – 1071px",{"type":19,"tag":54,"props":151,"children":152},{},[153,158,163],{"type":19,"tag":81,"props":154,"children":155},{},[156],{"type":24,"value":157},"XL",{"type":19,"tag":81,"props":159,"children":160},{},[161],{"type":24,"value":162},"1200px +",{"type":19,"tag":81,"props":164,"children":165},{},[166],{"type":24,"value":167},"1040px",{"type":19,"tag":32,"props":169,"children":171},{"id":170},"grids",[172],{"type":24,"value":173},"Grids",{"type":19,"tag":20,"props":175,"children":176},{},[177],{"type":24,"value":178},"The grid is made up of three elements: columns, gutters, and margins.",{"type":19,"tag":20,"props":180,"children":181},{},[182],{"type":19,"tag":183,"props":184,"children":187},"img",{"alt":185,"src":186},"Visual of basic grid / column / gutter / margin anatomy","/assets/img/Grid-Grid-Anatomy.png",[],{"type":24,"value":189},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":46,"props":191,"children":192},{},[193,218],{"type":19,"tag":50,"props":194,"children":195},{},[196],{"type":19,"tag":54,"props":197,"children":198},{},[199,203,208,213],{"type":19,"tag":58,"props":200,"children":201},{},[202],{"type":24,"value":62},{"type":19,"tag":58,"props":204,"children":205},{},[206],{"type":24,"value":207},"Margins",{"type":19,"tag":58,"props":209,"children":210},{},[211],{"type":24,"value":212},"Gutter",{"type":19,"tag":58,"props":214,"children":215},{},[216],{"type":24,"value":217},"Column type / width",{"type":19,"tag":74,"props":219,"children":220},{},[221,243,263,285,306],{"type":19,"tag":54,"props":222,"children":223},{},[224,229,234,238],{"type":19,"tag":81,"props":225,"children":226},{},[227],{"type":24,"value":228},"XS  • \u003C575px",{"type":19,"tag":81,"props":230,"children":231},{},[232],{"type":24,"value":233},"16px",{"type":19,"tag":81,"props":235,"children":236},{},[237],{"type":24,"value":233},{"type":19,"tag":81,"props":239,"children":240},{},[241],{"type":24,"value":242},"Fluid",{"type":19,"tag":54,"props":244,"children":245},{},[246,251,255,259],{"type":19,"tag":81,"props":247,"children":248},{},[249],{"type":24,"value":250},"S   • 576 – 767px",{"type":19,"tag":81,"props":252,"children":253},{},[254],{"type":24,"value":233},{"type":19,"tag":81,"props":256,"children":257},{},[258],{"type":24,"value":233},{"type":19,"tag":81,"props":260,"children":261},{},[262],{"type":24,"value":242},{"type":19,"tag":54,"props":264,"children":265},{},[266,271,276,281],{"type":19,"tag":81,"props":267,"children":268},{},[269],{"type":24,"value":270},"M   • 768 – 991px",{"type":19,"tag":81,"props":272,"children":273},{},[274],{"type":24,"value":275},"32px",{"type":19,"tag":81,"props":277,"children":278},{},[279],{"type":24,"value":280},"24px",{"type":19,"tag":81,"props":282,"children":283},{},[284],{"type":24,"value":242},{"type":19,"tag":54,"props":286,"children":287},{},[288,293,298,302],{"type":19,"tag":81,"props":289,"children":290},{},[291],{"type":24,"value":292},"L   • 992 – 1199px",{"type":19,"tag":81,"props":294,"children":295},{},[296],{"type":24,"value":297},"64px",{"type":19,"tag":81,"props":299,"children":300},{},[301],{"type":24,"value":280},{"type":19,"tag":81,"props":303,"children":304},{},[305],{"type":24,"value":242},{"type":19,"tag":54,"props":307,"children":308},{},[309,314,319,324],{"type":19,"tag":81,"props":310,"children":311},{},[312],{"type":24,"value":313},"XL  • 1200px +",{"type":19,"tag":81,"props":315,"children":316},{},[317],{"type":24,"value":318},"80px",{"type":19,"tag":81,"props":320,"children":321},{},[322],{"type":24,"value":323},"28px",{"type":19,"tag":81,"props":325,"children":326},{},[327],{"type":24,"value":328},"Fixed / 61px",{"type":19,"tag":32,"props":330,"children":332},{"id":331},"usage",[333],{"type":24,"value":334},"Usage",{"type":19,"tag":20,"props":336,"children":337},{},[338],{"type":24,"value":339},"Use the grid system to structure your content.",{"type":19,"tag":20,"props":341,"children":342},{},[343],{"type":24,"value":344},"Most vic.gov.au pages follow a ‘two-thirds and one-third’ layout. But, the grid system allows for more combinations if needed.",{"type":19,"tag":20,"props":346,"children":347},{},[348],{"type":24,"value":349},"Your main content should always be in a two-thirds column. This is even if you’re not using a corresponding one-third column for secondary content.",{"type":19,"tag":351,"props":352,"children":354},"h3",{"id":353},"column-layouts",[355],{"type":24,"value":356},"Column layouts",{"type":24,"value":44},{"type":19,"tag":46,"props":359,"children":360},{},[361,381],{"type":19,"tag":50,"props":362,"children":363},{},[364],{"type":19,"tag":54,"props":365,"children":366},{},[367,372,377],{"type":19,"tag":58,"props":368,"children":369},{},[370],{"type":24,"value":371},"Column Span",{"type":19,"tag":58,"props":373,"children":374},{},[375],{"type":24,"value":376},"Layout",{"type":19,"tag":58,"props":378,"children":379},{},[380],{"type":24,"value":62},{"type":19,"tag":74,"props":382,"children":383},{},[384,402,419,437,454],{"type":19,"tag":54,"props":385,"children":386},{},[387,392,397],{"type":19,"tag":81,"props":388,"children":389},{},[390],{"type":24,"value":391},"12",{"type":19,"tag":81,"props":393,"children":394},{},[395],{"type":24,"value":396},"Full",{"type":19,"tag":81,"props":398,"children":399},{},[400],{"type":24,"value":401},"XS • S • M • L • XL",{"type":19,"tag":54,"props":403,"children":404},{},[405,410,415],{"type":19,"tag":81,"props":406,"children":407},{},[408],{"type":24,"value":409},"6",{"type":19,"tag":81,"props":411,"children":412},{},[413],{"type":24,"value":414},"Half",{"type":19,"tag":81,"props":416,"children":417},{},[418],{"type":24,"value":401},{"type":19,"tag":54,"props":420,"children":421},{},[422,427,432],{"type":19,"tag":81,"props":423,"children":424},{},[425],{"type":24,"value":426},"7",{"type":19,"tag":81,"props":428,"children":429},{},[430],{"type":24,"value":431},"Two thirds",{"type":19,"tag":81,"props":433,"children":434},{},[435],{"type":24,"value":436},"M • L • XL",{"type":19,"tag":54,"props":438,"children":439},{},[440,445,450],{"type":19,"tag":81,"props":441,"children":442},{},[443],{"type":24,"value":444},"4",{"type":19,"tag":81,"props":446,"children":447},{},[448],{"type":24,"value":449},"One third",{"type":19,"tag":81,"props":451,"children":452},{},[453],{"type":24,"value":436},{"type":19,"tag":54,"props":455,"children":456},{},[457,462,467],{"type":19,"tag":81,"props":458,"children":459},{},[460],{"type":24,"value":461},"3",{"type":19,"tag":81,"props":463,"children":464},{},[465],{"type":24,"value":466},"One quarter",{"type":19,"tag":81,"props":468,"children":469},{},[470],{"type":24,"value":471},"L • XL",{"title":10,"searchDepth":473,"depth":473,"links":474},2,[475,476,477],{"id":34,"depth":473,"text":37},{"id":170,"depth":473,"text":173},{"id":331,"depth":473,"text":334,"children":478},[479],{"id":353,"depth":480,"text":356},3,"markdown","content:design-system:4.styles:grid.md","content","design-system/4.styles/grid.md","md",["ShallowRef",487],["ShallowReactive",488],{"/design-system/styles/grid":489},[490,496],{"_path":491,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":492,"description":493,"layout":13,"label":14,"_type":481,"_id":494,"_source":483,"_file":495,"_extension":485},"/design-system/styles/focus-state","Focus state","Focus states show when a user has highlighted an element, using an input method such as a keyboard or voice.","content:design-system:4.styles:focus-state.md","design-system/4.styles/focus-state.md",{"_path":497,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":498,"description":499,"layout":13,"label":14,"_type":481,"_id":500,"_source":483,"_file":501,"_extension":485},"/design-system/styles/icons","Icons","Use icons to illustrate actions and interactions, communicate statuses, and draw attention to important information.","content:design-system:4.styles:icons.md","design-system/4.styles/icons.md",["ShallowRef",503],{},[505,510,750],{"title":506,"_path":507,"icon":508,"layout":509},"Ripple Design System","/","carbon:home","home",{"title":511,"_path":512,"children":513},"Design System","/design-system",[514,530,546,575,602],{"title":515,"_path":516,"children":517},"About","/design-system/about",[518,521,524,527],{"title":519,"_path":520,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":522,"_path":523,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":525,"_path":526,"layout":13},"Support","/design-system/about/getting-support",{"title":528,"_path":529,"layout":13},"Contributing","/design-system/about/contributing",{"title":531,"_path":532,"children":533},"Design","/design-system/design",[534,537,540,543],{"title":535,"_path":536,"layout":13},"Getting started","/design-system/design/getting-started",{"title":538,"_path":539,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":541,"_path":542,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":544,"_path":545,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":547,"_path":548,"children":549},"Develop","/design-system/develop",[550,552,554,557],{"title":535,"_path":551,"layout":13},"/design-system/develop/getting-started",{"title":528,"_path":553,"layout":13},"/design-system/develop/contributing",{"title":555,"_path":556,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":334,"_path":558,"children":559,"layout":13},"/design-system/develop/usage",[560,563,566,569,572],{"title":561,"_path":562,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":564,"_path":565,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":567,"_path":568,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":570,"_path":571,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":573,"_path":574,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":576,"_path":577,"children":578},"Styles","/design-system/styles",[579,582,583,584,585,588,590,593,596,599],{"title":580,"_path":581,"layout":13},"Colour","/design-system/styles/colour",{"title":492,"_path":491,"layout":13},{"title":11,"_path":7,"layout":13},{"title":498,"_path":497,"layout":13},{"title":586,"_path":587,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":376,"_path":589,"layout":13},"/design-system/styles/layout",{"title":591,"_path":592,"layout":13},"Logo","/design-system/styles/logo",{"title":594,"_path":595,"layout":13},"Motion","/design-system/styles/motion",{"title":597,"_path":598,"layout":13},"Spacing","/design-system/styles/spacing",{"title":600,"_path":601,"layout":13},"Typography","/design-system/styles/typography",{"title":603,"_path":604,"children":605},"Components","/design-system/components",[606,609,612,615,618,621,624,627,630,633,636,639,642,645,648,651,654,657,660,663,666,669,672,675,678,681,684,687,690,693,696,699,702,705,708,711,714,717,720,723,726,729,732,735,738,741,744,747],{"title":607,"_path":608,"layout":13},"Accordion","/design-system/components/accordion",{"title":610,"_path":611,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":613,"_path":614,"layout":13},"Alert","/design-system/components/alert",{"title":616,"_path":617,"layout":13},"Block quote","/design-system/components/block-quote",{"title":619,"_path":620,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":622,"_path":623,"layout":13},"Button","/design-system/components/button",{"title":625,"_path":626,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":628,"_path":629,"layout":13},"Callout","/design-system/components/callout",{"title":631,"_path":632,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":634,"_path":635,"layout":13},"Card","/design-system/components/card",{"title":637,"_path":638,"layout":13},"Carousel","/design-system/components/carousel",{"title":640,"_path":641,"layout":13},"Category grid","/design-system/components/category-grid",{"title":643,"_path":644,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":646,"_path":647,"layout":13},"Chip","/design-system/components/chip",{"title":649,"_path":650,"layout":13},"Contact us","/design-system/components/contact-us",{"title":652,"_path":653,"layout":13},"Date input","/design-system/components/date-input",{"title":655,"_path":656,"layout":13},"Detail list","/design-system/components/detail-list",{"title":658,"_path":659,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":661,"_path":662,"layout":13},"File","/design-system/components/file",{"title":664,"_path":665,"layout":13},"Footer","/design-system/components/footer",{"title":667,"_path":668,"layout":13},"Form","/design-system/components/form",{"title":670,"_path":671,"layout":13},"Form alert","/design-system/components/form-alert",{"title":673,"_path":674,"layout":13},"Header","/design-system/components/header",{"title":676,"_path":677,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":679,"_path":680,"layout":13},"Input field","/design-system/components/input-field",{"title":682,"_path":683,"layout":13},"Key dates","/design-system/components/key-dates",{"title":685,"_path":686,"layout":13},"Media","/design-system/components/media",{"title":688,"_path":689,"layout":13},"Media embed","/design-system/components/media-embed",{"title":691,"_path":692,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":694,"_path":695,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":697,"_path":698,"layout":13},"Option button","/design-system/components/option-button",{"title":700,"_path":701,"layout":13},"Page action","/design-system/components/page-action",{"title":703,"_path":704,"layout":13},"Pagination","/design-system/components/pagination",{"title":706,"_path":707,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":709,"_path":710,"layout":13},"Profile","/design-system/components/profile",{"title":712,"_path":713,"layout":13},"Radio button","/design-system/components/radio-button",{"title":715,"_path":716,"layout":13},"Related links","/design-system/components/related-links",{"title":718,"_path":719,"layout":13},"Results listing","/design-system/components/results-listing",{"title":721,"_path":722,"layout":13},"Search bar","/design-system/components/search-bar",{"title":724,"_path":725,"layout":13},"Skip link","/design-system/components/skip-link",{"title":727,"_path":728,"layout":13},"Social share","/design-system/components/social-share",{"title":730,"_path":731,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":733,"_path":734,"layout":13},"Table","/design-system/components/table",{"title":736,"_path":737,"layout":13},"Tabs","/design-system/components/tabs",{"title":739,"_path":740,"layout":13},"Tag","/design-system/components/tag",{"title":742,"_path":743,"layout":13},"Text area","/design-system/components/text-area",{"title":745,"_path":746,"layout":13},"Timeline","/design-system/components/timeline",{"title":748,"_path":749,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":751,"_path":752,"children":753,"layout":13},"Ripple Framework","/framework",[754,755,773,795],{"title":751,"_path":752,"layout":13},{"title":756,"_path":757,"children":758},"Key Concepts","/framework/key-concepts",[759,761,764,767,770],{"title":567,"_path":760,"layout":13},"/framework/key-concepts/nuxt",{"title":762,"_path":763,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":765,"_path":766,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":768,"_path":769,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":771,"_path":772,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":774,"_path":775,"children":776},"Guides","/framework/guides",[777,780,783,786,789,792],{"title":778,"_path":779,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":781,"_path":782,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":784,"_path":785,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":787,"_path":788,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":790,"_path":791,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":793,"_path":794,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":796,"_path":797,"layout":13},"Core modules","/framework/core-modules",["Reactive",799],["Set"],["Reactive",801],{"module-navigation":802},null,true,1714695151928]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+<div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Column Span<!--]--></th><th><!--[-->Layout<!--]--></th><th><!--[-->Breakpoint<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->12<!--]--></td><td><!--[-->Full<!--]--></td><td><!--[-->XS • S • M • L • XL<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->6<!--]--></td><td><!--[-->Half<!--]--></td><td><!--[-->XS • S • M • L • XL<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->7<!--]--></td><td><!--[-->Two thirds<!--]--></td><td><!--[-->M • L • XL<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->4<!--]--></td><td><!--[-->One third<!--]--></td><td><!--[-->M • L • XL<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->3<!--]--></td><td><!--[-->One quarter<!--]--></td><td><!--[-->L • XL<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/4.styles/grid.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/styles/grid/_payload.json">[{"state":1,"once":798,"_errors":800,"serverRendered":803,"path":7,"prerenderedAt":804},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":486,"$sdd-globals":502,"$sdd-navigation":504},["ShallowRef",4],["ShallowReactive",5],{"/design-system/styles/grid":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":481,"_id":482,"_source":483,"_file":484,"_extension":485},"/design-system/styles/grid","styles",false,"","Grid","With up to 12 columns, you can build grids with responsive layouts across different breakpoints.","page","Core",{"type":16,"children":17,"toc":472},"root",[18,26,31,38,43,45,168,174,179,188,190,329,335,340,345,350,357,358],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","Grids are a crucial component of any design system. They provide a framework for arranging content in an appealing and structured manner.",{"type":19,"tag":20,"props":27,"children":28},{},[29],{"type":24,"value":30},"We've designed the grid for a high degree of flexibility and responsiveness.",{"type":19,"tag":32,"props":33,"children":35},"h2",{"id":34},"breakpoints",[36],{"type":24,"value":37},"Breakpoints",{"type":19,"tag":20,"props":39,"children":40},{},[41],{"type":24,"value":42},"Ripple has 5 breakpoints. These ensure content is at an optimal layout for readability and accessibility.",{"type":24,"value":44},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":46,"props":47,"children":48},"table",{},[49,73],{"type":19,"tag":50,"props":51,"children":52},"thead",{},[53],{"type":19,"tag":54,"props":55,"children":56},"tr",{},[57,63,68],{"type":19,"tag":58,"props":59,"children":60},"th",{},[61],{"type":24,"value":62},"Breakpoint",{"type":19,"tag":58,"props":64,"children":65},{},[66],{"type":24,"value":67},"Width",{"type":19,"tag":58,"props":69,"children":70},{},[71],{"type":24,"value":72},"Active content area",{"type":19,"tag":74,"props":75,"children":76},"tbody",{},[77,96,114,132,150],{"type":19,"tag":54,"props":78,"children":79},{},[80,86,91],{"type":19,"tag":81,"props":82,"children":83},"td",{},[84],{"type":24,"value":85},"XS",{"type":19,"tag":81,"props":87,"children":88},{},[89],{"type":24,"value":90},"\u003C575px",{"type":19,"tag":81,"props":92,"children":93},{},[94],{"type":24,"value":95},"288 – 543px",{"type":19,"tag":54,"props":97,"children":98},{},[99,104,109],{"type":19,"tag":81,"props":100,"children":101},{},[102],{"type":24,"value":103},"S",{"type":19,"tag":81,"props":105,"children":106},{},[107],{"type":24,"value":108},"576 – 767px",{"type":19,"tag":81,"props":110,"children":111},{},[112],{"type":24,"value":113},"544 – 735px",{"type":19,"tag":54,"props":115,"children":116},{},[117,122,127],{"type":19,"tag":81,"props":118,"children":119},{},[120],{"type":24,"value":121},"M",{"type":19,"tag":81,"props":123,"children":124},{},[125],{"type":24,"value":126},"768 – 991px",{"type":19,"tag":81,"props":128,"children":129},{},[130],{"type":24,"value":131},"736 – 927px",{"type":19,"tag":54,"props":133,"children":134},{},[135,140,145],{"type":19,"tag":81,"props":136,"children":137},{},[138],{"type":24,"value":139},"L",{"type":19,"tag":81,"props":141,"children":142},{},[143],{"type":24,"value":144},"992 – 1199px",{"type":19,"tag":81,"props":146,"children":147},{},[148],{"type":24,"value":149},"864 – 1071px",{"type":19,"tag":54,"props":151,"children":152},{},[153,158,163],{"type":19,"tag":81,"props":154,"children":155},{},[156],{"type":24,"value":157},"XL",{"type":19,"tag":81,"props":159,"children":160},{},[161],{"type":24,"value":162},"1200px +",{"type":19,"tag":81,"props":164,"children":165},{},[166],{"type":24,"value":167},"1040px",{"type":19,"tag":32,"props":169,"children":171},{"id":170},"grids",[172],{"type":24,"value":173},"Grids",{"type":19,"tag":20,"props":175,"children":176},{},[177],{"type":24,"value":178},"The grid is made up of three elements: columns, gutters, and margins.",{"type":19,"tag":20,"props":180,"children":181},{},[182],{"type":19,"tag":183,"props":184,"children":187},"img",{"alt":185,"src":186},"Visual of basic grid / column / gutter / margin anatomy","/assets/img/Grid-Grid-Anatomy.png",[],{"type":24,"value":189},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":46,"props":191,"children":192},{},[193,218],{"type":19,"tag":50,"props":194,"children":195},{},[196],{"type":19,"tag":54,"props":197,"children":198},{},[199,203,208,213],{"type":19,"tag":58,"props":200,"children":201},{},[202],{"type":24,"value":62},{"type":19,"tag":58,"props":204,"children":205},{},[206],{"type":24,"value":207},"Margins",{"type":19,"tag":58,"props":209,"children":210},{},[211],{"type":24,"value":212},"Gutter",{"type":19,"tag":58,"props":214,"children":215},{},[216],{"type":24,"value":217},"Column type / width",{"type":19,"tag":74,"props":219,"children":220},{},[221,243,263,285,306],{"type":19,"tag":54,"props":222,"children":223},{},[224,229,234,238],{"type":19,"tag":81,"props":225,"children":226},{},[227],{"type":24,"value":228},"XS  • \u003C575px",{"type":19,"tag":81,"props":230,"children":231},{},[232],{"type":24,"value":233},"16px",{"type":19,"tag":81,"props":235,"children":236},{},[237],{"type":24,"value":233},{"type":19,"tag":81,"props":239,"children":240},{},[241],{"type":24,"value":242},"Fluid",{"type":19,"tag":54,"props":244,"children":245},{},[246,251,255,259],{"type":19,"tag":81,"props":247,"children":248},{},[249],{"type":24,"value":250},"S   • 576 – 767px",{"type":19,"tag":81,"props":252,"children":253},{},[254],{"type":24,"value":233},{"type":19,"tag":81,"props":256,"children":257},{},[258],{"type":24,"value":233},{"type":19,"tag":81,"props":260,"children":261},{},[262],{"type":24,"value":242},{"type":19,"tag":54,"props":264,"children":265},{},[266,271,276,281],{"type":19,"tag":81,"props":267,"children":268},{},[269],{"type":24,"value":270},"M   • 768 – 991px",{"type":19,"tag":81,"props":272,"children":273},{},[274],{"type":24,"value":275},"32px",{"type":19,"tag":81,"props":277,"children":278},{},[279],{"type":24,"value":280},"24px",{"type":19,"tag":81,"props":282,"children":283},{},[284],{"type":24,"value":242},{"type":19,"tag":54,"props":286,"children":287},{},[288,293,298,302],{"type":19,"tag":81,"props":289,"children":290},{},[291],{"type":24,"value":292},"L   • 992 – 1199px",{"type":19,"tag":81,"props":294,"children":295},{},[296],{"type":24,"value":297},"64px",{"type":19,"tag":81,"props":299,"children":300},{},[301],{"type":24,"value":280},{"type":19,"tag":81,"props":303,"children":304},{},[305],{"type":24,"value":242},{"type":19,"tag":54,"props":307,"children":308},{},[309,314,319,324],{"type":19,"tag":81,"props":310,"children":311},{},[312],{"type":24,"value":313},"XL  • 1200px +",{"type":19,"tag":81,"props":315,"children":316},{},[317],{"type":24,"value":318},"80px",{"type":19,"tag":81,"props":320,"children":321},{},[322],{"type":24,"value":323},"28px",{"type":19,"tag":81,"props":325,"children":326},{},[327],{"type":24,"value":328},"Fixed / 61px",{"type":19,"tag":32,"props":330,"children":332},{"id":331},"usage",[333],{"type":24,"value":334},"Usage",{"type":19,"tag":20,"props":336,"children":337},{},[338],{"type":24,"value":339},"Use the grid system to structure your content.",{"type":19,"tag":20,"props":341,"children":342},{},[343],{"type":24,"value":344},"Most vic.gov.au pages follow a ‘two-thirds and one-third’ layout. But, the grid system allows for more combinations if needed.",{"type":19,"tag":20,"props":346,"children":347},{},[348],{"type":24,"value":349},"Your main content should always be in a two-thirds column. This is even if you’re not using a corresponding one-third column for secondary content.",{"type":19,"tag":351,"props":352,"children":354},"h3",{"id":353},"column-layouts",[355],{"type":24,"value":356},"Column layouts",{"type":24,"value":44},{"type":19,"tag":46,"props":359,"children":360},{},[361,381],{"type":19,"tag":50,"props":362,"children":363},{},[364],{"type":19,"tag":54,"props":365,"children":366},{},[367,372,377],{"type":19,"tag":58,"props":368,"children":369},{},[370],{"type":24,"value":371},"Column Span",{"type":19,"tag":58,"props":373,"children":374},{},[375],{"type":24,"value":376},"Layout",{"type":19,"tag":58,"props":378,"children":379},{},[380],{"type":24,"value":62},{"type":19,"tag":74,"props":382,"children":383},{},[384,402,419,437,454],{"type":19,"tag":54,"props":385,"children":386},{},[387,392,397],{"type":19,"tag":81,"props":388,"children":389},{},[390],{"type":24,"value":391},"12",{"type":19,"tag":81,"props":393,"children":394},{},[395],{"type":24,"value":396},"Full",{"type":19,"tag":81,"props":398,"children":399},{},[400],{"type":24,"value":401},"XS • S • M • L • XL",{"type":19,"tag":54,"props":403,"children":404},{},[405,410,415],{"type":19,"tag":81,"props":406,"children":407},{},[408],{"type":24,"value":409},"6",{"type":19,"tag":81,"props":411,"children":412},{},[413],{"type":24,"value":414},"Half",{"type":19,"tag":81,"props":416,"children":417},{},[418],{"type":24,"value":401},{"type":19,"tag":54,"props":420,"children":421},{},[422,427,432],{"type":19,"tag":81,"props":423,"children":424},{},[425],{"type":24,"value":426},"7",{"type":19,"tag":81,"props":428,"children":429},{},[430],{"type":24,"value":431},"Two thirds",{"type":19,"tag":81,"props":433,"children":434},{},[435],{"type":24,"value":436},"M • L • XL",{"type":19,"tag":54,"props":438,"children":439},{},[440,445,450],{"type":19,"tag":81,"props":441,"children":442},{},[443],{"type":24,"value":444},"4",{"type":19,"tag":81,"props":446,"children":447},{},[448],{"type":24,"value":449},"One third",{"type":19,"tag":81,"props":451,"children":452},{},[453],{"type":24,"value":436},{"type":19,"tag":54,"props":455,"children":456},{},[457,462,467],{"type":19,"tag":81,"props":458,"children":459},{},[460],{"type":24,"value":461},"3",{"type":19,"tag":81,"props":463,"children":464},{},[465],{"type":24,"value":466},"One quarter",{"type":19,"tag":81,"props":468,"children":469},{},[470],{"type":24,"value":471},"L • XL",{"title":10,"searchDepth":473,"depth":473,"links":474},2,[475,476,477],{"id":34,"depth":473,"text":37},{"id":170,"depth":473,"text":173},{"id":331,"depth":473,"text":334,"children":478},[479],{"id":353,"depth":480,"text":356},3,"markdown","content:design-system:4.styles:grid.md","content","design-system/4.styles/grid.md","md",["ShallowRef",487],["ShallowReactive",488],{"/design-system/styles/grid":489},[490,496],{"_path":491,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":492,"description":493,"layout":13,"label":14,"_type":481,"_id":494,"_source":483,"_file":495,"_extension":485},"/design-system/styles/focus-state","Focus state","Focus states show when a user has highlighted an element, using an input method such as a keyboard or voice.","content:design-system:4.styles:focus-state.md","design-system/4.styles/focus-state.md",{"_path":497,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":498,"description":499,"layout":13,"label":14,"_type":481,"_id":500,"_source":483,"_file":501,"_extension":485},"/design-system/styles/icons","Icons","Use icons to illustrate actions and interactions, communicate statuses, and draw attention to important information.","content:design-system:4.styles:icons.md","design-system/4.styles/icons.md",["ShallowRef",503],{},[505,510,750],{"title":506,"_path":507,"icon":508,"layout":509},"Ripple Design System","/","carbon:home","home",{"title":511,"_path":512,"children":513},"Design System","/design-system",[514,530,546,575,602],{"title":515,"_path":516,"children":517},"About","/design-system/about",[518,521,524,527],{"title":519,"_path":520,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":522,"_path":523,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":525,"_path":526,"layout":13},"Support","/design-system/about/getting-support",{"title":528,"_path":529,"layout":13},"Contributing","/design-system/about/contributing",{"title":531,"_path":532,"children":533},"Design","/design-system/design",[534,537,540,543],{"title":535,"_path":536,"layout":13},"Getting started","/design-system/design/getting-started",{"title":538,"_path":539,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":541,"_path":542,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":544,"_path":545,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":547,"_path":548,"children":549},"Develop","/design-system/develop",[550,552,554,557],{"title":535,"_path":551,"layout":13},"/design-system/develop/getting-started",{"title":528,"_path":553,"layout":13},"/design-system/develop/contributing",{"title":555,"_path":556,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":334,"_path":558,"children":559,"layout":13},"/design-system/develop/usage",[560,563,566,569,572],{"title":561,"_path":562,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":564,"_path":565,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":567,"_path":568,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":570,"_path":571,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":573,"_path":574,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":576,"_path":577,"children":578},"Styles","/design-system/styles",[579,582,583,584,585,588,590,593,596,599],{"title":580,"_path":581,"layout":13},"Colour","/design-system/styles/colour",{"title":492,"_path":491,"layout":13},{"title":11,"_path":7,"layout":13},{"title":498,"_path":497,"layout":13},{"title":586,"_path":587,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":376,"_path":589,"layout":13},"/design-system/styles/layout",{"title":591,"_path":592,"layout":13},"Logo","/design-system/styles/logo",{"title":594,"_path":595,"layout":13},"Motion","/design-system/styles/motion",{"title":597,"_path":598,"layout":13},"Spacing","/design-system/styles/spacing",{"title":600,"_path":601,"layout":13},"Typography","/design-system/styles/typography",{"title":603,"_path":604,"children":605},"Components","/design-system/components",[606,609,612,615,618,621,624,627,630,633,636,639,642,645,648,651,654,657,660,663,666,669,672,675,678,681,684,687,690,693,696,699,702,705,708,711,714,717,720,723,726,729,732,735,738,741,744,747],{"title":607,"_path":608,"layout":13},"Accordion","/design-system/components/accordion",{"title":610,"_path":611,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":613,"_path":614,"layout":13},"Alert","/design-system/components/alert",{"title":616,"_path":617,"layout":13},"Block quote","/design-system/components/block-quote",{"title":619,"_path":620,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":622,"_path":623,"layout":13},"Button","/design-system/components/button",{"title":625,"_path":626,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":628,"_path":629,"layout":13},"Callout","/design-system/components/callout",{"title":631,"_path":632,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":634,"_path":635,"layout":13},"Card","/design-system/components/card",{"title":637,"_path":638,"layout":13},"Carousel","/design-system/components/carousel",{"title":640,"_path":641,"layout":13},"Category grid","/design-system/components/category-grid",{"title":643,"_path":644,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":646,"_path":647,"layout":13},"Chip","/design-system/components/chip",{"title":649,"_path":650,"layout":13},"Contact us","/design-system/components/contact-us",{"title":652,"_path":653,"layout":13},"Date input","/design-system/components/date-input",{"title":655,"_path":656,"layout":13},"Detail list","/design-system/components/detail-list",{"title":658,"_path":659,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":661,"_path":662,"layout":13},"File","/design-system/components/file",{"title":664,"_path":665,"layout":13},"Footer","/design-system/components/footer",{"title":667,"_path":668,"layout":13},"Form","/design-system/components/form",{"title":670,"_path":671,"layout":13},"Form alert","/design-system/components/form-alert",{"title":673,"_path":674,"layout":13},"Header","/design-system/components/header",{"title":676,"_path":677,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":679,"_path":680,"layout":13},"Input field","/design-system/components/input-field",{"title":682,"_path":683,"layout":13},"Key dates","/design-system/components/key-dates",{"title":685,"_path":686,"layout":13},"Media","/design-system/components/media",{"title":688,"_path":689,"layout":13},"Media embed","/design-system/components/media-embed",{"title":691,"_path":692,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":694,"_path":695,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":697,"_path":698,"layout":13},"Option button","/design-system/components/option-button",{"title":700,"_path":701,"layout":13},"Page action","/design-system/components/page-action",{"title":703,"_path":704,"layout":13},"Pagination","/design-system/components/pagination",{"title":706,"_path":707,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":709,"_path":710,"layout":13},"Profile","/design-system/components/profile",{"title":712,"_path":713,"layout":13},"Radio button","/design-system/components/radio-button",{"title":715,"_path":716,"layout":13},"Related links","/design-system/components/related-links",{"title":718,"_path":719,"layout":13},"Results listing","/design-system/components/results-listing",{"title":721,"_path":722,"layout":13},"Search bar","/design-system/components/search-bar",{"title":724,"_path":725,"layout":13},"Skip link","/design-system/components/skip-link",{"title":727,"_path":728,"layout":13},"Social share","/design-system/components/social-share",{"title":730,"_path":731,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":733,"_path":734,"layout":13},"Table","/design-system/components/table",{"title":736,"_path":737,"layout":13},"Tabs","/design-system/components/tabs",{"title":739,"_path":740,"layout":13},"Tag","/design-system/components/tag",{"title":742,"_path":743,"layout":13},"Text area","/design-system/components/text-area",{"title":745,"_path":746,"layout":13},"Timeline","/design-system/components/timeline",{"title":748,"_path":749,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":751,"_path":752,"children":753,"layout":13},"Ripple Framework","/framework",[754,755,773,795],{"title":751,"_path":752,"layout":13},{"title":756,"_path":757,"children":758},"Key Concepts","/framework/key-concepts",[759,761,764,767,770],{"title":567,"_path":760,"layout":13},"/framework/key-concepts/nuxt",{"title":762,"_path":763,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":765,"_path":766,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":768,"_path":769,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":771,"_path":772,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":774,"_path":775,"children":776},"Guides","/framework/guides",[777,780,783,786,789,792],{"title":778,"_path":779,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":781,"_path":782,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":784,"_path":785,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":787,"_path":788,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":790,"_path":791,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":793,"_path":794,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":796,"_path":797,"layout":13},"Core modules","/framework/core-modules",["Reactive",799],["Set"],["Reactive",801],{"module-navigation":802},null,true,1714695650176]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/styles/icons/_payload.json b/design-system/styles/icons/_payload.json
index be67242005..8a86dd1367 100644
--- a/design-system/styles/icons/_payload.json
+++ b/design-system/styles/icons/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":70,"items":71},"/design-system/styles","Styles",true,[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":70,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695151932]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":70,"items":71},"/design-system/styles","Styles",true,[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":70,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695650180]
\ No newline at end of file
diff --git a/design-system/styles/icons/index.html b/design-system/styles/icons/index.html
index 450d98cf5f..2077ca8bb4 100644
--- a/design-system/styles/icons/index.html
+++ b/design-system/styles/icons/index.html
@@ -27,66 +27,66 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.CwUV-MIb.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsIconTable.9o2Ol26d.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.r8Pb5jxA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.lp_k9Hpd.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.F9NVvvm4.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsIconSizingTable.xZUIYxKF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseImg.wgVpK8mn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.gK7ORMEc.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsIconTable.SNmL3ofA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/rpl-lib.es.b8udu3ko.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.Czpq-HHw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.GmB4B_NE.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsIconSizingTable.5KObi_vr.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseImg.Wu9xgcX7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -98,8 +98,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Icons</h1><p class="rpl-type-p-large" data-v-3163c6df>Use icons to illustrate actions and interactions, communicate statuses, and draw attention to important information.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->Icons are a visual representation of an action, idea, or object. They provide a quick and easy way to communicate information. They can also enhance the usability of a design.<!--]--></p><p><!--[-->Use the Ripple Design System&#39;s icon set for a consistent user experience and a cohesive look and feel.<!--]--></p><p><!--[-->You can add icons to components or pair them with text. Icons should have a clear relationship with their corresponding text or action. This keeps them accessible to users with visual impairments or disabilities.<!--]--></p><p><!--[-->Avoid using icons alone, as one user may interpret them differently to another.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="icon-library" data-v-fff5b905><a href="#icon-library" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Icon Library<!--]--></a></h2><h4 class="rpl-type-h4 docs-h4" id="alerts"><!--[-->Alerts<!--]--></h4><ul class="docs-icon-table" data-v-e0bacec0><!--[--><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-fire rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.3 0 11.7c0 4.9 3.1 9.1 7.4 10.8-.7-.7-1.3-1.9-1.3-3.5 0-2.4 1-4.1 1.8-5.6.7-1.3 1.5-2.5 1.5-4.1 0-1-1-2.1-1.4-2.4-.2-.1-.2-.4-.1-.6s.2-.3.5-.3c1.3 0 4 .7 4.8 3.4.2.8.2 1.8.2 2.8 0 1-.1 2.3.3 2.6 0 0 .1.1.3.1.1 0 .4-.2.6-.8.5-1.4.5-3.2.1-3.6-.2-.2-.2-.5-.1-.7s.4-.3.7-.2c.1.1 3.5 1.3 3.3 6.7-.1 3.2-1.3 5.4-2.9 6.6C20.5 21.4 24 17 24 11.7 24 5.3 18.6 0 12 0z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Fire</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-flood rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.8 19.5c-1.6 1-3.9 1-5.5 0h-.1c-.1.1-.2.1-.3.2-.1.1-.3.1-.4.2-.2.1-.3.1-.4.1-.2.1-.4.1-.6.1h-.2c-.3 0-.6.1-.8.1-1 0-2-.3-2.8-.8-.2.1-.5.3-.7.4 2.2 2.5 5.4 4.1 9 4.1 3.6 0 6.8-1.6 9-4.1-.2-.1-.5-.2-.7-.4-1.6 1.1-3.9 1.1-5.5.1zM12 0C5.4 0 0 5.4 0 12c0 2.2.6 4.2 1.6 6 .5-.1 1-.3 1.3-.7.4-.4 1.1-.4 1.5 0 .8.8 2.3.9 3.4.5.1 0 .1-.1.2-.1s.1-.1.2-.1c.1-.1.2-.2.3-.2.4-.4 1.1-.4 1.5 0 1 1 3 1 4 0 .4-.4 1.1-.4 1.5 0 1 1 3 1 4 0 .4-.4 1.1-.4 1.5 0 .3.3.8.5 1.3.7 1-1.8 1.6-3.8 1.6-6C24 5.4 18.6 0 12 0zm8 12.6-1.5-1.2v4c-.9.2-1.9.1-2.8-.2-.1 0-.1 0-.2-.1-.3-.1-.5-.2-.7-.4-.2.1-.5.3-.7.4-.1 0-.2.1-.3.1-1.1.4-2.4.4-3.5 0-.1 0-.2-.1-.3-.1-.3-.1-.5-.2-.7-.4h-.1c-.1.1-.2.1-.3.2-.1 0-.2.1-.3.1h-.1c-.1 0-.2.1-.3.1-.2.1-.4.1-.6.2h-.2c-.3 0-.6.1-.8.1-.4 0-.7 0-1-.1v-4L4 12.6 2.6 11l3.9-3.3V5.5h2.2l2.6-1.8c.4-.3 1-.3 1.4 0l8.7 7.3-1.4 1.6z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Flood</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-lightning rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm4.8 13.5-6.6 7.3c-.2.2-.4.3-.7.3-.2 0-.4-.1-.5-.2-.4-.3-.5-.8-.4-1.2l2-5.7-3-2.2c-.2-.2-.4-.4-.4-.7 0-.3.1-.6.3-.8L14.1 3c.3-.4.8-.4 1.2-.2.4.2.5.7.4 1.2l-2 5.7 3 2.2c.2.2.4.4.4.7 0 .4-.1.7-.3.9z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Lightning</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-medical rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.4 15.6h-.6v-4.1c0-.5-.2-.9-.5-1.3l-3.7-3.7c-.2-.2-.4-.3-.6-.4-.3-.1-.5-.1-.7-.1h-1.7V4.2c0-.5-.2-.9-.5-1.3-.3-.3-.8-.5-1.3-.5h-12c-.5 0-.9.2-1.3.5-.3.4-.5.8-.5 1.3v12c0 .5.2.9.5 1.3.4.3.8.5 1.3.5h.6c0 1 .4 1.9 1.1 2.5.6.7 1.5 1.1 2.5 1.1s1.9-.4 2.5-1.1c.7-.6 1.1-1.5 1.1-2.5h4.8c0 1 .4 1.9 1.1 2.5.7.7 1.6 1.1 2.5 1.1s1.9-.4 2.5-1.1c.7-.7 1.1-1.6 1.1-2.5h1.8c.3 0 .6-.3.6-.6v-1.2c0-.3-.3-.6-.6-.6zM7.3 19.3c-.3.3-.8.5-1.3.5s-.9-.2-1.3-.5c-.3-.3-.5-.8-.5-1.3s.2-.9.5-1.3c.3-.3.8-.5 1.3-.5s.9.2 1.3.5c.3.3.5.8.5 1.3s-.2.9-.5 1.3zm4.1-8.8c0 .1 0 .2-.1.2-.1.1-.1.1-.2.1H9v2.1c0 .1 0 .2-.1.2-.1.1-.1.1-.2.1H6.9c-.1 0-.2 0-.2-.1-.1-.1-.1-.1-.1-.2v-2.1H4.5c-.1 0-.2 0-.2-.1-.1-.1-.1-.1-.1-.2V8.7c0-.1 0-.2.1-.2.1-.1.1-.1.2-.1h2.1V6.3c0-.1 0-.2.1-.2s.1-.1.2-.1h1.8c.1 0 .2 0 .2.1.1 0 .1.1.1.2v2.1h2.1c.1 0 .2 0 .2.1.1.1.1.1.1.2v1.8zm7.9 8.8c-.3.3-.8.5-1.3.5s-.9-.2-1.3-.5c-.3-.3-.5-.8-.5-1.3s.2-.9.5-1.3c.3-.3.8-.5 1.3-.5s.9.2 1.3.5c.3.3.5.8.5 1.3s-.2.9-.5 1.3zM21 12h-5.4V7.8h1.7l3.7 3.7v.5z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Medical</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-smoke rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.9 10.4c.4-.1.9-.1 1.3-.1.7-2.6 2.8-4.7 5.4-5.3 3.8-.8 7.5 1.6 8.4 5.4.8.3 1.4.8 2 1.4C23.9 5.3 18.6 0 12 0S0 5.4 0 12c0 1.9.5 3.7 1.2 5.3.4-.4.9-.7 1.5-1-.3-2.7 1.5-5.3 4.2-5.9z"></path><path d="M20.8 12.4c-.4-.1-.7-.5-.8-.9 0-.1 0-.3-.1-.4-.6-2.7-3.2-4.4-5.8-3.9-2.1.4-3.7 2.3-3.8 4.5 0 .3-.2.6-.5.8-.3.2-.6.2-.9.2-.5-.1-1-.1-1.5 0-1.7.4-2.8 2.1-2.4 3.9 0 .1 0 .2.1.3.1.3.1.6-.1.9-.2.3-.4.5-.7.5-.8.2-1.7.5-1.7 1.2C4.7 22.2 8.2 24 12 24c5.4 0 10-3.6 11.5-8.6 0-.1-.1-.2-.1-.3-.3-1.4-1.3-2.4-2.6-2.7z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Smoke</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-temperature rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20.7c-3 0-5.5-2.4-5.5-5.5 0-2.2 1.4-4.2 3.3-5V3.9c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.4c1.9.8 3.3 2.8 3.3 5 0 3-2.5 5.4-5.5 5.4z"></path><circle cx="12" cy="15.3" r="2.2"></circle></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Temperature</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-traffic rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4.4c-.6 0-1.1.5-1.1 1.1v3.3c0 .6.5 1.1 1.1 1.1s1.1-.5 1.1-1.1V5.5c0-.6-.5-1.1-1.1-1.1zm0 9.8c-.6 0-1.1.5-1.1 1.1v4.4c0 .6.5 1.1 1.1 1.1s1.1-.5 1.1-1.1v-4.4c0-.6-.5-1.1-1.1-1.1zM0 12.7c0 4.2 2.2 8 5.5 10.2L8.8 1.1C3.8 2.6 0 7.2 0 12.7zM15.3 1.1l3.3 21.8c3.3-2.2 5.5-6 5.5-10.2-.1-5.5-3.9-10.1-8.8-11.6z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Traffic</span></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="social"><!--[-->Social<!--]--></h4><ul class="docs-icon-table" data-v-e0bacec0><!--[--><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-facebook rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-facebook"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Facebook</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-instagram rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11.6" cy="12.8" r="4.7"></circle><path d="M17.4 0H6.6C3 0 0 3.1 0 6.8v10.4C0 20.9 3 24 6.6 24h10.7c3.7 0 6.6-3.1 6.6-6.8V6.8C24 3.1 21 0 17.4 0zm-5.8 19.9c-3.9 0-7.1-3.2-7.1-7.1 0-3.9 3.2-7.1 7.1-7.1 3.9 0 7.1 3.2 7.1 7.1.1 4-3.1 7.1-7.1 7.1zm7.2-13.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Instagram</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-linkedin rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-linkedin"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Linkedin</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-spotify rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.5 17.3c-.2.4-.7.5-1 .2-2.8-1.7-6.4-2.1-10.5-1.2-.4.1-.8-.2-.9-.6-.1-.4.2-.8.6-.9 4.6-1 8.5-.6 11.7 1.3.2.4.3.9.1 1.2zM19 14c-.3.4-.8.6-1.3.3-3.2-2-8.1-2.6-12-1.4-.5.1-1-.1-1.2-.6-.1-.5.1-1 .6-1.2 4.4-1.3 9.8-.7 13.5 1.6.5.3.6.9.4 1.3zm.1-3.4C15.2 8.3 8.8 8.1 5.2 9.3c-.6.1-1.3-.2-1.4-.8-.2-.6.1-1.2.7-1.4 4.2-1.3 11.3-1 15.7 1.6.5.3.7 1 .4 1.5-.3.6-1 .8-1.5.4z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Spotify</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-wechat rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.6 8.3c-4.4 0-7.9 2.9-7.9 6.5 0 .6.1 1.1.2 1.6h-.3c-1 0-1.9-.1-2.8-.4-2.5 1.5-3 1.3-3 1.3.3-.6.4-1.7.4-2.5C1.3 13.6 0 11.6 0 9.4c0-3.9 3.9-7 8.6-7 4.3 0 7.9 2.6 8.5 5.9h-.5zm-3.9-1.1c0-.7-.6-1.3-1.3-1.3s-1.3.6-1.3 1.3c0 .7.6 1.3 1.3 1.3s1.3-.6 1.3-1.3zm-8.2 0c0 .7.6 1.3 1.3 1.3S7 7.9 7 7.2 6.4 6 5.7 6s-1.2.5-1.2 1.2z"></path><path d="M16.7 8.9c4 0 7.3 2.6 7.3 5.9 0 1.9-1.1 3.5-2.7 4.6 0 .6.1 1.6.4 2.1 0 0-.4.2-2.5-1.1-.7.2-1.5.3-2.4.3-4 0-7.3-2.6-7.3-5.9 0-3.3 3.2-5.9 7.2-5.9zM13.2 13c0 .6.5 1 1 1 .6 0 1-.5 1-1 0-.6-.5-1-1-1-.6-.1-1 .4-1 1zm4.7 0c0 .6.5 1 1 1 .6 0 1-.5 1-1 0-.6-.5-1-1-1s-1 .4-1 1z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Wechat</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-whatsapp rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-whatsapp"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Whatsapp</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-youtube rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.5 6.2c-.3-1-1.1-1.9-2.1-2.1-1.9-.5-9.4-.5-9.4-.5s-7.5 0-9.4.5C1.6 4.4.8 5.2.5 6.2 0 8.1 0 12 0 12s0 3.9.5 5.8c.3 1 1.1 1.8 2.1 2.1 1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5c1-.3 1.8-1.1 2.1-2.1.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zm-14 9.4V8.5l6.3 3.6-6.3 3.5z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Youtube</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-x rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-x"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>X</span></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="standard"><!--[-->Standard<!--]--></h4><ul class="docs-icon-table" data-v-e0bacec0><!--[--><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-accessible rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="9" cy="3" r="3"></circle><path d="m23.9 19.4-.7-1.3c-.2-.4-.6-.5-1-.3l-1.7.9-2.7-5.7c-.2-.5-.8-.9-1.4-.9h-6.2l-.2-1.5h5.7c.4 0 .8-.3.8-.7V8.3c0-.4-.3-.8-.8-.8H6.6l.9 6.2c.1.8.8 1.3 1.5 1.3h6.5l2.9 6.3c.4.8 1.3 1.1 2 .7l3.1-1.5c.5-.3.6-.7.4-1.1z"></path><path d="M13.4 16.5C13.1 19 10.9 21 8.2 21 5.4 21 3 18.6 3 15.8c0-1.9 1.1-3.6 2.6-4.6-.1-1.2-.3-2.2-.4-3.1-3 1.2-5.2 4.2-5.2 7.7C0 20.3 3.7 24 8.2 24c3.4 0 6.3-2 7.6-4.9l-1.2-2.6h-1.2z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Accessible</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-add rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 10h-8V2c0-1.1-.9-2-2-2s-2 .9-2 2v8H2c-1.1 0-2 .9-2 2s.9 2 2 2h8v8c0 1.1.9 2 2 2s2-.9 2-2v-8h8c1.1 0 2-.9 2-2s-.9-2-2-2z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Add</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-arrow-up rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.6 10.8 12.9.4c-.5-.5-1.3-.5-1.9 0L.4 10.8c-.5.5-.5 1.3 0 1.8l1.2 1.2c.5.5 1.4.5 1.9 0l6.3-6.5v15.4c0 .7.6 1.3 1.3 1.3h1.8c.7 0 1.3-.6 1.3-1.3V7.3l6.3 6.4c.5.5 1.4.5 1.9 0l1.2-1.2c.5-.4.5-1.2 0-1.7z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Arrow Up</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-arrow-right rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.6 11.1 13.2.4c-.5-.5-1.3-.5-1.8 0l-1.2 1.2c-.5.5-.5 1.4 0 1.9l6.5 6.3H1.3c-.7 0-1.3.6-1.3 1.3v1.8c0 .7.6 1.3 1.3 1.3h15.4l-6.5 6.3c-.5.5-.5 1.4 0 1.9l1.2 1.2c.5.5 1.3.5 1.8 0l10.4-10.7c.5-.5.5-1.3 0-1.8z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Arrow Right</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-arrow-down rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m23.6 11.4-1.2-1.2c-.5-.5-1.4-.5-1.9 0l-6.3 6.5V1.3c0-.7-.6-1.3-1.3-1.3h-1.8c-.7 0-1.3.6-1.3 1.3v15.4l-6.3-6.5c-.5-.5-1.4-.5-1.9 0L.4 11.4c-.5.5-.5 1.3 0 1.8l10.7 10.4c.5.5 1.3.5 1.9 0l10.7-10.4c.4-.5.4-1.3-.1-1.8z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Arrow Down</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-arrow-left rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.7 9.8H7.3l6.5-6.3c.5-.5.5-1.4 0-1.9L12.6.4c-.5-.5-1.3-.5-1.8 0L.4 11.1c-.5.5-.5 1.3 0 1.9l10.4 10.7c.5.5 1.3.5 1.8 0l1.2-1.2c.5-.5.5-1.4 0-1.9l-6.5-6.3h15.4c.7 0 1.3-.6 1.3-1.3v-1.8c0-.8-.6-1.4-1.3-1.4z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Arrow Left</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-attach rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.6 4.6C18.5 2 16.3 0 13.7 0c-2.7 0-4.9 2-5 4.6v12.7c.1 1.7 1.5 3.1 3.3 3.1s3.2-1.4 3.3-3.1v-10c0-.7-.5-1.2-1.1-1.2-.6 0-1.1.5-1.1 1.2v9.9c0 .4-.5.8-1.1.8s-1.1-.4-1.1-.8V4.8c0-1.3 1.2-2.4 2.8-2.4 1.5 0 2.8 1.1 2.8 2.4v12c0 2.6-2 4.8-4.4 4.8s-4.4-2.2-4.4-4.8V12c0-.7-.5-1.2-1.1-1.2-.6 0-1.1.5-1.1 1.2v4.8c0 4 3 7.2 6.6 7.2s6.6-3.2 6.6-7.2l-.1-12.2z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Attach</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-browser rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.8 1.5H2.2C1 1.5 0 2.5 0 3.8v16.5c0 1.2 1 2.2 2.2 2.2h19.5c1.2 0 2.2-1 2.2-2.2V3.8c.1-1.3-.9-2.3-2.1-2.3zM6 6.9c0 .3-.3.6-.6.6H3.6c-.3 0-.6-.3-.6-.6V5.1c0-.3.3-.6.6-.6h1.9c.2 0 .5.3.5.6v1.8zm2.2 0V5.1c0-.3.3-.6.6-.6h11.6c.3 0 .6.3.6.6V7c0 .3-.3.6-.6.6H8.8c-.3-.1-.6-.4-.6-.7zm13.2 10.2h-3.2l1.3 3c0 .1 0 .2-.1.2l-1 .4c-.1 0-.2 0-.2-.1l-1.3-3-2.2 2.4c-.1.1-.3 0-.3-.1v-9.8c0-.1.2-.2.3-.1l6.9 6.8c.1.1 0 .3-.2.3z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Browser</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-calendar-lined rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.7 2.7H20V1.3c0-.7-.6-1.3-1.3-1.3-.7 0-1.3.6-1.3 1.3v1.3H6.7V1.3C6.7.6 6.1 0 5.3 0 4.6 0 4 .6 4 1.3v1.3H1.3C.6 2.7 0 3.3 0 4v18.7c0 .7.6 1.3 1.3 1.3h21.3c.7 0 1.3-.6 1.3-1.3V4c.1-.7-.5-1.3-1.2-1.3zm-1.4 18.6H2.7V6.7h18.7v14.6z"></path><path d="M13.3 13.4h5.3v5.3h-5.3z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Calendar Lined</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-cancel rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-cancel"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Cancel</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-cancel-circle-filled rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.7 15.4c.4.4.4 1.1 0 1.5l-.8.8c-.4.4-1.1.4-1.5 0L12 14.3l-3.4 3.4c-.4.4-1.1.4-1.5 0l-.8-.8c-.4-.4-.4-1.1 0-1.5L9.7 12 6.3 8.6c-.4-.4-.4-1.1 0-1.5l.8-.8c.4-.4 1.1-.4 1.5 0L12 9.7l3.4-3.4c.4-.4 1.1-.4 1.5 0l.8.8c.4.4.4 1.1 0 1.5L14.3 12l3.4 3.4z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Cancel Circle Filled</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-car rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.714 8.799h-1.563l-1.008-2.586C19.613 4.89 18.126 4 16.437 4H7.513c-1.69 0-3.202.89-3.706 2.213L2.798 8.8H1.235C.555 8.799 0 9.254 0 9.812v.58c0 .558.555 1.013 1.235 1.013h.429a10.83 10.83 0 0 0-.378 2.834v4.86c0 .56.554 1.014 1.235 1.014h2.067c.68 0 1.236-.455 1.236-1.013v-1.552h12.353V19.1c0 .558.554 1.013 1.235 1.013h2.067c.68 0 1.235-.455 1.235-1.013v-4.882c0-.951-.126-1.903-.378-2.834h.429c.68 0 1.235-.455 1.235-1.013v-.58c-.05-.537-.605-.992-1.286-.992ZM4.966 9.833l1.185-3.02c.202-.496.757-.827 1.362-.827h8.924c.63 0 1.185.33 1.361.827l1.185 3.02c.05.145-.075.269-.252.269H5.218c-.176.02-.302-.124-.252-.269Zm2.572 4.944H5.042c-.429 0-.756-.27-.756-.62v-.973c0-.372.428-.683.882-.62l2.32.31c.302.041.554.227.63.475l.176.662c.101.393-.252.766-.756.766Zm12.1-.62c0 .35-.327.62-.756.62h-2.495c-.48 0-.832-.373-.732-.745l.177-.662c.076-.248.302-.434.63-.476l2.32-.31c.453-.062.882.228.882.62v.952h-.025Z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Car</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-check rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.9.4c-1.1-.7-2.6-.4-3.3.8L9.2 17.8l-5.1-5.1c-.9-.9-2.5-.9-3.4 0s-.9 2.5 0 3.4l7.2 7.2c1.1 1.1 2.9.9 3.7-.4l12-19.2c.7-1.2.4-2.6-.7-3.3z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Check</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-check-circle-filled rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-check-circle-filled"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Check Circle Filled</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-chevron-up rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-chevron-up"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Chevron Up</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-chevron-right rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-chevron-right"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Chevron Right</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-chevron-down rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Chevron Down</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-chevron-left rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-chevron-left"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Chevron Left</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-child-lined rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.8 4.7C19.7 3.6 18.2 3.5 17 4c-.5-2.2-2.5-4-5-4S7.5 1.8 7 4.1c-1.2-.6-2.7-.4-3.8.6-1.3 1.3-1.3 3.5 0 4.8L6 12.3v8.4C6 22.5 7.5 24 9.4 24h.4c.9 0 1.7-.3 2.2-.9.6.5 1.4.9 2.2.9h.4c1.9 0 3.4-1.5 3.4-3.4v-8.4l2.8-2.8c1.3-1.2 1.3-3.3 0-4.7zM12 2.2c1.6 0 2.8 1.3 2.8 2.8S13.6 7.9 12 7.9c-1.6 0-2.8-1.3-2.8-2.8s1.2-2.9 2.8-2.9zm7.2 5.7-3.4 3.4v9.3c0 .6-.5 1.1-1.1 1.1h-.4c-.6 0-1.1-.5-1.1-1.1v-4.5H11v4.5c0 .6-.5 1.1-1.1 1.1h-.5c-.6 0-1.1-.5-1.1-1.1v-9.3L4.8 7.9c-.4-.4-.4-1.2 0-1.6s1.2-.4 1.6 0l3.4 3.4h4.3l3.4-3.4c.4-.4 1.2-.4 1.6 0 .5.5.5 1.2.1 1.6z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Child Lined</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-current-location rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-current-location"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Current Location</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-document rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-document"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Document</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-document-lined rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-document-lined"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Document Lined</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-dollar-circle-filled rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm1.3 17.9v1.2c0 .5-.2.9-.8.9h-1c-.7 0-.9-.6-.9-.9v-1.2C8.9 17.6 7.4 16.5 7 15l2.8-.9c.3 1.1 1.2 1.5 2.2 1.5 1.1 0 1.7-.5 1.7-1.2 0-.5-.2-.9-1.1-1l-2.3-.5c-1.6-.4-3.1-1.3-3.1-3.4 0-1.9 1.3-3.2 3.3-3.5V4.9c0-.5.3-.9.9-.9h1c.5 0 .8.4.8.9v1.3c1.5.4 2.7 1.3 3.1 2.7l-2.7.7c-.4-.9-1.2-1.2-1.9-1.2-.9 0-1.5.5-1.5 1.2 0 .5.2.8.9 1l2.3.5c2 .5 3.1 1.5 3.1 3.4.1 1.8-1.3 3-3.2 3.4z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Dollar Circle Filled</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-download rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-download"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Download</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-enlarge rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-enlarge"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Enlarge</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-enlarge-square-filled rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-enlarge-square-filled"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Enlarge Square Filled</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-exclamation-circle-filled rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-exclamation-circle-filled"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Exclamation Circle Filled</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-free rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m20.3 13 3.4-3.4c.4-.4.4-1.1 0-1.5l-.8-.8c-.4-.4-1.1-.4-1.5 0L18 10.7l-3.4-3.4c-.4-.4-1.1-.4-1.5 0l-.8.8c-.4.4-.4 1.1 0 1.5l3.4 3.4-3.4 3.4c-.4.4-.4 1.1 0 1.5l.8.8c.4.4 1.1.4 1.5 0l3.4-3.4 3.4 3.4c.4.4 1.1.4 1.5 0l.8-.8c.4-.4.4-1.1 0-1.5L20.3 13zm-13-2.2-2.6-.6c-.8-.2-1-.6-1-1.1 0-.7.7-1.3 1.7-1.3.8 0 1.8.4 2.2 1.4l3-.8c-.5-1.5-1.8-2.6-3.5-3V4c0-.6-.4-1-.9-1H5.1c-.6 0-1 .4-1 1v1.4C1.8 5.8.4 7.2.4 9.4c0 2.4 1.6 3.3 3.5 3.8l2.6.6c.9.2 1.2.6 1.2 1.2 0 .7-.7 1.3-1.9 1.3s-2.1-.5-2.5-1.7l-3.2 1c.5 1.7 2.1 2.9 4.1 3.3v1.3c0 .4.2 1.1 1 1.1h1.1c.7 0 .9-.5.9-1.1v-1.3c2.1-.4 3.7-1.8 3.7-4-.1-2.4-1.4-3.6-3.6-4.1z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Free</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-home rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-home"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Home</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-information-circle-filled rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-information-circle-filled"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Information Circle Filled</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-link rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18H4V6h8c1.1 0 2-.9 2-2s-.9-2-2-2H2C.9 2 0 2.9 0 4v16c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2s-.9-2-2-2z"></path><path d="m23.3 10.4-4.9-4c-.9-.7-2.1-.6-2.8.3-.7.9-.6 2.1.3 2.8l.6.4H8c-1.1 0-2 .9-2 2s.9 2 2 2h8.4l-.6.4c-.9.7-1 2-.3 2.8.4.5 1 .7 1.6.7.4 0 .9-.1 1.3-.4l4.9-4c.5-.4.7-1 .7-1.6 0-.4-.3-1-.7-1.4z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Link</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-link-external-square-filled rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Link External Square Filled</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-list rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="2.2" cy="3" r="2.2"></circle><path d="M9.8 5.2h12C23 5.2 24 4.2 24 3S23 .8 21.8.8h-12C8.6.8 7.6 1.8 7.6 3s.9 2.2 2.2 2.2z"></path><circle cx="2.2" cy="12" r="2.2"></circle><path d="M21.8 9.8h-12c-1.2 0-2.2 1-2.2 2.2s1 2.2 2.2 2.2h12c1.2 0 2.2-1 2.2-2.2s-1-2.2-2.2-2.2z"></path><circle cx="2.2" cy="21" r="2.2"></circle><path d="M21.8 18.8h-12c-1.2 0-2.2 1-2.2 2.2s1 2.2 2.2 2.2h12c1.2 0 2.2-1 2.2-2.2s-1-2.2-2.2-2.2z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>List</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-loading rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.4 12c0-.7-.5-1.2-1.2-1.2h-6c-.7 0-1.2.5-1.2 1.2s.5 1.2 1.2 1.2h6c.7 0 1.2-.5 1.2-1.2zm14.4-1.2h-6c-.7 0-1.2.5-1.2 1.2s.5 1.2 1.2 1.2h6c.7 0 1.2-.5 1.2-1.2s-.5-1.2-1.2-1.2zM12 0c-.7 0-1.2.5-1.2 1.2v6c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2v-6C13.2.5 12.7 0 12 0zm0 15.6c-.7 0-1.2.5-1.2 1.2v6c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2v-6c0-.7-.5-1.2-1.2-1.2zm-4.2-1.1-4.2 4.2c-.6.6-.6 1.3-.1 1.8s1.2.5 1.7 0l4.2-4.2c.5-.5.5-1.2 0-1.7-.4-.5-1.2-.5-1.6-.1zm8.4-5 4.2-4.2c.6-.6.6-1.3.1-1.8s-1.2-.5-1.7 0l-4.2 4.2c-.5.5-.5 1.2 0 1.7.4.5 1.2.5 1.6.1zm-11-6C4.7 3 4 3 3.5 3.5s-.5 1.2 0 1.7l4.2 4.2c.5.5 1.2.5 1.7 0s.5-1.2 0-1.7L5.2 3.5zm11 11c-.5-.5-1.2-.5-1.7 0s-.5 1.2 0 1.7l4.2 4.2c.5.5 1.2.5 1.7 0s.5-1.2 0-1.7l-4.2-4.2z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Loading</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-log-in-lined rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.5 7.5H18V6c0-1.2-.4-2.4-1-3.4C15.9 1 14 0 12 0 8.7 0 6 2.7 6 6v1.5H1.5C.7 7.5 0 8.2 0 9v13.5c0 .8.7 1.5 1.5 1.5h21c.8 0 1.5-.7 1.5-1.5V9c0-.8-.7-1.5-1.5-1.5zM9 6c0-1.7 1.3-3 3-3 1 0 1.9.5 2.5 1.3.3.5.5 1.1.5 1.7v1.5H9V6zm12 15H3V10.5h18V21z"></path><circle cx="12" cy="15" r="1.5"></circle></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Log In Lined</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-mail rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-mail"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Mail</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-mail-lined rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-1.2 15.6H2.4V5.4h19.2v13.2z"></path><path d="M20.4 9V6.6L12 10.2 3.6 6.6V9l8.4 3.6z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Mail Lined</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-menu rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1.3 5.3H12c.7 0 1.3-.6 1.3-1.3s-.6-1.3-1.3-1.3H1.3C.6 2.7 0 3.3 0 4s.6 1.3 1.3 1.3zm0 5.4h21.3c.7 0 1.3-.6 1.3-1.3S23.4 8 22.7 8H1.3C.6 8 0 8.6 0 9.3s.6 1.4 1.3 1.4zm0 5.3h16c.7 0 1.3-.6 1.3-1.3s-.6-1.3-1.3-1.3h-16c-.7 0-1.3.6-1.3 1.3S.6 16 1.3 16zm21.4 2.7H1.3c-.7 0-1.3.6-1.3 1.3 0 .7.6 1.3 1.3 1.3h21.3c.7 0 1.3-.6 1.3-1.3.1-.7-.5-1.3-1.2-1.3z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Menu</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-microphone rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 9.4c-.7 0-1.3.6-1.3 1.3v2.6c0 2.2-1.8 4-4 4s-4-1.8-4-4v-2.6c0-.7-.6-1.3-1.3-1.3-.8 0-1.4.6-1.4 1.3v2.9c.1 3.6 3.1 6.5 6.7 6.5s6.6-2.9 6.7-6.5v-2.9c-.1-.7-.6-1.3-1.4-1.3z"></path><path d="M11.7 16c1.5 0 2.7-1.2 2.7-2.7V2.7c0-1.5-1.2-2.7-2.7-2.7C10.2 0 9 1.2 9 2.7v10.7c0 1.4 1.2 2.6 2.7 2.6zm0 5.3c-.7 0-1.3.6-1.3 1.3 0 .7.6 1.3 1.3 1.3.7 0 1.3-.6 1.3-1.3 0-.7-.6-1.3-1.3-1.3z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Microphone</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-pause-circle-lined rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"></path><path d="M9.6 8.4c-.7 0-1.2.5-1.2 1.2v4.8c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2V9.6c0-.7-.5-1.2-1.2-1.2zm4.8 0c-.7 0-1.2.5-1.2 1.2v4.8c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2V9.6c0-.7-.5-1.2-1.2-1.2z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Pause Circle Lined</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-person rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m5.069 10.711 1.243-2.383a3.97 3.97 0 0 1 1.425-1.502c2.875-1.71 3.238-1.684 3.6-1.658l1.943.13c.596.025 1.01.18 3.005 3.108a.507.507 0 0 0 .337.207l2.383.363c.647.103 1.088.7.984 1.347a1.174 1.174 0 0 1-1.347.984l-2.383-.363c-.777-.129-1.476-.544-1.917-1.191-.104-.156-.181-.285-.285-.415l-.947 4.658 1.543 2.31c.31.311.57.726.725 1.14l1.632 4.767c.26.699-.13 1.476-.829 1.71a1.316 1.316 0 0 1-.44.077c-.57 0-1.088-.363-1.295-.907l-1.632-4.766c-.026-.052-.052-.078-.078-.13L8.954 14.39a2.184 2.184 0 0 1-.596-2.02l.83-3.68a2.277 2.277 0 0 1-.26.156 1.44 1.44 0 0 0-.544.57L7.141 11.8a1.189 1.189 0 0 1-1.036.622c-.182 0-.363-.052-.544-.13a1.19 1.19 0 0 1-.492-1.58Zm7.638-6.126a2.292 2.292 0 1 0 0-4.585 2.292 2.292 0 0 0 0 4.585Z"></path><path d="m8.375 16.799-3.893 3.196a1.396 1.396 0 0 0-.396 1.531c.054.145.124.26.228.386a1.33 1.33 0 0 0 1.89.18l3.894-3.197c.334-.29.632-.68.813-1.078l.097-.59-1.968-1.972-.571 1.427c-.04.042-.052.076-.094.117Z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Person</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-phone rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-phone"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Phone</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-pin rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-pin"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Pin</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-play-circle-lined rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m9.6 16.8 6-4.8-6-4.8z"></path><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Play Circle Lined</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-print-lined rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.9 9.4c-.7-.7-1.6-1.1-2.6-1.1V4.7c0-.6-.2-1.2-.7-1.6L17.2.7c-.4-.4-1-.7-1.6-.7H5.2c-.4 0-.7.1-1 .4s-.4.7-.4 1.1v6.8c-1 0-1.9.4-2.6 1.1C.4 10.1 0 11 0 12v6c0 .2.1.4.2.5.1.1.3.2.5.2h3v4.5c0 .2.1.4.2.5.2.2.4.3.6.3h15c.2 0 .4-.1.5-.2.1-.1.2-.3.2-.5v-4.5h3c.2 0 .4-.1.5-.2.1-.1.2-.3.2-.5v-6c.1-1.1-.3-2-1-2.7zM6 2.2h9v2.2c0 .2.1.4.2.5.1.1.3.2.5.2H18v3H6V2.2zm12 19.6H6v-3h12v3zm3.8-5.3H2.2V12c0-.4.1-.8.4-1.1.3-.3.6-.4 1.1-.4h16.5c.4 0 .8.1 1.1.4.3.3.4.6.4 1.1v4.5z"></path><path d="M18.8 12.4c-.3 0-.6.1-.8.3s-.3.5-.3.8.1.6.3.8.5.3.8.3.6-.1.8-.3.3-.5.3-.8-.1-.6-.3-.8-.5-.3-.8-.3z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Print Lined</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-question-circle-lined rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"></path><path d="M10.8 16.8h2.4v-2.4h-2.4zm1-10.8C10 6 8.4 7.6 8.4 9.6h2.4c-.1-.7.3-1.4 1-1.4.6 0 .9.4.9.9 0 .2-.2.6-.4.8l-1.1 1.2c-.3.4-.4.6-.4.8v1.2h2.4v-.3c0-.3 0-.4.2-.6l1-1.2c.4-.5.8-1.1.8-1.9-.1-2-1.7-3.1-3.4-3.1z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Question Circle Lined</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-search rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Search</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-senior rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m16.9 9.5-5.8-5.4S9.3 6.2 6.8 9.2c-.4.6-.3 1.3.2 1.8l1.1 1-4.5 7.5c-.1.4 0 .8.4.9l1.1.6c.4.1.8 0 .9-.4l4-6.6 1.3 1.3-4.1 7.1c-.1.4 0 .8.4.9l1.2.6c.4.1.8 0 .9-.4l4.5-8.2c.2-.5.1-1.1-.3-1.5l-4.2-4L11.2 8l3.8 3.4c.3.3.7.3 1 0l1-1c.2-.2.2-.6-.1-.9zm.4-4.9c1.1-1.1 1.1-2.8 0-3.8-1.1-1.1-2.8-1.1-3.8 0-1.1 1.1-1.1 2.8 0 3.8 1 1.1 2.8 1.1 3.8 0zm2.3 12.2-.5-3.1c-.1-.4-.4-.6-.8-.6l-1.3.2c-.4.1-.6.4-.6.8l1.4 9.4c.1.4.4.6.8.6l1.4-.2c.4-.1.6-.4.6-.8l-1-6.3z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Senior</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-share rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 15.2c-1.1 0-2.1.5-2.8 1.2L8 11.7v-.8l8.9-3.6c.7.9 1.9 1.5 3.1 1.5 2.2 0 4-1.8 4-4s-1.8-4-4-4c-2 0-3.6 1.4-3.9 3.3L6.5 8c-.7-.5-1.6-.8-2.5-.8-2.2 0-4 1.8-4 4s1.8 4 4 4c.8 0 1.6-.3 2.3-.7l9.8 5c.1 2.1 1.9 3.7 4 3.7 2.2 0 4-1.8 4-4-.1-2.2-1.9-4-4.1-4z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Share</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-star rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m23.4 12.5-4.1-3.8 1.1-6.4c.1-.7-.2-1.5-.8-1.9-.6-.4-1.4-.5-2.1-.1L12 3.1 6.5.2C5.8-.1 5-.1 4.4.4c-.6.4-.9 1.2-.8 1.9l1 6.4-4.1 3.8c-.5.5-.7 1.3-.5 2 .2.7.9 1.2 1.6 1.3l5.8 1.4 2.8 5.6c.3.7 1 1.1 1.8 1.1s1.4-.4 1.8-1.1l2.8-5.6 5.8-1.4c.7-.1 1.4-.6 1.6-1.3.1-.7-.1-1.5-.6-2z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Star</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-stop-circle-lined rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"></path><path d="M8.4 8.4h7.2v7.2H8.4z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Stop Circle Lined</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-table-lined rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.3 2.2c-.4-.4-1-.7-1.6-.7H2.2c-.6 0-1.2.2-1.6.7S0 3.1 0 3.8v16.5c0 .6.2 1.2.7 1.6.4.4 1 .7 1.6.7h19.5c.6 0 1.2-.2 1.6-.7.4-.4.7-1 .7-1.6V3.8c-.1-.7-.3-1.2-.8-1.6zM7.4 20.6h-5c-.2 0-.3-.1-.4-.2-.1-.1-.2-.2-.2-.4v-3.9h5.5v4.5zm0-6.4H1.9V9.8h5.5v4.4zm0-6.3H1.9v-4c0-.2.1-.3.2-.4s.2-.2.4-.2h4.9v4.6zm14.7 12.2c0 .2-.1.3-.2.4-.1.1-.2.2-.4.2H9.2v-4.5h12.9v3.9zm0-5.9H9.2V9.8h12.9v4.4zm0-6.3H9.2V3.4h12.3c.2 0 .3.1.4.2.1.1.2.2.2.4v3.9z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Table Lined</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-trash-lined rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.7 6.7H5.3c-.8 0-1.4.6-1.3 1.4l1.5 14.7c.1.7.6 1.2 1.3 1.2h10.4c.7 0 1.3-.5 1.3-1.2L20 8.1c.1-.8-.5-1.4-1.3-1.4zM16 21.3H8l-1.2-12h10.4l-1.2 12zM5.3 5.3h13.3c.8 0 1.4-.6 1.4-1.3s-.6-1.3-1.3-1.3h-5.3V1.3C13.3.6 12.7 0 12 0s-1.3.6-1.3 1.3v1.3H5.3C4.6 2.7 4 3.3 4 4s.6 1.3 1.3 1.3z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Trash Lined</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-upload rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 .4 3.5 7.2c-.6.6-.7 1.5-.1 2.1.5.6 1.5.7 2.1.1l5-4.5v11.6c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V4.9l5 4.5c.6.6 1.6.5 2.1-.1.3-.3.4-.6.4-1s-.2-.8-.5-1.1L13 .4c-.6-.5-1.4-.5-2 0zM4.5 24c-.8 0-1.5-.7-1.5-1.5S3.7 21 4.5 21h15c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-15z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Upload</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-user-circle-filled rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 4c1.9 0 3.5 1.6 3.5 3.5S13.9 11 12 11 8.5 9.4 8.5 7.5 10.1 4 12 4zm6 12.7c0 .7-.6 1.3-1.3 1.3H7.3c-.7 0-1.3-.6-1.3-1.3v-1.1c0-2 1.6-3.6 3.6-3.6h.4c.6.3 1.3.4 2 .4s1.4-.2 2-.4h.4c2 0 3.6 1.6 3.6 3.6v1.1z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>User Circle Filled</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-video rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m21.9 5.6-4.6 3.2v6.6l4.6 3.1c.9.6 2.1 0 2.1-1.1V6.6c0-1-1.2-1.6-2.1-1zM14 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Video</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-view rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-view"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>View</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-zoom-in rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"></path><path d="M10.5 7.5V6c0-.8-.7-1.5-1.5-1.5S7.5 5.2 7.5 6v1.5H6c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h1.5V12c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5v-1.5H12c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5h-1.5z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Zoom In</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-zoom-out rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"></path><path d="M6 7.5c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h6c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5H6z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Zoom Out</span></li><!--]--></ul><blockquote class="rpl-callout"><!--[--><p><!--[--><strong><!--[-->Accessibility tip<!--]--></strong><!--]--></p><p><!--[-->If you&#39;re using an icon by itself, ensure it&#39;s using the right label for screen readers.<!--]--></p><p><!--[-->If you&#39;re using an icon and text, ensure only the text gets read out.<!--]--></p><!--]--></blockquote><h2 class="rpl-type-h2 docs-h2" id="application" data-v-fff5b905><a href="#application" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Application<!--]--></a></h2><h2 class="rpl-type-h3 docs-h3" id="sizing" data-v-ea525968><a href="#sizing" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Sizing<!--]--></a></h2><p><!--[-->The Ripple Design System displays icons at four sizes (12px, 16px, 24px, 32px) depending on their type, use and screen size.<!--]--></p><div class="rpl-table rpl-table--no-stripes"><table class="w-full"><thead><tr><th>Preview</th><th>Value</th><th>Size</th></tr></thead><tbody><!--[--><tr><td><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-search rpl-icon--colour-default"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"></path></svg></span></td><td>12px</td><td>xs</td></tr><tr><td><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-search rpl-icon--colour-default"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"></path></svg></span></td><td>16px</td><td>s</td></tr><tr><td><span class="rpl-icon rpl-icon--size-m rpl-icon--icon-search rpl-icon--colour-default"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"></path></svg></span></td><td>24px</td><td>m</td></tr><tr><td><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-search rpl-icon--colour-default"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"></path></svg></span></td><td>32px</td><td>l</td></tr><!--]--></tbody></table></div><h2 class="rpl-type-h3 docs-h3" id="spacing" data-v-ea525968><a href="#spacing" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Spacing<!--]--></a></h2><p><!--[-->Ensure you use the right amount of space around an icon to allow for legibility. At the least, icons must have clear space of 50% of the height/width of the icon.<!--]--></p><p><!--[--><img src="/assets/img/Icon-Clear-space.png" alt="Visual of min space"><!--]--></p><h2 class="rpl-type-h2 docs-h2" id="accessibility" data-v-fff5b905><a href="#accessibility" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Accessibility<!--]--></a></h2><p><!--[-->For accessibility, ensure you:<!--]--></p><ul><!--[--><li><!--[-->wrap icons within their interactive component<!--]--></li><li><!--[-->specify if an icon is decorative and informative by assigning the property in code<!--]--></li><li><!--[-->use descriptive and meaningful titles for informative icons<!--]--></li><li><!--[-->use icons to represent the same action or idea.<!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="styling" data-v-fff5b905><a href="#styling" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Styling<!--]--></a></h2><h2 class="rpl-type-h3 docs-h3" id="colour" data-v-ea525968><a href="#colour" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Colour<!--]--></a></h2><p><!--[-->If a background changes the colour of the text (for example, a button) the icon should take on the same colour as the text.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--default-elevated&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-elevated&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><p><!--[-->Icons used to represent a state should use the correct colour. For example, an icon used in a success notification should use rpl-clr-success.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-form-alert--success&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-form-alert--success&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/4.styles/icons.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/styles/icons/_payload.json">[{"state":1,"once":541,"_errors":543,"serverRendered":545,"path":7,"prerenderedAt":546},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":229,"$sdd-globals":245,"$sdd-navigation":247},["ShallowRef",4],["ShallowReactive",5],{"/design-system/styles/icons":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":224,"_id":225,"_source":226,"_file":227,"_extension":228},"/design-system/styles/icons","styles",false,"","Icons","Use icons to illustrate actions and interactions, communicate statuses, and draw attention to important information.","page","Core",{"type":16,"children":17,"toc":211},"root",[18,26,31,36,41,48,55,60,66,69,75,78,101,107,114,119,124,130,135,144,150,155,180,186,192,197,202,207],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","Icons are a visual representation of an action, idea, or object. They provide a quick and easy way to communicate information. They can also enhance the usability of a design.",{"type":19,"tag":20,"props":27,"children":28},{},[29],{"type":24,"value":30},"Use the Ripple Design System's icon set for a consistent user experience and a cohesive look and feel.",{"type":19,"tag":20,"props":32,"children":33},{},[34],{"type":24,"value":35},"You can add icons to components or pair them with text. Icons should have a clear relationship with their corresponding text or action. This keeps them accessible to users with visual impairments or disabilities.",{"type":19,"tag":20,"props":37,"children":38},{},[39],{"type":24,"value":40},"Avoid using icons alone, as one user may interpret them differently to another.",{"type":19,"tag":42,"props":43,"children":45},"h2",{"id":44},"icon-library",[46],{"type":24,"value":47},"Icon Library",{"type":19,"tag":49,"props":50,"children":52},"h4",{"id":51},"alerts",[53],{"type":24,"value":54},"Alerts",{"type":19,"tag":56,"props":57,"children":59},"docs-icon-table",{"group":58},"alert",[],{"type":19,"tag":49,"props":61,"children":63},{"id":62},"social",[64],{"type":24,"value":65},"Social",{"type":19,"tag":56,"props":67,"children":68},{"group":62},[],{"type":19,"tag":49,"props":70,"children":72},{"id":71},"standard",[73],{"type":24,"value":74},"Standard",{"type":19,"tag":56,"props":76,"children":77},{"group":71},[],{"type":19,"tag":79,"props":80,"children":81},"blockquote",{},[82,91,96],{"type":19,"tag":20,"props":83,"children":84},{},[85],{"type":19,"tag":86,"props":87,"children":88},"strong",{},[89],{"type":24,"value":90},"Accessibility tip",{"type":19,"tag":20,"props":92,"children":93},{},[94],{"type":24,"value":95},"If you're using an icon by itself, ensure it's using the right label for screen readers.",{"type":19,"tag":20,"props":97,"children":98},{},[99],{"type":24,"value":100},"If you're using an icon and text, ensure only the text gets read out.",{"type":19,"tag":42,"props":102,"children":104},{"id":103},"application",[105],{"type":24,"value":106},"Application",{"type":19,"tag":108,"props":109,"children":111},"h3",{"id":110},"sizing",[112],{"type":24,"value":113},"Sizing",{"type":19,"tag":20,"props":115,"children":116},{},[117],{"type":24,"value":118},"The Ripple Design System displays icons at four sizes (12px, 16px, 24px, 32px) depending on their type, use and screen size.",{"type":19,"tag":120,"props":121,"children":123},"docs-icon-sizing-table",{":sizes":122},"[{\"xs\":\"12px\"},{\"s\":\"16px\"},{\"m\":\"24px\"},{\"l\":\"32px\"}]",[],{"type":19,"tag":108,"props":125,"children":127},{"id":126},"spacing",[128],{"type":24,"value":129},"Spacing",{"type":19,"tag":20,"props":131,"children":132},{},[133],{"type":24,"value":134},"Ensure you use the right amount of space around an icon to allow for legibility. At the least, icons must have clear space of 50% of the height/width of the icon.",{"type":19,"tag":20,"props":136,"children":137},{},[138],{"type":19,"tag":139,"props":140,"children":143},"img",{"alt":141,"src":142},"Visual of min space","/assets/img/Icon-Clear-space.png",[],{"type":19,"tag":42,"props":145,"children":147},{"id":146},"accessibility",[148],{"type":24,"value":149},"Accessibility",{"type":19,"tag":20,"props":151,"children":152},{},[153],{"type":24,"value":154},"For accessibility, ensure you:",{"type":19,"tag":156,"props":157,"children":158},"ul",{},[159,165,170,175],{"type":19,"tag":160,"props":161,"children":162},"li",{},[163],{"type":24,"value":164},"wrap icons within their interactive component",{"type":19,"tag":160,"props":166,"children":167},{},[168],{"type":24,"value":169},"specify if an icon is decorative and informative by assigning the property in code",{"type":19,"tag":160,"props":171,"children":172},{},[173],{"type":24,"value":174},"use descriptive and meaningful titles for informative icons",{"type":19,"tag":160,"props":176,"children":177},{},[178],{"type":24,"value":179},"use icons to represent the same action or idea.",{"type":19,"tag":42,"props":181,"children":183},{"id":182},"styling",[184],{"type":24,"value":185},"Styling",{"type":19,"tag":108,"props":187,"children":189},{"id":188},"colour",[190],{"type":24,"value":191},"Colour",{"type":19,"tag":20,"props":193,"children":194},{},[195],{"type":24,"value":196},"If a background changes the colour of the text (for example, a button) the icon should take on the same colour as the text.",{"type":19,"tag":198,"props":199,"children":201},"docs-example",{"id":200},"core-navigation-button--default-elevated",[],{"type":19,"tag":20,"props":203,"children":204},{},[205],{"type":24,"value":206},"Icons used to represent a state should use the correct colour. For example, an icon used in a success notification should use rpl-clr-success.",{"type":19,"tag":198,"props":208,"children":210},{"id":209},"forms-form-alert--success",[],{"title":10,"searchDepth":212,"depth":212,"links":213},2,[214,215,220,221],{"id":44,"depth":212,"text":47},{"id":103,"depth":212,"text":106,"children":216},[217,219],{"id":110,"depth":218,"text":113},3,{"id":126,"depth":218,"text":129},{"id":146,"depth":212,"text":149},{"id":182,"depth":212,"text":185,"children":222},[223],{"id":188,"depth":218,"text":191},"markdown","content:design-system:4.styles:icons.md","content","design-system/4.styles/icons.md","md",["ShallowRef",230],["ShallowReactive",231],{"/design-system/styles/icons":232},[233,239],{"_path":234,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":235,"description":236,"layout":13,"label":14,"_type":224,"_id":237,"_source":226,"_file":238,"_extension":228},"/design-system/styles/grid","Grid","With up to 12 columns, you can build grids with responsive layouts across different breakpoints.","content:design-system:4.styles:grid.md","design-system/4.styles/grid.md",{"_path":240,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":241,"description":242,"layout":13,"label":14,"_type":224,"_id":243,"_source":226,"_file":244,"_extension":228},"/design-system/styles/layer-styles","Layer styles",null,"content:design-system:4.styles:layer-styles.md","design-system/4.styles/layer-styles.md",["ShallowRef",246],{},[248,253,493],{"title":249,"_path":250,"icon":251,"layout":252},"Ripple Design System","/","carbon:home","home",{"title":254,"_path":255,"children":256},"Design System","/design-system",[257,273,289,319,345],{"title":258,"_path":259,"children":260},"About","/design-system/about",[261,264,267,270],{"title":262,"_path":263,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":265,"_path":266,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":268,"_path":269,"layout":13},"Support","/design-system/about/getting-support",{"title":271,"_path":272,"layout":13},"Contributing","/design-system/about/contributing",{"title":274,"_path":275,"children":276},"Design","/design-system/design",[277,280,283,286],{"title":278,"_path":279,"layout":13},"Getting started","/design-system/design/getting-started",{"title":281,"_path":282,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":284,"_path":285,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":287,"_path":288,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":290,"_path":291,"children":292},"Develop","/design-system/develop",[293,295,297,300],{"title":278,"_path":294,"layout":13},"/design-system/develop/getting-started",{"title":271,"_path":296,"layout":13},"/design-system/develop/contributing",{"title":298,"_path":299,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":301,"_path":302,"children":303,"layout":13},"Usage","/design-system/develop/usage",[304,307,310,313,316],{"title":305,"_path":306,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":308,"_path":309,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":311,"_path":312,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":314,"_path":315,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":317,"_path":318,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":320,"_path":321,"children":322},"Styles","/design-system/styles",[323,325,328,329,330,331,334,337,340,342],{"title":191,"_path":324,"layout":13},"/design-system/styles/colour",{"title":326,"_path":327,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":235,"_path":234,"layout":13},{"title":11,"_path":7,"layout":13},{"title":241,"_path":240,"layout":13},{"title":332,"_path":333,"layout":13},"Layout","/design-system/styles/layout",{"title":335,"_path":336,"layout":13},"Logo","/design-system/styles/logo",{"title":338,"_path":339,"layout":13},"Motion","/design-system/styles/motion",{"title":129,"_path":341,"layout":13},"/design-system/styles/spacing",{"title":343,"_path":344,"layout":13},"Typography","/design-system/styles/typography",{"title":346,"_path":347,"children":348},"Components","/design-system/components",[349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,490],{"title":350,"_path":351,"layout":13},"Accordion","/design-system/components/accordion",{"title":353,"_path":354,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":356,"_path":357,"layout":13},"Alert","/design-system/components/alert",{"title":359,"_path":360,"layout":13},"Block quote","/design-system/components/block-quote",{"title":362,"_path":363,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":365,"_path":366,"layout":13},"Button","/design-system/components/button",{"title":368,"_path":369,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":371,"_path":372,"layout":13},"Callout","/design-system/components/callout",{"title":374,"_path":375,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":377,"_path":378,"layout":13},"Card","/design-system/components/card",{"title":380,"_path":381,"layout":13},"Carousel","/design-system/components/carousel",{"title":383,"_path":384,"layout":13},"Category grid","/design-system/components/category-grid",{"title":386,"_path":387,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":389,"_path":390,"layout":13},"Chip","/design-system/components/chip",{"title":392,"_path":393,"layout":13},"Contact us","/design-system/components/contact-us",{"title":395,"_path":396,"layout":13},"Date input","/design-system/components/date-input",{"title":398,"_path":399,"layout":13},"Detail list","/design-system/components/detail-list",{"title":401,"_path":402,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":404,"_path":405,"layout":13},"File","/design-system/components/file",{"title":407,"_path":408,"layout":13},"Footer","/design-system/components/footer",{"title":410,"_path":411,"layout":13},"Form","/design-system/components/form",{"title":413,"_path":414,"layout":13},"Form alert","/design-system/components/form-alert",{"title":416,"_path":417,"layout":13},"Header","/design-system/components/header",{"title":419,"_path":420,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":422,"_path":423,"layout":13},"Input field","/design-system/components/input-field",{"title":425,"_path":426,"layout":13},"Key dates","/design-system/components/key-dates",{"title":428,"_path":429,"layout":13},"Media","/design-system/components/media",{"title":431,"_path":432,"layout":13},"Media embed","/design-system/components/media-embed",{"title":434,"_path":435,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":437,"_path":438,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":440,"_path":441,"layout":13},"Option button","/design-system/components/option-button",{"title":443,"_path":444,"layout":13},"Page action","/design-system/components/page-action",{"title":446,"_path":447,"layout":13},"Pagination","/design-system/components/pagination",{"title":449,"_path":450,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":452,"_path":453,"layout":13},"Profile","/design-system/components/profile",{"title":455,"_path":456,"layout":13},"Radio button","/design-system/components/radio-button",{"title":458,"_path":459,"layout":13},"Related links","/design-system/components/related-links",{"title":461,"_path":462,"layout":13},"Results listing","/design-system/components/results-listing",{"title":464,"_path":465,"layout":13},"Search bar","/design-system/components/search-bar",{"title":467,"_path":468,"layout":13},"Skip link","/design-system/components/skip-link",{"title":470,"_path":471,"layout":13},"Social share","/design-system/components/social-share",{"title":473,"_path":474,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":476,"_path":477,"layout":13},"Table","/design-system/components/table",{"title":479,"_path":480,"layout":13},"Tabs","/design-system/components/tabs",{"title":482,"_path":483,"layout":13},"Tag","/design-system/components/tag",{"title":485,"_path":486,"layout":13},"Text area","/design-system/components/text-area",{"title":488,"_path":489,"layout":13},"Timeline","/design-system/components/timeline",{"title":491,"_path":492,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":494,"_path":495,"children":496,"layout":13},"Ripple Framework","/framework",[497,498,516,538],{"title":494,"_path":495,"layout":13},{"title":499,"_path":500,"children":501},"Key Concepts","/framework/key-concepts",[502,504,507,510,513],{"title":311,"_path":503,"layout":13},"/framework/key-concepts/nuxt",{"title":505,"_path":506,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":508,"_path":509,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":511,"_path":512,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":514,"_path":515,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":517,"_path":518,"children":519},"Guides","/framework/guides",[520,523,526,529,532,535],{"title":521,"_path":522,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":524,"_path":525,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":527,"_path":528,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":530,"_path":531,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":533,"_path":534,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":536,"_path":537,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":539,"_path":540,"layout":13},"Core modules","/framework/core-modules",["Reactive",542],["Set"],["Reactive",544],{"module-navigation":242},true,1714695151932]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Icons</h1><p class="rpl-type-p-large" data-v-3163c6df>Use icons to illustrate actions and interactions, communicate statuses, and draw attention to important information.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->Icons are a visual representation of an action, idea, or object. They provide a quick and easy way to communicate information. They can also enhance the usability of a design.<!--]--></p><p><!--[-->Use the Ripple Design System&#39;s icon set for a consistent user experience and a cohesive look and feel.<!--]--></p><p><!--[-->You can add icons to components or pair them with text. Icons should have a clear relationship with their corresponding text or action. This keeps them accessible to users with visual impairments or disabilities.<!--]--></p><p><!--[-->Avoid using icons alone, as one user may interpret them differently to another.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="icon-library" data-v-fff5b905><a href="#icon-library" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Icon Library<!--]--></a></h2><h4 class="rpl-type-h4 docs-h4" id="alerts"><!--[-->Alerts<!--]--></h4><ul class="docs-icon-table" data-v-e0bacec0><!--[--><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-fire rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.3 0 11.7c0 4.9 3.1 9.1 7.4 10.8-.7-.7-1.3-1.9-1.3-3.5 0-2.4 1-4.1 1.8-5.6.7-1.3 1.5-2.5 1.5-4.1 0-1-1-2.1-1.4-2.4-.2-.1-.2-.4-.1-.6s.2-.3.5-.3c1.3 0 4 .7 4.8 3.4.2.8.2 1.8.2 2.8 0 1-.1 2.3.3 2.6 0 0 .1.1.3.1.1 0 .4-.2.6-.8.5-1.4.5-3.2.1-3.6-.2-.2-.2-.5-.1-.7s.4-.3.7-.2c.1.1 3.5 1.3 3.3 6.7-.1 3.2-1.3 5.4-2.9 6.6C20.5 21.4 24 17 24 11.7 24 5.3 18.6 0 12 0z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Fire</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-flood rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.8 19.5c-1.6 1-3.9 1-5.5 0h-.1c-.1.1-.2.1-.3.2-.1.1-.3.1-.4.2-.2.1-.3.1-.4.1-.2.1-.4.1-.6.1h-.2c-.3 0-.6.1-.8.1-1 0-2-.3-2.8-.8-.2.1-.5.3-.7.4 2.2 2.5 5.4 4.1 9 4.1 3.6 0 6.8-1.6 9-4.1-.2-.1-.5-.2-.7-.4-1.6 1.1-3.9 1.1-5.5.1zM12 0C5.4 0 0 5.4 0 12c0 2.2.6 4.2 1.6 6 .5-.1 1-.3 1.3-.7.4-.4 1.1-.4 1.5 0 .8.8 2.3.9 3.4.5.1 0 .1-.1.2-.1s.1-.1.2-.1c.1-.1.2-.2.3-.2.4-.4 1.1-.4 1.5 0 1 1 3 1 4 0 .4-.4 1.1-.4 1.5 0 1 1 3 1 4 0 .4-.4 1.1-.4 1.5 0 .3.3.8.5 1.3.7 1-1.8 1.6-3.8 1.6-6C24 5.4 18.6 0 12 0zm8 12.6-1.5-1.2v4c-.9.2-1.9.1-2.8-.2-.1 0-.1 0-.2-.1-.3-.1-.5-.2-.7-.4-.2.1-.5.3-.7.4-.1 0-.2.1-.3.1-1.1.4-2.4.4-3.5 0-.1 0-.2-.1-.3-.1-.3-.1-.5-.2-.7-.4h-.1c-.1.1-.2.1-.3.2-.1 0-.2.1-.3.1h-.1c-.1 0-.2.1-.3.1-.2.1-.4.1-.6.2h-.2c-.3 0-.6.1-.8.1-.4 0-.7 0-1-.1v-4L4 12.6 2.6 11l3.9-3.3V5.5h2.2l2.6-1.8c.4-.3 1-.3 1.4 0l8.7 7.3-1.4 1.6z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Flood</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-lightning rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm4.8 13.5-6.6 7.3c-.2.2-.4.3-.7.3-.2 0-.4-.1-.5-.2-.4-.3-.5-.8-.4-1.2l2-5.7-3-2.2c-.2-.2-.4-.4-.4-.7 0-.3.1-.6.3-.8L14.1 3c.3-.4.8-.4 1.2-.2.4.2.5.7.4 1.2l-2 5.7 3 2.2c.2.2.4.4.4.7 0 .4-.1.7-.3.9z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Lightning</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-medical rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.4 15.6h-.6v-4.1c0-.5-.2-.9-.5-1.3l-3.7-3.7c-.2-.2-.4-.3-.6-.4-.3-.1-.5-.1-.7-.1h-1.7V4.2c0-.5-.2-.9-.5-1.3-.3-.3-.8-.5-1.3-.5h-12c-.5 0-.9.2-1.3.5-.3.4-.5.8-.5 1.3v12c0 .5.2.9.5 1.3.4.3.8.5 1.3.5h.6c0 1 .4 1.9 1.1 2.5.6.7 1.5 1.1 2.5 1.1s1.9-.4 2.5-1.1c.7-.6 1.1-1.5 1.1-2.5h4.8c0 1 .4 1.9 1.1 2.5.7.7 1.6 1.1 2.5 1.1s1.9-.4 2.5-1.1c.7-.7 1.1-1.6 1.1-2.5h1.8c.3 0 .6-.3.6-.6v-1.2c0-.3-.3-.6-.6-.6zM7.3 19.3c-.3.3-.8.5-1.3.5s-.9-.2-1.3-.5c-.3-.3-.5-.8-.5-1.3s.2-.9.5-1.3c.3-.3.8-.5 1.3-.5s.9.2 1.3.5c.3.3.5.8.5 1.3s-.2.9-.5 1.3zm4.1-8.8c0 .1 0 .2-.1.2-.1.1-.1.1-.2.1H9v2.1c0 .1 0 .2-.1.2-.1.1-.1.1-.2.1H6.9c-.1 0-.2 0-.2-.1-.1-.1-.1-.1-.1-.2v-2.1H4.5c-.1 0-.2 0-.2-.1-.1-.1-.1-.1-.1-.2V8.7c0-.1 0-.2.1-.2.1-.1.1-.1.2-.1h2.1V6.3c0-.1 0-.2.1-.2s.1-.1.2-.1h1.8c.1 0 .2 0 .2.1.1 0 .1.1.1.2v2.1h2.1c.1 0 .2 0 .2.1.1.1.1.1.1.2v1.8zm7.9 8.8c-.3.3-.8.5-1.3.5s-.9-.2-1.3-.5c-.3-.3-.5-.8-.5-1.3s.2-.9.5-1.3c.3-.3.8-.5 1.3-.5s.9.2 1.3.5c.3.3.5.8.5 1.3s-.2.9-.5 1.3zM21 12h-5.4V7.8h1.7l3.7 3.7v.5z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Medical</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-smoke rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.9 10.4c.4-.1.9-.1 1.3-.1.7-2.6 2.8-4.7 5.4-5.3 3.8-.8 7.5 1.6 8.4 5.4.8.3 1.4.8 2 1.4C23.9 5.3 18.6 0 12 0S0 5.4 0 12c0 1.9.5 3.7 1.2 5.3.4-.4.9-.7 1.5-1-.3-2.7 1.5-5.3 4.2-5.9z"></path><path d="M20.8 12.4c-.4-.1-.7-.5-.8-.9 0-.1 0-.3-.1-.4-.6-2.7-3.2-4.4-5.8-3.9-2.1.4-3.7 2.3-3.8 4.5 0 .3-.2.6-.5.8-.3.2-.6.2-.9.2-.5-.1-1-.1-1.5 0-1.7.4-2.8 2.1-2.4 3.9 0 .1 0 .2.1.3.1.3.1.6-.1.9-.2.3-.4.5-.7.5-.8.2-1.7.5-1.7 1.2C4.7 22.2 8.2 24 12 24c5.4 0 10-3.6 11.5-8.6 0-.1-.1-.2-.1-.3-.3-1.4-1.3-2.4-2.6-2.7z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Smoke</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-temperature rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20.7c-3 0-5.5-2.4-5.5-5.5 0-2.2 1.4-4.2 3.3-5V3.9c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.4c1.9.8 3.3 2.8 3.3 5 0 3-2.5 5.4-5.5 5.4z"></path><circle cx="12" cy="15.3" r="2.2"></circle></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Temperature</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-traffic rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 4.4c-.6 0-1.1.5-1.1 1.1v3.3c0 .6.5 1.1 1.1 1.1s1.1-.5 1.1-1.1V5.5c0-.6-.5-1.1-1.1-1.1zm0 9.8c-.6 0-1.1.5-1.1 1.1v4.4c0 .6.5 1.1 1.1 1.1s1.1-.5 1.1-1.1v-4.4c0-.6-.5-1.1-1.1-1.1zM0 12.7c0 4.2 2.2 8 5.5 10.2L8.8 1.1C3.8 2.6 0 7.2 0 12.7zM15.3 1.1l3.3 21.8c3.3-2.2 5.5-6 5.5-10.2-.1-5.5-3.9-10.1-8.8-11.6z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Traffic</span></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="social"><!--[-->Social<!--]--></h4><ul class="docs-icon-table" data-v-e0bacec0><!--[--><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-facebook rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-facebook"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Facebook</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-instagram rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11.6" cy="12.8" r="4.7"></circle><path d="M17.4 0H6.6C3 0 0 3.1 0 6.8v10.4C0 20.9 3 24 6.6 24h10.7c3.7 0 6.6-3.1 6.6-6.8V6.8C24 3.1 21 0 17.4 0zm-5.8 19.9c-3.9 0-7.1-3.2-7.1-7.1 0-3.9 3.2-7.1 7.1-7.1 3.9 0 7.1 3.2 7.1 7.1.1 4-3.1 7.1-7.1 7.1zm7.2-13.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Instagram</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-linkedin rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-linkedin"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Linkedin</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-spotify rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.5 17.3c-.2.4-.7.5-1 .2-2.8-1.7-6.4-2.1-10.5-1.2-.4.1-.8-.2-.9-.6-.1-.4.2-.8.6-.9 4.6-1 8.5-.6 11.7 1.3.2.4.3.9.1 1.2zM19 14c-.3.4-.8.6-1.3.3-3.2-2-8.1-2.6-12-1.4-.5.1-1-.1-1.2-.6-.1-.5.1-1 .6-1.2 4.4-1.3 9.8-.7 13.5 1.6.5.3.6.9.4 1.3zm.1-3.4C15.2 8.3 8.8 8.1 5.2 9.3c-.6.1-1.3-.2-1.4-.8-.2-.6.1-1.2.7-1.4 4.2-1.3 11.3-1 15.7 1.6.5.3.7 1 .4 1.5-.3.6-1 .8-1.5.4z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Spotify</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-wechat rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.6 8.3c-4.4 0-7.9 2.9-7.9 6.5 0 .6.1 1.1.2 1.6h-.3c-1 0-1.9-.1-2.8-.4-2.5 1.5-3 1.3-3 1.3.3-.6.4-1.7.4-2.5C1.3 13.6 0 11.6 0 9.4c0-3.9 3.9-7 8.6-7 4.3 0 7.9 2.6 8.5 5.9h-.5zm-3.9-1.1c0-.7-.6-1.3-1.3-1.3s-1.3.6-1.3 1.3c0 .7.6 1.3 1.3 1.3s1.3-.6 1.3-1.3zm-8.2 0c0 .7.6 1.3 1.3 1.3S7 7.9 7 7.2 6.4 6 5.7 6s-1.2.5-1.2 1.2z"></path><path d="M16.7 8.9c4 0 7.3 2.6 7.3 5.9 0 1.9-1.1 3.5-2.7 4.6 0 .6.1 1.6.4 2.1 0 0-.4.2-2.5-1.1-.7.2-1.5.3-2.4.3-4 0-7.3-2.6-7.3-5.9 0-3.3 3.2-5.9 7.2-5.9zM13.2 13c0 .6.5 1 1 1 .6 0 1-.5 1-1 0-.6-.5-1-1-1-.6-.1-1 .4-1 1zm4.7 0c0 .6.5 1 1 1 .6 0 1-.5 1-1 0-.6-.5-1-1-1s-1 .4-1 1z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Wechat</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-whatsapp rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-whatsapp"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Whatsapp</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-youtube rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.5 6.2c-.3-1-1.1-1.9-2.1-2.1-1.9-.5-9.4-.5-9.4-.5s-7.5 0-9.4.5C1.6 4.4.8 5.2.5 6.2 0 8.1 0 12 0 12s0 3.9.5 5.8c.3 1 1.1 1.8 2.1 2.1 1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5c1-.3 1.8-1.1 2.1-2.1.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zm-14 9.4V8.5l6.3 3.6-6.3 3.5z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Youtube</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-x rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-x"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>X</span></li><!--]--></ul><h4 class="rpl-type-h4 docs-h4" id="standard"><!--[-->Standard<!--]--></h4><ul class="docs-icon-table" data-v-e0bacec0><!--[--><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-accessible rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="9" cy="3" r="3"></circle><path d="m23.9 19.4-.7-1.3c-.2-.4-.6-.5-1-.3l-1.7.9-2.7-5.7c-.2-.5-.8-.9-1.4-.9h-6.2l-.2-1.5h5.7c.4 0 .8-.3.8-.7V8.3c0-.4-.3-.8-.8-.8H6.6l.9 6.2c.1.8.8 1.3 1.5 1.3h6.5l2.9 6.3c.4.8 1.3 1.1 2 .7l3.1-1.5c.5-.3.6-.7.4-1.1z"></path><path d="M13.4 16.5C13.1 19 10.9 21 8.2 21 5.4 21 3 18.6 3 15.8c0-1.9 1.1-3.6 2.6-4.6-.1-1.2-.3-2.2-.4-3.1-3 1.2-5.2 4.2-5.2 7.7C0 20.3 3.7 24 8.2 24c3.4 0 6.3-2 7.6-4.9l-1.2-2.6h-1.2z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Accessible</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-add rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 10h-8V2c0-1.1-.9-2-2-2s-2 .9-2 2v8H2c-1.1 0-2 .9-2 2s.9 2 2 2h8v8c0 1.1.9 2 2 2s2-.9 2-2v-8h8c1.1 0 2-.9 2-2s-.9-2-2-2z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Add</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-arrow-up rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.6 10.8 12.9.4c-.5-.5-1.3-.5-1.9 0L.4 10.8c-.5.5-.5 1.3 0 1.8l1.2 1.2c.5.5 1.4.5 1.9 0l6.3-6.5v15.4c0 .7.6 1.3 1.3 1.3h1.8c.7 0 1.3-.6 1.3-1.3V7.3l6.3 6.4c.5.5 1.4.5 1.9 0l1.2-1.2c.5-.4.5-1.2 0-1.7z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Arrow Up</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-arrow-right rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.6 11.1 13.2.4c-.5-.5-1.3-.5-1.8 0l-1.2 1.2c-.5.5-.5 1.4 0 1.9l6.5 6.3H1.3c-.7 0-1.3.6-1.3 1.3v1.8c0 .7.6 1.3 1.3 1.3h15.4l-6.5 6.3c-.5.5-.5 1.4 0 1.9l1.2 1.2c.5.5 1.3.5 1.8 0l10.4-10.7c.5-.5.5-1.3 0-1.8z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Arrow Right</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-arrow-down rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m23.6 11.4-1.2-1.2c-.5-.5-1.4-.5-1.9 0l-6.3 6.5V1.3c0-.7-.6-1.3-1.3-1.3h-1.8c-.7 0-1.3.6-1.3 1.3v15.4l-6.3-6.5c-.5-.5-1.4-.5-1.9 0L.4 11.4c-.5.5-.5 1.3 0 1.8l10.7 10.4c.5.5 1.3.5 1.9 0l10.7-10.4c.4-.5.4-1.3-.1-1.8z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Arrow Down</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-arrow-left rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.7 9.8H7.3l6.5-6.3c.5-.5.5-1.4 0-1.9L12.6.4c-.5-.5-1.3-.5-1.8 0L.4 11.1c-.5.5-.5 1.3 0 1.9l10.4 10.7c.5.5 1.3.5 1.8 0l1.2-1.2c.5-.5.5-1.4 0-1.9l-6.5-6.3h15.4c.7 0 1.3-.6 1.3-1.3v-1.8c0-.8-.6-1.4-1.3-1.4z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Arrow Left</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-attach rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.6 4.6C18.5 2 16.3 0 13.7 0c-2.7 0-4.9 2-5 4.6v12.7c.1 1.7 1.5 3.1 3.3 3.1s3.2-1.4 3.3-3.1v-10c0-.7-.5-1.2-1.1-1.2-.6 0-1.1.5-1.1 1.2v9.9c0 .4-.5.8-1.1.8s-1.1-.4-1.1-.8V4.8c0-1.3 1.2-2.4 2.8-2.4 1.5 0 2.8 1.1 2.8 2.4v12c0 2.6-2 4.8-4.4 4.8s-4.4-2.2-4.4-4.8V12c0-.7-.5-1.2-1.1-1.2-.6 0-1.1.5-1.1 1.2v4.8c0 4 3 7.2 6.6 7.2s6.6-3.2 6.6-7.2l-.1-12.2z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Attach</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-browser rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.8 1.5H2.2C1 1.5 0 2.5 0 3.8v16.5c0 1.2 1 2.2 2.2 2.2h19.5c1.2 0 2.2-1 2.2-2.2V3.8c.1-1.3-.9-2.3-2.1-2.3zM6 6.9c0 .3-.3.6-.6.6H3.6c-.3 0-.6-.3-.6-.6V5.1c0-.3.3-.6.6-.6h1.9c.2 0 .5.3.5.6v1.8zm2.2 0V5.1c0-.3.3-.6.6-.6h11.6c.3 0 .6.3.6.6V7c0 .3-.3.6-.6.6H8.8c-.3-.1-.6-.4-.6-.7zm13.2 10.2h-3.2l1.3 3c0 .1 0 .2-.1.2l-1 .4c-.1 0-.2 0-.2-.1l-1.3-3-2.2 2.4c-.1.1-.3 0-.3-.1v-9.8c0-.1.2-.2.3-.1l6.9 6.8c.1.1 0 .3-.2.3z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Browser</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-calendar-lined rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.7 2.7H20V1.3c0-.7-.6-1.3-1.3-1.3-.7 0-1.3.6-1.3 1.3v1.3H6.7V1.3C6.7.6 6.1 0 5.3 0 4.6 0 4 .6 4 1.3v1.3H1.3C.6 2.7 0 3.3 0 4v18.7c0 .7.6 1.3 1.3 1.3h21.3c.7 0 1.3-.6 1.3-1.3V4c.1-.7-.5-1.3-1.2-1.3zm-1.4 18.6H2.7V6.7h18.7v14.6z"></path><path d="M13.3 13.4h5.3v5.3h-5.3z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Calendar Lined</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-cancel rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-cancel"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Cancel</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-cancel-circle-filled rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.7 15.4c.4.4.4 1.1 0 1.5l-.8.8c-.4.4-1.1.4-1.5 0L12 14.3l-3.4 3.4c-.4.4-1.1.4-1.5 0l-.8-.8c-.4-.4-.4-1.1 0-1.5L9.7 12 6.3 8.6c-.4-.4-.4-1.1 0-1.5l.8-.8c.4-.4 1.1-.4 1.5 0L12 9.7l3.4-3.4c.4-.4 1.1-.4 1.5 0l.8.8c.4.4.4 1.1 0 1.5L14.3 12l3.4 3.4z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Cancel Circle Filled</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-car rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.714 8.799h-1.563l-1.008-2.586C19.613 4.89 18.126 4 16.437 4H7.513c-1.69 0-3.202.89-3.706 2.213L2.798 8.8H1.235C.555 8.799 0 9.254 0 9.812v.58c0 .558.555 1.013 1.235 1.013h.429a10.83 10.83 0 0 0-.378 2.834v4.86c0 .56.554 1.014 1.235 1.014h2.067c.68 0 1.236-.455 1.236-1.013v-1.552h12.353V19.1c0 .558.554 1.013 1.235 1.013h2.067c.68 0 1.235-.455 1.235-1.013v-4.882c0-.951-.126-1.903-.378-2.834h.429c.68 0 1.235-.455 1.235-1.013v-.58c-.05-.537-.605-.992-1.286-.992ZM4.966 9.833l1.185-3.02c.202-.496.757-.827 1.362-.827h8.924c.63 0 1.185.33 1.361.827l1.185 3.02c.05.145-.075.269-.252.269H5.218c-.176.02-.302-.124-.252-.269Zm2.572 4.944H5.042c-.429 0-.756-.27-.756-.62v-.973c0-.372.428-.683.882-.62l2.32.31c.302.041.554.227.63.475l.176.662c.101.393-.252.766-.756.766Zm12.1-.62c0 .35-.327.62-.756.62h-2.495c-.48 0-.832-.373-.732-.745l.177-.662c.076-.248.302-.434.63-.476l2.32-.31c.453-.062.882.228.882.62v.952h-.025Z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Car</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-check rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.9.4c-1.1-.7-2.6-.4-3.3.8L9.2 17.8l-5.1-5.1c-.9-.9-2.5-.9-3.4 0s-.9 2.5 0 3.4l7.2 7.2c1.1 1.1 2.9.9 3.7-.4l12-19.2c.7-1.2.4-2.6-.7-3.3z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Check</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-check-circle-filled rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-check-circle-filled"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Check Circle Filled</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-chevron-up rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-chevron-up"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Chevron Up</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-chevron-right rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-chevron-right"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Chevron Right</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-chevron-down rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Chevron Down</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-chevron-left rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-chevron-left"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Chevron Left</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-child-lined rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.8 4.7C19.7 3.6 18.2 3.5 17 4c-.5-2.2-2.5-4-5-4S7.5 1.8 7 4.1c-1.2-.6-2.7-.4-3.8.6-1.3 1.3-1.3 3.5 0 4.8L6 12.3v8.4C6 22.5 7.5 24 9.4 24h.4c.9 0 1.7-.3 2.2-.9.6.5 1.4.9 2.2.9h.4c1.9 0 3.4-1.5 3.4-3.4v-8.4l2.8-2.8c1.3-1.2 1.3-3.3 0-4.7zM12 2.2c1.6 0 2.8 1.3 2.8 2.8S13.6 7.9 12 7.9c-1.6 0-2.8-1.3-2.8-2.8s1.2-2.9 2.8-2.9zm7.2 5.7-3.4 3.4v9.3c0 .6-.5 1.1-1.1 1.1h-.4c-.6 0-1.1-.5-1.1-1.1v-4.5H11v4.5c0 .6-.5 1.1-1.1 1.1h-.5c-.6 0-1.1-.5-1.1-1.1v-9.3L4.8 7.9c-.4-.4-.4-1.2 0-1.6s1.2-.4 1.6 0l3.4 3.4h4.3l3.4-3.4c.4-.4 1.2-.4 1.6 0 .5.5.5 1.2.1 1.6z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Child Lined</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-current-location rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-current-location"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Current Location</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-document rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-document"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Document</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-document-lined rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-document-lined"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Document Lined</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-dollar-circle-filled rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm1.3 17.9v1.2c0 .5-.2.9-.8.9h-1c-.7 0-.9-.6-.9-.9v-1.2C8.9 17.6 7.4 16.5 7 15l2.8-.9c.3 1.1 1.2 1.5 2.2 1.5 1.1 0 1.7-.5 1.7-1.2 0-.5-.2-.9-1.1-1l-2.3-.5c-1.6-.4-3.1-1.3-3.1-3.4 0-1.9 1.3-3.2 3.3-3.5V4.9c0-.5.3-.9.9-.9h1c.5 0 .8.4.8.9v1.3c1.5.4 2.7 1.3 3.1 2.7l-2.7.7c-.4-.9-1.2-1.2-1.9-1.2-.9 0-1.5.5-1.5 1.2 0 .5.2.8.9 1l2.3.5c2 .5 3.1 1.5 3.1 3.4.1 1.8-1.3 3-3.2 3.4z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Dollar Circle Filled</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-download rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-download"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Download</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-enlarge rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-enlarge"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Enlarge</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-enlarge-square-filled rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-enlarge-square-filled"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Enlarge Square Filled</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-exclamation-circle-filled rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-exclamation-circle-filled"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Exclamation Circle Filled</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-free rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m20.3 13 3.4-3.4c.4-.4.4-1.1 0-1.5l-.8-.8c-.4-.4-1.1-.4-1.5 0L18 10.7l-3.4-3.4c-.4-.4-1.1-.4-1.5 0l-.8.8c-.4.4-.4 1.1 0 1.5l3.4 3.4-3.4 3.4c-.4.4-.4 1.1 0 1.5l.8.8c.4.4 1.1.4 1.5 0l3.4-3.4 3.4 3.4c.4.4 1.1.4 1.5 0l.8-.8c.4-.4.4-1.1 0-1.5L20.3 13zm-13-2.2-2.6-.6c-.8-.2-1-.6-1-1.1 0-.7.7-1.3 1.7-1.3.8 0 1.8.4 2.2 1.4l3-.8c-.5-1.5-1.8-2.6-3.5-3V4c0-.6-.4-1-.9-1H5.1c-.6 0-1 .4-1 1v1.4C1.8 5.8.4 7.2.4 9.4c0 2.4 1.6 3.3 3.5 3.8l2.6.6c.9.2 1.2.6 1.2 1.2 0 .7-.7 1.3-1.9 1.3s-2.1-.5-2.5-1.7l-3.2 1c.5 1.7 2.1 2.9 4.1 3.3v1.3c0 .4.2 1.1 1 1.1h1.1c.7 0 .9-.5.9-1.1v-1.3c2.1-.4 3.7-1.8 3.7-4-.1-2.4-1.4-3.6-3.6-4.1z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Free</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-home rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-home"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Home</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-information-circle-filled rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-information-circle-filled"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Information Circle Filled</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-link rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 18H4V6h8c1.1 0 2-.9 2-2s-.9-2-2-2H2C.9 2 0 2.9 0 4v16c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2s-.9-2-2-2z"></path><path d="m23.3 10.4-4.9-4c-.9-.7-2.1-.6-2.8.3-.7.9-.6 2.1.3 2.8l.6.4H8c-1.1 0-2 .9-2 2s.9 2 2 2h8.4l-.6.4c-.9.7-1 2-.3 2.8.4.5 1 .7 1.6.7.4 0 .9-.1 1.3-.4l4.9-4c.5-.4.7-1 .7-1.6 0-.4-.3-1-.7-1.4z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Link</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-link-external-square-filled rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Link External Square Filled</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-list rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="2.2" cy="3" r="2.2"></circle><path d="M9.8 5.2h12C23 5.2 24 4.2 24 3S23 .8 21.8.8h-12C8.6.8 7.6 1.8 7.6 3s.9 2.2 2.2 2.2z"></path><circle cx="2.2" cy="12" r="2.2"></circle><path d="M21.8 9.8h-12c-1.2 0-2.2 1-2.2 2.2s1 2.2 2.2 2.2h12c1.2 0 2.2-1 2.2-2.2s-1-2.2-2.2-2.2z"></path><circle cx="2.2" cy="21" r="2.2"></circle><path d="M21.8 18.8h-12c-1.2 0-2.2 1-2.2 2.2s1 2.2 2.2 2.2h12c1.2 0 2.2-1 2.2-2.2s-1-2.2-2.2-2.2z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>List</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-loading rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.4 12c0-.7-.5-1.2-1.2-1.2h-6c-.7 0-1.2.5-1.2 1.2s.5 1.2 1.2 1.2h6c.7 0 1.2-.5 1.2-1.2zm14.4-1.2h-6c-.7 0-1.2.5-1.2 1.2s.5 1.2 1.2 1.2h6c.7 0 1.2-.5 1.2-1.2s-.5-1.2-1.2-1.2zM12 0c-.7 0-1.2.5-1.2 1.2v6c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2v-6C13.2.5 12.7 0 12 0zm0 15.6c-.7 0-1.2.5-1.2 1.2v6c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2v-6c0-.7-.5-1.2-1.2-1.2zm-4.2-1.1-4.2 4.2c-.6.6-.6 1.3-.1 1.8s1.2.5 1.7 0l4.2-4.2c.5-.5.5-1.2 0-1.7-.4-.5-1.2-.5-1.6-.1zm8.4-5 4.2-4.2c.6-.6.6-1.3.1-1.8s-1.2-.5-1.7 0l-4.2 4.2c-.5.5-.5 1.2 0 1.7.4.5 1.2.5 1.6.1zm-11-6C4.7 3 4 3 3.5 3.5s-.5 1.2 0 1.7l4.2 4.2c.5.5 1.2.5 1.7 0s.5-1.2 0-1.7L5.2 3.5zm11 11c-.5-.5-1.2-.5-1.7 0s-.5 1.2 0 1.7l4.2 4.2c.5.5 1.2.5 1.7 0s.5-1.2 0-1.7l-4.2-4.2z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Loading</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-log-in-lined rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.5 7.5H18V6c0-1.2-.4-2.4-1-3.4C15.9 1 14 0 12 0 8.7 0 6 2.7 6 6v1.5H1.5C.7 7.5 0 8.2 0 9v13.5c0 .8.7 1.5 1.5 1.5h21c.8 0 1.5-.7 1.5-1.5V9c0-.8-.7-1.5-1.5-1.5zM9 6c0-1.7 1.3-3 3-3 1 0 1.9.5 2.5 1.3.3.5.5 1.1.5 1.7v1.5H9V6zm12 15H3V10.5h18V21z"></path><circle cx="12" cy="15" r="1.5"></circle></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Log In Lined</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-mail rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-mail"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Mail</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-mail-lined rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-1.2 15.6H2.4V5.4h19.2v13.2z"></path><path d="M20.4 9V6.6L12 10.2 3.6 6.6V9l8.4 3.6z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Mail Lined</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-menu rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1.3 5.3H12c.7 0 1.3-.6 1.3-1.3s-.6-1.3-1.3-1.3H1.3C.6 2.7 0 3.3 0 4s.6 1.3 1.3 1.3zm0 5.4h21.3c.7 0 1.3-.6 1.3-1.3S23.4 8 22.7 8H1.3C.6 8 0 8.6 0 9.3s.6 1.4 1.3 1.4zm0 5.3h16c.7 0 1.3-.6 1.3-1.3s-.6-1.3-1.3-1.3h-16c-.7 0-1.3.6-1.3 1.3S.6 16 1.3 16zm21.4 2.7H1.3c-.7 0-1.3.6-1.3 1.3 0 .7.6 1.3 1.3 1.3h21.3c.7 0 1.3-.6 1.3-1.3.1-.7-.5-1.3-1.2-1.3z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Menu</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-microphone rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 9.4c-.7 0-1.3.6-1.3 1.3v2.6c0 2.2-1.8 4-4 4s-4-1.8-4-4v-2.6c0-.7-.6-1.3-1.3-1.3-.8 0-1.4.6-1.4 1.3v2.9c.1 3.6 3.1 6.5 6.7 6.5s6.6-2.9 6.7-6.5v-2.9c-.1-.7-.6-1.3-1.4-1.3z"></path><path d="M11.7 16c1.5 0 2.7-1.2 2.7-2.7V2.7c0-1.5-1.2-2.7-2.7-2.7C10.2 0 9 1.2 9 2.7v10.7c0 1.4 1.2 2.6 2.7 2.6zm0 5.3c-.7 0-1.3.6-1.3 1.3 0 .7.6 1.3 1.3 1.3.7 0 1.3-.6 1.3-1.3 0-.7-.6-1.3-1.3-1.3z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Microphone</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-pause-circle-lined rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"></path><path d="M9.6 8.4c-.7 0-1.2.5-1.2 1.2v4.8c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2V9.6c0-.7-.5-1.2-1.2-1.2zm4.8 0c-.7 0-1.2.5-1.2 1.2v4.8c0 .7.5 1.2 1.2 1.2s1.2-.5 1.2-1.2V9.6c0-.7-.5-1.2-1.2-1.2z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Pause Circle Lined</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-person rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m5.069 10.711 1.243-2.383a3.97 3.97 0 0 1 1.425-1.502c2.875-1.71 3.238-1.684 3.6-1.658l1.943.13c.596.025 1.01.18 3.005 3.108a.507.507 0 0 0 .337.207l2.383.363c.647.103 1.088.7.984 1.347a1.174 1.174 0 0 1-1.347.984l-2.383-.363c-.777-.129-1.476-.544-1.917-1.191-.104-.156-.181-.285-.285-.415l-.947 4.658 1.543 2.31c.31.311.57.726.725 1.14l1.632 4.767c.26.699-.13 1.476-.829 1.71a1.316 1.316 0 0 1-.44.077c-.57 0-1.088-.363-1.295-.907l-1.632-4.766c-.026-.052-.052-.078-.078-.13L8.954 14.39a2.184 2.184 0 0 1-.596-2.02l.83-3.68a2.277 2.277 0 0 1-.26.156 1.44 1.44 0 0 0-.544.57L7.141 11.8a1.189 1.189 0 0 1-1.036.622c-.182 0-.363-.052-.544-.13a1.19 1.19 0 0 1-.492-1.58Zm7.638-6.126a2.292 2.292 0 1 0 0-4.585 2.292 2.292 0 0 0 0 4.585Z"></path><path d="m8.375 16.799-3.893 3.196a1.396 1.396 0 0 0-.396 1.531c.054.145.124.26.228.386a1.33 1.33 0 0 0 1.89.18l3.894-3.197c.334-.29.632-.68.813-1.078l.097-.59-1.968-1.972-.571 1.427c-.04.042-.052.076-.094.117Z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Person</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-phone rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-phone"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Phone</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-pin rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-pin"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Pin</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-play-circle-lined rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m9.6 16.8 6-4.8-6-4.8z"></path><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Play Circle Lined</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-print-lined rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22.9 9.4c-.7-.7-1.6-1.1-2.6-1.1V4.7c0-.6-.2-1.2-.7-1.6L17.2.7c-.4-.4-1-.7-1.6-.7H5.2c-.4 0-.7.1-1 .4s-.4.7-.4 1.1v6.8c-1 0-1.9.4-2.6 1.1C.4 10.1 0 11 0 12v6c0 .2.1.4.2.5.1.1.3.2.5.2h3v4.5c0 .2.1.4.2.5.2.2.4.3.6.3h15c.2 0 .4-.1.5-.2.1-.1.2-.3.2-.5v-4.5h3c.2 0 .4-.1.5-.2.1-.1.2-.3.2-.5v-6c.1-1.1-.3-2-1-2.7zM6 2.2h9v2.2c0 .2.1.4.2.5.1.1.3.2.5.2H18v3H6V2.2zm12 19.6H6v-3h12v3zm3.8-5.3H2.2V12c0-.4.1-.8.4-1.1.3-.3.6-.4 1.1-.4h16.5c.4 0 .8.1 1.1.4.3.3.4.6.4 1.1v4.5z"></path><path d="M18.8 12.4c-.3 0-.6.1-.8.3s-.3.5-.3.8.1.6.3.8.5.3.8.3.6-.1.8-.3.3-.5.3-.8-.1-.6-.3-.8-.5-.3-.8-.3z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Print Lined</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-question-circle-lined rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"></path><path d="M10.8 16.8h2.4v-2.4h-2.4zm1-10.8C10 6 8.4 7.6 8.4 9.6h2.4c-.1-.7.3-1.4 1-1.4.6 0 .9.4.9.9 0 .2-.2.6-.4.8l-1.1 1.2c-.3.4-.4.6-.4.8v1.2h2.4v-.3c0-.3 0-.4.2-.6l1-1.2c.4-.5.8-1.1.8-1.9-.1-2-1.7-3.1-3.4-3.1z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Question Circle Lined</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-search rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Search</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-senior rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m16.9 9.5-5.8-5.4S9.3 6.2 6.8 9.2c-.4.6-.3 1.3.2 1.8l1.1 1-4.5 7.5c-.1.4 0 .8.4.9l1.1.6c.4.1.8 0 .9-.4l4-6.6 1.3 1.3-4.1 7.1c-.1.4 0 .8.4.9l1.2.6c.4.1.8 0 .9-.4l4.5-8.2c.2-.5.1-1.1-.3-1.5l-4.2-4L11.2 8l3.8 3.4c.3.3.7.3 1 0l1-1c.2-.2.2-.6-.1-.9zm.4-4.9c1.1-1.1 1.1-2.8 0-3.8-1.1-1.1-2.8-1.1-3.8 0-1.1 1.1-1.1 2.8 0 3.8 1 1.1 2.8 1.1 3.8 0zm2.3 12.2-.5-3.1c-.1-.4-.4-.6-.8-.6l-1.3.2c-.4.1-.6.4-.6.8l1.4 9.4c.1.4.4.6.8.6l1.4-.2c.4-.1.6-.4.6-.8l-1-6.3z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Senior</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-share rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 15.2c-1.1 0-2.1.5-2.8 1.2L8 11.7v-.8l8.9-3.6c.7.9 1.9 1.5 3.1 1.5 2.2 0 4-1.8 4-4s-1.8-4-4-4c-2 0-3.6 1.4-3.9 3.3L6.5 8c-.7-.5-1.6-.8-2.5-.8-2.2 0-4 1.8-4 4s1.8 4 4 4c.8 0 1.6-.3 2.3-.7l9.8 5c.1 2.1 1.9 3.7 4 3.7 2.2 0 4-1.8 4-4-.1-2.2-1.9-4-4.1-4z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Share</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-star rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m23.4 12.5-4.1-3.8 1.1-6.4c.1-.7-.2-1.5-.8-1.9-.6-.4-1.4-.5-2.1-.1L12 3.1 6.5.2C5.8-.1 5-.1 4.4.4c-.6.4-.9 1.2-.8 1.9l1 6.4-4.1 3.8c-.5.5-.7 1.3-.5 2 .2.7.9 1.2 1.6 1.3l5.8 1.4 2.8 5.6c.3.7 1 1.1 1.8 1.1s1.4-.4 1.8-1.1l2.8-5.6 5.8-1.4c.7-.1 1.4-.6 1.6-1.3.1-.7-.1-1.5-.6-2z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Star</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-stop-circle-lined rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 21.6c-5.3 0-9.6-4.3-9.6-9.6S6.7 2.4 12 2.4s9.6 4.3 9.6 9.6-4.3 9.6-9.6 9.6z"></path><path d="M8.4 8.4h7.2v7.2H8.4z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Stop Circle Lined</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-table-lined rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.3 2.2c-.4-.4-1-.7-1.6-.7H2.2c-.6 0-1.2.2-1.6.7S0 3.1 0 3.8v16.5c0 .6.2 1.2.7 1.6.4.4 1 .7 1.6.7h19.5c.6 0 1.2-.2 1.6-.7.4-.4.7-1 .7-1.6V3.8c-.1-.7-.3-1.2-.8-1.6zM7.4 20.6h-5c-.2 0-.3-.1-.4-.2-.1-.1-.2-.2-.2-.4v-3.9h5.5v4.5zm0-6.4H1.9V9.8h5.5v4.4zm0-6.3H1.9v-4c0-.2.1-.3.2-.4s.2-.2.4-.2h4.9v4.6zm14.7 12.2c0 .2-.1.3-.2.4-.1.1-.2.2-.4.2H9.2v-4.5h12.9v3.9zm0-5.9H9.2V9.8h12.9v4.4zm0-6.3H9.2V3.4h12.3c.2 0 .3.1.4.2.1.1.2.2.2.4v3.9z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Table Lined</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-trash-lined rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.7 6.7H5.3c-.8 0-1.4.6-1.3 1.4l1.5 14.7c.1.7.6 1.2 1.3 1.2h10.4c.7 0 1.3-.5 1.3-1.2L20 8.1c.1-.8-.5-1.4-1.3-1.4zM16 21.3H8l-1.2-12h10.4l-1.2 12zM5.3 5.3h13.3c.8 0 1.4-.6 1.4-1.3s-.6-1.3-1.3-1.3h-5.3V1.3C13.3.6 12.7 0 12 0s-1.3.6-1.3 1.3v1.3H5.3C4.6 2.7 4 3.3 4 4s.6 1.3 1.3 1.3z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Trash Lined</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-upload rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 .4 3.5 7.2c-.6.6-.7 1.5-.1 2.1.5.6 1.5.7 2.1.1l5-4.5v11.6c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5V4.9l5 4.5c.6.6 1.6.5 2.1-.1.3-.3.4-.6.4-1s-.2-.8-.5-1.1L13 .4c-.6-.5-1.4-.5-2 0zM4.5 24c-.8 0-1.5-.7-1.5-1.5S3.7 21 4.5 21h15c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5h-15z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Upload</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-user-circle-filled rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 4c1.9 0 3.5 1.6 3.5 3.5S13.9 11 12 11 8.5 9.4 8.5 7.5 10.1 4 12 4zm6 12.7c0 .7-.6 1.3-1.3 1.3H7.3c-.7 0-1.3-.6-1.3-1.3v-1.1c0-2 1.6-3.6 3.6-3.6h.4c.6.3 1.3.4 2 .4s1.4-.2 2-.4h.4c2 0 3.6 1.6 3.6 3.6v1.1z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>User Circle Filled</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-video rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m21.9 5.6-4.6 3.2v6.6l4.6 3.1c.9.6 2.1 0 2.1-1.1V6.6c0-1-1.2-1.6-2.1-1zM14 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Video</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-view rpl-icon--colour-default" data-v-e0bacec0><svg role="presentation"><!----><use xlink:href="#icon-view"></use></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>View</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-zoom-in rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"></path><path d="M10.5 7.5V6c0-.8-.7-1.5-1.5-1.5S7.5 5.2 7.5 6v1.5H6c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h1.5V12c0 .8.7 1.5 1.5 1.5s1.5-.7 1.5-1.5v-1.5H12c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5h-1.5z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Zoom In</span></li><li data-v-e0bacec0><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-zoom-out rpl-icon--colour-default" data-v-e0bacec0><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"></path><path d="M6 7.5c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5h6c.8 0 1.5-.7 1.5-1.5s-.7-1.5-1.5-1.5H6z"></path></svg></span><span class="rpl-type-p-small" data-v-e0bacec0>Zoom Out</span></li><!--]--></ul><blockquote class="rpl-callout"><!--[--><p><!--[--><strong><!--[-->Accessibility tip<!--]--></strong><!--]--></p><p><!--[-->If you&#39;re using an icon by itself, ensure it&#39;s using the right label for screen readers.<!--]--></p><p><!--[-->If you&#39;re using an icon and text, ensure only the text gets read out.<!--]--></p><!--]--></blockquote><h2 class="rpl-type-h2 docs-h2" id="application" data-v-fff5b905><a href="#application" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Application<!--]--></a></h2><h2 class="rpl-type-h3 docs-h3" id="sizing" data-v-ea525968><a href="#sizing" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Sizing<!--]--></a></h2><p><!--[-->The Ripple Design System displays icons at four sizes (12px, 16px, 24px, 32px) depending on their type, use and screen size.<!--]--></p><div class="rpl-table rpl-table--no-stripes"><table class="w-full"><thead><tr><th>Preview</th><th>Value</th><th>Size</th></tr></thead><tbody><!--[--><tr><td><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-search rpl-icon--colour-default"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"></path></svg></span></td><td>12px</td><td>xs</td></tr><tr><td><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-search rpl-icon--colour-default"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"></path></svg></span></td><td>16px</td><td>s</td></tr><tr><td><span class="rpl-icon rpl-icon--size-m rpl-icon--icon-search rpl-icon--colour-default"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"></path></svg></span></td><td>24px</td><td>m</td></tr><tr><td><span class="rpl-icon rpl-icon--size-l rpl-icon--icon-search rpl-icon--colour-default"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m23.6 21.4-7.2-7.2c1-1.5 1.7-3.3 1.7-5.2 0-5-4-9-9-9S0 4 0 9s4 9 9 9c1.9 0 3.7-.6 5.2-1.7l7.2 7.2c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.5-.5.5-1.5 0-2.1zm-9.7-9.6c-.5.9-1.2 1.6-2.1 2.1-.8.5-1.8.8-2.8.8-3.2 0-5.7-2.6-5.7-5.7 0-3.2 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1-.3 2-.8 2.8z"></path></svg></span></td><td>32px</td><td>l</td></tr><!--]--></tbody></table></div><h2 class="rpl-type-h3 docs-h3" id="spacing" data-v-ea525968><a href="#spacing" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Spacing<!--]--></a></h2><p><!--[-->Ensure you use the right amount of space around an icon to allow for legibility. At the least, icons must have clear space of 50% of the height/width of the icon.<!--]--></p><p><!--[--><img src="/assets/img/Icon-Clear-space.png" alt="Visual of min space"><!--]--></p><h2 class="rpl-type-h2 docs-h2" id="accessibility" data-v-fff5b905><a href="#accessibility" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Accessibility<!--]--></a></h2><p><!--[-->For accessibility, ensure you:<!--]--></p><ul><!--[--><li><!--[-->wrap icons within their interactive component<!--]--></li><li><!--[-->specify if an icon is decorative and informative by assigning the property in code<!--]--></li><li><!--[-->use descriptive and meaningful titles for informative icons<!--]--></li><li><!--[-->use icons to represent the same action or idea.<!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="styling" data-v-fff5b905><a href="#styling" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Styling<!--]--></a></h2><h2 class="rpl-type-h3 docs-h3" id="colour" data-v-ea525968><a href="#colour" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Colour<!--]--></a></h2><p><!--[-->If a background changes the colour of the text (for example, a button) the icon should take on the same colour as the text.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--default-elevated&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-elevated&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><p><!--[-->Icons used to represent a state should use the correct colour. For example, an icon used in a success notification should use rpl-clr-success.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=forms-form-alert--success&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/forms-form-alert--success&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><div class="docs-example-footer" data-v-ed064f73><button class="docs-example-code-btn rpl-type-p-small" data-v-ed064f73> Show code <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-example-code-btn-icon" data-v-ed064f73><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div><!----></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/4.styles/icons.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/styles/icons/_payload.json">[{"state":1,"once":541,"_errors":543,"serverRendered":545,"path":7,"prerenderedAt":546},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":229,"$sdd-globals":245,"$sdd-navigation":247},["ShallowRef",4],["ShallowReactive",5],{"/design-system/styles/icons":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":224,"_id":225,"_source":226,"_file":227,"_extension":228},"/design-system/styles/icons","styles",false,"","Icons","Use icons to illustrate actions and interactions, communicate statuses, and draw attention to important information.","page","Core",{"type":16,"children":17,"toc":211},"root",[18,26,31,36,41,48,55,60,66,69,75,78,101,107,114,119,124,130,135,144,150,155,180,186,192,197,202,207],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","Icons are a visual representation of an action, idea, or object. They provide a quick and easy way to communicate information. They can also enhance the usability of a design.",{"type":19,"tag":20,"props":27,"children":28},{},[29],{"type":24,"value":30},"Use the Ripple Design System's icon set for a consistent user experience and a cohesive look and feel.",{"type":19,"tag":20,"props":32,"children":33},{},[34],{"type":24,"value":35},"You can add icons to components or pair them with text. Icons should have a clear relationship with their corresponding text or action. This keeps them accessible to users with visual impairments or disabilities.",{"type":19,"tag":20,"props":37,"children":38},{},[39],{"type":24,"value":40},"Avoid using icons alone, as one user may interpret them differently to another.",{"type":19,"tag":42,"props":43,"children":45},"h2",{"id":44},"icon-library",[46],{"type":24,"value":47},"Icon Library",{"type":19,"tag":49,"props":50,"children":52},"h4",{"id":51},"alerts",[53],{"type":24,"value":54},"Alerts",{"type":19,"tag":56,"props":57,"children":59},"docs-icon-table",{"group":58},"alert",[],{"type":19,"tag":49,"props":61,"children":63},{"id":62},"social",[64],{"type":24,"value":65},"Social",{"type":19,"tag":56,"props":67,"children":68},{"group":62},[],{"type":19,"tag":49,"props":70,"children":72},{"id":71},"standard",[73],{"type":24,"value":74},"Standard",{"type":19,"tag":56,"props":76,"children":77},{"group":71},[],{"type":19,"tag":79,"props":80,"children":81},"blockquote",{},[82,91,96],{"type":19,"tag":20,"props":83,"children":84},{},[85],{"type":19,"tag":86,"props":87,"children":88},"strong",{},[89],{"type":24,"value":90},"Accessibility tip",{"type":19,"tag":20,"props":92,"children":93},{},[94],{"type":24,"value":95},"If you're using an icon by itself, ensure it's using the right label for screen readers.",{"type":19,"tag":20,"props":97,"children":98},{},[99],{"type":24,"value":100},"If you're using an icon and text, ensure only the text gets read out.",{"type":19,"tag":42,"props":102,"children":104},{"id":103},"application",[105],{"type":24,"value":106},"Application",{"type":19,"tag":108,"props":109,"children":111},"h3",{"id":110},"sizing",[112],{"type":24,"value":113},"Sizing",{"type":19,"tag":20,"props":115,"children":116},{},[117],{"type":24,"value":118},"The Ripple Design System displays icons at four sizes (12px, 16px, 24px, 32px) depending on their type, use and screen size.",{"type":19,"tag":120,"props":121,"children":123},"docs-icon-sizing-table",{":sizes":122},"[{\"xs\":\"12px\"},{\"s\":\"16px\"},{\"m\":\"24px\"},{\"l\":\"32px\"}]",[],{"type":19,"tag":108,"props":125,"children":127},{"id":126},"spacing",[128],{"type":24,"value":129},"Spacing",{"type":19,"tag":20,"props":131,"children":132},{},[133],{"type":24,"value":134},"Ensure you use the right amount of space around an icon to allow for legibility. At the least, icons must have clear space of 50% of the height/width of the icon.",{"type":19,"tag":20,"props":136,"children":137},{},[138],{"type":19,"tag":139,"props":140,"children":143},"img",{"alt":141,"src":142},"Visual of min space","/assets/img/Icon-Clear-space.png",[],{"type":19,"tag":42,"props":145,"children":147},{"id":146},"accessibility",[148],{"type":24,"value":149},"Accessibility",{"type":19,"tag":20,"props":151,"children":152},{},[153],{"type":24,"value":154},"For accessibility, ensure you:",{"type":19,"tag":156,"props":157,"children":158},"ul",{},[159,165,170,175],{"type":19,"tag":160,"props":161,"children":162},"li",{},[163],{"type":24,"value":164},"wrap icons within their interactive component",{"type":19,"tag":160,"props":166,"children":167},{},[168],{"type":24,"value":169},"specify if an icon is decorative and informative by assigning the property in code",{"type":19,"tag":160,"props":171,"children":172},{},[173],{"type":24,"value":174},"use descriptive and meaningful titles for informative icons",{"type":19,"tag":160,"props":176,"children":177},{},[178],{"type":24,"value":179},"use icons to represent the same action or idea.",{"type":19,"tag":42,"props":181,"children":183},{"id":182},"styling",[184],{"type":24,"value":185},"Styling",{"type":19,"tag":108,"props":187,"children":189},{"id":188},"colour",[190],{"type":24,"value":191},"Colour",{"type":19,"tag":20,"props":193,"children":194},{},[195],{"type":24,"value":196},"If a background changes the colour of the text (for example, a button) the icon should take on the same colour as the text.",{"type":19,"tag":198,"props":199,"children":201},"docs-example",{"id":200},"core-navigation-button--default-elevated",[],{"type":19,"tag":20,"props":203,"children":204},{},[205],{"type":24,"value":206},"Icons used to represent a state should use the correct colour. For example, an icon used in a success notification should use rpl-clr-success.",{"type":19,"tag":198,"props":208,"children":210},{"id":209},"forms-form-alert--success",[],{"title":10,"searchDepth":212,"depth":212,"links":213},2,[214,215,220,221],{"id":44,"depth":212,"text":47},{"id":103,"depth":212,"text":106,"children":216},[217,219],{"id":110,"depth":218,"text":113},3,{"id":126,"depth":218,"text":129},{"id":146,"depth":212,"text":149},{"id":182,"depth":212,"text":185,"children":222},[223],{"id":188,"depth":218,"text":191},"markdown","content:design-system:4.styles:icons.md","content","design-system/4.styles/icons.md","md",["ShallowRef",230],["ShallowReactive",231],{"/design-system/styles/icons":232},[233,239],{"_path":234,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":235,"description":236,"layout":13,"label":14,"_type":224,"_id":237,"_source":226,"_file":238,"_extension":228},"/design-system/styles/grid","Grid","With up to 12 columns, you can build grids with responsive layouts across different breakpoints.","content:design-system:4.styles:grid.md","design-system/4.styles/grid.md",{"_path":240,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":241,"description":242,"layout":13,"label":14,"_type":224,"_id":243,"_source":226,"_file":244,"_extension":228},"/design-system/styles/layer-styles","Layer styles",null,"content:design-system:4.styles:layer-styles.md","design-system/4.styles/layer-styles.md",["ShallowRef",246],{},[248,253,493],{"title":249,"_path":250,"icon":251,"layout":252},"Ripple Design System","/","carbon:home","home",{"title":254,"_path":255,"children":256},"Design System","/design-system",[257,273,289,319,345],{"title":258,"_path":259,"children":260},"About","/design-system/about",[261,264,267,270],{"title":262,"_path":263,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":265,"_path":266,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":268,"_path":269,"layout":13},"Support","/design-system/about/getting-support",{"title":271,"_path":272,"layout":13},"Contributing","/design-system/about/contributing",{"title":274,"_path":275,"children":276},"Design","/design-system/design",[277,280,283,286],{"title":278,"_path":279,"layout":13},"Getting started","/design-system/design/getting-started",{"title":281,"_path":282,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":284,"_path":285,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":287,"_path":288,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":290,"_path":291,"children":292},"Develop","/design-system/develop",[293,295,297,300],{"title":278,"_path":294,"layout":13},"/design-system/develop/getting-started",{"title":271,"_path":296,"layout":13},"/design-system/develop/contributing",{"title":298,"_path":299,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":301,"_path":302,"children":303,"layout":13},"Usage","/design-system/develop/usage",[304,307,310,313,316],{"title":305,"_path":306,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":308,"_path":309,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":311,"_path":312,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":314,"_path":315,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":317,"_path":318,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":320,"_path":321,"children":322},"Styles","/design-system/styles",[323,325,328,329,330,331,334,337,340,342],{"title":191,"_path":324,"layout":13},"/design-system/styles/colour",{"title":326,"_path":327,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":235,"_path":234,"layout":13},{"title":11,"_path":7,"layout":13},{"title":241,"_path":240,"layout":13},{"title":332,"_path":333,"layout":13},"Layout","/design-system/styles/layout",{"title":335,"_path":336,"layout":13},"Logo","/design-system/styles/logo",{"title":338,"_path":339,"layout":13},"Motion","/design-system/styles/motion",{"title":129,"_path":341,"layout":13},"/design-system/styles/spacing",{"title":343,"_path":344,"layout":13},"Typography","/design-system/styles/typography",{"title":346,"_path":347,"children":348},"Components","/design-system/components",[349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,490],{"title":350,"_path":351,"layout":13},"Accordion","/design-system/components/accordion",{"title":353,"_path":354,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":356,"_path":357,"layout":13},"Alert","/design-system/components/alert",{"title":359,"_path":360,"layout":13},"Block quote","/design-system/components/block-quote",{"title":362,"_path":363,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":365,"_path":366,"layout":13},"Button","/design-system/components/button",{"title":368,"_path":369,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":371,"_path":372,"layout":13},"Callout","/design-system/components/callout",{"title":374,"_path":375,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":377,"_path":378,"layout":13},"Card","/design-system/components/card",{"title":380,"_path":381,"layout":13},"Carousel","/design-system/components/carousel",{"title":383,"_path":384,"layout":13},"Category grid","/design-system/components/category-grid",{"title":386,"_path":387,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":389,"_path":390,"layout":13},"Chip","/design-system/components/chip",{"title":392,"_path":393,"layout":13},"Contact us","/design-system/components/contact-us",{"title":395,"_path":396,"layout":13},"Date input","/design-system/components/date-input",{"title":398,"_path":399,"layout":13},"Detail list","/design-system/components/detail-list",{"title":401,"_path":402,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":404,"_path":405,"layout":13},"File","/design-system/components/file",{"title":407,"_path":408,"layout":13},"Footer","/design-system/components/footer",{"title":410,"_path":411,"layout":13},"Form","/design-system/components/form",{"title":413,"_path":414,"layout":13},"Form alert","/design-system/components/form-alert",{"title":416,"_path":417,"layout":13},"Header","/design-system/components/header",{"title":419,"_path":420,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":422,"_path":423,"layout":13},"Input field","/design-system/components/input-field",{"title":425,"_path":426,"layout":13},"Key dates","/design-system/components/key-dates",{"title":428,"_path":429,"layout":13},"Media","/design-system/components/media",{"title":431,"_path":432,"layout":13},"Media embed","/design-system/components/media-embed",{"title":434,"_path":435,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":437,"_path":438,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":440,"_path":441,"layout":13},"Option button","/design-system/components/option-button",{"title":443,"_path":444,"layout":13},"Page action","/design-system/components/page-action",{"title":446,"_path":447,"layout":13},"Pagination","/design-system/components/pagination",{"title":449,"_path":450,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":452,"_path":453,"layout":13},"Profile","/design-system/components/profile",{"title":455,"_path":456,"layout":13},"Radio button","/design-system/components/radio-button",{"title":458,"_path":459,"layout":13},"Related links","/design-system/components/related-links",{"title":461,"_path":462,"layout":13},"Results listing","/design-system/components/results-listing",{"title":464,"_path":465,"layout":13},"Search bar","/design-system/components/search-bar",{"title":467,"_path":468,"layout":13},"Skip link","/design-system/components/skip-link",{"title":470,"_path":471,"layout":13},"Social share","/design-system/components/social-share",{"title":473,"_path":474,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":476,"_path":477,"layout":13},"Table","/design-system/components/table",{"title":479,"_path":480,"layout":13},"Tabs","/design-system/components/tabs",{"title":482,"_path":483,"layout":13},"Tag","/design-system/components/tag",{"title":485,"_path":486,"layout":13},"Text area","/design-system/components/text-area",{"title":488,"_path":489,"layout":13},"Timeline","/design-system/components/timeline",{"title":491,"_path":492,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":494,"_path":495,"children":496,"layout":13},"Ripple Framework","/framework",[497,498,516,538],{"title":494,"_path":495,"layout":13},{"title":499,"_path":500,"children":501},"Key Concepts","/framework/key-concepts",[502,504,507,510,513],{"title":311,"_path":503,"layout":13},"/framework/key-concepts/nuxt",{"title":505,"_path":506,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":508,"_path":509,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":511,"_path":512,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":514,"_path":515,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":517,"_path":518,"children":519},"Guides","/framework/guides",[520,523,526,529,532,535],{"title":521,"_path":522,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":524,"_path":525,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":527,"_path":528,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":530,"_path":531,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":533,"_path":534,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":536,"_path":537,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":539,"_path":540,"layout":13},"Core modules","/framework/core-modules",["Reactive",542],["Set"],["Reactive",544],{"module-navigation":242},true,1714695650180]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/styles/layer-styles/_payload.json b/design-system/styles/layer-styles/_payload.json
index e6a4cbc173..6991edf070 100644
--- a/design-system/styles/layer-styles/_payload.json
+++ b/design-system/styles/layer-styles/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":70,"items":71},"/design-system/styles","Styles",true,[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":70,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695151989]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":70,"items":71},"/design-system/styles","Styles",true,[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":70,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695650203]
\ No newline at end of file
diff --git a/design-system/styles/layer-styles/index.html b/design-system/styles/layer-styles/index.html
index 4fc1ab785f..9e459eb8c2 100644
--- a/design-system/styles/layer-styles/index.html
+++ b/design-system/styles/layer-styles/index.html
@@ -26,63 +26,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLayerStyleTable.OEKkkJyE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.o_g87j4m.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLayerStyleTable.eVkhneyr.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsExample.TYtIaycF.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.lp_k9Hpd.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.Czpq-HHw.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -94,8 +94,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Layer styles</h1><p class="rpl-type-p-large" data-v-3163c6df></p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="border" data-v-fff5b905><a href="#border" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Border<!--]--></a></h2><p><!--[-->Borders create separation between elements and aid hierarchy and navigation. They are a solid border on one or more sides of an object or container.<!--]--></p><p><!--[-->Depending on where a border is being used, it can appear in 4 different thicknesses, 1px, 2px, 4px or 8px.<!--]--></p><p><!--[-->You can use a border to:<!--]--></p><ul><!--[--><li><!--[-->separate or segment blocks or sections of content<!--]--></li><li><!--[-->highlight important elements such as featured content or a call to action<!--]--></li><li><!--[-->aid information hierarchy<!--]--></li><li><!--[-->support navigational structure<!--]--></li><li><!--[-->highlight an active navigation item.<!--]--></li><!--]--></ul><div class="rpl-table rpl-table--no-stripes" data-v-5dc4dd17><div class="rpl-table__scroll-container" tabindex="0" data-v-5dc4dd17><table class="w-full" data-v-5dc4dd17><thead data-v-5dc4dd17><tr data-v-5dc4dd17><th data-v-5dc4dd17>Visual</th><th data-v-5dc4dd17>Value</th><th data-v-5dc4dd17>CSS Variable</th></tr></thead><tbody data-v-5dc4dd17><!--[--><tr data-v-5dc4dd17><td data-v-5dc4dd17><span class="docs-layer-style-preview docs-layer-style-preview--border" style="border-width: var(--rpl-border-1)" data-v-5dc4dd17></span><!----><!----></td><td data-v-5dc4dd17>1px</td><td data-v-5dc4dd17>rpl-border-1</td></tr><tr data-v-5dc4dd17><td data-v-5dc4dd17><span class="docs-layer-style-preview docs-layer-style-preview--border" style="border-width: var(--rpl-border-2)" data-v-5dc4dd17></span><!----><!----></td><td data-v-5dc4dd17>2px</td><td data-v-5dc4dd17>rpl-border-2</td></tr><tr data-v-5dc4dd17><td data-v-5dc4dd17><span class="docs-layer-style-preview docs-layer-style-preview--border" style="border-width: var(--rpl-border-3)" data-v-5dc4dd17></span><!----><!----></td><td data-v-5dc4dd17>4px</td><td data-v-5dc4dd17>rpl-border-3</td></tr><tr data-v-5dc4dd17><td data-v-5dc4dd17><span class="docs-layer-style-preview docs-layer-style-preview--border" style="border-width: var(--rpl-border-4)" data-v-5dc4dd17></span><!----><!----></td><td data-v-5dc4dd17>8px</td><td data-v-5dc4dd17>rpl-border-4</td></tr><!--]--></tbody></table></div></div><h2 class="rpl-type-h3 docs-h3" id="usage" data-v-ea525968><a href="#usage" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Find examples of borders that add visual consistency on the <a href="/design-system/components/in-page-navigation/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->in-page navigation<!--]--><!--]--><!----><!--]--></a>, <a href="/design-system/components/card/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->cards<!--]--><!--]--><!----><!--]--></a> and <a href="/design-system/components/contact-us/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->contact us<!--]--><!--]--><!----><!--]--></a> pages.<!--]--></p><p><!--[-->Borders can also segment content (like on banners).<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-in-page-navigation--in-page-navigation&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-in-page-navigation--in-page-navigation&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><!----><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="border-radius" data-v-fff5b905><a href="#border-radius" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Border Radius<!--]--></a></h2><p><!--[-->Border radius allows you to add rounded corners to elements such as a button or container. Border radius can create a more user-friendly and approachable look and feel.<!--]--></p><p><!--[-->We&#39;ve defined a set of radius values for use.<!--]--></p><div class="rpl-table rpl-table--no-stripes" data-v-5dc4dd17><div class="rpl-table__scroll-container" tabindex="0" data-v-5dc4dd17><table class="w-full" data-v-5dc4dd17><thead data-v-5dc4dd17><tr data-v-5dc4dd17><th data-v-5dc4dd17>Visual</th><th data-v-5dc4dd17>Value</th><th data-v-5dc4dd17>CSS Variable</th></tr></thead><tbody data-v-5dc4dd17><!--[--><tr data-v-5dc4dd17><td data-v-5dc4dd17><!----><span class="docs-layer-style-preview docs-layer-style-preview--border-radius" style="border-radius: var(--rpl-border-radius-1)" data-v-5dc4dd17></span><!----></td><td data-v-5dc4dd17>2px</td><td data-v-5dc4dd17>rpl-border-radius-1</td></tr><tr data-v-5dc4dd17><td data-v-5dc4dd17><!----><span class="docs-layer-style-preview docs-layer-style-preview--border-radius" style="border-radius: var(--rpl-border-radius-2)" data-v-5dc4dd17></span><!----></td><td data-v-5dc4dd17>4px</td><td data-v-5dc4dd17>rpl-border-radius-2</td></tr><tr data-v-5dc4dd17><td data-v-5dc4dd17><!----><span class="docs-layer-style-preview docs-layer-style-preview--border-radius" style="border-radius: var(--rpl-border-radius-3)" data-v-5dc4dd17></span><!----></td><td data-v-5dc4dd17>8px</td><td data-v-5dc4dd17>rpl-border-radius-3</td></tr><tr data-v-5dc4dd17><td data-v-5dc4dd17><!----><span class="docs-layer-style-preview docs-layer-style-preview--border-radius" style="border-radius: var(--rpl-border-radius-4)" data-v-5dc4dd17></span><!----></td><td data-v-5dc4dd17>12px</td><td data-v-5dc4dd17>rpl-border-radius-4</td></tr><!--]--></tbody></table></div></div><h2 class="rpl-type-h3 docs-h3" id="usage-1" data-v-ea525968><a href="#usage-1" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Border radius is on containers such as buttons, cards and form inputs.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--default-filled&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-filled&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><!----><!----></div><blockquote class="rpl-callout"><!--[--><p><!--[-->When a container has a defined border radius, but is in focus, discard the border radius.<!--]--></p><p><!--[-->A 0px value is applied for consistency and clarity.<!--]--></p><!--]--></blockquote><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="elevation" data-v-fff5b905><a href="#elevation" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Elevation<!--]--></a></h2><p><!--[-->Elevation adds depth to components.<!--]--></p><p><!--[-->Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer.<!--]--></p><div class="rpl-table rpl-table--no-stripes" data-v-5dc4dd17><div class="rpl-table__scroll-container" tabindex="0" data-v-5dc4dd17><table class="w-full" data-v-5dc4dd17><thead data-v-5dc4dd17><tr data-v-5dc4dd17><th data-v-5dc4dd17>Visual</th><th data-v-5dc4dd17>Value</th><th data-v-5dc4dd17>CSS Variable</th></tr></thead><tbody data-v-5dc4dd17><!--[--><tr data-v-5dc4dd17><td data-v-5dc4dd17><!----><!----><span class="docs-layer-style-preview docs-layer-style-preview--elevation" style="box-shadow: var(--rpl-elevation-1)" data-v-5dc4dd17></span></td><td data-v-5dc4dd17>0 2px 8px rgb(26 26 26 / 16%)</td><td data-v-5dc4dd17>rpl-elevation-1</td></tr><tr data-v-5dc4dd17><td data-v-5dc4dd17><!----><!----><span class="docs-layer-style-preview docs-layer-style-preview--elevation" style="box-shadow: var(--rpl-elevation-2)" data-v-5dc4dd17></span></td><td data-v-5dc4dd17>0 4px 8px 2px rgb(26 26 26 / 16%)</td><td data-v-5dc4dd17>rpl-elevation-2</td></tr><!--]--></tbody></table></div></div><h2 class="rpl-type-h3 docs-h3" id="usage-2" data-v-ea525968><a href="#usage-2" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Elevation is on components such as cards, button (elevated variant only) and breadcrumbs.<!--]--></p><p><!--[-->Elevation helps components to stand out. You can use them to flag interactivity, such as when a user hovers over a card or when a modal is open.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-breadcrumbs--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-breadcrumbs--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><!----><!----></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/4.styles/layer-styles.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/styles/layer-styles/_payload.json">[{"state":1,"once":549,"_errors":551,"serverRendered":553,"path":7,"prerenderedAt":554},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":236,"$sdd-globals":252,"$sdd-navigation":254},["ShallowRef",4],["ShallowReactive",5],{"/design-system/styles/layer-styles":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":231,"_id":232,"_source":233,"_file":234,"_extension":235},"/design-system/styles/layer-styles","styles",false,"","Layer styles",null,"page","Core",{"type":16,"children":17,"toc":218},"root",[18,27,33,38,43,73,77,84,114,119,125,129,135,140,145,149,154,159,163,177,180,186,191,196,199,204,209,214],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"border",[24],{"type":25,"value":26},"text","Border",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Borders create separation between elements and aid hierarchy and navigation. They are a solid border on one or more sides of an object or container.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Depending on where a border is being used, it can appear in 4 different thicknesses, 1px, 2px, 4px or 8px.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"You can use a border to:",{"type":19,"tag":44,"props":45,"children":46},"ul",{},[47,53,58,63,68],{"type":19,"tag":48,"props":49,"children":50},"li",{},[51],{"type":25,"value":52},"separate or segment blocks or sections of content",{"type":19,"tag":48,"props":54,"children":55},{},[56],{"type":25,"value":57},"highlight important elements such as featured content or a call to action",{"type":19,"tag":48,"props":59,"children":60},{},[61],{"type":25,"value":62},"aid information hierarchy",{"type":19,"tag":48,"props":64,"children":65},{},[66],{"type":25,"value":67},"support navigational structure",{"type":19,"tag":48,"props":69,"children":70},{},[71],{"type":25,"value":72},"highlight an active navigation item.",{"type":19,"tag":74,"props":75,"children":76},"docs-layer-style-table",{"type":22},[],{"type":19,"tag":78,"props":79,"children":81},"h3",{"id":80},"usage",[82],{"type":25,"value":83},"Usage",{"type":19,"tag":28,"props":85,"children":86},{},[87,89,96,98,104,106,112],{"type":25,"value":88},"Find examples of borders that add visual consistency on the ",{"type":19,"tag":90,"props":91,"children":93},"a",{"href":92},"/design-system/components/in-page-navigation/",[94],{"type":25,"value":95},"in-page navigation",{"type":25,"value":97},", ",{"type":19,"tag":90,"props":99,"children":101},{"href":100},"/design-system/components/card/",[102],{"type":25,"value":103},"cards",{"type":25,"value":105}," and ",{"type":19,"tag":90,"props":107,"children":109},{"href":108},"/design-system/components/contact-us/",[110],{"type":25,"value":111},"contact us",{"type":25,"value":113}," pages.",{"type":19,"tag":28,"props":115,"children":116},{},[117],{"type":25,"value":118},"Borders can also segment content (like on banners).",{"type":19,"tag":120,"props":121,"children":124},"docs-example",{":hideCode":122,"id":123},"true","core-navigation-in-page-navigation--in-page-navigation",[],{"type":19,"tag":126,"props":127,"children":128},"hr",{},[],{"type":19,"tag":20,"props":130,"children":132},{"id":131},"border-radius",[133],{"type":25,"value":134},"Border Radius",{"type":19,"tag":28,"props":136,"children":137},{},[138],{"type":25,"value":139},"Border radius allows you to add rounded corners to elements such as a button or container. Border radius can create a more user-friendly and approachable look and feel.",{"type":19,"tag":28,"props":141,"children":142},{},[143],{"type":25,"value":144},"We've defined a set of radius values for use.",{"type":19,"tag":74,"props":146,"children":148},{"type":147},"border.radius",[],{"type":19,"tag":78,"props":150,"children":152},{"id":151},"usage-1",[153],{"type":25,"value":83},{"type":19,"tag":28,"props":155,"children":156},{},[157],{"type":25,"value":158},"Border radius is on containers such as buttons, cards and form inputs.",{"type":19,"tag":120,"props":160,"children":162},{":hideCode":122,"id":161},"core-navigation-button--default-filled",[],{"type":19,"tag":164,"props":165,"children":166},"blockquote",{},[167,172],{"type":19,"tag":28,"props":168,"children":169},{},[170],{"type":25,"value":171},"When a container has a defined border radius, but is in focus, discard the border radius.",{"type":19,"tag":28,"props":173,"children":174},{},[175],{"type":25,"value":176},"A 0px value is applied for consistency and clarity.",{"type":19,"tag":126,"props":178,"children":179},{},[],{"type":19,"tag":20,"props":181,"children":183},{"id":182},"elevation",[184],{"type":25,"value":185},"Elevation",{"type":19,"tag":28,"props":187,"children":188},{},[189],{"type":25,"value":190},"Elevation adds depth to components.",{"type":19,"tag":28,"props":192,"children":193},{},[194],{"type":25,"value":195},"Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer.",{"type":19,"tag":74,"props":197,"children":198},{"type":182},[],{"type":19,"tag":78,"props":200,"children":202},{"id":201},"usage-2",[203],{"type":25,"value":83},{"type":19,"tag":28,"props":205,"children":206},{},[207],{"type":25,"value":208},"Elevation is on components such as cards, button (elevated variant only) and breadcrumbs.",{"type":19,"tag":28,"props":210,"children":211},{},[212],{"type":25,"value":213},"Elevation helps components to stand out. You can use them to flag interactivity, such as when a user hovers over a card or when a modal is open.",{"type":19,"tag":120,"props":215,"children":217},{":hideCode":122,"id":216},"core-navigation-breadcrumbs--default-story",[],{"title":10,"searchDepth":219,"depth":219,"links":220},2,[221,225,228],{"id":22,"depth":219,"text":26,"children":222},[223],{"id":80,"depth":224,"text":83},3,{"id":131,"depth":219,"text":134,"children":226},[227],{"id":151,"depth":224,"text":83},{"id":182,"depth":219,"text":185,"children":229},[230],{"id":201,"depth":224,"text":83},"markdown","content:design-system:4.styles:layer-styles.md","content","design-system/4.styles/layer-styles.md","md",["ShallowRef",237],["ShallowReactive",238],{"/design-system/styles/layer-styles":239},[240,246],{"_path":241,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":242,"description":243,"layout":13,"label":14,"_type":231,"_id":244,"_source":233,"_file":245,"_extension":235},"/design-system/styles/icons","Icons","Use icons to illustrate actions and interactions, communicate statuses, and draw attention to important information.","content:design-system:4.styles:icons.md","design-system/4.styles/icons.md",{"_path":247,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":248,"description":249,"layout":13,"label":14,"_type":231,"_id":250,"_source":233,"_file":251,"_extension":235},"/design-system/styles/layout","Layout","Layouts are common page composition patterns that offer ways of structuring components and content.","content:design-system:4.styles:layout.md","design-system/4.styles/layout.md",["ShallowRef",253],{},[255,260,501],{"title":256,"_path":257,"icon":258,"layout":259},"Ripple Design System","/","carbon:home","home",{"title":261,"_path":262,"children":263},"Design System","/design-system",[264,280,296,325,353],{"title":265,"_path":266,"children":267},"About","/design-system/about",[268,271,274,277],{"title":269,"_path":270,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":272,"_path":273,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":275,"_path":276,"layout":13},"Support","/design-system/about/getting-support",{"title":278,"_path":279,"layout":13},"Contributing","/design-system/about/contributing",{"title":281,"_path":282,"children":283},"Design","/design-system/design",[284,287,290,293],{"title":285,"_path":286,"layout":13},"Getting started","/design-system/design/getting-started",{"title":288,"_path":289,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":291,"_path":292,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":294,"_path":295,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":297,"_path":298,"children":299},"Develop","/design-system/develop",[300,302,304,307],{"title":285,"_path":301,"layout":13},"/design-system/develop/getting-started",{"title":278,"_path":303,"layout":13},"/design-system/develop/contributing",{"title":305,"_path":306,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":83,"_path":308,"children":309,"layout":13},"/design-system/develop/usage",[310,313,316,319,322],{"title":311,"_path":312,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":314,"_path":315,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":317,"_path":318,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":320,"_path":321,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":323,"_path":324,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":326,"_path":327,"children":328},"Styles","/design-system/styles",[329,332,335,338,339,340,341,344,347,350],{"title":330,"_path":331,"layout":13},"Colour","/design-system/styles/colour",{"title":333,"_path":334,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":336,"_path":337,"layout":13},"Grid","/design-system/styles/grid",{"title":242,"_path":241,"layout":13},{"title":11,"_path":7,"layout":13},{"title":248,"_path":247,"layout":13},{"title":342,"_path":343,"layout":13},"Logo","/design-system/styles/logo",{"title":345,"_path":346,"layout":13},"Motion","/design-system/styles/motion",{"title":348,"_path":349,"layout":13},"Spacing","/design-system/styles/spacing",{"title":351,"_path":352,"layout":13},"Typography","/design-system/styles/typography",{"title":354,"_path":355,"children":356},"Components","/design-system/components",[357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498],{"title":358,"_path":359,"layout":13},"Accordion","/design-system/components/accordion",{"title":361,"_path":362,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":364,"_path":365,"layout":13},"Alert","/design-system/components/alert",{"title":367,"_path":368,"layout":13},"Block quote","/design-system/components/block-quote",{"title":370,"_path":371,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":373,"_path":374,"layout":13},"Button","/design-system/components/button",{"title":376,"_path":377,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":379,"_path":380,"layout":13},"Callout","/design-system/components/callout",{"title":382,"_path":383,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":385,"_path":386,"layout":13},"Card","/design-system/components/card",{"title":388,"_path":389,"layout":13},"Carousel","/design-system/components/carousel",{"title":391,"_path":392,"layout":13},"Category grid","/design-system/components/category-grid",{"title":394,"_path":395,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":397,"_path":398,"layout":13},"Chip","/design-system/components/chip",{"title":400,"_path":401,"layout":13},"Contact us","/design-system/components/contact-us",{"title":403,"_path":404,"layout":13},"Date input","/design-system/components/date-input",{"title":406,"_path":407,"layout":13},"Detail list","/design-system/components/detail-list",{"title":409,"_path":410,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":412,"_path":413,"layout":13},"File","/design-system/components/file",{"title":415,"_path":416,"layout":13},"Footer","/design-system/components/footer",{"title":418,"_path":419,"layout":13},"Form","/design-system/components/form",{"title":421,"_path":422,"layout":13},"Form alert","/design-system/components/form-alert",{"title":424,"_path":425,"layout":13},"Header","/design-system/components/header",{"title":427,"_path":428,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":430,"_path":431,"layout":13},"Input field","/design-system/components/input-field",{"title":433,"_path":434,"layout":13},"Key dates","/design-system/components/key-dates",{"title":436,"_path":437,"layout":13},"Media","/design-system/components/media",{"title":439,"_path":440,"layout":13},"Media embed","/design-system/components/media-embed",{"title":442,"_path":443,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":445,"_path":446,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":448,"_path":449,"layout":13},"Option button","/design-system/components/option-button",{"title":451,"_path":452,"layout":13},"Page action","/design-system/components/page-action",{"title":454,"_path":455,"layout":13},"Pagination","/design-system/components/pagination",{"title":457,"_path":458,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":460,"_path":461,"layout":13},"Profile","/design-system/components/profile",{"title":463,"_path":464,"layout":13},"Radio button","/design-system/components/radio-button",{"title":466,"_path":467,"layout":13},"Related links","/design-system/components/related-links",{"title":469,"_path":470,"layout":13},"Results listing","/design-system/components/results-listing",{"title":472,"_path":473,"layout":13},"Search bar","/design-system/components/search-bar",{"title":475,"_path":476,"layout":13},"Skip link","/design-system/components/skip-link",{"title":478,"_path":479,"layout":13},"Social share","/design-system/components/social-share",{"title":481,"_path":482,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":484,"_path":485,"layout":13},"Table","/design-system/components/table",{"title":487,"_path":488,"layout":13},"Tabs","/design-system/components/tabs",{"title":490,"_path":491,"layout":13},"Tag","/design-system/components/tag",{"title":493,"_path":494,"layout":13},"Text area","/design-system/components/text-area",{"title":496,"_path":497,"layout":13},"Timeline","/design-system/components/timeline",{"title":499,"_path":500,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":502,"_path":503,"children":504,"layout":13},"Ripple Framework","/framework",[505,506,524,546],{"title":502,"_path":503,"layout":13},{"title":507,"_path":508,"children":509},"Key Concepts","/framework/key-concepts",[510,512,515,518,521],{"title":317,"_path":511,"layout":13},"/framework/key-concepts/nuxt",{"title":513,"_path":514,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":516,"_path":517,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":519,"_path":520,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":522,"_path":523,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":525,"_path":526,"children":527},"Guides","/framework/guides",[528,531,534,537,540,543],{"title":529,"_path":530,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":532,"_path":533,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":535,"_path":536,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":538,"_path":539,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":541,"_path":542,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":544,"_path":545,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":547,"_path":548,"layout":13},"Core modules","/framework/core-modules",["Reactive",550],["Set"],["Reactive",552],{"module-navigation":12},true,1714695151989]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Layer styles</h1><p class="rpl-type-p-large" data-v-3163c6df></p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="border" data-v-fff5b905><a href="#border" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Border<!--]--></a></h2><p><!--[-->Borders create separation between elements and aid hierarchy and navigation. They are a solid border on one or more sides of an object or container.<!--]--></p><p><!--[-->Depending on where a border is being used, it can appear in 4 different thicknesses, 1px, 2px, 4px or 8px.<!--]--></p><p><!--[-->You can use a border to:<!--]--></p><ul><!--[--><li><!--[-->separate or segment blocks or sections of content<!--]--></li><li><!--[-->highlight important elements such as featured content or a call to action<!--]--></li><li><!--[-->aid information hierarchy<!--]--></li><li><!--[-->support navigational structure<!--]--></li><li><!--[-->highlight an active navigation item.<!--]--></li><!--]--></ul><div class="rpl-table rpl-table--no-stripes" data-v-5dc4dd17><div class="rpl-table__scroll-container" tabindex="0" data-v-5dc4dd17><table class="w-full" data-v-5dc4dd17><thead data-v-5dc4dd17><tr data-v-5dc4dd17><th data-v-5dc4dd17>Visual</th><th data-v-5dc4dd17>Value</th><th data-v-5dc4dd17>CSS Variable</th></tr></thead><tbody data-v-5dc4dd17><!--[--><tr data-v-5dc4dd17><td data-v-5dc4dd17><span class="docs-layer-style-preview docs-layer-style-preview--border" style="border-width: var(--rpl-border-1)" data-v-5dc4dd17></span><!----><!----></td><td data-v-5dc4dd17>1px</td><td data-v-5dc4dd17>rpl-border-1</td></tr><tr data-v-5dc4dd17><td data-v-5dc4dd17><span class="docs-layer-style-preview docs-layer-style-preview--border" style="border-width: var(--rpl-border-2)" data-v-5dc4dd17></span><!----><!----></td><td data-v-5dc4dd17>2px</td><td data-v-5dc4dd17>rpl-border-2</td></tr><tr data-v-5dc4dd17><td data-v-5dc4dd17><span class="docs-layer-style-preview docs-layer-style-preview--border" style="border-width: var(--rpl-border-3)" data-v-5dc4dd17></span><!----><!----></td><td data-v-5dc4dd17>4px</td><td data-v-5dc4dd17>rpl-border-3</td></tr><tr data-v-5dc4dd17><td data-v-5dc4dd17><span class="docs-layer-style-preview docs-layer-style-preview--border" style="border-width: var(--rpl-border-4)" data-v-5dc4dd17></span><!----><!----></td><td data-v-5dc4dd17>8px</td><td data-v-5dc4dd17>rpl-border-4</td></tr><!--]--></tbody></table></div></div><h2 class="rpl-type-h3 docs-h3" id="usage" data-v-ea525968><a href="#usage" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Find examples of borders that add visual consistency on the <a href="/design-system/components/in-page-navigation/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->in-page navigation<!--]--><!--]--><!----><!--]--></a>, <a href="/design-system/components/card/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->cards<!--]--><!--]--><!----><!--]--></a> and <a href="/design-system/components/contact-us/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->contact us<!--]--><!--]--><!----><!--]--></a> pages.<!--]--></p><p><!--[-->Borders can also segment content (like on banners).<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-in-page-navigation--in-page-navigation&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-in-page-navigation--in-page-navigation&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><!----><!----></div><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="border-radius" data-v-fff5b905><a href="#border-radius" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Border Radius<!--]--></a></h2><p><!--[-->Border radius allows you to add rounded corners to elements such as a button or container. Border radius can create a more user-friendly and approachable look and feel.<!--]--></p><p><!--[-->We&#39;ve defined a set of radius values for use.<!--]--></p><div class="rpl-table rpl-table--no-stripes" data-v-5dc4dd17><div class="rpl-table__scroll-container" tabindex="0" data-v-5dc4dd17><table class="w-full" data-v-5dc4dd17><thead data-v-5dc4dd17><tr data-v-5dc4dd17><th data-v-5dc4dd17>Visual</th><th data-v-5dc4dd17>Value</th><th data-v-5dc4dd17>CSS Variable</th></tr></thead><tbody data-v-5dc4dd17><!--[--><tr data-v-5dc4dd17><td data-v-5dc4dd17><!----><span class="docs-layer-style-preview docs-layer-style-preview--border-radius" style="border-radius: var(--rpl-border-radius-1)" data-v-5dc4dd17></span><!----></td><td data-v-5dc4dd17>2px</td><td data-v-5dc4dd17>rpl-border-radius-1</td></tr><tr data-v-5dc4dd17><td data-v-5dc4dd17><!----><span class="docs-layer-style-preview docs-layer-style-preview--border-radius" style="border-radius: var(--rpl-border-radius-2)" data-v-5dc4dd17></span><!----></td><td data-v-5dc4dd17>4px</td><td data-v-5dc4dd17>rpl-border-radius-2</td></tr><tr data-v-5dc4dd17><td data-v-5dc4dd17><!----><span class="docs-layer-style-preview docs-layer-style-preview--border-radius" style="border-radius: var(--rpl-border-radius-3)" data-v-5dc4dd17></span><!----></td><td data-v-5dc4dd17>8px</td><td data-v-5dc4dd17>rpl-border-radius-3</td></tr><tr data-v-5dc4dd17><td data-v-5dc4dd17><!----><span class="docs-layer-style-preview docs-layer-style-preview--border-radius" style="border-radius: var(--rpl-border-radius-4)" data-v-5dc4dd17></span><!----></td><td data-v-5dc4dd17>12px</td><td data-v-5dc4dd17>rpl-border-radius-4</td></tr><!--]--></tbody></table></div></div><h2 class="rpl-type-h3 docs-h3" id="usage-1" data-v-ea525968><a href="#usage-1" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Border radius is on containers such as buttons, cards and form inputs.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-button--default-filled&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-button--default-filled&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><!----><!----></div><blockquote class="rpl-callout"><!--[--><p><!--[-->When a container has a defined border radius, but is in focus, discard the border radius.<!--]--></p><p><!--[-->A 0px value is applied for consistency and clarity.<!--]--></p><!--]--></blockquote><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="elevation" data-v-fff5b905><a href="#elevation" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Elevation<!--]--></a></h2><p><!--[-->Elevation adds depth to components.<!--]--></p><p><!--[-->Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer.<!--]--></p><div class="rpl-table rpl-table--no-stripes" data-v-5dc4dd17><div class="rpl-table__scroll-container" tabindex="0" data-v-5dc4dd17><table class="w-full" data-v-5dc4dd17><thead data-v-5dc4dd17><tr data-v-5dc4dd17><th data-v-5dc4dd17>Visual</th><th data-v-5dc4dd17>Value</th><th data-v-5dc4dd17>CSS Variable</th></tr></thead><tbody data-v-5dc4dd17><!--[--><tr data-v-5dc4dd17><td data-v-5dc4dd17><!----><!----><span class="docs-layer-style-preview docs-layer-style-preview--elevation" style="box-shadow: var(--rpl-elevation-1)" data-v-5dc4dd17></span></td><td data-v-5dc4dd17>0 2px 8px rgb(26 26 26 / 16%)</td><td data-v-5dc4dd17>rpl-elevation-1</td></tr><tr data-v-5dc4dd17><td data-v-5dc4dd17><!----><!----><span class="docs-layer-style-preview docs-layer-style-preview--elevation" style="box-shadow: var(--rpl-elevation-2)" data-v-5dc4dd17></span></td><td data-v-5dc4dd17>0 4px 8px 2px rgb(26 26 26 / 16%)</td><td data-v-5dc4dd17>rpl-elevation-2</td></tr><!--]--></tbody></table></div></div><h2 class="rpl-type-h3 docs-h3" id="usage-2" data-v-ea525968><a href="#usage-2" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Usage<!--]--></a></h2><p><!--[-->Elevation is on components such as cards, button (elevated variant only) and breadcrumbs.<!--]--></p><p><!--[-->Elevation helps components to stand out. You can use them to flag interactivity, such as when a user hovers over a card or when a modal is open.<!--]--></p><div class="docs-example" data-v-ed064f73><div class="docs-example-header" data-v-ed064f73><a href="/storybook/iframe.html?id=core-navigation-breadcrumbs--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->Open this example in a new tab<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a><a href="/storybook/?path=/story/core-navigation-breadcrumbs--default-story&amp;args=&amp;viewMode=story&amp;globals=theme:undefined;buttonTheme:default" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p-small" target="_blank" data-v-ed064f73 data-v-5d4aedf1><!--[--><!--[--><!----><!--[-->View in storybook<!--]--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></div><div class="docs-example-body" data-v-ed064f73><div class="frame" data-v-ed064f73></div></div><!----><!----></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/4.styles/layer-styles.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/styles/layer-styles/_payload.json">[{"state":1,"once":549,"_errors":551,"serverRendered":553,"path":7,"prerenderedAt":554},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":236,"$sdd-globals":252,"$sdd-navigation":254},["ShallowRef",4],["ShallowReactive",5],{"/design-system/styles/layer-styles":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":231,"_id":232,"_source":233,"_file":234,"_extension":235},"/design-system/styles/layer-styles","styles",false,"","Layer styles",null,"page","Core",{"type":16,"children":17,"toc":218},"root",[18,27,33,38,43,73,77,84,114,119,125,129,135,140,145,149,154,159,163,177,180,186,191,196,199,204,209,214],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"border",[24],{"type":25,"value":26},"text","Border",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"Borders create separation between elements and aid hierarchy and navigation. They are a solid border on one or more sides of an object or container.",{"type":19,"tag":28,"props":34,"children":35},{},[36],{"type":25,"value":37},"Depending on where a border is being used, it can appear in 4 different thicknesses, 1px, 2px, 4px or 8px.",{"type":19,"tag":28,"props":39,"children":40},{},[41],{"type":25,"value":42},"You can use a border to:",{"type":19,"tag":44,"props":45,"children":46},"ul",{},[47,53,58,63,68],{"type":19,"tag":48,"props":49,"children":50},"li",{},[51],{"type":25,"value":52},"separate or segment blocks or sections of content",{"type":19,"tag":48,"props":54,"children":55},{},[56],{"type":25,"value":57},"highlight important elements such as featured content or a call to action",{"type":19,"tag":48,"props":59,"children":60},{},[61],{"type":25,"value":62},"aid information hierarchy",{"type":19,"tag":48,"props":64,"children":65},{},[66],{"type":25,"value":67},"support navigational structure",{"type":19,"tag":48,"props":69,"children":70},{},[71],{"type":25,"value":72},"highlight an active navigation item.",{"type":19,"tag":74,"props":75,"children":76},"docs-layer-style-table",{"type":22},[],{"type":19,"tag":78,"props":79,"children":81},"h3",{"id":80},"usage",[82],{"type":25,"value":83},"Usage",{"type":19,"tag":28,"props":85,"children":86},{},[87,89,96,98,104,106,112],{"type":25,"value":88},"Find examples of borders that add visual consistency on the ",{"type":19,"tag":90,"props":91,"children":93},"a",{"href":92},"/design-system/components/in-page-navigation/",[94],{"type":25,"value":95},"in-page navigation",{"type":25,"value":97},", ",{"type":19,"tag":90,"props":99,"children":101},{"href":100},"/design-system/components/card/",[102],{"type":25,"value":103},"cards",{"type":25,"value":105}," and ",{"type":19,"tag":90,"props":107,"children":109},{"href":108},"/design-system/components/contact-us/",[110],{"type":25,"value":111},"contact us",{"type":25,"value":113}," pages.",{"type":19,"tag":28,"props":115,"children":116},{},[117],{"type":25,"value":118},"Borders can also segment content (like on banners).",{"type":19,"tag":120,"props":121,"children":124},"docs-example",{":hideCode":122,"id":123},"true","core-navigation-in-page-navigation--in-page-navigation",[],{"type":19,"tag":126,"props":127,"children":128},"hr",{},[],{"type":19,"tag":20,"props":130,"children":132},{"id":131},"border-radius",[133],{"type":25,"value":134},"Border Radius",{"type":19,"tag":28,"props":136,"children":137},{},[138],{"type":25,"value":139},"Border radius allows you to add rounded corners to elements such as a button or container. Border radius can create a more user-friendly and approachable look and feel.",{"type":19,"tag":28,"props":141,"children":142},{},[143],{"type":25,"value":144},"We've defined a set of radius values for use.",{"type":19,"tag":74,"props":146,"children":148},{"type":147},"border.radius",[],{"type":19,"tag":78,"props":150,"children":152},{"id":151},"usage-1",[153],{"type":25,"value":83},{"type":19,"tag":28,"props":155,"children":156},{},[157],{"type":25,"value":158},"Border radius is on containers such as buttons, cards and form inputs.",{"type":19,"tag":120,"props":160,"children":162},{":hideCode":122,"id":161},"core-navigation-button--default-filled",[],{"type":19,"tag":164,"props":165,"children":166},"blockquote",{},[167,172],{"type":19,"tag":28,"props":168,"children":169},{},[170],{"type":25,"value":171},"When a container has a defined border radius, but is in focus, discard the border radius.",{"type":19,"tag":28,"props":173,"children":174},{},[175],{"type":25,"value":176},"A 0px value is applied for consistency and clarity.",{"type":19,"tag":126,"props":178,"children":179},{},[],{"type":19,"tag":20,"props":181,"children":183},{"id":182},"elevation",[184],{"type":25,"value":185},"Elevation",{"type":19,"tag":28,"props":187,"children":188},{},[189],{"type":25,"value":190},"Elevation adds depth to components.",{"type":19,"tag":28,"props":192,"children":193},{},[194],{"type":25,"value":195},"Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer.",{"type":19,"tag":74,"props":197,"children":198},{"type":182},[],{"type":19,"tag":78,"props":200,"children":202},{"id":201},"usage-2",[203],{"type":25,"value":83},{"type":19,"tag":28,"props":205,"children":206},{},[207],{"type":25,"value":208},"Elevation is on components such as cards, button (elevated variant only) and breadcrumbs.",{"type":19,"tag":28,"props":210,"children":211},{},[212],{"type":25,"value":213},"Elevation helps components to stand out. You can use them to flag interactivity, such as when a user hovers over a card or when a modal is open.",{"type":19,"tag":120,"props":215,"children":217},{":hideCode":122,"id":216},"core-navigation-breadcrumbs--default-story",[],{"title":10,"searchDepth":219,"depth":219,"links":220},2,[221,225,228],{"id":22,"depth":219,"text":26,"children":222},[223],{"id":80,"depth":224,"text":83},3,{"id":131,"depth":219,"text":134,"children":226},[227],{"id":151,"depth":224,"text":83},{"id":182,"depth":219,"text":185,"children":229},[230],{"id":201,"depth":224,"text":83},"markdown","content:design-system:4.styles:layer-styles.md","content","design-system/4.styles/layer-styles.md","md",["ShallowRef",237],["ShallowReactive",238],{"/design-system/styles/layer-styles":239},[240,246],{"_path":241,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":242,"description":243,"layout":13,"label":14,"_type":231,"_id":244,"_source":233,"_file":245,"_extension":235},"/design-system/styles/icons","Icons","Use icons to illustrate actions and interactions, communicate statuses, and draw attention to important information.","content:design-system:4.styles:icons.md","design-system/4.styles/icons.md",{"_path":247,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":248,"description":249,"layout":13,"label":14,"_type":231,"_id":250,"_source":233,"_file":251,"_extension":235},"/design-system/styles/layout","Layout","Layouts are common page composition patterns that offer ways of structuring components and content.","content:design-system:4.styles:layout.md","design-system/4.styles/layout.md",["ShallowRef",253],{},[255,260,501],{"title":256,"_path":257,"icon":258,"layout":259},"Ripple Design System","/","carbon:home","home",{"title":261,"_path":262,"children":263},"Design System","/design-system",[264,280,296,325,353],{"title":265,"_path":266,"children":267},"About","/design-system/about",[268,271,274,277],{"title":269,"_path":270,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":272,"_path":273,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":275,"_path":276,"layout":13},"Support","/design-system/about/getting-support",{"title":278,"_path":279,"layout":13},"Contributing","/design-system/about/contributing",{"title":281,"_path":282,"children":283},"Design","/design-system/design",[284,287,290,293],{"title":285,"_path":286,"layout":13},"Getting started","/design-system/design/getting-started",{"title":288,"_path":289,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":291,"_path":292,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":294,"_path":295,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":297,"_path":298,"children":299},"Develop","/design-system/develop",[300,302,304,307],{"title":285,"_path":301,"layout":13},"/design-system/develop/getting-started",{"title":278,"_path":303,"layout":13},"/design-system/develop/contributing",{"title":305,"_path":306,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":83,"_path":308,"children":309,"layout":13},"/design-system/develop/usage",[310,313,316,319,322],{"title":311,"_path":312,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":314,"_path":315,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":317,"_path":318,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":320,"_path":321,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":323,"_path":324,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":326,"_path":327,"children":328},"Styles","/design-system/styles",[329,332,335,338,339,340,341,344,347,350],{"title":330,"_path":331,"layout":13},"Colour","/design-system/styles/colour",{"title":333,"_path":334,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":336,"_path":337,"layout":13},"Grid","/design-system/styles/grid",{"title":242,"_path":241,"layout":13},{"title":11,"_path":7,"layout":13},{"title":248,"_path":247,"layout":13},{"title":342,"_path":343,"layout":13},"Logo","/design-system/styles/logo",{"title":345,"_path":346,"layout":13},"Motion","/design-system/styles/motion",{"title":348,"_path":349,"layout":13},"Spacing","/design-system/styles/spacing",{"title":351,"_path":352,"layout":13},"Typography","/design-system/styles/typography",{"title":354,"_path":355,"children":356},"Components","/design-system/components",[357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498],{"title":358,"_path":359,"layout":13},"Accordion","/design-system/components/accordion",{"title":361,"_path":362,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":364,"_path":365,"layout":13},"Alert","/design-system/components/alert",{"title":367,"_path":368,"layout":13},"Block quote","/design-system/components/block-quote",{"title":370,"_path":371,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":373,"_path":374,"layout":13},"Button","/design-system/components/button",{"title":376,"_path":377,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":379,"_path":380,"layout":13},"Callout","/design-system/components/callout",{"title":382,"_path":383,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":385,"_path":386,"layout":13},"Card","/design-system/components/card",{"title":388,"_path":389,"layout":13},"Carousel","/design-system/components/carousel",{"title":391,"_path":392,"layout":13},"Category grid","/design-system/components/category-grid",{"title":394,"_path":395,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":397,"_path":398,"layout":13},"Chip","/design-system/components/chip",{"title":400,"_path":401,"layout":13},"Contact us","/design-system/components/contact-us",{"title":403,"_path":404,"layout":13},"Date input","/design-system/components/date-input",{"title":406,"_path":407,"layout":13},"Detail list","/design-system/components/detail-list",{"title":409,"_path":410,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":412,"_path":413,"layout":13},"File","/design-system/components/file",{"title":415,"_path":416,"layout":13},"Footer","/design-system/components/footer",{"title":418,"_path":419,"layout":13},"Form","/design-system/components/form",{"title":421,"_path":422,"layout":13},"Form alert","/design-system/components/form-alert",{"title":424,"_path":425,"layout":13},"Header","/design-system/components/header",{"title":427,"_path":428,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":430,"_path":431,"layout":13},"Input field","/design-system/components/input-field",{"title":433,"_path":434,"layout":13},"Key dates","/design-system/components/key-dates",{"title":436,"_path":437,"layout":13},"Media","/design-system/components/media",{"title":439,"_path":440,"layout":13},"Media embed","/design-system/components/media-embed",{"title":442,"_path":443,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":445,"_path":446,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":448,"_path":449,"layout":13},"Option button","/design-system/components/option-button",{"title":451,"_path":452,"layout":13},"Page action","/design-system/components/page-action",{"title":454,"_path":455,"layout":13},"Pagination","/design-system/components/pagination",{"title":457,"_path":458,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":460,"_path":461,"layout":13},"Profile","/design-system/components/profile",{"title":463,"_path":464,"layout":13},"Radio button","/design-system/components/radio-button",{"title":466,"_path":467,"layout":13},"Related links","/design-system/components/related-links",{"title":469,"_path":470,"layout":13},"Results listing","/design-system/components/results-listing",{"title":472,"_path":473,"layout":13},"Search bar","/design-system/components/search-bar",{"title":475,"_path":476,"layout":13},"Skip link","/design-system/components/skip-link",{"title":478,"_path":479,"layout":13},"Social share","/design-system/components/social-share",{"title":481,"_path":482,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":484,"_path":485,"layout":13},"Table","/design-system/components/table",{"title":487,"_path":488,"layout":13},"Tabs","/design-system/components/tabs",{"title":490,"_path":491,"layout":13},"Tag","/design-system/components/tag",{"title":493,"_path":494,"layout":13},"Text area","/design-system/components/text-area",{"title":496,"_path":497,"layout":13},"Timeline","/design-system/components/timeline",{"title":499,"_path":500,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":502,"_path":503,"children":504,"layout":13},"Ripple Framework","/framework",[505,506,524,546],{"title":502,"_path":503,"layout":13},{"title":507,"_path":508,"children":509},"Key Concepts","/framework/key-concepts",[510,512,515,518,521],{"title":317,"_path":511,"layout":13},"/framework/key-concepts/nuxt",{"title":513,"_path":514,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":516,"_path":517,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":519,"_path":520,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":522,"_path":523,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":525,"_path":526,"children":527},"Guides","/framework/guides",[528,531,534,537,540,543],{"title":529,"_path":530,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":532,"_path":533,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":535,"_path":536,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":538,"_path":539,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":541,"_path":542,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":544,"_path":545,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":547,"_path":548,"layout":13},"Core modules","/framework/core-modules",["Reactive",550],["Set"],["Reactive",552],{"module-navigation":12},true,1714695650203]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/styles/layout/_payload.json b/design-system/styles/layout/_payload.json
index bd147782ac..76887fb337 100644
--- a/design-system/styles/layout/_payload.json
+++ b/design-system/styles/layout/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":70,"items":71},"/design-system/styles","Styles",true,[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":70,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695152073]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":70,"items":71},"/design-system/styles","Styles",true,[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":70,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695650217]
\ No newline at end of file
diff --git a/design-system/styles/layout/index.html b/design-system/styles/layout/index.html
index e27d3f72d6..96299f5715 100644
--- a/design-system/styles/layout/index.html
+++ b/design-system/styles/layout/index.html
@@ -24,65 +24,65 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseImg.wgVpK8mn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTable.Nr-94ppo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseThead.x0xD32yi.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTr.NjbdsN4h.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTh.15m2hyNr.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTbody.pO4HZmMb.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTd.KWvY0UVz.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseImg.Wu9xgcX7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTable.d8cdIzif.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseThead.alimbSyj.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTr.rCUlpnCA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTh.GnFrmIgb.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTbody.FPzd5AuU.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTd.ydAecYY-.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -178,8 +178,8 @@
 
 
 
-<div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Breakpoint<!--]--></th><th><!--[-->Value<!--]--></th><th><!--[-->CSS Variable<!--]--></th><th><!--[-->Sidebar Value<!--]--></th><th><!--[-->Sidebar CSS Variable<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->XS • &lt;576px<!--]--></td><td><!--[-->16px<!--]--></td><td><!--[-->rpl-sp-4<!--]--></td><td><!--[-->24px<!--]--></td><td><!--[-->rpl-sp-6<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->S • 576-767px<!--]--></td><td><!--[-->16px<!--]--></td><td><!--[-->rpl-sp-4<!--]--></td><td><!--[-->24px<!--]--></td><td><!--[-->rpl-sp-6<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->M • 768-991px<!--]--></td><td><!--[-->24px<!--]--></td><td><!--[-->rpl-sp-6<!--]--></td><td><!--[-->24px<!--]--></td><td><!--[-->rpl-sp-6<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->L • 992-1199px<!--]--></td><td><!--[-->32px<!--]--></td><td><!--[-->rpl-sp-8<!--]--></td><td><!--[-->32px<!--]--></td><td><!--[-->rpl-sp-8<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->XL • 1200px+<!--]--></td><td><!--[-->40px<!--]--></td><td><!--[-->rpl-sp-9<!--]--></td><td><!--[-->40px<!--]--></td><td><!--[-->rpl-sp-9<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/4.styles/layout.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/styles/layout/_payload.json">[{"state":1,"once":768,"_errors":770,"serverRendered":772,"path":773,"prerenderedAt":774},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":454,"$sdd-globals":470,"$sdd-navigation":472},["ShallowRef",4],["ShallowReactive",5],{"/design-system/styles/layout":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":449,"_id":450,"_source":451,"_file":452,"_extension":453},"/design-system/styles/layout","styles",false,"","Layout","Layouts are common page composition patterns that offer ways of structuring components and content.","page","Core",{"type":16,"children":17,"toc":437},"root",[18,26,31,36,43,48,63,70,75,84,90,95,103,109,114,120,125,130,138,140,261,267,272,280,282],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","Always design for small screens first.",{"type":19,"tag":20,"props":27,"children":28},{},[29],{"type":24,"value":30},"For most types of pages, use either a ‘two-thirds’ or a ‘two-thirds and one-third’ layout. Doing this reduces long lines of text that can make a page hard to read on desktop devices. This approach should limit lines of text to 75 characters.",{"type":19,"tag":20,"props":32,"children":33},{},[34],{"type":24,"value":35},"You should never assume what devices people are using. This is why you should design for different screen sizes instead of specific devices.",{"type":19,"tag":37,"props":38,"children":40},"h2",{"id":39},"page-layouts",[41],{"type":24,"value":42},"Page layouts",{"type":19,"tag":20,"props":44,"children":45},{},[46],{"type":24,"value":47},"There are 2 standard page layouts:",{"type":19,"tag":49,"props":50,"children":51},"ul",{},[52,58],{"type":19,"tag":53,"props":54,"children":55},"li",{},[56],{"type":24,"value":57},"Full width.",{"type":19,"tag":53,"props":59,"children":60},{},[61],{"type":24,"value":62},"Two column - right side.",{"type":19,"tag":64,"props":65,"children":67},"h3",{"id":66},"full-width",[68],{"type":24,"value":69},"Full width",{"type":19,"tag":20,"props":71,"children":72},{},[73],{"type":24,"value":74},"Displays the main content area the full width of the container.",{"type":19,"tag":20,"props":76,"children":77},{},[78],{"type":19,"tag":79,"props":80,"children":83},"img",{"alt":81,"src":82},"Sample visual of full width layout","/assets/img/layout-full-width.png",[],{"type":19,"tag":64,"props":85,"children":87},{"id":86},"two-column",[88],{"type":24,"value":89},"Two column",{"type":19,"tag":20,"props":91,"children":92},{},[93],{"type":24,"value":94},"Displays a right hand sidebar that stacks on \u003C991px breakpoints. The main content area is always visible.",{"type":19,"tag":20,"props":96,"children":97},{},[98],{"type":19,"tag":79,"props":99,"children":102},{"alt":100,"src":101},"Sample visual of two column layout","/assets/img/layout-two-column.png",[],{"type":19,"tag":37,"props":104,"children":106},{"id":105},"white-space",[107],{"type":24,"value":108},"White Space",{"type":19,"tag":20,"props":110,"children":111},{},[112],{"type":24,"value":113},"Use adequate white space in the layout to separate elements and create a sense of hierarchy. This helps to make elements on the page easier to distinguish and understand, and creates visual harmony.",{"type":19,"tag":64,"props":115,"children":117},{"id":116},"page-section-spacing",[118],{"type":24,"value":119},"Page Section Spacing",{"type":19,"tag":20,"props":121,"children":122},{},[123],{"type":24,"value":124},"Spacing is used between the ‘above’, ‘body’ and ‘below’ content sections.",{"type":19,"tag":20,"props":126,"children":127},{},[128],{"type":24,"value":129},"For both XS and S breakpoints, section spacing is added between the body section and sidebar section when in use.",{"type":19,"tag":20,"props":131,"children":132},{},[133],{"type":19,"tag":79,"props":134,"children":137},{"alt":135,"src":136},"Sample visual of page section layout spacing","/assets/img/layout-page-spacing.png",[],{"type":24,"value":139},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":141,"props":142,"children":143},"table",{},[144,168],{"type":19,"tag":145,"props":146,"children":147},"thead",{},[148],{"type":19,"tag":149,"props":150,"children":151},"tr",{},[152,158,163],{"type":19,"tag":153,"props":154,"children":155},"th",{},[156],{"type":24,"value":157},"Breakpoint",{"type":19,"tag":153,"props":159,"children":160},{},[161],{"type":24,"value":162},"Value",{"type":19,"tag":153,"props":164,"children":165},{},[166],{"type":24,"value":167},"CSS Variable",{"type":19,"tag":169,"props":170,"children":171},"tbody",{},[172,191,207,225,243],{"type":19,"tag":149,"props":173,"children":174},{},[175,181,186],{"type":19,"tag":176,"props":177,"children":178},"td",{},[179],{"type":24,"value":180},"XS • \u003C576px",{"type":19,"tag":176,"props":182,"children":183},{},[184],{"type":24,"value":185},"32px",{"type":19,"tag":176,"props":187,"children":188},{},[189],{"type":24,"value":190},"rpl-sp-8",{"type":19,"tag":149,"props":192,"children":193},{},[194,199,203],{"type":19,"tag":176,"props":195,"children":196},{},[197],{"type":24,"value":198},"S • 576-767px",{"type":19,"tag":176,"props":200,"children":201},{},[202],{"type":24,"value":185},{"type":19,"tag":176,"props":204,"children":205},{},[206],{"type":24,"value":190},{"type":19,"tag":149,"props":208,"children":209},{},[210,215,220],{"type":19,"tag":176,"props":211,"children":212},{},[213],{"type":24,"value":214},"M • 768-991px",{"type":19,"tag":176,"props":216,"children":217},{},[218],{"type":24,"value":219},"48px",{"type":19,"tag":176,"props":221,"children":222},{},[223],{"type":24,"value":224},"rpl-sp-10",{"type":19,"tag":149,"props":226,"children":227},{},[228,233,238],{"type":19,"tag":176,"props":229,"children":230},{},[231],{"type":24,"value":232},"L • 992-1199px",{"type":19,"tag":176,"props":234,"children":235},{},[236],{"type":24,"value":237},"64px",{"type":19,"tag":176,"props":239,"children":240},{},[241],{"type":24,"value":242},"rpl-sp-12",{"type":19,"tag":149,"props":244,"children":245},{},[246,251,256],{"type":19,"tag":176,"props":247,"children":248},{},[249],{"type":24,"value":250},"XL • 1200px+",{"type":19,"tag":176,"props":252,"children":253},{},[254],{"type":24,"value":255},"80px",{"type":19,"tag":176,"props":257,"children":258},{},[259],{"type":24,"value":260},"rpl-sp-13",{"type":19,"tag":64,"props":262,"children":264},{"id":263},"content-layout-spacing",[265],{"type":24,"value":266},"Content Layout Spacing",{"type":19,"tag":20,"props":268,"children":269},{},[270],{"type":24,"value":271},"We define spacing between components and elements at a breakpoint level. This compliments the grid and applied layout.",{"type":19,"tag":20,"props":273,"children":274},{},[275],{"type":19,"tag":79,"props":276,"children":279},{"alt":277,"src":278},"Sample visual of content layout spacing","/assets/img/layout-content-spacing.png",[],{"type":24,"value":281},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":141,"props":283,"children":284},{},[285,313],{"type":19,"tag":145,"props":286,"children":287},{},[288],{"type":19,"tag":149,"props":289,"children":290},{},[291,295,299,303,308],{"type":19,"tag":153,"props":292,"children":293},{},[294],{"type":24,"value":157},{"type":19,"tag":153,"props":296,"children":297},{},[298],{"type":24,"value":162},{"type":19,"tag":153,"props":300,"children":301},{},[302],{"type":24,"value":167},{"type":19,"tag":153,"props":304,"children":305},{},[306],{"type":24,"value":307},"Sidebar Value",{"type":19,"tag":153,"props":309,"children":310},{},[311],{"type":24,"value":312},"Sidebar CSS Variable",{"type":19,"tag":169,"props":314,"children":315},{},[316,343,366,389,412],{"type":19,"tag":149,"props":317,"children":318},{},[319,323,328,333,338],{"type":19,"tag":176,"props":320,"children":321},{},[322],{"type":24,"value":180},{"type":19,"tag":176,"props":324,"children":325},{},[326],{"type":24,"value":327},"16px",{"type":19,"tag":176,"props":329,"children":330},{},[331],{"type":24,"value":332},"rpl-sp-4",{"type":19,"tag":176,"props":334,"children":335},{},[336],{"type":24,"value":337},"24px",{"type":19,"tag":176,"props":339,"children":340},{},[341],{"type":24,"value":342},"rpl-sp-6",{"type":19,"tag":149,"props":344,"children":345},{},[346,350,354,358,362],{"type":19,"tag":176,"props":347,"children":348},{},[349],{"type":24,"value":198},{"type":19,"tag":176,"props":351,"children":352},{},[353],{"type":24,"value":327},{"type":19,"tag":176,"props":355,"children":356},{},[357],{"type":24,"value":332},{"type":19,"tag":176,"props":359,"children":360},{},[361],{"type":24,"value":337},{"type":19,"tag":176,"props":363,"children":364},{},[365],{"type":24,"value":342},{"type":19,"tag":149,"props":367,"children":368},{},[369,373,377,381,385],{"type":19,"tag":176,"props":370,"children":371},{},[372],{"type":24,"value":214},{"type":19,"tag":176,"props":374,"children":375},{},[376],{"type":24,"value":337},{"type":19,"tag":176,"props":378,"children":379},{},[380],{"type":24,"value":342},{"type":19,"tag":176,"props":382,"children":383},{},[384],{"type":24,"value":337},{"type":19,"tag":176,"props":386,"children":387},{},[388],{"type":24,"value":342},{"type":19,"tag":149,"props":390,"children":391},{},[392,396,400,404,408],{"type":19,"tag":176,"props":393,"children":394},{},[395],{"type":24,"value":232},{"type":19,"tag":176,"props":397,"children":398},{},[399],{"type":24,"value":185},{"type":19,"tag":176,"props":401,"children":402},{},[403],{"type":24,"value":190},{"type":19,"tag":176,"props":405,"children":406},{},[407],{"type":24,"value":185},{"type":19,"tag":176,"props":409,"children":410},{},[411],{"type":24,"value":190},{"type":19,"tag":149,"props":413,"children":414},{},[415,419,424,429,433],{"type":19,"tag":176,"props":416,"children":417},{},[418],{"type":24,"value":250},{"type":19,"tag":176,"props":420,"children":421},{},[422],{"type":24,"value":423},"40px",{"type":19,"tag":176,"props":425,"children":426},{},[427],{"type":24,"value":428},"rpl-sp-9",{"type":19,"tag":176,"props":430,"children":431},{},[432],{"type":24,"value":423},{"type":19,"tag":176,"props":434,"children":435},{},[436],{"type":24,"value":428},{"title":10,"searchDepth":438,"depth":438,"links":439},2,[440,445],{"id":39,"depth":438,"text":42,"children":441},[442,444],{"id":66,"depth":443,"text":69},3,{"id":86,"depth":443,"text":89},{"id":105,"depth":438,"text":108,"children":446},[447,448],{"id":116,"depth":443,"text":119},{"id":263,"depth":443,"text":266},"markdown","content:design-system:4.styles:layout.md","content","design-system/4.styles/layout.md","md",["ShallowRef",455],["ShallowReactive",456],{"/design-system/styles/layout":457},[458,464],{"_path":459,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":460,"description":461,"layout":13,"label":14,"_type":449,"_id":462,"_source":451,"_file":463,"_extension":453},"/design-system/styles/layer-styles","Layer styles",null,"content:design-system:4.styles:layer-styles.md","design-system/4.styles/layer-styles.md",{"_path":465,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":466,"description":467,"layout":13,"_type":449,"_id":468,"_source":451,"_file":469,"_extension":453},"/design-system/styles/logo","Logo","The visual representation of vic.gov.au and the Victorian Government.","content:design-system:4.styles:logo.md","design-system/4.styles/logo.md",["ShallowRef",471],{},[473,478,720],{"title":474,"_path":475,"icon":476,"layout":477},"Ripple Design System","/","carbon:home","home",{"title":479,"_path":480,"children":481},"Design System","/design-system",[482,498,514,544,572],{"title":483,"_path":484,"children":485},"About","/design-system/about",[486,489,492,495],{"title":487,"_path":488,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":490,"_path":491,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":493,"_path":494,"layout":13},"Support","/design-system/about/getting-support",{"title":496,"_path":497,"layout":13},"Contributing","/design-system/about/contributing",{"title":499,"_path":500,"children":501},"Design","/design-system/design",[502,505,508,511],{"title":503,"_path":504,"layout":13},"Getting started","/design-system/design/getting-started",{"title":506,"_path":507,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":509,"_path":510,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":512,"_path":513,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":515,"_path":516,"children":517},"Develop","/design-system/develop",[518,520,522,525],{"title":503,"_path":519,"layout":13},"/design-system/develop/getting-started",{"title":496,"_path":521,"layout":13},"/design-system/develop/contributing",{"title":523,"_path":524,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":526,"_path":527,"children":528,"layout":13},"Usage","/design-system/develop/usage",[529,532,535,538,541],{"title":530,"_path":531,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":533,"_path":534,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":536,"_path":537,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":539,"_path":540,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":542,"_path":543,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":545,"_path":546,"children":547},"Styles","/design-system/styles",[548,551,554,557,560,561,562,563,566,569],{"title":549,"_path":550,"layout":13},"Colour","/design-system/styles/colour",{"title":552,"_path":553,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":555,"_path":556,"layout":13},"Grid","/design-system/styles/grid",{"title":558,"_path":559,"layout":13},"Icons","/design-system/styles/icons",{"title":460,"_path":459,"layout":13},{"title":11,"_path":7,"layout":13},{"title":466,"_path":465,"layout":13},{"title":564,"_path":565,"layout":13},"Motion","/design-system/styles/motion",{"title":567,"_path":568,"layout":13},"Spacing","/design-system/styles/spacing",{"title":570,"_path":571,"layout":13},"Typography","/design-system/styles/typography",{"title":573,"_path":574,"children":575},"Components","/design-system/components",[576,579,582,585,588,591,594,597,600,603,606,609,612,615,618,621,624,627,630,633,636,639,642,645,648,651,654,657,660,663,666,669,672,675,678,681,684,687,690,693,696,699,702,705,708,711,714,717],{"title":577,"_path":578,"layout":13},"Accordion","/design-system/components/accordion",{"title":580,"_path":581,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":583,"_path":584,"layout":13},"Alert","/design-system/components/alert",{"title":586,"_path":587,"layout":13},"Block quote","/design-system/components/block-quote",{"title":589,"_path":590,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":592,"_path":593,"layout":13},"Button","/design-system/components/button",{"title":595,"_path":596,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":598,"_path":599,"layout":13},"Callout","/design-system/components/callout",{"title":601,"_path":602,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":604,"_path":605,"layout":13},"Card","/design-system/components/card",{"title":607,"_path":608,"layout":13},"Carousel","/design-system/components/carousel",{"title":610,"_path":611,"layout":13},"Category grid","/design-system/components/category-grid",{"title":613,"_path":614,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":616,"_path":617,"layout":13},"Chip","/design-system/components/chip",{"title":619,"_path":620,"layout":13},"Contact us","/design-system/components/contact-us",{"title":622,"_path":623,"layout":13},"Date input","/design-system/components/date-input",{"title":625,"_path":626,"layout":13},"Detail list","/design-system/components/detail-list",{"title":628,"_path":629,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":631,"_path":632,"layout":13},"File","/design-system/components/file",{"title":634,"_path":635,"layout":13},"Footer","/design-system/components/footer",{"title":637,"_path":638,"layout":13},"Form","/design-system/components/form",{"title":640,"_path":641,"layout":13},"Form alert","/design-system/components/form-alert",{"title":643,"_path":644,"layout":13},"Header","/design-system/components/header",{"title":646,"_path":647,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":649,"_path":650,"layout":13},"Input field","/design-system/components/input-field",{"title":652,"_path":653,"layout":13},"Key dates","/design-system/components/key-dates",{"title":655,"_path":656,"layout":13},"Media","/design-system/components/media",{"title":658,"_path":659,"layout":13},"Media embed","/design-system/components/media-embed",{"title":661,"_path":662,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":664,"_path":665,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":667,"_path":668,"layout":13},"Option button","/design-system/components/option-button",{"title":670,"_path":671,"layout":13},"Page action","/design-system/components/page-action",{"title":673,"_path":674,"layout":13},"Pagination","/design-system/components/pagination",{"title":676,"_path":677,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":679,"_path":680,"layout":13},"Profile","/design-system/components/profile",{"title":682,"_path":683,"layout":13},"Radio button","/design-system/components/radio-button",{"title":685,"_path":686,"layout":13},"Related links","/design-system/components/related-links",{"title":688,"_path":689,"layout":13},"Results listing","/design-system/components/results-listing",{"title":691,"_path":692,"layout":13},"Search bar","/design-system/components/search-bar",{"title":694,"_path":695,"layout":13},"Skip link","/design-system/components/skip-link",{"title":697,"_path":698,"layout":13},"Social share","/design-system/components/social-share",{"title":700,"_path":701,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":703,"_path":704,"layout":13},"Table","/design-system/components/table",{"title":706,"_path":707,"layout":13},"Tabs","/design-system/components/tabs",{"title":709,"_path":710,"layout":13},"Tag","/design-system/components/tag",{"title":712,"_path":713,"layout":13},"Text area","/design-system/components/text-area",{"title":715,"_path":716,"layout":13},"Timeline","/design-system/components/timeline",{"title":718,"_path":719,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":721,"_path":722,"children":723,"layout":13},"Ripple Framework","/framework",[724,725,743,765],{"title":721,"_path":722,"layout":13},{"title":726,"_path":727,"children":728},"Key Concepts","/framework/key-concepts",[729,731,734,737,740],{"title":536,"_path":730,"layout":13},"/framework/key-concepts/nuxt",{"title":732,"_path":733,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":735,"_path":736,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":738,"_path":739,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":741,"_path":742,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":744,"_path":745,"children":746},"Guides","/framework/guides",[747,750,753,756,759,762],{"title":748,"_path":749,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":751,"_path":752,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":754,"_path":755,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":757,"_path":758,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":760,"_path":761,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":763,"_path":764,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":766,"_path":767,"layout":13},"Core modules","/framework/core-modules",["Reactive",769],["Set"],["Reactive",771],{"module-navigation":461},true,"/design-system/styles/layout/",1714695155979]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+<div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Breakpoint<!--]--></th><th><!--[-->Value<!--]--></th><th><!--[-->CSS Variable<!--]--></th><th><!--[-->Sidebar Value<!--]--></th><th><!--[-->Sidebar CSS Variable<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->XS • &lt;576px<!--]--></td><td><!--[-->16px<!--]--></td><td><!--[-->rpl-sp-4<!--]--></td><td><!--[-->24px<!--]--></td><td><!--[-->rpl-sp-6<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->S • 576-767px<!--]--></td><td><!--[-->16px<!--]--></td><td><!--[-->rpl-sp-4<!--]--></td><td><!--[-->24px<!--]--></td><td><!--[-->rpl-sp-6<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->M • 768-991px<!--]--></td><td><!--[-->24px<!--]--></td><td><!--[-->rpl-sp-6<!--]--></td><td><!--[-->24px<!--]--></td><td><!--[-->rpl-sp-6<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->L • 992-1199px<!--]--></td><td><!--[-->32px<!--]--></td><td><!--[-->rpl-sp-8<!--]--></td><td><!--[-->32px<!--]--></td><td><!--[-->rpl-sp-8<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->XL • 1200px+<!--]--></td><td><!--[-->40px<!--]--></td><td><!--[-->rpl-sp-9<!--]--></td><td><!--[-->40px<!--]--></td><td><!--[-->rpl-sp-9<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/4.styles/layout.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/styles/layout/_payload.json">[{"state":1,"once":768,"_errors":770,"serverRendered":772,"path":773,"prerenderedAt":774},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":454,"$sdd-globals":470,"$sdd-navigation":472},["ShallowRef",4],["ShallowReactive",5],{"/design-system/styles/layout":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":449,"_id":450,"_source":451,"_file":452,"_extension":453},"/design-system/styles/layout","styles",false,"","Layout","Layouts are common page composition patterns that offer ways of structuring components and content.","page","Core",{"type":16,"children":17,"toc":437},"root",[18,26,31,36,43,48,63,70,75,84,90,95,103,109,114,120,125,130,138,140,261,267,272,280,282],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","Always design for small screens first.",{"type":19,"tag":20,"props":27,"children":28},{},[29],{"type":24,"value":30},"For most types of pages, use either a ‘two-thirds’ or a ‘two-thirds and one-third’ layout. Doing this reduces long lines of text that can make a page hard to read on desktop devices. This approach should limit lines of text to 75 characters.",{"type":19,"tag":20,"props":32,"children":33},{},[34],{"type":24,"value":35},"You should never assume what devices people are using. This is why you should design for different screen sizes instead of specific devices.",{"type":19,"tag":37,"props":38,"children":40},"h2",{"id":39},"page-layouts",[41],{"type":24,"value":42},"Page layouts",{"type":19,"tag":20,"props":44,"children":45},{},[46],{"type":24,"value":47},"There are 2 standard page layouts:",{"type":19,"tag":49,"props":50,"children":51},"ul",{},[52,58],{"type":19,"tag":53,"props":54,"children":55},"li",{},[56],{"type":24,"value":57},"Full width.",{"type":19,"tag":53,"props":59,"children":60},{},[61],{"type":24,"value":62},"Two column - right side.",{"type":19,"tag":64,"props":65,"children":67},"h3",{"id":66},"full-width",[68],{"type":24,"value":69},"Full width",{"type":19,"tag":20,"props":71,"children":72},{},[73],{"type":24,"value":74},"Displays the main content area the full width of the container.",{"type":19,"tag":20,"props":76,"children":77},{},[78],{"type":19,"tag":79,"props":80,"children":83},"img",{"alt":81,"src":82},"Sample visual of full width layout","/assets/img/layout-full-width.png",[],{"type":19,"tag":64,"props":85,"children":87},{"id":86},"two-column",[88],{"type":24,"value":89},"Two column",{"type":19,"tag":20,"props":91,"children":92},{},[93],{"type":24,"value":94},"Displays a right hand sidebar that stacks on \u003C991px breakpoints. The main content area is always visible.",{"type":19,"tag":20,"props":96,"children":97},{},[98],{"type":19,"tag":79,"props":99,"children":102},{"alt":100,"src":101},"Sample visual of two column layout","/assets/img/layout-two-column.png",[],{"type":19,"tag":37,"props":104,"children":106},{"id":105},"white-space",[107],{"type":24,"value":108},"White Space",{"type":19,"tag":20,"props":110,"children":111},{},[112],{"type":24,"value":113},"Use adequate white space in the layout to separate elements and create a sense of hierarchy. This helps to make elements on the page easier to distinguish and understand, and creates visual harmony.",{"type":19,"tag":64,"props":115,"children":117},{"id":116},"page-section-spacing",[118],{"type":24,"value":119},"Page Section Spacing",{"type":19,"tag":20,"props":121,"children":122},{},[123],{"type":24,"value":124},"Spacing is used between the ‘above’, ‘body’ and ‘below’ content sections.",{"type":19,"tag":20,"props":126,"children":127},{},[128],{"type":24,"value":129},"For both XS and S breakpoints, section spacing is added between the body section and sidebar section when in use.",{"type":19,"tag":20,"props":131,"children":132},{},[133],{"type":19,"tag":79,"props":134,"children":137},{"alt":135,"src":136},"Sample visual of page section layout spacing","/assets/img/layout-page-spacing.png",[],{"type":24,"value":139},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":141,"props":142,"children":143},"table",{},[144,168],{"type":19,"tag":145,"props":146,"children":147},"thead",{},[148],{"type":19,"tag":149,"props":150,"children":151},"tr",{},[152,158,163],{"type":19,"tag":153,"props":154,"children":155},"th",{},[156],{"type":24,"value":157},"Breakpoint",{"type":19,"tag":153,"props":159,"children":160},{},[161],{"type":24,"value":162},"Value",{"type":19,"tag":153,"props":164,"children":165},{},[166],{"type":24,"value":167},"CSS Variable",{"type":19,"tag":169,"props":170,"children":171},"tbody",{},[172,191,207,225,243],{"type":19,"tag":149,"props":173,"children":174},{},[175,181,186],{"type":19,"tag":176,"props":177,"children":178},"td",{},[179],{"type":24,"value":180},"XS • \u003C576px",{"type":19,"tag":176,"props":182,"children":183},{},[184],{"type":24,"value":185},"32px",{"type":19,"tag":176,"props":187,"children":188},{},[189],{"type":24,"value":190},"rpl-sp-8",{"type":19,"tag":149,"props":192,"children":193},{},[194,199,203],{"type":19,"tag":176,"props":195,"children":196},{},[197],{"type":24,"value":198},"S • 576-767px",{"type":19,"tag":176,"props":200,"children":201},{},[202],{"type":24,"value":185},{"type":19,"tag":176,"props":204,"children":205},{},[206],{"type":24,"value":190},{"type":19,"tag":149,"props":208,"children":209},{},[210,215,220],{"type":19,"tag":176,"props":211,"children":212},{},[213],{"type":24,"value":214},"M • 768-991px",{"type":19,"tag":176,"props":216,"children":217},{},[218],{"type":24,"value":219},"48px",{"type":19,"tag":176,"props":221,"children":222},{},[223],{"type":24,"value":224},"rpl-sp-10",{"type":19,"tag":149,"props":226,"children":227},{},[228,233,238],{"type":19,"tag":176,"props":229,"children":230},{},[231],{"type":24,"value":232},"L • 992-1199px",{"type":19,"tag":176,"props":234,"children":235},{},[236],{"type":24,"value":237},"64px",{"type":19,"tag":176,"props":239,"children":240},{},[241],{"type":24,"value":242},"rpl-sp-12",{"type":19,"tag":149,"props":244,"children":245},{},[246,251,256],{"type":19,"tag":176,"props":247,"children":248},{},[249],{"type":24,"value":250},"XL • 1200px+",{"type":19,"tag":176,"props":252,"children":253},{},[254],{"type":24,"value":255},"80px",{"type":19,"tag":176,"props":257,"children":258},{},[259],{"type":24,"value":260},"rpl-sp-13",{"type":19,"tag":64,"props":262,"children":264},{"id":263},"content-layout-spacing",[265],{"type":24,"value":266},"Content Layout Spacing",{"type":19,"tag":20,"props":268,"children":269},{},[270],{"type":24,"value":271},"We define spacing between components and elements at a breakpoint level. This compliments the grid and applied layout.",{"type":19,"tag":20,"props":273,"children":274},{},[275],{"type":19,"tag":79,"props":276,"children":279},{"alt":277,"src":278},"Sample visual of content layout spacing","/assets/img/layout-content-spacing.png",[],{"type":24,"value":281},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":141,"props":283,"children":284},{},[285,313],{"type":19,"tag":145,"props":286,"children":287},{},[288],{"type":19,"tag":149,"props":289,"children":290},{},[291,295,299,303,308],{"type":19,"tag":153,"props":292,"children":293},{},[294],{"type":24,"value":157},{"type":19,"tag":153,"props":296,"children":297},{},[298],{"type":24,"value":162},{"type":19,"tag":153,"props":300,"children":301},{},[302],{"type":24,"value":167},{"type":19,"tag":153,"props":304,"children":305},{},[306],{"type":24,"value":307},"Sidebar Value",{"type":19,"tag":153,"props":309,"children":310},{},[311],{"type":24,"value":312},"Sidebar CSS Variable",{"type":19,"tag":169,"props":314,"children":315},{},[316,343,366,389,412],{"type":19,"tag":149,"props":317,"children":318},{},[319,323,328,333,338],{"type":19,"tag":176,"props":320,"children":321},{},[322],{"type":24,"value":180},{"type":19,"tag":176,"props":324,"children":325},{},[326],{"type":24,"value":327},"16px",{"type":19,"tag":176,"props":329,"children":330},{},[331],{"type":24,"value":332},"rpl-sp-4",{"type":19,"tag":176,"props":334,"children":335},{},[336],{"type":24,"value":337},"24px",{"type":19,"tag":176,"props":339,"children":340},{},[341],{"type":24,"value":342},"rpl-sp-6",{"type":19,"tag":149,"props":344,"children":345},{},[346,350,354,358,362],{"type":19,"tag":176,"props":347,"children":348},{},[349],{"type":24,"value":198},{"type":19,"tag":176,"props":351,"children":352},{},[353],{"type":24,"value":327},{"type":19,"tag":176,"props":355,"children":356},{},[357],{"type":24,"value":332},{"type":19,"tag":176,"props":359,"children":360},{},[361],{"type":24,"value":337},{"type":19,"tag":176,"props":363,"children":364},{},[365],{"type":24,"value":342},{"type":19,"tag":149,"props":367,"children":368},{},[369,373,377,381,385],{"type":19,"tag":176,"props":370,"children":371},{},[372],{"type":24,"value":214},{"type":19,"tag":176,"props":374,"children":375},{},[376],{"type":24,"value":337},{"type":19,"tag":176,"props":378,"children":379},{},[380],{"type":24,"value":342},{"type":19,"tag":176,"props":382,"children":383},{},[384],{"type":24,"value":337},{"type":19,"tag":176,"props":386,"children":387},{},[388],{"type":24,"value":342},{"type":19,"tag":149,"props":390,"children":391},{},[392,396,400,404,408],{"type":19,"tag":176,"props":393,"children":394},{},[395],{"type":24,"value":232},{"type":19,"tag":176,"props":397,"children":398},{},[399],{"type":24,"value":185},{"type":19,"tag":176,"props":401,"children":402},{},[403],{"type":24,"value":190},{"type":19,"tag":176,"props":405,"children":406},{},[407],{"type":24,"value":185},{"type":19,"tag":176,"props":409,"children":410},{},[411],{"type":24,"value":190},{"type":19,"tag":149,"props":413,"children":414},{},[415,419,424,429,433],{"type":19,"tag":176,"props":416,"children":417},{},[418],{"type":24,"value":250},{"type":19,"tag":176,"props":420,"children":421},{},[422],{"type":24,"value":423},"40px",{"type":19,"tag":176,"props":425,"children":426},{},[427],{"type":24,"value":428},"rpl-sp-9",{"type":19,"tag":176,"props":430,"children":431},{},[432],{"type":24,"value":423},{"type":19,"tag":176,"props":434,"children":435},{},[436],{"type":24,"value":428},{"title":10,"searchDepth":438,"depth":438,"links":439},2,[440,445],{"id":39,"depth":438,"text":42,"children":441},[442,444],{"id":66,"depth":443,"text":69},3,{"id":86,"depth":443,"text":89},{"id":105,"depth":438,"text":108,"children":446},[447,448],{"id":116,"depth":443,"text":119},{"id":263,"depth":443,"text":266},"markdown","content:design-system:4.styles:layout.md","content","design-system/4.styles/layout.md","md",["ShallowRef",455],["ShallowReactive",456],{"/design-system/styles/layout":457},[458,464],{"_path":459,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":460,"description":461,"layout":13,"label":14,"_type":449,"_id":462,"_source":451,"_file":463,"_extension":453},"/design-system/styles/layer-styles","Layer styles",null,"content:design-system:4.styles:layer-styles.md","design-system/4.styles/layer-styles.md",{"_path":465,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":466,"description":467,"layout":13,"_type":449,"_id":468,"_source":451,"_file":469,"_extension":453},"/design-system/styles/logo","Logo","The visual representation of vic.gov.au and the Victorian Government.","content:design-system:4.styles:logo.md","design-system/4.styles/logo.md",["ShallowRef",471],{},[473,478,720],{"title":474,"_path":475,"icon":476,"layout":477},"Ripple Design System","/","carbon:home","home",{"title":479,"_path":480,"children":481},"Design System","/design-system",[482,498,514,544,572],{"title":483,"_path":484,"children":485},"About","/design-system/about",[486,489,492,495],{"title":487,"_path":488,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":490,"_path":491,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":493,"_path":494,"layout":13},"Support","/design-system/about/getting-support",{"title":496,"_path":497,"layout":13},"Contributing","/design-system/about/contributing",{"title":499,"_path":500,"children":501},"Design","/design-system/design",[502,505,508,511],{"title":503,"_path":504,"layout":13},"Getting started","/design-system/design/getting-started",{"title":506,"_path":507,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":509,"_path":510,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":512,"_path":513,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":515,"_path":516,"children":517},"Develop","/design-system/develop",[518,520,522,525],{"title":503,"_path":519,"layout":13},"/design-system/develop/getting-started",{"title":496,"_path":521,"layout":13},"/design-system/develop/contributing",{"title":523,"_path":524,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":526,"_path":527,"children":528,"layout":13},"Usage","/design-system/develop/usage",[529,532,535,538,541],{"title":530,"_path":531,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":533,"_path":534,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":536,"_path":537,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":539,"_path":540,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":542,"_path":543,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":545,"_path":546,"children":547},"Styles","/design-system/styles",[548,551,554,557,560,561,562,563,566,569],{"title":549,"_path":550,"layout":13},"Colour","/design-system/styles/colour",{"title":552,"_path":553,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":555,"_path":556,"layout":13},"Grid","/design-system/styles/grid",{"title":558,"_path":559,"layout":13},"Icons","/design-system/styles/icons",{"title":460,"_path":459,"layout":13},{"title":11,"_path":7,"layout":13},{"title":466,"_path":465,"layout":13},{"title":564,"_path":565,"layout":13},"Motion","/design-system/styles/motion",{"title":567,"_path":568,"layout":13},"Spacing","/design-system/styles/spacing",{"title":570,"_path":571,"layout":13},"Typography","/design-system/styles/typography",{"title":573,"_path":574,"children":575},"Components","/design-system/components",[576,579,582,585,588,591,594,597,600,603,606,609,612,615,618,621,624,627,630,633,636,639,642,645,648,651,654,657,660,663,666,669,672,675,678,681,684,687,690,693,696,699,702,705,708,711,714,717],{"title":577,"_path":578,"layout":13},"Accordion","/design-system/components/accordion",{"title":580,"_path":581,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":583,"_path":584,"layout":13},"Alert","/design-system/components/alert",{"title":586,"_path":587,"layout":13},"Block quote","/design-system/components/block-quote",{"title":589,"_path":590,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":592,"_path":593,"layout":13},"Button","/design-system/components/button",{"title":595,"_path":596,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":598,"_path":599,"layout":13},"Callout","/design-system/components/callout",{"title":601,"_path":602,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":604,"_path":605,"layout":13},"Card","/design-system/components/card",{"title":607,"_path":608,"layout":13},"Carousel","/design-system/components/carousel",{"title":610,"_path":611,"layout":13},"Category grid","/design-system/components/category-grid",{"title":613,"_path":614,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":616,"_path":617,"layout":13},"Chip","/design-system/components/chip",{"title":619,"_path":620,"layout":13},"Contact us","/design-system/components/contact-us",{"title":622,"_path":623,"layout":13},"Date input","/design-system/components/date-input",{"title":625,"_path":626,"layout":13},"Detail list","/design-system/components/detail-list",{"title":628,"_path":629,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":631,"_path":632,"layout":13},"File","/design-system/components/file",{"title":634,"_path":635,"layout":13},"Footer","/design-system/components/footer",{"title":637,"_path":638,"layout":13},"Form","/design-system/components/form",{"title":640,"_path":641,"layout":13},"Form alert","/design-system/components/form-alert",{"title":643,"_path":644,"layout":13},"Header","/design-system/components/header",{"title":646,"_path":647,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":649,"_path":650,"layout":13},"Input field","/design-system/components/input-field",{"title":652,"_path":653,"layout":13},"Key dates","/design-system/components/key-dates",{"title":655,"_path":656,"layout":13},"Media","/design-system/components/media",{"title":658,"_path":659,"layout":13},"Media embed","/design-system/components/media-embed",{"title":661,"_path":662,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":664,"_path":665,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":667,"_path":668,"layout":13},"Option button","/design-system/components/option-button",{"title":670,"_path":671,"layout":13},"Page action","/design-system/components/page-action",{"title":673,"_path":674,"layout":13},"Pagination","/design-system/components/pagination",{"title":676,"_path":677,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":679,"_path":680,"layout":13},"Profile","/design-system/components/profile",{"title":682,"_path":683,"layout":13},"Radio button","/design-system/components/radio-button",{"title":685,"_path":686,"layout":13},"Related links","/design-system/components/related-links",{"title":688,"_path":689,"layout":13},"Results listing","/design-system/components/results-listing",{"title":691,"_path":692,"layout":13},"Search bar","/design-system/components/search-bar",{"title":694,"_path":695,"layout":13},"Skip link","/design-system/components/skip-link",{"title":697,"_path":698,"layout":13},"Social share","/design-system/components/social-share",{"title":700,"_path":701,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":703,"_path":704,"layout":13},"Table","/design-system/components/table",{"title":706,"_path":707,"layout":13},"Tabs","/design-system/components/tabs",{"title":709,"_path":710,"layout":13},"Tag","/design-system/components/tag",{"title":712,"_path":713,"layout":13},"Text area","/design-system/components/text-area",{"title":715,"_path":716,"layout":13},"Timeline","/design-system/components/timeline",{"title":718,"_path":719,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":721,"_path":722,"children":723,"layout":13},"Ripple Framework","/framework",[724,725,743,765],{"title":721,"_path":722,"layout":13},{"title":726,"_path":727,"children":728},"Key Concepts","/framework/key-concepts",[729,731,734,737,740],{"title":536,"_path":730,"layout":13},"/framework/key-concepts/nuxt",{"title":732,"_path":733,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":735,"_path":736,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":738,"_path":739,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":741,"_path":742,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":744,"_path":745,"children":746},"Guides","/framework/guides",[747,750,753,756,759,762],{"title":748,"_path":749,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":751,"_path":752,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":754,"_path":755,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":757,"_path":758,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":760,"_path":761,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":763,"_path":764,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":766,"_path":767,"layout":13},"Core modules","/framework/core-modules",["Reactive",769],["Set"],["Reactive",771],{"module-navigation":461},true,"/design-system/styles/layout/",1714695654116]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/styles/logo/_payload.json b/design-system/styles/logo/_payload.json
index 715f480f97..93f320f22b 100644
--- a/design-system/styles/logo/_payload.json
+++ b/design-system/styles/logo/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":70,"items":71},"/design-system/styles","Styles",true,[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":70,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695152186]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":70,"items":71},"/design-system/styles","Styles",true,[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":70,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695650363]
\ No newline at end of file
diff --git a/design-system/styles/logo/index.html b/design-system/styles/logo/index.html
index 6eb884eb33..a615b92457 100644
--- a/design-system/styles/logo/index.html
+++ b/design-system/styles/logo/index.html
@@ -25,65 +25,65 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsImageExample.gzBXNxRI.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsImageExample.8UN1-6g4.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/node.uMQX-T_c.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseImg.wgVpK8mn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.lp_k9Hpd.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.F9NVvvm4.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseImg.Wu9xgcX7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.Czpq-HHw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.GmB4B_NE.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -95,8 +95,8 @@
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/colour" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Colour</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/focus-state" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Focus state</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/icons" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Icons</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layer-styles" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Layer styles</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/layout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Layout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/logo" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Logo</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/motion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Motion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/spacing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Spacing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/styles/typography" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Typography</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/components-toggle"><span class="rpl-vertical-nav__toggle-text">Components</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/components-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Logo</h1><p class="rpl-type-p-large" data-v-3163c6df>The visual representation of vic.gov.au and the Victorian Government.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="vicgovau-logo" data-v-fff5b905><a href="#vicgovau-logo" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->vic.gov.au logo<!--]--></a></h2><p><!--[-->The vic.gov.au logo is the primary logo used in the design system.<!--]--></p><figure class="docs-example" data-v-d653ba7c><div class="docs-example-body" data-v-d653ba7c><img src="/assets/img/Logo-vicgov.png" alt="vic.gov.au logo" data-v-d653ba7c></div><div class="docs-example-footer" data-v-d653ba7c><figcaption data-v-d653ba7c><!--[--><a href="https://www.vic.gov.au/brand-victoria-using-our-logos" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow" data-v-d653ba7c><!--[--><!--[--><!--[-->Download logo<!--]--><!--]--><!----><!--]--></a><!--]--></figcaption></div></figure><h2 class="rpl-type-h3 docs-h3" id="clear-space" data-v-ea525968><a href="#clear-space" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Clear space<!--]--></a></h2><p><!--[-->The clear space for the vic.gov.au logo is 100% of the height of the ‘V’ across all applications.<!--]--></p><p><!--[--><img src="/assets/img/Logo-vicgov-Clear-Space.png" alt="Clear space visual"><!--]--></p><h2 class="rpl-type-h3 docs-h3" id="co-branding" data-v-ea525968><a href="#co-branding" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Co-branding<!--]--></a></h2><p><!--[-->Where the vic.gov.au logo appears next to another logo, it should be:<!--]--></p><ul><!--[--><li><!--[-->centred vertically<!--]--></li><li><!--[-->separated by a minimum distance of 16px<!--]--></li><li><!--[-->separated by a divider line.<!--]--></li><!--]--></ul><p><!--[--><img src="/assets/img/Logo-vicgov-cobrand.png" alt="Co-branded visual"><!--]--></p><h2 class="rpl-type-h3 docs-h3" id="sizing" data-v-ea525968><a href="#sizing" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Sizing<!--]--></a></h2><p><!--[-->The vic.gov.au logo should be 16px in height on all screens.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[--><strong><!--[-->No modification<!--]--></strong><!--]--></p><p><!--[-->Don&#39;t change the logo. This includes changing its colour, adding effects, or altering its shape.<!--]--></p><p><!--[-->This helps to maintain the integrity and consistency of the logo.<!--]--></p><!--]--></blockquote><h2 class="rpl-type-h3 docs-h3" id="accessibility" data-v-ea525968><a href="#accessibility" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Accessibility<!--]--></a></h2><p><!--[-->Always add alternative text to the logo. This is for screen reader users.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="victoria-state-government-logo" data-v-fff5b905><a href="#victoria-state-government-logo" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Victoria State Government logo<!--]--></a></h2><p><!--[-->The Victorian State Government logo is the secondary logo used in the design system. It’s used in the footer.<!--]--></p><figure class="docs-example" data-v-d653ba7c><div class="docs-example-body" data-v-d653ba7c><img src="/assets/img/Logo-StateGov.png" alt="Victoria State Government logo" data-v-d653ba7c></div><div class="docs-example-footer" data-v-d653ba7c><figcaption data-v-d653ba7c><!--[--><a href="https://www.vic.gov.au/brand-victoria-using-our-logos" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow" data-v-d653ba7c><!--[--><!--[--><!--[-->Download logo<!--]--><!--]--><!----><!--]--></a><!--]--></figcaption></div></figure><h2 class="rpl-type-h3 docs-h3" id="clear-space-1" data-v-ea525968><a href="#clear-space-1" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Clear space<!--]--></a></h2><p><!--[-->The clear space for the Victorian State Government logo is at least 20% the height.<!--]--></p><p><!--[--><img src="/assets/img/Logo-StateGovClearSpace.png" alt="Clear space visual"><!--]--></p><h2 class="rpl-type-h3 docs-h3" id="co-branding-1" data-v-ea525968><a href="#co-branding-1" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Co-branding<!--]--></a></h2><p><!--[-->Where the Victorian State Government logo appears next to another logo, it should be:<!--]--></p><ul><!--[--><li><!--[-->centred vertically<!--]--></li><li><!--[-->separated by a distance of at least 50% the height of the Victorian State Government logo.<!--]--></li><!--]--></ul><p><!--[--><img src="/assets/img/Logo-StateGov-cobrand.png" alt="Co-branded visual"><!--]--></p><h2 class="rpl-type-h3 docs-h3" id="sizing-1" data-v-ea525968><a href="#sizing-1" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Sizing<!--]--></a></h2><p><!--[-->The Victorian State Government logo should be 42px in height on all screens.<!--]--></p><p><!--[-->Use the Victorian State Government logo where size permits. But, at times, we need to use a smaller logo depending on the application:<!--]--></p><ul><!--[--><li><!--[-->VIC only logo (favicons only).<!--]--></li><!--]--></ul><p><!--[-->We&#39;ve designed these logos to ensure accessibility and clarity at all sizes.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="co-branding-logo" data-v-fff5b905><a href="#co-branding-logo" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Co-branding logo<!--]--></a></h2><p><!--[-->See <a href="/design-system/components/primary-navigation/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->primary navigation<!--]--><!--]--><!----><!--]--></a> and <a href="/design-system/components/footer/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->footer<!--]--><!--]--><!----><!--]--></a> for size requirements.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/4.styles/logo.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/styles/logo/_payload.json">[{"state":1,"once":621,"_errors":623,"serverRendered":626,"path":627,"prerenderedAt":628},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":306,"$sdd-globals":323,"$sdd-navigation":325},["ShallowRef",4],["ShallowReactive",5],{"/design-system/styles/logo":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":301,"_id":302,"_source":303,"_file":304,"_extension":305},"/design-system/styles/logo","styles",false,"","Logo","The visual representation of vic.gov.au and the Victorian Government.","page",{"type":15,"children":16,"toc":285},"root",[17,26,32,49,56,61,70,76,81,101,109,115,120,143,149,154,158,164,169,181,186,191,198,203,208,220,227,232,237,242,250,255,258,264],{"type":18,"tag":19,"props":20,"children":22},"element","h2",{"id":21},"vicgovau-logo",[23],{"type":24,"value":25},"text","vic.gov.au logo",{"type":18,"tag":27,"props":28,"children":29},"p",{},[30],{"type":24,"value":31},"The vic.gov.au logo is the primary logo used in the design system.",{"type":18,"tag":33,"props":34,"children":36},"docs-image-example",{"alt":25,"src":35},"/assets/img/Logo-vicgov.png",[37],{"type":18,"tag":27,"props":38,"children":39},{},[40],{"type":18,"tag":41,"props":42,"children":46},"a",{"href":43,"rel":44},"https://www.vic.gov.au/brand-victoria-using-our-logos",[45],"nofollow",[47],{"type":24,"value":48},"Download logo",{"type":18,"tag":50,"props":51,"children":53},"h3",{"id":52},"clear-space",[54],{"type":24,"value":55},"Clear space",{"type":18,"tag":27,"props":57,"children":58},{},[59],{"type":24,"value":60},"The clear space for the vic.gov.au logo is 100% of the height of the ‘V’ across all applications.",{"type":18,"tag":27,"props":62,"children":63},{},[64],{"type":18,"tag":65,"props":66,"children":69},"img",{"alt":67,"src":68},"Clear space visual","/assets/img/Logo-vicgov-Clear-Space.png",[],{"type":18,"tag":50,"props":71,"children":73},{"id":72},"co-branding",[74],{"type":24,"value":75},"Co-branding",{"type":18,"tag":27,"props":77,"children":78},{},[79],{"type":24,"value":80},"Where the vic.gov.au logo appears next to another logo, it should be:",{"type":18,"tag":82,"props":83,"children":84},"ul",{},[85,91,96],{"type":18,"tag":86,"props":87,"children":88},"li",{},[89],{"type":24,"value":90},"centred vertically",{"type":18,"tag":86,"props":92,"children":93},{},[94],{"type":24,"value":95},"separated by a minimum distance of 16px",{"type":18,"tag":86,"props":97,"children":98},{},[99],{"type":24,"value":100},"separated by a divider line.",{"type":18,"tag":27,"props":102,"children":103},{},[104],{"type":18,"tag":65,"props":105,"children":108},{"alt":106,"src":107},"Co-branded visual","/assets/img/Logo-vicgov-cobrand.png",[],{"type":18,"tag":50,"props":110,"children":112},{"id":111},"sizing",[113],{"type":24,"value":114},"Sizing",{"type":18,"tag":27,"props":116,"children":117},{},[118],{"type":24,"value":119},"The vic.gov.au logo should be 16px in height on all screens.",{"type":18,"tag":121,"props":122,"children":123},"blockquote",{},[124,133,138],{"type":18,"tag":27,"props":125,"children":126},{},[127],{"type":18,"tag":128,"props":129,"children":130},"strong",{},[131],{"type":24,"value":132},"No modification",{"type":18,"tag":27,"props":134,"children":135},{},[136],{"type":24,"value":137},"Don't change the logo. This includes changing its colour, adding effects, or altering its shape.",{"type":18,"tag":27,"props":139,"children":140},{},[141],{"type":24,"value":142},"This helps to maintain the integrity and consistency of the logo.",{"type":18,"tag":50,"props":144,"children":146},{"id":145},"accessibility",[147],{"type":24,"value":148},"Accessibility",{"type":18,"tag":27,"props":150,"children":151},{},[152],{"type":24,"value":153},"Always add alternative text to the logo. This is for screen reader users.",{"type":18,"tag":155,"props":156,"children":157},"hr",{},[],{"type":18,"tag":19,"props":159,"children":161},{"id":160},"victoria-state-government-logo",[162],{"type":24,"value":163},"Victoria State Government logo",{"type":18,"tag":27,"props":165,"children":166},{},[167],{"type":24,"value":168},"The Victorian State Government logo is the secondary logo used in the design system. It’s used in the footer.",{"type":18,"tag":33,"props":170,"children":172},{"alt":163,"src":171},"/assets/img/Logo-StateGov.png",[173],{"type":18,"tag":27,"props":174,"children":175},{},[176],{"type":18,"tag":41,"props":177,"children":179},{"href":43,"rel":178},[45],[180],{"type":24,"value":48},{"type":18,"tag":50,"props":182,"children":184},{"id":183},"clear-space-1",[185],{"type":24,"value":55},{"type":18,"tag":27,"props":187,"children":188},{},[189],{"type":24,"value":190},"The clear space for the Victorian State Government logo is at least 20% the height.",{"type":18,"tag":27,"props":192,"children":193},{},[194],{"type":18,"tag":65,"props":195,"children":197},{"alt":67,"src":196},"/assets/img/Logo-StateGovClearSpace.png",[],{"type":18,"tag":50,"props":199,"children":201},{"id":200},"co-branding-1",[202],{"type":24,"value":75},{"type":18,"tag":27,"props":204,"children":205},{},[206],{"type":24,"value":207},"Where the Victorian State Government logo appears next to another logo, it should be:",{"type":18,"tag":82,"props":209,"children":210},{},[211,215],{"type":18,"tag":86,"props":212,"children":213},{},[214],{"type":24,"value":90},{"type":18,"tag":86,"props":216,"children":217},{},[218],{"type":24,"value":219},"separated by a distance of at least 50% the height of the Victorian State Government logo.",{"type":18,"tag":27,"props":221,"children":222},{},[223],{"type":18,"tag":65,"props":224,"children":226},{"alt":106,"src":225},"/assets/img/Logo-StateGov-cobrand.png",[],{"type":18,"tag":50,"props":228,"children":230},{"id":229},"sizing-1",[231],{"type":24,"value":114},{"type":18,"tag":27,"props":233,"children":234},{},[235],{"type":24,"value":236},"The Victorian State Government logo should be 42px in height on all screens.",{"type":18,"tag":27,"props":238,"children":239},{},[240],{"type":24,"value":241},"Use the Victorian State Government logo where size permits. But, at times, we need to use a smaller logo depending on the application:",{"type":18,"tag":82,"props":243,"children":244},{},[245],{"type":18,"tag":86,"props":246,"children":247},{},[248],{"type":24,"value":249},"VIC only logo (favicons only).",{"type":18,"tag":27,"props":251,"children":252},{},[253],{"type":24,"value":254},"We've designed these logos to ensure accessibility and clarity at all sizes.",{"type":18,"tag":155,"props":256,"children":257},{},[],{"type":18,"tag":19,"props":259,"children":261},{"id":260},"co-branding-logo",[262],{"type":24,"value":263},"Co-branding logo",{"type":18,"tag":27,"props":265,"children":266},{},[267,269,275,277,283],{"type":24,"value":268},"See ",{"type":18,"tag":41,"props":270,"children":272},{"href":271},"/design-system/components/primary-navigation/",[273],{"type":24,"value":274},"primary navigation",{"type":24,"value":276}," and ",{"type":18,"tag":41,"props":278,"children":280},{"href":279},"/design-system/components/footer/",[281],{"type":24,"value":282},"footer",{"type":24,"value":284}," for size requirements.",{"title":10,"searchDepth":286,"depth":286,"links":287},2,[288,295,300],{"id":21,"depth":286,"text":25,"children":289},[290,292,293,294],{"id":52,"depth":291,"text":55},3,{"id":72,"depth":291,"text":75},{"id":111,"depth":291,"text":114},{"id":145,"depth":291,"text":148},{"id":160,"depth":286,"text":163,"children":296},[297,298,299],{"id":183,"depth":291,"text":55},{"id":200,"depth":291,"text":75},{"id":229,"depth":291,"text":114},{"id":260,"depth":286,"text":263},"markdown","content:design-system:4.styles:logo.md","content","design-system/4.styles/logo.md","md",["ShallowRef",307],["ShallowReactive",308],{"/design-system/styles/logo":309},[310,317],{"_path":311,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":312,"description":313,"layout":13,"label":314,"_type":301,"_id":315,"_source":303,"_file":316,"_extension":305},"/design-system/styles/layout","Layout","Layouts are common page composition patterns that offer ways of structuring components and content.","Core","content:design-system:4.styles:layout.md","design-system/4.styles/layout.md",{"_path":318,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":319,"description":320,"layout":13,"label":314,"_type":301,"_id":321,"_source":303,"_file":322,"_extension":305},"/design-system/styles/motion","Motion","Motion gradually changes an element from one state to another. It can also indicate an interaction.","content:design-system:4.styles:motion.md","design-system/4.styles/motion.md",["ShallowRef",324],{},[326,331,573],{"title":327,"_path":328,"icon":329,"layout":330},"Ripple Design System","/","carbon:home","home",{"title":332,"_path":333,"children":334},"Design System","/design-system",[335,351,367,397,425],{"title":336,"_path":337,"children":338},"About","/design-system/about",[339,342,345,348],{"title":340,"_path":341,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":343,"_path":344,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":346,"_path":347,"layout":13},"Support","/design-system/about/getting-support",{"title":349,"_path":350,"layout":13},"Contributing","/design-system/about/contributing",{"title":352,"_path":353,"children":354},"Design","/design-system/design",[355,358,361,364],{"title":356,"_path":357,"layout":13},"Getting started","/design-system/design/getting-started",{"title":359,"_path":360,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":362,"_path":363,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":365,"_path":366,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":368,"_path":369,"children":370},"Develop","/design-system/develop",[371,373,375,378],{"title":356,"_path":372,"layout":13},"/design-system/develop/getting-started",{"title":349,"_path":374,"layout":13},"/design-system/develop/contributing",{"title":376,"_path":377,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":379,"_path":380,"children":381,"layout":13},"Usage","/design-system/develop/usage",[382,385,388,391,394],{"title":383,"_path":384,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":386,"_path":387,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":389,"_path":390,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":392,"_path":393,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":395,"_path":396,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":398,"_path":399,"children":400},"Styles","/design-system/styles",[401,404,407,410,413,416,417,418,419,422],{"title":402,"_path":403,"layout":13},"Colour","/design-system/styles/colour",{"title":405,"_path":406,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":408,"_path":409,"layout":13},"Grid","/design-system/styles/grid",{"title":411,"_path":412,"layout":13},"Icons","/design-system/styles/icons",{"title":414,"_path":415,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":312,"_path":311,"layout":13},{"title":11,"_path":7,"layout":13},{"title":319,"_path":318,"layout":13},{"title":420,"_path":421,"layout":13},"Spacing","/design-system/styles/spacing",{"title":423,"_path":424,"layout":13},"Typography","/design-system/styles/typography",{"title":426,"_path":427,"children":428},"Components","/design-system/components",[429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543,546,549,552,555,558,561,564,567,570],{"title":430,"_path":431,"layout":13},"Accordion","/design-system/components/accordion",{"title":433,"_path":434,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":436,"_path":437,"layout":13},"Alert","/design-system/components/alert",{"title":439,"_path":440,"layout":13},"Block quote","/design-system/components/block-quote",{"title":442,"_path":443,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":445,"_path":446,"layout":13},"Button","/design-system/components/button",{"title":448,"_path":449,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":451,"_path":452,"layout":13},"Callout","/design-system/components/callout",{"title":454,"_path":455,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":457,"_path":458,"layout":13},"Card","/design-system/components/card",{"title":460,"_path":461,"layout":13},"Carousel","/design-system/components/carousel",{"title":463,"_path":464,"layout":13},"Category grid","/design-system/components/category-grid",{"title":466,"_path":467,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":469,"_path":470,"layout":13},"Chip","/design-system/components/chip",{"title":472,"_path":473,"layout":13},"Contact us","/design-system/components/contact-us",{"title":475,"_path":476,"layout":13},"Date input","/design-system/components/date-input",{"title":478,"_path":479,"layout":13},"Detail list","/design-system/components/detail-list",{"title":481,"_path":482,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":484,"_path":485,"layout":13},"File","/design-system/components/file",{"title":487,"_path":488,"layout":13},"Footer","/design-system/components/footer",{"title":490,"_path":491,"layout":13},"Form","/design-system/components/form",{"title":493,"_path":494,"layout":13},"Form alert","/design-system/components/form-alert",{"title":496,"_path":497,"layout":13},"Header","/design-system/components/header",{"title":499,"_path":500,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":502,"_path":503,"layout":13},"Input field","/design-system/components/input-field",{"title":505,"_path":506,"layout":13},"Key dates","/design-system/components/key-dates",{"title":508,"_path":509,"layout":13},"Media","/design-system/components/media",{"title":511,"_path":512,"layout":13},"Media embed","/design-system/components/media-embed",{"title":514,"_path":515,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":517,"_path":518,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":520,"_path":521,"layout":13},"Option button","/design-system/components/option-button",{"title":523,"_path":524,"layout":13},"Page action","/design-system/components/page-action",{"title":526,"_path":527,"layout":13},"Pagination","/design-system/components/pagination",{"title":529,"_path":530,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":532,"_path":533,"layout":13},"Profile","/design-system/components/profile",{"title":535,"_path":536,"layout":13},"Radio button","/design-system/components/radio-button",{"title":538,"_path":539,"layout":13},"Related links","/design-system/components/related-links",{"title":541,"_path":542,"layout":13},"Results listing","/design-system/components/results-listing",{"title":544,"_path":545,"layout":13},"Search bar","/design-system/components/search-bar",{"title":547,"_path":548,"layout":13},"Skip link","/design-system/components/skip-link",{"title":550,"_path":551,"layout":13},"Social share","/design-system/components/social-share",{"title":553,"_path":554,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":556,"_path":557,"layout":13},"Table","/design-system/components/table",{"title":559,"_path":560,"layout":13},"Tabs","/design-system/components/tabs",{"title":562,"_path":563,"layout":13},"Tag","/design-system/components/tag",{"title":565,"_path":566,"layout":13},"Text area","/design-system/components/text-area",{"title":568,"_path":569,"layout":13},"Timeline","/design-system/components/timeline",{"title":571,"_path":572,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":574,"_path":575,"children":576,"layout":13},"Ripple Framework","/framework",[577,578,596,618],{"title":574,"_path":575,"layout":13},{"title":579,"_path":580,"children":581},"Key Concepts","/framework/key-concepts",[582,584,587,590,593],{"title":389,"_path":583,"layout":13},"/framework/key-concepts/nuxt",{"title":585,"_path":586,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":588,"_path":589,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":591,"_path":592,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":594,"_path":595,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":597,"_path":598,"children":599},"Guides","/framework/guides",[600,603,606,609,612,615],{"title":601,"_path":602,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":604,"_path":605,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":607,"_path":608,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":610,"_path":611,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":613,"_path":614,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":616,"_path":617,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":619,"_path":620,"layout":13},"Core modules","/framework/core-modules",["Reactive",622],["Set"],["Reactive",624],{"module-navigation":625},null,true,"/design-system/styles/logo/",1714695157004]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/accordion" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Accordion</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/acknowledgment" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Acknowledgement</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/block-quote" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Block quote</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/breadcrumb" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Breadcrumb</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/call-to-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Call to action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/callout" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Callout</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/campaign-banner" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Campaign banner</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/card" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Card</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/carousel" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Carousel</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/category-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Category grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/checkbox" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Checkbox</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/chip" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Chip</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/contact-us" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contact us</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/date-input" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Date input</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/detail-list" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Detail list</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/dropdown" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dropdown</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/file" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>File</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/footer" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Footer</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/form-alert" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Form alert</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/header" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Header</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/in-page-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>In-page navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/input-field" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Input field</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/key-dates" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Key dates</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-embed" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media embed</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-fullscreen" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media fullscreen</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/media-gallery" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Media gallery</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/option-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Option button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/page-action" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Page action</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/pagination" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Pagination</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/primary-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Primary navigation</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/profile" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Profile</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/radio-button" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Radio button</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/related-links" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Related links</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/results-listing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Results listing</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/search-bar" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Search bar</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/skip-link" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Skip link</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/social-share" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Social share</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/statistics-grid" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Statistics grid</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/table" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Table</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tabs" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tabs</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/tag" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Tag</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/text-area" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Text area</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/timeline" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Timeline</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/components/vertical-navigation" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Vertical navigation</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><!--]--></ul></nav><a href="/framework" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Framework<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Logo</h1><p class="rpl-type-p-large" data-v-3163c6df>The visual representation of vic.gov.au and the Victorian Government.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="vicgovau-logo" data-v-fff5b905><a href="#vicgovau-logo" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->vic.gov.au logo<!--]--></a></h2><p><!--[-->The vic.gov.au logo is the primary logo used in the design system.<!--]--></p><figure class="docs-example" data-v-d653ba7c><div class="docs-example-body" data-v-d653ba7c><img src="/assets/img/Logo-vicgov.png" alt="vic.gov.au logo" data-v-d653ba7c></div><div class="docs-example-footer" data-v-d653ba7c><figcaption data-v-d653ba7c><!--[--><a href="https://www.vic.gov.au/brand-victoria-using-our-logos" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow" data-v-d653ba7c><!--[--><!--[--><!--[-->Download logo<!--]--><!--]--><!----><!--]--></a><!--]--></figcaption></div></figure><h2 class="rpl-type-h3 docs-h3" id="clear-space" data-v-ea525968><a href="#clear-space" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Clear space<!--]--></a></h2><p><!--[-->The clear space for the vic.gov.au logo is 100% of the height of the ‘V’ across all applications.<!--]--></p><p><!--[--><img src="/assets/img/Logo-vicgov-Clear-Space.png" alt="Clear space visual"><!--]--></p><h2 class="rpl-type-h3 docs-h3" id="co-branding" data-v-ea525968><a href="#co-branding" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Co-branding<!--]--></a></h2><p><!--[-->Where the vic.gov.au logo appears next to another logo, it should be:<!--]--></p><ul><!--[--><li><!--[-->centred vertically<!--]--></li><li><!--[-->separated by a minimum distance of 16px<!--]--></li><li><!--[-->separated by a divider line.<!--]--></li><!--]--></ul><p><!--[--><img src="/assets/img/Logo-vicgov-cobrand.png" alt="Co-branded visual"><!--]--></p><h2 class="rpl-type-h3 docs-h3" id="sizing" data-v-ea525968><a href="#sizing" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Sizing<!--]--></a></h2><p><!--[-->The vic.gov.au logo should be 16px in height on all screens.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[--><strong><!--[-->No modification<!--]--></strong><!--]--></p><p><!--[-->Don&#39;t change the logo. This includes changing its colour, adding effects, or altering its shape.<!--]--></p><p><!--[-->This helps to maintain the integrity and consistency of the logo.<!--]--></p><!--]--></blockquote><h2 class="rpl-type-h3 docs-h3" id="accessibility" data-v-ea525968><a href="#accessibility" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Accessibility<!--]--></a></h2><p><!--[-->Always add alternative text to the logo. This is for screen reader users.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="victoria-state-government-logo" data-v-fff5b905><a href="#victoria-state-government-logo" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Victoria State Government logo<!--]--></a></h2><p><!--[-->The Victorian State Government logo is the secondary logo used in the design system. It’s used in the footer.<!--]--></p><figure class="docs-example" data-v-d653ba7c><div class="docs-example-body" data-v-d653ba7c><img src="/assets/img/Logo-StateGov.png" alt="Victoria State Government logo" data-v-d653ba7c></div><div class="docs-example-footer" data-v-d653ba7c><figcaption data-v-d653ba7c><!--[--><a href="https://www.vic.gov.au/brand-victoria-using-our-logos" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow" data-v-d653ba7c><!--[--><!--[--><!--[-->Download logo<!--]--><!--]--><!----><!--]--></a><!--]--></figcaption></div></figure><h2 class="rpl-type-h3 docs-h3" id="clear-space-1" data-v-ea525968><a href="#clear-space-1" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Clear space<!--]--></a></h2><p><!--[-->The clear space for the Victorian State Government logo is at least 20% the height.<!--]--></p><p><!--[--><img src="/assets/img/Logo-StateGovClearSpace.png" alt="Clear space visual"><!--]--></p><h2 class="rpl-type-h3 docs-h3" id="co-branding-1" data-v-ea525968><a href="#co-branding-1" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Co-branding<!--]--></a></h2><p><!--[-->Where the Victorian State Government logo appears next to another logo, it should be:<!--]--></p><ul><!--[--><li><!--[-->centred vertically<!--]--></li><li><!--[-->separated by a distance of at least 50% the height of the Victorian State Government logo.<!--]--></li><!--]--></ul><p><!--[--><img src="/assets/img/Logo-StateGov-cobrand.png" alt="Co-branded visual"><!--]--></p><h2 class="rpl-type-h3 docs-h3" id="sizing-1" data-v-ea525968><a href="#sizing-1" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Sizing<!--]--></a></h2><p><!--[-->The Victorian State Government logo should be 42px in height on all screens.<!--]--></p><p><!--[-->Use the Victorian State Government logo where size permits. But, at times, we need to use a smaller logo depending on the application:<!--]--></p><ul><!--[--><li><!--[-->VIC only logo (favicons only).<!--]--></li><!--]--></ul><p><!--[-->We&#39;ve designed these logos to ensure accessibility and clarity at all sizes.<!--]--></p><hr class="docs-hr" data-v-341b6a73><h2 class="rpl-type-h2 docs-h2" id="co-branding-logo" data-v-fff5b905><a href="#co-branding-logo" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Co-branding logo<!--]--></a></h2><p><!--[-->See <a href="/design-system/components/primary-navigation/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->primary navigation<!--]--><!--]--><!----><!--]--></a> and <a href="/design-system/components/footer/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->footer<!--]--><!--]--><!----><!--]--></a> for size requirements.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/4.styles/logo.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/styles/logo/_payload.json">[{"state":1,"once":621,"_errors":623,"serverRendered":626,"path":627,"prerenderedAt":628},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":306,"$sdd-globals":323,"$sdd-navigation":325},["ShallowRef",4],["ShallowReactive",5],{"/design-system/styles/logo":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":301,"_id":302,"_source":303,"_file":304,"_extension":305},"/design-system/styles/logo","styles",false,"","Logo","The visual representation of vic.gov.au and the Victorian Government.","page",{"type":15,"children":16,"toc":285},"root",[17,26,32,49,56,61,70,76,81,101,109,115,120,143,149,154,158,164,169,181,186,191,198,203,208,220,227,232,237,242,250,255,258,264],{"type":18,"tag":19,"props":20,"children":22},"element","h2",{"id":21},"vicgovau-logo",[23],{"type":24,"value":25},"text","vic.gov.au logo",{"type":18,"tag":27,"props":28,"children":29},"p",{},[30],{"type":24,"value":31},"The vic.gov.au logo is the primary logo used in the design system.",{"type":18,"tag":33,"props":34,"children":36},"docs-image-example",{"alt":25,"src":35},"/assets/img/Logo-vicgov.png",[37],{"type":18,"tag":27,"props":38,"children":39},{},[40],{"type":18,"tag":41,"props":42,"children":46},"a",{"href":43,"rel":44},"https://www.vic.gov.au/brand-victoria-using-our-logos",[45],"nofollow",[47],{"type":24,"value":48},"Download logo",{"type":18,"tag":50,"props":51,"children":53},"h3",{"id":52},"clear-space",[54],{"type":24,"value":55},"Clear space",{"type":18,"tag":27,"props":57,"children":58},{},[59],{"type":24,"value":60},"The clear space for the vic.gov.au logo is 100% of the height of the ‘V’ across all applications.",{"type":18,"tag":27,"props":62,"children":63},{},[64],{"type":18,"tag":65,"props":66,"children":69},"img",{"alt":67,"src":68},"Clear space visual","/assets/img/Logo-vicgov-Clear-Space.png",[],{"type":18,"tag":50,"props":71,"children":73},{"id":72},"co-branding",[74],{"type":24,"value":75},"Co-branding",{"type":18,"tag":27,"props":77,"children":78},{},[79],{"type":24,"value":80},"Where the vic.gov.au logo appears next to another logo, it should be:",{"type":18,"tag":82,"props":83,"children":84},"ul",{},[85,91,96],{"type":18,"tag":86,"props":87,"children":88},"li",{},[89],{"type":24,"value":90},"centred vertically",{"type":18,"tag":86,"props":92,"children":93},{},[94],{"type":24,"value":95},"separated by a minimum distance of 16px",{"type":18,"tag":86,"props":97,"children":98},{},[99],{"type":24,"value":100},"separated by a divider line.",{"type":18,"tag":27,"props":102,"children":103},{},[104],{"type":18,"tag":65,"props":105,"children":108},{"alt":106,"src":107},"Co-branded visual","/assets/img/Logo-vicgov-cobrand.png",[],{"type":18,"tag":50,"props":110,"children":112},{"id":111},"sizing",[113],{"type":24,"value":114},"Sizing",{"type":18,"tag":27,"props":116,"children":117},{},[118],{"type":24,"value":119},"The vic.gov.au logo should be 16px in height on all screens.",{"type":18,"tag":121,"props":122,"children":123},"blockquote",{},[124,133,138],{"type":18,"tag":27,"props":125,"children":126},{},[127],{"type":18,"tag":128,"props":129,"children":130},"strong",{},[131],{"type":24,"value":132},"No modification",{"type":18,"tag":27,"props":134,"children":135},{},[136],{"type":24,"value":137},"Don't change the logo. This includes changing its colour, adding effects, or altering its shape.",{"type":18,"tag":27,"props":139,"children":140},{},[141],{"type":24,"value":142},"This helps to maintain the integrity and consistency of the logo.",{"type":18,"tag":50,"props":144,"children":146},{"id":145},"accessibility",[147],{"type":24,"value":148},"Accessibility",{"type":18,"tag":27,"props":150,"children":151},{},[152],{"type":24,"value":153},"Always add alternative text to the logo. This is for screen reader users.",{"type":18,"tag":155,"props":156,"children":157},"hr",{},[],{"type":18,"tag":19,"props":159,"children":161},{"id":160},"victoria-state-government-logo",[162],{"type":24,"value":163},"Victoria State Government logo",{"type":18,"tag":27,"props":165,"children":166},{},[167],{"type":24,"value":168},"The Victorian State Government logo is the secondary logo used in the design system. It’s used in the footer.",{"type":18,"tag":33,"props":170,"children":172},{"alt":163,"src":171},"/assets/img/Logo-StateGov.png",[173],{"type":18,"tag":27,"props":174,"children":175},{},[176],{"type":18,"tag":41,"props":177,"children":179},{"href":43,"rel":178},[45],[180],{"type":24,"value":48},{"type":18,"tag":50,"props":182,"children":184},{"id":183},"clear-space-1",[185],{"type":24,"value":55},{"type":18,"tag":27,"props":187,"children":188},{},[189],{"type":24,"value":190},"The clear space for the Victorian State Government logo is at least 20% the height.",{"type":18,"tag":27,"props":192,"children":193},{},[194],{"type":18,"tag":65,"props":195,"children":197},{"alt":67,"src":196},"/assets/img/Logo-StateGovClearSpace.png",[],{"type":18,"tag":50,"props":199,"children":201},{"id":200},"co-branding-1",[202],{"type":24,"value":75},{"type":18,"tag":27,"props":204,"children":205},{},[206],{"type":24,"value":207},"Where the Victorian State Government logo appears next to another logo, it should be:",{"type":18,"tag":82,"props":209,"children":210},{},[211,215],{"type":18,"tag":86,"props":212,"children":213},{},[214],{"type":24,"value":90},{"type":18,"tag":86,"props":216,"children":217},{},[218],{"type":24,"value":219},"separated by a distance of at least 50% the height of the Victorian State Government logo.",{"type":18,"tag":27,"props":221,"children":222},{},[223],{"type":18,"tag":65,"props":224,"children":226},{"alt":106,"src":225},"/assets/img/Logo-StateGov-cobrand.png",[],{"type":18,"tag":50,"props":228,"children":230},{"id":229},"sizing-1",[231],{"type":24,"value":114},{"type":18,"tag":27,"props":233,"children":234},{},[235],{"type":24,"value":236},"The Victorian State Government logo should be 42px in height on all screens.",{"type":18,"tag":27,"props":238,"children":239},{},[240],{"type":24,"value":241},"Use the Victorian State Government logo where size permits. But, at times, we need to use a smaller logo depending on the application:",{"type":18,"tag":82,"props":243,"children":244},{},[245],{"type":18,"tag":86,"props":246,"children":247},{},[248],{"type":24,"value":249},"VIC only logo (favicons only).",{"type":18,"tag":27,"props":251,"children":252},{},[253],{"type":24,"value":254},"We've designed these logos to ensure accessibility and clarity at all sizes.",{"type":18,"tag":155,"props":256,"children":257},{},[],{"type":18,"tag":19,"props":259,"children":261},{"id":260},"co-branding-logo",[262],{"type":24,"value":263},"Co-branding logo",{"type":18,"tag":27,"props":265,"children":266},{},[267,269,275,277,283],{"type":24,"value":268},"See ",{"type":18,"tag":41,"props":270,"children":272},{"href":271},"/design-system/components/primary-navigation/",[273],{"type":24,"value":274},"primary navigation",{"type":24,"value":276}," and ",{"type":18,"tag":41,"props":278,"children":280},{"href":279},"/design-system/components/footer/",[281],{"type":24,"value":282},"footer",{"type":24,"value":284}," for size requirements.",{"title":10,"searchDepth":286,"depth":286,"links":287},2,[288,295,300],{"id":21,"depth":286,"text":25,"children":289},[290,292,293,294],{"id":52,"depth":291,"text":55},3,{"id":72,"depth":291,"text":75},{"id":111,"depth":291,"text":114},{"id":145,"depth":291,"text":148},{"id":160,"depth":286,"text":163,"children":296},[297,298,299],{"id":183,"depth":291,"text":55},{"id":200,"depth":291,"text":75},{"id":229,"depth":291,"text":114},{"id":260,"depth":286,"text":263},"markdown","content:design-system:4.styles:logo.md","content","design-system/4.styles/logo.md","md",["ShallowRef",307],["ShallowReactive",308],{"/design-system/styles/logo":309},[310,317],{"_path":311,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":312,"description":313,"layout":13,"label":314,"_type":301,"_id":315,"_source":303,"_file":316,"_extension":305},"/design-system/styles/layout","Layout","Layouts are common page composition patterns that offer ways of structuring components and content.","Core","content:design-system:4.styles:layout.md","design-system/4.styles/layout.md",{"_path":318,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":319,"description":320,"layout":13,"label":314,"_type":301,"_id":321,"_source":303,"_file":322,"_extension":305},"/design-system/styles/motion","Motion","Motion gradually changes an element from one state to another. It can also indicate an interaction.","content:design-system:4.styles:motion.md","design-system/4.styles/motion.md",["ShallowRef",324],{},[326,331,573],{"title":327,"_path":328,"icon":329,"layout":330},"Ripple Design System","/","carbon:home","home",{"title":332,"_path":333,"children":334},"Design System","/design-system",[335,351,367,397,425],{"title":336,"_path":337,"children":338},"About","/design-system/about",[339,342,345,348],{"title":340,"_path":341,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":343,"_path":344,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":346,"_path":347,"layout":13},"Support","/design-system/about/getting-support",{"title":349,"_path":350,"layout":13},"Contributing","/design-system/about/contributing",{"title":352,"_path":353,"children":354},"Design","/design-system/design",[355,358,361,364],{"title":356,"_path":357,"layout":13},"Getting started","/design-system/design/getting-started",{"title":359,"_path":360,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":362,"_path":363,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":365,"_path":366,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":368,"_path":369,"children":370},"Develop","/design-system/develop",[371,373,375,378],{"title":356,"_path":372,"layout":13},"/design-system/develop/getting-started",{"title":349,"_path":374,"layout":13},"/design-system/develop/contributing",{"title":376,"_path":377,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":379,"_path":380,"children":381,"layout":13},"Usage","/design-system/develop/usage",[382,385,388,391,394],{"title":383,"_path":384,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":386,"_path":387,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":389,"_path":390,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":392,"_path":393,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":395,"_path":396,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":398,"_path":399,"children":400},"Styles","/design-system/styles",[401,404,407,410,413,416,417,418,419,422],{"title":402,"_path":403,"layout":13},"Colour","/design-system/styles/colour",{"title":405,"_path":406,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":408,"_path":409,"layout":13},"Grid","/design-system/styles/grid",{"title":411,"_path":412,"layout":13},"Icons","/design-system/styles/icons",{"title":414,"_path":415,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":312,"_path":311,"layout":13},{"title":11,"_path":7,"layout":13},{"title":319,"_path":318,"layout":13},{"title":420,"_path":421,"layout":13},"Spacing","/design-system/styles/spacing",{"title":423,"_path":424,"layout":13},"Typography","/design-system/styles/typography",{"title":426,"_path":427,"children":428},"Components","/design-system/components",[429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543,546,549,552,555,558,561,564,567,570],{"title":430,"_path":431,"layout":13},"Accordion","/design-system/components/accordion",{"title":433,"_path":434,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":436,"_path":437,"layout":13},"Alert","/design-system/components/alert",{"title":439,"_path":440,"layout":13},"Block quote","/design-system/components/block-quote",{"title":442,"_path":443,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":445,"_path":446,"layout":13},"Button","/design-system/components/button",{"title":448,"_path":449,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":451,"_path":452,"layout":13},"Callout","/design-system/components/callout",{"title":454,"_path":455,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":457,"_path":458,"layout":13},"Card","/design-system/components/card",{"title":460,"_path":461,"layout":13},"Carousel","/design-system/components/carousel",{"title":463,"_path":464,"layout":13},"Category grid","/design-system/components/category-grid",{"title":466,"_path":467,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":469,"_path":470,"layout":13},"Chip","/design-system/components/chip",{"title":472,"_path":473,"layout":13},"Contact us","/design-system/components/contact-us",{"title":475,"_path":476,"layout":13},"Date input","/design-system/components/date-input",{"title":478,"_path":479,"layout":13},"Detail list","/design-system/components/detail-list",{"title":481,"_path":482,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":484,"_path":485,"layout":13},"File","/design-system/components/file",{"title":487,"_path":488,"layout":13},"Footer","/design-system/components/footer",{"title":490,"_path":491,"layout":13},"Form","/design-system/components/form",{"title":493,"_path":494,"layout":13},"Form alert","/design-system/components/form-alert",{"title":496,"_path":497,"layout":13},"Header","/design-system/components/header",{"title":499,"_path":500,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":502,"_path":503,"layout":13},"Input field","/design-system/components/input-field",{"title":505,"_path":506,"layout":13},"Key dates","/design-system/components/key-dates",{"title":508,"_path":509,"layout":13},"Media","/design-system/components/media",{"title":511,"_path":512,"layout":13},"Media embed","/design-system/components/media-embed",{"title":514,"_path":515,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":517,"_path":518,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":520,"_path":521,"layout":13},"Option button","/design-system/components/option-button",{"title":523,"_path":524,"layout":13},"Page action","/design-system/components/page-action",{"title":526,"_path":527,"layout":13},"Pagination","/design-system/components/pagination",{"title":529,"_path":530,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":532,"_path":533,"layout":13},"Profile","/design-system/components/profile",{"title":535,"_path":536,"layout":13},"Radio button","/design-system/components/radio-button",{"title":538,"_path":539,"layout":13},"Related links","/design-system/components/related-links",{"title":541,"_path":542,"layout":13},"Results listing","/design-system/components/results-listing",{"title":544,"_path":545,"layout":13},"Search bar","/design-system/components/search-bar",{"title":547,"_path":548,"layout":13},"Skip link","/design-system/components/skip-link",{"title":550,"_path":551,"layout":13},"Social share","/design-system/components/social-share",{"title":553,"_path":554,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":556,"_path":557,"layout":13},"Table","/design-system/components/table",{"title":559,"_path":560,"layout":13},"Tabs","/design-system/components/tabs",{"title":562,"_path":563,"layout":13},"Tag","/design-system/components/tag",{"title":565,"_path":566,"layout":13},"Text area","/design-system/components/text-area",{"title":568,"_path":569,"layout":13},"Timeline","/design-system/components/timeline",{"title":571,"_path":572,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":574,"_path":575,"children":576,"layout":13},"Ripple Framework","/framework",[577,578,596,618],{"title":574,"_path":575,"layout":13},{"title":579,"_path":580,"children":581},"Key Concepts","/framework/key-concepts",[582,584,587,590,593],{"title":389,"_path":583,"layout":13},"/framework/key-concepts/nuxt",{"title":585,"_path":586,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":588,"_path":589,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":591,"_path":592,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":594,"_path":595,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":597,"_path":598,"children":599},"Guides","/framework/guides",[600,603,606,609,612,615],{"title":601,"_path":602,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":604,"_path":605,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":607,"_path":608,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":610,"_path":611,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":613,"_path":614,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":616,"_path":617,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":619,"_path":620,"layout":13},"Core modules","/framework/core-modules",["Reactive",622],["Set"],["Reactive",624],{"module-navigation":625},null,true,"/design-system/styles/logo/",1714695655038]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/styles/motion/_payload.json b/design-system/styles/motion/_payload.json
index c4b8f8d415..852b3e84ed 100644
--- a/design-system/styles/motion/_payload.json
+++ b/design-system/styles/motion/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":70,"items":71},"/design-system/styles","Styles",true,[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":70,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695152558]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":70,"items":71},"/design-system/styles","Styles",true,[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":70,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695650775]
\ No newline at end of file
diff --git a/design-system/styles/motion/index.html b/design-system/styles/motion/index.html
index 43129a87b3..b532916ad7 100644
--- a/design-system/styles/motion/index.html
+++ b/design-system/styles/motion/index.html
@@ -23,64 +23,64 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTable.Nr-94ppo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseThead.x0xD32yi.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTr.NjbdsN4h.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTh.15m2hyNr.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTbody.pO4HZmMb.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTd.KWvY0UVz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseEm.D-92YCoe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTable.d8cdIzif.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseThead.alimbSyj.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTr.rCUlpnCA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTh.GnFrmIgb.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTbody.FPzd5AuU.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTd.ydAecYY-.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseEm.jWeQl8xp.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -153,8 +153,8 @@
 
 
 
-<div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Time<!--]--></th><th><!--[-->Value<!--]--></th><th><!--[-->CSS Variable<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->60 milliseconds<!--]--></td><td><!--[-->60ms<!--]--></td><td><!--[-->rpl-motion-speed-1<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->80 milliseconds<!--]--></td><td><!--[-->80ms<!--]--></td><td><!--[-->rpl-motion-speed-2<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->120 milliseconds<!--]--></td><td><!--[-->120ms<!--]--></td><td><!--[-->rpl-motion-speed-3<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->160 milliseconds<!--]--></td><td><!--[-->160ms<!--]--></td><td><!--[-->rpl-motion-speed-4<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->200 milliseconds<!--]--></td><td><!--[-->200ms<!--]--></td><td><!--[-->rpl-motion-speed-5<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->240 milliseconds<!--]--></td><td><!--[-->240ms<!--]--></td><td><!--[-->rpl-motion-speed-6<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->300 milliseconds<!--]--></td><td><!--[-->300ms<!--]--></td><td><!--[-->rpl-motion-speed-7<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->360 milliseconds<!--]--></td><td><!--[-->360ms<!--]--></td><td><!--[-->rpl-motion-speed-8<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->420 milliseconds<!--]--></td><td><!--[-->420ms<!--]--></td><td><!--[-->rpl-motion-speed-9<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->500 milliseconds<!--]--></td><td><!--[-->500ms<!--]--></td><td><!--[-->rpl-motion-speed-10<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><h2 class="rpl-type-h2 docs-h2" id="easing" data-v-fff5b905><a href="#easing" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Easing<!--]--></a></h2><p><!--[-->Easing is the rate the motion accelerates or decelerates. It can range from linear to highly exaggerated. The chosen easing should match the desired tone and feeling of the motion.<!--]--></p><p><!--[-->Currently, Ripple uses default easing values. We use the default names for this reason to reduce clutter in the code.<!--]--></p><p><!--[-->Definitions:<!--]--></p><ul><!--[--><li><!--[-->Ease-in: slow at the beginning, fast/abrupt at the end.<!--]--></li><li><!--[-->Ease-out: fast/abrupt at the beginning, slow at the end.<!--]--></li><!--]--></ul><p><!--[-->When to use:<!--]--></p><ul><!--[--><li><!--[-->Ease-in: when things are moving <em><!--[-->out.<!--]--></em><!--]--></li><li><!--[-->Ease-out: when things are moving <em><!--[-->in.<!--]--></em><!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/4.styles/motion.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/styles/motion/_payload.json">[{"state":1,"once":707,"_errors":709,"serverRendered":712,"path":7,"prerenderedAt":713},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":394,"$sdd-globals":410,"$sdd-navigation":412},["ShallowRef",4],["ShallowReactive",5],{"/design-system/styles/motion":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":389,"_id":390,"_source":391,"_file":392,"_extension":393},"/design-system/styles/motion","styles",false,"","Motion","Motion gradually changes an element from one state to another. It can also indicate an interaction.","page","Core",{"type":16,"children":17,"toc":383},"root",[18,26,33,38,63,69,74,87,92,105,107,320,326,331,336,341,354,359],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","Use motion with a purpose in mind. This could be to draw attention to important elements or to provide feedback to users.",{"type":19,"tag":27,"props":28,"children":30},"h2",{"id":29},"usage",[31],{"type":24,"value":32},"Usage",{"type":19,"tag":20,"props":34,"children":35},{},[36],{"type":24,"value":37},"Each animation needs at least these four parts:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48,53,58],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":24,"value":47},"Trigger — what causes the animation to happen (gestures, time, etc.).",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":24,"value":52},"Duration — how long should the transition take.",{"type":19,"tag":43,"props":54,"children":55},{},[56],{"type":24,"value":57},"Easing — how an element transitions.",{"type":19,"tag":43,"props":59,"children":60},{},[61],{"type":24,"value":62},"Property — the characteristic of the element transitioning (position, opacity, scale, etc.).",{"type":19,"tag":27,"props":64,"children":66},{"id":65},"duration-speed",[67],{"type":24,"value":68},"Duration (speed)",{"type":19,"tag":20,"props":70,"children":71},{},[72],{"type":24,"value":73},"The duration of motion should be consistent throughout. Use:",{"type":19,"tag":39,"props":75,"children":76},{},[77,82],{"type":19,"tag":43,"props":78,"children":79},{},[80],{"type":24,"value":81},"shorter durations for more subtle motions",{"type":19,"tag":43,"props":83,"children":84},{},[85],{"type":24,"value":86},"longer durations for more significant or complex motions.",{"type":19,"tag":20,"props":88,"children":89},{},[90],{"type":24,"value":91},"A general rule of thumb is:",{"type":19,"tag":39,"props":93,"children":94},{},[95,100],{"type":19,"tag":43,"props":96,"children":97},{},[98],{"type":24,"value":99},"0.06-0.2s for simple interface movements",{"type":19,"tag":43,"props":101,"children":102},{},[103],{"type":24,"value":104},"up to 0.5s for more complex or larger movements.",{"type":24,"value":106},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":108,"props":109,"children":110},"table",{},[111,135],{"type":19,"tag":112,"props":113,"children":114},"thead",{},[115],{"type":19,"tag":116,"props":117,"children":118},"tr",{},[119,125,130],{"type":19,"tag":120,"props":121,"children":122},"th",{},[123],{"type":24,"value":124},"Time",{"type":19,"tag":120,"props":126,"children":127},{},[128],{"type":24,"value":129},"Value",{"type":19,"tag":120,"props":131,"children":132},{},[133],{"type":24,"value":134},"CSS Variable",{"type":19,"tag":136,"props":137,"children":138},"tbody",{},[139,158,176,194,212,230,248,266,284,302],{"type":19,"tag":116,"props":140,"children":141},{},[142,148,153],{"type":19,"tag":143,"props":144,"children":145},"td",{},[146],{"type":24,"value":147},"60 milliseconds",{"type":19,"tag":143,"props":149,"children":150},{},[151],{"type":24,"value":152},"60ms",{"type":19,"tag":143,"props":154,"children":155},{},[156],{"type":24,"value":157},"rpl-motion-speed-1",{"type":19,"tag":116,"props":159,"children":160},{},[161,166,171],{"type":19,"tag":143,"props":162,"children":163},{},[164],{"type":24,"value":165},"80 milliseconds",{"type":19,"tag":143,"props":167,"children":168},{},[169],{"type":24,"value":170},"80ms",{"type":19,"tag":143,"props":172,"children":173},{},[174],{"type":24,"value":175},"rpl-motion-speed-2",{"type":19,"tag":116,"props":177,"children":178},{},[179,184,189],{"type":19,"tag":143,"props":180,"children":181},{},[182],{"type":24,"value":183},"120 milliseconds",{"type":19,"tag":143,"props":185,"children":186},{},[187],{"type":24,"value":188},"120ms",{"type":19,"tag":143,"props":190,"children":191},{},[192],{"type":24,"value":193},"rpl-motion-speed-3",{"type":19,"tag":116,"props":195,"children":196},{},[197,202,207],{"type":19,"tag":143,"props":198,"children":199},{},[200],{"type":24,"value":201},"160 milliseconds",{"type":19,"tag":143,"props":203,"children":204},{},[205],{"type":24,"value":206},"160ms",{"type":19,"tag":143,"props":208,"children":209},{},[210],{"type":24,"value":211},"rpl-motion-speed-4",{"type":19,"tag":116,"props":213,"children":214},{},[215,220,225],{"type":19,"tag":143,"props":216,"children":217},{},[218],{"type":24,"value":219},"200 milliseconds",{"type":19,"tag":143,"props":221,"children":222},{},[223],{"type":24,"value":224},"200ms",{"type":19,"tag":143,"props":226,"children":227},{},[228],{"type":24,"value":229},"rpl-motion-speed-5",{"type":19,"tag":116,"props":231,"children":232},{},[233,238,243],{"type":19,"tag":143,"props":234,"children":235},{},[236],{"type":24,"value":237},"240 milliseconds",{"type":19,"tag":143,"props":239,"children":240},{},[241],{"type":24,"value":242},"240ms",{"type":19,"tag":143,"props":244,"children":245},{},[246],{"type":24,"value":247},"rpl-motion-speed-6",{"type":19,"tag":116,"props":249,"children":250},{},[251,256,261],{"type":19,"tag":143,"props":252,"children":253},{},[254],{"type":24,"value":255},"300 milliseconds",{"type":19,"tag":143,"props":257,"children":258},{},[259],{"type":24,"value":260},"300ms",{"type":19,"tag":143,"props":262,"children":263},{},[264],{"type":24,"value":265},"rpl-motion-speed-7",{"type":19,"tag":116,"props":267,"children":268},{},[269,274,279],{"type":19,"tag":143,"props":270,"children":271},{},[272],{"type":24,"value":273},"360 milliseconds",{"type":19,"tag":143,"props":275,"children":276},{},[277],{"type":24,"value":278},"360ms",{"type":19,"tag":143,"props":280,"children":281},{},[282],{"type":24,"value":283},"rpl-motion-speed-8",{"type":19,"tag":116,"props":285,"children":286},{},[287,292,297],{"type":19,"tag":143,"props":288,"children":289},{},[290],{"type":24,"value":291},"420 milliseconds",{"type":19,"tag":143,"props":293,"children":294},{},[295],{"type":24,"value":296},"420ms",{"type":19,"tag":143,"props":298,"children":299},{},[300],{"type":24,"value":301},"rpl-motion-speed-9",{"type":19,"tag":116,"props":303,"children":304},{},[305,310,315],{"type":19,"tag":143,"props":306,"children":307},{},[308],{"type":24,"value":309},"500 milliseconds",{"type":19,"tag":143,"props":311,"children":312},{},[313],{"type":24,"value":314},"500ms",{"type":19,"tag":143,"props":316,"children":317},{},[318],{"type":24,"value":319},"rpl-motion-speed-10",{"type":19,"tag":27,"props":321,"children":323},{"id":322},"easing",[324],{"type":24,"value":325},"Easing",{"type":19,"tag":20,"props":327,"children":328},{},[329],{"type":24,"value":330},"Easing is the rate the motion accelerates or decelerates. It can range from linear to highly exaggerated. The chosen easing should match the desired tone and feeling of the motion.",{"type":19,"tag":20,"props":332,"children":333},{},[334],{"type":24,"value":335},"Currently, Ripple uses default easing values. We use the default names for this reason to reduce clutter in the code.",{"type":19,"tag":20,"props":337,"children":338},{},[339],{"type":24,"value":340},"Definitions:",{"type":19,"tag":39,"props":342,"children":343},{},[344,349],{"type":19,"tag":43,"props":345,"children":346},{},[347],{"type":24,"value":348},"Ease-in: slow at the beginning, fast/abrupt at the end.",{"type":19,"tag":43,"props":350,"children":351},{},[352],{"type":24,"value":353},"Ease-out: fast/abrupt at the beginning, slow at the end.",{"type":19,"tag":20,"props":355,"children":356},{},[357],{"type":24,"value":358},"When to use:",{"type":19,"tag":39,"props":360,"children":361},{},[362,373],{"type":19,"tag":43,"props":363,"children":364},{},[365,367],{"type":24,"value":366},"Ease-in: when things are moving ",{"type":19,"tag":368,"props":369,"children":370},"em",{},[371],{"type":24,"value":372},"out.",{"type":19,"tag":43,"props":374,"children":375},{},[376,378],{"type":24,"value":377},"Ease-out: when things are moving ",{"type":19,"tag":368,"props":379,"children":380},{},[381],{"type":24,"value":382},"in.",{"title":10,"searchDepth":384,"depth":384,"links":385},2,[386,387,388],{"id":29,"depth":384,"text":32},{"id":65,"depth":384,"text":68},{"id":322,"depth":384,"text":325},"markdown","content:design-system:4.styles:motion.md","content","design-system/4.styles/motion.md","md",["ShallowRef",395],["ShallowReactive",396],{"/design-system/styles/motion":397},[398,404],{"_path":399,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":400,"description":401,"layout":13,"_type":389,"_id":402,"_source":391,"_file":403,"_extension":393},"/design-system/styles/logo","Logo","The visual representation of vic.gov.au and the Victorian Government.","content:design-system:4.styles:logo.md","design-system/4.styles/logo.md",{"_path":405,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":406,"description":407,"layout":13,"label":14,"_type":389,"_id":408,"_source":391,"_file":409,"_extension":393},"/design-system/styles/spacing","Spacing","In components and layout, a defined set of spacing units provides good alignment and consistent spacing relationships.","content:design-system:4.styles:spacing.md","design-system/4.styles/spacing.md",["ShallowRef",411],{},[413,418,659],{"title":414,"_path":415,"icon":416,"layout":417},"Ripple Design System","/","carbon:home","home",{"title":419,"_path":420,"children":421},"Design System","/design-system",[422,438,454,483,511],{"title":423,"_path":424,"children":425},"About","/design-system/about",[426,429,432,435],{"title":427,"_path":428,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":430,"_path":431,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":433,"_path":434,"layout":13},"Support","/design-system/about/getting-support",{"title":436,"_path":437,"layout":13},"Contributing","/design-system/about/contributing",{"title":439,"_path":440,"children":441},"Design","/design-system/design",[442,445,448,451],{"title":443,"_path":444,"layout":13},"Getting started","/design-system/design/getting-started",{"title":446,"_path":447,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":449,"_path":450,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":452,"_path":453,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":455,"_path":456,"children":457},"Develop","/design-system/develop",[458,460,462,465],{"title":443,"_path":459,"layout":13},"/design-system/develop/getting-started",{"title":436,"_path":461,"layout":13},"/design-system/develop/contributing",{"title":463,"_path":464,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":32,"_path":466,"children":467,"layout":13},"/design-system/develop/usage",[468,471,474,477,480],{"title":469,"_path":470,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":472,"_path":473,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":475,"_path":476,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":478,"_path":479,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":481,"_path":482,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":484,"_path":485,"children":486},"Styles","/design-system/styles",[487,490,493,496,499,502,505,506,507,508],{"title":488,"_path":489,"layout":13},"Colour","/design-system/styles/colour",{"title":491,"_path":492,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":494,"_path":495,"layout":13},"Grid","/design-system/styles/grid",{"title":497,"_path":498,"layout":13},"Icons","/design-system/styles/icons",{"title":500,"_path":501,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":503,"_path":504,"layout":13},"Layout","/design-system/styles/layout",{"title":400,"_path":399,"layout":13},{"title":11,"_path":7,"layout":13},{"title":406,"_path":405,"layout":13},{"title":509,"_path":510,"layout":13},"Typography","/design-system/styles/typography",{"title":512,"_path":513,"children":514},"Components","/design-system/components",[515,518,521,524,527,530,533,536,539,542,545,548,551,554,557,560,563,566,569,572,575,578,581,584,587,590,593,596,599,602,605,608,611,614,617,620,623,626,629,632,635,638,641,644,647,650,653,656],{"title":516,"_path":517,"layout":13},"Accordion","/design-system/components/accordion",{"title":519,"_path":520,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":522,"_path":523,"layout":13},"Alert","/design-system/components/alert",{"title":525,"_path":526,"layout":13},"Block quote","/design-system/components/block-quote",{"title":528,"_path":529,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":531,"_path":532,"layout":13},"Button","/design-system/components/button",{"title":534,"_path":535,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":537,"_path":538,"layout":13},"Callout","/design-system/components/callout",{"title":540,"_path":541,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":543,"_path":544,"layout":13},"Card","/design-system/components/card",{"title":546,"_path":547,"layout":13},"Carousel","/design-system/components/carousel",{"title":549,"_path":550,"layout":13},"Category grid","/design-system/components/category-grid",{"title":552,"_path":553,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":555,"_path":556,"layout":13},"Chip","/design-system/components/chip",{"title":558,"_path":559,"layout":13},"Contact us","/design-system/components/contact-us",{"title":561,"_path":562,"layout":13},"Date input","/design-system/components/date-input",{"title":564,"_path":565,"layout":13},"Detail list","/design-system/components/detail-list",{"title":567,"_path":568,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":570,"_path":571,"layout":13},"File","/design-system/components/file",{"title":573,"_path":574,"layout":13},"Footer","/design-system/components/footer",{"title":576,"_path":577,"layout":13},"Form","/design-system/components/form",{"title":579,"_path":580,"layout":13},"Form alert","/design-system/components/form-alert",{"title":582,"_path":583,"layout":13},"Header","/design-system/components/header",{"title":585,"_path":586,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":588,"_path":589,"layout":13},"Input field","/design-system/components/input-field",{"title":591,"_path":592,"layout":13},"Key dates","/design-system/components/key-dates",{"title":594,"_path":595,"layout":13},"Media","/design-system/components/media",{"title":597,"_path":598,"layout":13},"Media embed","/design-system/components/media-embed",{"title":600,"_path":601,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":603,"_path":604,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":606,"_path":607,"layout":13},"Option button","/design-system/components/option-button",{"title":609,"_path":610,"layout":13},"Page action","/design-system/components/page-action",{"title":612,"_path":613,"layout":13},"Pagination","/design-system/components/pagination",{"title":615,"_path":616,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":618,"_path":619,"layout":13},"Profile","/design-system/components/profile",{"title":621,"_path":622,"layout":13},"Radio button","/design-system/components/radio-button",{"title":624,"_path":625,"layout":13},"Related links","/design-system/components/related-links",{"title":627,"_path":628,"layout":13},"Results listing","/design-system/components/results-listing",{"title":630,"_path":631,"layout":13},"Search bar","/design-system/components/search-bar",{"title":633,"_path":634,"layout":13},"Skip link","/design-system/components/skip-link",{"title":636,"_path":637,"layout":13},"Social share","/design-system/components/social-share",{"title":639,"_path":640,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":642,"_path":643,"layout":13},"Table","/design-system/components/table",{"title":645,"_path":646,"layout":13},"Tabs","/design-system/components/tabs",{"title":648,"_path":649,"layout":13},"Tag","/design-system/components/tag",{"title":651,"_path":652,"layout":13},"Text area","/design-system/components/text-area",{"title":654,"_path":655,"layout":13},"Timeline","/design-system/components/timeline",{"title":657,"_path":658,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":660,"_path":661,"children":662,"layout":13},"Ripple Framework","/framework",[663,664,682,704],{"title":660,"_path":661,"layout":13},{"title":665,"_path":666,"children":667},"Key Concepts","/framework/key-concepts",[668,670,673,676,679],{"title":475,"_path":669,"layout":13},"/framework/key-concepts/nuxt",{"title":671,"_path":672,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":674,"_path":675,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":677,"_path":678,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":680,"_path":681,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":683,"_path":684,"children":685},"Guides","/framework/guides",[686,689,692,695,698,701],{"title":687,"_path":688,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":690,"_path":691,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":693,"_path":694,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":696,"_path":697,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":699,"_path":700,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":702,"_path":703,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":705,"_path":706,"layout":13},"Core modules","/framework/core-modules",["Reactive",708],["Set"],["Reactive",710],{"module-navigation":711},null,true,1714695152558]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+<div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Time<!--]--></th><th><!--[-->Value<!--]--></th><th><!--[-->CSS Variable<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->60 milliseconds<!--]--></td><td><!--[-->60ms<!--]--></td><td><!--[-->rpl-motion-speed-1<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->80 milliseconds<!--]--></td><td><!--[-->80ms<!--]--></td><td><!--[-->rpl-motion-speed-2<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->120 milliseconds<!--]--></td><td><!--[-->120ms<!--]--></td><td><!--[-->rpl-motion-speed-3<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->160 milliseconds<!--]--></td><td><!--[-->160ms<!--]--></td><td><!--[-->rpl-motion-speed-4<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->200 milliseconds<!--]--></td><td><!--[-->200ms<!--]--></td><td><!--[-->rpl-motion-speed-5<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->240 milliseconds<!--]--></td><td><!--[-->240ms<!--]--></td><td><!--[-->rpl-motion-speed-6<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->300 milliseconds<!--]--></td><td><!--[-->300ms<!--]--></td><td><!--[-->rpl-motion-speed-7<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->360 milliseconds<!--]--></td><td><!--[-->360ms<!--]--></td><td><!--[-->rpl-motion-speed-8<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->420 milliseconds<!--]--></td><td><!--[-->420ms<!--]--></td><td><!--[-->rpl-motion-speed-9<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->500 milliseconds<!--]--></td><td><!--[-->500ms<!--]--></td><td><!--[-->rpl-motion-speed-10<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><h2 class="rpl-type-h2 docs-h2" id="easing" data-v-fff5b905><a href="#easing" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Easing<!--]--></a></h2><p><!--[-->Easing is the rate the motion accelerates or decelerates. It can range from linear to highly exaggerated. The chosen easing should match the desired tone and feeling of the motion.<!--]--></p><p><!--[-->Currently, Ripple uses default easing values. We use the default names for this reason to reduce clutter in the code.<!--]--></p><p><!--[-->Definitions:<!--]--></p><ul><!--[--><li><!--[-->Ease-in: slow at the beginning, fast/abrupt at the end.<!--]--></li><li><!--[-->Ease-out: fast/abrupt at the beginning, slow at the end.<!--]--></li><!--]--></ul><p><!--[-->When to use:<!--]--></p><ul><!--[--><li><!--[-->Ease-in: when things are moving <em><!--[-->out.<!--]--></em><!--]--></li><li><!--[-->Ease-out: when things are moving <em><!--[-->in.<!--]--></em><!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/4.styles/motion.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/styles/motion/_payload.json">[{"state":1,"once":707,"_errors":709,"serverRendered":712,"path":7,"prerenderedAt":713},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":394,"$sdd-globals":410,"$sdd-navigation":412},["ShallowRef",4],["ShallowReactive",5],{"/design-system/styles/motion":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":389,"_id":390,"_source":391,"_file":392,"_extension":393},"/design-system/styles/motion","styles",false,"","Motion","Motion gradually changes an element from one state to another. It can also indicate an interaction.","page","Core",{"type":16,"children":17,"toc":383},"root",[18,26,33,38,63,69,74,87,92,105,107,320,326,331,336,341,354,359],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","Use motion with a purpose in mind. This could be to draw attention to important elements or to provide feedback to users.",{"type":19,"tag":27,"props":28,"children":30},"h2",{"id":29},"usage",[31],{"type":24,"value":32},"Usage",{"type":19,"tag":20,"props":34,"children":35},{},[36],{"type":24,"value":37},"Each animation needs at least these four parts:",{"type":19,"tag":39,"props":40,"children":41},"ul",{},[42,48,53,58],{"type":19,"tag":43,"props":44,"children":45},"li",{},[46],{"type":24,"value":47},"Trigger — what causes the animation to happen (gestures, time, etc.).",{"type":19,"tag":43,"props":49,"children":50},{},[51],{"type":24,"value":52},"Duration — how long should the transition take.",{"type":19,"tag":43,"props":54,"children":55},{},[56],{"type":24,"value":57},"Easing — how an element transitions.",{"type":19,"tag":43,"props":59,"children":60},{},[61],{"type":24,"value":62},"Property — the characteristic of the element transitioning (position, opacity, scale, etc.).",{"type":19,"tag":27,"props":64,"children":66},{"id":65},"duration-speed",[67],{"type":24,"value":68},"Duration (speed)",{"type":19,"tag":20,"props":70,"children":71},{},[72],{"type":24,"value":73},"The duration of motion should be consistent throughout. Use:",{"type":19,"tag":39,"props":75,"children":76},{},[77,82],{"type":19,"tag":43,"props":78,"children":79},{},[80],{"type":24,"value":81},"shorter durations for more subtle motions",{"type":19,"tag":43,"props":83,"children":84},{},[85],{"type":24,"value":86},"longer durations for more significant or complex motions.",{"type":19,"tag":20,"props":88,"children":89},{},[90],{"type":24,"value":91},"A general rule of thumb is:",{"type":19,"tag":39,"props":93,"children":94},{},[95,100],{"type":19,"tag":43,"props":96,"children":97},{},[98],{"type":24,"value":99},"0.06-0.2s for simple interface movements",{"type":19,"tag":43,"props":101,"children":102},{},[103],{"type":24,"value":104},"up to 0.5s for more complex or larger movements.",{"type":24,"value":106},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":108,"props":109,"children":110},"table",{},[111,135],{"type":19,"tag":112,"props":113,"children":114},"thead",{},[115],{"type":19,"tag":116,"props":117,"children":118},"tr",{},[119,125,130],{"type":19,"tag":120,"props":121,"children":122},"th",{},[123],{"type":24,"value":124},"Time",{"type":19,"tag":120,"props":126,"children":127},{},[128],{"type":24,"value":129},"Value",{"type":19,"tag":120,"props":131,"children":132},{},[133],{"type":24,"value":134},"CSS Variable",{"type":19,"tag":136,"props":137,"children":138},"tbody",{},[139,158,176,194,212,230,248,266,284,302],{"type":19,"tag":116,"props":140,"children":141},{},[142,148,153],{"type":19,"tag":143,"props":144,"children":145},"td",{},[146],{"type":24,"value":147},"60 milliseconds",{"type":19,"tag":143,"props":149,"children":150},{},[151],{"type":24,"value":152},"60ms",{"type":19,"tag":143,"props":154,"children":155},{},[156],{"type":24,"value":157},"rpl-motion-speed-1",{"type":19,"tag":116,"props":159,"children":160},{},[161,166,171],{"type":19,"tag":143,"props":162,"children":163},{},[164],{"type":24,"value":165},"80 milliseconds",{"type":19,"tag":143,"props":167,"children":168},{},[169],{"type":24,"value":170},"80ms",{"type":19,"tag":143,"props":172,"children":173},{},[174],{"type":24,"value":175},"rpl-motion-speed-2",{"type":19,"tag":116,"props":177,"children":178},{},[179,184,189],{"type":19,"tag":143,"props":180,"children":181},{},[182],{"type":24,"value":183},"120 milliseconds",{"type":19,"tag":143,"props":185,"children":186},{},[187],{"type":24,"value":188},"120ms",{"type":19,"tag":143,"props":190,"children":191},{},[192],{"type":24,"value":193},"rpl-motion-speed-3",{"type":19,"tag":116,"props":195,"children":196},{},[197,202,207],{"type":19,"tag":143,"props":198,"children":199},{},[200],{"type":24,"value":201},"160 milliseconds",{"type":19,"tag":143,"props":203,"children":204},{},[205],{"type":24,"value":206},"160ms",{"type":19,"tag":143,"props":208,"children":209},{},[210],{"type":24,"value":211},"rpl-motion-speed-4",{"type":19,"tag":116,"props":213,"children":214},{},[215,220,225],{"type":19,"tag":143,"props":216,"children":217},{},[218],{"type":24,"value":219},"200 milliseconds",{"type":19,"tag":143,"props":221,"children":222},{},[223],{"type":24,"value":224},"200ms",{"type":19,"tag":143,"props":226,"children":227},{},[228],{"type":24,"value":229},"rpl-motion-speed-5",{"type":19,"tag":116,"props":231,"children":232},{},[233,238,243],{"type":19,"tag":143,"props":234,"children":235},{},[236],{"type":24,"value":237},"240 milliseconds",{"type":19,"tag":143,"props":239,"children":240},{},[241],{"type":24,"value":242},"240ms",{"type":19,"tag":143,"props":244,"children":245},{},[246],{"type":24,"value":247},"rpl-motion-speed-6",{"type":19,"tag":116,"props":249,"children":250},{},[251,256,261],{"type":19,"tag":143,"props":252,"children":253},{},[254],{"type":24,"value":255},"300 milliseconds",{"type":19,"tag":143,"props":257,"children":258},{},[259],{"type":24,"value":260},"300ms",{"type":19,"tag":143,"props":262,"children":263},{},[264],{"type":24,"value":265},"rpl-motion-speed-7",{"type":19,"tag":116,"props":267,"children":268},{},[269,274,279],{"type":19,"tag":143,"props":270,"children":271},{},[272],{"type":24,"value":273},"360 milliseconds",{"type":19,"tag":143,"props":275,"children":276},{},[277],{"type":24,"value":278},"360ms",{"type":19,"tag":143,"props":280,"children":281},{},[282],{"type":24,"value":283},"rpl-motion-speed-8",{"type":19,"tag":116,"props":285,"children":286},{},[287,292,297],{"type":19,"tag":143,"props":288,"children":289},{},[290],{"type":24,"value":291},"420 milliseconds",{"type":19,"tag":143,"props":293,"children":294},{},[295],{"type":24,"value":296},"420ms",{"type":19,"tag":143,"props":298,"children":299},{},[300],{"type":24,"value":301},"rpl-motion-speed-9",{"type":19,"tag":116,"props":303,"children":304},{},[305,310,315],{"type":19,"tag":143,"props":306,"children":307},{},[308],{"type":24,"value":309},"500 milliseconds",{"type":19,"tag":143,"props":311,"children":312},{},[313],{"type":24,"value":314},"500ms",{"type":19,"tag":143,"props":316,"children":317},{},[318],{"type":24,"value":319},"rpl-motion-speed-10",{"type":19,"tag":27,"props":321,"children":323},{"id":322},"easing",[324],{"type":24,"value":325},"Easing",{"type":19,"tag":20,"props":327,"children":328},{},[329],{"type":24,"value":330},"Easing is the rate the motion accelerates or decelerates. It can range from linear to highly exaggerated. The chosen easing should match the desired tone and feeling of the motion.",{"type":19,"tag":20,"props":332,"children":333},{},[334],{"type":24,"value":335},"Currently, Ripple uses default easing values. We use the default names for this reason to reduce clutter in the code.",{"type":19,"tag":20,"props":337,"children":338},{},[339],{"type":24,"value":340},"Definitions:",{"type":19,"tag":39,"props":342,"children":343},{},[344,349],{"type":19,"tag":43,"props":345,"children":346},{},[347],{"type":24,"value":348},"Ease-in: slow at the beginning, fast/abrupt at the end.",{"type":19,"tag":43,"props":350,"children":351},{},[352],{"type":24,"value":353},"Ease-out: fast/abrupt at the beginning, slow at the end.",{"type":19,"tag":20,"props":355,"children":356},{},[357],{"type":24,"value":358},"When to use:",{"type":19,"tag":39,"props":360,"children":361},{},[362,373],{"type":19,"tag":43,"props":363,"children":364},{},[365,367],{"type":24,"value":366},"Ease-in: when things are moving ",{"type":19,"tag":368,"props":369,"children":370},"em",{},[371],{"type":24,"value":372},"out.",{"type":19,"tag":43,"props":374,"children":375},{},[376,378],{"type":24,"value":377},"Ease-out: when things are moving ",{"type":19,"tag":368,"props":379,"children":380},{},[381],{"type":24,"value":382},"in.",{"title":10,"searchDepth":384,"depth":384,"links":385},2,[386,387,388],{"id":29,"depth":384,"text":32},{"id":65,"depth":384,"text":68},{"id":322,"depth":384,"text":325},"markdown","content:design-system:4.styles:motion.md","content","design-system/4.styles/motion.md","md",["ShallowRef",395],["ShallowReactive",396],{"/design-system/styles/motion":397},[398,404],{"_path":399,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":400,"description":401,"layout":13,"_type":389,"_id":402,"_source":391,"_file":403,"_extension":393},"/design-system/styles/logo","Logo","The visual representation of vic.gov.au and the Victorian Government.","content:design-system:4.styles:logo.md","design-system/4.styles/logo.md",{"_path":405,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":406,"description":407,"layout":13,"label":14,"_type":389,"_id":408,"_source":391,"_file":409,"_extension":393},"/design-system/styles/spacing","Spacing","In components and layout, a defined set of spacing units provides good alignment and consistent spacing relationships.","content:design-system:4.styles:spacing.md","design-system/4.styles/spacing.md",["ShallowRef",411],{},[413,418,659],{"title":414,"_path":415,"icon":416,"layout":417},"Ripple Design System","/","carbon:home","home",{"title":419,"_path":420,"children":421},"Design System","/design-system",[422,438,454,483,511],{"title":423,"_path":424,"children":425},"About","/design-system/about",[426,429,432,435],{"title":427,"_path":428,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":430,"_path":431,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":433,"_path":434,"layout":13},"Support","/design-system/about/getting-support",{"title":436,"_path":437,"layout":13},"Contributing","/design-system/about/contributing",{"title":439,"_path":440,"children":441},"Design","/design-system/design",[442,445,448,451],{"title":443,"_path":444,"layout":13},"Getting started","/design-system/design/getting-started",{"title":446,"_path":447,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":449,"_path":450,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":452,"_path":453,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":455,"_path":456,"children":457},"Develop","/design-system/develop",[458,460,462,465],{"title":443,"_path":459,"layout":13},"/design-system/develop/getting-started",{"title":436,"_path":461,"layout":13},"/design-system/develop/contributing",{"title":463,"_path":464,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":32,"_path":466,"children":467,"layout":13},"/design-system/develop/usage",[468,471,474,477,480],{"title":469,"_path":470,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":472,"_path":473,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":475,"_path":476,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":478,"_path":479,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":481,"_path":482,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":484,"_path":485,"children":486},"Styles","/design-system/styles",[487,490,493,496,499,502,505,506,507,508],{"title":488,"_path":489,"layout":13},"Colour","/design-system/styles/colour",{"title":491,"_path":492,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":494,"_path":495,"layout":13},"Grid","/design-system/styles/grid",{"title":497,"_path":498,"layout":13},"Icons","/design-system/styles/icons",{"title":500,"_path":501,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":503,"_path":504,"layout":13},"Layout","/design-system/styles/layout",{"title":400,"_path":399,"layout":13},{"title":11,"_path":7,"layout":13},{"title":406,"_path":405,"layout":13},{"title":509,"_path":510,"layout":13},"Typography","/design-system/styles/typography",{"title":512,"_path":513,"children":514},"Components","/design-system/components",[515,518,521,524,527,530,533,536,539,542,545,548,551,554,557,560,563,566,569,572,575,578,581,584,587,590,593,596,599,602,605,608,611,614,617,620,623,626,629,632,635,638,641,644,647,650,653,656],{"title":516,"_path":517,"layout":13},"Accordion","/design-system/components/accordion",{"title":519,"_path":520,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":522,"_path":523,"layout":13},"Alert","/design-system/components/alert",{"title":525,"_path":526,"layout":13},"Block quote","/design-system/components/block-quote",{"title":528,"_path":529,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":531,"_path":532,"layout":13},"Button","/design-system/components/button",{"title":534,"_path":535,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":537,"_path":538,"layout":13},"Callout","/design-system/components/callout",{"title":540,"_path":541,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":543,"_path":544,"layout":13},"Card","/design-system/components/card",{"title":546,"_path":547,"layout":13},"Carousel","/design-system/components/carousel",{"title":549,"_path":550,"layout":13},"Category grid","/design-system/components/category-grid",{"title":552,"_path":553,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":555,"_path":556,"layout":13},"Chip","/design-system/components/chip",{"title":558,"_path":559,"layout":13},"Contact us","/design-system/components/contact-us",{"title":561,"_path":562,"layout":13},"Date input","/design-system/components/date-input",{"title":564,"_path":565,"layout":13},"Detail list","/design-system/components/detail-list",{"title":567,"_path":568,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":570,"_path":571,"layout":13},"File","/design-system/components/file",{"title":573,"_path":574,"layout":13},"Footer","/design-system/components/footer",{"title":576,"_path":577,"layout":13},"Form","/design-system/components/form",{"title":579,"_path":580,"layout":13},"Form alert","/design-system/components/form-alert",{"title":582,"_path":583,"layout":13},"Header","/design-system/components/header",{"title":585,"_path":586,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":588,"_path":589,"layout":13},"Input field","/design-system/components/input-field",{"title":591,"_path":592,"layout":13},"Key dates","/design-system/components/key-dates",{"title":594,"_path":595,"layout":13},"Media","/design-system/components/media",{"title":597,"_path":598,"layout":13},"Media embed","/design-system/components/media-embed",{"title":600,"_path":601,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":603,"_path":604,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":606,"_path":607,"layout":13},"Option button","/design-system/components/option-button",{"title":609,"_path":610,"layout":13},"Page action","/design-system/components/page-action",{"title":612,"_path":613,"layout":13},"Pagination","/design-system/components/pagination",{"title":615,"_path":616,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":618,"_path":619,"layout":13},"Profile","/design-system/components/profile",{"title":621,"_path":622,"layout":13},"Radio button","/design-system/components/radio-button",{"title":624,"_path":625,"layout":13},"Related links","/design-system/components/related-links",{"title":627,"_path":628,"layout":13},"Results listing","/design-system/components/results-listing",{"title":630,"_path":631,"layout":13},"Search bar","/design-system/components/search-bar",{"title":633,"_path":634,"layout":13},"Skip link","/design-system/components/skip-link",{"title":636,"_path":637,"layout":13},"Social share","/design-system/components/social-share",{"title":639,"_path":640,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":642,"_path":643,"layout":13},"Table","/design-system/components/table",{"title":645,"_path":646,"layout":13},"Tabs","/design-system/components/tabs",{"title":648,"_path":649,"layout":13},"Tag","/design-system/components/tag",{"title":651,"_path":652,"layout":13},"Text area","/design-system/components/text-area",{"title":654,"_path":655,"layout":13},"Timeline","/design-system/components/timeline",{"title":657,"_path":658,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":660,"_path":661,"children":662,"layout":13},"Ripple Framework","/framework",[663,664,682,704],{"title":660,"_path":661,"layout":13},{"title":665,"_path":666,"children":667},"Key Concepts","/framework/key-concepts",[668,670,673,676,679],{"title":475,"_path":669,"layout":13},"/framework/key-concepts/nuxt",{"title":671,"_path":672,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":674,"_path":675,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":677,"_path":678,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":680,"_path":681,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":683,"_path":684,"children":685},"Guides","/framework/guides",[686,689,692,695,698,701],{"title":687,"_path":688,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":690,"_path":691,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":693,"_path":694,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":696,"_path":697,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":699,"_path":700,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":702,"_path":703,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":705,"_path":706,"layout":13},"Core modules","/framework/core-modules",["Reactive",708],["Set"],["Reactive",710],{"module-navigation":711},null,true,1714695650775]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/styles/spacing/_payload.json b/design-system/styles/spacing/_payload.json
index 8c8113dc9a..266c0b8a1d 100644
--- a/design-system/styles/spacing/_payload.json
+++ b/design-system/styles/spacing/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":70,"items":71},"/design-system/styles","Styles",true,[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":70,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695152615]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":70,"items":71},"/design-system/styles","Styles",true,[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":70,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":7,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695650811]
\ No newline at end of file
diff --git a/design-system/styles/spacing/index.html b/design-system/styles/spacing/index.html
index fc9480dee4..8e33a9bd1a 100644
--- a/design-system/styles/spacing/index.html
+++ b/design-system/styles/spacing/index.html
@@ -22,61 +22,61 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTable.Nr-94ppo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseThead.x0xD32yi.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTr.NjbdsN4h.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTh.15m2hyNr.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTbody.pO4HZmMb.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTd.KWvY0UVz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTable.d8cdIzif.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseThead.alimbSyj.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTr.rCUlpnCA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTh.GnFrmIgb.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTbody.FPzd5AuU.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTd.ydAecYY-.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -154,8 +154,8 @@
 
 
 
-<div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Size<!--]--></th><th><!--[-->CSS Variable<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->4px<!--]--></td><td><!--[-->rpl-sp-1<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->8px<!--]--></td><td><!--[-->rpl-sp-2<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->12px<!--]--></td><td><!--[-->rpl-sp-3<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->16px<!--]--></td><td><!--[-->rpl-sp-4<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->20px<!--]--></td><td><!--[-->rpl-sp-5<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->24px<!--]--></td><td><!--[-->rpl-sp-6<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->28px<!--]--></td><td><!--[-->rpl-sp-7<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->32px<!--]--></td><td><!--[-->rpl-sp-8<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->40px<!--]--></td><td><!--[-->rpl-sp-9<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->48px<!--]--></td><td><!--[-->rpl-sp-10<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->56px<!--]--></td><td><!--[-->rpl-sp-11<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->64px<!--]--></td><td><!--[-->rpl-sp-12<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->80px<!--]--></td><td><!--[-->rpl-sp-13<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->120px<!--]--></td><td><!--[-->rpl-sp-14<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><p><!--[-->Spacing should be proportional to the size and importance of the elements on the page. For example, larger elements may need more space to balance their visual weight.<!--]--></p><p><!--[-->Consider spacing in responsive design to ensure that the spacing remains consistent and proportionate on different screen sizes and devices.<!--]--></p><p><!--[-->For page level, component and content spacing see <a href="/design-system/styles/layout/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->layout<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/4.styles/spacing.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/styles/spacing/_payload.json">[{"state":1,"once":594,"_errors":596,"serverRendered":599,"path":7,"prerenderedAt":600},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":280,"$sdd-globals":296,"$sdd-navigation":298},["ShallowRef",4],["ShallowReactive",5],{"/design-system/styles/spacing":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":275,"_id":276,"_source":277,"_file":278,"_extension":279},"/design-system/styles/spacing","styles",false,"","Spacing","In components and layout, a defined set of spacing units provides good alignment and consistent spacing relationships.","page","Core",{"type":16,"children":17,"toc":272},"root",[18,26,31,36,38,248,253,258],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","We use a spacing system in a 4-pixel grid.",{"type":19,"tag":20,"props":27,"children":28},{},[29],{"type":24,"value":30},"It helps to create a visual hierarchy and organises page content.",{"type":19,"tag":20,"props":32,"children":33},{},[34],{"type":24,"value":35},"The 4px framework creates consistent spacing relationships and alignment across breakpoints. This is crucial for good UI design.",{"type":24,"value":37},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":39,"props":40,"children":41},"table",{},[42,61],{"type":19,"tag":43,"props":44,"children":45},"thead",{},[46],{"type":19,"tag":47,"props":48,"children":49},"tr",{},[50,56],{"type":19,"tag":51,"props":52,"children":53},"th",{},[54],{"type":24,"value":55},"Size",{"type":19,"tag":51,"props":57,"children":58},{},[59],{"type":24,"value":60},"CSS Variable",{"type":19,"tag":62,"props":63,"children":64},"tbody",{},[65,79,92,105,118,131,144,157,170,183,196,209,222,235],{"type":19,"tag":47,"props":66,"children":67},{},[68,74],{"type":19,"tag":69,"props":70,"children":71},"td",{},[72],{"type":24,"value":73},"4px",{"type":19,"tag":69,"props":75,"children":76},{},[77],{"type":24,"value":78},"rpl-sp-1",{"type":19,"tag":47,"props":80,"children":81},{},[82,87],{"type":19,"tag":69,"props":83,"children":84},{},[85],{"type":24,"value":86},"8px",{"type":19,"tag":69,"props":88,"children":89},{},[90],{"type":24,"value":91},"rpl-sp-2",{"type":19,"tag":47,"props":93,"children":94},{},[95,100],{"type":19,"tag":69,"props":96,"children":97},{},[98],{"type":24,"value":99},"12px",{"type":19,"tag":69,"props":101,"children":102},{},[103],{"type":24,"value":104},"rpl-sp-3",{"type":19,"tag":47,"props":106,"children":107},{},[108,113],{"type":19,"tag":69,"props":109,"children":110},{},[111],{"type":24,"value":112},"16px",{"type":19,"tag":69,"props":114,"children":115},{},[116],{"type":24,"value":117},"rpl-sp-4",{"type":19,"tag":47,"props":119,"children":120},{},[121,126],{"type":19,"tag":69,"props":122,"children":123},{},[124],{"type":24,"value":125},"20px",{"type":19,"tag":69,"props":127,"children":128},{},[129],{"type":24,"value":130},"rpl-sp-5",{"type":19,"tag":47,"props":132,"children":133},{},[134,139],{"type":19,"tag":69,"props":135,"children":136},{},[137],{"type":24,"value":138},"24px",{"type":19,"tag":69,"props":140,"children":141},{},[142],{"type":24,"value":143},"rpl-sp-6",{"type":19,"tag":47,"props":145,"children":146},{},[147,152],{"type":19,"tag":69,"props":148,"children":149},{},[150],{"type":24,"value":151},"28px",{"type":19,"tag":69,"props":153,"children":154},{},[155],{"type":24,"value":156},"rpl-sp-7",{"type":19,"tag":47,"props":158,"children":159},{},[160,165],{"type":19,"tag":69,"props":161,"children":162},{},[163],{"type":24,"value":164},"32px",{"type":19,"tag":69,"props":166,"children":167},{},[168],{"type":24,"value":169},"rpl-sp-8",{"type":19,"tag":47,"props":171,"children":172},{},[173,178],{"type":19,"tag":69,"props":174,"children":175},{},[176],{"type":24,"value":177},"40px",{"type":19,"tag":69,"props":179,"children":180},{},[181],{"type":24,"value":182},"rpl-sp-9",{"type":19,"tag":47,"props":184,"children":185},{},[186,191],{"type":19,"tag":69,"props":187,"children":188},{},[189],{"type":24,"value":190},"48px",{"type":19,"tag":69,"props":192,"children":193},{},[194],{"type":24,"value":195},"rpl-sp-10",{"type":19,"tag":47,"props":197,"children":198},{},[199,204],{"type":19,"tag":69,"props":200,"children":201},{},[202],{"type":24,"value":203},"56px",{"type":19,"tag":69,"props":205,"children":206},{},[207],{"type":24,"value":208},"rpl-sp-11",{"type":19,"tag":47,"props":210,"children":211},{},[212,217],{"type":19,"tag":69,"props":213,"children":214},{},[215],{"type":24,"value":216},"64px",{"type":19,"tag":69,"props":218,"children":219},{},[220],{"type":24,"value":221},"rpl-sp-12",{"type":19,"tag":47,"props":223,"children":224},{},[225,230],{"type":19,"tag":69,"props":226,"children":227},{},[228],{"type":24,"value":229},"80px",{"type":19,"tag":69,"props":231,"children":232},{},[233],{"type":24,"value":234},"rpl-sp-13",{"type":19,"tag":47,"props":236,"children":237},{},[238,243],{"type":19,"tag":69,"props":239,"children":240},{},[241],{"type":24,"value":242},"120px",{"type":19,"tag":69,"props":244,"children":245},{},[246],{"type":24,"value":247},"rpl-sp-14",{"type":19,"tag":20,"props":249,"children":250},{},[251],{"type":24,"value":252},"Spacing should be proportional to the size and importance of the elements on the page. For example, larger elements may need more space to balance their visual weight.",{"type":19,"tag":20,"props":254,"children":255},{},[256],{"type":24,"value":257},"Consider spacing in responsive design to ensure that the spacing remains consistent and proportionate on different screen sizes and devices.",{"type":19,"tag":20,"props":259,"children":260},{},[261,263,270],{"type":24,"value":262},"For page level, component and content spacing see ",{"type":19,"tag":264,"props":265,"children":267},"a",{"href":266},"/design-system/styles/layout/",[268],{"type":24,"value":269},"layout",{"type":24,"value":271},".",{"title":10,"searchDepth":273,"depth":273,"links":274},2,[],"markdown","content:design-system:4.styles:spacing.md","content","design-system/4.styles/spacing.md","md",["ShallowRef",281],["ShallowReactive",282],{"/design-system/styles/spacing":283},[284,290],{"_path":285,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":286,"description":287,"layout":13,"label":14,"_type":275,"_id":288,"_source":277,"_file":289,"_extension":279},"/design-system/styles/motion","Motion","Motion gradually changes an element from one state to another. It can also indicate an interaction.","content:design-system:4.styles:motion.md","design-system/4.styles/motion.md",{"_path":291,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":292,"description":293,"layout":13,"label":14,"_type":275,"_id":294,"_source":277,"_file":295,"_extension":279},"/design-system/styles/typography","Typography","Type styles are used to present content clearly.","content:design-system:4.styles:typography.md","design-system/4.styles/typography.md",["ShallowRef",297],{},[299,304,546],{"title":300,"_path":301,"icon":302,"layout":303},"Ripple Design System","/","carbon:home","home",{"title":305,"_path":306,"children":307},"Design System","/design-system",[308,324,340,370,398],{"title":309,"_path":310,"children":311},"About","/design-system/about",[312,315,318,321],{"title":313,"_path":314,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":316,"_path":317,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":319,"_path":320,"layout":13},"Support","/design-system/about/getting-support",{"title":322,"_path":323,"layout":13},"Contributing","/design-system/about/contributing",{"title":325,"_path":326,"children":327},"Design","/design-system/design",[328,331,334,337],{"title":329,"_path":330,"layout":13},"Getting started","/design-system/design/getting-started",{"title":332,"_path":333,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":335,"_path":336,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":338,"_path":339,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":341,"_path":342,"children":343},"Develop","/design-system/develop",[344,346,348,351],{"title":329,"_path":345,"layout":13},"/design-system/develop/getting-started",{"title":322,"_path":347,"layout":13},"/design-system/develop/contributing",{"title":349,"_path":350,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":352,"_path":353,"children":354,"layout":13},"Usage","/design-system/develop/usage",[355,358,361,364,367],{"title":356,"_path":357,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":359,"_path":360,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":362,"_path":363,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":365,"_path":366,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":368,"_path":369,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":371,"_path":372,"children":373},"Styles","/design-system/styles",[374,377,380,383,386,389,392,395,396,397],{"title":375,"_path":376,"layout":13},"Colour","/design-system/styles/colour",{"title":378,"_path":379,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":381,"_path":382,"layout":13},"Grid","/design-system/styles/grid",{"title":384,"_path":385,"layout":13},"Icons","/design-system/styles/icons",{"title":387,"_path":388,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":390,"_path":391,"layout":13},"Layout","/design-system/styles/layout",{"title":393,"_path":394,"layout":13},"Logo","/design-system/styles/logo",{"title":286,"_path":285,"layout":13},{"title":11,"_path":7,"layout":13},{"title":292,"_path":291,"layout":13},{"title":399,"_path":400,"children":401},"Components","/design-system/components",[402,405,408,411,414,417,420,423,426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543],{"title":403,"_path":404,"layout":13},"Accordion","/design-system/components/accordion",{"title":406,"_path":407,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":409,"_path":410,"layout":13},"Alert","/design-system/components/alert",{"title":412,"_path":413,"layout":13},"Block quote","/design-system/components/block-quote",{"title":415,"_path":416,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":418,"_path":419,"layout":13},"Button","/design-system/components/button",{"title":421,"_path":422,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":424,"_path":425,"layout":13},"Callout","/design-system/components/callout",{"title":427,"_path":428,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":430,"_path":431,"layout":13},"Card","/design-system/components/card",{"title":433,"_path":434,"layout":13},"Carousel","/design-system/components/carousel",{"title":436,"_path":437,"layout":13},"Category grid","/design-system/components/category-grid",{"title":439,"_path":440,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":442,"_path":443,"layout":13},"Chip","/design-system/components/chip",{"title":445,"_path":446,"layout":13},"Contact us","/design-system/components/contact-us",{"title":448,"_path":449,"layout":13},"Date input","/design-system/components/date-input",{"title":451,"_path":452,"layout":13},"Detail list","/design-system/components/detail-list",{"title":454,"_path":455,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":457,"_path":458,"layout":13},"File","/design-system/components/file",{"title":460,"_path":461,"layout":13},"Footer","/design-system/components/footer",{"title":463,"_path":464,"layout":13},"Form","/design-system/components/form",{"title":466,"_path":467,"layout":13},"Form alert","/design-system/components/form-alert",{"title":469,"_path":470,"layout":13},"Header","/design-system/components/header",{"title":472,"_path":473,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":475,"_path":476,"layout":13},"Input field","/design-system/components/input-field",{"title":478,"_path":479,"layout":13},"Key dates","/design-system/components/key-dates",{"title":481,"_path":482,"layout":13},"Media","/design-system/components/media",{"title":484,"_path":485,"layout":13},"Media embed","/design-system/components/media-embed",{"title":487,"_path":488,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":490,"_path":491,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":493,"_path":494,"layout":13},"Option button","/design-system/components/option-button",{"title":496,"_path":497,"layout":13},"Page action","/design-system/components/page-action",{"title":499,"_path":500,"layout":13},"Pagination","/design-system/components/pagination",{"title":502,"_path":503,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":505,"_path":506,"layout":13},"Profile","/design-system/components/profile",{"title":508,"_path":509,"layout":13},"Radio button","/design-system/components/radio-button",{"title":511,"_path":512,"layout":13},"Related links","/design-system/components/related-links",{"title":514,"_path":515,"layout":13},"Results listing","/design-system/components/results-listing",{"title":517,"_path":518,"layout":13},"Search bar","/design-system/components/search-bar",{"title":520,"_path":521,"layout":13},"Skip link","/design-system/components/skip-link",{"title":523,"_path":524,"layout":13},"Social share","/design-system/components/social-share",{"title":526,"_path":527,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":529,"_path":530,"layout":13},"Table","/design-system/components/table",{"title":532,"_path":533,"layout":13},"Tabs","/design-system/components/tabs",{"title":535,"_path":536,"layout":13},"Tag","/design-system/components/tag",{"title":538,"_path":539,"layout":13},"Text area","/design-system/components/text-area",{"title":541,"_path":542,"layout":13},"Timeline","/design-system/components/timeline",{"title":544,"_path":545,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":547,"_path":548,"children":549,"layout":13},"Ripple Framework","/framework",[550,551,569,591],{"title":547,"_path":548,"layout":13},{"title":552,"_path":553,"children":554},"Key Concepts","/framework/key-concepts",[555,557,560,563,566],{"title":362,"_path":556,"layout":13},"/framework/key-concepts/nuxt",{"title":558,"_path":559,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":561,"_path":562,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":564,"_path":565,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":567,"_path":568,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":570,"_path":571,"children":572},"Guides","/framework/guides",[573,576,579,582,585,588],{"title":574,"_path":575,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":577,"_path":578,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":580,"_path":581,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":583,"_path":584,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":586,"_path":587,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":589,"_path":590,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":592,"_path":593,"layout":13},"Core modules","/framework/core-modules",["Reactive",595],["Set"],["Reactive",597],{"module-navigation":598},null,true,1714695152615]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+<div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Size<!--]--></th><th><!--[-->CSS Variable<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->4px<!--]--></td><td><!--[-->rpl-sp-1<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->8px<!--]--></td><td><!--[-->rpl-sp-2<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->12px<!--]--></td><td><!--[-->rpl-sp-3<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->16px<!--]--></td><td><!--[-->rpl-sp-4<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->20px<!--]--></td><td><!--[-->rpl-sp-5<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->24px<!--]--></td><td><!--[-->rpl-sp-6<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->28px<!--]--></td><td><!--[-->rpl-sp-7<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->32px<!--]--></td><td><!--[-->rpl-sp-8<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->40px<!--]--></td><td><!--[-->rpl-sp-9<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->48px<!--]--></td><td><!--[-->rpl-sp-10<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->56px<!--]--></td><td><!--[-->rpl-sp-11<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->64px<!--]--></td><td><!--[-->rpl-sp-12<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->80px<!--]--></td><td><!--[-->rpl-sp-13<!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->120px<!--]--></td><td><!--[-->rpl-sp-14<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><p><!--[-->Spacing should be proportional to the size and importance of the elements on the page. For example, larger elements may need more space to balance their visual weight.<!--]--></p><p><!--[-->Consider spacing in responsive design to ensure that the spacing remains consistent and proportionate on different screen sizes and devices.<!--]--></p><p><!--[-->For page level, component and content spacing see <a href="/design-system/styles/layout/" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->layout<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/4.styles/spacing.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/styles/spacing/_payload.json">[{"state":1,"once":594,"_errors":596,"serverRendered":599,"path":7,"prerenderedAt":600},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":280,"$sdd-globals":296,"$sdd-navigation":298},["ShallowRef",4],["ShallowReactive",5],{"/design-system/styles/spacing":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":275,"_id":276,"_source":277,"_file":278,"_extension":279},"/design-system/styles/spacing","styles",false,"","Spacing","In components and layout, a defined set of spacing units provides good alignment and consistent spacing relationships.","page","Core",{"type":16,"children":17,"toc":272},"root",[18,26,31,36,38,248,253,258],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","We use a spacing system in a 4-pixel grid.",{"type":19,"tag":20,"props":27,"children":28},{},[29],{"type":24,"value":30},"It helps to create a visual hierarchy and organises page content.",{"type":19,"tag":20,"props":32,"children":33},{},[34],{"type":24,"value":35},"The 4px framework creates consistent spacing relationships and alignment across breakpoints. This is crucial for good UI design.",{"type":24,"value":37},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":39,"props":40,"children":41},"table",{},[42,61],{"type":19,"tag":43,"props":44,"children":45},"thead",{},[46],{"type":19,"tag":47,"props":48,"children":49},"tr",{},[50,56],{"type":19,"tag":51,"props":52,"children":53},"th",{},[54],{"type":24,"value":55},"Size",{"type":19,"tag":51,"props":57,"children":58},{},[59],{"type":24,"value":60},"CSS Variable",{"type":19,"tag":62,"props":63,"children":64},"tbody",{},[65,79,92,105,118,131,144,157,170,183,196,209,222,235],{"type":19,"tag":47,"props":66,"children":67},{},[68,74],{"type":19,"tag":69,"props":70,"children":71},"td",{},[72],{"type":24,"value":73},"4px",{"type":19,"tag":69,"props":75,"children":76},{},[77],{"type":24,"value":78},"rpl-sp-1",{"type":19,"tag":47,"props":80,"children":81},{},[82,87],{"type":19,"tag":69,"props":83,"children":84},{},[85],{"type":24,"value":86},"8px",{"type":19,"tag":69,"props":88,"children":89},{},[90],{"type":24,"value":91},"rpl-sp-2",{"type":19,"tag":47,"props":93,"children":94},{},[95,100],{"type":19,"tag":69,"props":96,"children":97},{},[98],{"type":24,"value":99},"12px",{"type":19,"tag":69,"props":101,"children":102},{},[103],{"type":24,"value":104},"rpl-sp-3",{"type":19,"tag":47,"props":106,"children":107},{},[108,113],{"type":19,"tag":69,"props":109,"children":110},{},[111],{"type":24,"value":112},"16px",{"type":19,"tag":69,"props":114,"children":115},{},[116],{"type":24,"value":117},"rpl-sp-4",{"type":19,"tag":47,"props":119,"children":120},{},[121,126],{"type":19,"tag":69,"props":122,"children":123},{},[124],{"type":24,"value":125},"20px",{"type":19,"tag":69,"props":127,"children":128},{},[129],{"type":24,"value":130},"rpl-sp-5",{"type":19,"tag":47,"props":132,"children":133},{},[134,139],{"type":19,"tag":69,"props":135,"children":136},{},[137],{"type":24,"value":138},"24px",{"type":19,"tag":69,"props":140,"children":141},{},[142],{"type":24,"value":143},"rpl-sp-6",{"type":19,"tag":47,"props":145,"children":146},{},[147,152],{"type":19,"tag":69,"props":148,"children":149},{},[150],{"type":24,"value":151},"28px",{"type":19,"tag":69,"props":153,"children":154},{},[155],{"type":24,"value":156},"rpl-sp-7",{"type":19,"tag":47,"props":158,"children":159},{},[160,165],{"type":19,"tag":69,"props":161,"children":162},{},[163],{"type":24,"value":164},"32px",{"type":19,"tag":69,"props":166,"children":167},{},[168],{"type":24,"value":169},"rpl-sp-8",{"type":19,"tag":47,"props":171,"children":172},{},[173,178],{"type":19,"tag":69,"props":174,"children":175},{},[176],{"type":24,"value":177},"40px",{"type":19,"tag":69,"props":179,"children":180},{},[181],{"type":24,"value":182},"rpl-sp-9",{"type":19,"tag":47,"props":184,"children":185},{},[186,191],{"type":19,"tag":69,"props":187,"children":188},{},[189],{"type":24,"value":190},"48px",{"type":19,"tag":69,"props":192,"children":193},{},[194],{"type":24,"value":195},"rpl-sp-10",{"type":19,"tag":47,"props":197,"children":198},{},[199,204],{"type":19,"tag":69,"props":200,"children":201},{},[202],{"type":24,"value":203},"56px",{"type":19,"tag":69,"props":205,"children":206},{},[207],{"type":24,"value":208},"rpl-sp-11",{"type":19,"tag":47,"props":210,"children":211},{},[212,217],{"type":19,"tag":69,"props":213,"children":214},{},[215],{"type":24,"value":216},"64px",{"type":19,"tag":69,"props":218,"children":219},{},[220],{"type":24,"value":221},"rpl-sp-12",{"type":19,"tag":47,"props":223,"children":224},{},[225,230],{"type":19,"tag":69,"props":226,"children":227},{},[228],{"type":24,"value":229},"80px",{"type":19,"tag":69,"props":231,"children":232},{},[233],{"type":24,"value":234},"rpl-sp-13",{"type":19,"tag":47,"props":236,"children":237},{},[238,243],{"type":19,"tag":69,"props":239,"children":240},{},[241],{"type":24,"value":242},"120px",{"type":19,"tag":69,"props":244,"children":245},{},[246],{"type":24,"value":247},"rpl-sp-14",{"type":19,"tag":20,"props":249,"children":250},{},[251],{"type":24,"value":252},"Spacing should be proportional to the size and importance of the elements on the page. For example, larger elements may need more space to balance their visual weight.",{"type":19,"tag":20,"props":254,"children":255},{},[256],{"type":24,"value":257},"Consider spacing in responsive design to ensure that the spacing remains consistent and proportionate on different screen sizes and devices.",{"type":19,"tag":20,"props":259,"children":260},{},[261,263,270],{"type":24,"value":262},"For page level, component and content spacing see ",{"type":19,"tag":264,"props":265,"children":267},"a",{"href":266},"/design-system/styles/layout/",[268],{"type":24,"value":269},"layout",{"type":24,"value":271},".",{"title":10,"searchDepth":273,"depth":273,"links":274},2,[],"markdown","content:design-system:4.styles:spacing.md","content","design-system/4.styles/spacing.md","md",["ShallowRef",281],["ShallowReactive",282],{"/design-system/styles/spacing":283},[284,290],{"_path":285,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":286,"description":287,"layout":13,"label":14,"_type":275,"_id":288,"_source":277,"_file":289,"_extension":279},"/design-system/styles/motion","Motion","Motion gradually changes an element from one state to another. It can also indicate an interaction.","content:design-system:4.styles:motion.md","design-system/4.styles/motion.md",{"_path":291,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":292,"description":293,"layout":13,"label":14,"_type":275,"_id":294,"_source":277,"_file":295,"_extension":279},"/design-system/styles/typography","Typography","Type styles are used to present content clearly.","content:design-system:4.styles:typography.md","design-system/4.styles/typography.md",["ShallowRef",297],{},[299,304,546],{"title":300,"_path":301,"icon":302,"layout":303},"Ripple Design System","/","carbon:home","home",{"title":305,"_path":306,"children":307},"Design System","/design-system",[308,324,340,370,398],{"title":309,"_path":310,"children":311},"About","/design-system/about",[312,315,318,321],{"title":313,"_path":314,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":316,"_path":317,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":319,"_path":320,"layout":13},"Support","/design-system/about/getting-support",{"title":322,"_path":323,"layout":13},"Contributing","/design-system/about/contributing",{"title":325,"_path":326,"children":327},"Design","/design-system/design",[328,331,334,337],{"title":329,"_path":330,"layout":13},"Getting started","/design-system/design/getting-started",{"title":332,"_path":333,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":335,"_path":336,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":338,"_path":339,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":341,"_path":342,"children":343},"Develop","/design-system/develop",[344,346,348,351],{"title":329,"_path":345,"layout":13},"/design-system/develop/getting-started",{"title":322,"_path":347,"layout":13},"/design-system/develop/contributing",{"title":349,"_path":350,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":352,"_path":353,"children":354,"layout":13},"Usage","/design-system/develop/usage",[355,358,361,364,367],{"title":356,"_path":357,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":359,"_path":360,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":362,"_path":363,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":365,"_path":366,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":368,"_path":369,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":371,"_path":372,"children":373},"Styles","/design-system/styles",[374,377,380,383,386,389,392,395,396,397],{"title":375,"_path":376,"layout":13},"Colour","/design-system/styles/colour",{"title":378,"_path":379,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":381,"_path":382,"layout":13},"Grid","/design-system/styles/grid",{"title":384,"_path":385,"layout":13},"Icons","/design-system/styles/icons",{"title":387,"_path":388,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":390,"_path":391,"layout":13},"Layout","/design-system/styles/layout",{"title":393,"_path":394,"layout":13},"Logo","/design-system/styles/logo",{"title":286,"_path":285,"layout":13},{"title":11,"_path":7,"layout":13},{"title":292,"_path":291,"layout":13},{"title":399,"_path":400,"children":401},"Components","/design-system/components",[402,405,408,411,414,417,420,423,426,429,432,435,438,441,444,447,450,453,456,459,462,465,468,471,474,477,480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543],{"title":403,"_path":404,"layout":13},"Accordion","/design-system/components/accordion",{"title":406,"_path":407,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":409,"_path":410,"layout":13},"Alert","/design-system/components/alert",{"title":412,"_path":413,"layout":13},"Block quote","/design-system/components/block-quote",{"title":415,"_path":416,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":418,"_path":419,"layout":13},"Button","/design-system/components/button",{"title":421,"_path":422,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":424,"_path":425,"layout":13},"Callout","/design-system/components/callout",{"title":427,"_path":428,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":430,"_path":431,"layout":13},"Card","/design-system/components/card",{"title":433,"_path":434,"layout":13},"Carousel","/design-system/components/carousel",{"title":436,"_path":437,"layout":13},"Category grid","/design-system/components/category-grid",{"title":439,"_path":440,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":442,"_path":443,"layout":13},"Chip","/design-system/components/chip",{"title":445,"_path":446,"layout":13},"Contact us","/design-system/components/contact-us",{"title":448,"_path":449,"layout":13},"Date input","/design-system/components/date-input",{"title":451,"_path":452,"layout":13},"Detail list","/design-system/components/detail-list",{"title":454,"_path":455,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":457,"_path":458,"layout":13},"File","/design-system/components/file",{"title":460,"_path":461,"layout":13},"Footer","/design-system/components/footer",{"title":463,"_path":464,"layout":13},"Form","/design-system/components/form",{"title":466,"_path":467,"layout":13},"Form alert","/design-system/components/form-alert",{"title":469,"_path":470,"layout":13},"Header","/design-system/components/header",{"title":472,"_path":473,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":475,"_path":476,"layout":13},"Input field","/design-system/components/input-field",{"title":478,"_path":479,"layout":13},"Key dates","/design-system/components/key-dates",{"title":481,"_path":482,"layout":13},"Media","/design-system/components/media",{"title":484,"_path":485,"layout":13},"Media embed","/design-system/components/media-embed",{"title":487,"_path":488,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":490,"_path":491,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":493,"_path":494,"layout":13},"Option button","/design-system/components/option-button",{"title":496,"_path":497,"layout":13},"Page action","/design-system/components/page-action",{"title":499,"_path":500,"layout":13},"Pagination","/design-system/components/pagination",{"title":502,"_path":503,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":505,"_path":506,"layout":13},"Profile","/design-system/components/profile",{"title":508,"_path":509,"layout":13},"Radio button","/design-system/components/radio-button",{"title":511,"_path":512,"layout":13},"Related links","/design-system/components/related-links",{"title":514,"_path":515,"layout":13},"Results listing","/design-system/components/results-listing",{"title":517,"_path":518,"layout":13},"Search bar","/design-system/components/search-bar",{"title":520,"_path":521,"layout":13},"Skip link","/design-system/components/skip-link",{"title":523,"_path":524,"layout":13},"Social share","/design-system/components/social-share",{"title":526,"_path":527,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":529,"_path":530,"layout":13},"Table","/design-system/components/table",{"title":532,"_path":533,"layout":13},"Tabs","/design-system/components/tabs",{"title":535,"_path":536,"layout":13},"Tag","/design-system/components/tag",{"title":538,"_path":539,"layout":13},"Text area","/design-system/components/text-area",{"title":541,"_path":542,"layout":13},"Timeline","/design-system/components/timeline",{"title":544,"_path":545,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":547,"_path":548,"children":549,"layout":13},"Ripple Framework","/framework",[550,551,569,591],{"title":547,"_path":548,"layout":13},{"title":552,"_path":553,"children":554},"Key Concepts","/framework/key-concepts",[555,557,560,563,566],{"title":362,"_path":556,"layout":13},"/framework/key-concepts/nuxt",{"title":558,"_path":559,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":561,"_path":562,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":564,"_path":565,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":567,"_path":568,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":570,"_path":571,"children":572},"Guides","/framework/guides",[573,576,579,582,585,588],{"title":574,"_path":575,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":577,"_path":578,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":580,"_path":581,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":583,"_path":584,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":586,"_path":587,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":589,"_path":590,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":592,"_path":593,"layout":13},"Core modules","/framework/core-modules",["Reactive",595],["Set"],["Reactive",597],{"module-navigation":598},null,true,1714695650811]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/design-system/styles/typography/_payload.json b/design-system/styles/typography/_payload.json
index aebd56599a..dbf3edf44c 100644
--- a/design-system/styles/typography/_payload.json
+++ b/design-system/styles/typography/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":70,"items":71},"/design-system/styles","Styles",true,[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":70,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695152667]
\ No newline at end of file
+[{"data":1,"prerenderedAt":250},["Reactive",2],{"module-navigation":3},[4,21,37,67,102],{"id":5,"text":6,"url":5,"active":7,"items":8},"/design-system/about","About",false,[9,12,15,18],{"id":10,"text":11,"url":10,"active":7,"items":-1},"/design-system/about/what-is-ripple","What is Ripple?",{"id":13,"text":14,"url":13,"active":7,"items":-1},"/design-system/about/whos-it-for","Who's it for?",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/design-system/about/getting-support","Support",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/design-system/about/contributing","Contributing",{"id":22,"text":23,"url":22,"active":7,"items":24},"/design-system/design","Design",[25,28,31,34],{"id":26,"text":27,"url":26,"active":7,"items":-1},"/design-system/design/getting-started","Getting started",{"id":29,"text":30,"url":29,"active":7,"items":-1},"/design-system/design/our-design-principles","Our design principles",{"id":32,"text":33,"url":32,"active":7,"items":-1},"/design-system/design/design-tokens","Design tokens",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/design-system/design/theming-guidance-for-designers","Theming guidance for designers",{"id":38,"text":39,"url":38,"active":7,"items":40},"/design-system/develop","Develop",[41,43,45,48],{"id":42,"text":27,"url":42,"active":7,"items":-1},"/design-system/develop/getting-started",{"id":44,"text":20,"url":44,"active":7,"items":-1},"/design-system/develop/contributing",{"id":46,"text":47,"url":46,"active":7,"items":-1},"/design-system/develop/theming","Theme and brand application",{"id":49,"text":50,"url":49,"active":7,"items":51},"/design-system/develop/usage","Usage",[52,55,58,61,64],{"id":53,"text":54,"url":53,"active":7,"items":-1},"/design-system/develop/usage/access-to-github-packages","Access to Github Packages",{"id":56,"text":57,"url":56,"active":7,"items":-1},"/design-system/develop/usage/vue","Vue",{"id":59,"text":60,"url":59,"active":7,"items":-1},"/design-system/develop/usage/nuxt","Nuxt",{"id":62,"text":63,"url":62,"active":7,"items":-1},"/design-system/develop/usage/webcomponents","Web components",{"id":65,"text":66,"url":65,"active":7,"items":-1},"/design-system/develop/usage/css-only","Styles only",{"id":68,"text":69,"url":68,"active":70,"items":71},"/design-system/styles","Styles",true,[72,75,78,81,84,87,90,93,96,99],{"id":73,"text":74,"url":73,"active":7,"items":-1},"/design-system/styles/colour","Colour",{"id":76,"text":77,"url":76,"active":7,"items":-1},"/design-system/styles/focus-state","Focus state",{"id":79,"text":80,"url":79,"active":7,"items":-1},"/design-system/styles/grid","Grid",{"id":82,"text":83,"url":82,"active":7,"items":-1},"/design-system/styles/icons","Icons",{"id":85,"text":86,"url":85,"active":7,"items":-1},"/design-system/styles/layer-styles","Layer styles",{"id":88,"text":89,"url":88,"active":7,"items":-1},"/design-system/styles/layout","Layout",{"id":91,"text":92,"url":91,"active":7,"items":-1},"/design-system/styles/logo","Logo",{"id":94,"text":95,"url":94,"active":7,"items":-1},"/design-system/styles/motion","Motion",{"id":97,"text":98,"url":97,"active":7,"items":-1},"/design-system/styles/spacing","Spacing",{"id":100,"text":101,"url":100,"active":70,"items":-1},"/design-system/styles/typography","Typography",{"id":103,"text":104,"url":103,"active":7,"items":105},"/design-system/components","Components",[106,109,112,115,118,121,124,127,130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199,202,205,208,211,214,217,220,223,226,229,232,235,238,241,244,247],{"id":107,"text":108,"url":107,"active":7,"items":-1},"/design-system/components/accordion","Accordion",{"id":110,"text":111,"url":110,"active":7,"items":-1},"/design-system/components/acknowledgment","Acknowledgement",{"id":113,"text":114,"url":113,"active":7,"items":-1},"/design-system/components/alert","Alert",{"id":116,"text":117,"url":116,"active":7,"items":-1},"/design-system/components/block-quote","Block quote",{"id":119,"text":120,"url":119,"active":7,"items":-1},"/design-system/components/breadcrumb","Breadcrumb",{"id":122,"text":123,"url":122,"active":7,"items":-1},"/design-system/components/button","Button",{"id":125,"text":126,"url":125,"active":7,"items":-1},"/design-system/components/call-to-action","Call to action",{"id":128,"text":129,"url":128,"active":7,"items":-1},"/design-system/components/callout","Callout",{"id":131,"text":132,"url":131,"active":7,"items":-1},"/design-system/components/campaign-banner","Campaign banner",{"id":134,"text":135,"url":134,"active":7,"items":-1},"/design-system/components/card","Card",{"id":137,"text":138,"url":137,"active":7,"items":-1},"/design-system/components/carousel","Carousel",{"id":140,"text":141,"url":140,"active":7,"items":-1},"/design-system/components/category-grid","Category grid",{"id":143,"text":144,"url":143,"active":7,"items":-1},"/design-system/components/checkbox","Checkbox",{"id":146,"text":147,"url":146,"active":7,"items":-1},"/design-system/components/chip","Chip",{"id":149,"text":150,"url":149,"active":7,"items":-1},"/design-system/components/contact-us","Contact us",{"id":152,"text":153,"url":152,"active":7,"items":-1},"/design-system/components/date-input","Date input",{"id":155,"text":156,"url":155,"active":7,"items":-1},"/design-system/components/detail-list","Detail list",{"id":158,"text":159,"url":158,"active":7,"items":-1},"/design-system/components/dropdown","Dropdown",{"id":161,"text":162,"url":161,"active":7,"items":-1},"/design-system/components/file","File",{"id":164,"text":165,"url":164,"active":7,"items":-1},"/design-system/components/footer","Footer",{"id":167,"text":168,"url":167,"active":7,"items":-1},"/design-system/components/form","Form",{"id":170,"text":171,"url":170,"active":7,"items":-1},"/design-system/components/form-alert","Form alert",{"id":173,"text":174,"url":173,"active":7,"items":-1},"/design-system/components/header","Header",{"id":176,"text":177,"url":176,"active":7,"items":-1},"/design-system/components/in-page-navigation","In-page navigation",{"id":179,"text":180,"url":179,"active":7,"items":-1},"/design-system/components/input-field","Input field",{"id":182,"text":183,"url":182,"active":7,"items":-1},"/design-system/components/key-dates","Key dates",{"id":185,"text":186,"url":185,"active":7,"items":-1},"/design-system/components/media","Media",{"id":188,"text":189,"url":188,"active":7,"items":-1},"/design-system/components/media-embed","Media embed",{"id":191,"text":192,"url":191,"active":7,"items":-1},"/design-system/components/media-fullscreen","Media fullscreen",{"id":194,"text":195,"url":194,"active":7,"items":-1},"/design-system/components/media-gallery","Media gallery",{"id":197,"text":198,"url":197,"active":7,"items":-1},"/design-system/components/option-button","Option button",{"id":200,"text":201,"url":200,"active":7,"items":-1},"/design-system/components/page-action","Page action",{"id":203,"text":204,"url":203,"active":7,"items":-1},"/design-system/components/pagination","Pagination",{"id":206,"text":207,"url":206,"active":7,"items":-1},"/design-system/components/primary-navigation","Primary navigation",{"id":209,"text":210,"url":209,"active":7,"items":-1},"/design-system/components/profile","Profile",{"id":212,"text":213,"url":212,"active":7,"items":-1},"/design-system/components/radio-button","Radio button",{"id":215,"text":216,"url":215,"active":7,"items":-1},"/design-system/components/related-links","Related links",{"id":218,"text":219,"url":218,"active":7,"items":-1},"/design-system/components/results-listing","Results listing",{"id":221,"text":222,"url":221,"active":7,"items":-1},"/design-system/components/search-bar","Search bar",{"id":224,"text":225,"url":224,"active":7,"items":-1},"/design-system/components/skip-link","Skip link",{"id":227,"text":228,"url":227,"active":7,"items":-1},"/design-system/components/social-share","Social share",{"id":230,"text":231,"url":230,"active":7,"items":-1},"/design-system/components/statistics-grid","Statistics grid",{"id":233,"text":234,"url":233,"active":7,"items":-1},"/design-system/components/table","Table",{"id":236,"text":237,"url":236,"active":7,"items":-1},"/design-system/components/tabs","Tabs",{"id":239,"text":240,"url":239,"active":7,"items":-1},"/design-system/components/tag","Tag",{"id":242,"text":243,"url":242,"active":7,"items":-1},"/design-system/components/text-area","Text area",{"id":245,"text":246,"url":245,"active":7,"items":-1},"/design-system/components/timeline","Timeline",{"id":248,"text":249,"url":248,"active":7,"items":-1},"/design-system/components/vertical-navigation","Vertical navigation",1714695650857]
\ No newline at end of file
diff --git a/design-system/styles/typography/index.html b/design-system/styles/typography/index.html
index 754b1dd180..9c03a127ff 100644
--- a/design-system/styles/typography/index.html
+++ b/design-system/styles/typography/index.html
@@ -28,71 +28,71 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTable.Nr-94ppo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseThead.x0xD32yi.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTr.NjbdsN4h.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTh.15m2hyNr.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTbody.pO4HZmMb.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTd.KWvY0UVz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.CwUV-MIb.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsTypeClassTable.JeAjrHD9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsImageExample.gzBXNxRI.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTable.d8cdIzif.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseThead.alimbSyj.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTr.rCUlpnCA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTh.GnFrmIgb.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTbody.FPzd5AuU.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseTd.ydAecYY-.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH4.gK7ORMEc.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsTypeClassTable.c5edmzGt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsImageExample.8UN1-6g4.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/node.uMQX-T_c.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.NdB0-p6G.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsTypeTable.Iq8SBPIK.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseHr.uASz6lXf.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsTypeTable.S30MUh9q.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-primary);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/about-toggle"><span class="rpl-vertical-nav__toggle-text">About</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/about-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/what-is-ripple" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>What is Ripple?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/whos-it-for" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Who&#39;s it for?</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/getting-support" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Support</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/design-system/about/contributing" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Contributing</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/design-system/design-toggle"><span class="rpl-vertical-nav__toggle-text">Design</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/design-system/design-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -162,8 +162,8 @@
 
 
 
-<div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Style<!--]--></th><th><!--[-->Level 1<!--]--></th><th><!--[-->Level 2<!--]--></th><th><!--[-->Level 3<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->Unordered list<!--]--></td><td><!--[-->• (filled circle)<!--]--></td><td><!--[-->- (dash)<!--]--></td><td><!--[--><!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->Ordered List<!--]--></td><td><!--[-->1. (numbers)<!--]--></td><td><!--[-->a. (letters)<!--]--></td><td><!--[-->i. (roman numerals)<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/4.styles/typography.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/styles/typography/_payload.json">[{"state":1,"once":876,"_errors":878,"serverRendered":881,"path":7,"prerenderedAt":882},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":561,"$sdd-globals":578,"$sdd-navigation":580},["ShallowRef",4],["ShallowReactive",5],{"/design-system/styles/typography":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":556,"_id":557,"_source":558,"_file":559,"_extension":560},"/design-system/styles/typography","styles",false,"","Typography","Type styles are used to present content clearly.","page","Core",{"type":16,"children":17,"toc":536},"root",[18,27,33,49,54,59,61,112,118,123,138,145,150,157,162,168,172,178,183,188,192,198,203,208,210,264,270,275,280,293,299,305,310,315,320,338,343,349,354,359,365,370,375,380,386,391,396,400,406,411,417,422,428,432,438,442,448,452,458,460],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"font",[24],{"type":25,"value":26},"text","Font",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"'VIC' is the brand font to be used across all Victorian Government communications. This creates a distinct but consistent look and feel.",{"type":19,"tag":28,"props":34,"children":35},{},[36,38,47],{"type":25,"value":37},"It is free to download from ",{"type":19,"tag":39,"props":40,"children":44},"a",{"href":41,"rel":42},"https://www.vic.gov.au/brand-victoria-fonts",[43],"nofollow",[45],{"type":25,"value":46},"vic.gov.au",{"type":25,"value":48},".",{"type":19,"tag":28,"props":50,"children":51},{},[52],{"type":25,"value":53},"Only use VIC font. The Ripple Design System only uses ‘Regular’ and ‘Bold’ weights of VIC font.",{"type":19,"tag":28,"props":55,"children":56},{},[57],{"type":25,"value":58},"As VIC is a custom font, it's recommended to use Web Safe Font as a fallback when declaring your font stack. The preferred fallback font for the Ripple Design System is Arial.",{"type":25,"value":60},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":62,"props":63,"children":64},"table",{},[65,89],{"type":19,"tag":66,"props":67,"children":68},"thead",{},[69],{"type":19,"tag":70,"props":71,"children":72},"tr",{},[73,79,84],{"type":19,"tag":74,"props":75,"children":76},"th",{},[77],{"type":25,"value":78},"Font Family",{"type":19,"tag":74,"props":80,"children":81},{},[82],{"type":25,"value":83},"Value",{"type":19,"tag":74,"props":85,"children":86},{},[87],{"type":25,"value":88},"CSS Variable",{"type":19,"tag":90,"props":91,"children":92},"tbody",{},[93],{"type":19,"tag":70,"props":94,"children":95},{},[96,102,107],{"type":19,"tag":97,"props":98,"children":99},"td",{},[100],{"type":25,"value":101},"VIC",{"type":19,"tag":97,"props":103,"children":104},{},[105],{"type":25,"value":106},"VIC, Arial, Helvetica, sans-serif",{"type":19,"tag":97,"props":108,"children":109},{},[110],{"type":25,"value":111},"rpl-type-font-family",{"type":19,"tag":20,"props":113,"children":115},{"id":114},"type-styles",[116],{"type":25,"value":117},"Type Styles",{"type":19,"tag":28,"props":119,"children":120},{},[121],{"type":25,"value":122},"In the Ripple Design System there are two type sets, one for fixed use and one for fluid (responsive) use:",{"type":19,"tag":124,"props":125,"children":126},"ul",{},[127,133],{"type":19,"tag":128,"props":129,"children":130},"li",{},[131],{"type":25,"value":132},"The fixed type set uses fixed sizes. This means they use the \u003C991 fluid styles, but do not respond.",{"type":19,"tag":128,"props":134,"children":135},{},[136],{"type":25,"value":137},"The fluid type set has two fixed sizes. These both respond at certain breakpoints for larger or smaller styles.",{"type":19,"tag":139,"props":140,"children":142},"h3",{"id":141},"headings",[143],{"type":25,"value":144},"Headings",{"type":19,"tag":28,"props":146,"children":147},{},[148],{"type":25,"value":149},"Headings have both fluid and fixed sets. Headings are bold by default for emphasis and to create contrast.",{"type":19,"tag":151,"props":152,"children":154},"h4",{"id":153},"fluid",[155],{"type":25,"value":156},"Fluid",{"type":19,"tag":158,"props":159,"children":161},"docs-type-class-table",{":type":160},"[{\"style\":[\"Heading 1\",{\"values\":[{\"Font size\":\"32px / 56px\"},{\"Line height\":\"36px / 60px\"},{\"Letter spacing\":\"1.4% / 0.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1\"]},{\"style\":[\"Heading 1 Highlight\",{\"values\":[{\"Font size\":\"32px / 56px\"},{\"Line height\":\"36px / 60px\"},{\"Letter spacing\":\"1.4% / 0.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1-highlight\"]},{\"style\":[\"Heading 2\",{\"values\":[{\"Font size\":\"24px / 32px\"},{\"Line height\":\"32px / 40px\"},{\"Letter spacing\":\"1.6% / 1.4%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h2\"]},{\"style\":[\"Heading 3\",{\"values\":[{\"Font size\":\"20px / 24px\"},{\"Line height\":\"28px / 32px\"},{\"Letter spacing\":\"1.8% / 1.6%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h3\"]},{\"style\":[\"Heading 3 Highlight\",{\"values\":[{\"Font size\":\"20px / 24px\"},{\"Line height\":\"28px / 32px\"},{\"Letter spacing\":\"1.8% / 1.6%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h3-highlight\"]},{\"style\":[\"Heading 4\",{\"values\":[{\"Font size\":\"16px / 20px\"},{\"Line height\":\"24px / 28px\"},{\"Letter spacing\":\"1.92% / 1.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h4\"]}]",[],{"type":19,"tag":151,"props":163,"children":165},{"id":164},"fixed",[166],{"type":25,"value":167},"Fixed",{"type":19,"tag":158,"props":169,"children":171},{":type":170},"[{\"style\":[\"Heading 1 Fixed\",{\"values\":[{\"Font size\":\"32px\"},{\"Line height\":\"36px\"},{\"Letter spacing\":\"1.4%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1-fixed\"]},{\"style\":[\"Heading 1 Highlight Fixed\",{\"values\":[{\"Font size\":\"32px\"},{\"Line height\":\"44px\"},{\"Letter spacing\":\"1.4%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1-highlight-fixed\"]},{\"style\":[\"Heading 2 Fixed\",{\"values\":[{\"Font size\":\"24px\"},{\"Line height\":\"32px\"},{\"Letter spacing\":\"1.6%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h2-fixed\"]},{\"style\":[\"Heading 3 Fixed\",{\"values\":[{\"Font size\":\"20px\"},{\"Line height\":\"28px\"},{\"Letter spacing\":\"1.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h3-fixed\"]},{\"style\":[\"Heading 3 Highlight Fixed\",{\"values\":[{\"Font size\":\"20px\"},{\"Line height\":\"28px\"},{\"Letter spacing\":\"1.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h3-highlight-fixed\"]},{\"style\":[\"Heading 4 Fixed\",{\"values\":[{\"Font size\":\"16px\"},{\"Line height\":\"24px\"},{\"Letter spacing\":\"1.92%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h4-fixed\"]}]",[],{"type":19,"tag":139,"props":173,"children":175},{"id":174},"paragraph",[176],{"type":25,"value":177},"Paragraph",{"type":19,"tag":28,"props":179,"children":180},{},[181],{"type":25,"value":182},"The default paragraph font size is 16px on all screens.",{"type":19,"tag":28,"props":184,"children":185},{},[186],{"type":25,"value":187},"The majority of your body copy should use the standard 16px paragraph size.",{"type":19,"tag":158,"props":189,"children":191},{":type":190},"[{\"style\":[\"Paragraph Large\",{\"values\":[{\"Font size\":\"20px / 24px\"},{\"Line height\":\"28px / 32px\"},{\"Letter Spacing\":\"1.8% / 1.6%\"}]},\"rpl-type-p-large\"]},{\"style\":[\"Paragraph Large Fixed\",{\"values\":[{\"Font size\":\"20px\"},{\"Line height\":\"28px\"},{\"Letter Spacing\":\"1.8%\"}]},\"rpl-type-p-large-fixed\"]},{\"style\":[\"Paragraph Large Highlight\",{\"values\":[{\"Font size\":\"20px / 24px\"},{\"Line height\":\"28px / 32px\"},{\"Letter Spacing\":\"1.8% / 1.6%\"}]},\"rpl-type-p-large-highlight\"]},{\"style\":[\"Paragraph\",{\"values\":[{\"Font size\":\"16px\"},{\"Line height\":\"24px\"},{\"Letter spacing\":\"1.92%\"}]},\"rpl-type-p\"]},{\"style\":[\"Paragraph Small\",{\"values\":[{\"Font size\":\"14px\"},{\"Line height\":\"20px\"},{\"Letter spacing\":\"1.92%\"}]},\"rpl-type-p-small\"]}]",[],{"type":19,"tag":139,"props":193,"children":195},{"id":194},"lists",[196],{"type":25,"value":197},"Lists",{"type":19,"tag":28,"props":199,"children":200},{},[201],{"type":25,"value":202},"Use lists to make blocks of text easier to read, and to break information into manageable chunks.",{"type":19,"tag":28,"props":204,"children":205},{},[206],{"type":25,"value":207},"List styles are based on rpl-type-p with extra spacing.",{"type":25,"value":209},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":62,"props":211,"children":212},{},[213,239],{"type":19,"tag":66,"props":214,"children":215},{},[216],{"type":19,"tag":70,"props":217,"children":218},{},[219,224,229,234],{"type":19,"tag":74,"props":220,"children":221},{},[222],{"type":25,"value":223},"Margin Top",{"type":19,"tag":74,"props":225,"children":226},{},[227],{"type":25,"value":228},"Paragraph Spacing",{"type":19,"tag":74,"props":230,"children":231},{},[232],{"type":25,"value":233},"Item Spacing",{"type":19,"tag":74,"props":235,"children":236},{},[237],{"type":25,"value":238},"Indent Amount",{"type":19,"tag":90,"props":240,"children":241},{},[242],{"type":19,"tag":70,"props":243,"children":244},{},[245,250,255,259],{"type":19,"tag":97,"props":246,"children":247},{},[248],{"type":25,"value":249},"rpl-sp-4",{"type":19,"tag":97,"props":251,"children":252},{},[253],{"type":25,"value":254},"rpl-sp-2",{"type":19,"tag":97,"props":256,"children":257},{},[258],{"type":25,"value":254},{"type":19,"tag":97,"props":260,"children":261},{},[262],{"type":25,"value":263},"rpl-sp-9",{"type":19,"tag":151,"props":265,"children":267},{"id":266},"unordered-lists",[268],{"type":25,"value":269},"Unordered Lists",{"type":19,"tag":28,"props":271,"children":272},{},[273],{"type":25,"value":274},"Introduce bulleted lists with a lead-in line ending in a colon. Start each item with a lowercase letter, and do not use a full stop at the end.",{"type":19,"tag":28,"props":276,"children":277},{},[278],{"type":25,"value":279},"Unordered lists allow for two nested levels which are styled as:",{"type":19,"tag":124,"props":281,"children":282},{},[283,288],{"type":19,"tag":128,"props":284,"children":285},{},[286],{"type":25,"value":287},"level 1 - bullet",{"type":19,"tag":128,"props":289,"children":290},{},[291],{"type":25,"value":292},"level 2 - dash",{"type":19,"tag":294,"props":295,"children":298},"docs-image-example",{"alt":296,"src":297},"An example of an unordered list","/assets/img/unordered-list.png",[],{"type":19,"tag":151,"props":300,"children":302},{"id":301},"ordered-lists",[303],{"type":25,"value":304},"Ordered Lists",{"type":19,"tag":28,"props":306,"children":307},{},[308],{"type":25,"value":309},"Use numbered lists instead of bulleted lists when the order of the items is relevant.",{"type":19,"tag":28,"props":311,"children":312},{},[313],{"type":25,"value":314},"You do not need to use a lead-in line for numbered lists. Items in a numbered list should end in a full stop because each should be a complete sentence.",{"type":19,"tag":28,"props":316,"children":317},{},[318],{"type":25,"value":319},"Ordered lists allow for three nested levels which are styled as",{"type":19,"tag":124,"props":321,"children":322},{},[323,328,333],{"type":19,"tag":128,"props":324,"children":325},{},[326],{"type":25,"value":327},"level 1 - numbers",{"type":19,"tag":128,"props":329,"children":330},{},[331],{"type":25,"value":332},"level 2 - alphabet",{"type":19,"tag":128,"props":334,"children":335},{},[336],{"type":25,"value":337},"level 3 - roman numerals.",{"type":19,"tag":294,"props":339,"children":342},{"alt":340,"src":341},"An example of an ordered list","/assets/img/ordered-list.png",[],{"type":19,"tag":139,"props":344,"children":346},{"id":345},"text-alignment",[347],{"type":25,"value":348},"Text Alignment",{"type":19,"tag":28,"props":350,"children":351},{},[352],{"type":25,"value":353},"You should usually left-align body copy that’s read left to right. Right-aligned body copy can be hard for users to find and read when they magnify their screen.",{"type":19,"tag":28,"props":355,"children":356},{},[357],{"type":25,"value":358},"Do not ‘justify’ blocks of body copy so that they’re aligned to both the left and right margins. Doing this creates wider spaces between words, which can make the text hard to read.",{"type":19,"tag":139,"props":360,"children":362},{"id":361},"font-weight",[363],{"type":25,"value":364},"Font weight",{"type":19,"tag":28,"props":366,"children":367},{},[368],{"type":25,"value":369},"You can use bold to emphasise particular words in a transaction. Use it to highlight critical information that users need to refer to or you’ve seen them miss.",{"type":19,"tag":28,"props":371,"children":372},{},[373],{"type":25,"value":374},"Try to avoid bold. Overuse will make it difficult for users to know which parts of your content they need to pay the most attention to.",{"type":19,"tag":294,"props":376,"children":379},{"alt":377,"src":378},"Acomparison between regular text and bold text","/assets/img/font-weight.png",[],{"type":19,"tag":139,"props":381,"children":383},{"id":382},"links",[384],{"type":25,"value":385},"Links",{"type":19,"tag":28,"props":387,"children":388},{},[389],{"type":25,"value":390},"Links are blue and underlined by default. If your link is at the end of a sentence or paragraph, make sure that the linked text does not include the full stop.",{"type":19,"tag":294,"props":392,"children":395},{"alt":393,"src":394},"A visual example of a link within regular text","/assets/img/link.png",[],{"type":19,"tag":397,"props":398,"children":399},"hr",{},[],{"type":19,"tag":20,"props":401,"children":403},{"id":402},"list-of-variables",[404],{"type":25,"value":405},"List of variables",{"type":19,"tag":28,"props":407,"children":408},{},[409],{"type":25,"value":410},"All values are stored as variables nested in the type variable.",{"type":19,"tag":139,"props":412,"children":414},{"id":413},"type-size",[415],{"type":25,"value":416},"Type size",{"type":19,"tag":418,"props":419,"children":421},"docs-type-table",{"type":420},"size",[],{"type":19,"tag":139,"props":423,"children":425},{"id":424},"line-height",[426],{"type":25,"value":427},"Line Height",{"type":19,"tag":418,"props":429,"children":431},{"type":430},"lh",[],{"type":19,"tag":139,"props":433,"children":435},{"id":434},"letter-spacing",[436],{"type":25,"value":437},"Letter Spacing",{"type":19,"tag":418,"props":439,"children":441},{"type":440},"ls",[],{"type":19,"tag":139,"props":443,"children":445},{"id":444},"font-weights",[446],{"type":25,"value":447},"Font Weights",{"type":19,"tag":418,"props":449,"children":451},{"type":450},"weight",[],{"type":19,"tag":139,"props":453,"children":455},{"id":454},"list-styling",[456],{"type":25,"value":457},"List Styling",{"type":25,"value":459},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":62,"props":461,"children":462},{},[463,489],{"type":19,"tag":66,"props":464,"children":465},{},[466],{"type":19,"tag":70,"props":467,"children":468},{},[469,474,479,484],{"type":19,"tag":74,"props":470,"children":471},{},[472],{"type":25,"value":473},"Style",{"type":19,"tag":74,"props":475,"children":476},{},[477],{"type":25,"value":478},"Level 1",{"type":19,"tag":74,"props":480,"children":481},{},[482],{"type":25,"value":483},"Level 2",{"type":19,"tag":74,"props":485,"children":486},{},[487],{"type":25,"value":488},"Level 3",{"type":19,"tag":90,"props":490,"children":491},{},[492,513],{"type":19,"tag":70,"props":493,"children":494},{},[495,500,505,510],{"type":19,"tag":97,"props":496,"children":497},{},[498],{"type":25,"value":499},"Unordered list",{"type":19,"tag":97,"props":501,"children":502},{},[503],{"type":25,"value":504},"• (filled circle)",{"type":19,"tag":97,"props":506,"children":507},{},[508],{"type":25,"value":509},"- (dash)",{"type":19,"tag":97,"props":511,"children":512},{},[],{"type":19,"tag":70,"props":514,"children":515},{},[516,521,526,531],{"type":19,"tag":97,"props":517,"children":518},{},[519],{"type":25,"value":520},"Ordered List",{"type":19,"tag":97,"props":522,"children":523},{},[524],{"type":25,"value":525},"1. (numbers)",{"type":19,"tag":97,"props":527,"children":528},{},[529],{"type":25,"value":530},"a. (letters)",{"type":19,"tag":97,"props":532,"children":533},{},[534],{"type":25,"value":535},"i. (roman numerals)",{"title":10,"searchDepth":537,"depth":537,"links":538},2,[539,540,549],{"id":22,"depth":537,"text":26},{"id":114,"depth":537,"text":117,"children":541},[542,544,545,546,547,548],{"id":141,"depth":543,"text":144},3,{"id":174,"depth":543,"text":177},{"id":194,"depth":543,"text":197},{"id":345,"depth":543,"text":348},{"id":361,"depth":543,"text":364},{"id":382,"depth":543,"text":385},{"id":402,"depth":537,"text":405,"children":550},[551,552,553,554,555],{"id":413,"depth":543,"text":416},{"id":424,"depth":543,"text":427},{"id":434,"depth":543,"text":437},{"id":444,"depth":543,"text":447},{"id":454,"depth":543,"text":457},"markdown","content:design-system:4.styles:typography.md","content","design-system/4.styles/typography.md","md",["ShallowRef",562],["ShallowReactive",563],{"/design-system/styles/typography":564},[565,571],{"_path":566,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":567,"description":568,"layout":13,"label":14,"_type":556,"_id":569,"_source":558,"_file":570,"_extension":560},"/design-system/styles/spacing","Spacing","In components and layout, a defined set of spacing units provides good alignment and consistent spacing relationships.","content:design-system:4.styles:spacing.md","design-system/4.styles/spacing.md",{"_path":572,"_dir":573,"_draft":9,"_partial":9,"_locale":10,"title":574,"description":575,"layout":13,"label":14,"_type":556,"_id":576,"_source":558,"_file":577,"_extension":560},"/design-system/components/accordion","components","Accordion","The Accordion component is a panel designed to save space by hiding and revealing content as required.","content:design-system:5.components:accordion.md","design-system/5.components/accordion.md",["ShallowRef",579],{},[581,586,828],{"title":582,"_path":583,"icon":584,"layout":585},"Ripple Design System","/","carbon:home","home",{"title":587,"_path":588,"children":589},"Design System","/design-system",[590,606,622,652,682],{"title":591,"_path":592,"children":593},"About","/design-system/about",[594,597,600,603],{"title":595,"_path":596,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":598,"_path":599,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":601,"_path":602,"layout":13},"Support","/design-system/about/getting-support",{"title":604,"_path":605,"layout":13},"Contributing","/design-system/about/contributing",{"title":607,"_path":608,"children":609},"Design","/design-system/design",[610,613,616,619],{"title":611,"_path":612,"layout":13},"Getting started","/design-system/design/getting-started",{"title":614,"_path":615,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":617,"_path":618,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":620,"_path":621,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":623,"_path":624,"children":625},"Develop","/design-system/develop",[626,628,630,633],{"title":611,"_path":627,"layout":13},"/design-system/develop/getting-started",{"title":604,"_path":629,"layout":13},"/design-system/develop/contributing",{"title":631,"_path":632,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":634,"_path":635,"children":636,"layout":13},"Usage","/design-system/develop/usage",[637,640,643,646,649],{"title":638,"_path":639,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":641,"_path":642,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":644,"_path":645,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":647,"_path":648,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":650,"_path":651,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":653,"_path":654,"children":655},"Styles","/design-system/styles",[656,659,662,665,668,671,674,677,680,681],{"title":657,"_path":658,"layout":13},"Colour","/design-system/styles/colour",{"title":660,"_path":661,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":663,"_path":664,"layout":13},"Grid","/design-system/styles/grid",{"title":666,"_path":667,"layout":13},"Icons","/design-system/styles/icons",{"title":669,"_path":670,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":672,"_path":673,"layout":13},"Layout","/design-system/styles/layout",{"title":675,"_path":676,"layout":13},"Logo","/design-system/styles/logo",{"title":678,"_path":679,"layout":13},"Motion","/design-system/styles/motion",{"title":567,"_path":566,"layout":13},{"title":11,"_path":7,"layout":13},{"title":683,"_path":684,"children":685},"Components","/design-system/components",[686,687,690,693,696,699,702,705,708,711,714,717,720,723,726,729,732,735,738,741,744,747,750,753,756,759,762,765,768,771,774,777,780,783,786,789,792,795,798,801,804,807,810,813,816,819,822,825],{"title":574,"_path":572,"layout":13},{"title":688,"_path":689,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":691,"_path":692,"layout":13},"Alert","/design-system/components/alert",{"title":694,"_path":695,"layout":13},"Block quote","/design-system/components/block-quote",{"title":697,"_path":698,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":700,"_path":701,"layout":13},"Button","/design-system/components/button",{"title":703,"_path":704,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":706,"_path":707,"layout":13},"Callout","/design-system/components/callout",{"title":709,"_path":710,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":712,"_path":713,"layout":13},"Card","/design-system/components/card",{"title":715,"_path":716,"layout":13},"Carousel","/design-system/components/carousel",{"title":718,"_path":719,"layout":13},"Category grid","/design-system/components/category-grid",{"title":721,"_path":722,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":724,"_path":725,"layout":13},"Chip","/design-system/components/chip",{"title":727,"_path":728,"layout":13},"Contact us","/design-system/components/contact-us",{"title":730,"_path":731,"layout":13},"Date input","/design-system/components/date-input",{"title":733,"_path":734,"layout":13},"Detail list","/design-system/components/detail-list",{"title":736,"_path":737,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":739,"_path":740,"layout":13},"File","/design-system/components/file",{"title":742,"_path":743,"layout":13},"Footer","/design-system/components/footer",{"title":745,"_path":746,"layout":13},"Form","/design-system/components/form",{"title":748,"_path":749,"layout":13},"Form alert","/design-system/components/form-alert",{"title":751,"_path":752,"layout":13},"Header","/design-system/components/header",{"title":754,"_path":755,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":757,"_path":758,"layout":13},"Input field","/design-system/components/input-field",{"title":760,"_path":761,"layout":13},"Key dates","/design-system/components/key-dates",{"title":763,"_path":764,"layout":13},"Media","/design-system/components/media",{"title":766,"_path":767,"layout":13},"Media embed","/design-system/components/media-embed",{"title":769,"_path":770,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":772,"_path":773,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":775,"_path":776,"layout":13},"Option button","/design-system/components/option-button",{"title":778,"_path":779,"layout":13},"Page action","/design-system/components/page-action",{"title":781,"_path":782,"layout":13},"Pagination","/design-system/components/pagination",{"title":784,"_path":785,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":787,"_path":788,"layout":13},"Profile","/design-system/components/profile",{"title":790,"_path":791,"layout":13},"Radio button","/design-system/components/radio-button",{"title":793,"_path":794,"layout":13},"Related links","/design-system/components/related-links",{"title":796,"_path":797,"layout":13},"Results listing","/design-system/components/results-listing",{"title":799,"_path":800,"layout":13},"Search bar","/design-system/components/search-bar",{"title":802,"_path":803,"layout":13},"Skip link","/design-system/components/skip-link",{"title":805,"_path":806,"layout":13},"Social share","/design-system/components/social-share",{"title":808,"_path":809,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":811,"_path":812,"layout":13},"Table","/design-system/components/table",{"title":814,"_path":815,"layout":13},"Tabs","/design-system/components/tabs",{"title":817,"_path":818,"layout":13},"Tag","/design-system/components/tag",{"title":820,"_path":821,"layout":13},"Text area","/design-system/components/text-area",{"title":823,"_path":824,"layout":13},"Timeline","/design-system/components/timeline",{"title":826,"_path":827,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":829,"_path":830,"children":831,"layout":13},"Ripple Framework","/framework",[832,833,851,873],{"title":829,"_path":830,"layout":13},{"title":834,"_path":835,"children":836},"Key Concepts","/framework/key-concepts",[837,839,842,845,848],{"title":644,"_path":838,"layout":13},"/framework/key-concepts/nuxt",{"title":840,"_path":841,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":843,"_path":844,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":846,"_path":847,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":849,"_path":850,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":852,"_path":853,"children":854},"Guides","/framework/guides",[855,858,861,864,867,870],{"title":856,"_path":857,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":859,"_path":860,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":862,"_path":863,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":865,"_path":866,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":868,"_path":869,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":871,"_path":872,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":874,"_path":875,"layout":13},"Core modules","/framework/core-modules",["Reactive",877],["Set"],["Reactive",879],{"module-navigation":880},null,true,1714695152667]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+<div class="rpl-table" data-v-a29f0e4f><div class="rpl-table__scroll-container" data-v-a29f0e4f><table class="docs-table" data-v-a29f0e4f><!--[--><thead><!--[--><tr><!--[--><th><!--[-->Style<!--]--></th><th><!--[-->Level 1<!--]--></th><th><!--[-->Level 2<!--]--></th><th><!--[-->Level 3<!--]--></th><!--]--></tr><!--]--></thead><tbody><!--[--><tr><!--[--><td><!--[-->Unordered list<!--]--></td><td><!--[-->• (filled circle)<!--]--></td><td><!--[-->- (dash)<!--]--></td><td><!--[--><!--]--></td><!--]--></tr><tr><!--[--><td><!--[-->Ordered List<!--]--></td><td><!--[-->1. (numbers)<!--]--></td><td><!--[-->a. (letters)<!--]--></td><td><!--[-->i. (roman numerals)<!--]--></td><!--]--></tr><!--]--></tbody><!--]--></table></div></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/design-system/4.styles/typography.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/design-system/styles/typography/_payload.json">[{"state":1,"once":876,"_errors":878,"serverRendered":881,"path":7,"prerenderedAt":882},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":561,"$sdd-globals":578,"$sdd-navigation":580},["ShallowRef",4],["ShallowReactive",5],{"/design-system/styles/typography":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"label":14,"body":15,"_type":556,"_id":557,"_source":558,"_file":559,"_extension":560},"/design-system/styles/typography","styles",false,"","Typography","Type styles are used to present content clearly.","page","Core",{"type":16,"children":17,"toc":536},"root",[18,27,33,49,54,59,61,112,118,123,138,145,150,157,162,168,172,178,183,188,192,198,203,208,210,264,270,275,280,293,299,305,310,315,320,338,343,349,354,359,365,370,375,380,386,391,396,400,406,411,417,422,428,432,438,442,448,452,458,460],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"font",[24],{"type":25,"value":26},"text","Font",{"type":19,"tag":28,"props":29,"children":30},"p",{},[31],{"type":25,"value":32},"'VIC' is the brand font to be used across all Victorian Government communications. This creates a distinct but consistent look and feel.",{"type":19,"tag":28,"props":34,"children":35},{},[36,38,47],{"type":25,"value":37},"It is free to download from ",{"type":19,"tag":39,"props":40,"children":44},"a",{"href":41,"rel":42},"https://www.vic.gov.au/brand-victoria-fonts",[43],"nofollow",[45],{"type":25,"value":46},"vic.gov.au",{"type":25,"value":48},".",{"type":19,"tag":28,"props":50,"children":51},{},[52],{"type":25,"value":53},"Only use VIC font. The Ripple Design System only uses ‘Regular’ and ‘Bold’ weights of VIC font.",{"type":19,"tag":28,"props":55,"children":56},{},[57],{"type":25,"value":58},"As VIC is a custom font, it's recommended to use Web Safe Font as a fallback when declaring your font stack. The preferred fallback font for the Ripple Design System is Arial.",{"type":25,"value":60},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":62,"props":63,"children":64},"table",{},[65,89],{"type":19,"tag":66,"props":67,"children":68},"thead",{},[69],{"type":19,"tag":70,"props":71,"children":72},"tr",{},[73,79,84],{"type":19,"tag":74,"props":75,"children":76},"th",{},[77],{"type":25,"value":78},"Font Family",{"type":19,"tag":74,"props":80,"children":81},{},[82],{"type":25,"value":83},"Value",{"type":19,"tag":74,"props":85,"children":86},{},[87],{"type":25,"value":88},"CSS Variable",{"type":19,"tag":90,"props":91,"children":92},"tbody",{},[93],{"type":19,"tag":70,"props":94,"children":95},{},[96,102,107],{"type":19,"tag":97,"props":98,"children":99},"td",{},[100],{"type":25,"value":101},"VIC",{"type":19,"tag":97,"props":103,"children":104},{},[105],{"type":25,"value":106},"VIC, Arial, Helvetica, sans-serif",{"type":19,"tag":97,"props":108,"children":109},{},[110],{"type":25,"value":111},"rpl-type-font-family",{"type":19,"tag":20,"props":113,"children":115},{"id":114},"type-styles",[116],{"type":25,"value":117},"Type Styles",{"type":19,"tag":28,"props":119,"children":120},{},[121],{"type":25,"value":122},"In the Ripple Design System there are two type sets, one for fixed use and one for fluid (responsive) use:",{"type":19,"tag":124,"props":125,"children":126},"ul",{},[127,133],{"type":19,"tag":128,"props":129,"children":130},"li",{},[131],{"type":25,"value":132},"The fixed type set uses fixed sizes. This means they use the \u003C991 fluid styles, but do not respond.",{"type":19,"tag":128,"props":134,"children":135},{},[136],{"type":25,"value":137},"The fluid type set has two fixed sizes. These both respond at certain breakpoints for larger or smaller styles.",{"type":19,"tag":139,"props":140,"children":142},"h3",{"id":141},"headings",[143],{"type":25,"value":144},"Headings",{"type":19,"tag":28,"props":146,"children":147},{},[148],{"type":25,"value":149},"Headings have both fluid and fixed sets. Headings are bold by default for emphasis and to create contrast.",{"type":19,"tag":151,"props":152,"children":154},"h4",{"id":153},"fluid",[155],{"type":25,"value":156},"Fluid",{"type":19,"tag":158,"props":159,"children":161},"docs-type-class-table",{":type":160},"[{\"style\":[\"Heading 1\",{\"values\":[{\"Font size\":\"32px / 56px\"},{\"Line height\":\"36px / 60px\"},{\"Letter spacing\":\"1.4% / 0.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1\"]},{\"style\":[\"Heading 1 Highlight\",{\"values\":[{\"Font size\":\"32px / 56px\"},{\"Line height\":\"36px / 60px\"},{\"Letter spacing\":\"1.4% / 0.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1-highlight\"]},{\"style\":[\"Heading 2\",{\"values\":[{\"Font size\":\"24px / 32px\"},{\"Line height\":\"32px / 40px\"},{\"Letter spacing\":\"1.6% / 1.4%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h2\"]},{\"style\":[\"Heading 3\",{\"values\":[{\"Font size\":\"20px / 24px\"},{\"Line height\":\"28px / 32px\"},{\"Letter spacing\":\"1.8% / 1.6%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h3\"]},{\"style\":[\"Heading 3 Highlight\",{\"values\":[{\"Font size\":\"20px / 24px\"},{\"Line height\":\"28px / 32px\"},{\"Letter spacing\":\"1.8% / 1.6%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h3-highlight\"]},{\"style\":[\"Heading 4\",{\"values\":[{\"Font size\":\"16px / 20px\"},{\"Line height\":\"24px / 28px\"},{\"Letter spacing\":\"1.92% / 1.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h4\"]}]",[],{"type":19,"tag":151,"props":163,"children":165},{"id":164},"fixed",[166],{"type":25,"value":167},"Fixed",{"type":19,"tag":158,"props":169,"children":171},{":type":170},"[{\"style\":[\"Heading 1 Fixed\",{\"values\":[{\"Font size\":\"32px\"},{\"Line height\":\"36px\"},{\"Letter spacing\":\"1.4%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1-fixed\"]},{\"style\":[\"Heading 1 Highlight Fixed\",{\"values\":[{\"Font size\":\"32px\"},{\"Line height\":\"44px\"},{\"Letter spacing\":\"1.4%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h1-highlight-fixed\"]},{\"style\":[\"Heading 2 Fixed\",{\"values\":[{\"Font size\":\"24px\"},{\"Line height\":\"32px\"},{\"Letter spacing\":\"1.6%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h2-fixed\"]},{\"style\":[\"Heading 3 Fixed\",{\"values\":[{\"Font size\":\"20px\"},{\"Line height\":\"28px\"},{\"Letter spacing\":\"1.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h3-fixed\"]},{\"style\":[\"Heading 3 Highlight Fixed\",{\"values\":[{\"Font size\":\"20px\"},{\"Line height\":\"28px\"},{\"Letter spacing\":\"1.8%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h3-highlight-fixed\"]},{\"style\":[\"Heading 4 Fixed\",{\"values\":[{\"Font size\":\"16px\"},{\"Line height\":\"24px\"},{\"Letter spacing\":\"1.92%\"},{\"Font weight\":\"Bold (700)\"}]},\"rpl-type-h4-fixed\"]}]",[],{"type":19,"tag":139,"props":173,"children":175},{"id":174},"paragraph",[176],{"type":25,"value":177},"Paragraph",{"type":19,"tag":28,"props":179,"children":180},{},[181],{"type":25,"value":182},"The default paragraph font size is 16px on all screens.",{"type":19,"tag":28,"props":184,"children":185},{},[186],{"type":25,"value":187},"The majority of your body copy should use the standard 16px paragraph size.",{"type":19,"tag":158,"props":189,"children":191},{":type":190},"[{\"style\":[\"Paragraph Large\",{\"values\":[{\"Font size\":\"20px / 24px\"},{\"Line height\":\"28px / 32px\"},{\"Letter Spacing\":\"1.8% / 1.6%\"}]},\"rpl-type-p-large\"]},{\"style\":[\"Paragraph Large Fixed\",{\"values\":[{\"Font size\":\"20px\"},{\"Line height\":\"28px\"},{\"Letter Spacing\":\"1.8%\"}]},\"rpl-type-p-large-fixed\"]},{\"style\":[\"Paragraph Large Highlight\",{\"values\":[{\"Font size\":\"20px / 24px\"},{\"Line height\":\"28px / 32px\"},{\"Letter Spacing\":\"1.8% / 1.6%\"}]},\"rpl-type-p-large-highlight\"]},{\"style\":[\"Paragraph\",{\"values\":[{\"Font size\":\"16px\"},{\"Line height\":\"24px\"},{\"Letter spacing\":\"1.92%\"}]},\"rpl-type-p\"]},{\"style\":[\"Paragraph Small\",{\"values\":[{\"Font size\":\"14px\"},{\"Line height\":\"20px\"},{\"Letter spacing\":\"1.92%\"}]},\"rpl-type-p-small\"]}]",[],{"type":19,"tag":139,"props":193,"children":195},{"id":194},"lists",[196],{"type":25,"value":197},"Lists",{"type":19,"tag":28,"props":199,"children":200},{},[201],{"type":25,"value":202},"Use lists to make blocks of text easier to read, and to break information into manageable chunks.",{"type":19,"tag":28,"props":204,"children":205},{},[206],{"type":25,"value":207},"List styles are based on rpl-type-p with extra spacing.",{"type":25,"value":209},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":62,"props":211,"children":212},{},[213,239],{"type":19,"tag":66,"props":214,"children":215},{},[216],{"type":19,"tag":70,"props":217,"children":218},{},[219,224,229,234],{"type":19,"tag":74,"props":220,"children":221},{},[222],{"type":25,"value":223},"Margin Top",{"type":19,"tag":74,"props":225,"children":226},{},[227],{"type":25,"value":228},"Paragraph Spacing",{"type":19,"tag":74,"props":230,"children":231},{},[232],{"type":25,"value":233},"Item Spacing",{"type":19,"tag":74,"props":235,"children":236},{},[237],{"type":25,"value":238},"Indent Amount",{"type":19,"tag":90,"props":240,"children":241},{},[242],{"type":19,"tag":70,"props":243,"children":244},{},[245,250,255,259],{"type":19,"tag":97,"props":246,"children":247},{},[248],{"type":25,"value":249},"rpl-sp-4",{"type":19,"tag":97,"props":251,"children":252},{},[253],{"type":25,"value":254},"rpl-sp-2",{"type":19,"tag":97,"props":256,"children":257},{},[258],{"type":25,"value":254},{"type":19,"tag":97,"props":260,"children":261},{},[262],{"type":25,"value":263},"rpl-sp-9",{"type":19,"tag":151,"props":265,"children":267},{"id":266},"unordered-lists",[268],{"type":25,"value":269},"Unordered Lists",{"type":19,"tag":28,"props":271,"children":272},{},[273],{"type":25,"value":274},"Introduce bulleted lists with a lead-in line ending in a colon. Start each item with a lowercase letter, and do not use a full stop at the end.",{"type":19,"tag":28,"props":276,"children":277},{},[278],{"type":25,"value":279},"Unordered lists allow for two nested levels which are styled as:",{"type":19,"tag":124,"props":281,"children":282},{},[283,288],{"type":19,"tag":128,"props":284,"children":285},{},[286],{"type":25,"value":287},"level 1 - bullet",{"type":19,"tag":128,"props":289,"children":290},{},[291],{"type":25,"value":292},"level 2 - dash",{"type":19,"tag":294,"props":295,"children":298},"docs-image-example",{"alt":296,"src":297},"An example of an unordered list","/assets/img/unordered-list.png",[],{"type":19,"tag":151,"props":300,"children":302},{"id":301},"ordered-lists",[303],{"type":25,"value":304},"Ordered Lists",{"type":19,"tag":28,"props":306,"children":307},{},[308],{"type":25,"value":309},"Use numbered lists instead of bulleted lists when the order of the items is relevant.",{"type":19,"tag":28,"props":311,"children":312},{},[313],{"type":25,"value":314},"You do not need to use a lead-in line for numbered lists. Items in a numbered list should end in a full stop because each should be a complete sentence.",{"type":19,"tag":28,"props":316,"children":317},{},[318],{"type":25,"value":319},"Ordered lists allow for three nested levels which are styled as",{"type":19,"tag":124,"props":321,"children":322},{},[323,328,333],{"type":19,"tag":128,"props":324,"children":325},{},[326],{"type":25,"value":327},"level 1 - numbers",{"type":19,"tag":128,"props":329,"children":330},{},[331],{"type":25,"value":332},"level 2 - alphabet",{"type":19,"tag":128,"props":334,"children":335},{},[336],{"type":25,"value":337},"level 3 - roman numerals.",{"type":19,"tag":294,"props":339,"children":342},{"alt":340,"src":341},"An example of an ordered list","/assets/img/ordered-list.png",[],{"type":19,"tag":139,"props":344,"children":346},{"id":345},"text-alignment",[347],{"type":25,"value":348},"Text Alignment",{"type":19,"tag":28,"props":350,"children":351},{},[352],{"type":25,"value":353},"You should usually left-align body copy that’s read left to right. Right-aligned body copy can be hard for users to find and read when they magnify their screen.",{"type":19,"tag":28,"props":355,"children":356},{},[357],{"type":25,"value":358},"Do not ‘justify’ blocks of body copy so that they’re aligned to both the left and right margins. Doing this creates wider spaces between words, which can make the text hard to read.",{"type":19,"tag":139,"props":360,"children":362},{"id":361},"font-weight",[363],{"type":25,"value":364},"Font weight",{"type":19,"tag":28,"props":366,"children":367},{},[368],{"type":25,"value":369},"You can use bold to emphasise particular words in a transaction. Use it to highlight critical information that users need to refer to or you’ve seen them miss.",{"type":19,"tag":28,"props":371,"children":372},{},[373],{"type":25,"value":374},"Try to avoid bold. Overuse will make it difficult for users to know which parts of your content they need to pay the most attention to.",{"type":19,"tag":294,"props":376,"children":379},{"alt":377,"src":378},"Acomparison between regular text and bold text","/assets/img/font-weight.png",[],{"type":19,"tag":139,"props":381,"children":383},{"id":382},"links",[384],{"type":25,"value":385},"Links",{"type":19,"tag":28,"props":387,"children":388},{},[389],{"type":25,"value":390},"Links are blue and underlined by default. If your link is at the end of a sentence or paragraph, make sure that the linked text does not include the full stop.",{"type":19,"tag":294,"props":392,"children":395},{"alt":393,"src":394},"A visual example of a link within regular text","/assets/img/link.png",[],{"type":19,"tag":397,"props":398,"children":399},"hr",{},[],{"type":19,"tag":20,"props":401,"children":403},{"id":402},"list-of-variables",[404],{"type":25,"value":405},"List of variables",{"type":19,"tag":28,"props":407,"children":408},{},[409],{"type":25,"value":410},"All values are stored as variables nested in the type variable.",{"type":19,"tag":139,"props":412,"children":414},{"id":413},"type-size",[415],{"type":25,"value":416},"Type size",{"type":19,"tag":418,"props":419,"children":421},"docs-type-table",{"type":420},"size",[],{"type":19,"tag":139,"props":423,"children":425},{"id":424},"line-height",[426],{"type":25,"value":427},"Line Height",{"type":19,"tag":418,"props":429,"children":431},{"type":430},"lh",[],{"type":19,"tag":139,"props":433,"children":435},{"id":434},"letter-spacing",[436],{"type":25,"value":437},"Letter Spacing",{"type":19,"tag":418,"props":439,"children":441},{"type":440},"ls",[],{"type":19,"tag":139,"props":443,"children":445},{"id":444},"font-weights",[446],{"type":25,"value":447},"Font Weights",{"type":19,"tag":418,"props":449,"children":451},{"type":450},"weight",[],{"type":19,"tag":139,"props":453,"children":455},{"id":454},"list-styling",[456],{"type":25,"value":457},"List Styling",{"type":25,"value":459},"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n",{"type":19,"tag":62,"props":461,"children":462},{},[463,489],{"type":19,"tag":66,"props":464,"children":465},{},[466],{"type":19,"tag":70,"props":467,"children":468},{},[469,474,479,484],{"type":19,"tag":74,"props":470,"children":471},{},[472],{"type":25,"value":473},"Style",{"type":19,"tag":74,"props":475,"children":476},{},[477],{"type":25,"value":478},"Level 1",{"type":19,"tag":74,"props":480,"children":481},{},[482],{"type":25,"value":483},"Level 2",{"type":19,"tag":74,"props":485,"children":486},{},[487],{"type":25,"value":488},"Level 3",{"type":19,"tag":90,"props":490,"children":491},{},[492,513],{"type":19,"tag":70,"props":493,"children":494},{},[495,500,505,510],{"type":19,"tag":97,"props":496,"children":497},{},[498],{"type":25,"value":499},"Unordered list",{"type":19,"tag":97,"props":501,"children":502},{},[503],{"type":25,"value":504},"• (filled circle)",{"type":19,"tag":97,"props":506,"children":507},{},[508],{"type":25,"value":509},"- (dash)",{"type":19,"tag":97,"props":511,"children":512},{},[],{"type":19,"tag":70,"props":514,"children":515},{},[516,521,526,531],{"type":19,"tag":97,"props":517,"children":518},{},[519],{"type":25,"value":520},"Ordered List",{"type":19,"tag":97,"props":522,"children":523},{},[524],{"type":25,"value":525},"1. (numbers)",{"type":19,"tag":97,"props":527,"children":528},{},[529],{"type":25,"value":530},"a. (letters)",{"type":19,"tag":97,"props":532,"children":533},{},[534],{"type":25,"value":535},"i. (roman numerals)",{"title":10,"searchDepth":537,"depth":537,"links":538},2,[539,540,549],{"id":22,"depth":537,"text":26},{"id":114,"depth":537,"text":117,"children":541},[542,544,545,546,547,548],{"id":141,"depth":543,"text":144},3,{"id":174,"depth":543,"text":177},{"id":194,"depth":543,"text":197},{"id":345,"depth":543,"text":348},{"id":361,"depth":543,"text":364},{"id":382,"depth":543,"text":385},{"id":402,"depth":537,"text":405,"children":550},[551,552,553,554,555],{"id":413,"depth":543,"text":416},{"id":424,"depth":543,"text":427},{"id":434,"depth":543,"text":437},{"id":444,"depth":543,"text":447},{"id":454,"depth":543,"text":457},"markdown","content:design-system:4.styles:typography.md","content","design-system/4.styles/typography.md","md",["ShallowRef",562],["ShallowReactive",563],{"/design-system/styles/typography":564},[565,571],{"_path":566,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":567,"description":568,"layout":13,"label":14,"_type":556,"_id":569,"_source":558,"_file":570,"_extension":560},"/design-system/styles/spacing","Spacing","In components and layout, a defined set of spacing units provides good alignment and consistent spacing relationships.","content:design-system:4.styles:spacing.md","design-system/4.styles/spacing.md",{"_path":572,"_dir":573,"_draft":9,"_partial":9,"_locale":10,"title":574,"description":575,"layout":13,"label":14,"_type":556,"_id":576,"_source":558,"_file":577,"_extension":560},"/design-system/components/accordion","components","Accordion","The Accordion component is a panel designed to save space by hiding and revealing content as required.","content:design-system:5.components:accordion.md","design-system/5.components/accordion.md",["ShallowRef",579],{},[581,586,828],{"title":582,"_path":583,"icon":584,"layout":585},"Ripple Design System","/","carbon:home","home",{"title":587,"_path":588,"children":589},"Design System","/design-system",[590,606,622,652,682],{"title":591,"_path":592,"children":593},"About","/design-system/about",[594,597,600,603],{"title":595,"_path":596,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":598,"_path":599,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":601,"_path":602,"layout":13},"Support","/design-system/about/getting-support",{"title":604,"_path":605,"layout":13},"Contributing","/design-system/about/contributing",{"title":607,"_path":608,"children":609},"Design","/design-system/design",[610,613,616,619],{"title":611,"_path":612,"layout":13},"Getting started","/design-system/design/getting-started",{"title":614,"_path":615,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":617,"_path":618,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":620,"_path":621,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":623,"_path":624,"children":625},"Develop","/design-system/develop",[626,628,630,633],{"title":611,"_path":627,"layout":13},"/design-system/develop/getting-started",{"title":604,"_path":629,"layout":13},"/design-system/develop/contributing",{"title":631,"_path":632,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":634,"_path":635,"children":636,"layout":13},"Usage","/design-system/develop/usage",[637,640,643,646,649],{"title":638,"_path":639,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":641,"_path":642,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":644,"_path":645,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":647,"_path":648,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":650,"_path":651,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":653,"_path":654,"children":655},"Styles","/design-system/styles",[656,659,662,665,668,671,674,677,680,681],{"title":657,"_path":658,"layout":13},"Colour","/design-system/styles/colour",{"title":660,"_path":661,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":663,"_path":664,"layout":13},"Grid","/design-system/styles/grid",{"title":666,"_path":667,"layout":13},"Icons","/design-system/styles/icons",{"title":669,"_path":670,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":672,"_path":673,"layout":13},"Layout","/design-system/styles/layout",{"title":675,"_path":676,"layout":13},"Logo","/design-system/styles/logo",{"title":678,"_path":679,"layout":13},"Motion","/design-system/styles/motion",{"title":567,"_path":566,"layout":13},{"title":11,"_path":7,"layout":13},{"title":683,"_path":684,"children":685},"Components","/design-system/components",[686,687,690,693,696,699,702,705,708,711,714,717,720,723,726,729,732,735,738,741,744,747,750,753,756,759,762,765,768,771,774,777,780,783,786,789,792,795,798,801,804,807,810,813,816,819,822,825],{"title":574,"_path":572,"layout":13},{"title":688,"_path":689,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":691,"_path":692,"layout":13},"Alert","/design-system/components/alert",{"title":694,"_path":695,"layout":13},"Block quote","/design-system/components/block-quote",{"title":697,"_path":698,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":700,"_path":701,"layout":13},"Button","/design-system/components/button",{"title":703,"_path":704,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":706,"_path":707,"layout":13},"Callout","/design-system/components/callout",{"title":709,"_path":710,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":712,"_path":713,"layout":13},"Card","/design-system/components/card",{"title":715,"_path":716,"layout":13},"Carousel","/design-system/components/carousel",{"title":718,"_path":719,"layout":13},"Category grid","/design-system/components/category-grid",{"title":721,"_path":722,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":724,"_path":725,"layout":13},"Chip","/design-system/components/chip",{"title":727,"_path":728,"layout":13},"Contact us","/design-system/components/contact-us",{"title":730,"_path":731,"layout":13},"Date input","/design-system/components/date-input",{"title":733,"_path":734,"layout":13},"Detail list","/design-system/components/detail-list",{"title":736,"_path":737,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":739,"_path":740,"layout":13},"File","/design-system/components/file",{"title":742,"_path":743,"layout":13},"Footer","/design-system/components/footer",{"title":745,"_path":746,"layout":13},"Form","/design-system/components/form",{"title":748,"_path":749,"layout":13},"Form alert","/design-system/components/form-alert",{"title":751,"_path":752,"layout":13},"Header","/design-system/components/header",{"title":754,"_path":755,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":757,"_path":758,"layout":13},"Input field","/design-system/components/input-field",{"title":760,"_path":761,"layout":13},"Key dates","/design-system/components/key-dates",{"title":763,"_path":764,"layout":13},"Media","/design-system/components/media",{"title":766,"_path":767,"layout":13},"Media embed","/design-system/components/media-embed",{"title":769,"_path":770,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":772,"_path":773,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":775,"_path":776,"layout":13},"Option button","/design-system/components/option-button",{"title":778,"_path":779,"layout":13},"Page action","/design-system/components/page-action",{"title":781,"_path":782,"layout":13},"Pagination","/design-system/components/pagination",{"title":784,"_path":785,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":787,"_path":788,"layout":13},"Profile","/design-system/components/profile",{"title":790,"_path":791,"layout":13},"Radio button","/design-system/components/radio-button",{"title":793,"_path":794,"layout":13},"Related links","/design-system/components/related-links",{"title":796,"_path":797,"layout":13},"Results listing","/design-system/components/results-listing",{"title":799,"_path":800,"layout":13},"Search bar","/design-system/components/search-bar",{"title":802,"_path":803,"layout":13},"Skip link","/design-system/components/skip-link",{"title":805,"_path":806,"layout":13},"Social share","/design-system/components/social-share",{"title":808,"_path":809,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":811,"_path":812,"layout":13},"Table","/design-system/components/table",{"title":814,"_path":815,"layout":13},"Tabs","/design-system/components/tabs",{"title":817,"_path":818,"layout":13},"Tag","/design-system/components/tag",{"title":820,"_path":821,"layout":13},"Text area","/design-system/components/text-area",{"title":823,"_path":824,"layout":13},"Timeline","/design-system/components/timeline",{"title":826,"_path":827,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":829,"_path":830,"children":831,"layout":13},"Ripple Framework","/framework",[832,833,851,873],{"title":829,"_path":830,"layout":13},{"title":834,"_path":835,"children":836},"Key Concepts","/framework/key-concepts",[837,839,842,845,848],{"title":644,"_path":838,"layout":13},"/framework/key-concepts/nuxt",{"title":840,"_path":841,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":843,"_path":844,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":846,"_path":847,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":849,"_path":850,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":852,"_path":853,"children":854},"Guides","/framework/guides",[855,858,861,864,867,870],{"title":856,"_path":857,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":859,"_path":860,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":862,"_path":863,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":865,"_path":866,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":868,"_path":869,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":871,"_path":872,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":874,"_path":875,"layout":13},"Core modules","/framework/core-modules",["Reactive",877],["Set"],["Reactive",879],{"module-navigation":880},null,true,1714695650857]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/framework/_payload.json b/framework/_payload.json
index 581178e357..634799bf00 100644
--- a/framework/_payload.json
+++ b/framework/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,28,50],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",true,{"id":9,"text":10,"url":9,"active":11,"items":12},"/framework/key-concepts","Key Concepts",false,[13,16,19,22,25],{"id":14,"text":15,"url":14,"active":11,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":17,"text":18,"url":17,"active":11,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":20,"text":21,"url":20,"active":11,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":23,"text":24,"url":23,"active":11,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":26,"text":27,"url":26,"active":11,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":29,"text":30,"url":29,"active":11,"items":31},"/framework/guides","Guides",[32,35,38,41,44,47],{"id":33,"text":34,"url":33,"active":11,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":36,"text":37,"url":36,"active":11,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":39,"text":40,"url":39,"active":11,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":42,"text":43,"url":42,"active":11,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":45,"text":46,"url":45,"active":11,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":48,"text":49,"url":48,"active":11,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":51,"text":52,"url":51,"active":11,"items":-1},"/framework/core-modules","Core modules",1714695150862]
\ No newline at end of file
+[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,28,50],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",true,{"id":9,"text":10,"url":9,"active":11,"items":12},"/framework/key-concepts","Key Concepts",false,[13,16,19,22,25],{"id":14,"text":15,"url":14,"active":11,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":17,"text":18,"url":17,"active":11,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":20,"text":21,"url":20,"active":11,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":23,"text":24,"url":23,"active":11,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":26,"text":27,"url":26,"active":11,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":29,"text":30,"url":29,"active":11,"items":31},"/framework/guides","Guides",[32,35,38,41,44,47],{"id":33,"text":34,"url":33,"active":11,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":36,"text":37,"url":36,"active":11,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":39,"text":40,"url":39,"active":11,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":42,"text":43,"url":42,"active":11,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":45,"text":46,"url":45,"active":11,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":48,"text":49,"url":48,"active":11,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":51,"text":52,"url":51,"active":11,"items":-1},"/framework/core-modules","Core modules",1714695649116]
\ No newline at end of file
diff --git a/framework/core-modules/_payload.json b/framework/core-modules/_payload.json
index 5fa4c4eaf5..e67bf4eaf3 100644
--- a/framework/core-modules/_payload.json
+++ b/framework/core-modules/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,27,49],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",false,{"id":9,"text":10,"url":9,"active":7,"items":11},"/framework/key-concepts","Key Concepts",[12,15,18,21,24],{"id":13,"text":14,"url":13,"active":7,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":22,"text":23,"url":22,"active":7,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":25,"text":26,"url":25,"active":7,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":28,"text":29,"url":28,"active":7,"items":30},"/framework/guides","Guides",[31,34,37,40,43,46],{"id":32,"text":33,"url":32,"active":7,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":38,"text":39,"url":38,"active":7,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":41,"text":42,"url":41,"active":7,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":44,"text":45,"url":44,"active":7,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":50,"text":51,"url":50,"active":52,"items":-1},"/framework/core-modules","Core modules",true,1714695151364]
\ No newline at end of file
+[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,27,49],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",false,{"id":9,"text":10,"url":9,"active":7,"items":11},"/framework/key-concepts","Key Concepts",[12,15,18,21,24],{"id":13,"text":14,"url":13,"active":7,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":22,"text":23,"url":22,"active":7,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":25,"text":26,"url":25,"active":7,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":28,"text":29,"url":28,"active":7,"items":30},"/framework/guides","Guides",[31,34,37,40,43,46],{"id":32,"text":33,"url":32,"active":7,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":35,"text":36,"url":35,"active":7,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":38,"text":39,"url":38,"active":7,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":41,"text":42,"url":41,"active":7,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":44,"text":45,"url":44,"active":7,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":47,"text":48,"url":47,"active":7,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":50,"text":51,"url":50,"active":52,"items":-1},"/framework/core-modules","Core modules",true,1714695649606]
\ No newline at end of file
diff --git a/framework/core-modules/index.html b/framework/core-modules/index.html
index c5f9d600ce..96a9a4910b 100644
--- a/framework/core-modules/index.html
+++ b/framework/core-modules/index.html
@@ -23,64 +23,64 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.uDpSgjM7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.iJ9KJvnk.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Nuxt</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/api-endpoints" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>API endpoints</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dynamic components</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/guides-toggle"><span class="rpl-vertical-nav__toggle-text">Guides</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/guides-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/migrating" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Migrating from Ripple 1.x</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/new-sites" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Setting up a new site</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/brand-application" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Applying theme and brand</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-new-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating new layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Adding a new dynamic component</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><!----><a href="/framework/core-modules" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Core modules</span><!--]--></a></li><!--]--></ul></nav><a href="/design-system/about/what-is-ripple" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Design System<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Core modules</h1><p class="rpl-type-p-large" data-v-3163c6df>A listing of all current core Ripple layers and packages</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->View each package on NPM for their individual READMEs.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="core-ui-libraries" data-v-fff5b905><a href="#core-ui-libraries" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Core UI Libraries<!--]--></a></h2><ul><!--[--><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/ripple-ui-core" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-ui-core<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/ripple-ui-forms" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-ui-forms<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="tide-api" data-v-fff5b905><a href="#tide-api" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Tide API<!--]--></a></h2><ul><!--[--><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/ripple-tide-api" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-tide-api<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="nuxt-ripple-base-layer" data-v-fff5b905><a href="#nuxt-ripple-base-layer" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Nuxt-ripple base layer<!--]--></a></h2><ul><!--[--><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->nuxt-ripple<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="core-content-types" data-v-fff5b905><a href="#core-content-types" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Core content types<!--]--></a></h2><ul><!--[--><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/ripple-tide-landing-page" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-tide-landing-page<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/ripple-tide-event" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-tide-event<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/ripple-tide-grant" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-tide-grant<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/ripple-tide-media" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-tide-media<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/ripple-tide-news" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-tide-news<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/ripple-tide-publication" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-tide-publication<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="other-core-modules" data-v-fff5b905><a href="#other-core-modules" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Other core modules<!--]--></a></h2><ul><!--[--><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/ripple-tide-search" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-tide-search<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-analytics" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->nuxt-ripple-analytics<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-preview" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->nuxt-ripple-preview<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="scaffolding-testing-and-supporting-packages" data-v-fff5b905><a href="#scaffolding-testing-and-supporting-packages" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Scaffolding, testing and supporting packages<!--]--></a></h2><ul><!--[--><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-cli" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->nuxt-ripple-cli<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/ripple-test-utils" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-test-utils<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/4.core-modules.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/core-modules/_payload.json">[{"state":1,"once":621,"_errors":623,"serverRendered":625,"path":7,"prerenderedAt":626},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":309,"$sdd-globals":321,"$sdd-navigation":323},["ShallowRef",4],["ShallowReactive",5],{"/framework/core-modules":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":304,"_id":305,"_source":306,"_file":307,"_extension":308},"/framework/core-modules","framework",false,"","Core modules","A listing of all current core Ripple layers and packages","page",{"type":15,"children":16,"toc":295},"root",[17,25,32,68,74,91,97,114,120,207,213,258,264],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22],{"type":23,"value":24},"text","View each package on NPM for their individual READMEs.",{"type":18,"tag":26,"props":27,"children":29},"h2",{"id":28},"core-ui-libraries",[30],{"type":23,"value":31},"Core UI Libraries",{"type":18,"tag":33,"props":34,"children":35},"ul",{},[36,54],{"type":18,"tag":37,"props":38,"children":39},"li",{},[40],{"type":18,"tag":41,"props":42,"children":46},"a",{"href":43,"rel":44},"https://www.npmjs.com/package/@dpc-sdp/ripple-ui-core",[45],"nofollow",[47],{"type":18,"tag":48,"props":49,"children":51},"code",{"className":50},[],[52],{"type":23,"value":53},"ripple-ui-core",{"type":18,"tag":37,"props":55,"children":56},{},[57],{"type":18,"tag":41,"props":58,"children":61},{"href":59,"rel":60},"https://www.npmjs.com/package/@dpc-sdp/ripple-ui-forms",[45],[62],{"type":18,"tag":48,"props":63,"children":65},{"className":64},[],[66],{"type":23,"value":67},"ripple-ui-forms",{"type":18,"tag":26,"props":69,"children":71},{"id":70},"tide-api",[72],{"type":23,"value":73},"Tide API",{"type":18,"tag":33,"props":75,"children":76},{},[77],{"type":18,"tag":37,"props":78,"children":79},{},[80],{"type":18,"tag":41,"props":81,"children":84},{"href":82,"rel":83},"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-api",[45],[85],{"type":18,"tag":48,"props":86,"children":88},{"className":87},[],[89],{"type":23,"value":90},"ripple-tide-api",{"type":18,"tag":26,"props":92,"children":94},{"id":93},"nuxt-ripple-base-layer",[95],{"type":23,"value":96},"Nuxt-ripple base layer",{"type":18,"tag":33,"props":98,"children":99},{},[100],{"type":18,"tag":37,"props":101,"children":102},{},[103],{"type":18,"tag":41,"props":104,"children":107},{"href":105,"rel":106},"https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple",[45],[108],{"type":18,"tag":48,"props":109,"children":111},{"className":110},[],[112],{"type":23,"value":113},"nuxt-ripple",{"type":18,"tag":26,"props":115,"children":117},{"id":116},"core-content-types",[118],{"type":23,"value":119},"Core content types",{"type":18,"tag":33,"props":121,"children":122},{},[123,137,151,165,179,193],{"type":18,"tag":37,"props":124,"children":125},{},[126],{"type":18,"tag":41,"props":127,"children":130},{"href":128,"rel":129},"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-landing-page",[45],[131],{"type":18,"tag":48,"props":132,"children":134},{"className":133},[],[135],{"type":23,"value":136},"ripple-tide-landing-page",{"type":18,"tag":37,"props":138,"children":139},{},[140],{"type":18,"tag":41,"props":141,"children":144},{"href":142,"rel":143},"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-event",[45],[145],{"type":18,"tag":48,"props":146,"children":148},{"className":147},[],[149],{"type":23,"value":150},"ripple-tide-event",{"type":18,"tag":37,"props":152,"children":153},{},[154],{"type":18,"tag":41,"props":155,"children":158},{"href":156,"rel":157},"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-grant",[45],[159],{"type":18,"tag":48,"props":160,"children":162},{"className":161},[],[163],{"type":23,"value":164},"ripple-tide-grant",{"type":18,"tag":37,"props":166,"children":167},{},[168],{"type":18,"tag":41,"props":169,"children":172},{"href":170,"rel":171},"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-media",[45],[173],{"type":18,"tag":48,"props":174,"children":176},{"className":175},[],[177],{"type":23,"value":178},"ripple-tide-media",{"type":18,"tag":37,"props":180,"children":181},{},[182],{"type":18,"tag":41,"props":183,"children":186},{"href":184,"rel":185},"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-news",[45],[187],{"type":18,"tag":48,"props":188,"children":190},{"className":189},[],[191],{"type":23,"value":192},"ripple-tide-news",{"type":18,"tag":37,"props":194,"children":195},{},[196],{"type":18,"tag":41,"props":197,"children":200},{"href":198,"rel":199},"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-publication",[45],[201],{"type":18,"tag":48,"props":202,"children":204},{"className":203},[],[205],{"type":23,"value":206},"ripple-tide-publication",{"type":18,"tag":26,"props":208,"children":210},{"id":209},"other-core-modules",[211],{"type":23,"value":212},"Other core modules",{"type":18,"tag":33,"props":214,"children":215},{},[216,230,244],{"type":18,"tag":37,"props":217,"children":218},{},[219],{"type":18,"tag":41,"props":220,"children":223},{"href":221,"rel":222},"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-search",[45],[224],{"type":18,"tag":48,"props":225,"children":227},{"className":226},[],[228],{"type":23,"value":229},"ripple-tide-search",{"type":18,"tag":37,"props":231,"children":232},{},[233],{"type":18,"tag":41,"props":234,"children":237},{"href":235,"rel":236},"https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-analytics",[45],[238],{"type":18,"tag":48,"props":239,"children":241},{"className":240},[],[242],{"type":23,"value":243},"nuxt-ripple-analytics",{"type":18,"tag":37,"props":245,"children":246},{},[247],{"type":18,"tag":41,"props":248,"children":251},{"href":249,"rel":250},"https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-preview",[45],[252],{"type":18,"tag":48,"props":253,"children":255},{"className":254},[],[256],{"type":23,"value":257},"nuxt-ripple-preview",{"type":18,"tag":26,"props":259,"children":261},{"id":260},"scaffolding-testing-and-supporting-packages",[262],{"type":23,"value":263},"Scaffolding, testing and supporting packages",{"type":18,"tag":33,"props":265,"children":266},{},[267,281],{"type":18,"tag":37,"props":268,"children":269},{},[270],{"type":18,"tag":41,"props":271,"children":274},{"href":272,"rel":273},"https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-cli",[45],[275],{"type":18,"tag":48,"props":276,"children":278},{"className":277},[],[279],{"type":23,"value":280},"nuxt-ripple-cli",{"type":18,"tag":37,"props":282,"children":283},{},[284],{"type":18,"tag":41,"props":285,"children":288},{"href":286,"rel":287},"https://www.npmjs.com/package/@dpc-sdp/ripple-test-utils",[45],[289],{"type":18,"tag":48,"props":290,"children":292},{"className":291},[],[293],{"type":23,"value":294},"ripple-test-utils",{"title":10,"searchDepth":296,"depth":296,"links":297},2,[298,299,300,301,302,303],{"id":28,"depth":296,"text":31},{"id":70,"depth":296,"text":73},{"id":93,"depth":296,"text":96},{"id":116,"depth":296,"text":119},{"id":209,"depth":296,"text":212},{"id":260,"depth":296,"text":263},"markdown","content:framework:4.core-modules.md","content","framework/4.core-modules.md","md",["ShallowRef",310],["ShallowReactive",311],{"/framework/core-modules":312},[313,320],{"_path":314,"_dir":315,"_draft":9,"_partial":9,"_locale":10,"title":316,"description":317,"layout":13,"_type":304,"_id":318,"_source":306,"_file":319,"_extension":308},"/framework/guides/dynamic-components","guides","Adding a new dynamic component","Learn how to add a new dynamic page component to a content type","content:framework:3.guides:5.dynamic-components.md","framework/3.guides/5.dynamic-components.md",null,["ShallowRef",322],{},[324,329,577],{"title":325,"_path":326,"icon":327,"layout":328},"Ripple Design System","/","carbon:home","home",{"title":330,"_path":331,"children":332},"Design System","/design-system",[333,349,365,395,429],{"title":334,"_path":335,"children":336},"About","/design-system/about",[337,340,343,346],{"title":338,"_path":339,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":341,"_path":342,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":344,"_path":345,"layout":13},"Support","/design-system/about/getting-support",{"title":347,"_path":348,"layout":13},"Contributing","/design-system/about/contributing",{"title":350,"_path":351,"children":352},"Design","/design-system/design",[353,356,359,362],{"title":354,"_path":355,"layout":13},"Getting started","/design-system/design/getting-started",{"title":357,"_path":358,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":360,"_path":361,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":363,"_path":364,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":366,"_path":367,"children":368},"Develop","/design-system/develop",[369,371,373,376],{"title":354,"_path":370,"layout":13},"/design-system/develop/getting-started",{"title":347,"_path":372,"layout":13},"/design-system/develop/contributing",{"title":374,"_path":375,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":377,"_path":378,"children":379,"layout":13},"Usage","/design-system/develop/usage",[380,383,386,389,392],{"title":381,"_path":382,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":384,"_path":385,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":387,"_path":388,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":390,"_path":391,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":393,"_path":394,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":396,"_path":397,"children":398},"Styles","/design-system/styles",[399,402,405,408,411,414,417,420,423,426],{"title":400,"_path":401,"layout":13},"Colour","/design-system/styles/colour",{"title":403,"_path":404,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":406,"_path":407,"layout":13},"Grid","/design-system/styles/grid",{"title":409,"_path":410,"layout":13},"Icons","/design-system/styles/icons",{"title":412,"_path":413,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":415,"_path":416,"layout":13},"Layout","/design-system/styles/layout",{"title":418,"_path":419,"layout":13},"Logo","/design-system/styles/logo",{"title":421,"_path":422,"layout":13},"Motion","/design-system/styles/motion",{"title":424,"_path":425,"layout":13},"Spacing","/design-system/styles/spacing",{"title":427,"_path":428,"layout":13},"Typography","/design-system/styles/typography",{"title":430,"_path":431,"children":432},"Components","/design-system/components",[433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,490,493,496,499,502,505,508,511,514,517,520,523,526,529,532,535,538,541,544,547,550,553,556,559,562,565,568,571,574],{"title":434,"_path":435,"layout":13},"Accordion","/design-system/components/accordion",{"title":437,"_path":438,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":440,"_path":441,"layout":13},"Alert","/design-system/components/alert",{"title":443,"_path":444,"layout":13},"Block quote","/design-system/components/block-quote",{"title":446,"_path":447,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":449,"_path":450,"layout":13},"Button","/design-system/components/button",{"title":452,"_path":453,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":455,"_path":456,"layout":13},"Callout","/design-system/components/callout",{"title":458,"_path":459,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":461,"_path":462,"layout":13},"Card","/design-system/components/card",{"title":464,"_path":465,"layout":13},"Carousel","/design-system/components/carousel",{"title":467,"_path":468,"layout":13},"Category grid","/design-system/components/category-grid",{"title":470,"_path":471,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":473,"_path":474,"layout":13},"Chip","/design-system/components/chip",{"title":476,"_path":477,"layout":13},"Contact us","/design-system/components/contact-us",{"title":479,"_path":480,"layout":13},"Date input","/design-system/components/date-input",{"title":482,"_path":483,"layout":13},"Detail list","/design-system/components/detail-list",{"title":485,"_path":486,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":488,"_path":489,"layout":13},"File","/design-system/components/file",{"title":491,"_path":492,"layout":13},"Footer","/design-system/components/footer",{"title":494,"_path":495,"layout":13},"Form","/design-system/components/form",{"title":497,"_path":498,"layout":13},"Form alert","/design-system/components/form-alert",{"title":500,"_path":501,"layout":13},"Header","/design-system/components/header",{"title":503,"_path":504,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":506,"_path":507,"layout":13},"Input field","/design-system/components/input-field",{"title":509,"_path":510,"layout":13},"Key dates","/design-system/components/key-dates",{"title":512,"_path":513,"layout":13},"Media","/design-system/components/media",{"title":515,"_path":516,"layout":13},"Media embed","/design-system/components/media-embed",{"title":518,"_path":519,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":521,"_path":522,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":524,"_path":525,"layout":13},"Option button","/design-system/components/option-button",{"title":527,"_path":528,"layout":13},"Page action","/design-system/components/page-action",{"title":530,"_path":531,"layout":13},"Pagination","/design-system/components/pagination",{"title":533,"_path":534,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":536,"_path":537,"layout":13},"Profile","/design-system/components/profile",{"title":539,"_path":540,"layout":13},"Radio button","/design-system/components/radio-button",{"title":542,"_path":543,"layout":13},"Related links","/design-system/components/related-links",{"title":545,"_path":546,"layout":13},"Results listing","/design-system/components/results-listing",{"title":548,"_path":549,"layout":13},"Search bar","/design-system/components/search-bar",{"title":551,"_path":552,"layout":13},"Skip link","/design-system/components/skip-link",{"title":554,"_path":555,"layout":13},"Social share","/design-system/components/social-share",{"title":557,"_path":558,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":560,"_path":561,"layout":13},"Table","/design-system/components/table",{"title":563,"_path":564,"layout":13},"Tabs","/design-system/components/tabs",{"title":566,"_path":567,"layout":13},"Tag","/design-system/components/tag",{"title":569,"_path":570,"layout":13},"Text area","/design-system/components/text-area",{"title":572,"_path":573,"layout":13},"Timeline","/design-system/components/timeline",{"title":575,"_path":576,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":578,"_path":579,"children":580,"layout":13},"Ripple Framework","/framework",[581,582,600,620],{"title":578,"_path":579,"layout":13},{"title":583,"_path":584,"children":585},"Key Concepts","/framework/key-concepts",[586,588,591,594,597],{"title":387,"_path":587,"layout":13},"/framework/key-concepts/nuxt",{"title":589,"_path":590,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":592,"_path":593,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":595,"_path":596,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":598,"_path":599,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":601,"_path":602,"children":603},"Guides","/framework/guides",[604,607,610,613,616,619],{"title":605,"_path":606,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":608,"_path":609,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":611,"_path":612,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":614,"_path":615,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":617,"_path":618,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":316,"_path":314,"layout":13},{"title":11,"_path":7,"layout":13},["Reactive",622],["Set"],["Reactive",624],{"module-navigation":320},true,1714695151364]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/migrating" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Migrating from Ripple 1.x</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/new-sites" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Setting up a new site</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/brand-application" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Applying theme and brand</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-new-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating new layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Adding a new dynamic component</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><!----><a href="/framework/core-modules" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Core modules</span><!--]--></a></li><!--]--></ul></nav><a href="/design-system/about/what-is-ripple" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Design System<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Core modules</h1><p class="rpl-type-p-large" data-v-3163c6df>A listing of all current core Ripple layers and packages</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->View each package on NPM for their individual READMEs.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="core-ui-libraries" data-v-fff5b905><a href="#core-ui-libraries" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Core UI Libraries<!--]--></a></h2><ul><!--[--><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/ripple-ui-core" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-ui-core<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/ripple-ui-forms" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-ui-forms<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="tide-api" data-v-fff5b905><a href="#tide-api" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Tide API<!--]--></a></h2><ul><!--[--><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/ripple-tide-api" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-tide-api<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="nuxt-ripple-base-layer" data-v-fff5b905><a href="#nuxt-ripple-base-layer" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Nuxt-ripple base layer<!--]--></a></h2><ul><!--[--><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->nuxt-ripple<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="core-content-types" data-v-fff5b905><a href="#core-content-types" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Core content types<!--]--></a></h2><ul><!--[--><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/ripple-tide-landing-page" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-tide-landing-page<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/ripple-tide-event" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-tide-event<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/ripple-tide-grant" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-tide-grant<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/ripple-tide-media" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-tide-media<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/ripple-tide-news" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-tide-news<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/ripple-tide-publication" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-tide-publication<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="other-core-modules" data-v-fff5b905><a href="#other-core-modules" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Other core modules<!--]--></a></h2><ul><!--[--><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/ripple-tide-search" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-tide-search<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-analytics" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->nuxt-ripple-analytics<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-preview" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->nuxt-ripple-preview<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="scaffolding-testing-and-supporting-packages" data-v-fff5b905><a href="#scaffolding-testing-and-supporting-packages" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Scaffolding, testing and supporting packages<!--]--></a></h2><ul><!--[--><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-cli" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->nuxt-ripple-cli<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://www.npmjs.com/package/@dpc-sdp/ripple-test-utils" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--><code class="docs-code-inline" data-v-2e6046ca><!--[-->ripple-test-utils<!--]--></code><!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/4.core-modules.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/core-modules/_payload.json">[{"state":1,"once":621,"_errors":623,"serverRendered":625,"path":7,"prerenderedAt":626},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":309,"$sdd-globals":321,"$sdd-navigation":323},["ShallowRef",4],["ShallowReactive",5],{"/framework/core-modules":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":304,"_id":305,"_source":306,"_file":307,"_extension":308},"/framework/core-modules","framework",false,"","Core modules","A listing of all current core Ripple layers and packages","page",{"type":15,"children":16,"toc":295},"root",[17,25,32,68,74,91,97,114,120,207,213,258,264],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22],{"type":23,"value":24},"text","View each package on NPM for their individual READMEs.",{"type":18,"tag":26,"props":27,"children":29},"h2",{"id":28},"core-ui-libraries",[30],{"type":23,"value":31},"Core UI Libraries",{"type":18,"tag":33,"props":34,"children":35},"ul",{},[36,54],{"type":18,"tag":37,"props":38,"children":39},"li",{},[40],{"type":18,"tag":41,"props":42,"children":46},"a",{"href":43,"rel":44},"https://www.npmjs.com/package/@dpc-sdp/ripple-ui-core",[45],"nofollow",[47],{"type":18,"tag":48,"props":49,"children":51},"code",{"className":50},[],[52],{"type":23,"value":53},"ripple-ui-core",{"type":18,"tag":37,"props":55,"children":56},{},[57],{"type":18,"tag":41,"props":58,"children":61},{"href":59,"rel":60},"https://www.npmjs.com/package/@dpc-sdp/ripple-ui-forms",[45],[62],{"type":18,"tag":48,"props":63,"children":65},{"className":64},[],[66],{"type":23,"value":67},"ripple-ui-forms",{"type":18,"tag":26,"props":69,"children":71},{"id":70},"tide-api",[72],{"type":23,"value":73},"Tide API",{"type":18,"tag":33,"props":75,"children":76},{},[77],{"type":18,"tag":37,"props":78,"children":79},{},[80],{"type":18,"tag":41,"props":81,"children":84},{"href":82,"rel":83},"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-api",[45],[85],{"type":18,"tag":48,"props":86,"children":88},{"className":87},[],[89],{"type":23,"value":90},"ripple-tide-api",{"type":18,"tag":26,"props":92,"children":94},{"id":93},"nuxt-ripple-base-layer",[95],{"type":23,"value":96},"Nuxt-ripple base layer",{"type":18,"tag":33,"props":98,"children":99},{},[100],{"type":18,"tag":37,"props":101,"children":102},{},[103],{"type":18,"tag":41,"props":104,"children":107},{"href":105,"rel":106},"https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple",[45],[108],{"type":18,"tag":48,"props":109,"children":111},{"className":110},[],[112],{"type":23,"value":113},"nuxt-ripple",{"type":18,"tag":26,"props":115,"children":117},{"id":116},"core-content-types",[118],{"type":23,"value":119},"Core content types",{"type":18,"tag":33,"props":121,"children":122},{},[123,137,151,165,179,193],{"type":18,"tag":37,"props":124,"children":125},{},[126],{"type":18,"tag":41,"props":127,"children":130},{"href":128,"rel":129},"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-landing-page",[45],[131],{"type":18,"tag":48,"props":132,"children":134},{"className":133},[],[135],{"type":23,"value":136},"ripple-tide-landing-page",{"type":18,"tag":37,"props":138,"children":139},{},[140],{"type":18,"tag":41,"props":141,"children":144},{"href":142,"rel":143},"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-event",[45],[145],{"type":18,"tag":48,"props":146,"children":148},{"className":147},[],[149],{"type":23,"value":150},"ripple-tide-event",{"type":18,"tag":37,"props":152,"children":153},{},[154],{"type":18,"tag":41,"props":155,"children":158},{"href":156,"rel":157},"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-grant",[45],[159],{"type":18,"tag":48,"props":160,"children":162},{"className":161},[],[163],{"type":23,"value":164},"ripple-tide-grant",{"type":18,"tag":37,"props":166,"children":167},{},[168],{"type":18,"tag":41,"props":169,"children":172},{"href":170,"rel":171},"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-media",[45],[173],{"type":18,"tag":48,"props":174,"children":176},{"className":175},[],[177],{"type":23,"value":178},"ripple-tide-media",{"type":18,"tag":37,"props":180,"children":181},{},[182],{"type":18,"tag":41,"props":183,"children":186},{"href":184,"rel":185},"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-news",[45],[187],{"type":18,"tag":48,"props":188,"children":190},{"className":189},[],[191],{"type":23,"value":192},"ripple-tide-news",{"type":18,"tag":37,"props":194,"children":195},{},[196],{"type":18,"tag":41,"props":197,"children":200},{"href":198,"rel":199},"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-publication",[45],[201],{"type":18,"tag":48,"props":202,"children":204},{"className":203},[],[205],{"type":23,"value":206},"ripple-tide-publication",{"type":18,"tag":26,"props":208,"children":210},{"id":209},"other-core-modules",[211],{"type":23,"value":212},"Other core modules",{"type":18,"tag":33,"props":214,"children":215},{},[216,230,244],{"type":18,"tag":37,"props":217,"children":218},{},[219],{"type":18,"tag":41,"props":220,"children":223},{"href":221,"rel":222},"https://www.npmjs.com/package/@dpc-sdp/ripple-tide-search",[45],[224],{"type":18,"tag":48,"props":225,"children":227},{"className":226},[],[228],{"type":23,"value":229},"ripple-tide-search",{"type":18,"tag":37,"props":231,"children":232},{},[233],{"type":18,"tag":41,"props":234,"children":237},{"href":235,"rel":236},"https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-analytics",[45],[238],{"type":18,"tag":48,"props":239,"children":241},{"className":240},[],[242],{"type":23,"value":243},"nuxt-ripple-analytics",{"type":18,"tag":37,"props":245,"children":246},{},[247],{"type":18,"tag":41,"props":248,"children":251},{"href":249,"rel":250},"https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-preview",[45],[252],{"type":18,"tag":48,"props":253,"children":255},{"className":254},[],[256],{"type":23,"value":257},"nuxt-ripple-preview",{"type":18,"tag":26,"props":259,"children":261},{"id":260},"scaffolding-testing-and-supporting-packages",[262],{"type":23,"value":263},"Scaffolding, testing and supporting packages",{"type":18,"tag":33,"props":265,"children":266},{},[267,281],{"type":18,"tag":37,"props":268,"children":269},{},[270],{"type":18,"tag":41,"props":271,"children":274},{"href":272,"rel":273},"https://www.npmjs.com/package/@dpc-sdp/nuxt-ripple-cli",[45],[275],{"type":18,"tag":48,"props":276,"children":278},{"className":277},[],[279],{"type":23,"value":280},"nuxt-ripple-cli",{"type":18,"tag":37,"props":282,"children":283},{},[284],{"type":18,"tag":41,"props":285,"children":288},{"href":286,"rel":287},"https://www.npmjs.com/package/@dpc-sdp/ripple-test-utils",[45],[289],{"type":18,"tag":48,"props":290,"children":292},{"className":291},[],[293],{"type":23,"value":294},"ripple-test-utils",{"title":10,"searchDepth":296,"depth":296,"links":297},2,[298,299,300,301,302,303],{"id":28,"depth":296,"text":31},{"id":70,"depth":296,"text":73},{"id":93,"depth":296,"text":96},{"id":116,"depth":296,"text":119},{"id":209,"depth":296,"text":212},{"id":260,"depth":296,"text":263},"markdown","content:framework:4.core-modules.md","content","framework/4.core-modules.md","md",["ShallowRef",310],["ShallowReactive",311],{"/framework/core-modules":312},[313,320],{"_path":314,"_dir":315,"_draft":9,"_partial":9,"_locale":10,"title":316,"description":317,"layout":13,"_type":304,"_id":318,"_source":306,"_file":319,"_extension":308},"/framework/guides/dynamic-components","guides","Adding a new dynamic component","Learn how to add a new dynamic page component to a content type","content:framework:3.guides:5.dynamic-components.md","framework/3.guides/5.dynamic-components.md",null,["ShallowRef",322],{},[324,329,577],{"title":325,"_path":326,"icon":327,"layout":328},"Ripple Design System","/","carbon:home","home",{"title":330,"_path":331,"children":332},"Design System","/design-system",[333,349,365,395,429],{"title":334,"_path":335,"children":336},"About","/design-system/about",[337,340,343,346],{"title":338,"_path":339,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":341,"_path":342,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":344,"_path":345,"layout":13},"Support","/design-system/about/getting-support",{"title":347,"_path":348,"layout":13},"Contributing","/design-system/about/contributing",{"title":350,"_path":351,"children":352},"Design","/design-system/design",[353,356,359,362],{"title":354,"_path":355,"layout":13},"Getting started","/design-system/design/getting-started",{"title":357,"_path":358,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":360,"_path":361,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":363,"_path":364,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":366,"_path":367,"children":368},"Develop","/design-system/develop",[369,371,373,376],{"title":354,"_path":370,"layout":13},"/design-system/develop/getting-started",{"title":347,"_path":372,"layout":13},"/design-system/develop/contributing",{"title":374,"_path":375,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":377,"_path":378,"children":379,"layout":13},"Usage","/design-system/develop/usage",[380,383,386,389,392],{"title":381,"_path":382,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":384,"_path":385,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":387,"_path":388,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":390,"_path":391,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":393,"_path":394,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":396,"_path":397,"children":398},"Styles","/design-system/styles",[399,402,405,408,411,414,417,420,423,426],{"title":400,"_path":401,"layout":13},"Colour","/design-system/styles/colour",{"title":403,"_path":404,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":406,"_path":407,"layout":13},"Grid","/design-system/styles/grid",{"title":409,"_path":410,"layout":13},"Icons","/design-system/styles/icons",{"title":412,"_path":413,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":415,"_path":416,"layout":13},"Layout","/design-system/styles/layout",{"title":418,"_path":419,"layout":13},"Logo","/design-system/styles/logo",{"title":421,"_path":422,"layout":13},"Motion","/design-system/styles/motion",{"title":424,"_path":425,"layout":13},"Spacing","/design-system/styles/spacing",{"title":427,"_path":428,"layout":13},"Typography","/design-system/styles/typography",{"title":430,"_path":431,"children":432},"Components","/design-system/components",[433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,490,493,496,499,502,505,508,511,514,517,520,523,526,529,532,535,538,541,544,547,550,553,556,559,562,565,568,571,574],{"title":434,"_path":435,"layout":13},"Accordion","/design-system/components/accordion",{"title":437,"_path":438,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":440,"_path":441,"layout":13},"Alert","/design-system/components/alert",{"title":443,"_path":444,"layout":13},"Block quote","/design-system/components/block-quote",{"title":446,"_path":447,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":449,"_path":450,"layout":13},"Button","/design-system/components/button",{"title":452,"_path":453,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":455,"_path":456,"layout":13},"Callout","/design-system/components/callout",{"title":458,"_path":459,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":461,"_path":462,"layout":13},"Card","/design-system/components/card",{"title":464,"_path":465,"layout":13},"Carousel","/design-system/components/carousel",{"title":467,"_path":468,"layout":13},"Category grid","/design-system/components/category-grid",{"title":470,"_path":471,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":473,"_path":474,"layout":13},"Chip","/design-system/components/chip",{"title":476,"_path":477,"layout":13},"Contact us","/design-system/components/contact-us",{"title":479,"_path":480,"layout":13},"Date input","/design-system/components/date-input",{"title":482,"_path":483,"layout":13},"Detail list","/design-system/components/detail-list",{"title":485,"_path":486,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":488,"_path":489,"layout":13},"File","/design-system/components/file",{"title":491,"_path":492,"layout":13},"Footer","/design-system/components/footer",{"title":494,"_path":495,"layout":13},"Form","/design-system/components/form",{"title":497,"_path":498,"layout":13},"Form alert","/design-system/components/form-alert",{"title":500,"_path":501,"layout":13},"Header","/design-system/components/header",{"title":503,"_path":504,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":506,"_path":507,"layout":13},"Input field","/design-system/components/input-field",{"title":509,"_path":510,"layout":13},"Key dates","/design-system/components/key-dates",{"title":512,"_path":513,"layout":13},"Media","/design-system/components/media",{"title":515,"_path":516,"layout":13},"Media embed","/design-system/components/media-embed",{"title":518,"_path":519,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":521,"_path":522,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":524,"_path":525,"layout":13},"Option button","/design-system/components/option-button",{"title":527,"_path":528,"layout":13},"Page action","/design-system/components/page-action",{"title":530,"_path":531,"layout":13},"Pagination","/design-system/components/pagination",{"title":533,"_path":534,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":536,"_path":537,"layout":13},"Profile","/design-system/components/profile",{"title":539,"_path":540,"layout":13},"Radio button","/design-system/components/radio-button",{"title":542,"_path":543,"layout":13},"Related links","/design-system/components/related-links",{"title":545,"_path":546,"layout":13},"Results listing","/design-system/components/results-listing",{"title":548,"_path":549,"layout":13},"Search bar","/design-system/components/search-bar",{"title":551,"_path":552,"layout":13},"Skip link","/design-system/components/skip-link",{"title":554,"_path":555,"layout":13},"Social share","/design-system/components/social-share",{"title":557,"_path":558,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":560,"_path":561,"layout":13},"Table","/design-system/components/table",{"title":563,"_path":564,"layout":13},"Tabs","/design-system/components/tabs",{"title":566,"_path":567,"layout":13},"Tag","/design-system/components/tag",{"title":569,"_path":570,"layout":13},"Text area","/design-system/components/text-area",{"title":572,"_path":573,"layout":13},"Timeline","/design-system/components/timeline",{"title":575,"_path":576,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":578,"_path":579,"children":580,"layout":13},"Ripple Framework","/framework",[581,582,600,620],{"title":578,"_path":579,"layout":13},{"title":583,"_path":584,"children":585},"Key Concepts","/framework/key-concepts",[586,588,591,594,597],{"title":387,"_path":587,"layout":13},"/framework/key-concepts/nuxt",{"title":589,"_path":590,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":592,"_path":593,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":595,"_path":596,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":598,"_path":599,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":601,"_path":602,"children":603},"Guides","/framework/guides",[604,607,610,613,616,619],{"title":605,"_path":606,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":608,"_path":609,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":611,"_path":612,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":614,"_path":615,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":617,"_path":618,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":316,"_path":314,"layout":13},{"title":11,"_path":7,"layout":13},["Reactive",622],["Set"],["Reactive",624],{"module-navigation":320},true,1714695649606]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/framework/guides/brand-application/_payload.json b/framework/guides/brand-application/_payload.json
index 53ef673431..f67856a5d7 100644
--- a/framework/guides/brand-application/_payload.json
+++ b/framework/guides/brand-application/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,27,50],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",false,{"id":9,"text":10,"url":9,"active":7,"items":11},"/framework/key-concepts","Key Concepts",[12,15,18,21,24],{"id":13,"text":14,"url":13,"active":7,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":22,"text":23,"url":22,"active":7,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":25,"text":26,"url":25,"active":7,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":28,"text":29,"url":28,"active":30,"items":31},"/framework/guides","Guides",true,[32,35,38,41,44,47],{"id":33,"text":34,"url":33,"active":7,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":39,"text":40,"url":39,"active":30,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":42,"text":43,"url":42,"active":7,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":45,"text":46,"url":45,"active":7,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":48,"text":49,"url":48,"active":7,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":51,"text":52,"url":51,"active":7,"items":-1},"/framework/core-modules","Core modules",1714695151276]
\ No newline at end of file
+[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,27,50],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",false,{"id":9,"text":10,"url":9,"active":7,"items":11},"/framework/key-concepts","Key Concepts",[12,15,18,21,24],{"id":13,"text":14,"url":13,"active":7,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":22,"text":23,"url":22,"active":7,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":25,"text":26,"url":25,"active":7,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":28,"text":29,"url":28,"active":30,"items":31},"/framework/guides","Guides",true,[32,35,38,41,44,47],{"id":33,"text":34,"url":33,"active":7,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":39,"text":40,"url":39,"active":30,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":42,"text":43,"url":42,"active":7,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":45,"text":46,"url":45,"active":7,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":48,"text":49,"url":48,"active":7,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":51,"text":52,"url":51,"active":7,"items":-1},"/framework/core-modules","Core modules",1714695649515]
\ No newline at end of file
diff --git a/framework/guides/brand-application/index.html b/framework/guides/brand-application/index.html
index 78060b9b26..a9a885d2a0 100644
--- a/framework/guides/brand-application/index.html
+++ b/framework/guides/brand-application/index.html
@@ -25,60 +25,60 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseEm.D-92YCoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProsePre.1p0bzX0t.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCode.ggTmuEB2.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.uDpSgjM7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseEm.jWeQl8xp.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProsePre.928ctTB_.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCode.Xz7xMLuq.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.iJ9KJvnk.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Nuxt</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/api-endpoints" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>API endpoints</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dynamic components</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/guides-toggle"><span class="rpl-vertical-nav__toggle-text">Guides</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/guides-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -141,8 +141,8 @@
     }
   }
 })
-</code><!--]--></pre><!--]--></div><p><!--[-->Note in this example the same value is used in the first four properties (primary branding colour), then the next four (alternate branding colour). Even though they use the same value, these properties must all be defined. The system was set up this way to support accessible <em><!--[-->light-on-dark<!--]--></em> and <em><!--[-->dark-on-light<!--]--></em> theming options.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/3.guides/3.brand-application.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/guides/brand-application/_payload.json">[{"state":1,"once":547,"_errors":549,"serverRendered":552,"path":7,"prerenderedAt":553},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":234,"$sdd-globals":250,"$sdd-navigation":252},["ShallowRef",4],["ShallowReactive",5],{"/framework/guides/brand-application":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":229,"_id":230,"_source":231,"_file":232,"_extension":233},"/framework/guides/brand-application","guides",false,"","Applying theme and brand","A guide to applying theme and brand assets to Ripple sites.","page",{"type":15,"children":16,"toc":221},"root",[17,44,51,56,66,71,79,84,92,98,103,111,117,136,144,149,155,167,173,194,202],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22,25,34,36,42],{"type":23,"value":24},"text","Theming with brand colours is embedded deeply into Ripple, using ",{"type":18,"tag":26,"props":27,"children":31},"a",{"href":28,"rel":29},"https://amzn.github.io/style-dictionary/#/tokens",[30],"nofollow",[32],{"type":23,"value":33},"design tokens",{"type":23,"value":35},". Global and component styles are built on a base level of tokens, that can be adjusted at a ",{"type":18,"tag":37,"props":38,"children":39},"em",{},[40],{"type":23,"value":41},"site",{"type":23,"value":43}," level by modifying a few key properties.",{"type":18,"tag":45,"props":46,"children":48},"h2",{"id":47},"token-naming",[49],{"type":23,"value":50},"Token naming",{"type":18,"tag":19,"props":52,"children":53},{},[54],{"type":23,"value":55},"Ripple uses a naming scheme for tokens, and the CSS custom properties are derived with this pattern:",{"type":18,"tag":57,"props":58,"children":60},"pre",{"code":59},"--rpl(-\u003Cmodule>)-\u003Cattribute>(-\u003Clevel>)\n",[61],{"type":18,"tag":62,"props":63,"children":64},"code",{"__ignoreMap":10},[65],{"type":23,"value":59},{"type":18,"tag":19,"props":67,"children":68},{},[69],{"type":23,"value":70},"Some example props:",{"type":18,"tag":57,"props":72,"children":74},{"code":73},"--rpl-clr-primary\n--rpl-clr-success-light\n--rpl-type-size-5\n--rpl-sp-3\n--rpl-border-4\n",[75],{"type":18,"tag":62,"props":76,"children":77},{"__ignoreMap":10},[78],{"type":23,"value":73},{"type":18,"tag":19,"props":80,"children":81},{},[82],{"type":23,"value":83},"And a worked example:",{"type":18,"tag":57,"props":85,"children":87},{"code":86},".example-block {\n  border-color: var(--rpl-clr-primary);\n  border-style: solid;\n  border-width: var(--rpl-border-4);\n  colour: var(--rpl-clr-primary);\n  padding: var(--rpl-sp-3);\n}\n",[88],{"type":18,"tag":62,"props":89,"children":90},{"__ignoreMap":10},[91],{"type":23,"value":86},{"type":18,"tag":45,"props":93,"children":95},{"id":94},"theme-properties",[96],{"type":23,"value":97},"Theme properties",{"type":18,"tag":19,"props":99,"children":100},{},[101],{"type":23,"value":102},"The minimum set of required properties are listed below:",{"type":18,"tag":57,"props":104,"children":106},{"code":105},"--rpl-clr-primary\n--rpl-clr-footer-alt\n--rpl-clr-link\n--rpl-clr-type-primary-accessible\n--rpl-clr-primary-alt\n--rpl-clr-type-primary-alt-accessible\n--rpl-clr-footer\n--rpl-clr-type-footer-accessible\n--rpl-clr-primary-alpha\n--rpl-clr-accent\n--rpl-clr-accent-alt\n--rpl-clr-focus\n--rpl-clr-gradient-horizontal\n--rpl-clr-gradient-vertical\n",[107],{"type":18,"tag":62,"props":108,"children":109},{"__ignoreMap":10},[110],{"type":23,"value":105},{"type":18,"tag":45,"props":112,"children":114},{"id":113},"sdp",[115],{"type":23,"value":116},"SDP",{"type":18,"tag":19,"props":118,"children":119},{},[120,122,127,129,134],{"type":23,"value":121},"In SDP, the theme is managed in the back-end system via the Site Taxonomy. Site entries have a collection of key-value ",{"type":18,"tag":37,"props":123,"children":124},{},[125],{"type":23,"value":126},"site theme values",{"type":23,"value":128},", and also ",{"type":18,"tag":37,"props":130,"children":131},{},[132],{"type":23,"value":133},"site feature flag values",{"type":23,"value":135}," to define site-specific settings, e.g.",{"type":18,"tag":57,"props":137,"children":139},{"code":138},"Key\nrpl-clr-primary\nValue\n#1c4f9c\n\nKey\nfooterTheme\nValue\nneutral\n",[140],{"type":18,"tag":62,"props":141,"children":142},{"__ignoreMap":10},[143],{"type":23,"value":138},{"type":18,"tag":19,"props":145,"children":146},{},[147],{"type":23,"value":148},"Both these collections are exposed to the front-end through the Site API, and can immediately update production sites without requiring a code change or deployment.",{"type":18,"tag":45,"props":150,"children":152},{"id":151},"secondary-logo",[153],{"type":23,"value":154},"Secondary logo",{"type":18,"tag":19,"props":156,"children":157},{},[158,160,165],{"type":23,"value":159},"The secondary logo is also content managed, and can be set on the same Site Taxonomy page in the back-end under ",{"type":18,"tag":37,"props":161,"children":162},{},[163],{"type":23,"value":164},"Logo",{"type":23,"value":166},".",{"type":18,"tag":45,"props":168,"children":170},{"id":169},"appconfig",[171],{"type":23,"value":172},"app.config",{"type":18,"tag":19,"props":174,"children":175},{},[176,178,184,186,192],{"type":23,"value":177},"Theme and feature flag properties may also be defined in the Nuxt ",{"type":18,"tag":62,"props":179,"children":181},{"className":180},[],[182],{"type":23,"value":183},"app.config.ts",{"type":23,"value":185}," for the site. This matches the naming used in the Site API (note the difference in ",{"type":18,"tag":62,"props":187,"children":189},{"className":188},[],[190],{"type":23,"value":191},"--",{"type":23,"value":193}," for theme, since these are Javascript config props, not CSS custom props):",{"type":18,"tag":57,"props":195,"children":197},{"code":196},"export default defineAppConfig({\n  ripple: {\n    featureFlags: {\n      contentCollectionSearchConnector: 'elasticsearch'\n    },\n    theme: {\n      'rpl-clr-primary': '#6B19A3',\n      'rpl-clr-footer-alt': '#6B19A3',\n      'rpl-clr-link': '#6B19A3',\n      'rpl-clr-type-primary-accessible': '#6B19A3',\n      'rpl-clr-primary-alt': '#3F006B',\n      'rpl-clr-type-primary-alt-accessible': '#3F006B',\n      'rpl-clr-footer': '#3F006B',\n      'rpl-clr-type-footer-accessible': '#3F006B',\n      'rpl-clr-primary-alpha': 'rgba(107, 25, 163, 0.5)',\n      'rpl-clr-accent': '#6DDD97',\n      'rpl-clr-accent-alt': '#EAFAF0',\n      'rpl-clr-focus': '#9DEF65',\n      'rpl-clr-gradient-horizontal': 'linear-gradient(90deg, #382484 0%, #5A0099 20%, #7623B0 35%, #2E7478 50%, #2FA26F 70%, #2FCE6A 80%)',\n      'rpl-clr-gradient-vertical': 'linear-gradient(180deg, #382484 0%, #5A0099 20%, #7623B0 35%, #2E7478 50%, #2FA26F 70%, #2FCE6A 80%)'\n    }\n  }\n})\n",[198],{"type":18,"tag":62,"props":199,"children":200},{"__ignoreMap":10},[201],{"type":23,"value":196},{"type":18,"tag":19,"props":203,"children":204},{},[205,207,212,214,219],{"type":23,"value":206},"Note in this example the same value is used in the first four properties (primary branding colour), then the next four (alternate branding colour). Even though they use the same value, these properties must all be defined. The system was set up this way to support accessible ",{"type":18,"tag":37,"props":208,"children":209},{},[210],{"type":23,"value":211},"light-on-dark",{"type":23,"value":213}," and ",{"type":18,"tag":37,"props":215,"children":216},{},[217],{"type":23,"value":218},"dark-on-light",{"type":23,"value":220}," theming options.",{"title":10,"searchDepth":222,"depth":222,"links":223},2,[224,225,226,227,228],{"id":47,"depth":222,"text":50},{"id":94,"depth":222,"text":97},{"id":113,"depth":222,"text":116},{"id":151,"depth":222,"text":154},{"id":169,"depth":222,"text":172},"markdown","content:framework:3.guides:3.brand-application.md","content","framework/3.guides/3.brand-application.md","md",["ShallowRef",235],["ShallowReactive",236],{"/framework/guides/brand-application":237},[238,244],{"_path":239,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":240,"description":241,"layout":13,"_type":229,"_id":242,"_source":231,"_file":243,"_extension":233},"/framework/guides/new-sites","Setting up a new site","A guide to setting up new SDP frontend sites using Ripple framework.","content:framework:3.guides:2.new-sites.md","framework/3.guides/2.new-sites.md",{"_path":245,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":246,"description":247,"layout":13,"_type":229,"_id":248,"_source":231,"_file":249,"_extension":233},"/framework/guides/creating-content-types","Creating content types","How to create new content types for the SDP platform","content:framework:3.guides:4.creating-content-types.md","framework/3.guides/4.creating-content-types.md",["ShallowRef",251],{},[253,258,505],{"title":254,"_path":255,"icon":256,"layout":257},"Ripple Design System","/","carbon:home","home",{"title":259,"_path":260,"children":261},"Design System","/design-system",[262,278,294,324,357],{"title":263,"_path":264,"children":265},"About","/design-system/about",[266,269,272,275],{"title":267,"_path":268,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":270,"_path":271,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":273,"_path":274,"layout":13},"Support","/design-system/about/getting-support",{"title":276,"_path":277,"layout":13},"Contributing","/design-system/about/contributing",{"title":279,"_path":280,"children":281},"Design","/design-system/design",[282,285,288,291],{"title":283,"_path":284,"layout":13},"Getting started","/design-system/design/getting-started",{"title":286,"_path":287,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":289,"_path":290,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":292,"_path":293,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":295,"_path":296,"children":297},"Develop","/design-system/develop",[298,300,302,305],{"title":283,"_path":299,"layout":13},"/design-system/develop/getting-started",{"title":276,"_path":301,"layout":13},"/design-system/develop/contributing",{"title":303,"_path":304,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":306,"_path":307,"children":308,"layout":13},"Usage","/design-system/develop/usage",[309,312,315,318,321],{"title":310,"_path":311,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":313,"_path":314,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":316,"_path":317,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":319,"_path":320,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":322,"_path":323,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":325,"_path":326,"children":327},"Styles","/design-system/styles",[328,331,334,337,340,343,346,348,351,354],{"title":329,"_path":330,"layout":13},"Colour","/design-system/styles/colour",{"title":332,"_path":333,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":335,"_path":336,"layout":13},"Grid","/design-system/styles/grid",{"title":338,"_path":339,"layout":13},"Icons","/design-system/styles/icons",{"title":341,"_path":342,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":344,"_path":345,"layout":13},"Layout","/design-system/styles/layout",{"title":164,"_path":347,"layout":13},"/design-system/styles/logo",{"title":349,"_path":350,"layout":13},"Motion","/design-system/styles/motion",{"title":352,"_path":353,"layout":13},"Spacing","/design-system/styles/spacing",{"title":355,"_path":356,"layout":13},"Typography","/design-system/styles/typography",{"title":358,"_path":359,"children":360},"Components","/design-system/components",[361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,490,493,496,499,502],{"title":362,"_path":363,"layout":13},"Accordion","/design-system/components/accordion",{"title":365,"_path":366,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":368,"_path":369,"layout":13},"Alert","/design-system/components/alert",{"title":371,"_path":372,"layout":13},"Block quote","/design-system/components/block-quote",{"title":374,"_path":375,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":377,"_path":378,"layout":13},"Button","/design-system/components/button",{"title":380,"_path":381,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":383,"_path":384,"layout":13},"Callout","/design-system/components/callout",{"title":386,"_path":387,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":389,"_path":390,"layout":13},"Card","/design-system/components/card",{"title":392,"_path":393,"layout":13},"Carousel","/design-system/components/carousel",{"title":395,"_path":396,"layout":13},"Category grid","/design-system/components/category-grid",{"title":398,"_path":399,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":401,"_path":402,"layout":13},"Chip","/design-system/components/chip",{"title":404,"_path":405,"layout":13},"Contact us","/design-system/components/contact-us",{"title":407,"_path":408,"layout":13},"Date input","/design-system/components/date-input",{"title":410,"_path":411,"layout":13},"Detail list","/design-system/components/detail-list",{"title":413,"_path":414,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":416,"_path":417,"layout":13},"File","/design-system/components/file",{"title":419,"_path":420,"layout":13},"Footer","/design-system/components/footer",{"title":422,"_path":423,"layout":13},"Form","/design-system/components/form",{"title":425,"_path":426,"layout":13},"Form alert","/design-system/components/form-alert",{"title":428,"_path":429,"layout":13},"Header","/design-system/components/header",{"title":431,"_path":432,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":434,"_path":435,"layout":13},"Input field","/design-system/components/input-field",{"title":437,"_path":438,"layout":13},"Key dates","/design-system/components/key-dates",{"title":440,"_path":441,"layout":13},"Media","/design-system/components/media",{"title":443,"_path":444,"layout":13},"Media embed","/design-system/components/media-embed",{"title":446,"_path":447,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":449,"_path":450,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":452,"_path":453,"layout":13},"Option button","/design-system/components/option-button",{"title":455,"_path":456,"layout":13},"Page action","/design-system/components/page-action",{"title":458,"_path":459,"layout":13},"Pagination","/design-system/components/pagination",{"title":461,"_path":462,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":464,"_path":465,"layout":13},"Profile","/design-system/components/profile",{"title":467,"_path":468,"layout":13},"Radio button","/design-system/components/radio-button",{"title":470,"_path":471,"layout":13},"Related links","/design-system/components/related-links",{"title":473,"_path":474,"layout":13},"Results listing","/design-system/components/results-listing",{"title":476,"_path":477,"layout":13},"Search bar","/design-system/components/search-bar",{"title":479,"_path":480,"layout":13},"Skip link","/design-system/components/skip-link",{"title":482,"_path":483,"layout":13},"Social share","/design-system/components/social-share",{"title":485,"_path":486,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":488,"_path":489,"layout":13},"Table","/design-system/components/table",{"title":491,"_path":492,"layout":13},"Tabs","/design-system/components/tabs",{"title":494,"_path":495,"layout":13},"Tag","/design-system/components/tag",{"title":497,"_path":498,"layout":13},"Text area","/design-system/components/text-area",{"title":500,"_path":501,"layout":13},"Timeline","/design-system/components/timeline",{"title":503,"_path":504,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":506,"_path":507,"children":508,"layout":13},"Ripple Framework","/framework",[509,510,528,544],{"title":506,"_path":507,"layout":13},{"title":511,"_path":512,"children":513},"Key Concepts","/framework/key-concepts",[514,516,519,522,525],{"title":316,"_path":515,"layout":13},"/framework/key-concepts/nuxt",{"title":517,"_path":518,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":520,"_path":521,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":523,"_path":524,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":526,"_path":527,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":529,"_path":530,"children":531},"Guides","/framework/guides",[532,535,536,537,538,541],{"title":533,"_path":534,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":240,"_path":239,"layout":13},{"title":11,"_path":7,"layout":13},{"title":246,"_path":245,"layout":13},{"title":539,"_path":540,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":542,"_path":543,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":545,"_path":546,"layout":13},"Core modules","/framework/core-modules",["Reactive",548],["Set"],["Reactive",550],{"module-navigation":551},null,true,1714695151276]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+</code><!--]--></pre><!--]--></div><p><!--[-->Note in this example the same value is used in the first four properties (primary branding colour), then the next four (alternate branding colour). Even though they use the same value, these properties must all be defined. The system was set up this way to support accessible <em><!--[-->light-on-dark<!--]--></em> and <em><!--[-->dark-on-light<!--]--></em> theming options.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/3.guides/3.brand-application.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/guides/brand-application/_payload.json">[{"state":1,"once":547,"_errors":549,"serverRendered":552,"path":7,"prerenderedAt":553},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":234,"$sdd-globals":250,"$sdd-navigation":252},["ShallowRef",4],["ShallowReactive",5],{"/framework/guides/brand-application":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":229,"_id":230,"_source":231,"_file":232,"_extension":233},"/framework/guides/brand-application","guides",false,"","Applying theme and brand","A guide to applying theme and brand assets to Ripple sites.","page",{"type":15,"children":16,"toc":221},"root",[17,44,51,56,66,71,79,84,92,98,103,111,117,136,144,149,155,167,173,194,202],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22,25,34,36,42],{"type":23,"value":24},"text","Theming with brand colours is embedded deeply into Ripple, using ",{"type":18,"tag":26,"props":27,"children":31},"a",{"href":28,"rel":29},"https://amzn.github.io/style-dictionary/#/tokens",[30],"nofollow",[32],{"type":23,"value":33},"design tokens",{"type":23,"value":35},". Global and component styles are built on a base level of tokens, that can be adjusted at a ",{"type":18,"tag":37,"props":38,"children":39},"em",{},[40],{"type":23,"value":41},"site",{"type":23,"value":43}," level by modifying a few key properties.",{"type":18,"tag":45,"props":46,"children":48},"h2",{"id":47},"token-naming",[49],{"type":23,"value":50},"Token naming",{"type":18,"tag":19,"props":52,"children":53},{},[54],{"type":23,"value":55},"Ripple uses a naming scheme for tokens, and the CSS custom properties are derived with this pattern:",{"type":18,"tag":57,"props":58,"children":60},"pre",{"code":59},"--rpl(-\u003Cmodule>)-\u003Cattribute>(-\u003Clevel>)\n",[61],{"type":18,"tag":62,"props":63,"children":64},"code",{"__ignoreMap":10},[65],{"type":23,"value":59},{"type":18,"tag":19,"props":67,"children":68},{},[69],{"type":23,"value":70},"Some example props:",{"type":18,"tag":57,"props":72,"children":74},{"code":73},"--rpl-clr-primary\n--rpl-clr-success-light\n--rpl-type-size-5\n--rpl-sp-3\n--rpl-border-4\n",[75],{"type":18,"tag":62,"props":76,"children":77},{"__ignoreMap":10},[78],{"type":23,"value":73},{"type":18,"tag":19,"props":80,"children":81},{},[82],{"type":23,"value":83},"And a worked example:",{"type":18,"tag":57,"props":85,"children":87},{"code":86},".example-block {\n  border-color: var(--rpl-clr-primary);\n  border-style: solid;\n  border-width: var(--rpl-border-4);\n  colour: var(--rpl-clr-primary);\n  padding: var(--rpl-sp-3);\n}\n",[88],{"type":18,"tag":62,"props":89,"children":90},{"__ignoreMap":10},[91],{"type":23,"value":86},{"type":18,"tag":45,"props":93,"children":95},{"id":94},"theme-properties",[96],{"type":23,"value":97},"Theme properties",{"type":18,"tag":19,"props":99,"children":100},{},[101],{"type":23,"value":102},"The minimum set of required properties are listed below:",{"type":18,"tag":57,"props":104,"children":106},{"code":105},"--rpl-clr-primary\n--rpl-clr-footer-alt\n--rpl-clr-link\n--rpl-clr-type-primary-accessible\n--rpl-clr-primary-alt\n--rpl-clr-type-primary-alt-accessible\n--rpl-clr-footer\n--rpl-clr-type-footer-accessible\n--rpl-clr-primary-alpha\n--rpl-clr-accent\n--rpl-clr-accent-alt\n--rpl-clr-focus\n--rpl-clr-gradient-horizontal\n--rpl-clr-gradient-vertical\n",[107],{"type":18,"tag":62,"props":108,"children":109},{"__ignoreMap":10},[110],{"type":23,"value":105},{"type":18,"tag":45,"props":112,"children":114},{"id":113},"sdp",[115],{"type":23,"value":116},"SDP",{"type":18,"tag":19,"props":118,"children":119},{},[120,122,127,129,134],{"type":23,"value":121},"In SDP, the theme is managed in the back-end system via the Site Taxonomy. Site entries have a collection of key-value ",{"type":18,"tag":37,"props":123,"children":124},{},[125],{"type":23,"value":126},"site theme values",{"type":23,"value":128},", and also ",{"type":18,"tag":37,"props":130,"children":131},{},[132],{"type":23,"value":133},"site feature flag values",{"type":23,"value":135}," to define site-specific settings, e.g.",{"type":18,"tag":57,"props":137,"children":139},{"code":138},"Key\nrpl-clr-primary\nValue\n#1c4f9c\n\nKey\nfooterTheme\nValue\nneutral\n",[140],{"type":18,"tag":62,"props":141,"children":142},{"__ignoreMap":10},[143],{"type":23,"value":138},{"type":18,"tag":19,"props":145,"children":146},{},[147],{"type":23,"value":148},"Both these collections are exposed to the front-end through the Site API, and can immediately update production sites without requiring a code change or deployment.",{"type":18,"tag":45,"props":150,"children":152},{"id":151},"secondary-logo",[153],{"type":23,"value":154},"Secondary logo",{"type":18,"tag":19,"props":156,"children":157},{},[158,160,165],{"type":23,"value":159},"The secondary logo is also content managed, and can be set on the same Site Taxonomy page in the back-end under ",{"type":18,"tag":37,"props":161,"children":162},{},[163],{"type":23,"value":164},"Logo",{"type":23,"value":166},".",{"type":18,"tag":45,"props":168,"children":170},{"id":169},"appconfig",[171],{"type":23,"value":172},"app.config",{"type":18,"tag":19,"props":174,"children":175},{},[176,178,184,186,192],{"type":23,"value":177},"Theme and feature flag properties may also be defined in the Nuxt ",{"type":18,"tag":62,"props":179,"children":181},{"className":180},[],[182],{"type":23,"value":183},"app.config.ts",{"type":23,"value":185}," for the site. This matches the naming used in the Site API (note the difference in ",{"type":18,"tag":62,"props":187,"children":189},{"className":188},[],[190],{"type":23,"value":191},"--",{"type":23,"value":193}," for theme, since these are Javascript config props, not CSS custom props):",{"type":18,"tag":57,"props":195,"children":197},{"code":196},"export default defineAppConfig({\n  ripple: {\n    featureFlags: {\n      contentCollectionSearchConnector: 'elasticsearch'\n    },\n    theme: {\n      'rpl-clr-primary': '#6B19A3',\n      'rpl-clr-footer-alt': '#6B19A3',\n      'rpl-clr-link': '#6B19A3',\n      'rpl-clr-type-primary-accessible': '#6B19A3',\n      'rpl-clr-primary-alt': '#3F006B',\n      'rpl-clr-type-primary-alt-accessible': '#3F006B',\n      'rpl-clr-footer': '#3F006B',\n      'rpl-clr-type-footer-accessible': '#3F006B',\n      'rpl-clr-primary-alpha': 'rgba(107, 25, 163, 0.5)',\n      'rpl-clr-accent': '#6DDD97',\n      'rpl-clr-accent-alt': '#EAFAF0',\n      'rpl-clr-focus': '#9DEF65',\n      'rpl-clr-gradient-horizontal': 'linear-gradient(90deg, #382484 0%, #5A0099 20%, #7623B0 35%, #2E7478 50%, #2FA26F 70%, #2FCE6A 80%)',\n      'rpl-clr-gradient-vertical': 'linear-gradient(180deg, #382484 0%, #5A0099 20%, #7623B0 35%, #2E7478 50%, #2FA26F 70%, #2FCE6A 80%)'\n    }\n  }\n})\n",[198],{"type":18,"tag":62,"props":199,"children":200},{"__ignoreMap":10},[201],{"type":23,"value":196},{"type":18,"tag":19,"props":203,"children":204},{},[205,207,212,214,219],{"type":23,"value":206},"Note in this example the same value is used in the first four properties (primary branding colour), then the next four (alternate branding colour). Even though they use the same value, these properties must all be defined. The system was set up this way to support accessible ",{"type":18,"tag":37,"props":208,"children":209},{},[210],{"type":23,"value":211},"light-on-dark",{"type":23,"value":213}," and ",{"type":18,"tag":37,"props":215,"children":216},{},[217],{"type":23,"value":218},"dark-on-light",{"type":23,"value":220}," theming options.",{"title":10,"searchDepth":222,"depth":222,"links":223},2,[224,225,226,227,228],{"id":47,"depth":222,"text":50},{"id":94,"depth":222,"text":97},{"id":113,"depth":222,"text":116},{"id":151,"depth":222,"text":154},{"id":169,"depth":222,"text":172},"markdown","content:framework:3.guides:3.brand-application.md","content","framework/3.guides/3.brand-application.md","md",["ShallowRef",235],["ShallowReactive",236],{"/framework/guides/brand-application":237},[238,244],{"_path":239,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":240,"description":241,"layout":13,"_type":229,"_id":242,"_source":231,"_file":243,"_extension":233},"/framework/guides/new-sites","Setting up a new site","A guide to setting up new SDP frontend sites using Ripple framework.","content:framework:3.guides:2.new-sites.md","framework/3.guides/2.new-sites.md",{"_path":245,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":246,"description":247,"layout":13,"_type":229,"_id":248,"_source":231,"_file":249,"_extension":233},"/framework/guides/creating-content-types","Creating content types","How to create new content types for the SDP platform","content:framework:3.guides:4.creating-content-types.md","framework/3.guides/4.creating-content-types.md",["ShallowRef",251],{},[253,258,505],{"title":254,"_path":255,"icon":256,"layout":257},"Ripple Design System","/","carbon:home","home",{"title":259,"_path":260,"children":261},"Design System","/design-system",[262,278,294,324,357],{"title":263,"_path":264,"children":265},"About","/design-system/about",[266,269,272,275],{"title":267,"_path":268,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":270,"_path":271,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":273,"_path":274,"layout":13},"Support","/design-system/about/getting-support",{"title":276,"_path":277,"layout":13},"Contributing","/design-system/about/contributing",{"title":279,"_path":280,"children":281},"Design","/design-system/design",[282,285,288,291],{"title":283,"_path":284,"layout":13},"Getting started","/design-system/design/getting-started",{"title":286,"_path":287,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":289,"_path":290,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":292,"_path":293,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":295,"_path":296,"children":297},"Develop","/design-system/develop",[298,300,302,305],{"title":283,"_path":299,"layout":13},"/design-system/develop/getting-started",{"title":276,"_path":301,"layout":13},"/design-system/develop/contributing",{"title":303,"_path":304,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":306,"_path":307,"children":308,"layout":13},"Usage","/design-system/develop/usage",[309,312,315,318,321],{"title":310,"_path":311,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":313,"_path":314,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":316,"_path":317,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":319,"_path":320,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":322,"_path":323,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":325,"_path":326,"children":327},"Styles","/design-system/styles",[328,331,334,337,340,343,346,348,351,354],{"title":329,"_path":330,"layout":13},"Colour","/design-system/styles/colour",{"title":332,"_path":333,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":335,"_path":336,"layout":13},"Grid","/design-system/styles/grid",{"title":338,"_path":339,"layout":13},"Icons","/design-system/styles/icons",{"title":341,"_path":342,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":344,"_path":345,"layout":13},"Layout","/design-system/styles/layout",{"title":164,"_path":347,"layout":13},"/design-system/styles/logo",{"title":349,"_path":350,"layout":13},"Motion","/design-system/styles/motion",{"title":352,"_path":353,"layout":13},"Spacing","/design-system/styles/spacing",{"title":355,"_path":356,"layout":13},"Typography","/design-system/styles/typography",{"title":358,"_path":359,"children":360},"Components","/design-system/components",[361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478,481,484,487,490,493,496,499,502],{"title":362,"_path":363,"layout":13},"Accordion","/design-system/components/accordion",{"title":365,"_path":366,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":368,"_path":369,"layout":13},"Alert","/design-system/components/alert",{"title":371,"_path":372,"layout":13},"Block quote","/design-system/components/block-quote",{"title":374,"_path":375,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":377,"_path":378,"layout":13},"Button","/design-system/components/button",{"title":380,"_path":381,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":383,"_path":384,"layout":13},"Callout","/design-system/components/callout",{"title":386,"_path":387,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":389,"_path":390,"layout":13},"Card","/design-system/components/card",{"title":392,"_path":393,"layout":13},"Carousel","/design-system/components/carousel",{"title":395,"_path":396,"layout":13},"Category grid","/design-system/components/category-grid",{"title":398,"_path":399,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":401,"_path":402,"layout":13},"Chip","/design-system/components/chip",{"title":404,"_path":405,"layout":13},"Contact us","/design-system/components/contact-us",{"title":407,"_path":408,"layout":13},"Date input","/design-system/components/date-input",{"title":410,"_path":411,"layout":13},"Detail list","/design-system/components/detail-list",{"title":413,"_path":414,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":416,"_path":417,"layout":13},"File","/design-system/components/file",{"title":419,"_path":420,"layout":13},"Footer","/design-system/components/footer",{"title":422,"_path":423,"layout":13},"Form","/design-system/components/form",{"title":425,"_path":426,"layout":13},"Form alert","/design-system/components/form-alert",{"title":428,"_path":429,"layout":13},"Header","/design-system/components/header",{"title":431,"_path":432,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":434,"_path":435,"layout":13},"Input field","/design-system/components/input-field",{"title":437,"_path":438,"layout":13},"Key dates","/design-system/components/key-dates",{"title":440,"_path":441,"layout":13},"Media","/design-system/components/media",{"title":443,"_path":444,"layout":13},"Media embed","/design-system/components/media-embed",{"title":446,"_path":447,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":449,"_path":450,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":452,"_path":453,"layout":13},"Option button","/design-system/components/option-button",{"title":455,"_path":456,"layout":13},"Page action","/design-system/components/page-action",{"title":458,"_path":459,"layout":13},"Pagination","/design-system/components/pagination",{"title":461,"_path":462,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":464,"_path":465,"layout":13},"Profile","/design-system/components/profile",{"title":467,"_path":468,"layout":13},"Radio button","/design-system/components/radio-button",{"title":470,"_path":471,"layout":13},"Related links","/design-system/components/related-links",{"title":473,"_path":474,"layout":13},"Results listing","/design-system/components/results-listing",{"title":476,"_path":477,"layout":13},"Search bar","/design-system/components/search-bar",{"title":479,"_path":480,"layout":13},"Skip link","/design-system/components/skip-link",{"title":482,"_path":483,"layout":13},"Social share","/design-system/components/social-share",{"title":485,"_path":486,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":488,"_path":489,"layout":13},"Table","/design-system/components/table",{"title":491,"_path":492,"layout":13},"Tabs","/design-system/components/tabs",{"title":494,"_path":495,"layout":13},"Tag","/design-system/components/tag",{"title":497,"_path":498,"layout":13},"Text area","/design-system/components/text-area",{"title":500,"_path":501,"layout":13},"Timeline","/design-system/components/timeline",{"title":503,"_path":504,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":506,"_path":507,"children":508,"layout":13},"Ripple Framework","/framework",[509,510,528,544],{"title":506,"_path":507,"layout":13},{"title":511,"_path":512,"children":513},"Key Concepts","/framework/key-concepts",[514,516,519,522,525],{"title":316,"_path":515,"layout":13},"/framework/key-concepts/nuxt",{"title":517,"_path":518,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":520,"_path":521,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":523,"_path":524,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":526,"_path":527,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":529,"_path":530,"children":531},"Guides","/framework/guides",[532,535,536,537,538,541],{"title":533,"_path":534,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":240,"_path":239,"layout":13},{"title":11,"_path":7,"layout":13},{"title":246,"_path":245,"layout":13},{"title":539,"_path":540,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":542,"_path":543,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":545,"_path":546,"layout":13},"Core modules","/framework/core-modules",["Reactive",548],["Set"],["Reactive",550],{"module-navigation":551},null,true,1714695649515]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/framework/guides/creating-content-types/_payload.json b/framework/guides/creating-content-types/_payload.json
index df5b26b74a..ade68463b2 100644
--- a/framework/guides/creating-content-types/_payload.json
+++ b/framework/guides/creating-content-types/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,27,50],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",false,{"id":9,"text":10,"url":9,"active":7,"items":11},"/framework/key-concepts","Key Concepts",[12,15,18,21,24],{"id":13,"text":14,"url":13,"active":7,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":22,"text":23,"url":22,"active":7,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":25,"text":26,"url":25,"active":7,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":28,"text":29,"url":28,"active":30,"items":31},"/framework/guides","Guides",true,[32,35,38,41,44,47],{"id":33,"text":34,"url":33,"active":7,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":39,"text":40,"url":39,"active":7,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":42,"text":43,"url":42,"active":30,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":45,"text":46,"url":45,"active":7,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":48,"text":49,"url":48,"active":7,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":51,"text":52,"url":51,"active":7,"items":-1},"/framework/core-modules","Core modules",1714695151280]
\ No newline at end of file
+[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,27,50],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",false,{"id":9,"text":10,"url":9,"active":7,"items":11},"/framework/key-concepts","Key Concepts",[12,15,18,21,24],{"id":13,"text":14,"url":13,"active":7,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":22,"text":23,"url":22,"active":7,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":25,"text":26,"url":25,"active":7,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":28,"text":29,"url":28,"active":30,"items":31},"/framework/guides","Guides",true,[32,35,38,41,44,47],{"id":33,"text":34,"url":33,"active":7,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":39,"text":40,"url":39,"active":7,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":42,"text":43,"url":42,"active":30,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":45,"text":46,"url":45,"active":7,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":48,"text":49,"url":48,"active":7,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":51,"text":52,"url":51,"active":7,"items":-1},"/framework/core-modules","Core modules",1714695649519]
\ No newline at end of file
diff --git a/framework/guides/creating-content-types/index.html b/framework/guides/creating-content-types/index.html
index db80917070..91edf95302 100644
--- a/framework/guides/creating-content-types/index.html
+++ b/framework/guides/creating-content-types/index.html
@@ -25,63 +25,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.lp_k9Hpd.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.uDpSgjM7.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProsePre.1p0bzX0t.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCode.ggTmuEB2.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.F9NVvvm4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.Czpq-HHw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.iJ9KJvnk.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProsePre.928ctTB_.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCode.Xz7xMLuq.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.GmB4B_NE.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Nuxt</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/api-endpoints" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>API endpoints</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dynamic components</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/guides-toggle"><span class="rpl-vertical-nav__toggle-text">Guides</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/guides-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -183,8 +183,8 @@
 </span></span><span class="line" line="5"><span style="--shiki-default:#032F62">    &#39;./layers/tide-my-content-type&#39;</span><span style="--shiki-default:#24292E">, </span><span style="--shiki-default:#6A737D">// A local layer
 </span></span><span class="line" line="6"><span style="--shiki-default:#24292E">  ]
 </span></span><span class="line" line="7"><span style="--shiki-default:#24292E">})
-</span></span></code><!--]--></pre><!--]--></div><style>html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}</style><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/3.guides/4.creating-content-types.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/guides/creating-content-types/_payload.json">[{"state":1,"once":2602,"_errors":2604,"serverRendered":295,"path":7,"prerenderedAt":2607},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":2286,"$sdd-globals":2305,"$sdd-navigation":2307},["ShallowRef",4],["ShallowReactive",5],{"/framework/guides/creating-content-types":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":2282,"_id":2283,"_source":1711,"_file":2284,"_extension":2285},"/framework/guides/creating-content-types","guides",false,"","Creating content types","How to create new content types for the SDP platform","page",{"type":15,"children":16,"toc":2274},"root",[17,38,45,50,95,101,106,115,144,152,158,163,197,202,792,798,818,831,1003,1009,1021,1057,1077,1088,2136,2142,2164,2268],{"type":18,"tag":19,"props":20,"children":21},"element","blockquote",{},[22],{"type":18,"tag":23,"props":24,"children":25},"p",{},[26,29,36],{"type":27,"value":28},"text","See ",{"type":18,"tag":30,"props":31,"children":33},"a",{"href":32},"/framework/key-concepts/content-types",[34],{"type":27,"value":35},"key concepts - content types",{"type":27,"value":37}," for an overview of what content types are and the core content types used within the SDP platform.",{"type":18,"tag":39,"props":40,"children":42},"h2",{"id":41},"anatomy",[43],{"type":27,"value":44},"Anatomy",{"type":18,"tag":23,"props":46,"children":47},{},[48],{"type":27,"value":49},"Content types are comprised of three main parts:",{"type":18,"tag":51,"props":52,"children":53},"ul",{},[54,66,84],{"type":18,"tag":55,"props":56,"children":57},"li",{},[58,64],{"type":18,"tag":30,"props":59,"children":61},{"href":60},"#the-mapping-object",[62],{"type":27,"value":63},"A mapping object",{"type":27,"value":65}," - maps API data to pass to a Vue component",{"type":18,"tag":55,"props":67,"children":68},{},[69,75,77],{"type":18,"tag":30,"props":70,"children":72},{"href":71},"#the-server-plugin",[73],{"type":27,"value":74},"A server plugin",{"type":27,"value":76}," - registers the content type with ",{"type":18,"tag":78,"props":79,"children":81},"code",{"className":80},[],[82],{"type":27,"value":83},"@dpc-sdp/ripple-tide-api",{"type":18,"tag":55,"props":85,"children":86},{},[87,93],{"type":18,"tag":30,"props":88,"children":90},{"href":89},"#the-vue-component",[91],{"type":27,"value":92},"And Vue components",{"type":27,"value":94}," - takes the mapped data and renders the content type",{"type":18,"tag":39,"props":96,"children":98},{"id":97},"creating-a-content-type",[99],{"type":27,"value":100},"Creating a content type",{"type":18,"tag":23,"props":102,"children":103},{},[104],{"type":27,"value":105},"The Nuxt Ripple CLI provides a simple way to add new content types, to get started just run the following command:",{"type":18,"tag":107,"props":108,"children":110},"pre",{"code":109},"npx @dpc-sdp/nuxt-ripple-cli add content-type [DIRECTORY] --name {NAME} --createTests --cypressPath {CYPRESSPATH}\n",[111],{"type":18,"tag":78,"props":112,"children":113},{"__ignoreMap":10},[114],{"type":27,"value":109},{"type":18,"tag":23,"props":116,"children":117},{},[118,120,126,128,134,136,142],{"type":27,"value":119},"Where ",{"type":18,"tag":78,"props":121,"children":123},{"className":122},[],[124],{"type":27,"value":125},"[DIRECTORY]",{"type":27,"value":127}," is the location to output the content type scaffolding, ",{"type":18,"tag":78,"props":129,"children":131},{"className":130},[],[132],{"type":27,"value":133},"{NAME}",{"type":27,"value":135}," is the name of the new content type, and ",{"type":18,"tag":78,"props":137,"children":139},{"className":138},[],[140],{"type":27,"value":141},"{CYPRESSPATH}",{"type":27,"value":143}," is the relative path to be used for the cypress tests folder.",{"type":18,"tag":19,"props":145,"children":146},{},[147],{"type":18,"tag":23,"props":148,"children":149},{},[150],{"type":27,"value":151},"Using the CLI is the preferred way to create new content types as it will ensure the correct file structure and naming conventions are used. It will also scaffold the mapping object, server plugin, and Vue component for you.",{"type":18,"tag":39,"props":153,"children":155},{"id":154},"the-mapping-object",[156],{"type":27,"value":157},"The mapping object",{"type":18,"tag":23,"props":159,"children":160},{},[161],{"type":27,"value":162},"The mapping object is responsible for supplying the data mapping and includes.",{"type":18,"tag":51,"props":164,"children":165},{},[166,177],{"type":18,"tag":55,"props":167,"children":168},{},[169,175],{"type":18,"tag":170,"props":171,"children":172},"strong",{},[173],{"type":27,"value":174},"Data mapping",{"type":27,"value":176},": the data mapping is responsible for mapping the Tide API response data (i.e. Drupal JSON) into a clean format that can be used within the Vue component.",{"type":18,"tag":55,"props":178,"children":179},{},[180,185,187,195],{"type":18,"tag":170,"props":181,"children":182},{},[183],{"type":27,"value":184},"Includes",{"type":27,"value":186},": the includes are an array of fields that need to be added to the API request so Drupal knows what referenced entities to include in the API response, for more on Drupal includes see ",{"type":18,"tag":30,"props":188,"children":192},{"href":189,"rel":190},"https://www.drupal.org/docs/core-modules-and-themes/core-modules/jsonapi-module/includes",[191],"nofollow",[193],{"type":27,"value":194},"JSON API includes",{"type":27,"value":196},".",{"type":18,"tag":23,"props":198,"children":199},{},[200],{"type":27,"value":201},"Below is an example mapping object.",{"type":18,"tag":107,"props":203,"children":207},{"code":204,"language":205,"meta":10,"className":206,"style":10},"import type { IRplTideModuleMapping } from '@dpc-sdp/ripple-tide-api/types'\nimport { tidePageBaseMapping, tidePageBaseIncludes } from '@dpc-sdp/nuxt-ripple/mapping'\nimport { getField, getImageFromField } from '@dpc-sdp/ripple-tide-api'\n\nconst tideMyConentTypeModule: IRplTideModuleMapping = {\n  mapping: {\n    // The base mapping is used to add common fields\n    // See the tidePageBaseMapping function for details \n    ...tidePageBaseMapping({ withTopicTags: true }),\n    \n    content: 'field_my_content_type_content',\n    \n    // Can be nested as needed\n    header: {\n      intro: 'field_landing_page_intro_text',\n    },\n    \n    // Use a function to transform the data\n    files: (src) => getField(src, 'field_node_files').map((file) => ({\n      name: file.name,\n      url: file.field_media_file.url\n    })),\n\n    // Or when using helper functions\n    image: (src) => getImageFromField(src, 'field_featured_image.field_media_image')\n  },\n  includes: [\n    // The base includes are used to include common fields\n    // See the tidePageBaseIncludes function for details \n    ...tidePageBaseIncludes({ withTopicTags: true }),\n    \n    'field_featured_image',\n    'field_featured_image.field_media_image'\n  ]\n}\n\nexport default tideMyConentTypeModule\n","ts","language-ts shiki shiki-themes github-light",[208],{"type":18,"tag":78,"props":209,"children":210},{"__ignoreMap":10},[211,245,267,289,299,335,344,354,363,392,401,420,428,437,446,464,473,481,490,568,577,586,595,603,612,656,665,674,683,692,717,725,738,747,756,765,773],{"type":18,"tag":212,"props":213,"children":216},"span",{"class":214,"line":215},"line",1,[217,223,228,234,239],{"type":18,"tag":212,"props":218,"children":220},{"style":219},"--shiki-default:#D73A49",[221],{"type":27,"value":222},"import",{"type":18,"tag":212,"props":224,"children":225},{"style":219},[226],{"type":27,"value":227}," type",{"type":18,"tag":212,"props":229,"children":231},{"style":230},"--shiki-default:#24292E",[232],{"type":27,"value":233}," { IRplTideModuleMapping } ",{"type":18,"tag":212,"props":235,"children":236},{"style":219},[237],{"type":27,"value":238},"from",{"type":18,"tag":212,"props":240,"children":242},{"style":241},"--shiki-default:#032F62",[243],{"type":27,"value":244}," '@dpc-sdp/ripple-tide-api/types'\n",{"type":18,"tag":212,"props":246,"children":248},{"class":214,"line":247},2,[249,253,258,262],{"type":18,"tag":212,"props":250,"children":251},{"style":219},[252],{"type":27,"value":222},{"type":18,"tag":212,"props":254,"children":255},{"style":230},[256],{"type":27,"value":257}," { tidePageBaseMapping, tidePageBaseIncludes } ",{"type":18,"tag":212,"props":259,"children":260},{"style":219},[261],{"type":27,"value":238},{"type":18,"tag":212,"props":263,"children":264},{"style":241},[265],{"type":27,"value":266}," '@dpc-sdp/nuxt-ripple/mapping'\n",{"type":18,"tag":212,"props":268,"children":270},{"class":214,"line":269},3,[271,275,280,284],{"type":18,"tag":212,"props":272,"children":273},{"style":219},[274],{"type":27,"value":222},{"type":18,"tag":212,"props":276,"children":277},{"style":230},[278],{"type":27,"value":279}," { getField, getImageFromField } ",{"type":18,"tag":212,"props":281,"children":282},{"style":219},[283],{"type":27,"value":238},{"type":18,"tag":212,"props":285,"children":286},{"style":241},[287],{"type":27,"value":288}," '@dpc-sdp/ripple-tide-api'\n",{"type":18,"tag":212,"props":290,"children":292},{"class":214,"line":291},4,[293],{"type":18,"tag":212,"props":294,"children":296},{"emptyLinePlaceholder":295},true,[297],{"type":27,"value":298},"\n",{"type":18,"tag":212,"props":300,"children":302},{"class":214,"line":301},5,[303,308,314,319,325,330],{"type":18,"tag":212,"props":304,"children":305},{"style":219},[306],{"type":27,"value":307},"const",{"type":18,"tag":212,"props":309,"children":311},{"style":310},"--shiki-default:#005CC5",[312],{"type":27,"value":313}," tideMyConentTypeModule",{"type":18,"tag":212,"props":315,"children":316},{"style":219},[317],{"type":27,"value":318},":",{"type":18,"tag":212,"props":320,"children":322},{"style":321},"--shiki-default:#6F42C1",[323],{"type":27,"value":324}," IRplTideModuleMapping",{"type":18,"tag":212,"props":326,"children":327},{"style":219},[328],{"type":27,"value":329}," =",{"type":18,"tag":212,"props":331,"children":332},{"style":230},[333],{"type":27,"value":334}," {\n",{"type":18,"tag":212,"props":336,"children":338},{"class":214,"line":337},6,[339],{"type":18,"tag":212,"props":340,"children":341},{"style":230},[342],{"type":27,"value":343},"  mapping: {\n",{"type":18,"tag":212,"props":345,"children":347},{"class":214,"line":346},7,[348],{"type":18,"tag":212,"props":349,"children":351},{"style":350},"--shiki-default:#6A737D",[352],{"type":27,"value":353},"    // The base mapping is used to add common fields\n",{"type":18,"tag":212,"props":355,"children":357},{"class":214,"line":356},8,[358],{"type":18,"tag":212,"props":359,"children":360},{"style":350},[361],{"type":27,"value":362},"    // See the tidePageBaseMapping function for details \n",{"type":18,"tag":212,"props":364,"children":366},{"class":214,"line":365},9,[367,372,377,382,387],{"type":18,"tag":212,"props":368,"children":369},{"style":219},[370],{"type":27,"value":371},"    ...",{"type":18,"tag":212,"props":373,"children":374},{"style":321},[375],{"type":27,"value":376},"tidePageBaseMapping",{"type":18,"tag":212,"props":378,"children":379},{"style":230},[380],{"type":27,"value":381},"({ withTopicTags: ",{"type":18,"tag":212,"props":383,"children":384},{"style":310},[385],{"type":27,"value":386},"true",{"type":18,"tag":212,"props":388,"children":389},{"style":230},[390],{"type":27,"value":391}," }),\n",{"type":18,"tag":212,"props":393,"children":395},{"class":214,"line":394},10,[396],{"type":18,"tag":212,"props":397,"children":398},{"style":230},[399],{"type":27,"value":400},"    \n",{"type":18,"tag":212,"props":402,"children":404},{"class":214,"line":403},11,[405,410,415],{"type":18,"tag":212,"props":406,"children":407},{"style":230},[408],{"type":27,"value":409},"    content: ",{"type":18,"tag":212,"props":411,"children":412},{"style":241},[413],{"type":27,"value":414},"'field_my_content_type_content'",{"type":18,"tag":212,"props":416,"children":417},{"style":230},[418],{"type":27,"value":419},",\n",{"type":18,"tag":212,"props":421,"children":423},{"class":214,"line":422},12,[424],{"type":18,"tag":212,"props":425,"children":426},{"style":230},[427],{"type":27,"value":400},{"type":18,"tag":212,"props":429,"children":431},{"class":214,"line":430},13,[432],{"type":18,"tag":212,"props":433,"children":434},{"style":350},[435],{"type":27,"value":436},"    // Can be nested as needed\n",{"type":18,"tag":212,"props":438,"children":440},{"class":214,"line":439},14,[441],{"type":18,"tag":212,"props":442,"children":443},{"style":230},[444],{"type":27,"value":445},"    header: {\n",{"type":18,"tag":212,"props":447,"children":449},{"class":214,"line":448},15,[450,455,460],{"type":18,"tag":212,"props":451,"children":452},{"style":230},[453],{"type":27,"value":454},"      intro: ",{"type":18,"tag":212,"props":456,"children":457},{"style":241},[458],{"type":27,"value":459},"'field_landing_page_intro_text'",{"type":18,"tag":212,"props":461,"children":462},{"style":230},[463],{"type":27,"value":419},{"type":18,"tag":212,"props":465,"children":467},{"class":214,"line":466},16,[468],{"type":18,"tag":212,"props":469,"children":470},{"style":230},[471],{"type":27,"value":472},"    },\n",{"type":18,"tag":212,"props":474,"children":476},{"class":214,"line":475},17,[477],{"type":18,"tag":212,"props":478,"children":479},{"style":230},[480],{"type":27,"value":400},{"type":18,"tag":212,"props":482,"children":484},{"class":214,"line":483},18,[485],{"type":18,"tag":212,"props":486,"children":487},{"style":350},[488],{"type":27,"value":489},"    // Use a function to transform the data\n",{"type":18,"tag":212,"props":491,"children":493},{"class":214,"line":492},19,[494,499,504,510,515,520,525,530,535,540,545,550,555,559,563],{"type":18,"tag":212,"props":495,"children":496},{"style":321},[497],{"type":27,"value":498},"    files",{"type":18,"tag":212,"props":500,"children":501},{"style":230},[502],{"type":27,"value":503},": (",{"type":18,"tag":212,"props":505,"children":507},{"style":506},"--shiki-default:#E36209",[508],{"type":27,"value":509},"src",{"type":18,"tag":212,"props":511,"children":512},{"style":230},[513],{"type":27,"value":514},") ",{"type":18,"tag":212,"props":516,"children":517},{"style":219},[518],{"type":27,"value":519},"=>",{"type":18,"tag":212,"props":521,"children":522},{"style":321},[523],{"type":27,"value":524}," getField",{"type":18,"tag":212,"props":526,"children":527},{"style":230},[528],{"type":27,"value":529},"(src, ",{"type":18,"tag":212,"props":531,"children":532},{"style":241},[533],{"type":27,"value":534},"'field_node_files'",{"type":18,"tag":212,"props":536,"children":537},{"style":230},[538],{"type":27,"value":539},").",{"type":18,"tag":212,"props":541,"children":542},{"style":321},[543],{"type":27,"value":544},"map",{"type":18,"tag":212,"props":546,"children":547},{"style":230},[548],{"type":27,"value":549},"((",{"type":18,"tag":212,"props":551,"children":552},{"style":506},[553],{"type":27,"value":554},"file",{"type":18,"tag":212,"props":556,"children":557},{"style":230},[558],{"type":27,"value":514},{"type":18,"tag":212,"props":560,"children":561},{"style":219},[562],{"type":27,"value":519},{"type":18,"tag":212,"props":564,"children":565},{"style":230},[566],{"type":27,"value":567}," ({\n",{"type":18,"tag":212,"props":569,"children":571},{"class":214,"line":570},20,[572],{"type":18,"tag":212,"props":573,"children":574},{"style":230},[575],{"type":27,"value":576},"      name: file.name,\n",{"type":18,"tag":212,"props":578,"children":580},{"class":214,"line":579},21,[581],{"type":18,"tag":212,"props":582,"children":583},{"style":230},[584],{"type":27,"value":585},"      url: file.field_media_file.url\n",{"type":18,"tag":212,"props":587,"children":589},{"class":214,"line":588},22,[590],{"type":18,"tag":212,"props":591,"children":592},{"style":230},[593],{"type":27,"value":594},"    })),\n",{"type":18,"tag":212,"props":596,"children":598},{"class":214,"line":597},23,[599],{"type":18,"tag":212,"props":600,"children":601},{"emptyLinePlaceholder":295},[602],{"type":27,"value":298},{"type":18,"tag":212,"props":604,"children":606},{"class":214,"line":605},24,[607],{"type":18,"tag":212,"props":608,"children":609},{"style":350},[610],{"type":27,"value":611},"    // Or when using helper functions\n",{"type":18,"tag":212,"props":613,"children":615},{"class":214,"line":614},25,[616,621,625,629,633,637,642,646,651],{"type":18,"tag":212,"props":617,"children":618},{"style":321},[619],{"type":27,"value":620},"    image",{"type":18,"tag":212,"props":622,"children":623},{"style":230},[624],{"type":27,"value":503},{"type":18,"tag":212,"props":626,"children":627},{"style":506},[628],{"type":27,"value":509},{"type":18,"tag":212,"props":630,"children":631},{"style":230},[632],{"type":27,"value":514},{"type":18,"tag":212,"props":634,"children":635},{"style":219},[636],{"type":27,"value":519},{"type":18,"tag":212,"props":638,"children":639},{"style":321},[640],{"type":27,"value":641}," getImageFromField",{"type":18,"tag":212,"props":643,"children":644},{"style":230},[645],{"type":27,"value":529},{"type":18,"tag":212,"props":647,"children":648},{"style":241},[649],{"type":27,"value":650},"'field_featured_image.field_media_image'",{"type":18,"tag":212,"props":652,"children":653},{"style":230},[654],{"type":27,"value":655},")\n",{"type":18,"tag":212,"props":657,"children":659},{"class":214,"line":658},26,[660],{"type":18,"tag":212,"props":661,"children":662},{"style":230},[663],{"type":27,"value":664},"  },\n",{"type":18,"tag":212,"props":666,"children":668},{"class":214,"line":667},27,[669],{"type":18,"tag":212,"props":670,"children":671},{"style":230},[672],{"type":27,"value":673},"  includes: [\n",{"type":18,"tag":212,"props":675,"children":677},{"class":214,"line":676},28,[678],{"type":18,"tag":212,"props":679,"children":680},{"style":350},[681],{"type":27,"value":682},"    // The base includes are used to include common fields\n",{"type":18,"tag":212,"props":684,"children":686},{"class":214,"line":685},29,[687],{"type":18,"tag":212,"props":688,"children":689},{"style":350},[690],{"type":27,"value":691},"    // See the tidePageBaseIncludes function for details \n",{"type":18,"tag":212,"props":693,"children":695},{"class":214,"line":694},30,[696,700,705,709,713],{"type":18,"tag":212,"props":697,"children":698},{"style":219},[699],{"type":27,"value":371},{"type":18,"tag":212,"props":701,"children":702},{"style":321},[703],{"type":27,"value":704},"tidePageBaseIncludes",{"type":18,"tag":212,"props":706,"children":707},{"style":230},[708],{"type":27,"value":381},{"type":18,"tag":212,"props":710,"children":711},{"style":310},[712],{"type":27,"value":386},{"type":18,"tag":212,"props":714,"children":715},{"style":230},[716],{"type":27,"value":391},{"type":18,"tag":212,"props":718,"children":720},{"class":214,"line":719},31,[721],{"type":18,"tag":212,"props":722,"children":723},{"style":230},[724],{"type":27,"value":400},{"type":18,"tag":212,"props":726,"children":728},{"class":214,"line":727},32,[729,734],{"type":18,"tag":212,"props":730,"children":731},{"style":241},[732],{"type":27,"value":733},"    'field_featured_image'",{"type":18,"tag":212,"props":735,"children":736},{"style":230},[737],{"type":27,"value":419},{"type":18,"tag":212,"props":739,"children":741},{"class":214,"line":740},33,[742],{"type":18,"tag":212,"props":743,"children":744},{"style":241},[745],{"type":27,"value":746},"    'field_featured_image.field_media_image'\n",{"type":18,"tag":212,"props":748,"children":750},{"class":214,"line":749},34,[751],{"type":18,"tag":212,"props":752,"children":753},{"style":230},[754],{"type":27,"value":755},"  ]\n",{"type":18,"tag":212,"props":757,"children":759},{"class":214,"line":758},35,[760],{"type":18,"tag":212,"props":761,"children":762},{"style":230},[763],{"type":27,"value":764},"}\n",{"type":18,"tag":212,"props":766,"children":768},{"class":214,"line":767},36,[769],{"type":18,"tag":212,"props":770,"children":771},{"emptyLinePlaceholder":295},[772],{"type":27,"value":298},{"type":18,"tag":212,"props":774,"children":776},{"class":214,"line":775},37,[777,782,787],{"type":18,"tag":212,"props":778,"children":779},{"style":219},[780],{"type":27,"value":781},"export",{"type":18,"tag":212,"props":783,"children":784},{"style":219},[785],{"type":27,"value":786}," default",{"type":18,"tag":212,"props":788,"children":789},{"style":230},[790],{"type":27,"value":791}," tideMyConentTypeModule\n",{"type":18,"tag":39,"props":793,"children":795},{"id":794},"the-server-plugin",[796],{"type":27,"value":797},"The server plugin",{"type":18,"tag":23,"props":799,"children":800},{},[801,803,808,810,816],{"type":27,"value":802},"The server plugin is responsible for registering the new content type with ",{"type":18,"tag":78,"props":804,"children":806},{"className":805},[],[807],{"type":27,"value":83},{"type":27,"value":809},", this file needs to live within the ",{"type":18,"tag":78,"props":811,"children":813},{"className":812},[],[814],{"type":27,"value":815},"server/plugins",{"type":27,"value":817}," directory of the content type.",{"type":18,"tag":23,"props":819,"children":820},{},[821,823,829],{"type":27,"value":822},"The content type can then be registered by calling the ",{"type":18,"tag":78,"props":824,"children":826},{"className":825},[],[827],{"type":27,"value":828},"setContentType",{"type":27,"value":830}," method on the Tide page API. This method takes two arguments, the first is the name of the content type, and the second is the mapping object. If you have used the CLI to create the content type this will already be done for you.",{"type":18,"tag":107,"props":832,"children":834},{"code":833,"language":205,"meta":10,"className":206,"style":10},"import type { NitroApp } from 'nitropack'\nimport { defineNitroPlugin } from 'nitropack/dist/runtime/plugin'\nimport tideMyContentTypeModule from '../../mapping'\n\nexport default defineNitroPlugin(async (nitroApp: NitroApp) => {\n  nitroApp.tide?.pageApi.setContentType('my-content-type', tideMyContentTypeModule)\n})\n",[835],{"type":18,"tag":78,"props":836,"children":837},{"__ignoreMap":10},[838,863,884,905,912,969,995],{"type":18,"tag":212,"props":839,"children":840},{"class":214,"line":215},[841,845,849,854,858],{"type":18,"tag":212,"props":842,"children":843},{"style":219},[844],{"type":27,"value":222},{"type":18,"tag":212,"props":846,"children":847},{"style":219},[848],{"type":27,"value":227},{"type":18,"tag":212,"props":850,"children":851},{"style":230},[852],{"type":27,"value":853}," { NitroApp } ",{"type":18,"tag":212,"props":855,"children":856},{"style":219},[857],{"type":27,"value":238},{"type":18,"tag":212,"props":859,"children":860},{"style":241},[861],{"type":27,"value":862}," 'nitropack'\n",{"type":18,"tag":212,"props":864,"children":865},{"class":214,"line":247},[866,870,875,879],{"type":18,"tag":212,"props":867,"children":868},{"style":219},[869],{"type":27,"value":222},{"type":18,"tag":212,"props":871,"children":872},{"style":230},[873],{"type":27,"value":874}," { defineNitroPlugin } ",{"type":18,"tag":212,"props":876,"children":877},{"style":219},[878],{"type":27,"value":238},{"type":18,"tag":212,"props":880,"children":881},{"style":241},[882],{"type":27,"value":883}," 'nitropack/dist/runtime/plugin'\n",{"type":18,"tag":212,"props":885,"children":886},{"class":214,"line":269},[887,891,896,900],{"type":18,"tag":212,"props":888,"children":889},{"style":219},[890],{"type":27,"value":222},{"type":18,"tag":212,"props":892,"children":893},{"style":230},[894],{"type":27,"value":895}," tideMyContentTypeModule ",{"type":18,"tag":212,"props":897,"children":898},{"style":219},[899],{"type":27,"value":238},{"type":18,"tag":212,"props":901,"children":902},{"style":241},[903],{"type":27,"value":904}," '../../mapping'\n",{"type":18,"tag":212,"props":906,"children":907},{"class":214,"line":291},[908],{"type":18,"tag":212,"props":909,"children":910},{"emptyLinePlaceholder":295},[911],{"type":27,"value":298},{"type":18,"tag":212,"props":913,"children":914},{"class":214,"line":301},[915,919,923,928,933,938,943,948,952,957,961,965],{"type":18,"tag":212,"props":916,"children":917},{"style":219},[918],{"type":27,"value":781},{"type":18,"tag":212,"props":920,"children":921},{"style":219},[922],{"type":27,"value":786},{"type":18,"tag":212,"props":924,"children":925},{"style":321},[926],{"type":27,"value":927}," defineNitroPlugin",{"type":18,"tag":212,"props":929,"children":930},{"style":230},[931],{"type":27,"value":932},"(",{"type":18,"tag":212,"props":934,"children":935},{"style":219},[936],{"type":27,"value":937},"async",{"type":18,"tag":212,"props":939,"children":940},{"style":230},[941],{"type":27,"value":942}," (",{"type":18,"tag":212,"props":944,"children":945},{"style":506},[946],{"type":27,"value":947},"nitroApp",{"type":18,"tag":212,"props":949,"children":950},{"style":219},[951],{"type":27,"value":318},{"type":18,"tag":212,"props":953,"children":954},{"style":321},[955],{"type":27,"value":956}," NitroApp",{"type":18,"tag":212,"props":958,"children":959},{"style":230},[960],{"type":27,"value":514},{"type":18,"tag":212,"props":962,"children":963},{"style":219},[964],{"type":27,"value":519},{"type":18,"tag":212,"props":966,"children":967},{"style":230},[968],{"type":27,"value":334},{"type":18,"tag":212,"props":970,"children":971},{"class":214,"line":337},[972,977,981,985,990],{"type":18,"tag":212,"props":973,"children":974},{"style":230},[975],{"type":27,"value":976},"  nitroApp.tide?.pageApi.",{"type":18,"tag":212,"props":978,"children":979},{"style":321},[980],{"type":27,"value":828},{"type":18,"tag":212,"props":982,"children":983},{"style":230},[984],{"type":27,"value":932},{"type":18,"tag":212,"props":986,"children":987},{"style":241},[988],{"type":27,"value":989},"'my-content-type'",{"type":18,"tag":212,"props":991,"children":992},{"style":230},[993],{"type":27,"value":994},", tideMyContentTypeModule)\n",{"type":18,"tag":212,"props":996,"children":997},{"class":214,"line":346},[998],{"type":18,"tag":212,"props":999,"children":1000},{"style":230},[1001],{"type":27,"value":1002},"})\n",{"type":18,"tag":39,"props":1004,"children":1006},{"id":1005},"the-vue-component",[1007],{"type":27,"value":1008},"The Vue component",{"type":18,"tag":23,"props":1010,"children":1011},{},[1012,1014,1019],{"type":27,"value":1013},"A Vue component is needed to render the content type. This component will receive a ",{"type":18,"tag":78,"props":1015,"children":1017},{"className":1016},[],[1018],{"type":27,"value":13},{"type":27,"value":1020}," prop, it's this prop that contains the mapped data from the Tide API response.",{"type":18,"tag":19,"props":1022,"children":1023},{},[1024],{"type":18,"tag":23,"props":1025,"children":1026},{},[1027,1032,1034,1040,1042,1048,1050,1056],{"type":18,"tag":170,"props":1028,"children":1029},{},[1030],{"type":27,"value":1031},"Important note",{"type":27,"value":1033},": The component needs to be registered globally, this can be done by adding the component to a ",{"type":18,"tag":78,"props":1035,"children":1037},{"className":1036},[],[1038],{"type":27,"value":1039},"/components/global",{"type":27,"value":1041}," folder within the content type. Because this is global the name needs to be unique, it must also be prefixed with ",{"type":18,"tag":78,"props":1043,"children":1045},{"className":1044},[],[1046],{"type":27,"value":1047},"Tide",{"type":27,"value":1049}," i.e. ",{"type":18,"tag":78,"props":1051,"children":1053},{"className":1052},[],[1054],{"type":27,"value":1055},"TideMyContentType",{"type":27,"value":196},{"type":18,"tag":23,"props":1058,"children":1059},{},[1060,1062,1068,1070,1075],{"type":27,"value":1061},"This component should use the ",{"type":18,"tag":78,"props":1063,"children":1065},{"className":1064},[],[1066],{"type":27,"value":1067},"TideBaseLayout",{"type":27,"value":1069}," component to render the shell of the site, from there slots are used to render the content types content in the right locations. If you're using the CLI it will take care of scaffolding a global component that uses ",{"type":18,"tag":78,"props":1071,"children":1073},{"className":1072},[],[1074],{"type":27,"value":1067},{"type":27,"value":1076}," for you.",{"type":18,"tag":23,"props":1078,"children":1079},{},[1080,1082,1087],{"type":27,"value":1081},"Below is an example component using ",{"type":18,"tag":78,"props":1083,"children":1085},{"className":1084},[],[1086],{"type":27,"value":1067},{"type":27,"value":196},{"type":18,"tag":107,"props":1089,"children":1093},{"code":1090,"language":1091,"meta":10,"className":1092,"style":10},"\u003Ctemplate>\n  \u003CTideBaseLayout\n    :site=\"site\"\n    :page=\"page\"\n    :siteSection=\"page.siteSection\"\n    :pageTitle=\"page.title\"\n    :pageLanguage=\"page.lang\"\n    :updatedDate=\"page.changed || page.created\"\n    :showContentRating=\"page.showContentRating\"\n  >\n    \u003Ctemplate #aboveHeader>\n      \u003Cslot name=\"aboveHeader\">\u003C/slot>\n    \u003C/template>\n    \u003Ctemplate #primaryNav>\n      \u003Cslot name=\"primaryNav\">\u003C/slot>\n    \u003C/template>\n    \u003Ctemplate #breadcrumbs>\n      \u003Cslot name=\"breadcrumbs\">\u003C/slot>\n    \u003C/template>\n    \u003Ctemplate #aboveBody>\n      \u003Cslot name=\"aboveBody\">\u003C/slot>\n    \u003C/template>\n    \u003Ctemplate #body>\n      \u003C!-- Add content within the relevant slot -->\n      \u003CTideMyContentTypeContent :content=\"page.content\" />\n    \u003C/template>\n    \u003Ctemplate #sidebar>\n      \u003Cslot name=\"sidebar\">\u003C/slot>\n    \u003C/template>\n    \u003Ctemplate #footer>\n      \u003Cslot name=\"footer\">\u003C/slot>\n    \u003C/template>\n  \u003C/TideBaseLayout>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { TideSiteData } from '@dpc-sdp/ripple-tide-api/types'\nimport type { TideMediaPage } from '../../types'\n\ninterface Props {\n  site: TideSiteData\n  page: TideMediaPage\n}\n\ndefineProps\u003CProps>()\n\u003C/script>\n","vue","language-vue shiki shiki-themes github-light",[1094],{"type":18,"tag":78,"props":1095,"children":1096},{"__ignoreMap":10},[1097,1116,1129,1161,1188,1217,1246,1275,1314,1343,1351,1377,1417,1433,1457,1493,1508,1532,1568,1583,1607,1643,1658,1682,1690,1734,1749,1773,1809,1824,1848,1884,1899,1915,1931,1938,1973,1993,2019,2027,2045,2063,2081,2089,2097,2120],{"type":18,"tag":212,"props":1098,"children":1099},{"class":214,"line":215},[1100,1105,1111],{"type":18,"tag":212,"props":1101,"children":1102},{"style":230},[1103],{"type":27,"value":1104},"\u003C",{"type":18,"tag":212,"props":1106,"children":1108},{"style":1107},"--shiki-default:#22863A",[1109],{"type":27,"value":1110},"template",{"type":18,"tag":212,"props":1112,"children":1113},{"style":230},[1114],{"type":27,"value":1115},">\n",{"type":18,"tag":212,"props":1117,"children":1118},{"class":214,"line":247},[1119,1124],{"type":18,"tag":212,"props":1120,"children":1121},{"style":230},[1122],{"type":27,"value":1123},"  \u003C",{"type":18,"tag":212,"props":1125,"children":1126},{"style":1107},[1127],{"type":27,"value":1128},"TideBaseLayout\n",{"type":18,"tag":212,"props":1130,"children":1131},{"class":214,"line":269},[1132,1137,1142,1147,1152,1156],{"type":18,"tag":212,"props":1133,"children":1134},{"style":230},[1135],{"type":27,"value":1136},"    :",{"type":18,"tag":212,"props":1138,"children":1139},{"style":321},[1140],{"type":27,"value":1141},"site",{"type":18,"tag":212,"props":1143,"children":1144},{"style":230},[1145],{"type":27,"value":1146},"=",{"type":18,"tag":212,"props":1148,"children":1149},{"style":241},[1150],{"type":27,"value":1151},"\"",{"type":18,"tag":212,"props":1153,"children":1154},{"style":230},[1155],{"type":27,"value":1141},{"type":18,"tag":212,"props":1157,"children":1158},{"style":241},[1159],{"type":27,"value":1160},"\"\n",{"type":18,"tag":212,"props":1162,"children":1163},{"class":214,"line":291},[1164,1168,1172,1176,1180,1184],{"type":18,"tag":212,"props":1165,"children":1166},{"style":230},[1167],{"type":27,"value":1136},{"type":18,"tag":212,"props":1169,"children":1170},{"style":321},[1171],{"type":27,"value":13},{"type":18,"tag":212,"props":1173,"children":1174},{"style":230},[1175],{"type":27,"value":1146},{"type":18,"tag":212,"props":1177,"children":1178},{"style":241},[1179],{"type":27,"value":1151},{"type":18,"tag":212,"props":1181,"children":1182},{"style":230},[1183],{"type":27,"value":13},{"type":18,"tag":212,"props":1185,"children":1186},{"style":241},[1187],{"type":27,"value":1160},{"type":18,"tag":212,"props":1189,"children":1190},{"class":214,"line":301},[1191,1195,1200,1204,1208,1213],{"type":18,"tag":212,"props":1192,"children":1193},{"style":230},[1194],{"type":27,"value":1136},{"type":18,"tag":212,"props":1196,"children":1197},{"style":321},[1198],{"type":27,"value":1199},"siteSection",{"type":18,"tag":212,"props":1201,"children":1202},{"style":230},[1203],{"type":27,"value":1146},{"type":18,"tag":212,"props":1205,"children":1206},{"style":241},[1207],{"type":27,"value":1151},{"type":18,"tag":212,"props":1209,"children":1210},{"style":230},[1211],{"type":27,"value":1212},"page.siteSection",{"type":18,"tag":212,"props":1214,"children":1215},{"style":241},[1216],{"type":27,"value":1160},{"type":18,"tag":212,"props":1218,"children":1219},{"class":214,"line":337},[1220,1224,1229,1233,1237,1242],{"type":18,"tag":212,"props":1221,"children":1222},{"style":230},[1223],{"type":27,"value":1136},{"type":18,"tag":212,"props":1225,"children":1226},{"style":321},[1227],{"type":27,"value":1228},"pageTitle",{"type":18,"tag":212,"props":1230,"children":1231},{"style":230},[1232],{"type":27,"value":1146},{"type":18,"tag":212,"props":1234,"children":1235},{"style":241},[1236],{"type":27,"value":1151},{"type":18,"tag":212,"props":1238,"children":1239},{"style":230},[1240],{"type":27,"value":1241},"page.title",{"type":18,"tag":212,"props":1243,"children":1244},{"style":241},[1245],{"type":27,"value":1160},{"type":18,"tag":212,"props":1247,"children":1248},{"class":214,"line":346},[1249,1253,1258,1262,1266,1271],{"type":18,"tag":212,"props":1250,"children":1251},{"style":230},[1252],{"type":27,"value":1136},{"type":18,"tag":212,"props":1254,"children":1255},{"style":321},[1256],{"type":27,"value":1257},"pageLanguage",{"type":18,"tag":212,"props":1259,"children":1260},{"style":230},[1261],{"type":27,"value":1146},{"type":18,"tag":212,"props":1263,"children":1264},{"style":241},[1265],{"type":27,"value":1151},{"type":18,"tag":212,"props":1267,"children":1268},{"style":230},[1269],{"type":27,"value":1270},"page.lang",{"type":18,"tag":212,"props":1272,"children":1273},{"style":241},[1274],{"type":27,"value":1160},{"type":18,"tag":212,"props":1276,"children":1277},{"class":214,"line":356},[1278,1282,1287,1291,1295,1300,1305,1310],{"type":18,"tag":212,"props":1279,"children":1280},{"style":230},[1281],{"type":27,"value":1136},{"type":18,"tag":212,"props":1283,"children":1284},{"style":321},[1285],{"type":27,"value":1286},"updatedDate",{"type":18,"tag":212,"props":1288,"children":1289},{"style":230},[1290],{"type":27,"value":1146},{"type":18,"tag":212,"props":1292,"children":1293},{"style":241},[1294],{"type":27,"value":1151},{"type":18,"tag":212,"props":1296,"children":1297},{"style":230},[1298],{"type":27,"value":1299},"page.changed ",{"type":18,"tag":212,"props":1301,"children":1302},{"style":219},[1303],{"type":27,"value":1304},"||",{"type":18,"tag":212,"props":1306,"children":1307},{"style":230},[1308],{"type":27,"value":1309}," page.created",{"type":18,"tag":212,"props":1311,"children":1312},{"style":241},[1313],{"type":27,"value":1160},{"type":18,"tag":212,"props":1315,"children":1316},{"class":214,"line":365},[1317,1321,1326,1330,1334,1339],{"type":18,"tag":212,"props":1318,"children":1319},{"style":230},[1320],{"type":27,"value":1136},{"type":18,"tag":212,"props":1322,"children":1323},{"style":321},[1324],{"type":27,"value":1325},"showContentRating",{"type":18,"tag":212,"props":1327,"children":1328},{"style":230},[1329],{"type":27,"value":1146},{"type":18,"tag":212,"props":1331,"children":1332},{"style":241},[1333],{"type":27,"value":1151},{"type":18,"tag":212,"props":1335,"children":1336},{"style":230},[1337],{"type":27,"value":1338},"page.showContentRating",{"type":18,"tag":212,"props":1340,"children":1341},{"style":241},[1342],{"type":27,"value":1160},{"type":18,"tag":212,"props":1344,"children":1345},{"class":214,"line":394},[1346],{"type":18,"tag":212,"props":1347,"children":1348},{"style":230},[1349],{"type":27,"value":1350},"  >\n",{"type":18,"tag":212,"props":1352,"children":1353},{"class":214,"line":403},[1354,1359,1363,1368,1373],{"type":18,"tag":212,"props":1355,"children":1356},{"style":230},[1357],{"type":27,"value":1358},"    \u003C",{"type":18,"tag":212,"props":1360,"children":1361},{"style":1107},[1362],{"type":27,"value":1110},{"type":18,"tag":212,"props":1364,"children":1365},{"style":230},[1366],{"type":27,"value":1367}," #",{"type":18,"tag":212,"props":1369,"children":1370},{"style":321},[1371],{"type":27,"value":1372},"aboveHeader",{"type":18,"tag":212,"props":1374,"children":1375},{"style":230},[1376],{"type":27,"value":1115},{"type":18,"tag":212,"props":1378,"children":1379},{"class":214,"line":422},[1380,1385,1390,1395,1399,1404,1409,1413],{"type":18,"tag":212,"props":1381,"children":1382},{"style":230},[1383],{"type":27,"value":1384},"      \u003C",{"type":18,"tag":212,"props":1386,"children":1387},{"style":1107},[1388],{"type":27,"value":1389},"slot",{"type":18,"tag":212,"props":1391,"children":1392},{"style":321},[1393],{"type":27,"value":1394}," name",{"type":18,"tag":212,"props":1396,"children":1397},{"style":230},[1398],{"type":27,"value":1146},{"type":18,"tag":212,"props":1400,"children":1401},{"style":241},[1402],{"type":27,"value":1403},"\"aboveHeader\"",{"type":18,"tag":212,"props":1405,"children":1406},{"style":230},[1407],{"type":27,"value":1408},">\u003C/",{"type":18,"tag":212,"props":1410,"children":1411},{"style":1107},[1412],{"type":27,"value":1389},{"type":18,"tag":212,"props":1414,"children":1415},{"style":230},[1416],{"type":27,"value":1115},{"type":18,"tag":212,"props":1418,"children":1419},{"class":214,"line":430},[1420,1425,1429],{"type":18,"tag":212,"props":1421,"children":1422},{"style":230},[1423],{"type":27,"value":1424},"    \u003C/",{"type":18,"tag":212,"props":1426,"children":1427},{"style":1107},[1428],{"type":27,"value":1110},{"type":18,"tag":212,"props":1430,"children":1431},{"style":230},[1432],{"type":27,"value":1115},{"type":18,"tag":212,"props":1434,"children":1435},{"class":214,"line":439},[1436,1440,1444,1448,1453],{"type":18,"tag":212,"props":1437,"children":1438},{"style":230},[1439],{"type":27,"value":1358},{"type":18,"tag":212,"props":1441,"children":1442},{"style":1107},[1443],{"type":27,"value":1110},{"type":18,"tag":212,"props":1445,"children":1446},{"style":230},[1447],{"type":27,"value":1367},{"type":18,"tag":212,"props":1449,"children":1450},{"style":321},[1451],{"type":27,"value":1452},"primaryNav",{"type":18,"tag":212,"props":1454,"children":1455},{"style":230},[1456],{"type":27,"value":1115},{"type":18,"tag":212,"props":1458,"children":1459},{"class":214,"line":448},[1460,1464,1468,1472,1476,1481,1485,1489],{"type":18,"tag":212,"props":1461,"children":1462},{"style":230},[1463],{"type":27,"value":1384},{"type":18,"tag":212,"props":1465,"children":1466},{"style":1107},[1467],{"type":27,"value":1389},{"type":18,"tag":212,"props":1469,"children":1470},{"style":321},[1471],{"type":27,"value":1394},{"type":18,"tag":212,"props":1473,"children":1474},{"style":230},[1475],{"type":27,"value":1146},{"type":18,"tag":212,"props":1477,"children":1478},{"style":241},[1479],{"type":27,"value":1480},"\"primaryNav\"",{"type":18,"tag":212,"props":1482,"children":1483},{"style":230},[1484],{"type":27,"value":1408},{"type":18,"tag":212,"props":1486,"children":1487},{"style":1107},[1488],{"type":27,"value":1389},{"type":18,"tag":212,"props":1490,"children":1491},{"style":230},[1492],{"type":27,"value":1115},{"type":18,"tag":212,"props":1494,"children":1495},{"class":214,"line":466},[1496,1500,1504],{"type":18,"tag":212,"props":1497,"children":1498},{"style":230},[1499],{"type":27,"value":1424},{"type":18,"tag":212,"props":1501,"children":1502},{"style":1107},[1503],{"type":27,"value":1110},{"type":18,"tag":212,"props":1505,"children":1506},{"style":230},[1507],{"type":27,"value":1115},{"type":18,"tag":212,"props":1509,"children":1510},{"class":214,"line":475},[1511,1515,1519,1523,1528],{"type":18,"tag":212,"props":1512,"children":1513},{"style":230},[1514],{"type":27,"value":1358},{"type":18,"tag":212,"props":1516,"children":1517},{"style":1107},[1518],{"type":27,"value":1110},{"type":18,"tag":212,"props":1520,"children":1521},{"style":230},[1522],{"type":27,"value":1367},{"type":18,"tag":212,"props":1524,"children":1525},{"style":321},[1526],{"type":27,"value":1527},"breadcrumbs",{"type":18,"tag":212,"props":1529,"children":1530},{"style":230},[1531],{"type":27,"value":1115},{"type":18,"tag":212,"props":1533,"children":1534},{"class":214,"line":483},[1535,1539,1543,1547,1551,1556,1560,1564],{"type":18,"tag":212,"props":1536,"children":1537},{"style":230},[1538],{"type":27,"value":1384},{"type":18,"tag":212,"props":1540,"children":1541},{"style":1107},[1542],{"type":27,"value":1389},{"type":18,"tag":212,"props":1544,"children":1545},{"style":321},[1546],{"type":27,"value":1394},{"type":18,"tag":212,"props":1548,"children":1549},{"style":230},[1550],{"type":27,"value":1146},{"type":18,"tag":212,"props":1552,"children":1553},{"style":241},[1554],{"type":27,"value":1555},"\"breadcrumbs\"",{"type":18,"tag":212,"props":1557,"children":1558},{"style":230},[1559],{"type":27,"value":1408},{"type":18,"tag":212,"props":1561,"children":1562},{"style":1107},[1563],{"type":27,"value":1389},{"type":18,"tag":212,"props":1565,"children":1566},{"style":230},[1567],{"type":27,"value":1115},{"type":18,"tag":212,"props":1569,"children":1570},{"class":214,"line":492},[1571,1575,1579],{"type":18,"tag":212,"props":1572,"children":1573},{"style":230},[1574],{"type":27,"value":1424},{"type":18,"tag":212,"props":1576,"children":1577},{"style":1107},[1578],{"type":27,"value":1110},{"type":18,"tag":212,"props":1580,"children":1581},{"style":230},[1582],{"type":27,"value":1115},{"type":18,"tag":212,"props":1584,"children":1585},{"class":214,"line":570},[1586,1590,1594,1598,1603],{"type":18,"tag":212,"props":1587,"children":1588},{"style":230},[1589],{"type":27,"value":1358},{"type":18,"tag":212,"props":1591,"children":1592},{"style":1107},[1593],{"type":27,"value":1110},{"type":18,"tag":212,"props":1595,"children":1596},{"style":230},[1597],{"type":27,"value":1367},{"type":18,"tag":212,"props":1599,"children":1600},{"style":321},[1601],{"type":27,"value":1602},"aboveBody",{"type":18,"tag":212,"props":1604,"children":1605},{"style":230},[1606],{"type":27,"value":1115},{"type":18,"tag":212,"props":1608,"children":1609},{"class":214,"line":579},[1610,1614,1618,1622,1626,1631,1635,1639],{"type":18,"tag":212,"props":1611,"children":1612},{"style":230},[1613],{"type":27,"value":1384},{"type":18,"tag":212,"props":1615,"children":1616},{"style":1107},[1617],{"type":27,"value":1389},{"type":18,"tag":212,"props":1619,"children":1620},{"style":321},[1621],{"type":27,"value":1394},{"type":18,"tag":212,"props":1623,"children":1624},{"style":230},[1625],{"type":27,"value":1146},{"type":18,"tag":212,"props":1627,"children":1628},{"style":241},[1629],{"type":27,"value":1630},"\"aboveBody\"",{"type":18,"tag":212,"props":1632,"children":1633},{"style":230},[1634],{"type":27,"value":1408},{"type":18,"tag":212,"props":1636,"children":1637},{"style":1107},[1638],{"type":27,"value":1389},{"type":18,"tag":212,"props":1640,"children":1641},{"style":230},[1642],{"type":27,"value":1115},{"type":18,"tag":212,"props":1644,"children":1645},{"class":214,"line":588},[1646,1650,1654],{"type":18,"tag":212,"props":1647,"children":1648},{"style":230},[1649],{"type":27,"value":1424},{"type":18,"tag":212,"props":1651,"children":1652},{"style":1107},[1653],{"type":27,"value":1110},{"type":18,"tag":212,"props":1655,"children":1656},{"style":230},[1657],{"type":27,"value":1115},{"type":18,"tag":212,"props":1659,"children":1660},{"class":214,"line":597},[1661,1665,1669,1673,1678],{"type":18,"tag":212,"props":1662,"children":1663},{"style":230},[1664],{"type":27,"value":1358},{"type":18,"tag":212,"props":1666,"children":1667},{"style":1107},[1668],{"type":27,"value":1110},{"type":18,"tag":212,"props":1670,"children":1671},{"style":230},[1672],{"type":27,"value":1367},{"type":18,"tag":212,"props":1674,"children":1675},{"style":321},[1676],{"type":27,"value":1677},"body",{"type":18,"tag":212,"props":1679,"children":1680},{"style":230},[1681],{"type":27,"value":1115},{"type":18,"tag":212,"props":1683,"children":1684},{"class":214,"line":605},[1685],{"type":18,"tag":212,"props":1686,"children":1687},{"style":350},[1688],{"type":27,"value":1689},"      \u003C!-- Add content within the relevant slot -->\n",{"type":18,"tag":212,"props":1691,"children":1692},{"class":214,"line":614},[1693,1697,1702,1707,1712,1716,1720,1725,1729],{"type":18,"tag":212,"props":1694,"children":1695},{"style":230},[1696],{"type":27,"value":1384},{"type":18,"tag":212,"props":1698,"children":1699},{"style":1107},[1700],{"type":27,"value":1701},"TideMyContentTypeContent",{"type":18,"tag":212,"props":1703,"children":1704},{"style":230},[1705],{"type":27,"value":1706}," :",{"type":18,"tag":212,"props":1708,"children":1709},{"style":321},[1710],{"type":27,"value":1711},"content",{"type":18,"tag":212,"props":1713,"children":1714},{"style":230},[1715],{"type":27,"value":1146},{"type":18,"tag":212,"props":1717,"children":1718},{"style":241},[1719],{"type":27,"value":1151},{"type":18,"tag":212,"props":1721,"children":1722},{"style":230},[1723],{"type":27,"value":1724},"page.content",{"type":18,"tag":212,"props":1726,"children":1727},{"style":241},[1728],{"type":27,"value":1151},{"type":18,"tag":212,"props":1730,"children":1731},{"style":230},[1732],{"type":27,"value":1733}," />\n",{"type":18,"tag":212,"props":1735,"children":1736},{"class":214,"line":658},[1737,1741,1745],{"type":18,"tag":212,"props":1738,"children":1739},{"style":230},[1740],{"type":27,"value":1424},{"type":18,"tag":212,"props":1742,"children":1743},{"style":1107},[1744],{"type":27,"value":1110},{"type":18,"tag":212,"props":1746,"children":1747},{"style":230},[1748],{"type":27,"value":1115},{"type":18,"tag":212,"props":1750,"children":1751},{"class":214,"line":667},[1752,1756,1760,1764,1769],{"type":18,"tag":212,"props":1753,"children":1754},{"style":230},[1755],{"type":27,"value":1358},{"type":18,"tag":212,"props":1757,"children":1758},{"style":1107},[1759],{"type":27,"value":1110},{"type":18,"tag":212,"props":1761,"children":1762},{"style":230},[1763],{"type":27,"value":1367},{"type":18,"tag":212,"props":1765,"children":1766},{"style":321},[1767],{"type":27,"value":1768},"sidebar",{"type":18,"tag":212,"props":1770,"children":1771},{"style":230},[1772],{"type":27,"value":1115},{"type":18,"tag":212,"props":1774,"children":1775},{"class":214,"line":676},[1776,1780,1784,1788,1792,1797,1801,1805],{"type":18,"tag":212,"props":1777,"children":1778},{"style":230},[1779],{"type":27,"value":1384},{"type":18,"tag":212,"props":1781,"children":1782},{"style":1107},[1783],{"type":27,"value":1389},{"type":18,"tag":212,"props":1785,"children":1786},{"style":321},[1787],{"type":27,"value":1394},{"type":18,"tag":212,"props":1789,"children":1790},{"style":230},[1791],{"type":27,"value":1146},{"type":18,"tag":212,"props":1793,"children":1794},{"style":241},[1795],{"type":27,"value":1796},"\"sidebar\"",{"type":18,"tag":212,"props":1798,"children":1799},{"style":230},[1800],{"type":27,"value":1408},{"type":18,"tag":212,"props":1802,"children":1803},{"style":1107},[1804],{"type":27,"value":1389},{"type":18,"tag":212,"props":1806,"children":1807},{"style":230},[1808],{"type":27,"value":1115},{"type":18,"tag":212,"props":1810,"children":1811},{"class":214,"line":685},[1812,1816,1820],{"type":18,"tag":212,"props":1813,"children":1814},{"style":230},[1815],{"type":27,"value":1424},{"type":18,"tag":212,"props":1817,"children":1818},{"style":1107},[1819],{"type":27,"value":1110},{"type":18,"tag":212,"props":1821,"children":1822},{"style":230},[1823],{"type":27,"value":1115},{"type":18,"tag":212,"props":1825,"children":1826},{"class":214,"line":694},[1827,1831,1835,1839,1844],{"type":18,"tag":212,"props":1828,"children":1829},{"style":230},[1830],{"type":27,"value":1358},{"type":18,"tag":212,"props":1832,"children":1833},{"style":1107},[1834],{"type":27,"value":1110},{"type":18,"tag":212,"props":1836,"children":1837},{"style":230},[1838],{"type":27,"value":1367},{"type":18,"tag":212,"props":1840,"children":1841},{"style":321},[1842],{"type":27,"value":1843},"footer",{"type":18,"tag":212,"props":1845,"children":1846},{"style":230},[1847],{"type":27,"value":1115},{"type":18,"tag":212,"props":1849,"children":1850},{"class":214,"line":719},[1851,1855,1859,1863,1867,1872,1876,1880],{"type":18,"tag":212,"props":1852,"children":1853},{"style":230},[1854],{"type":27,"value":1384},{"type":18,"tag":212,"props":1856,"children":1857},{"style":1107},[1858],{"type":27,"value":1389},{"type":18,"tag":212,"props":1860,"children":1861},{"style":321},[1862],{"type":27,"value":1394},{"type":18,"tag":212,"props":1864,"children":1865},{"style":230},[1866],{"type":27,"value":1146},{"type":18,"tag":212,"props":1868,"children":1869},{"style":241},[1870],{"type":27,"value":1871},"\"footer\"",{"type":18,"tag":212,"props":1873,"children":1874},{"style":230},[1875],{"type":27,"value":1408},{"type":18,"tag":212,"props":1877,"children":1878},{"style":1107},[1879],{"type":27,"value":1389},{"type":18,"tag":212,"props":1881,"children":1882},{"style":230},[1883],{"type":27,"value":1115},{"type":18,"tag":212,"props":1885,"children":1886},{"class":214,"line":727},[1887,1891,1895],{"type":18,"tag":212,"props":1888,"children":1889},{"style":230},[1890],{"type":27,"value":1424},{"type":18,"tag":212,"props":1892,"children":1893},{"style":1107},[1894],{"type":27,"value":1110},{"type":18,"tag":212,"props":1896,"children":1897},{"style":230},[1898],{"type":27,"value":1115},{"type":18,"tag":212,"props":1900,"children":1901},{"class":214,"line":740},[1902,1907,1911],{"type":18,"tag":212,"props":1903,"children":1904},{"style":230},[1905],{"type":27,"value":1906},"  \u003C/",{"type":18,"tag":212,"props":1908,"children":1909},{"style":1107},[1910],{"type":27,"value":1067},{"type":18,"tag":212,"props":1912,"children":1913},{"style":230},[1914],{"type":27,"value":1115},{"type":18,"tag":212,"props":1916,"children":1917},{"class":214,"line":749},[1918,1923,1927],{"type":18,"tag":212,"props":1919,"children":1920},{"style":230},[1921],{"type":27,"value":1922},"\u003C/",{"type":18,"tag":212,"props":1924,"children":1925},{"style":1107},[1926],{"type":27,"value":1110},{"type":18,"tag":212,"props":1928,"children":1929},{"style":230},[1930],{"type":27,"value":1115},{"type":18,"tag":212,"props":1932,"children":1933},{"class":214,"line":758},[1934],{"type":18,"tag":212,"props":1935,"children":1936},{"emptyLinePlaceholder":295},[1937],{"type":27,"value":298},{"type":18,"tag":212,"props":1939,"children":1940},{"class":214,"line":767},[1941,1945,1950,1955,1960,1964,1969],{"type":18,"tag":212,"props":1942,"children":1943},{"style":230},[1944],{"type":27,"value":1104},{"type":18,"tag":212,"props":1946,"children":1947},{"style":1107},[1948],{"type":27,"value":1949},"script",{"type":18,"tag":212,"props":1951,"children":1952},{"style":321},[1953],{"type":27,"value":1954}," setup",{"type":18,"tag":212,"props":1956,"children":1957},{"style":321},[1958],{"type":27,"value":1959}," lang",{"type":18,"tag":212,"props":1961,"children":1962},{"style":230},[1963],{"type":27,"value":1146},{"type":18,"tag":212,"props":1965,"children":1966},{"style":241},[1967],{"type":27,"value":1968},"\"ts\"",{"type":18,"tag":212,"props":1970,"children":1971},{"style":230},[1972],{"type":27,"value":1115},{"type":18,"tag":212,"props":1974,"children":1975},{"class":214,"line":775},[1976,1980,1985,1989],{"type":18,"tag":212,"props":1977,"children":1978},{"style":219},[1979],{"type":27,"value":222},{"type":18,"tag":212,"props":1981,"children":1982},{"style":230},[1983],{"type":27,"value":1984}," { TideSiteData } ",{"type":18,"tag":212,"props":1986,"children":1987},{"style":219},[1988],{"type":27,"value":238},{"type":18,"tag":212,"props":1990,"children":1991},{"style":241},[1992],{"type":27,"value":244},{"type":18,"tag":212,"props":1994,"children":1996},{"class":214,"line":1995},38,[1997,2001,2005,2010,2014],{"type":18,"tag":212,"props":1998,"children":1999},{"style":219},[2000],{"type":27,"value":222},{"type":18,"tag":212,"props":2002,"children":2003},{"style":219},[2004],{"type":27,"value":227},{"type":18,"tag":212,"props":2006,"children":2007},{"style":230},[2008],{"type":27,"value":2009}," { TideMediaPage } ",{"type":18,"tag":212,"props":2011,"children":2012},{"style":219},[2013],{"type":27,"value":238},{"type":18,"tag":212,"props":2015,"children":2016},{"style":241},[2017],{"type":27,"value":2018}," '../../types'\n",{"type":18,"tag":212,"props":2020,"children":2022},{"class":214,"line":2021},39,[2023],{"type":18,"tag":212,"props":2024,"children":2025},{"emptyLinePlaceholder":295},[2026],{"type":27,"value":298},{"type":18,"tag":212,"props":2028,"children":2030},{"class":214,"line":2029},40,[2031,2036,2041],{"type":18,"tag":212,"props":2032,"children":2033},{"style":219},[2034],{"type":27,"value":2035},"interface",{"type":18,"tag":212,"props":2037,"children":2038},{"style":321},[2039],{"type":27,"value":2040}," Props",{"type":18,"tag":212,"props":2042,"children":2043},{"style":230},[2044],{"type":27,"value":334},{"type":18,"tag":212,"props":2046,"children":2048},{"class":214,"line":2047},41,[2049,2054,2058],{"type":18,"tag":212,"props":2050,"children":2051},{"style":506},[2052],{"type":27,"value":2053},"  site",{"type":18,"tag":212,"props":2055,"children":2056},{"style":219},[2057],{"type":27,"value":318},{"type":18,"tag":212,"props":2059,"children":2060},{"style":321},[2061],{"type":27,"value":2062}," TideSiteData\n",{"type":18,"tag":212,"props":2064,"children":2066},{"class":214,"line":2065},42,[2067,2072,2076],{"type":18,"tag":212,"props":2068,"children":2069},{"style":506},[2070],{"type":27,"value":2071},"  page",{"type":18,"tag":212,"props":2073,"children":2074},{"style":219},[2075],{"type":27,"value":318},{"type":18,"tag":212,"props":2077,"children":2078},{"style":321},[2079],{"type":27,"value":2080}," TideMediaPage\n",{"type":18,"tag":212,"props":2082,"children":2084},{"class":214,"line":2083},43,[2085],{"type":18,"tag":212,"props":2086,"children":2087},{"style":230},[2088],{"type":27,"value":764},{"type":18,"tag":212,"props":2090,"children":2092},{"class":214,"line":2091},44,[2093],{"type":18,"tag":212,"props":2094,"children":2095},{"emptyLinePlaceholder":295},[2096],{"type":27,"value":298},{"type":18,"tag":212,"props":2098,"children":2100},{"class":214,"line":2099},45,[2101,2106,2110,2115],{"type":18,"tag":212,"props":2102,"children":2103},{"style":321},[2104],{"type":27,"value":2105},"defineProps",{"type":18,"tag":212,"props":2107,"children":2108},{"style":230},[2109],{"type":27,"value":1104},{"type":18,"tag":212,"props":2111,"children":2112},{"style":321},[2113],{"type":27,"value":2114},"Props",{"type":18,"tag":212,"props":2116,"children":2117},{"style":230},[2118],{"type":27,"value":2119},">()\n",{"type":18,"tag":212,"props":2121,"children":2123},{"class":214,"line":2122},46,[2124,2128,2132],{"type":18,"tag":212,"props":2125,"children":2126},{"style":230},[2127],{"type":27,"value":1922},{"type":18,"tag":212,"props":2129,"children":2130},{"style":1107},[2131],{"type":27,"value":1949},{"type":18,"tag":212,"props":2133,"children":2134},{"style":230},[2135],{"type":27,"value":1115},{"type":18,"tag":39,"props":2137,"children":2139},{"id":2138},"using-the-content-type",[2140],{"type":27,"value":2141},"Using the content type",{"type":18,"tag":23,"props":2143,"children":2144},{},[2145,2147,2154,2156,2162],{"type":27,"value":2146},"Content types are actually ",{"type":18,"tag":30,"props":2148,"children":2151},{"href":2149,"rel":2150},"https://nuxt.com/docs/getting-started/layers",[191],[2152],{"type":27,"value":2153},"Nuxt layers",{"type":27,"value":2155}," so these are added in the same way as any other layer through the extends property of the main applications ",{"type":18,"tag":78,"props":2157,"children":2159},{"className":2158},[],[2160],{"type":27,"value":2161},"nuxt.config.ts",{"type":27,"value":2163}," file.",{"type":18,"tag":107,"props":2165,"children":2169},{"code":2166,"language":2167,"meta":10,"className":2168,"style":10},"export default defineNuxtConfig({\n  extends: [\n    '@dpc-sdp/ripple-tide-news', // An npm installed package\n    'github:dpc-sdp/ripple-tide-news#1.0.0', // A tagged git repository\n    './layers/tide-my-content-type', // A local layer\n  ]\n})\n","js","language-js shiki shiki-themes github-light",[2170],{"type":18,"tag":78,"props":2171,"children":2172},{"__ignoreMap":10},[2173,2194,2202,2220,2237,2254,2261],{"type":18,"tag":212,"props":2174,"children":2175},{"class":214,"line":215},[2176,2180,2184,2189],{"type":18,"tag":212,"props":2177,"children":2178},{"style":219},[2179],{"type":27,"value":781},{"type":18,"tag":212,"props":2181,"children":2182},{"style":219},[2183],{"type":27,"value":786},{"type":18,"tag":212,"props":2185,"children":2186},{"style":321},[2187],{"type":27,"value":2188}," defineNuxtConfig",{"type":18,"tag":212,"props":2190,"children":2191},{"style":230},[2192],{"type":27,"value":2193},"({\n",{"type":18,"tag":212,"props":2195,"children":2196},{"class":214,"line":247},[2197],{"type":18,"tag":212,"props":2198,"children":2199},{"style":230},[2200],{"type":27,"value":2201},"  extends: [\n",{"type":18,"tag":212,"props":2203,"children":2204},{"class":214,"line":269},[2205,2210,2215],{"type":18,"tag":212,"props":2206,"children":2207},{"style":241},[2208],{"type":27,"value":2209},"    '@dpc-sdp/ripple-tide-news'",{"type":18,"tag":212,"props":2211,"children":2212},{"style":230},[2213],{"type":27,"value":2214},", ",{"type":18,"tag":212,"props":2216,"children":2217},{"style":350},[2218],{"type":27,"value":2219},"// An npm installed package\n",{"type":18,"tag":212,"props":2221,"children":2222},{"class":214,"line":291},[2223,2228,2232],{"type":18,"tag":212,"props":2224,"children":2225},{"style":241},[2226],{"type":27,"value":2227},"    'github:dpc-sdp/ripple-tide-news#1.0.0'",{"type":18,"tag":212,"props":2229,"children":2230},{"style":230},[2231],{"type":27,"value":2214},{"type":18,"tag":212,"props":2233,"children":2234},{"style":350},[2235],{"type":27,"value":2236},"// A tagged git repository\n",{"type":18,"tag":212,"props":2238,"children":2239},{"class":214,"line":301},[2240,2245,2249],{"type":18,"tag":212,"props":2241,"children":2242},{"style":241},[2243],{"type":27,"value":2244},"    './layers/tide-my-content-type'",{"type":18,"tag":212,"props":2246,"children":2247},{"style":230},[2248],{"type":27,"value":2214},{"type":18,"tag":212,"props":2250,"children":2251},{"style":350},[2252],{"type":27,"value":2253},"// A local layer\n",{"type":18,"tag":212,"props":2255,"children":2256},{"class":214,"line":337},[2257],{"type":18,"tag":212,"props":2258,"children":2259},{"style":230},[2260],{"type":27,"value":755},{"type":18,"tag":212,"props":2262,"children":2263},{"class":214,"line":346},[2264],{"type":18,"tag":212,"props":2265,"children":2266},{"style":230},[2267],{"type":27,"value":1002},{"type":18,"tag":2269,"props":2270,"children":2271},"style",{},[2272],{"type":27,"value":2273},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":10,"searchDepth":247,"depth":247,"links":2275},[2276,2277,2278,2279,2280,2281],{"id":41,"depth":247,"text":44},{"id":97,"depth":247,"text":100},{"id":154,"depth":247,"text":157},{"id":794,"depth":247,"text":797},{"id":1005,"depth":247,"text":1008},{"id":2138,"depth":247,"text":2141},"markdown","content:framework:3.guides:4.creating-content-types.md","framework/3.guides/4.creating-content-types.md","md",["ShallowRef",2287],["ShallowReactive",2288],{"/framework/guides/creating-content-types":2289},[2290,2296],{"_path":2291,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":2292,"description":2293,"layout":13,"_type":2282,"_id":2294,"_source":1711,"_file":2295,"_extension":2285},"/framework/guides/brand-application","Applying theme and brand","A guide to applying theme and brand assets to Ripple sites.","content:framework:3.guides:3.brand-application.md","framework/3.guides/3.brand-application.md",{"_path":2297,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":2298,"description":2299,"layout":13,"links":2300,"_type":2282,"_id":2303,"_source":1711,"_file":2304,"_extension":2285},"/framework/guides/creating-new-layers","Creating new layers","Implementing custom functionality through layers",[2301],{"text":2302,"url":2149},"Nuxt layers documentation","content:framework:3.guides:5.creating-new-layers.md","framework/3.guides/5.creating-new-layers.md",["ShallowRef",2306],{},[2308,2313,2561],{"title":2309,"_path":2310,"icon":2311,"layout":2312},"Ripple Design System","/","carbon:home","home",{"title":2314,"_path":2315,"children":2316},"Design System","/design-system",[2317,2333,2349,2379,2413],{"title":2318,"_path":2319,"children":2320},"About","/design-system/about",[2321,2324,2327,2330],{"title":2322,"_path":2323,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":2325,"_path":2326,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":2328,"_path":2329,"layout":13},"Support","/design-system/about/getting-support",{"title":2331,"_path":2332,"layout":13},"Contributing","/design-system/about/contributing",{"title":2334,"_path":2335,"children":2336},"Design","/design-system/design",[2337,2340,2343,2346],{"title":2338,"_path":2339,"layout":13},"Getting started","/design-system/design/getting-started",{"title":2341,"_path":2342,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":2344,"_path":2345,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":2347,"_path":2348,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":2350,"_path":2351,"children":2352},"Develop","/design-system/develop",[2353,2355,2357,2360],{"title":2338,"_path":2354,"layout":13},"/design-system/develop/getting-started",{"title":2331,"_path":2356,"layout":13},"/design-system/develop/contributing",{"title":2358,"_path":2359,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":2361,"_path":2362,"children":2363,"layout":13},"Usage","/design-system/develop/usage",[2364,2367,2370,2373,2376],{"title":2365,"_path":2366,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":2368,"_path":2369,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":2371,"_path":2372,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":2374,"_path":2375,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":2377,"_path":2378,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":2380,"_path":2381,"children":2382},"Styles","/design-system/styles",[2383,2386,2389,2392,2395,2398,2401,2404,2407,2410],{"title":2384,"_path":2385,"layout":13},"Colour","/design-system/styles/colour",{"title":2387,"_path":2388,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":2390,"_path":2391,"layout":13},"Grid","/design-system/styles/grid",{"title":2393,"_path":2394,"layout":13},"Icons","/design-system/styles/icons",{"title":2396,"_path":2397,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":2399,"_path":2400,"layout":13},"Layout","/design-system/styles/layout",{"title":2402,"_path":2403,"layout":13},"Logo","/design-system/styles/logo",{"title":2405,"_path":2406,"layout":13},"Motion","/design-system/styles/motion",{"title":2408,"_path":2409,"layout":13},"Spacing","/design-system/styles/spacing",{"title":2411,"_path":2412,"layout":13},"Typography","/design-system/styles/typography",{"title":2414,"_path":2415,"children":2416},"Components","/design-system/components",[2417,2420,2423,2426,2429,2432,2435,2438,2441,2444,2447,2450,2453,2456,2459,2462,2465,2468,2471,2474,2477,2480,2483,2486,2489,2492,2495,2498,2501,2504,2507,2510,2513,2516,2519,2522,2525,2528,2531,2534,2537,2540,2543,2546,2549,2552,2555,2558],{"title":2418,"_path":2419,"layout":13},"Accordion","/design-system/components/accordion",{"title":2421,"_path":2422,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":2424,"_path":2425,"layout":13},"Alert","/design-system/components/alert",{"title":2427,"_path":2428,"layout":13},"Block quote","/design-system/components/block-quote",{"title":2430,"_path":2431,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":2433,"_path":2434,"layout":13},"Button","/design-system/components/button",{"title":2436,"_path":2437,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":2439,"_path":2440,"layout":13},"Callout","/design-system/components/callout",{"title":2442,"_path":2443,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":2445,"_path":2446,"layout":13},"Card","/design-system/components/card",{"title":2448,"_path":2449,"layout":13},"Carousel","/design-system/components/carousel",{"title":2451,"_path":2452,"layout":13},"Category grid","/design-system/components/category-grid",{"title":2454,"_path":2455,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":2457,"_path":2458,"layout":13},"Chip","/design-system/components/chip",{"title":2460,"_path":2461,"layout":13},"Contact us","/design-system/components/contact-us",{"title":2463,"_path":2464,"layout":13},"Date input","/design-system/components/date-input",{"title":2466,"_path":2467,"layout":13},"Detail list","/design-system/components/detail-list",{"title":2469,"_path":2470,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":2472,"_path":2473,"layout":13},"File","/design-system/components/file",{"title":2475,"_path":2476,"layout":13},"Footer","/design-system/components/footer",{"title":2478,"_path":2479,"layout":13},"Form","/design-system/components/form",{"title":2481,"_path":2482,"layout":13},"Form alert","/design-system/components/form-alert",{"title":2484,"_path":2485,"layout":13},"Header","/design-system/components/header",{"title":2487,"_path":2488,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":2490,"_path":2491,"layout":13},"Input field","/design-system/components/input-field",{"title":2493,"_path":2494,"layout":13},"Key dates","/design-system/components/key-dates",{"title":2496,"_path":2497,"layout":13},"Media","/design-system/components/media",{"title":2499,"_path":2500,"layout":13},"Media embed","/design-system/components/media-embed",{"title":2502,"_path":2503,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":2505,"_path":2506,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":2508,"_path":2509,"layout":13},"Option button","/design-system/components/option-button",{"title":2511,"_path":2512,"layout":13},"Page action","/design-system/components/page-action",{"title":2514,"_path":2515,"layout":13},"Pagination","/design-system/components/pagination",{"title":2517,"_path":2518,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":2520,"_path":2521,"layout":13},"Profile","/design-system/components/profile",{"title":2523,"_path":2524,"layout":13},"Radio button","/design-system/components/radio-button",{"title":2526,"_path":2527,"layout":13},"Related links","/design-system/components/related-links",{"title":2529,"_path":2530,"layout":13},"Results listing","/design-system/components/results-listing",{"title":2532,"_path":2533,"layout":13},"Search bar","/design-system/components/search-bar",{"title":2535,"_path":2536,"layout":13},"Skip link","/design-system/components/skip-link",{"title":2538,"_path":2539,"layout":13},"Social share","/design-system/components/social-share",{"title":2541,"_path":2542,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":2544,"_path":2545,"layout":13},"Table","/design-system/components/table",{"title":2547,"_path":2548,"layout":13},"Tabs","/design-system/components/tabs",{"title":2550,"_path":2551,"layout":13},"Tag","/design-system/components/tag",{"title":2553,"_path":2554,"layout":13},"Text area","/design-system/components/text-area",{"title":2556,"_path":2557,"layout":13},"Timeline","/design-system/components/timeline",{"title":2559,"_path":2560,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":2562,"_path":2563,"children":2564,"layout":13},"Ripple Framework","/framework",[2565,2566,2583,2599],{"title":2562,"_path":2563,"layout":13},{"title":2567,"_path":2568,"children":2569},"Key Concepts","/framework/key-concepts",[2570,2572,2575,2578,2580],{"title":2371,"_path":2571,"layout":13},"/framework/key-concepts/nuxt",{"title":2573,"_path":2574,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":2576,"_path":2577,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":2579,"_path":32,"layout":13},"Content types",{"title":2581,"_path":2582,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":2584,"_path":2585,"children":2586},"Guides","/framework/guides",[2587,2590,2593,2594,2595,2596],{"title":2588,"_path":2589,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":2591,"_path":2592,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":2292,"_path":2291,"layout":13},{"title":11,"_path":7,"layout":13},{"title":2298,"_path":2297,"layout":13},{"title":2597,"_path":2598,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":2600,"_path":2601,"layout":13},"Core modules","/framework/core-modules",["Reactive",2603],["Set"],["Reactive",2605],{"module-navigation":2606},null,1714695151280]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+</span></span></code><!--]--></pre><!--]--></div><style>html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}</style><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/3.guides/4.creating-content-types.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/guides/creating-content-types/_payload.json">[{"state":1,"once":2602,"_errors":2604,"serverRendered":295,"path":7,"prerenderedAt":2607},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":2286,"$sdd-globals":2305,"$sdd-navigation":2307},["ShallowRef",4],["ShallowReactive",5],{"/framework/guides/creating-content-types":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":2282,"_id":2283,"_source":1711,"_file":2284,"_extension":2285},"/framework/guides/creating-content-types","guides",false,"","Creating content types","How to create new content types for the SDP platform","page",{"type":15,"children":16,"toc":2274},"root",[17,38,45,50,95,101,106,115,144,152,158,163,197,202,792,798,818,831,1003,1009,1021,1057,1077,1088,2136,2142,2164,2268],{"type":18,"tag":19,"props":20,"children":21},"element","blockquote",{},[22],{"type":18,"tag":23,"props":24,"children":25},"p",{},[26,29,36],{"type":27,"value":28},"text","See ",{"type":18,"tag":30,"props":31,"children":33},"a",{"href":32},"/framework/key-concepts/content-types",[34],{"type":27,"value":35},"key concepts - content types",{"type":27,"value":37}," for an overview of what content types are and the core content types used within the SDP platform.",{"type":18,"tag":39,"props":40,"children":42},"h2",{"id":41},"anatomy",[43],{"type":27,"value":44},"Anatomy",{"type":18,"tag":23,"props":46,"children":47},{},[48],{"type":27,"value":49},"Content types are comprised of three main parts:",{"type":18,"tag":51,"props":52,"children":53},"ul",{},[54,66,84],{"type":18,"tag":55,"props":56,"children":57},"li",{},[58,64],{"type":18,"tag":30,"props":59,"children":61},{"href":60},"#the-mapping-object",[62],{"type":27,"value":63},"A mapping object",{"type":27,"value":65}," - maps API data to pass to a Vue component",{"type":18,"tag":55,"props":67,"children":68},{},[69,75,77],{"type":18,"tag":30,"props":70,"children":72},{"href":71},"#the-server-plugin",[73],{"type":27,"value":74},"A server plugin",{"type":27,"value":76}," - registers the content type with ",{"type":18,"tag":78,"props":79,"children":81},"code",{"className":80},[],[82],{"type":27,"value":83},"@dpc-sdp/ripple-tide-api",{"type":18,"tag":55,"props":85,"children":86},{},[87,93],{"type":18,"tag":30,"props":88,"children":90},{"href":89},"#the-vue-component",[91],{"type":27,"value":92},"And Vue components",{"type":27,"value":94}," - takes the mapped data and renders the content type",{"type":18,"tag":39,"props":96,"children":98},{"id":97},"creating-a-content-type",[99],{"type":27,"value":100},"Creating a content type",{"type":18,"tag":23,"props":102,"children":103},{},[104],{"type":27,"value":105},"The Nuxt Ripple CLI provides a simple way to add new content types, to get started just run the following command:",{"type":18,"tag":107,"props":108,"children":110},"pre",{"code":109},"npx @dpc-sdp/nuxt-ripple-cli add content-type [DIRECTORY] --name {NAME} --createTests --cypressPath {CYPRESSPATH}\n",[111],{"type":18,"tag":78,"props":112,"children":113},{"__ignoreMap":10},[114],{"type":27,"value":109},{"type":18,"tag":23,"props":116,"children":117},{},[118,120,126,128,134,136,142],{"type":27,"value":119},"Where ",{"type":18,"tag":78,"props":121,"children":123},{"className":122},[],[124],{"type":27,"value":125},"[DIRECTORY]",{"type":27,"value":127}," is the location to output the content type scaffolding, ",{"type":18,"tag":78,"props":129,"children":131},{"className":130},[],[132],{"type":27,"value":133},"{NAME}",{"type":27,"value":135}," is the name of the new content type, and ",{"type":18,"tag":78,"props":137,"children":139},{"className":138},[],[140],{"type":27,"value":141},"{CYPRESSPATH}",{"type":27,"value":143}," is the relative path to be used for the cypress tests folder.",{"type":18,"tag":19,"props":145,"children":146},{},[147],{"type":18,"tag":23,"props":148,"children":149},{},[150],{"type":27,"value":151},"Using the CLI is the preferred way to create new content types as it will ensure the correct file structure and naming conventions are used. It will also scaffold the mapping object, server plugin, and Vue component for you.",{"type":18,"tag":39,"props":153,"children":155},{"id":154},"the-mapping-object",[156],{"type":27,"value":157},"The mapping object",{"type":18,"tag":23,"props":159,"children":160},{},[161],{"type":27,"value":162},"The mapping object is responsible for supplying the data mapping and includes.",{"type":18,"tag":51,"props":164,"children":165},{},[166,177],{"type":18,"tag":55,"props":167,"children":168},{},[169,175],{"type":18,"tag":170,"props":171,"children":172},"strong",{},[173],{"type":27,"value":174},"Data mapping",{"type":27,"value":176},": the data mapping is responsible for mapping the Tide API response data (i.e. Drupal JSON) into a clean format that can be used within the Vue component.",{"type":18,"tag":55,"props":178,"children":179},{},[180,185,187,195],{"type":18,"tag":170,"props":181,"children":182},{},[183],{"type":27,"value":184},"Includes",{"type":27,"value":186},": the includes are an array of fields that need to be added to the API request so Drupal knows what referenced entities to include in the API response, for more on Drupal includes see ",{"type":18,"tag":30,"props":188,"children":192},{"href":189,"rel":190},"https://www.drupal.org/docs/core-modules-and-themes/core-modules/jsonapi-module/includes",[191],"nofollow",[193],{"type":27,"value":194},"JSON API includes",{"type":27,"value":196},".",{"type":18,"tag":23,"props":198,"children":199},{},[200],{"type":27,"value":201},"Below is an example mapping object.",{"type":18,"tag":107,"props":203,"children":207},{"code":204,"language":205,"meta":10,"className":206,"style":10},"import type { IRplTideModuleMapping } from '@dpc-sdp/ripple-tide-api/types'\nimport { tidePageBaseMapping, tidePageBaseIncludes } from '@dpc-sdp/nuxt-ripple/mapping'\nimport { getField, getImageFromField } from '@dpc-sdp/ripple-tide-api'\n\nconst tideMyConentTypeModule: IRplTideModuleMapping = {\n  mapping: {\n    // The base mapping is used to add common fields\n    // See the tidePageBaseMapping function for details \n    ...tidePageBaseMapping({ withTopicTags: true }),\n    \n    content: 'field_my_content_type_content',\n    \n    // Can be nested as needed\n    header: {\n      intro: 'field_landing_page_intro_text',\n    },\n    \n    // Use a function to transform the data\n    files: (src) => getField(src, 'field_node_files').map((file) => ({\n      name: file.name,\n      url: file.field_media_file.url\n    })),\n\n    // Or when using helper functions\n    image: (src) => getImageFromField(src, 'field_featured_image.field_media_image')\n  },\n  includes: [\n    // The base includes are used to include common fields\n    // See the tidePageBaseIncludes function for details \n    ...tidePageBaseIncludes({ withTopicTags: true }),\n    \n    'field_featured_image',\n    'field_featured_image.field_media_image'\n  ]\n}\n\nexport default tideMyConentTypeModule\n","ts","language-ts shiki shiki-themes github-light",[208],{"type":18,"tag":78,"props":209,"children":210},{"__ignoreMap":10},[211,245,267,289,299,335,344,354,363,392,401,420,428,437,446,464,473,481,490,568,577,586,595,603,612,656,665,674,683,692,717,725,738,747,756,765,773],{"type":18,"tag":212,"props":213,"children":216},"span",{"class":214,"line":215},"line",1,[217,223,228,234,239],{"type":18,"tag":212,"props":218,"children":220},{"style":219},"--shiki-default:#D73A49",[221],{"type":27,"value":222},"import",{"type":18,"tag":212,"props":224,"children":225},{"style":219},[226],{"type":27,"value":227}," type",{"type":18,"tag":212,"props":229,"children":231},{"style":230},"--shiki-default:#24292E",[232],{"type":27,"value":233}," { IRplTideModuleMapping } ",{"type":18,"tag":212,"props":235,"children":236},{"style":219},[237],{"type":27,"value":238},"from",{"type":18,"tag":212,"props":240,"children":242},{"style":241},"--shiki-default:#032F62",[243],{"type":27,"value":244}," '@dpc-sdp/ripple-tide-api/types'\n",{"type":18,"tag":212,"props":246,"children":248},{"class":214,"line":247},2,[249,253,258,262],{"type":18,"tag":212,"props":250,"children":251},{"style":219},[252],{"type":27,"value":222},{"type":18,"tag":212,"props":254,"children":255},{"style":230},[256],{"type":27,"value":257}," { tidePageBaseMapping, tidePageBaseIncludes } ",{"type":18,"tag":212,"props":259,"children":260},{"style":219},[261],{"type":27,"value":238},{"type":18,"tag":212,"props":263,"children":264},{"style":241},[265],{"type":27,"value":266}," '@dpc-sdp/nuxt-ripple/mapping'\n",{"type":18,"tag":212,"props":268,"children":270},{"class":214,"line":269},3,[271,275,280,284],{"type":18,"tag":212,"props":272,"children":273},{"style":219},[274],{"type":27,"value":222},{"type":18,"tag":212,"props":276,"children":277},{"style":230},[278],{"type":27,"value":279}," { getField, getImageFromField } ",{"type":18,"tag":212,"props":281,"children":282},{"style":219},[283],{"type":27,"value":238},{"type":18,"tag":212,"props":285,"children":286},{"style":241},[287],{"type":27,"value":288}," '@dpc-sdp/ripple-tide-api'\n",{"type":18,"tag":212,"props":290,"children":292},{"class":214,"line":291},4,[293],{"type":18,"tag":212,"props":294,"children":296},{"emptyLinePlaceholder":295},true,[297],{"type":27,"value":298},"\n",{"type":18,"tag":212,"props":300,"children":302},{"class":214,"line":301},5,[303,308,314,319,325,330],{"type":18,"tag":212,"props":304,"children":305},{"style":219},[306],{"type":27,"value":307},"const",{"type":18,"tag":212,"props":309,"children":311},{"style":310},"--shiki-default:#005CC5",[312],{"type":27,"value":313}," tideMyConentTypeModule",{"type":18,"tag":212,"props":315,"children":316},{"style":219},[317],{"type":27,"value":318},":",{"type":18,"tag":212,"props":320,"children":322},{"style":321},"--shiki-default:#6F42C1",[323],{"type":27,"value":324}," IRplTideModuleMapping",{"type":18,"tag":212,"props":326,"children":327},{"style":219},[328],{"type":27,"value":329}," =",{"type":18,"tag":212,"props":331,"children":332},{"style":230},[333],{"type":27,"value":334}," {\n",{"type":18,"tag":212,"props":336,"children":338},{"class":214,"line":337},6,[339],{"type":18,"tag":212,"props":340,"children":341},{"style":230},[342],{"type":27,"value":343},"  mapping: {\n",{"type":18,"tag":212,"props":345,"children":347},{"class":214,"line":346},7,[348],{"type":18,"tag":212,"props":349,"children":351},{"style":350},"--shiki-default:#6A737D",[352],{"type":27,"value":353},"    // The base mapping is used to add common fields\n",{"type":18,"tag":212,"props":355,"children":357},{"class":214,"line":356},8,[358],{"type":18,"tag":212,"props":359,"children":360},{"style":350},[361],{"type":27,"value":362},"    // See the tidePageBaseMapping function for details \n",{"type":18,"tag":212,"props":364,"children":366},{"class":214,"line":365},9,[367,372,377,382,387],{"type":18,"tag":212,"props":368,"children":369},{"style":219},[370],{"type":27,"value":371},"    ...",{"type":18,"tag":212,"props":373,"children":374},{"style":321},[375],{"type":27,"value":376},"tidePageBaseMapping",{"type":18,"tag":212,"props":378,"children":379},{"style":230},[380],{"type":27,"value":381},"({ withTopicTags: ",{"type":18,"tag":212,"props":383,"children":384},{"style":310},[385],{"type":27,"value":386},"true",{"type":18,"tag":212,"props":388,"children":389},{"style":230},[390],{"type":27,"value":391}," }),\n",{"type":18,"tag":212,"props":393,"children":395},{"class":214,"line":394},10,[396],{"type":18,"tag":212,"props":397,"children":398},{"style":230},[399],{"type":27,"value":400},"    \n",{"type":18,"tag":212,"props":402,"children":404},{"class":214,"line":403},11,[405,410,415],{"type":18,"tag":212,"props":406,"children":407},{"style":230},[408],{"type":27,"value":409},"    content: ",{"type":18,"tag":212,"props":411,"children":412},{"style":241},[413],{"type":27,"value":414},"'field_my_content_type_content'",{"type":18,"tag":212,"props":416,"children":417},{"style":230},[418],{"type":27,"value":419},",\n",{"type":18,"tag":212,"props":421,"children":423},{"class":214,"line":422},12,[424],{"type":18,"tag":212,"props":425,"children":426},{"style":230},[427],{"type":27,"value":400},{"type":18,"tag":212,"props":429,"children":431},{"class":214,"line":430},13,[432],{"type":18,"tag":212,"props":433,"children":434},{"style":350},[435],{"type":27,"value":436},"    // Can be nested as needed\n",{"type":18,"tag":212,"props":438,"children":440},{"class":214,"line":439},14,[441],{"type":18,"tag":212,"props":442,"children":443},{"style":230},[444],{"type":27,"value":445},"    header: {\n",{"type":18,"tag":212,"props":447,"children":449},{"class":214,"line":448},15,[450,455,460],{"type":18,"tag":212,"props":451,"children":452},{"style":230},[453],{"type":27,"value":454},"      intro: ",{"type":18,"tag":212,"props":456,"children":457},{"style":241},[458],{"type":27,"value":459},"'field_landing_page_intro_text'",{"type":18,"tag":212,"props":461,"children":462},{"style":230},[463],{"type":27,"value":419},{"type":18,"tag":212,"props":465,"children":467},{"class":214,"line":466},16,[468],{"type":18,"tag":212,"props":469,"children":470},{"style":230},[471],{"type":27,"value":472},"    },\n",{"type":18,"tag":212,"props":474,"children":476},{"class":214,"line":475},17,[477],{"type":18,"tag":212,"props":478,"children":479},{"style":230},[480],{"type":27,"value":400},{"type":18,"tag":212,"props":482,"children":484},{"class":214,"line":483},18,[485],{"type":18,"tag":212,"props":486,"children":487},{"style":350},[488],{"type":27,"value":489},"    // Use a function to transform the data\n",{"type":18,"tag":212,"props":491,"children":493},{"class":214,"line":492},19,[494,499,504,510,515,520,525,530,535,540,545,550,555,559,563],{"type":18,"tag":212,"props":495,"children":496},{"style":321},[497],{"type":27,"value":498},"    files",{"type":18,"tag":212,"props":500,"children":501},{"style":230},[502],{"type":27,"value":503},": (",{"type":18,"tag":212,"props":505,"children":507},{"style":506},"--shiki-default:#E36209",[508],{"type":27,"value":509},"src",{"type":18,"tag":212,"props":511,"children":512},{"style":230},[513],{"type":27,"value":514},") ",{"type":18,"tag":212,"props":516,"children":517},{"style":219},[518],{"type":27,"value":519},"=>",{"type":18,"tag":212,"props":521,"children":522},{"style":321},[523],{"type":27,"value":524}," getField",{"type":18,"tag":212,"props":526,"children":527},{"style":230},[528],{"type":27,"value":529},"(src, ",{"type":18,"tag":212,"props":531,"children":532},{"style":241},[533],{"type":27,"value":534},"'field_node_files'",{"type":18,"tag":212,"props":536,"children":537},{"style":230},[538],{"type":27,"value":539},").",{"type":18,"tag":212,"props":541,"children":542},{"style":321},[543],{"type":27,"value":544},"map",{"type":18,"tag":212,"props":546,"children":547},{"style":230},[548],{"type":27,"value":549},"((",{"type":18,"tag":212,"props":551,"children":552},{"style":506},[553],{"type":27,"value":554},"file",{"type":18,"tag":212,"props":556,"children":557},{"style":230},[558],{"type":27,"value":514},{"type":18,"tag":212,"props":560,"children":561},{"style":219},[562],{"type":27,"value":519},{"type":18,"tag":212,"props":564,"children":565},{"style":230},[566],{"type":27,"value":567}," ({\n",{"type":18,"tag":212,"props":569,"children":571},{"class":214,"line":570},20,[572],{"type":18,"tag":212,"props":573,"children":574},{"style":230},[575],{"type":27,"value":576},"      name: file.name,\n",{"type":18,"tag":212,"props":578,"children":580},{"class":214,"line":579},21,[581],{"type":18,"tag":212,"props":582,"children":583},{"style":230},[584],{"type":27,"value":585},"      url: file.field_media_file.url\n",{"type":18,"tag":212,"props":587,"children":589},{"class":214,"line":588},22,[590],{"type":18,"tag":212,"props":591,"children":592},{"style":230},[593],{"type":27,"value":594},"    })),\n",{"type":18,"tag":212,"props":596,"children":598},{"class":214,"line":597},23,[599],{"type":18,"tag":212,"props":600,"children":601},{"emptyLinePlaceholder":295},[602],{"type":27,"value":298},{"type":18,"tag":212,"props":604,"children":606},{"class":214,"line":605},24,[607],{"type":18,"tag":212,"props":608,"children":609},{"style":350},[610],{"type":27,"value":611},"    // Or when using helper functions\n",{"type":18,"tag":212,"props":613,"children":615},{"class":214,"line":614},25,[616,621,625,629,633,637,642,646,651],{"type":18,"tag":212,"props":617,"children":618},{"style":321},[619],{"type":27,"value":620},"    image",{"type":18,"tag":212,"props":622,"children":623},{"style":230},[624],{"type":27,"value":503},{"type":18,"tag":212,"props":626,"children":627},{"style":506},[628],{"type":27,"value":509},{"type":18,"tag":212,"props":630,"children":631},{"style":230},[632],{"type":27,"value":514},{"type":18,"tag":212,"props":634,"children":635},{"style":219},[636],{"type":27,"value":519},{"type":18,"tag":212,"props":638,"children":639},{"style":321},[640],{"type":27,"value":641}," getImageFromField",{"type":18,"tag":212,"props":643,"children":644},{"style":230},[645],{"type":27,"value":529},{"type":18,"tag":212,"props":647,"children":648},{"style":241},[649],{"type":27,"value":650},"'field_featured_image.field_media_image'",{"type":18,"tag":212,"props":652,"children":653},{"style":230},[654],{"type":27,"value":655},")\n",{"type":18,"tag":212,"props":657,"children":659},{"class":214,"line":658},26,[660],{"type":18,"tag":212,"props":661,"children":662},{"style":230},[663],{"type":27,"value":664},"  },\n",{"type":18,"tag":212,"props":666,"children":668},{"class":214,"line":667},27,[669],{"type":18,"tag":212,"props":670,"children":671},{"style":230},[672],{"type":27,"value":673},"  includes: [\n",{"type":18,"tag":212,"props":675,"children":677},{"class":214,"line":676},28,[678],{"type":18,"tag":212,"props":679,"children":680},{"style":350},[681],{"type":27,"value":682},"    // The base includes are used to include common fields\n",{"type":18,"tag":212,"props":684,"children":686},{"class":214,"line":685},29,[687],{"type":18,"tag":212,"props":688,"children":689},{"style":350},[690],{"type":27,"value":691},"    // See the tidePageBaseIncludes function for details \n",{"type":18,"tag":212,"props":693,"children":695},{"class":214,"line":694},30,[696,700,705,709,713],{"type":18,"tag":212,"props":697,"children":698},{"style":219},[699],{"type":27,"value":371},{"type":18,"tag":212,"props":701,"children":702},{"style":321},[703],{"type":27,"value":704},"tidePageBaseIncludes",{"type":18,"tag":212,"props":706,"children":707},{"style":230},[708],{"type":27,"value":381},{"type":18,"tag":212,"props":710,"children":711},{"style":310},[712],{"type":27,"value":386},{"type":18,"tag":212,"props":714,"children":715},{"style":230},[716],{"type":27,"value":391},{"type":18,"tag":212,"props":718,"children":720},{"class":214,"line":719},31,[721],{"type":18,"tag":212,"props":722,"children":723},{"style":230},[724],{"type":27,"value":400},{"type":18,"tag":212,"props":726,"children":728},{"class":214,"line":727},32,[729,734],{"type":18,"tag":212,"props":730,"children":731},{"style":241},[732],{"type":27,"value":733},"    'field_featured_image'",{"type":18,"tag":212,"props":735,"children":736},{"style":230},[737],{"type":27,"value":419},{"type":18,"tag":212,"props":739,"children":741},{"class":214,"line":740},33,[742],{"type":18,"tag":212,"props":743,"children":744},{"style":241},[745],{"type":27,"value":746},"    'field_featured_image.field_media_image'\n",{"type":18,"tag":212,"props":748,"children":750},{"class":214,"line":749},34,[751],{"type":18,"tag":212,"props":752,"children":753},{"style":230},[754],{"type":27,"value":755},"  ]\n",{"type":18,"tag":212,"props":757,"children":759},{"class":214,"line":758},35,[760],{"type":18,"tag":212,"props":761,"children":762},{"style":230},[763],{"type":27,"value":764},"}\n",{"type":18,"tag":212,"props":766,"children":768},{"class":214,"line":767},36,[769],{"type":18,"tag":212,"props":770,"children":771},{"emptyLinePlaceholder":295},[772],{"type":27,"value":298},{"type":18,"tag":212,"props":774,"children":776},{"class":214,"line":775},37,[777,782,787],{"type":18,"tag":212,"props":778,"children":779},{"style":219},[780],{"type":27,"value":781},"export",{"type":18,"tag":212,"props":783,"children":784},{"style":219},[785],{"type":27,"value":786}," default",{"type":18,"tag":212,"props":788,"children":789},{"style":230},[790],{"type":27,"value":791}," tideMyConentTypeModule\n",{"type":18,"tag":39,"props":793,"children":795},{"id":794},"the-server-plugin",[796],{"type":27,"value":797},"The server plugin",{"type":18,"tag":23,"props":799,"children":800},{},[801,803,808,810,816],{"type":27,"value":802},"The server plugin is responsible for registering the new content type with ",{"type":18,"tag":78,"props":804,"children":806},{"className":805},[],[807],{"type":27,"value":83},{"type":27,"value":809},", this file needs to live within the ",{"type":18,"tag":78,"props":811,"children":813},{"className":812},[],[814],{"type":27,"value":815},"server/plugins",{"type":27,"value":817}," directory of the content type.",{"type":18,"tag":23,"props":819,"children":820},{},[821,823,829],{"type":27,"value":822},"The content type can then be registered by calling the ",{"type":18,"tag":78,"props":824,"children":826},{"className":825},[],[827],{"type":27,"value":828},"setContentType",{"type":27,"value":830}," method on the Tide page API. This method takes two arguments, the first is the name of the content type, and the second is the mapping object. If you have used the CLI to create the content type this will already be done for you.",{"type":18,"tag":107,"props":832,"children":834},{"code":833,"language":205,"meta":10,"className":206,"style":10},"import type { NitroApp } from 'nitropack'\nimport { defineNitroPlugin } from 'nitropack/dist/runtime/plugin'\nimport tideMyContentTypeModule from '../../mapping'\n\nexport default defineNitroPlugin(async (nitroApp: NitroApp) => {\n  nitroApp.tide?.pageApi.setContentType('my-content-type', tideMyContentTypeModule)\n})\n",[835],{"type":18,"tag":78,"props":836,"children":837},{"__ignoreMap":10},[838,863,884,905,912,969,995],{"type":18,"tag":212,"props":839,"children":840},{"class":214,"line":215},[841,845,849,854,858],{"type":18,"tag":212,"props":842,"children":843},{"style":219},[844],{"type":27,"value":222},{"type":18,"tag":212,"props":846,"children":847},{"style":219},[848],{"type":27,"value":227},{"type":18,"tag":212,"props":850,"children":851},{"style":230},[852],{"type":27,"value":853}," { NitroApp } ",{"type":18,"tag":212,"props":855,"children":856},{"style":219},[857],{"type":27,"value":238},{"type":18,"tag":212,"props":859,"children":860},{"style":241},[861],{"type":27,"value":862}," 'nitropack'\n",{"type":18,"tag":212,"props":864,"children":865},{"class":214,"line":247},[866,870,875,879],{"type":18,"tag":212,"props":867,"children":868},{"style":219},[869],{"type":27,"value":222},{"type":18,"tag":212,"props":871,"children":872},{"style":230},[873],{"type":27,"value":874}," { defineNitroPlugin } ",{"type":18,"tag":212,"props":876,"children":877},{"style":219},[878],{"type":27,"value":238},{"type":18,"tag":212,"props":880,"children":881},{"style":241},[882],{"type":27,"value":883}," 'nitropack/dist/runtime/plugin'\n",{"type":18,"tag":212,"props":885,"children":886},{"class":214,"line":269},[887,891,896,900],{"type":18,"tag":212,"props":888,"children":889},{"style":219},[890],{"type":27,"value":222},{"type":18,"tag":212,"props":892,"children":893},{"style":230},[894],{"type":27,"value":895}," tideMyContentTypeModule ",{"type":18,"tag":212,"props":897,"children":898},{"style":219},[899],{"type":27,"value":238},{"type":18,"tag":212,"props":901,"children":902},{"style":241},[903],{"type":27,"value":904}," '../../mapping'\n",{"type":18,"tag":212,"props":906,"children":907},{"class":214,"line":291},[908],{"type":18,"tag":212,"props":909,"children":910},{"emptyLinePlaceholder":295},[911],{"type":27,"value":298},{"type":18,"tag":212,"props":913,"children":914},{"class":214,"line":301},[915,919,923,928,933,938,943,948,952,957,961,965],{"type":18,"tag":212,"props":916,"children":917},{"style":219},[918],{"type":27,"value":781},{"type":18,"tag":212,"props":920,"children":921},{"style":219},[922],{"type":27,"value":786},{"type":18,"tag":212,"props":924,"children":925},{"style":321},[926],{"type":27,"value":927}," defineNitroPlugin",{"type":18,"tag":212,"props":929,"children":930},{"style":230},[931],{"type":27,"value":932},"(",{"type":18,"tag":212,"props":934,"children":935},{"style":219},[936],{"type":27,"value":937},"async",{"type":18,"tag":212,"props":939,"children":940},{"style":230},[941],{"type":27,"value":942}," (",{"type":18,"tag":212,"props":944,"children":945},{"style":506},[946],{"type":27,"value":947},"nitroApp",{"type":18,"tag":212,"props":949,"children":950},{"style":219},[951],{"type":27,"value":318},{"type":18,"tag":212,"props":953,"children":954},{"style":321},[955],{"type":27,"value":956}," NitroApp",{"type":18,"tag":212,"props":958,"children":959},{"style":230},[960],{"type":27,"value":514},{"type":18,"tag":212,"props":962,"children":963},{"style":219},[964],{"type":27,"value":519},{"type":18,"tag":212,"props":966,"children":967},{"style":230},[968],{"type":27,"value":334},{"type":18,"tag":212,"props":970,"children":971},{"class":214,"line":337},[972,977,981,985,990],{"type":18,"tag":212,"props":973,"children":974},{"style":230},[975],{"type":27,"value":976},"  nitroApp.tide?.pageApi.",{"type":18,"tag":212,"props":978,"children":979},{"style":321},[980],{"type":27,"value":828},{"type":18,"tag":212,"props":982,"children":983},{"style":230},[984],{"type":27,"value":932},{"type":18,"tag":212,"props":986,"children":987},{"style":241},[988],{"type":27,"value":989},"'my-content-type'",{"type":18,"tag":212,"props":991,"children":992},{"style":230},[993],{"type":27,"value":994},", tideMyContentTypeModule)\n",{"type":18,"tag":212,"props":996,"children":997},{"class":214,"line":346},[998],{"type":18,"tag":212,"props":999,"children":1000},{"style":230},[1001],{"type":27,"value":1002},"})\n",{"type":18,"tag":39,"props":1004,"children":1006},{"id":1005},"the-vue-component",[1007],{"type":27,"value":1008},"The Vue component",{"type":18,"tag":23,"props":1010,"children":1011},{},[1012,1014,1019],{"type":27,"value":1013},"A Vue component is needed to render the content type. This component will receive a ",{"type":18,"tag":78,"props":1015,"children":1017},{"className":1016},[],[1018],{"type":27,"value":13},{"type":27,"value":1020}," prop, it's this prop that contains the mapped data from the Tide API response.",{"type":18,"tag":19,"props":1022,"children":1023},{},[1024],{"type":18,"tag":23,"props":1025,"children":1026},{},[1027,1032,1034,1040,1042,1048,1050,1056],{"type":18,"tag":170,"props":1028,"children":1029},{},[1030],{"type":27,"value":1031},"Important note",{"type":27,"value":1033},": The component needs to be registered globally, this can be done by adding the component to a ",{"type":18,"tag":78,"props":1035,"children":1037},{"className":1036},[],[1038],{"type":27,"value":1039},"/components/global",{"type":27,"value":1041}," folder within the content type. Because this is global the name needs to be unique, it must also be prefixed with ",{"type":18,"tag":78,"props":1043,"children":1045},{"className":1044},[],[1046],{"type":27,"value":1047},"Tide",{"type":27,"value":1049}," i.e. ",{"type":18,"tag":78,"props":1051,"children":1053},{"className":1052},[],[1054],{"type":27,"value":1055},"TideMyContentType",{"type":27,"value":196},{"type":18,"tag":23,"props":1058,"children":1059},{},[1060,1062,1068,1070,1075],{"type":27,"value":1061},"This component should use the ",{"type":18,"tag":78,"props":1063,"children":1065},{"className":1064},[],[1066],{"type":27,"value":1067},"TideBaseLayout",{"type":27,"value":1069}," component to render the shell of the site, from there slots are used to render the content types content in the right locations. If you're using the CLI it will take care of scaffolding a global component that uses ",{"type":18,"tag":78,"props":1071,"children":1073},{"className":1072},[],[1074],{"type":27,"value":1067},{"type":27,"value":1076}," for you.",{"type":18,"tag":23,"props":1078,"children":1079},{},[1080,1082,1087],{"type":27,"value":1081},"Below is an example component using ",{"type":18,"tag":78,"props":1083,"children":1085},{"className":1084},[],[1086],{"type":27,"value":1067},{"type":27,"value":196},{"type":18,"tag":107,"props":1089,"children":1093},{"code":1090,"language":1091,"meta":10,"className":1092,"style":10},"\u003Ctemplate>\n  \u003CTideBaseLayout\n    :site=\"site\"\n    :page=\"page\"\n    :siteSection=\"page.siteSection\"\n    :pageTitle=\"page.title\"\n    :pageLanguage=\"page.lang\"\n    :updatedDate=\"page.changed || page.created\"\n    :showContentRating=\"page.showContentRating\"\n  >\n    \u003Ctemplate #aboveHeader>\n      \u003Cslot name=\"aboveHeader\">\u003C/slot>\n    \u003C/template>\n    \u003Ctemplate #primaryNav>\n      \u003Cslot name=\"primaryNav\">\u003C/slot>\n    \u003C/template>\n    \u003Ctemplate #breadcrumbs>\n      \u003Cslot name=\"breadcrumbs\">\u003C/slot>\n    \u003C/template>\n    \u003Ctemplate #aboveBody>\n      \u003Cslot name=\"aboveBody\">\u003C/slot>\n    \u003C/template>\n    \u003Ctemplate #body>\n      \u003C!-- Add content within the relevant slot -->\n      \u003CTideMyContentTypeContent :content=\"page.content\" />\n    \u003C/template>\n    \u003Ctemplate #sidebar>\n      \u003Cslot name=\"sidebar\">\u003C/slot>\n    \u003C/template>\n    \u003Ctemplate #footer>\n      \u003Cslot name=\"footer\">\u003C/slot>\n    \u003C/template>\n  \u003C/TideBaseLayout>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { TideSiteData } from '@dpc-sdp/ripple-tide-api/types'\nimport type { TideMediaPage } from '../../types'\n\ninterface Props {\n  site: TideSiteData\n  page: TideMediaPage\n}\n\ndefineProps\u003CProps>()\n\u003C/script>\n","vue","language-vue shiki shiki-themes github-light",[1094],{"type":18,"tag":78,"props":1095,"children":1096},{"__ignoreMap":10},[1097,1116,1129,1161,1188,1217,1246,1275,1314,1343,1351,1377,1417,1433,1457,1493,1508,1532,1568,1583,1607,1643,1658,1682,1690,1734,1749,1773,1809,1824,1848,1884,1899,1915,1931,1938,1973,1993,2019,2027,2045,2063,2081,2089,2097,2120],{"type":18,"tag":212,"props":1098,"children":1099},{"class":214,"line":215},[1100,1105,1111],{"type":18,"tag":212,"props":1101,"children":1102},{"style":230},[1103],{"type":27,"value":1104},"\u003C",{"type":18,"tag":212,"props":1106,"children":1108},{"style":1107},"--shiki-default:#22863A",[1109],{"type":27,"value":1110},"template",{"type":18,"tag":212,"props":1112,"children":1113},{"style":230},[1114],{"type":27,"value":1115},">\n",{"type":18,"tag":212,"props":1117,"children":1118},{"class":214,"line":247},[1119,1124],{"type":18,"tag":212,"props":1120,"children":1121},{"style":230},[1122],{"type":27,"value":1123},"  \u003C",{"type":18,"tag":212,"props":1125,"children":1126},{"style":1107},[1127],{"type":27,"value":1128},"TideBaseLayout\n",{"type":18,"tag":212,"props":1130,"children":1131},{"class":214,"line":269},[1132,1137,1142,1147,1152,1156],{"type":18,"tag":212,"props":1133,"children":1134},{"style":230},[1135],{"type":27,"value":1136},"    :",{"type":18,"tag":212,"props":1138,"children":1139},{"style":321},[1140],{"type":27,"value":1141},"site",{"type":18,"tag":212,"props":1143,"children":1144},{"style":230},[1145],{"type":27,"value":1146},"=",{"type":18,"tag":212,"props":1148,"children":1149},{"style":241},[1150],{"type":27,"value":1151},"\"",{"type":18,"tag":212,"props":1153,"children":1154},{"style":230},[1155],{"type":27,"value":1141},{"type":18,"tag":212,"props":1157,"children":1158},{"style":241},[1159],{"type":27,"value":1160},"\"\n",{"type":18,"tag":212,"props":1162,"children":1163},{"class":214,"line":291},[1164,1168,1172,1176,1180,1184],{"type":18,"tag":212,"props":1165,"children":1166},{"style":230},[1167],{"type":27,"value":1136},{"type":18,"tag":212,"props":1169,"children":1170},{"style":321},[1171],{"type":27,"value":13},{"type":18,"tag":212,"props":1173,"children":1174},{"style":230},[1175],{"type":27,"value":1146},{"type":18,"tag":212,"props":1177,"children":1178},{"style":241},[1179],{"type":27,"value":1151},{"type":18,"tag":212,"props":1181,"children":1182},{"style":230},[1183],{"type":27,"value":13},{"type":18,"tag":212,"props":1185,"children":1186},{"style":241},[1187],{"type":27,"value":1160},{"type":18,"tag":212,"props":1189,"children":1190},{"class":214,"line":301},[1191,1195,1200,1204,1208,1213],{"type":18,"tag":212,"props":1192,"children":1193},{"style":230},[1194],{"type":27,"value":1136},{"type":18,"tag":212,"props":1196,"children":1197},{"style":321},[1198],{"type":27,"value":1199},"siteSection",{"type":18,"tag":212,"props":1201,"children":1202},{"style":230},[1203],{"type":27,"value":1146},{"type":18,"tag":212,"props":1205,"children":1206},{"style":241},[1207],{"type":27,"value":1151},{"type":18,"tag":212,"props":1209,"children":1210},{"style":230},[1211],{"type":27,"value":1212},"page.siteSection",{"type":18,"tag":212,"props":1214,"children":1215},{"style":241},[1216],{"type":27,"value":1160},{"type":18,"tag":212,"props":1218,"children":1219},{"class":214,"line":337},[1220,1224,1229,1233,1237,1242],{"type":18,"tag":212,"props":1221,"children":1222},{"style":230},[1223],{"type":27,"value":1136},{"type":18,"tag":212,"props":1225,"children":1226},{"style":321},[1227],{"type":27,"value":1228},"pageTitle",{"type":18,"tag":212,"props":1230,"children":1231},{"style":230},[1232],{"type":27,"value":1146},{"type":18,"tag":212,"props":1234,"children":1235},{"style":241},[1236],{"type":27,"value":1151},{"type":18,"tag":212,"props":1238,"children":1239},{"style":230},[1240],{"type":27,"value":1241},"page.title",{"type":18,"tag":212,"props":1243,"children":1244},{"style":241},[1245],{"type":27,"value":1160},{"type":18,"tag":212,"props":1247,"children":1248},{"class":214,"line":346},[1249,1253,1258,1262,1266,1271],{"type":18,"tag":212,"props":1250,"children":1251},{"style":230},[1252],{"type":27,"value":1136},{"type":18,"tag":212,"props":1254,"children":1255},{"style":321},[1256],{"type":27,"value":1257},"pageLanguage",{"type":18,"tag":212,"props":1259,"children":1260},{"style":230},[1261],{"type":27,"value":1146},{"type":18,"tag":212,"props":1263,"children":1264},{"style":241},[1265],{"type":27,"value":1151},{"type":18,"tag":212,"props":1267,"children":1268},{"style":230},[1269],{"type":27,"value":1270},"page.lang",{"type":18,"tag":212,"props":1272,"children":1273},{"style":241},[1274],{"type":27,"value":1160},{"type":18,"tag":212,"props":1276,"children":1277},{"class":214,"line":356},[1278,1282,1287,1291,1295,1300,1305,1310],{"type":18,"tag":212,"props":1279,"children":1280},{"style":230},[1281],{"type":27,"value":1136},{"type":18,"tag":212,"props":1283,"children":1284},{"style":321},[1285],{"type":27,"value":1286},"updatedDate",{"type":18,"tag":212,"props":1288,"children":1289},{"style":230},[1290],{"type":27,"value":1146},{"type":18,"tag":212,"props":1292,"children":1293},{"style":241},[1294],{"type":27,"value":1151},{"type":18,"tag":212,"props":1296,"children":1297},{"style":230},[1298],{"type":27,"value":1299},"page.changed ",{"type":18,"tag":212,"props":1301,"children":1302},{"style":219},[1303],{"type":27,"value":1304},"||",{"type":18,"tag":212,"props":1306,"children":1307},{"style":230},[1308],{"type":27,"value":1309}," page.created",{"type":18,"tag":212,"props":1311,"children":1312},{"style":241},[1313],{"type":27,"value":1160},{"type":18,"tag":212,"props":1315,"children":1316},{"class":214,"line":365},[1317,1321,1326,1330,1334,1339],{"type":18,"tag":212,"props":1318,"children":1319},{"style":230},[1320],{"type":27,"value":1136},{"type":18,"tag":212,"props":1322,"children":1323},{"style":321},[1324],{"type":27,"value":1325},"showContentRating",{"type":18,"tag":212,"props":1327,"children":1328},{"style":230},[1329],{"type":27,"value":1146},{"type":18,"tag":212,"props":1331,"children":1332},{"style":241},[1333],{"type":27,"value":1151},{"type":18,"tag":212,"props":1335,"children":1336},{"style":230},[1337],{"type":27,"value":1338},"page.showContentRating",{"type":18,"tag":212,"props":1340,"children":1341},{"style":241},[1342],{"type":27,"value":1160},{"type":18,"tag":212,"props":1344,"children":1345},{"class":214,"line":394},[1346],{"type":18,"tag":212,"props":1347,"children":1348},{"style":230},[1349],{"type":27,"value":1350},"  >\n",{"type":18,"tag":212,"props":1352,"children":1353},{"class":214,"line":403},[1354,1359,1363,1368,1373],{"type":18,"tag":212,"props":1355,"children":1356},{"style":230},[1357],{"type":27,"value":1358},"    \u003C",{"type":18,"tag":212,"props":1360,"children":1361},{"style":1107},[1362],{"type":27,"value":1110},{"type":18,"tag":212,"props":1364,"children":1365},{"style":230},[1366],{"type":27,"value":1367}," #",{"type":18,"tag":212,"props":1369,"children":1370},{"style":321},[1371],{"type":27,"value":1372},"aboveHeader",{"type":18,"tag":212,"props":1374,"children":1375},{"style":230},[1376],{"type":27,"value":1115},{"type":18,"tag":212,"props":1378,"children":1379},{"class":214,"line":422},[1380,1385,1390,1395,1399,1404,1409,1413],{"type":18,"tag":212,"props":1381,"children":1382},{"style":230},[1383],{"type":27,"value":1384},"      \u003C",{"type":18,"tag":212,"props":1386,"children":1387},{"style":1107},[1388],{"type":27,"value":1389},"slot",{"type":18,"tag":212,"props":1391,"children":1392},{"style":321},[1393],{"type":27,"value":1394}," name",{"type":18,"tag":212,"props":1396,"children":1397},{"style":230},[1398],{"type":27,"value":1146},{"type":18,"tag":212,"props":1400,"children":1401},{"style":241},[1402],{"type":27,"value":1403},"\"aboveHeader\"",{"type":18,"tag":212,"props":1405,"children":1406},{"style":230},[1407],{"type":27,"value":1408},">\u003C/",{"type":18,"tag":212,"props":1410,"children":1411},{"style":1107},[1412],{"type":27,"value":1389},{"type":18,"tag":212,"props":1414,"children":1415},{"style":230},[1416],{"type":27,"value":1115},{"type":18,"tag":212,"props":1418,"children":1419},{"class":214,"line":430},[1420,1425,1429],{"type":18,"tag":212,"props":1421,"children":1422},{"style":230},[1423],{"type":27,"value":1424},"    \u003C/",{"type":18,"tag":212,"props":1426,"children":1427},{"style":1107},[1428],{"type":27,"value":1110},{"type":18,"tag":212,"props":1430,"children":1431},{"style":230},[1432],{"type":27,"value":1115},{"type":18,"tag":212,"props":1434,"children":1435},{"class":214,"line":439},[1436,1440,1444,1448,1453],{"type":18,"tag":212,"props":1437,"children":1438},{"style":230},[1439],{"type":27,"value":1358},{"type":18,"tag":212,"props":1441,"children":1442},{"style":1107},[1443],{"type":27,"value":1110},{"type":18,"tag":212,"props":1445,"children":1446},{"style":230},[1447],{"type":27,"value":1367},{"type":18,"tag":212,"props":1449,"children":1450},{"style":321},[1451],{"type":27,"value":1452},"primaryNav",{"type":18,"tag":212,"props":1454,"children":1455},{"style":230},[1456],{"type":27,"value":1115},{"type":18,"tag":212,"props":1458,"children":1459},{"class":214,"line":448},[1460,1464,1468,1472,1476,1481,1485,1489],{"type":18,"tag":212,"props":1461,"children":1462},{"style":230},[1463],{"type":27,"value":1384},{"type":18,"tag":212,"props":1465,"children":1466},{"style":1107},[1467],{"type":27,"value":1389},{"type":18,"tag":212,"props":1469,"children":1470},{"style":321},[1471],{"type":27,"value":1394},{"type":18,"tag":212,"props":1473,"children":1474},{"style":230},[1475],{"type":27,"value":1146},{"type":18,"tag":212,"props":1477,"children":1478},{"style":241},[1479],{"type":27,"value":1480},"\"primaryNav\"",{"type":18,"tag":212,"props":1482,"children":1483},{"style":230},[1484],{"type":27,"value":1408},{"type":18,"tag":212,"props":1486,"children":1487},{"style":1107},[1488],{"type":27,"value":1389},{"type":18,"tag":212,"props":1490,"children":1491},{"style":230},[1492],{"type":27,"value":1115},{"type":18,"tag":212,"props":1494,"children":1495},{"class":214,"line":466},[1496,1500,1504],{"type":18,"tag":212,"props":1497,"children":1498},{"style":230},[1499],{"type":27,"value":1424},{"type":18,"tag":212,"props":1501,"children":1502},{"style":1107},[1503],{"type":27,"value":1110},{"type":18,"tag":212,"props":1505,"children":1506},{"style":230},[1507],{"type":27,"value":1115},{"type":18,"tag":212,"props":1509,"children":1510},{"class":214,"line":475},[1511,1515,1519,1523,1528],{"type":18,"tag":212,"props":1512,"children":1513},{"style":230},[1514],{"type":27,"value":1358},{"type":18,"tag":212,"props":1516,"children":1517},{"style":1107},[1518],{"type":27,"value":1110},{"type":18,"tag":212,"props":1520,"children":1521},{"style":230},[1522],{"type":27,"value":1367},{"type":18,"tag":212,"props":1524,"children":1525},{"style":321},[1526],{"type":27,"value":1527},"breadcrumbs",{"type":18,"tag":212,"props":1529,"children":1530},{"style":230},[1531],{"type":27,"value":1115},{"type":18,"tag":212,"props":1533,"children":1534},{"class":214,"line":483},[1535,1539,1543,1547,1551,1556,1560,1564],{"type":18,"tag":212,"props":1536,"children":1537},{"style":230},[1538],{"type":27,"value":1384},{"type":18,"tag":212,"props":1540,"children":1541},{"style":1107},[1542],{"type":27,"value":1389},{"type":18,"tag":212,"props":1544,"children":1545},{"style":321},[1546],{"type":27,"value":1394},{"type":18,"tag":212,"props":1548,"children":1549},{"style":230},[1550],{"type":27,"value":1146},{"type":18,"tag":212,"props":1552,"children":1553},{"style":241},[1554],{"type":27,"value":1555},"\"breadcrumbs\"",{"type":18,"tag":212,"props":1557,"children":1558},{"style":230},[1559],{"type":27,"value":1408},{"type":18,"tag":212,"props":1561,"children":1562},{"style":1107},[1563],{"type":27,"value":1389},{"type":18,"tag":212,"props":1565,"children":1566},{"style":230},[1567],{"type":27,"value":1115},{"type":18,"tag":212,"props":1569,"children":1570},{"class":214,"line":492},[1571,1575,1579],{"type":18,"tag":212,"props":1572,"children":1573},{"style":230},[1574],{"type":27,"value":1424},{"type":18,"tag":212,"props":1576,"children":1577},{"style":1107},[1578],{"type":27,"value":1110},{"type":18,"tag":212,"props":1580,"children":1581},{"style":230},[1582],{"type":27,"value":1115},{"type":18,"tag":212,"props":1584,"children":1585},{"class":214,"line":570},[1586,1590,1594,1598,1603],{"type":18,"tag":212,"props":1587,"children":1588},{"style":230},[1589],{"type":27,"value":1358},{"type":18,"tag":212,"props":1591,"children":1592},{"style":1107},[1593],{"type":27,"value":1110},{"type":18,"tag":212,"props":1595,"children":1596},{"style":230},[1597],{"type":27,"value":1367},{"type":18,"tag":212,"props":1599,"children":1600},{"style":321},[1601],{"type":27,"value":1602},"aboveBody",{"type":18,"tag":212,"props":1604,"children":1605},{"style":230},[1606],{"type":27,"value":1115},{"type":18,"tag":212,"props":1608,"children":1609},{"class":214,"line":579},[1610,1614,1618,1622,1626,1631,1635,1639],{"type":18,"tag":212,"props":1611,"children":1612},{"style":230},[1613],{"type":27,"value":1384},{"type":18,"tag":212,"props":1615,"children":1616},{"style":1107},[1617],{"type":27,"value":1389},{"type":18,"tag":212,"props":1619,"children":1620},{"style":321},[1621],{"type":27,"value":1394},{"type":18,"tag":212,"props":1623,"children":1624},{"style":230},[1625],{"type":27,"value":1146},{"type":18,"tag":212,"props":1627,"children":1628},{"style":241},[1629],{"type":27,"value":1630},"\"aboveBody\"",{"type":18,"tag":212,"props":1632,"children":1633},{"style":230},[1634],{"type":27,"value":1408},{"type":18,"tag":212,"props":1636,"children":1637},{"style":1107},[1638],{"type":27,"value":1389},{"type":18,"tag":212,"props":1640,"children":1641},{"style":230},[1642],{"type":27,"value":1115},{"type":18,"tag":212,"props":1644,"children":1645},{"class":214,"line":588},[1646,1650,1654],{"type":18,"tag":212,"props":1647,"children":1648},{"style":230},[1649],{"type":27,"value":1424},{"type":18,"tag":212,"props":1651,"children":1652},{"style":1107},[1653],{"type":27,"value":1110},{"type":18,"tag":212,"props":1655,"children":1656},{"style":230},[1657],{"type":27,"value":1115},{"type":18,"tag":212,"props":1659,"children":1660},{"class":214,"line":597},[1661,1665,1669,1673,1678],{"type":18,"tag":212,"props":1662,"children":1663},{"style":230},[1664],{"type":27,"value":1358},{"type":18,"tag":212,"props":1666,"children":1667},{"style":1107},[1668],{"type":27,"value":1110},{"type":18,"tag":212,"props":1670,"children":1671},{"style":230},[1672],{"type":27,"value":1367},{"type":18,"tag":212,"props":1674,"children":1675},{"style":321},[1676],{"type":27,"value":1677},"body",{"type":18,"tag":212,"props":1679,"children":1680},{"style":230},[1681],{"type":27,"value":1115},{"type":18,"tag":212,"props":1683,"children":1684},{"class":214,"line":605},[1685],{"type":18,"tag":212,"props":1686,"children":1687},{"style":350},[1688],{"type":27,"value":1689},"      \u003C!-- Add content within the relevant slot -->\n",{"type":18,"tag":212,"props":1691,"children":1692},{"class":214,"line":614},[1693,1697,1702,1707,1712,1716,1720,1725,1729],{"type":18,"tag":212,"props":1694,"children":1695},{"style":230},[1696],{"type":27,"value":1384},{"type":18,"tag":212,"props":1698,"children":1699},{"style":1107},[1700],{"type":27,"value":1701},"TideMyContentTypeContent",{"type":18,"tag":212,"props":1703,"children":1704},{"style":230},[1705],{"type":27,"value":1706}," :",{"type":18,"tag":212,"props":1708,"children":1709},{"style":321},[1710],{"type":27,"value":1711},"content",{"type":18,"tag":212,"props":1713,"children":1714},{"style":230},[1715],{"type":27,"value":1146},{"type":18,"tag":212,"props":1717,"children":1718},{"style":241},[1719],{"type":27,"value":1151},{"type":18,"tag":212,"props":1721,"children":1722},{"style":230},[1723],{"type":27,"value":1724},"page.content",{"type":18,"tag":212,"props":1726,"children":1727},{"style":241},[1728],{"type":27,"value":1151},{"type":18,"tag":212,"props":1730,"children":1731},{"style":230},[1732],{"type":27,"value":1733}," />\n",{"type":18,"tag":212,"props":1735,"children":1736},{"class":214,"line":658},[1737,1741,1745],{"type":18,"tag":212,"props":1738,"children":1739},{"style":230},[1740],{"type":27,"value":1424},{"type":18,"tag":212,"props":1742,"children":1743},{"style":1107},[1744],{"type":27,"value":1110},{"type":18,"tag":212,"props":1746,"children":1747},{"style":230},[1748],{"type":27,"value":1115},{"type":18,"tag":212,"props":1750,"children":1751},{"class":214,"line":667},[1752,1756,1760,1764,1769],{"type":18,"tag":212,"props":1753,"children":1754},{"style":230},[1755],{"type":27,"value":1358},{"type":18,"tag":212,"props":1757,"children":1758},{"style":1107},[1759],{"type":27,"value":1110},{"type":18,"tag":212,"props":1761,"children":1762},{"style":230},[1763],{"type":27,"value":1367},{"type":18,"tag":212,"props":1765,"children":1766},{"style":321},[1767],{"type":27,"value":1768},"sidebar",{"type":18,"tag":212,"props":1770,"children":1771},{"style":230},[1772],{"type":27,"value":1115},{"type":18,"tag":212,"props":1774,"children":1775},{"class":214,"line":676},[1776,1780,1784,1788,1792,1797,1801,1805],{"type":18,"tag":212,"props":1777,"children":1778},{"style":230},[1779],{"type":27,"value":1384},{"type":18,"tag":212,"props":1781,"children":1782},{"style":1107},[1783],{"type":27,"value":1389},{"type":18,"tag":212,"props":1785,"children":1786},{"style":321},[1787],{"type":27,"value":1394},{"type":18,"tag":212,"props":1789,"children":1790},{"style":230},[1791],{"type":27,"value":1146},{"type":18,"tag":212,"props":1793,"children":1794},{"style":241},[1795],{"type":27,"value":1796},"\"sidebar\"",{"type":18,"tag":212,"props":1798,"children":1799},{"style":230},[1800],{"type":27,"value":1408},{"type":18,"tag":212,"props":1802,"children":1803},{"style":1107},[1804],{"type":27,"value":1389},{"type":18,"tag":212,"props":1806,"children":1807},{"style":230},[1808],{"type":27,"value":1115},{"type":18,"tag":212,"props":1810,"children":1811},{"class":214,"line":685},[1812,1816,1820],{"type":18,"tag":212,"props":1813,"children":1814},{"style":230},[1815],{"type":27,"value":1424},{"type":18,"tag":212,"props":1817,"children":1818},{"style":1107},[1819],{"type":27,"value":1110},{"type":18,"tag":212,"props":1821,"children":1822},{"style":230},[1823],{"type":27,"value":1115},{"type":18,"tag":212,"props":1825,"children":1826},{"class":214,"line":694},[1827,1831,1835,1839,1844],{"type":18,"tag":212,"props":1828,"children":1829},{"style":230},[1830],{"type":27,"value":1358},{"type":18,"tag":212,"props":1832,"children":1833},{"style":1107},[1834],{"type":27,"value":1110},{"type":18,"tag":212,"props":1836,"children":1837},{"style":230},[1838],{"type":27,"value":1367},{"type":18,"tag":212,"props":1840,"children":1841},{"style":321},[1842],{"type":27,"value":1843},"footer",{"type":18,"tag":212,"props":1845,"children":1846},{"style":230},[1847],{"type":27,"value":1115},{"type":18,"tag":212,"props":1849,"children":1850},{"class":214,"line":719},[1851,1855,1859,1863,1867,1872,1876,1880],{"type":18,"tag":212,"props":1852,"children":1853},{"style":230},[1854],{"type":27,"value":1384},{"type":18,"tag":212,"props":1856,"children":1857},{"style":1107},[1858],{"type":27,"value":1389},{"type":18,"tag":212,"props":1860,"children":1861},{"style":321},[1862],{"type":27,"value":1394},{"type":18,"tag":212,"props":1864,"children":1865},{"style":230},[1866],{"type":27,"value":1146},{"type":18,"tag":212,"props":1868,"children":1869},{"style":241},[1870],{"type":27,"value":1871},"\"footer\"",{"type":18,"tag":212,"props":1873,"children":1874},{"style":230},[1875],{"type":27,"value":1408},{"type":18,"tag":212,"props":1877,"children":1878},{"style":1107},[1879],{"type":27,"value":1389},{"type":18,"tag":212,"props":1881,"children":1882},{"style":230},[1883],{"type":27,"value":1115},{"type":18,"tag":212,"props":1885,"children":1886},{"class":214,"line":727},[1887,1891,1895],{"type":18,"tag":212,"props":1888,"children":1889},{"style":230},[1890],{"type":27,"value":1424},{"type":18,"tag":212,"props":1892,"children":1893},{"style":1107},[1894],{"type":27,"value":1110},{"type":18,"tag":212,"props":1896,"children":1897},{"style":230},[1898],{"type":27,"value":1115},{"type":18,"tag":212,"props":1900,"children":1901},{"class":214,"line":740},[1902,1907,1911],{"type":18,"tag":212,"props":1903,"children":1904},{"style":230},[1905],{"type":27,"value":1906},"  \u003C/",{"type":18,"tag":212,"props":1908,"children":1909},{"style":1107},[1910],{"type":27,"value":1067},{"type":18,"tag":212,"props":1912,"children":1913},{"style":230},[1914],{"type":27,"value":1115},{"type":18,"tag":212,"props":1916,"children":1917},{"class":214,"line":749},[1918,1923,1927],{"type":18,"tag":212,"props":1919,"children":1920},{"style":230},[1921],{"type":27,"value":1922},"\u003C/",{"type":18,"tag":212,"props":1924,"children":1925},{"style":1107},[1926],{"type":27,"value":1110},{"type":18,"tag":212,"props":1928,"children":1929},{"style":230},[1930],{"type":27,"value":1115},{"type":18,"tag":212,"props":1932,"children":1933},{"class":214,"line":758},[1934],{"type":18,"tag":212,"props":1935,"children":1936},{"emptyLinePlaceholder":295},[1937],{"type":27,"value":298},{"type":18,"tag":212,"props":1939,"children":1940},{"class":214,"line":767},[1941,1945,1950,1955,1960,1964,1969],{"type":18,"tag":212,"props":1942,"children":1943},{"style":230},[1944],{"type":27,"value":1104},{"type":18,"tag":212,"props":1946,"children":1947},{"style":1107},[1948],{"type":27,"value":1949},"script",{"type":18,"tag":212,"props":1951,"children":1952},{"style":321},[1953],{"type":27,"value":1954}," setup",{"type":18,"tag":212,"props":1956,"children":1957},{"style":321},[1958],{"type":27,"value":1959}," lang",{"type":18,"tag":212,"props":1961,"children":1962},{"style":230},[1963],{"type":27,"value":1146},{"type":18,"tag":212,"props":1965,"children":1966},{"style":241},[1967],{"type":27,"value":1968},"\"ts\"",{"type":18,"tag":212,"props":1970,"children":1971},{"style":230},[1972],{"type":27,"value":1115},{"type":18,"tag":212,"props":1974,"children":1975},{"class":214,"line":775},[1976,1980,1985,1989],{"type":18,"tag":212,"props":1977,"children":1978},{"style":219},[1979],{"type":27,"value":222},{"type":18,"tag":212,"props":1981,"children":1982},{"style":230},[1983],{"type":27,"value":1984}," { TideSiteData } ",{"type":18,"tag":212,"props":1986,"children":1987},{"style":219},[1988],{"type":27,"value":238},{"type":18,"tag":212,"props":1990,"children":1991},{"style":241},[1992],{"type":27,"value":244},{"type":18,"tag":212,"props":1994,"children":1996},{"class":214,"line":1995},38,[1997,2001,2005,2010,2014],{"type":18,"tag":212,"props":1998,"children":1999},{"style":219},[2000],{"type":27,"value":222},{"type":18,"tag":212,"props":2002,"children":2003},{"style":219},[2004],{"type":27,"value":227},{"type":18,"tag":212,"props":2006,"children":2007},{"style":230},[2008],{"type":27,"value":2009}," { TideMediaPage } ",{"type":18,"tag":212,"props":2011,"children":2012},{"style":219},[2013],{"type":27,"value":238},{"type":18,"tag":212,"props":2015,"children":2016},{"style":241},[2017],{"type":27,"value":2018}," '../../types'\n",{"type":18,"tag":212,"props":2020,"children":2022},{"class":214,"line":2021},39,[2023],{"type":18,"tag":212,"props":2024,"children":2025},{"emptyLinePlaceholder":295},[2026],{"type":27,"value":298},{"type":18,"tag":212,"props":2028,"children":2030},{"class":214,"line":2029},40,[2031,2036,2041],{"type":18,"tag":212,"props":2032,"children":2033},{"style":219},[2034],{"type":27,"value":2035},"interface",{"type":18,"tag":212,"props":2037,"children":2038},{"style":321},[2039],{"type":27,"value":2040}," Props",{"type":18,"tag":212,"props":2042,"children":2043},{"style":230},[2044],{"type":27,"value":334},{"type":18,"tag":212,"props":2046,"children":2048},{"class":214,"line":2047},41,[2049,2054,2058],{"type":18,"tag":212,"props":2050,"children":2051},{"style":506},[2052],{"type":27,"value":2053},"  site",{"type":18,"tag":212,"props":2055,"children":2056},{"style":219},[2057],{"type":27,"value":318},{"type":18,"tag":212,"props":2059,"children":2060},{"style":321},[2061],{"type":27,"value":2062}," TideSiteData\n",{"type":18,"tag":212,"props":2064,"children":2066},{"class":214,"line":2065},42,[2067,2072,2076],{"type":18,"tag":212,"props":2068,"children":2069},{"style":506},[2070],{"type":27,"value":2071},"  page",{"type":18,"tag":212,"props":2073,"children":2074},{"style":219},[2075],{"type":27,"value":318},{"type":18,"tag":212,"props":2077,"children":2078},{"style":321},[2079],{"type":27,"value":2080}," TideMediaPage\n",{"type":18,"tag":212,"props":2082,"children":2084},{"class":214,"line":2083},43,[2085],{"type":18,"tag":212,"props":2086,"children":2087},{"style":230},[2088],{"type":27,"value":764},{"type":18,"tag":212,"props":2090,"children":2092},{"class":214,"line":2091},44,[2093],{"type":18,"tag":212,"props":2094,"children":2095},{"emptyLinePlaceholder":295},[2096],{"type":27,"value":298},{"type":18,"tag":212,"props":2098,"children":2100},{"class":214,"line":2099},45,[2101,2106,2110,2115],{"type":18,"tag":212,"props":2102,"children":2103},{"style":321},[2104],{"type":27,"value":2105},"defineProps",{"type":18,"tag":212,"props":2107,"children":2108},{"style":230},[2109],{"type":27,"value":1104},{"type":18,"tag":212,"props":2111,"children":2112},{"style":321},[2113],{"type":27,"value":2114},"Props",{"type":18,"tag":212,"props":2116,"children":2117},{"style":230},[2118],{"type":27,"value":2119},">()\n",{"type":18,"tag":212,"props":2121,"children":2123},{"class":214,"line":2122},46,[2124,2128,2132],{"type":18,"tag":212,"props":2125,"children":2126},{"style":230},[2127],{"type":27,"value":1922},{"type":18,"tag":212,"props":2129,"children":2130},{"style":1107},[2131],{"type":27,"value":1949},{"type":18,"tag":212,"props":2133,"children":2134},{"style":230},[2135],{"type":27,"value":1115},{"type":18,"tag":39,"props":2137,"children":2139},{"id":2138},"using-the-content-type",[2140],{"type":27,"value":2141},"Using the content type",{"type":18,"tag":23,"props":2143,"children":2144},{},[2145,2147,2154,2156,2162],{"type":27,"value":2146},"Content types are actually ",{"type":18,"tag":30,"props":2148,"children":2151},{"href":2149,"rel":2150},"https://nuxt.com/docs/getting-started/layers",[191],[2152],{"type":27,"value":2153},"Nuxt layers",{"type":27,"value":2155}," so these are added in the same way as any other layer through the extends property of the main applications ",{"type":18,"tag":78,"props":2157,"children":2159},{"className":2158},[],[2160],{"type":27,"value":2161},"nuxt.config.ts",{"type":27,"value":2163}," file.",{"type":18,"tag":107,"props":2165,"children":2169},{"code":2166,"language":2167,"meta":10,"className":2168,"style":10},"export default defineNuxtConfig({\n  extends: [\n    '@dpc-sdp/ripple-tide-news', // An npm installed package\n    'github:dpc-sdp/ripple-tide-news#1.0.0', // A tagged git repository\n    './layers/tide-my-content-type', // A local layer\n  ]\n})\n","js","language-js shiki shiki-themes github-light",[2170],{"type":18,"tag":78,"props":2171,"children":2172},{"__ignoreMap":10},[2173,2194,2202,2220,2237,2254,2261],{"type":18,"tag":212,"props":2174,"children":2175},{"class":214,"line":215},[2176,2180,2184,2189],{"type":18,"tag":212,"props":2177,"children":2178},{"style":219},[2179],{"type":27,"value":781},{"type":18,"tag":212,"props":2181,"children":2182},{"style":219},[2183],{"type":27,"value":786},{"type":18,"tag":212,"props":2185,"children":2186},{"style":321},[2187],{"type":27,"value":2188}," defineNuxtConfig",{"type":18,"tag":212,"props":2190,"children":2191},{"style":230},[2192],{"type":27,"value":2193},"({\n",{"type":18,"tag":212,"props":2195,"children":2196},{"class":214,"line":247},[2197],{"type":18,"tag":212,"props":2198,"children":2199},{"style":230},[2200],{"type":27,"value":2201},"  extends: [\n",{"type":18,"tag":212,"props":2203,"children":2204},{"class":214,"line":269},[2205,2210,2215],{"type":18,"tag":212,"props":2206,"children":2207},{"style":241},[2208],{"type":27,"value":2209},"    '@dpc-sdp/ripple-tide-news'",{"type":18,"tag":212,"props":2211,"children":2212},{"style":230},[2213],{"type":27,"value":2214},", ",{"type":18,"tag":212,"props":2216,"children":2217},{"style":350},[2218],{"type":27,"value":2219},"// An npm installed package\n",{"type":18,"tag":212,"props":2221,"children":2222},{"class":214,"line":291},[2223,2228,2232],{"type":18,"tag":212,"props":2224,"children":2225},{"style":241},[2226],{"type":27,"value":2227},"    'github:dpc-sdp/ripple-tide-news#1.0.0'",{"type":18,"tag":212,"props":2229,"children":2230},{"style":230},[2231],{"type":27,"value":2214},{"type":18,"tag":212,"props":2233,"children":2234},{"style":350},[2235],{"type":27,"value":2236},"// A tagged git repository\n",{"type":18,"tag":212,"props":2238,"children":2239},{"class":214,"line":301},[2240,2245,2249],{"type":18,"tag":212,"props":2241,"children":2242},{"style":241},[2243],{"type":27,"value":2244},"    './layers/tide-my-content-type'",{"type":18,"tag":212,"props":2246,"children":2247},{"style":230},[2248],{"type":27,"value":2214},{"type":18,"tag":212,"props":2250,"children":2251},{"style":350},[2252],{"type":27,"value":2253},"// A local layer\n",{"type":18,"tag":212,"props":2255,"children":2256},{"class":214,"line":337},[2257],{"type":18,"tag":212,"props":2258,"children":2259},{"style":230},[2260],{"type":27,"value":755},{"type":18,"tag":212,"props":2262,"children":2263},{"class":214,"line":346},[2264],{"type":18,"tag":212,"props":2265,"children":2266},{"style":230},[2267],{"type":27,"value":1002},{"type":18,"tag":2269,"props":2270,"children":2271},"style",{},[2272],{"type":27,"value":2273},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":10,"searchDepth":247,"depth":247,"links":2275},[2276,2277,2278,2279,2280,2281],{"id":41,"depth":247,"text":44},{"id":97,"depth":247,"text":100},{"id":154,"depth":247,"text":157},{"id":794,"depth":247,"text":797},{"id":1005,"depth":247,"text":1008},{"id":2138,"depth":247,"text":2141},"markdown","content:framework:3.guides:4.creating-content-types.md","framework/3.guides/4.creating-content-types.md","md",["ShallowRef",2287],["ShallowReactive",2288],{"/framework/guides/creating-content-types":2289},[2290,2296],{"_path":2291,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":2292,"description":2293,"layout":13,"_type":2282,"_id":2294,"_source":1711,"_file":2295,"_extension":2285},"/framework/guides/brand-application","Applying theme and brand","A guide to applying theme and brand assets to Ripple sites.","content:framework:3.guides:3.brand-application.md","framework/3.guides/3.brand-application.md",{"_path":2297,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":2298,"description":2299,"layout":13,"links":2300,"_type":2282,"_id":2303,"_source":1711,"_file":2304,"_extension":2285},"/framework/guides/creating-new-layers","Creating new layers","Implementing custom functionality through layers",[2301],{"text":2302,"url":2149},"Nuxt layers documentation","content:framework:3.guides:5.creating-new-layers.md","framework/3.guides/5.creating-new-layers.md",["ShallowRef",2306],{},[2308,2313,2561],{"title":2309,"_path":2310,"icon":2311,"layout":2312},"Ripple Design System","/","carbon:home","home",{"title":2314,"_path":2315,"children":2316},"Design System","/design-system",[2317,2333,2349,2379,2413],{"title":2318,"_path":2319,"children":2320},"About","/design-system/about",[2321,2324,2327,2330],{"title":2322,"_path":2323,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":2325,"_path":2326,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":2328,"_path":2329,"layout":13},"Support","/design-system/about/getting-support",{"title":2331,"_path":2332,"layout":13},"Contributing","/design-system/about/contributing",{"title":2334,"_path":2335,"children":2336},"Design","/design-system/design",[2337,2340,2343,2346],{"title":2338,"_path":2339,"layout":13},"Getting started","/design-system/design/getting-started",{"title":2341,"_path":2342,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":2344,"_path":2345,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":2347,"_path":2348,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":2350,"_path":2351,"children":2352},"Develop","/design-system/develop",[2353,2355,2357,2360],{"title":2338,"_path":2354,"layout":13},"/design-system/develop/getting-started",{"title":2331,"_path":2356,"layout":13},"/design-system/develop/contributing",{"title":2358,"_path":2359,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":2361,"_path":2362,"children":2363,"layout":13},"Usage","/design-system/develop/usage",[2364,2367,2370,2373,2376],{"title":2365,"_path":2366,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":2368,"_path":2369,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":2371,"_path":2372,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":2374,"_path":2375,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":2377,"_path":2378,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":2380,"_path":2381,"children":2382},"Styles","/design-system/styles",[2383,2386,2389,2392,2395,2398,2401,2404,2407,2410],{"title":2384,"_path":2385,"layout":13},"Colour","/design-system/styles/colour",{"title":2387,"_path":2388,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":2390,"_path":2391,"layout":13},"Grid","/design-system/styles/grid",{"title":2393,"_path":2394,"layout":13},"Icons","/design-system/styles/icons",{"title":2396,"_path":2397,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":2399,"_path":2400,"layout":13},"Layout","/design-system/styles/layout",{"title":2402,"_path":2403,"layout":13},"Logo","/design-system/styles/logo",{"title":2405,"_path":2406,"layout":13},"Motion","/design-system/styles/motion",{"title":2408,"_path":2409,"layout":13},"Spacing","/design-system/styles/spacing",{"title":2411,"_path":2412,"layout":13},"Typography","/design-system/styles/typography",{"title":2414,"_path":2415,"children":2416},"Components","/design-system/components",[2417,2420,2423,2426,2429,2432,2435,2438,2441,2444,2447,2450,2453,2456,2459,2462,2465,2468,2471,2474,2477,2480,2483,2486,2489,2492,2495,2498,2501,2504,2507,2510,2513,2516,2519,2522,2525,2528,2531,2534,2537,2540,2543,2546,2549,2552,2555,2558],{"title":2418,"_path":2419,"layout":13},"Accordion","/design-system/components/accordion",{"title":2421,"_path":2422,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":2424,"_path":2425,"layout":13},"Alert","/design-system/components/alert",{"title":2427,"_path":2428,"layout":13},"Block quote","/design-system/components/block-quote",{"title":2430,"_path":2431,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":2433,"_path":2434,"layout":13},"Button","/design-system/components/button",{"title":2436,"_path":2437,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":2439,"_path":2440,"layout":13},"Callout","/design-system/components/callout",{"title":2442,"_path":2443,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":2445,"_path":2446,"layout":13},"Card","/design-system/components/card",{"title":2448,"_path":2449,"layout":13},"Carousel","/design-system/components/carousel",{"title":2451,"_path":2452,"layout":13},"Category grid","/design-system/components/category-grid",{"title":2454,"_path":2455,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":2457,"_path":2458,"layout":13},"Chip","/design-system/components/chip",{"title":2460,"_path":2461,"layout":13},"Contact us","/design-system/components/contact-us",{"title":2463,"_path":2464,"layout":13},"Date input","/design-system/components/date-input",{"title":2466,"_path":2467,"layout":13},"Detail list","/design-system/components/detail-list",{"title":2469,"_path":2470,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":2472,"_path":2473,"layout":13},"File","/design-system/components/file",{"title":2475,"_path":2476,"layout":13},"Footer","/design-system/components/footer",{"title":2478,"_path":2479,"layout":13},"Form","/design-system/components/form",{"title":2481,"_path":2482,"layout":13},"Form alert","/design-system/components/form-alert",{"title":2484,"_path":2485,"layout":13},"Header","/design-system/components/header",{"title":2487,"_path":2488,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":2490,"_path":2491,"layout":13},"Input field","/design-system/components/input-field",{"title":2493,"_path":2494,"layout":13},"Key dates","/design-system/components/key-dates",{"title":2496,"_path":2497,"layout":13},"Media","/design-system/components/media",{"title":2499,"_path":2500,"layout":13},"Media embed","/design-system/components/media-embed",{"title":2502,"_path":2503,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":2505,"_path":2506,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":2508,"_path":2509,"layout":13},"Option button","/design-system/components/option-button",{"title":2511,"_path":2512,"layout":13},"Page action","/design-system/components/page-action",{"title":2514,"_path":2515,"layout":13},"Pagination","/design-system/components/pagination",{"title":2517,"_path":2518,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":2520,"_path":2521,"layout":13},"Profile","/design-system/components/profile",{"title":2523,"_path":2524,"layout":13},"Radio button","/design-system/components/radio-button",{"title":2526,"_path":2527,"layout":13},"Related links","/design-system/components/related-links",{"title":2529,"_path":2530,"layout":13},"Results listing","/design-system/components/results-listing",{"title":2532,"_path":2533,"layout":13},"Search bar","/design-system/components/search-bar",{"title":2535,"_path":2536,"layout":13},"Skip link","/design-system/components/skip-link",{"title":2538,"_path":2539,"layout":13},"Social share","/design-system/components/social-share",{"title":2541,"_path":2542,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":2544,"_path":2545,"layout":13},"Table","/design-system/components/table",{"title":2547,"_path":2548,"layout":13},"Tabs","/design-system/components/tabs",{"title":2550,"_path":2551,"layout":13},"Tag","/design-system/components/tag",{"title":2553,"_path":2554,"layout":13},"Text area","/design-system/components/text-area",{"title":2556,"_path":2557,"layout":13},"Timeline","/design-system/components/timeline",{"title":2559,"_path":2560,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":2562,"_path":2563,"children":2564,"layout":13},"Ripple Framework","/framework",[2565,2566,2583,2599],{"title":2562,"_path":2563,"layout":13},{"title":2567,"_path":2568,"children":2569},"Key Concepts","/framework/key-concepts",[2570,2572,2575,2578,2580],{"title":2371,"_path":2571,"layout":13},"/framework/key-concepts/nuxt",{"title":2573,"_path":2574,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":2576,"_path":2577,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":2579,"_path":32,"layout":13},"Content types",{"title":2581,"_path":2582,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":2584,"_path":2585,"children":2586},"Guides","/framework/guides",[2587,2590,2593,2594,2595,2596],{"title":2588,"_path":2589,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":2591,"_path":2592,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":2292,"_path":2291,"layout":13},{"title":11,"_path":7,"layout":13},{"title":2298,"_path":2297,"layout":13},{"title":2597,"_path":2598,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":2600,"_path":2601,"layout":13},"Core modules","/framework/core-modules",["Reactive",2603],["Set"],["Reactive",2605],{"module-navigation":2606},null,1714695649519]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/framework/guides/creating-new-layers/_payload.json b/framework/guides/creating-new-layers/_payload.json
index 78c6942e48..4a18dbe3a9 100644
--- a/framework/guides/creating-new-layers/_payload.json
+++ b/framework/guides/creating-new-layers/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,27,50],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",false,{"id":9,"text":10,"url":9,"active":7,"items":11},"/framework/key-concepts","Key Concepts",[12,15,18,21,24],{"id":13,"text":14,"url":13,"active":7,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":22,"text":23,"url":22,"active":7,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":25,"text":26,"url":25,"active":7,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":28,"text":29,"url":28,"active":30,"items":31},"/framework/guides","Guides",true,[32,35,38,41,44,47],{"id":33,"text":34,"url":33,"active":7,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":39,"text":40,"url":39,"active":7,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":42,"text":43,"url":42,"active":7,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":45,"text":46,"url":45,"active":30,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":48,"text":49,"url":48,"active":7,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":51,"text":52,"url":51,"active":7,"items":-1},"/framework/core-modules","Core modules",1714695151285]
\ No newline at end of file
+[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,27,50],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",false,{"id":9,"text":10,"url":9,"active":7,"items":11},"/framework/key-concepts","Key Concepts",[12,15,18,21,24],{"id":13,"text":14,"url":13,"active":7,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":22,"text":23,"url":22,"active":7,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":25,"text":26,"url":25,"active":7,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":28,"text":29,"url":28,"active":30,"items":31},"/framework/guides","Guides",true,[32,35,38,41,44,47],{"id":33,"text":34,"url":33,"active":7,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":39,"text":40,"url":39,"active":7,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":42,"text":43,"url":42,"active":7,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":45,"text":46,"url":45,"active":30,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":48,"text":49,"url":48,"active":7,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":51,"text":52,"url":51,"active":7,"items":-1},"/framework/core-modules","Core modules",1714695649524]
\ No newline at end of file
diff --git a/framework/guides/creating-new-layers/index.html b/framework/guides/creating-new-layers/index.html
index 4fb6967633..6c70c6321d 100644
--- a/framework/guides/creating-new-layers/index.html
+++ b/framework/guides/creating-new-layers/index.html
@@ -27,63 +27,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProsePre.1p0bzX0t.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCode.ggTmuEB2.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.uDpSgjM7.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.lp_k9Hpd.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProsePre.928ctTB_.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCode.Xz7xMLuq.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.iJ9KJvnk.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.Czpq-HHw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Nuxt</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/api-endpoints" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>API endpoints</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dynamic components</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/guides-toggle"><span class="rpl-vertical-nav__toggle-text">Guides</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/guides-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -101,8 +101,8 @@
 </span></span><span class="line" line="3"><span style="--shiki-default:#032F62">    &#39;date-fns&#39;</span><span style="--shiki-default:#24292E">: require.</span><span style="--shiki-default:#6F42C1">resolve</span><span style="--shiki-default:#24292E">(</span><span style="--shiki-default:#032F62">&#39;date-fns&#39;</span><span style="--shiki-default:#24292E">)
 </span></span><span class="line" line="4"><span style="--shiki-default:#24292E">  }
 </span></span><span class="line" line="5"><span style="--shiki-default:#24292E">})
-</span></span></code><!--]--></pre><!--]--></div><style>html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}</style><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/3.guides/5.creating-new-layers.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/guides/creating-new-layers/_payload.json">[{"state":1,"once":906,"_errors":908,"serverRendered":911,"path":7,"prerenderedAt":912},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":593,"$sdd-globals":609,"$sdd-navigation":611},["ShallowRef",4],["ShallowReactive",5],{"/framework/guides/creating-new-layers":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"links":14,"body":18,"_type":588,"_id":589,"_source":590,"_file":591,"_extension":592},"/framework/guides/creating-new-layers","guides",false,"","Creating new layers","Implementing custom functionality through layers","page",[15],{"text":16,"url":17},"Nuxt layers documentation","https://nuxt.com/docs/getting-started/layers",{"type":19,"children":20,"toc":580},"root",[21,38,45,50,60,81,87,92,119,163,178,199,204,265,271,311,317,337,431,436,452,459,472,492,574],{"type":22,"tag":23,"props":24,"children":25},"element","p",{},[26,29,36],{"type":27,"value":28},"text","Nuxt layers are used to encapsulate Ripple functionality, so it can easily be shared and reused across projects, see ",{"type":22,"tag":30,"props":31,"children":33},"a",{"href":32},"/framework/key-concepts/nuxt-layers",[34],{"type":27,"value":35},"key concepts - layers",{"type":27,"value":37}," for a conceptual overview of what layers are and how they are used within Ripple.",{"type":22,"tag":39,"props":40,"children":42},"h2",{"id":41},"creating-a-new-layer",[43],{"type":27,"value":44},"Creating a new layer",{"type":22,"tag":23,"props":46,"children":47},{},[48],{"type":27,"value":49},"The Nuxt Ripple CLI provides a simple way to initialise new layers, to create a new layer just run the following command:",{"type":22,"tag":51,"props":52,"children":54},"pre",{"code":53},"npx @dpc-sdp/nuxt-ripple-cli init layer [DIRECTORY] --name {NAME}\n",[55],{"type":22,"tag":56,"props":57,"children":58},"code",{"__ignoreMap":10},[59],{"type":27,"value":53},{"type":22,"tag":23,"props":61,"children":62},{},[63,65,71,73,79],{"type":27,"value":64},"Where ",{"type":22,"tag":56,"props":66,"children":68},{"className":67},[],[69],{"type":27,"value":70},"[DIRECTORY]",{"type":27,"value":72}," is the location to output the layer scaffolding and ",{"type":22,"tag":56,"props":74,"children":76},{"className":75},[],[77],{"type":27,"value":78},"{NAME}",{"type":27,"value":80}," is the name of the new layer. This command will scaffold everything you need to get started developing a new layer.",{"type":22,"tag":39,"props":82,"children":84},{"id":83},"developing-the-layer",[85],{"type":27,"value":86},"Developing the layer",{"type":22,"tag":23,"props":88,"children":89},{},[90],{"type":27,"value":91},"Once the layer has been created you can start working with it by running the command below from the new layers directory. This will start a development server and allow you to start working on the layer.",{"type":22,"tag":51,"props":93,"children":97},{"code":94,"language":95,"meta":10,"className":96,"style":10},"npm run dev\n","bash","language-bash shiki shiki-themes github-light",[98],{"type":22,"tag":56,"props":99,"children":100},{"__ignoreMap":10},[101],{"type":22,"tag":102,"props":103,"children":106},"span",{"class":104,"line":105},"line",1,[107,113],{"type":22,"tag":102,"props":108,"children":110},{"style":109},"--shiki-default:#6F42C1",[111],{"type":27,"value":112},"npm",{"type":22,"tag":102,"props":114,"children":116},{"style":115},"--shiki-default:#032F62",[117],{"type":27,"value":118}," run dev\n",{"type":22,"tag":23,"props":120,"children":121},{},[122,124,130,132,138,140,146,148,154,156,161],{"type":27,"value":123},"The ",{"type":22,"tag":56,"props":125,"children":127},{"className":126},[],[128],{"type":27,"value":129},"playground",{"type":27,"value":131}," folder contains the essentials to get a test Nuxt application up and running, it includes a ",{"type":22,"tag":56,"props":133,"children":135},{"className":134},[],[136],{"type":27,"value":137},"app.config.js",{"type":27,"value":139},", ",{"type":22,"tag":56,"props":141,"children":143},{"className":142},[],[144],{"type":27,"value":145},"nuxt.config.js",{"type":27,"value":147}," and ",{"type":22,"tag":56,"props":149,"children":151},{"className":150},[],[152],{"type":27,"value":153},".env",{"type":27,"value":155}," file. The ",{"type":22,"tag":56,"props":157,"children":159},{"className":158},[],[160],{"type":27,"value":145},{"type":27,"value":162}," includes a core set of layers used by Ripple to get a reference sdp site up and running, it also includes the new layer itself.",{"type":22,"tag":164,"props":165,"children":166},"blockquote",{},[167],{"type":22,"tag":23,"props":168,"children":169},{},[170,171,176],{"type":27,"value":123},{"type":22,"tag":56,"props":172,"children":174},{"className":173},[],[175],{"type":27,"value":129},{"type":27,"value":177}," folder is a fully functional Nuxt application and can be used to test the new layer in isolation.",{"type":22,"tag":23,"props":179,"children":180},{},[181,183,189,191,197],{"type":27,"value":182},"The layers structure is almost identical to a normal Nuxt app, meaning you can utilise the same features and conventions as a standard Nuxt application. i.e. create a ",{"type":22,"tag":56,"props":184,"children":186},{"className":185},[],[187],{"type":27,"value":188},"pages",{"type":27,"value":190}," folder for new pages, create a ",{"type":22,"tag":56,"props":192,"children":194},{"className":193},[],[195],{"type":27,"value":196},"components",{"type":27,"value":198}," folder for new components, etc.",{"type":22,"tag":23,"props":200,"children":201},{},[202],{"type":27,"value":203},"Other useful commands:",{"type":22,"tag":205,"props":206,"children":207},"ul",{},[208,228,247],{"type":22,"tag":209,"props":210,"children":211},"li",{},[212,218,220,226],{"type":22,"tag":56,"props":213,"children":215},{"className":214},[],[216],{"type":27,"value":217},"npm run build",{"type":27,"value":219}," to do a production build of the ",{"type":22,"tag":56,"props":221,"children":223},{"className":222},[],[224],{"type":27,"value":225},".preview",{"type":27,"value":227}," application (for testing purposes)",{"type":22,"tag":209,"props":229,"children":230},{},[231,237,239],{"type":22,"tag":56,"props":232,"children":234},{"className":233},[],[235],{"type":27,"value":236},"npm run lint",{"type":27,"value":238}," to lint the layer code with ",{"type":22,"tag":30,"props":240,"children":244},{"href":241,"rel":242},"https://eslint.org/",[243],"nofollow",[245],{"type":27,"value":246},"eslint",{"type":22,"tag":209,"props":248,"children":249},{},[250,256,258],{"type":22,"tag":56,"props":251,"children":253},{"className":252},[],[254],{"type":27,"value":255},"npm run test",{"type":27,"value":257}," to run any unit tests with ",{"type":22,"tag":30,"props":259,"children":262},{"href":260,"rel":261},"https://jestjs.io/",[243],[263],{"type":27,"value":264},"jest",{"type":22,"tag":39,"props":266,"children":268},{"id":267},"publishing-the-layer",[269],{"type":27,"value":270},"Publishing the layer",{"type":22,"tag":23,"props":272,"children":273},{},[274,276,283,284,291,293,300,302,309],{"type":27,"value":275},"Once the layer is ready to be published it can be published to npm or pushed to a remote git repository, ",{"type":22,"tag":30,"props":277,"children":280},{"href":278,"rel":279},"https://github.com/",[243],[281],{"type":27,"value":282},"GitHub",{"type":27,"value":139},{"type":22,"tag":30,"props":285,"children":288},{"href":286,"rel":287},"https://about.gitlab.com/",[243],[289],{"type":27,"value":290},"GitLab",{"type":27,"value":292},", and ",{"type":22,"tag":30,"props":294,"children":297},{"href":295,"rel":296},"https://bitbucket.org/",[243],[298],{"type":27,"value":299},"Bitbucket",{"type":27,"value":301}," are supported.\nFor more on publishing to npm see ",{"type":22,"tag":30,"props":303,"children":306},{"href":304,"rel":305},"https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry",[243],[307],{"type":27,"value":308},"contributing packages to the npm registry",{"type":27,"value":310},".",{"type":22,"tag":39,"props":312,"children":314},{"id":313},"using-the-layer",[315],{"type":27,"value":316},"Using the layer",{"type":22,"tag":23,"props":318,"children":319},{},[320,322,327,329,335],{"type":27,"value":321},"Nuxt layers can be added to any Nuxt site by including the layer in the ",{"type":22,"tag":56,"props":323,"children":325},{"className":324},[],[326],{"type":27,"value":145},{"type":27,"value":328}," file under extends. If the layer is published to npm don't forget to ",{"type":22,"tag":56,"props":330,"children":332},{"className":331},[],[333],{"type":27,"value":334},"npm install",{"type":27,"value":336}," it first.",{"type":22,"tag":51,"props":338,"children":342},{"code":339,"language":340,"meta":10,"className":341,"style":10},"export default defineNuxtConfig({\n  extends: [\n    '@dpc-sdp/nuxt-ripple', // An npm installed package\n    'github:dpc-sdp/ripple-vic-gov-au-custom#1.0.0' // A tagged git repository\n  ]\n})\n","js","language-js shiki shiki-themes github-light",[343],{"type":22,"tag":56,"props":344,"children":345},{"__ignoreMap":10},[346,371,380,399,413,422],{"type":22,"tag":102,"props":347,"children":348},{"class":104,"line":105},[349,355,360,365],{"type":22,"tag":102,"props":350,"children":352},{"style":351},"--shiki-default:#D73A49",[353],{"type":27,"value":354},"export",{"type":22,"tag":102,"props":356,"children":357},{"style":351},[358],{"type":27,"value":359}," default",{"type":22,"tag":102,"props":361,"children":362},{"style":109},[363],{"type":27,"value":364}," defineNuxtConfig",{"type":22,"tag":102,"props":366,"children":368},{"style":367},"--shiki-default:#24292E",[369],{"type":27,"value":370},"({\n",{"type":22,"tag":102,"props":372,"children":374},{"class":104,"line":373},2,[375],{"type":22,"tag":102,"props":376,"children":377},{"style":367},[378],{"type":27,"value":379},"  extends: [\n",{"type":22,"tag":102,"props":381,"children":383},{"class":104,"line":382},3,[384,389,393],{"type":22,"tag":102,"props":385,"children":386},{"style":115},[387],{"type":27,"value":388},"    '@dpc-sdp/nuxt-ripple'",{"type":22,"tag":102,"props":390,"children":391},{"style":367},[392],{"type":27,"value":139},{"type":22,"tag":102,"props":394,"children":396},{"style":395},"--shiki-default:#6A737D",[397],{"type":27,"value":398},"// An npm installed package\n",{"type":22,"tag":102,"props":400,"children":402},{"class":104,"line":401},4,[403,408],{"type":22,"tag":102,"props":404,"children":405},{"style":115},[406],{"type":27,"value":407},"    'github:dpc-sdp/ripple-vic-gov-au-custom#1.0.0'",{"type":22,"tag":102,"props":409,"children":410},{"style":395},[411],{"type":27,"value":412}," // A tagged git repository\n",{"type":22,"tag":102,"props":414,"children":416},{"class":104,"line":415},5,[417],{"type":22,"tag":102,"props":418,"children":419},{"style":367},[420],{"type":27,"value":421},"  ]\n",{"type":22,"tag":102,"props":423,"children":425},{"class":104,"line":424},6,[426],{"type":22,"tag":102,"props":427,"children":428},{"style":367},[429],{"type":27,"value":430},"})\n",{"type":22,"tag":23,"props":432,"children":433},{},[434],{"type":27,"value":435},"Also, make sure to check the layers documentation for any additional configuration that may be required.",{"type":22,"tag":164,"props":437,"children":438},{},[439],{"type":22,"tag":23,"props":440,"children":441},{},[442,444,450],{"type":27,"value":443},"To extend from a private repository, you need to add a ",{"type":22,"tag":56,"props":445,"children":447},{"className":446},[],[448],{"type":27,"value":449},"GIGET_AUTH=\u003Ctoken>",{"type":27,"value":451}," environment variable, with an auth token from your git provider.",{"type":22,"tag":453,"props":454,"children":456},"h3",{"id":455},"caveats-when-using-layers-from-a-git-repository",[457],{"type":27,"value":458},"Caveats when using layers from a git repository",{"type":22,"tag":23,"props":460,"children":461},{},[462,464,471],{"type":27,"value":463},"If a layer is added via a git repository and that layer has npm dependencies, you will need to manually install them within the Nuxt application utilising the layer. The Nuxt team are looking at auto-installing layer dependencies in the future, see ",{"type":22,"tag":30,"props":465,"children":468},{"href":466,"rel":467},"https://github.com/nuxt/nuxt/issues/13367",[243],[469],{"type":27,"value":470},"issue #13367",{"type":27,"value":310},{"type":22,"tag":23,"props":473,"children":474},{},[475,477,483,485,490],{"type":27,"value":476},"You will also need to alias the dependencies in the Nuxt application, so they can be resolved to the correct package location. This can be done by adding an ",{"type":22,"tag":56,"props":478,"children":480},{"className":479},[],[481],{"type":27,"value":482},"alias",{"type":27,"value":484}," object to the ",{"type":22,"tag":56,"props":486,"children":488},{"className":487},[],[489],{"type":27,"value":145},{"type":27,"value":491}," file.",{"type":22,"tag":51,"props":493,"children":495},{"code":494,"language":340,"meta":10,"className":341,"style":10},"export default defineNuxtConfig({\n  alias: {\n    'date-fns': require.resolve('date-fns')\n  }\n})\n",[496],{"type":22,"tag":56,"props":497,"children":498},{"__ignoreMap":10},[499,518,526,559,567],{"type":22,"tag":102,"props":500,"children":501},{"class":104,"line":105},[502,506,510,514],{"type":22,"tag":102,"props":503,"children":504},{"style":351},[505],{"type":27,"value":354},{"type":22,"tag":102,"props":507,"children":508},{"style":351},[509],{"type":27,"value":359},{"type":22,"tag":102,"props":511,"children":512},{"style":109},[513],{"type":27,"value":364},{"type":22,"tag":102,"props":515,"children":516},{"style":367},[517],{"type":27,"value":370},{"type":22,"tag":102,"props":519,"children":520},{"class":104,"line":373},[521],{"type":22,"tag":102,"props":522,"children":523},{"style":367},[524],{"type":27,"value":525},"  alias: {\n",{"type":22,"tag":102,"props":527,"children":528},{"class":104,"line":382},[529,534,539,544,549,554],{"type":22,"tag":102,"props":530,"children":531},{"style":115},[532],{"type":27,"value":533},"    'date-fns'",{"type":22,"tag":102,"props":535,"children":536},{"style":367},[537],{"type":27,"value":538},": require.",{"type":22,"tag":102,"props":540,"children":541},{"style":109},[542],{"type":27,"value":543},"resolve",{"type":22,"tag":102,"props":545,"children":546},{"style":367},[547],{"type":27,"value":548},"(",{"type":22,"tag":102,"props":550,"children":551},{"style":115},[552],{"type":27,"value":553},"'date-fns'",{"type":22,"tag":102,"props":555,"children":556},{"style":367},[557],{"type":27,"value":558},")\n",{"type":22,"tag":102,"props":560,"children":561},{"class":104,"line":401},[562],{"type":22,"tag":102,"props":563,"children":564},{"style":367},[565],{"type":27,"value":566},"  }\n",{"type":22,"tag":102,"props":568,"children":569},{"class":104,"line":415},[570],{"type":22,"tag":102,"props":571,"children":572},{"style":367},[573],{"type":27,"value":430},{"type":22,"tag":575,"props":576,"children":577},"style",{},[578],{"type":27,"value":579},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":10,"searchDepth":373,"depth":373,"links":581},[582,583,584,585],{"id":41,"depth":373,"text":44},{"id":83,"depth":373,"text":86},{"id":267,"depth":373,"text":270},{"id":313,"depth":373,"text":316,"children":586},[587],{"id":455,"depth":382,"text":458},"markdown","content:framework:3.guides:5.creating-new-layers.md","content","framework/3.guides/5.creating-new-layers.md","md",["ShallowRef",594],["ShallowReactive",595],{"/framework/guides/creating-new-layers":596},[597,603],{"_path":598,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":599,"description":600,"layout":13,"_type":588,"_id":601,"_source":590,"_file":602,"_extension":592},"/framework/guides/creating-content-types","Creating content types","How to create new content types for the SDP platform","content:framework:3.guides:4.creating-content-types.md","framework/3.guides/4.creating-content-types.md",{"_path":604,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":605,"description":606,"layout":13,"_type":588,"_id":607,"_source":590,"_file":608,"_extension":592},"/framework/guides/dynamic-components","Adding a new dynamic component","Learn how to add a new dynamic page component to a content type","content:framework:3.guides:5.dynamic-components.md","framework/3.guides/5.dynamic-components.md",["ShallowRef",610],{},[612,617,865],{"title":613,"_path":614,"icon":615,"layout":616},"Ripple Design System","/","carbon:home","home",{"title":618,"_path":619,"children":620},"Design System","/design-system",[621,637,653,683,717],{"title":622,"_path":623,"children":624},"About","/design-system/about",[625,628,631,634],{"title":626,"_path":627,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":629,"_path":630,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":632,"_path":633,"layout":13},"Support","/design-system/about/getting-support",{"title":635,"_path":636,"layout":13},"Contributing","/design-system/about/contributing",{"title":638,"_path":639,"children":640},"Design","/design-system/design",[641,644,647,650],{"title":642,"_path":643,"layout":13},"Getting started","/design-system/design/getting-started",{"title":645,"_path":646,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":648,"_path":649,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":651,"_path":652,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":654,"_path":655,"children":656},"Develop","/design-system/develop",[657,659,661,664],{"title":642,"_path":658,"layout":13},"/design-system/develop/getting-started",{"title":635,"_path":660,"layout":13},"/design-system/develop/contributing",{"title":662,"_path":663,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":665,"_path":666,"children":667,"layout":13},"Usage","/design-system/develop/usage",[668,671,674,677,680],{"title":669,"_path":670,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":672,"_path":673,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":675,"_path":676,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":678,"_path":679,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":681,"_path":682,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":684,"_path":685,"children":686},"Styles","/design-system/styles",[687,690,693,696,699,702,705,708,711,714],{"title":688,"_path":689,"layout":13},"Colour","/design-system/styles/colour",{"title":691,"_path":692,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":694,"_path":695,"layout":13},"Grid","/design-system/styles/grid",{"title":697,"_path":698,"layout":13},"Icons","/design-system/styles/icons",{"title":700,"_path":701,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":703,"_path":704,"layout":13},"Layout","/design-system/styles/layout",{"title":706,"_path":707,"layout":13},"Logo","/design-system/styles/logo",{"title":709,"_path":710,"layout":13},"Motion","/design-system/styles/motion",{"title":712,"_path":713,"layout":13},"Spacing","/design-system/styles/spacing",{"title":715,"_path":716,"layout":13},"Typography","/design-system/styles/typography",{"title":718,"_path":719,"children":720},"Components","/design-system/components",[721,724,727,730,733,736,739,742,745,748,751,754,757,760,763,766,769,772,775,778,781,784,787,790,793,796,799,802,805,808,811,814,817,820,823,826,829,832,835,838,841,844,847,850,853,856,859,862],{"title":722,"_path":723,"layout":13},"Accordion","/design-system/components/accordion",{"title":725,"_path":726,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":728,"_path":729,"layout":13},"Alert","/design-system/components/alert",{"title":731,"_path":732,"layout":13},"Block quote","/design-system/components/block-quote",{"title":734,"_path":735,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":737,"_path":738,"layout":13},"Button","/design-system/components/button",{"title":740,"_path":741,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":743,"_path":744,"layout":13},"Callout","/design-system/components/callout",{"title":746,"_path":747,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":749,"_path":750,"layout":13},"Card","/design-system/components/card",{"title":752,"_path":753,"layout":13},"Carousel","/design-system/components/carousel",{"title":755,"_path":756,"layout":13},"Category grid","/design-system/components/category-grid",{"title":758,"_path":759,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":761,"_path":762,"layout":13},"Chip","/design-system/components/chip",{"title":764,"_path":765,"layout":13},"Contact us","/design-system/components/contact-us",{"title":767,"_path":768,"layout":13},"Date input","/design-system/components/date-input",{"title":770,"_path":771,"layout":13},"Detail list","/design-system/components/detail-list",{"title":773,"_path":774,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":776,"_path":777,"layout":13},"File","/design-system/components/file",{"title":779,"_path":780,"layout":13},"Footer","/design-system/components/footer",{"title":782,"_path":783,"layout":13},"Form","/design-system/components/form",{"title":785,"_path":786,"layout":13},"Form alert","/design-system/components/form-alert",{"title":788,"_path":789,"layout":13},"Header","/design-system/components/header",{"title":791,"_path":792,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":794,"_path":795,"layout":13},"Input field","/design-system/components/input-field",{"title":797,"_path":798,"layout":13},"Key dates","/design-system/components/key-dates",{"title":800,"_path":801,"layout":13},"Media","/design-system/components/media",{"title":803,"_path":804,"layout":13},"Media embed","/design-system/components/media-embed",{"title":806,"_path":807,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":809,"_path":810,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":812,"_path":813,"layout":13},"Option button","/design-system/components/option-button",{"title":815,"_path":816,"layout":13},"Page action","/design-system/components/page-action",{"title":818,"_path":819,"layout":13},"Pagination","/design-system/components/pagination",{"title":821,"_path":822,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":824,"_path":825,"layout":13},"Profile","/design-system/components/profile",{"title":827,"_path":828,"layout":13},"Radio button","/design-system/components/radio-button",{"title":830,"_path":831,"layout":13},"Related links","/design-system/components/related-links",{"title":833,"_path":834,"layout":13},"Results listing","/design-system/components/results-listing",{"title":836,"_path":837,"layout":13},"Search bar","/design-system/components/search-bar",{"title":839,"_path":840,"layout":13},"Skip link","/design-system/components/skip-link",{"title":842,"_path":843,"layout":13},"Social share","/design-system/components/social-share",{"title":845,"_path":846,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":848,"_path":849,"layout":13},"Table","/design-system/components/table",{"title":851,"_path":852,"layout":13},"Tabs","/design-system/components/tabs",{"title":854,"_path":855,"layout":13},"Tag","/design-system/components/tag",{"title":857,"_path":858,"layout":13},"Text area","/design-system/components/text-area",{"title":860,"_path":861,"layout":13},"Timeline","/design-system/components/timeline",{"title":863,"_path":864,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":866,"_path":867,"children":868,"layout":13},"Ripple Framework","/framework",[869,870,887,903],{"title":866,"_path":867,"layout":13},{"title":871,"_path":872,"children":873},"Key Concepts","/framework/key-concepts",[874,876,878,881,884],{"title":675,"_path":875,"layout":13},"/framework/key-concepts/nuxt",{"title":877,"_path":32,"layout":13},"Layers",{"title":879,"_path":880,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":882,"_path":883,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":885,"_path":886,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":888,"_path":889,"children":890},"Guides","/framework/guides",[891,894,897,900,901,902],{"title":892,"_path":893,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":895,"_path":896,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":898,"_path":899,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":599,"_path":598,"layout":13},{"title":11,"_path":7,"layout":13},{"title":605,"_path":604,"layout":13},{"title":904,"_path":905,"layout":13},"Core modules","/framework/core-modules",["Reactive",907],["Set"],["Reactive",909],{"module-navigation":910},null,true,1714695151285]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+</span></span></code><!--]--></pre><!--]--></div><style>html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}</style><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/3.guides/5.creating-new-layers.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/guides/creating-new-layers/_payload.json">[{"state":1,"once":906,"_errors":908,"serverRendered":911,"path":7,"prerenderedAt":912},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":593,"$sdd-globals":609,"$sdd-navigation":611},["ShallowRef",4],["ShallowReactive",5],{"/framework/guides/creating-new-layers":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"links":14,"body":18,"_type":588,"_id":589,"_source":590,"_file":591,"_extension":592},"/framework/guides/creating-new-layers","guides",false,"","Creating new layers","Implementing custom functionality through layers","page",[15],{"text":16,"url":17},"Nuxt layers documentation","https://nuxt.com/docs/getting-started/layers",{"type":19,"children":20,"toc":580},"root",[21,38,45,50,60,81,87,92,119,163,178,199,204,265,271,311,317,337,431,436,452,459,472,492,574],{"type":22,"tag":23,"props":24,"children":25},"element","p",{},[26,29,36],{"type":27,"value":28},"text","Nuxt layers are used to encapsulate Ripple functionality, so it can easily be shared and reused across projects, see ",{"type":22,"tag":30,"props":31,"children":33},"a",{"href":32},"/framework/key-concepts/nuxt-layers",[34],{"type":27,"value":35},"key concepts - layers",{"type":27,"value":37}," for a conceptual overview of what layers are and how they are used within Ripple.",{"type":22,"tag":39,"props":40,"children":42},"h2",{"id":41},"creating-a-new-layer",[43],{"type":27,"value":44},"Creating a new layer",{"type":22,"tag":23,"props":46,"children":47},{},[48],{"type":27,"value":49},"The Nuxt Ripple CLI provides a simple way to initialise new layers, to create a new layer just run the following command:",{"type":22,"tag":51,"props":52,"children":54},"pre",{"code":53},"npx @dpc-sdp/nuxt-ripple-cli init layer [DIRECTORY] --name {NAME}\n",[55],{"type":22,"tag":56,"props":57,"children":58},"code",{"__ignoreMap":10},[59],{"type":27,"value":53},{"type":22,"tag":23,"props":61,"children":62},{},[63,65,71,73,79],{"type":27,"value":64},"Where ",{"type":22,"tag":56,"props":66,"children":68},{"className":67},[],[69],{"type":27,"value":70},"[DIRECTORY]",{"type":27,"value":72}," is the location to output the layer scaffolding and ",{"type":22,"tag":56,"props":74,"children":76},{"className":75},[],[77],{"type":27,"value":78},"{NAME}",{"type":27,"value":80}," is the name of the new layer. This command will scaffold everything you need to get started developing a new layer.",{"type":22,"tag":39,"props":82,"children":84},{"id":83},"developing-the-layer",[85],{"type":27,"value":86},"Developing the layer",{"type":22,"tag":23,"props":88,"children":89},{},[90],{"type":27,"value":91},"Once the layer has been created you can start working with it by running the command below from the new layers directory. This will start a development server and allow you to start working on the layer.",{"type":22,"tag":51,"props":93,"children":97},{"code":94,"language":95,"meta":10,"className":96,"style":10},"npm run dev\n","bash","language-bash shiki shiki-themes github-light",[98],{"type":22,"tag":56,"props":99,"children":100},{"__ignoreMap":10},[101],{"type":22,"tag":102,"props":103,"children":106},"span",{"class":104,"line":105},"line",1,[107,113],{"type":22,"tag":102,"props":108,"children":110},{"style":109},"--shiki-default:#6F42C1",[111],{"type":27,"value":112},"npm",{"type":22,"tag":102,"props":114,"children":116},{"style":115},"--shiki-default:#032F62",[117],{"type":27,"value":118}," run dev\n",{"type":22,"tag":23,"props":120,"children":121},{},[122,124,130,132,138,140,146,148,154,156,161],{"type":27,"value":123},"The ",{"type":22,"tag":56,"props":125,"children":127},{"className":126},[],[128],{"type":27,"value":129},"playground",{"type":27,"value":131}," folder contains the essentials to get a test Nuxt application up and running, it includes a ",{"type":22,"tag":56,"props":133,"children":135},{"className":134},[],[136],{"type":27,"value":137},"app.config.js",{"type":27,"value":139},", ",{"type":22,"tag":56,"props":141,"children":143},{"className":142},[],[144],{"type":27,"value":145},"nuxt.config.js",{"type":27,"value":147}," and ",{"type":22,"tag":56,"props":149,"children":151},{"className":150},[],[152],{"type":27,"value":153},".env",{"type":27,"value":155}," file. The ",{"type":22,"tag":56,"props":157,"children":159},{"className":158},[],[160],{"type":27,"value":145},{"type":27,"value":162}," includes a core set of layers used by Ripple to get a reference sdp site up and running, it also includes the new layer itself.",{"type":22,"tag":164,"props":165,"children":166},"blockquote",{},[167],{"type":22,"tag":23,"props":168,"children":169},{},[170,171,176],{"type":27,"value":123},{"type":22,"tag":56,"props":172,"children":174},{"className":173},[],[175],{"type":27,"value":129},{"type":27,"value":177}," folder is a fully functional Nuxt application and can be used to test the new layer in isolation.",{"type":22,"tag":23,"props":179,"children":180},{},[181,183,189,191,197],{"type":27,"value":182},"The layers structure is almost identical to a normal Nuxt app, meaning you can utilise the same features and conventions as a standard Nuxt application. i.e. create a ",{"type":22,"tag":56,"props":184,"children":186},{"className":185},[],[187],{"type":27,"value":188},"pages",{"type":27,"value":190}," folder for new pages, create a ",{"type":22,"tag":56,"props":192,"children":194},{"className":193},[],[195],{"type":27,"value":196},"components",{"type":27,"value":198}," folder for new components, etc.",{"type":22,"tag":23,"props":200,"children":201},{},[202],{"type":27,"value":203},"Other useful commands:",{"type":22,"tag":205,"props":206,"children":207},"ul",{},[208,228,247],{"type":22,"tag":209,"props":210,"children":211},"li",{},[212,218,220,226],{"type":22,"tag":56,"props":213,"children":215},{"className":214},[],[216],{"type":27,"value":217},"npm run build",{"type":27,"value":219}," to do a production build of the ",{"type":22,"tag":56,"props":221,"children":223},{"className":222},[],[224],{"type":27,"value":225},".preview",{"type":27,"value":227}," application (for testing purposes)",{"type":22,"tag":209,"props":229,"children":230},{},[231,237,239],{"type":22,"tag":56,"props":232,"children":234},{"className":233},[],[235],{"type":27,"value":236},"npm run lint",{"type":27,"value":238}," to lint the layer code with ",{"type":22,"tag":30,"props":240,"children":244},{"href":241,"rel":242},"https://eslint.org/",[243],"nofollow",[245],{"type":27,"value":246},"eslint",{"type":22,"tag":209,"props":248,"children":249},{},[250,256,258],{"type":22,"tag":56,"props":251,"children":253},{"className":252},[],[254],{"type":27,"value":255},"npm run test",{"type":27,"value":257}," to run any unit tests with ",{"type":22,"tag":30,"props":259,"children":262},{"href":260,"rel":261},"https://jestjs.io/",[243],[263],{"type":27,"value":264},"jest",{"type":22,"tag":39,"props":266,"children":268},{"id":267},"publishing-the-layer",[269],{"type":27,"value":270},"Publishing the layer",{"type":22,"tag":23,"props":272,"children":273},{},[274,276,283,284,291,293,300,302,309],{"type":27,"value":275},"Once the layer is ready to be published it can be published to npm or pushed to a remote git repository, ",{"type":22,"tag":30,"props":277,"children":280},{"href":278,"rel":279},"https://github.com/",[243],[281],{"type":27,"value":282},"GitHub",{"type":27,"value":139},{"type":22,"tag":30,"props":285,"children":288},{"href":286,"rel":287},"https://about.gitlab.com/",[243],[289],{"type":27,"value":290},"GitLab",{"type":27,"value":292},", and ",{"type":22,"tag":30,"props":294,"children":297},{"href":295,"rel":296},"https://bitbucket.org/",[243],[298],{"type":27,"value":299},"Bitbucket",{"type":27,"value":301}," are supported.\nFor more on publishing to npm see ",{"type":22,"tag":30,"props":303,"children":306},{"href":304,"rel":305},"https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry",[243],[307],{"type":27,"value":308},"contributing packages to the npm registry",{"type":27,"value":310},".",{"type":22,"tag":39,"props":312,"children":314},{"id":313},"using-the-layer",[315],{"type":27,"value":316},"Using the layer",{"type":22,"tag":23,"props":318,"children":319},{},[320,322,327,329,335],{"type":27,"value":321},"Nuxt layers can be added to any Nuxt site by including the layer in the ",{"type":22,"tag":56,"props":323,"children":325},{"className":324},[],[326],{"type":27,"value":145},{"type":27,"value":328}," file under extends. If the layer is published to npm don't forget to ",{"type":22,"tag":56,"props":330,"children":332},{"className":331},[],[333],{"type":27,"value":334},"npm install",{"type":27,"value":336}," it first.",{"type":22,"tag":51,"props":338,"children":342},{"code":339,"language":340,"meta":10,"className":341,"style":10},"export default defineNuxtConfig({\n  extends: [\n    '@dpc-sdp/nuxt-ripple', // An npm installed package\n    'github:dpc-sdp/ripple-vic-gov-au-custom#1.0.0' // A tagged git repository\n  ]\n})\n","js","language-js shiki shiki-themes github-light",[343],{"type":22,"tag":56,"props":344,"children":345},{"__ignoreMap":10},[346,371,380,399,413,422],{"type":22,"tag":102,"props":347,"children":348},{"class":104,"line":105},[349,355,360,365],{"type":22,"tag":102,"props":350,"children":352},{"style":351},"--shiki-default:#D73A49",[353],{"type":27,"value":354},"export",{"type":22,"tag":102,"props":356,"children":357},{"style":351},[358],{"type":27,"value":359}," default",{"type":22,"tag":102,"props":361,"children":362},{"style":109},[363],{"type":27,"value":364}," defineNuxtConfig",{"type":22,"tag":102,"props":366,"children":368},{"style":367},"--shiki-default:#24292E",[369],{"type":27,"value":370},"({\n",{"type":22,"tag":102,"props":372,"children":374},{"class":104,"line":373},2,[375],{"type":22,"tag":102,"props":376,"children":377},{"style":367},[378],{"type":27,"value":379},"  extends: [\n",{"type":22,"tag":102,"props":381,"children":383},{"class":104,"line":382},3,[384,389,393],{"type":22,"tag":102,"props":385,"children":386},{"style":115},[387],{"type":27,"value":388},"    '@dpc-sdp/nuxt-ripple'",{"type":22,"tag":102,"props":390,"children":391},{"style":367},[392],{"type":27,"value":139},{"type":22,"tag":102,"props":394,"children":396},{"style":395},"--shiki-default:#6A737D",[397],{"type":27,"value":398},"// An npm installed package\n",{"type":22,"tag":102,"props":400,"children":402},{"class":104,"line":401},4,[403,408],{"type":22,"tag":102,"props":404,"children":405},{"style":115},[406],{"type":27,"value":407},"    'github:dpc-sdp/ripple-vic-gov-au-custom#1.0.0'",{"type":22,"tag":102,"props":409,"children":410},{"style":395},[411],{"type":27,"value":412}," // A tagged git repository\n",{"type":22,"tag":102,"props":414,"children":416},{"class":104,"line":415},5,[417],{"type":22,"tag":102,"props":418,"children":419},{"style":367},[420],{"type":27,"value":421},"  ]\n",{"type":22,"tag":102,"props":423,"children":425},{"class":104,"line":424},6,[426],{"type":22,"tag":102,"props":427,"children":428},{"style":367},[429],{"type":27,"value":430},"})\n",{"type":22,"tag":23,"props":432,"children":433},{},[434],{"type":27,"value":435},"Also, make sure to check the layers documentation for any additional configuration that may be required.",{"type":22,"tag":164,"props":437,"children":438},{},[439],{"type":22,"tag":23,"props":440,"children":441},{},[442,444,450],{"type":27,"value":443},"To extend from a private repository, you need to add a ",{"type":22,"tag":56,"props":445,"children":447},{"className":446},[],[448],{"type":27,"value":449},"GIGET_AUTH=\u003Ctoken>",{"type":27,"value":451}," environment variable, with an auth token from your git provider.",{"type":22,"tag":453,"props":454,"children":456},"h3",{"id":455},"caveats-when-using-layers-from-a-git-repository",[457],{"type":27,"value":458},"Caveats when using layers from a git repository",{"type":22,"tag":23,"props":460,"children":461},{},[462,464,471],{"type":27,"value":463},"If a layer is added via a git repository and that layer has npm dependencies, you will need to manually install them within the Nuxt application utilising the layer. The Nuxt team are looking at auto-installing layer dependencies in the future, see ",{"type":22,"tag":30,"props":465,"children":468},{"href":466,"rel":467},"https://github.com/nuxt/nuxt/issues/13367",[243],[469],{"type":27,"value":470},"issue #13367",{"type":27,"value":310},{"type":22,"tag":23,"props":473,"children":474},{},[475,477,483,485,490],{"type":27,"value":476},"You will also need to alias the dependencies in the Nuxt application, so they can be resolved to the correct package location. This can be done by adding an ",{"type":22,"tag":56,"props":478,"children":480},{"className":479},[],[481],{"type":27,"value":482},"alias",{"type":27,"value":484}," object to the ",{"type":22,"tag":56,"props":486,"children":488},{"className":487},[],[489],{"type":27,"value":145},{"type":27,"value":491}," file.",{"type":22,"tag":51,"props":493,"children":495},{"code":494,"language":340,"meta":10,"className":341,"style":10},"export default defineNuxtConfig({\n  alias: {\n    'date-fns': require.resolve('date-fns')\n  }\n})\n",[496],{"type":22,"tag":56,"props":497,"children":498},{"__ignoreMap":10},[499,518,526,559,567],{"type":22,"tag":102,"props":500,"children":501},{"class":104,"line":105},[502,506,510,514],{"type":22,"tag":102,"props":503,"children":504},{"style":351},[505],{"type":27,"value":354},{"type":22,"tag":102,"props":507,"children":508},{"style":351},[509],{"type":27,"value":359},{"type":22,"tag":102,"props":511,"children":512},{"style":109},[513],{"type":27,"value":364},{"type":22,"tag":102,"props":515,"children":516},{"style":367},[517],{"type":27,"value":370},{"type":22,"tag":102,"props":519,"children":520},{"class":104,"line":373},[521],{"type":22,"tag":102,"props":522,"children":523},{"style":367},[524],{"type":27,"value":525},"  alias: {\n",{"type":22,"tag":102,"props":527,"children":528},{"class":104,"line":382},[529,534,539,544,549,554],{"type":22,"tag":102,"props":530,"children":531},{"style":115},[532],{"type":27,"value":533},"    'date-fns'",{"type":22,"tag":102,"props":535,"children":536},{"style":367},[537],{"type":27,"value":538},": require.",{"type":22,"tag":102,"props":540,"children":541},{"style":109},[542],{"type":27,"value":543},"resolve",{"type":22,"tag":102,"props":545,"children":546},{"style":367},[547],{"type":27,"value":548},"(",{"type":22,"tag":102,"props":550,"children":551},{"style":115},[552],{"type":27,"value":553},"'date-fns'",{"type":22,"tag":102,"props":555,"children":556},{"style":367},[557],{"type":27,"value":558},")\n",{"type":22,"tag":102,"props":560,"children":561},{"class":104,"line":401},[562],{"type":22,"tag":102,"props":563,"children":564},{"style":367},[565],{"type":27,"value":566},"  }\n",{"type":22,"tag":102,"props":568,"children":569},{"class":104,"line":415},[570],{"type":22,"tag":102,"props":571,"children":572},{"style":367},[573],{"type":27,"value":430},{"type":22,"tag":575,"props":576,"children":577},"style",{},[578],{"type":27,"value":579},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":10,"searchDepth":373,"depth":373,"links":581},[582,583,584,585],{"id":41,"depth":373,"text":44},{"id":83,"depth":373,"text":86},{"id":267,"depth":373,"text":270},{"id":313,"depth":373,"text":316,"children":586},[587],{"id":455,"depth":382,"text":458},"markdown","content:framework:3.guides:5.creating-new-layers.md","content","framework/3.guides/5.creating-new-layers.md","md",["ShallowRef",594],["ShallowReactive",595],{"/framework/guides/creating-new-layers":596},[597,603],{"_path":598,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":599,"description":600,"layout":13,"_type":588,"_id":601,"_source":590,"_file":602,"_extension":592},"/framework/guides/creating-content-types","Creating content types","How to create new content types for the SDP platform","content:framework:3.guides:4.creating-content-types.md","framework/3.guides/4.creating-content-types.md",{"_path":604,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":605,"description":606,"layout":13,"_type":588,"_id":607,"_source":590,"_file":608,"_extension":592},"/framework/guides/dynamic-components","Adding a new dynamic component","Learn how to add a new dynamic page component to a content type","content:framework:3.guides:5.dynamic-components.md","framework/3.guides/5.dynamic-components.md",["ShallowRef",610],{},[612,617,865],{"title":613,"_path":614,"icon":615,"layout":616},"Ripple Design System","/","carbon:home","home",{"title":618,"_path":619,"children":620},"Design System","/design-system",[621,637,653,683,717],{"title":622,"_path":623,"children":624},"About","/design-system/about",[625,628,631,634],{"title":626,"_path":627,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":629,"_path":630,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":632,"_path":633,"layout":13},"Support","/design-system/about/getting-support",{"title":635,"_path":636,"layout":13},"Contributing","/design-system/about/contributing",{"title":638,"_path":639,"children":640},"Design","/design-system/design",[641,644,647,650],{"title":642,"_path":643,"layout":13},"Getting started","/design-system/design/getting-started",{"title":645,"_path":646,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":648,"_path":649,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":651,"_path":652,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":654,"_path":655,"children":656},"Develop","/design-system/develop",[657,659,661,664],{"title":642,"_path":658,"layout":13},"/design-system/develop/getting-started",{"title":635,"_path":660,"layout":13},"/design-system/develop/contributing",{"title":662,"_path":663,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":665,"_path":666,"children":667,"layout":13},"Usage","/design-system/develop/usage",[668,671,674,677,680],{"title":669,"_path":670,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":672,"_path":673,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":675,"_path":676,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":678,"_path":679,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":681,"_path":682,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":684,"_path":685,"children":686},"Styles","/design-system/styles",[687,690,693,696,699,702,705,708,711,714],{"title":688,"_path":689,"layout":13},"Colour","/design-system/styles/colour",{"title":691,"_path":692,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":694,"_path":695,"layout":13},"Grid","/design-system/styles/grid",{"title":697,"_path":698,"layout":13},"Icons","/design-system/styles/icons",{"title":700,"_path":701,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":703,"_path":704,"layout":13},"Layout","/design-system/styles/layout",{"title":706,"_path":707,"layout":13},"Logo","/design-system/styles/logo",{"title":709,"_path":710,"layout":13},"Motion","/design-system/styles/motion",{"title":712,"_path":713,"layout":13},"Spacing","/design-system/styles/spacing",{"title":715,"_path":716,"layout":13},"Typography","/design-system/styles/typography",{"title":718,"_path":719,"children":720},"Components","/design-system/components",[721,724,727,730,733,736,739,742,745,748,751,754,757,760,763,766,769,772,775,778,781,784,787,790,793,796,799,802,805,808,811,814,817,820,823,826,829,832,835,838,841,844,847,850,853,856,859,862],{"title":722,"_path":723,"layout":13},"Accordion","/design-system/components/accordion",{"title":725,"_path":726,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":728,"_path":729,"layout":13},"Alert","/design-system/components/alert",{"title":731,"_path":732,"layout":13},"Block quote","/design-system/components/block-quote",{"title":734,"_path":735,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":737,"_path":738,"layout":13},"Button","/design-system/components/button",{"title":740,"_path":741,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":743,"_path":744,"layout":13},"Callout","/design-system/components/callout",{"title":746,"_path":747,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":749,"_path":750,"layout":13},"Card","/design-system/components/card",{"title":752,"_path":753,"layout":13},"Carousel","/design-system/components/carousel",{"title":755,"_path":756,"layout":13},"Category grid","/design-system/components/category-grid",{"title":758,"_path":759,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":761,"_path":762,"layout":13},"Chip","/design-system/components/chip",{"title":764,"_path":765,"layout":13},"Contact us","/design-system/components/contact-us",{"title":767,"_path":768,"layout":13},"Date input","/design-system/components/date-input",{"title":770,"_path":771,"layout":13},"Detail list","/design-system/components/detail-list",{"title":773,"_path":774,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":776,"_path":777,"layout":13},"File","/design-system/components/file",{"title":779,"_path":780,"layout":13},"Footer","/design-system/components/footer",{"title":782,"_path":783,"layout":13},"Form","/design-system/components/form",{"title":785,"_path":786,"layout":13},"Form alert","/design-system/components/form-alert",{"title":788,"_path":789,"layout":13},"Header","/design-system/components/header",{"title":791,"_path":792,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":794,"_path":795,"layout":13},"Input field","/design-system/components/input-field",{"title":797,"_path":798,"layout":13},"Key dates","/design-system/components/key-dates",{"title":800,"_path":801,"layout":13},"Media","/design-system/components/media",{"title":803,"_path":804,"layout":13},"Media embed","/design-system/components/media-embed",{"title":806,"_path":807,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":809,"_path":810,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":812,"_path":813,"layout":13},"Option button","/design-system/components/option-button",{"title":815,"_path":816,"layout":13},"Page action","/design-system/components/page-action",{"title":818,"_path":819,"layout":13},"Pagination","/design-system/components/pagination",{"title":821,"_path":822,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":824,"_path":825,"layout":13},"Profile","/design-system/components/profile",{"title":827,"_path":828,"layout":13},"Radio button","/design-system/components/radio-button",{"title":830,"_path":831,"layout":13},"Related links","/design-system/components/related-links",{"title":833,"_path":834,"layout":13},"Results listing","/design-system/components/results-listing",{"title":836,"_path":837,"layout":13},"Search bar","/design-system/components/search-bar",{"title":839,"_path":840,"layout":13},"Skip link","/design-system/components/skip-link",{"title":842,"_path":843,"layout":13},"Social share","/design-system/components/social-share",{"title":845,"_path":846,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":848,"_path":849,"layout":13},"Table","/design-system/components/table",{"title":851,"_path":852,"layout":13},"Tabs","/design-system/components/tabs",{"title":854,"_path":855,"layout":13},"Tag","/design-system/components/tag",{"title":857,"_path":858,"layout":13},"Text area","/design-system/components/text-area",{"title":860,"_path":861,"layout":13},"Timeline","/design-system/components/timeline",{"title":863,"_path":864,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":866,"_path":867,"children":868,"layout":13},"Ripple Framework","/framework",[869,870,887,903],{"title":866,"_path":867,"layout":13},{"title":871,"_path":872,"children":873},"Key Concepts","/framework/key-concepts",[874,876,878,881,884],{"title":675,"_path":875,"layout":13},"/framework/key-concepts/nuxt",{"title":877,"_path":32,"layout":13},"Layers",{"title":879,"_path":880,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":882,"_path":883,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":885,"_path":886,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":888,"_path":889,"children":890},"Guides","/framework/guides",[891,894,897,900,901,902],{"title":892,"_path":893,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":895,"_path":896,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":898,"_path":899,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":599,"_path":598,"layout":13},{"title":11,"_path":7,"layout":13},{"title":605,"_path":604,"layout":13},{"title":904,"_path":905,"layout":13},"Core modules","/framework/core-modules",["Reactive",907],["Set"],["Reactive",909],{"module-navigation":910},null,true,1714695649524]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/framework/guides/dynamic-components/_payload.json b/framework/guides/dynamic-components/_payload.json
index 8b551930ee..2b7b277ded 100644
--- a/framework/guides/dynamic-components/_payload.json
+++ b/framework/guides/dynamic-components/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,27,50],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",false,{"id":9,"text":10,"url":9,"active":7,"items":11},"/framework/key-concepts","Key Concepts",[12,15,18,21,24],{"id":13,"text":14,"url":13,"active":7,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":22,"text":23,"url":22,"active":7,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":25,"text":26,"url":25,"active":7,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":28,"text":29,"url":28,"active":30,"items":31},"/framework/guides","Guides",true,[32,35,38,41,44,47],{"id":33,"text":34,"url":33,"active":7,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":39,"text":40,"url":39,"active":7,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":42,"text":43,"url":42,"active":7,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":45,"text":46,"url":45,"active":7,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":48,"text":49,"url":48,"active":30,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":51,"text":52,"url":51,"active":7,"items":-1},"/framework/core-modules","Core modules",1714695151359]
\ No newline at end of file
+[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,27,50],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",false,{"id":9,"text":10,"url":9,"active":7,"items":11},"/framework/key-concepts","Key Concepts",[12,15,18,21,24],{"id":13,"text":14,"url":13,"active":7,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":22,"text":23,"url":22,"active":7,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":25,"text":26,"url":25,"active":7,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":28,"text":29,"url":28,"active":30,"items":31},"/framework/guides","Guides",true,[32,35,38,41,44,47],{"id":33,"text":34,"url":33,"active":7,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":39,"text":40,"url":39,"active":7,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":42,"text":43,"url":42,"active":7,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":45,"text":46,"url":45,"active":7,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":48,"text":49,"url":48,"active":30,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":51,"text":52,"url":51,"active":7,"items":-1},"/framework/core-modules","Core modules",1714695649541]
\ No newline at end of file
diff --git a/framework/guides/dynamic-components/index.html b/framework/guides/dynamic-components/index.html
index fceb322797..b82ec3e361 100644
--- a/framework/guides/dynamic-components/index.html
+++ b/framework/guides/dynamic-components/index.html
@@ -25,63 +25,63 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.lp_k9Hpd.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.uDpSgjM7.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProsePre.1p0bzX0t.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCode.ggTmuEB2.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.F9NVvvm4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.Czpq-HHw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.iJ9KJvnk.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProsePre.928ctTB_.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCode.Xz7xMLuq.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.GmB4B_NE.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Nuxt</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/api-endpoints" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>API endpoints</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dynamic components</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/guides-toggle"><span class="rpl-vertical-nav__toggle-text">Guides</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/guides-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
@@ -140,8 +140,8 @@
 </span></span><span class="line" line="2"><span style="--shiki-default:#032F62">  &#39;landing_page&#39;</span><span style="--shiki-default:#24292E">,
 </span></span><span class="line" line="3"><span style="--shiki-default:#032F62">  &#39;some_content_type&#39;
 </span></span><span class="line" line="4"><span style="--shiki-default:#24292E">]
-</span></span></code><!--]--></pre><!--]--></div><style>html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}</style><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/3.guides/5.dynamic-components.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/guides/dynamic-components/_payload.json">[{"state":1,"once":1453,"_errors":1455,"serverRendered":191,"path":7,"prerenderedAt":1458},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":1135,"$sdd-globals":1156,"$sdd-navigation":1158},["ShallowRef",4],["ShallowReactive",5],{"/framework/guides/dynamic-components":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":1130,"_id":1131,"_source":1132,"_file":1133,"_extension":1134},"/framework/guides/dynamic-components","guides",false,"","Adding a new dynamic component","Learn how to add a new dynamic page component to a content type","page",{"type":15,"children":16,"toc":1123},"root",[17,38,43,78,92,99,113,127,140,150,163,387,392,398,403,754,760,765,770,797,997,1003,1008,1052,1058,1063,1117],{"type":18,"tag":19,"props":20,"children":21},"element","blockquote",{},[22],{"type":18,"tag":23,"props":24,"children":25},"p",{},[26,29,36],{"type":27,"value":28},"text","See ",{"type":18,"tag":30,"props":31,"children":33},"a",{"href":32},"/framework/key-concepts/dynamic-components",[34],{"type":27,"value":35},"key concepts - dynamic components",{"type":27,"value":37}," for a conceptual overview of what dynamic components are and how they are used within the SDP platform.",{"type":18,"tag":23,"props":39,"children":40},{},[41],{"type":27,"value":42},"Dynamic components comprise of the following elements:",{"type":18,"tag":44,"props":45,"children":46},"ul",{},[47,53,58,73],{"type":18,"tag":48,"props":49,"children":50},"li",{},[51],{"type":27,"value":52},"A mapping function that will map the raw drupal api response to a Vue component and the props to pass to that Vue component",{"type":18,"tag":48,"props":54,"children":55},{},[56],{"type":27,"value":57},"A Vue component that will render the component",{"type":18,"tag":48,"props":59,"children":60},{},[61,63,71],{"type":27,"value":62},"A list of 'includes' to send to Drupal JSON API (See drupal docs for ",{"type":18,"tag":30,"props":64,"children":68},{"href":65,"rel":66},"https://www.drupal.org/docs/core-modules-and-themes/core-modules/jsonapi-module/includes",[67],"nofollow",[69],{"type":27,"value":70},"Includes",{"type":27,"value":72},")",{"type":18,"tag":48,"props":74,"children":75},{},[76],{"type":27,"value":77},"A list of content types that the dynamic component can be added to",{"type":18,"tag":23,"props":79,"children":80},{},[81,83,90],{"type":27,"value":82},"Each dynamic component then needs to be registered against the name of the ",{"type":18,"tag":30,"props":84,"children":87},{"href":85,"rel":86},"https://www.drupal.org/project/paragraphs",[67],[88],{"type":27,"value":89},"paragraph",{"type":27,"value":91}," in Drupal.",{"type":18,"tag":93,"props":94,"children":96},"h2",{"id":95},"registering-the-dynamic-component",[97],{"type":27,"value":98},"Registering the dynamic component",{"type":18,"tag":23,"props":100,"children":101},{},[102,104,111],{"type":27,"value":103},"Dynamic components need to registered inside a ",{"type":18,"tag":30,"props":105,"children":108},{"href":106,"rel":107},"https://nitro.unjs.io/guide/plugins",[67],[109],{"type":27,"value":110},"Nitro Plugins",{"type":27,"value":112},". Nitro is the server engine used in Nuxt 3.",{"type":18,"tag":23,"props":114,"children":115},{},[116,118,125],{"type":27,"value":117},"Nitro Plugins can be added in the ",{"type":18,"tag":119,"props":120,"children":122},"code",{"className":121},[],[123],{"type":27,"value":124},"/server/plugins",{"type":27,"value":126}," folder in your project.",{"type":18,"tag":23,"props":128,"children":129},{},[130,132,138],{"type":27,"value":131},"Use the ",{"type":18,"tag":119,"props":133,"children":135},{"className":134},[],[136],{"type":27,"value":137},"setDynamicComponent",{"type":27,"value":139}," method to register your component.",{"type":18,"tag":23,"props":141,"children":142},{},[143,148],{"type":18,"tag":119,"props":144,"children":146},{"className":145},[],[147],{"type":27,"value":137},{"type":27,"value":149}," takes the following parameters:",{"type":18,"tag":44,"props":151,"children":152},{},[153,158],{"type":18,"tag":48,"props":154,"children":155},{},[156],{"type":27,"value":157},"name of the component in Drupal (paragraph name)",{"type":18,"tag":48,"props":159,"children":160},{},[161],{"type":27,"value":162},"the mapping function, includes and list of content types",{"type":18,"tag":164,"props":165,"children":169},"pre",{"className":166,"code":167,"language":168,"meta":10,"style":10},"language-ts shiki shiki-themes github-light","// /server/plugins/my-content-type.ts\n\nexport default defineNitroPlugin(async (nitroApp: NitroApp) => {\n  nitroApp.tide?.pageApi.setDynamicComponent('paragraph--my_dynamic_component', {\n    mapping: (field) => { ... },\n    includes: [ ... ],\n    contentTypes: [ ... ]\n  })\n})\n","ts",[170],{"type":18,"tag":119,"props":171,"children":172},{"__ignoreMap":10},[173,185,195,263,291,333,351,369,378],{"type":18,"tag":174,"props":175,"children":178},"span",{"class":176,"line":177},"line",1,[179],{"type":18,"tag":174,"props":180,"children":182},{"style":181},"--shiki-default:#6A737D",[183],{"type":27,"value":184},"// /server/plugins/my-content-type.ts\n",{"type":18,"tag":174,"props":186,"children":188},{"class":176,"line":187},2,[189],{"type":18,"tag":174,"props":190,"children":192},{"emptyLinePlaceholder":191},true,[193],{"type":27,"value":194},"\n",{"type":18,"tag":174,"props":196,"children":198},{"class":176,"line":197},3,[199,205,210,216,222,227,232,238,243,248,253,258],{"type":18,"tag":174,"props":200,"children":202},{"style":201},"--shiki-default:#D73A49",[203],{"type":27,"value":204},"export",{"type":18,"tag":174,"props":206,"children":207},{"style":201},[208],{"type":27,"value":209}," default",{"type":18,"tag":174,"props":211,"children":213},{"style":212},"--shiki-default:#6F42C1",[214],{"type":27,"value":215}," defineNitroPlugin",{"type":18,"tag":174,"props":217,"children":219},{"style":218},"--shiki-default:#24292E",[220],{"type":27,"value":221},"(",{"type":18,"tag":174,"props":223,"children":224},{"style":201},[225],{"type":27,"value":226},"async",{"type":18,"tag":174,"props":228,"children":229},{"style":218},[230],{"type":27,"value":231}," (",{"type":18,"tag":174,"props":233,"children":235},{"style":234},"--shiki-default:#E36209",[236],{"type":27,"value":237},"nitroApp",{"type":18,"tag":174,"props":239,"children":240},{"style":201},[241],{"type":27,"value":242},":",{"type":18,"tag":174,"props":244,"children":245},{"style":212},[246],{"type":27,"value":247}," NitroApp",{"type":18,"tag":174,"props":249,"children":250},{"style":218},[251],{"type":27,"value":252},") ",{"type":18,"tag":174,"props":254,"children":255},{"style":201},[256],{"type":27,"value":257},"=>",{"type":18,"tag":174,"props":259,"children":260},{"style":218},[261],{"type":27,"value":262}," {\n",{"type":18,"tag":174,"props":264,"children":266},{"class":176,"line":265},4,[267,272,276,280,286],{"type":18,"tag":174,"props":268,"children":269},{"style":218},[270],{"type":27,"value":271},"  nitroApp.tide?.pageApi.",{"type":18,"tag":174,"props":273,"children":274},{"style":212},[275],{"type":27,"value":137},{"type":18,"tag":174,"props":277,"children":278},{"style":218},[279],{"type":27,"value":221},{"type":18,"tag":174,"props":281,"children":283},{"style":282},"--shiki-default:#032F62",[284],{"type":27,"value":285},"'paragraph--my_dynamic_component'",{"type":18,"tag":174,"props":287,"children":288},{"style":218},[289],{"type":27,"value":290},", {\n",{"type":18,"tag":174,"props":292,"children":294},{"class":176,"line":293},5,[295,300,305,310,314,318,323,328],{"type":18,"tag":174,"props":296,"children":297},{"style":212},[298],{"type":27,"value":299},"    mapping",{"type":18,"tag":174,"props":301,"children":302},{"style":218},[303],{"type":27,"value":304},": (",{"type":18,"tag":174,"props":306,"children":307},{"style":234},[308],{"type":27,"value":309},"field",{"type":18,"tag":174,"props":311,"children":312},{"style":218},[313],{"type":27,"value":252},{"type":18,"tag":174,"props":315,"children":316},{"style":201},[317],{"type":27,"value":257},{"type":18,"tag":174,"props":319,"children":320},{"style":218},[321],{"type":27,"value":322}," { ",{"type":18,"tag":174,"props":324,"children":325},{"style":201},[326],{"type":27,"value":327},"...",{"type":18,"tag":174,"props":329,"children":330},{"style":218},[331],{"type":27,"value":332}," },\n",{"type":18,"tag":174,"props":334,"children":336},{"class":176,"line":335},6,[337,342,346],{"type":18,"tag":174,"props":338,"children":339},{"style":218},[340],{"type":27,"value":341},"    includes: [ ",{"type":18,"tag":174,"props":343,"children":344},{"style":201},[345],{"type":27,"value":327},{"type":18,"tag":174,"props":347,"children":348},{"style":218},[349],{"type":27,"value":350}," ],\n",{"type":18,"tag":174,"props":352,"children":354},{"class":176,"line":353},7,[355,360,364],{"type":18,"tag":174,"props":356,"children":357},{"style":218},[358],{"type":27,"value":359},"    contentTypes: [ ",{"type":18,"tag":174,"props":361,"children":362},{"style":201},[363],{"type":27,"value":327},{"type":18,"tag":174,"props":365,"children":366},{"style":218},[367],{"type":27,"value":368}," ]\n",{"type":18,"tag":174,"props":370,"children":372},{"class":176,"line":371},8,[373],{"type":18,"tag":174,"props":374,"children":375},{"style":218},[376],{"type":27,"value":377},"  })\n",{"type":18,"tag":174,"props":379,"children":381},{"class":176,"line":380},9,[382],{"type":18,"tag":174,"props":383,"children":384},{"style":218},[385],{"type":27,"value":386},"})\n",{"type":18,"tag":23,"props":388,"children":389},{},[390],{"type":27,"value":391},"The individual elements of a dynamic component are covered below.",{"type":18,"tag":93,"props":393,"children":395},{"id":394},"the-mapping-function",[396],{"type":27,"value":397},"The mapping function",{"type":18,"tag":23,"props":399,"children":400},{},[401],{"type":27,"value":402},"The mapping function takes the raw response from the drupal JSON API and returns a standard structure that ultimately ties the dynamic component with a Vue component.",{"type":18,"tag":164,"props":404,"children":406},{"className":166,"code":405,"language":168,"meta":10,"style":10},"import { TideDynamicPageComponent } from '@dpc-sdp/ripple-tide-api/types'\n\ninterface IMyDynamicComponentProps {\n  someProp1: boolean,\n  someProp2: string\n}\n\nconst mappingFunction = (field): TideDynamicPageComponent\u003CIMyDynamicComponentProps> => {\n  return {\n    // This should be the name to the Vue component you created\n    component: 'MyDynamicComponent',\n\n    // Always include a unique id\n    id: field.drupal_internal__id.toString(),\n\n    // Some components have titles above them, which you can add here. This is optional\n    title: field.field_paragraph_title,\n\n    // These props will be passed to `MyDynamicComponent`\n    props: {\n      someProp1: false,\n      someProp2: field.field_paragraph_description\n    }\n  }\n}\n",[407],{"type":18,"tag":119,"props":408,"children":409},{"__ignoreMap":10},[410,433,440,457,480,497,505,512,574,586,595,613,621,630,649,657,666,675,683,692,701,719,728,737,746],{"type":18,"tag":174,"props":411,"children":412},{"class":176,"line":177},[413,418,423,428],{"type":18,"tag":174,"props":414,"children":415},{"style":201},[416],{"type":27,"value":417},"import",{"type":18,"tag":174,"props":419,"children":420},{"style":218},[421],{"type":27,"value":422}," { TideDynamicPageComponent } ",{"type":18,"tag":174,"props":424,"children":425},{"style":201},[426],{"type":27,"value":427},"from",{"type":18,"tag":174,"props":429,"children":430},{"style":282},[431],{"type":27,"value":432}," '@dpc-sdp/ripple-tide-api/types'\n",{"type":18,"tag":174,"props":434,"children":435},{"class":176,"line":187},[436],{"type":18,"tag":174,"props":437,"children":438},{"emptyLinePlaceholder":191},[439],{"type":27,"value":194},{"type":18,"tag":174,"props":441,"children":442},{"class":176,"line":197},[443,448,453],{"type":18,"tag":174,"props":444,"children":445},{"style":201},[446],{"type":27,"value":447},"interface",{"type":18,"tag":174,"props":449,"children":450},{"style":212},[451],{"type":27,"value":452}," IMyDynamicComponentProps",{"type":18,"tag":174,"props":454,"children":455},{"style":218},[456],{"type":27,"value":262},{"type":18,"tag":174,"props":458,"children":459},{"class":176,"line":265},[460,465,469,475],{"type":18,"tag":174,"props":461,"children":462},{"style":234},[463],{"type":27,"value":464},"  someProp1",{"type":18,"tag":174,"props":466,"children":467},{"style":201},[468],{"type":27,"value":242},{"type":18,"tag":174,"props":470,"children":472},{"style":471},"--shiki-default:#005CC5",[473],{"type":27,"value":474}," boolean",{"type":18,"tag":174,"props":476,"children":477},{"style":218},[478],{"type":27,"value":479},",\n",{"type":18,"tag":174,"props":481,"children":482},{"class":176,"line":293},[483,488,492],{"type":18,"tag":174,"props":484,"children":485},{"style":234},[486],{"type":27,"value":487},"  someProp2",{"type":18,"tag":174,"props":489,"children":490},{"style":201},[491],{"type":27,"value":242},{"type":18,"tag":174,"props":493,"children":494},{"style":471},[495],{"type":27,"value":496}," string\n",{"type":18,"tag":174,"props":498,"children":499},{"class":176,"line":335},[500],{"type":18,"tag":174,"props":501,"children":502},{"style":218},[503],{"type":27,"value":504},"}\n",{"type":18,"tag":174,"props":506,"children":507},{"class":176,"line":353},[508],{"type":18,"tag":174,"props":509,"children":510},{"emptyLinePlaceholder":191},[511],{"type":27,"value":194},{"type":18,"tag":174,"props":513,"children":514},{"class":176,"line":371},[515,520,525,530,534,538,542,546,551,556,561,566,570],{"type":18,"tag":174,"props":516,"children":517},{"style":201},[518],{"type":27,"value":519},"const",{"type":18,"tag":174,"props":521,"children":522},{"style":212},[523],{"type":27,"value":524}," mappingFunction",{"type":18,"tag":174,"props":526,"children":527},{"style":201},[528],{"type":27,"value":529}," =",{"type":18,"tag":174,"props":531,"children":532},{"style":218},[533],{"type":27,"value":231},{"type":18,"tag":174,"props":535,"children":536},{"style":234},[537],{"type":27,"value":309},{"type":18,"tag":174,"props":539,"children":540},{"style":218},[541],{"type":27,"value":72},{"type":18,"tag":174,"props":543,"children":544},{"style":201},[545],{"type":27,"value":242},{"type":18,"tag":174,"props":547,"children":548},{"style":212},[549],{"type":27,"value":550}," TideDynamicPageComponent",{"type":18,"tag":174,"props":552,"children":553},{"style":218},[554],{"type":27,"value":555},"\u003C",{"type":18,"tag":174,"props":557,"children":558},{"style":212},[559],{"type":27,"value":560},"IMyDynamicComponentProps",{"type":18,"tag":174,"props":562,"children":563},{"style":218},[564],{"type":27,"value":565},"> ",{"type":18,"tag":174,"props":567,"children":568},{"style":201},[569],{"type":27,"value":257},{"type":18,"tag":174,"props":571,"children":572},{"style":218},[573],{"type":27,"value":262},{"type":18,"tag":174,"props":575,"children":576},{"class":176,"line":380},[577,582],{"type":18,"tag":174,"props":578,"children":579},{"style":201},[580],{"type":27,"value":581},"  return",{"type":18,"tag":174,"props":583,"children":584},{"style":218},[585],{"type":27,"value":262},{"type":18,"tag":174,"props":587,"children":589},{"class":176,"line":588},10,[590],{"type":18,"tag":174,"props":591,"children":592},{"style":181},[593],{"type":27,"value":594},"    // This should be the name to the Vue component you created\n",{"type":18,"tag":174,"props":596,"children":598},{"class":176,"line":597},11,[599,604,609],{"type":18,"tag":174,"props":600,"children":601},{"style":218},[602],{"type":27,"value":603},"    component: ",{"type":18,"tag":174,"props":605,"children":606},{"style":282},[607],{"type":27,"value":608},"'MyDynamicComponent'",{"type":18,"tag":174,"props":610,"children":611},{"style":218},[612],{"type":27,"value":479},{"type":18,"tag":174,"props":614,"children":616},{"class":176,"line":615},12,[617],{"type":18,"tag":174,"props":618,"children":619},{"emptyLinePlaceholder":191},[620],{"type":27,"value":194},{"type":18,"tag":174,"props":622,"children":624},{"class":176,"line":623},13,[625],{"type":18,"tag":174,"props":626,"children":627},{"style":181},[628],{"type":27,"value":629},"    // Always include a unique id\n",{"type":18,"tag":174,"props":631,"children":633},{"class":176,"line":632},14,[634,639,644],{"type":18,"tag":174,"props":635,"children":636},{"style":218},[637],{"type":27,"value":638},"    id: field.drupal_internal__id.",{"type":18,"tag":174,"props":640,"children":641},{"style":212},[642],{"type":27,"value":643},"toString",{"type":18,"tag":174,"props":645,"children":646},{"style":218},[647],{"type":27,"value":648},"(),\n",{"type":18,"tag":174,"props":650,"children":652},{"class":176,"line":651},15,[653],{"type":18,"tag":174,"props":654,"children":655},{"emptyLinePlaceholder":191},[656],{"type":27,"value":194},{"type":18,"tag":174,"props":658,"children":660},{"class":176,"line":659},16,[661],{"type":18,"tag":174,"props":662,"children":663},{"style":181},[664],{"type":27,"value":665},"    // Some components have titles above them, which you can add here. This is optional\n",{"type":18,"tag":174,"props":667,"children":669},{"class":176,"line":668},17,[670],{"type":18,"tag":174,"props":671,"children":672},{"style":218},[673],{"type":27,"value":674},"    title: field.field_paragraph_title,\n",{"type":18,"tag":174,"props":676,"children":678},{"class":176,"line":677},18,[679],{"type":18,"tag":174,"props":680,"children":681},{"emptyLinePlaceholder":191},[682],{"type":27,"value":194},{"type":18,"tag":174,"props":684,"children":686},{"class":176,"line":685},19,[687],{"type":18,"tag":174,"props":688,"children":689},{"style":181},[690],{"type":27,"value":691},"    // These props will be passed to `MyDynamicComponent`\n",{"type":18,"tag":174,"props":693,"children":695},{"class":176,"line":694},20,[696],{"type":18,"tag":174,"props":697,"children":698},{"style":218},[699],{"type":27,"value":700},"    props: {\n",{"type":18,"tag":174,"props":702,"children":704},{"class":176,"line":703},21,[705,710,715],{"type":18,"tag":174,"props":706,"children":707},{"style":218},[708],{"type":27,"value":709},"      someProp1: ",{"type":18,"tag":174,"props":711,"children":712},{"style":471},[713],{"type":27,"value":714},"false",{"type":18,"tag":174,"props":716,"children":717},{"style":218},[718],{"type":27,"value":479},{"type":18,"tag":174,"props":720,"children":722},{"class":176,"line":721},22,[723],{"type":18,"tag":174,"props":724,"children":725},{"style":218},[726],{"type":27,"value":727},"      someProp2: field.field_paragraph_description\n",{"type":18,"tag":174,"props":729,"children":731},{"class":176,"line":730},23,[732],{"type":18,"tag":174,"props":733,"children":734},{"style":218},[735],{"type":27,"value":736},"    }\n",{"type":18,"tag":174,"props":738,"children":740},{"class":176,"line":739},24,[741],{"type":18,"tag":174,"props":742,"children":743},{"style":218},[744],{"type":27,"value":745},"  }\n",{"type":18,"tag":174,"props":747,"children":749},{"class":176,"line":748},25,[750],{"type":18,"tag":174,"props":751,"children":752},{"style":218},[753],{"type":27,"value":504},{"type":18,"tag":93,"props":755,"children":757},{"id":756},"the-vue-component",[758],{"type":27,"value":759},"The Vue component",{"type":18,"tag":23,"props":761,"children":762},{},[763],{"type":27,"value":764},"Create a Vue component that will render your dynamic component.",{"type":18,"tag":23,"props":766,"children":767},{},[768],{"type":27,"value":769},"This component will be rendered each time your component appears on a page and will receive any props that were specified from the mapping function.",{"type":18,"tag":19,"props":771,"children":772},{},[773,792],{"type":18,"tag":23,"props":774,"children":775},{},[776,782,784,790],{"type":18,"tag":777,"props":778,"children":779},"strong",{},[780],{"type":27,"value":781},"Important note",{"type":27,"value":783},": For this to work, your component needs to be registered globally. The simplest way to do this is to add the component to the ",{"type":18,"tag":119,"props":785,"children":787},{"className":786},[],[788],{"type":27,"value":789},"/components/global",{"type":27,"value":791}," folder in your layer.",{"type":18,"tag":23,"props":793,"children":794},{},[795],{"type":27,"value":796},"Because they are global it's also important to choose non generic names so that they don't clash and overwrite other dynamic components",{"type":18,"tag":164,"props":798,"children":800},{"className":166,"code":799,"language":168,"meta":10,"style":10},"// /components/global/MyDynamicComponent.vue\n\n\u003Cscript setup lang=\"ts\">\ndefineProps\u003C{\n  someProp1: boolean,\n  someProp2: string\n}>()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    {{someProp2}}\n  \u003C/div>\n\u003C/template>\n",[801],{"type":18,"tag":119,"props":802,"children":803},{"__ignoreMap":10},[804,812,819,846,859,878,893,901,918,925,941,958,966,982],{"type":18,"tag":174,"props":805,"children":806},{"class":176,"line":177},[807],{"type":18,"tag":174,"props":808,"children":809},{"style":181},[810],{"type":27,"value":811},"// /components/global/MyDynamicComponent.vue\n",{"type":18,"tag":174,"props":813,"children":814},{"class":176,"line":187},[815],{"type":18,"tag":174,"props":816,"children":817},{"emptyLinePlaceholder":191},[818],{"type":27,"value":194},{"type":18,"tag":174,"props":820,"children":821},{"class":176,"line":197},[822,826,831,836,841],{"type":18,"tag":174,"props":823,"children":824},{"style":201},[825],{"type":27,"value":555},{"type":18,"tag":174,"props":827,"children":828},{"style":218},[829],{"type":27,"value":830},"script setup lang",{"type":18,"tag":174,"props":832,"children":833},{"style":201},[834],{"type":27,"value":835},"=",{"type":18,"tag":174,"props":837,"children":838},{"style":282},[839],{"type":27,"value":840},"\"ts\"",{"type":18,"tag":174,"props":842,"children":843},{"style":201},[844],{"type":27,"value":845},">\n",{"type":18,"tag":174,"props":847,"children":848},{"class":176,"line":265},[849,854],{"type":18,"tag":174,"props":850,"children":851},{"style":212},[852],{"type":27,"value":853},"defineProps",{"type":18,"tag":174,"props":855,"children":856},{"style":218},[857],{"type":27,"value":858},"\u003C{\n",{"type":18,"tag":174,"props":860,"children":861},{"class":176,"line":293},[862,866,870,874],{"type":18,"tag":174,"props":863,"children":864},{"style":234},[865],{"type":27,"value":464},{"type":18,"tag":174,"props":867,"children":868},{"style":201},[869],{"type":27,"value":242},{"type":18,"tag":174,"props":871,"children":872},{"style":471},[873],{"type":27,"value":474},{"type":18,"tag":174,"props":875,"children":876},{"style":218},[877],{"type":27,"value":479},{"type":18,"tag":174,"props":879,"children":880},{"class":176,"line":335},[881,885,889],{"type":18,"tag":174,"props":882,"children":883},{"style":234},[884],{"type":27,"value":487},{"type":18,"tag":174,"props":886,"children":887},{"style":201},[888],{"type":27,"value":242},{"type":18,"tag":174,"props":890,"children":891},{"style":471},[892],{"type":27,"value":496},{"type":18,"tag":174,"props":894,"children":895},{"class":176,"line":353},[896],{"type":18,"tag":174,"props":897,"children":898},{"style":218},[899],{"type":27,"value":900},"}>()\n",{"type":18,"tag":174,"props":902,"children":903},{"class":176,"line":371},[904,909,914],{"type":18,"tag":174,"props":905,"children":906},{"style":201},[907],{"type":27,"value":908},"\u003C/",{"type":18,"tag":174,"props":910,"children":911},{"style":218},[912],{"type":27,"value":913},"script",{"type":18,"tag":174,"props":915,"children":916},{"style":201},[917],{"type":27,"value":845},{"type":18,"tag":174,"props":919,"children":920},{"class":176,"line":380},[921],{"type":18,"tag":174,"props":922,"children":923},{"emptyLinePlaceholder":191},[924],{"type":27,"value":194},{"type":18,"tag":174,"props":926,"children":927},{"class":176,"line":588},[928,932,937],{"type":18,"tag":174,"props":929,"children":930},{"style":218},[931],{"type":27,"value":555},{"type":18,"tag":174,"props":933,"children":934},{"style":212},[935],{"type":27,"value":936},"template",{"type":18,"tag":174,"props":938,"children":939},{"style":218},[940],{"type":27,"value":845},{"type":18,"tag":174,"props":942,"children":943},{"class":176,"line":597},[944,949,954],{"type":18,"tag":174,"props":945,"children":946},{"style":218},[947],{"type":27,"value":948},"  \u003C",{"type":18,"tag":174,"props":950,"children":951},{"style":212},[952],{"type":27,"value":953},"div",{"type":18,"tag":174,"props":955,"children":956},{"style":218},[957],{"type":27,"value":845},{"type":18,"tag":174,"props":959,"children":960},{"class":176,"line":615},[961],{"type":18,"tag":174,"props":962,"children":963},{"style":218},[964],{"type":27,"value":965},"    {{someProp2}}\n",{"type":18,"tag":174,"props":967,"children":968},{"class":176,"line":623},[969,974,978],{"type":18,"tag":174,"props":970,"children":971},{"style":201},[972],{"type":27,"value":973},"  \u003C/",{"type":18,"tag":174,"props":975,"children":976},{"style":218},[977],{"type":27,"value":953},{"type":18,"tag":174,"props":979,"children":980},{"style":201},[981],{"type":27,"value":845},{"type":18,"tag":174,"props":983,"children":984},{"class":176,"line":632},[985,989,993],{"type":18,"tag":174,"props":986,"children":987},{"style":201},[988],{"type":27,"value":908},{"type":18,"tag":174,"props":990,"children":991},{"style":218},[992],{"type":27,"value":936},{"type":18,"tag":174,"props":994,"children":995},{"style":201},[996],{"type":27,"value":845},{"type":18,"tag":93,"props":998,"children":1000},{"id":999},"the-list-of-includes",[1001],{"type":27,"value":1002},"The list of includes",{"type":18,"tag":23,"props":1004,"children":1005},{},[1006],{"type":27,"value":1007},"Each dynamic component should specify an array of 'includes' that it needs in order to function properly.",{"type":18,"tag":164,"props":1009,"children":1011},{"className":166,"code":1010,"language":168,"meta":10,"style":10},"const includes = [\n  'field_landing_page_component.field_paragraph_accordion'\n]\n",[1012],{"type":18,"tag":119,"props":1013,"children":1014},{"__ignoreMap":10},[1015,1036,1044],{"type":18,"tag":174,"props":1016,"children":1017},{"class":176,"line":177},[1018,1022,1027,1031],{"type":18,"tag":174,"props":1019,"children":1020},{"style":201},[1021],{"type":27,"value":519},{"type":18,"tag":174,"props":1023,"children":1024},{"style":471},[1025],{"type":27,"value":1026}," includes",{"type":18,"tag":174,"props":1028,"children":1029},{"style":201},[1030],{"type":27,"value":529},{"type":18,"tag":174,"props":1032,"children":1033},{"style":218},[1034],{"type":27,"value":1035}," [\n",{"type":18,"tag":174,"props":1037,"children":1038},{"class":176,"line":187},[1039],{"type":18,"tag":174,"props":1040,"children":1041},{"style":282},[1042],{"type":27,"value":1043},"  'field_landing_page_component.field_paragraph_accordion'\n",{"type":18,"tag":174,"props":1045,"children":1046},{"class":176,"line":197},[1047],{"type":18,"tag":174,"props":1048,"children":1049},{"style":218},[1050],{"type":27,"value":1051},"]\n",{"type":18,"tag":93,"props":1053,"children":1055},{"id":1054},"the-list-of-content-types",[1056],{"type":27,"value":1057},"The list of content types",{"type":18,"tag":23,"props":1059,"children":1060},{},[1061],{"type":27,"value":1062},"Each dynamic component should specify an array of 'content types' that the dynamic component can appear on.",{"type":18,"tag":164,"props":1064,"children":1066},{"className":166,"code":1065,"language":168,"meta":10,"style":10},"const contentTypes = [\n  'landing_page',\n  'some_content_type'\n]\n",[1067],{"type":18,"tag":119,"props":1068,"children":1069},{"__ignoreMap":10},[1070,1090,1102,1110],{"type":18,"tag":174,"props":1071,"children":1072},{"class":176,"line":177},[1073,1077,1082,1086],{"type":18,"tag":174,"props":1074,"children":1075},{"style":201},[1076],{"type":27,"value":519},{"type":18,"tag":174,"props":1078,"children":1079},{"style":471},[1080],{"type":27,"value":1081}," contentTypes",{"type":18,"tag":174,"props":1083,"children":1084},{"style":201},[1085],{"type":27,"value":529},{"type":18,"tag":174,"props":1087,"children":1088},{"style":218},[1089],{"type":27,"value":1035},{"type":18,"tag":174,"props":1091,"children":1092},{"class":176,"line":187},[1093,1098],{"type":18,"tag":174,"props":1094,"children":1095},{"style":282},[1096],{"type":27,"value":1097},"  'landing_page'",{"type":18,"tag":174,"props":1099,"children":1100},{"style":218},[1101],{"type":27,"value":479},{"type":18,"tag":174,"props":1103,"children":1104},{"class":176,"line":197},[1105],{"type":18,"tag":174,"props":1106,"children":1107},{"style":282},[1108],{"type":27,"value":1109},"  'some_content_type'\n",{"type":18,"tag":174,"props":1111,"children":1112},{"class":176,"line":265},[1113],{"type":18,"tag":174,"props":1114,"children":1115},{"style":218},[1116],{"type":27,"value":1051},{"type":18,"tag":1118,"props":1119,"children":1120},"style",{},[1121],{"type":27,"value":1122},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":10,"searchDepth":187,"depth":187,"links":1124},[1125,1126,1127,1128,1129],{"id":95,"depth":187,"text":98},{"id":394,"depth":187,"text":397},{"id":756,"depth":187,"text":759},{"id":999,"depth":187,"text":1002},{"id":1054,"depth":187,"text":1057},"markdown","content:framework:3.guides:5.dynamic-components.md","content","framework/3.guides/5.dynamic-components.md","md",["ShallowRef",1136],["ShallowReactive",1137],{"/framework/guides/dynamic-components":1138},[1139,1149],{"_path":1140,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":1141,"description":1142,"layout":13,"links":1143,"_type":1130,"_id":1147,"_source":1132,"_file":1148,"_extension":1134},"/framework/guides/creating-new-layers","Creating new layers","Implementing custom functionality through layers",[1144],{"text":1145,"url":1146},"Nuxt layers documentation","https://nuxt.com/docs/getting-started/layers","content:framework:3.guides:5.creating-new-layers.md","framework/3.guides/5.creating-new-layers.md",{"_path":1150,"_dir":1151,"_draft":9,"_partial":9,"_locale":10,"title":1152,"description":1153,"layout":13,"_type":1130,"_id":1154,"_source":1132,"_file":1155,"_extension":1134},"/framework/core-modules","framework","Core modules","A listing of all current core Ripple layers and packages","content:framework:4.core-modules.md","framework/4.core-modules.md",["ShallowRef",1157],{},[1159,1164,1412],{"title":1160,"_path":1161,"icon":1162,"layout":1163},"Ripple Design System","/","carbon:home","home",{"title":1165,"_path":1166,"children":1167},"Design System","/design-system",[1168,1184,1200,1230,1264],{"title":1169,"_path":1170,"children":1171},"About","/design-system/about",[1172,1175,1178,1181],{"title":1173,"_path":1174,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":1176,"_path":1177,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":1179,"_path":1180,"layout":13},"Support","/design-system/about/getting-support",{"title":1182,"_path":1183,"layout":13},"Contributing","/design-system/about/contributing",{"title":1185,"_path":1186,"children":1187},"Design","/design-system/design",[1188,1191,1194,1197],{"title":1189,"_path":1190,"layout":13},"Getting started","/design-system/design/getting-started",{"title":1192,"_path":1193,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":1195,"_path":1196,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":1198,"_path":1199,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":1201,"_path":1202,"children":1203},"Develop","/design-system/develop",[1204,1206,1208,1211],{"title":1189,"_path":1205,"layout":13},"/design-system/develop/getting-started",{"title":1182,"_path":1207,"layout":13},"/design-system/develop/contributing",{"title":1209,"_path":1210,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":1212,"_path":1213,"children":1214,"layout":13},"Usage","/design-system/develop/usage",[1215,1218,1221,1224,1227],{"title":1216,"_path":1217,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":1219,"_path":1220,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":1222,"_path":1223,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":1225,"_path":1226,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":1228,"_path":1229,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":1231,"_path":1232,"children":1233},"Styles","/design-system/styles",[1234,1237,1240,1243,1246,1249,1252,1255,1258,1261],{"title":1235,"_path":1236,"layout":13},"Colour","/design-system/styles/colour",{"title":1238,"_path":1239,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":1241,"_path":1242,"layout":13},"Grid","/design-system/styles/grid",{"title":1244,"_path":1245,"layout":13},"Icons","/design-system/styles/icons",{"title":1247,"_path":1248,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":1250,"_path":1251,"layout":13},"Layout","/design-system/styles/layout",{"title":1253,"_path":1254,"layout":13},"Logo","/design-system/styles/logo",{"title":1256,"_path":1257,"layout":13},"Motion","/design-system/styles/motion",{"title":1259,"_path":1260,"layout":13},"Spacing","/design-system/styles/spacing",{"title":1262,"_path":1263,"layout":13},"Typography","/design-system/styles/typography",{"title":1265,"_path":1266,"children":1267},"Components","/design-system/components",[1268,1271,1274,1277,1280,1283,1286,1289,1292,1295,1298,1301,1304,1307,1310,1313,1316,1319,1322,1325,1328,1331,1334,1337,1340,1343,1346,1349,1352,1355,1358,1361,1364,1367,1370,1373,1376,1379,1382,1385,1388,1391,1394,1397,1400,1403,1406,1409],{"title":1269,"_path":1270,"layout":13},"Accordion","/design-system/components/accordion",{"title":1272,"_path":1273,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":1275,"_path":1276,"layout":13},"Alert","/design-system/components/alert",{"title":1278,"_path":1279,"layout":13},"Block quote","/design-system/components/block-quote",{"title":1281,"_path":1282,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":1284,"_path":1285,"layout":13},"Button","/design-system/components/button",{"title":1287,"_path":1288,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":1290,"_path":1291,"layout":13},"Callout","/design-system/components/callout",{"title":1293,"_path":1294,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":1296,"_path":1297,"layout":13},"Card","/design-system/components/card",{"title":1299,"_path":1300,"layout":13},"Carousel","/design-system/components/carousel",{"title":1302,"_path":1303,"layout":13},"Category grid","/design-system/components/category-grid",{"title":1305,"_path":1306,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":1308,"_path":1309,"layout":13},"Chip","/design-system/components/chip",{"title":1311,"_path":1312,"layout":13},"Contact us","/design-system/components/contact-us",{"title":1314,"_path":1315,"layout":13},"Date input","/design-system/components/date-input",{"title":1317,"_path":1318,"layout":13},"Detail list","/design-system/components/detail-list",{"title":1320,"_path":1321,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":1323,"_path":1324,"layout":13},"File","/design-system/components/file",{"title":1326,"_path":1327,"layout":13},"Footer","/design-system/components/footer",{"title":1329,"_path":1330,"layout":13},"Form","/design-system/components/form",{"title":1332,"_path":1333,"layout":13},"Form alert","/design-system/components/form-alert",{"title":1335,"_path":1336,"layout":13},"Header","/design-system/components/header",{"title":1338,"_path":1339,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":1341,"_path":1342,"layout":13},"Input field","/design-system/components/input-field",{"title":1344,"_path":1345,"layout":13},"Key dates","/design-system/components/key-dates",{"title":1347,"_path":1348,"layout":13},"Media","/design-system/components/media",{"title":1350,"_path":1351,"layout":13},"Media embed","/design-system/components/media-embed",{"title":1353,"_path":1354,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":1356,"_path":1357,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":1359,"_path":1360,"layout":13},"Option button","/design-system/components/option-button",{"title":1362,"_path":1363,"layout":13},"Page action","/design-system/components/page-action",{"title":1365,"_path":1366,"layout":13},"Pagination","/design-system/components/pagination",{"title":1368,"_path":1369,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":1371,"_path":1372,"layout":13},"Profile","/design-system/components/profile",{"title":1374,"_path":1375,"layout":13},"Radio button","/design-system/components/radio-button",{"title":1377,"_path":1378,"layout":13},"Related links","/design-system/components/related-links",{"title":1380,"_path":1381,"layout":13},"Results listing","/design-system/components/results-listing",{"title":1383,"_path":1384,"layout":13},"Search bar","/design-system/components/search-bar",{"title":1386,"_path":1387,"layout":13},"Skip link","/design-system/components/skip-link",{"title":1389,"_path":1390,"layout":13},"Social share","/design-system/components/social-share",{"title":1392,"_path":1393,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":1395,"_path":1396,"layout":13},"Table","/design-system/components/table",{"title":1398,"_path":1399,"layout":13},"Tabs","/design-system/components/tabs",{"title":1401,"_path":1402,"layout":13},"Tag","/design-system/components/tag",{"title":1404,"_path":1405,"layout":13},"Text area","/design-system/components/text-area",{"title":1407,"_path":1408,"layout":13},"Timeline","/design-system/components/timeline",{"title":1410,"_path":1411,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":1413,"_path":1414,"children":1415,"layout":13},"Ripple Framework","/framework",[1416,1417,1434,1452],{"title":1413,"_path":1414,"layout":13},{"title":1418,"_path":1419,"children":1420},"Key Concepts","/framework/key-concepts",[1421,1423,1426,1429,1432],{"title":1222,"_path":1422,"layout":13},"/framework/key-concepts/nuxt",{"title":1424,"_path":1425,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":1427,"_path":1428,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":1430,"_path":1431,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":1433,"_path":32,"layout":13},"Dynamic components",{"title":1435,"_path":1436,"children":1437},"Guides","/framework/guides",[1438,1441,1444,1447,1450,1451],{"title":1439,"_path":1440,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":1442,"_path":1443,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":1445,"_path":1446,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":1448,"_path":1449,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":1141,"_path":1140,"layout":13},{"title":11,"_path":7,"layout":13},{"title":1152,"_path":1150,"layout":13},["Reactive",1454],["Set"],["Reactive",1456],{"module-navigation":1457},null,1714695151359]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+</span></span></code><!--]--></pre><!--]--></div><style>html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}</style><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/3.guides/5.dynamic-components.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/guides/dynamic-components/_payload.json">[{"state":1,"once":1453,"_errors":1455,"serverRendered":191,"path":7,"prerenderedAt":1458},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":1135,"$sdd-globals":1156,"$sdd-navigation":1158},["ShallowRef",4],["ShallowReactive",5],{"/framework/guides/dynamic-components":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":1130,"_id":1131,"_source":1132,"_file":1133,"_extension":1134},"/framework/guides/dynamic-components","guides",false,"","Adding a new dynamic component","Learn how to add a new dynamic page component to a content type","page",{"type":15,"children":16,"toc":1123},"root",[17,38,43,78,92,99,113,127,140,150,163,387,392,398,403,754,760,765,770,797,997,1003,1008,1052,1058,1063,1117],{"type":18,"tag":19,"props":20,"children":21},"element","blockquote",{},[22],{"type":18,"tag":23,"props":24,"children":25},"p",{},[26,29,36],{"type":27,"value":28},"text","See ",{"type":18,"tag":30,"props":31,"children":33},"a",{"href":32},"/framework/key-concepts/dynamic-components",[34],{"type":27,"value":35},"key concepts - dynamic components",{"type":27,"value":37}," for a conceptual overview of what dynamic components are and how they are used within the SDP platform.",{"type":18,"tag":23,"props":39,"children":40},{},[41],{"type":27,"value":42},"Dynamic components comprise of the following elements:",{"type":18,"tag":44,"props":45,"children":46},"ul",{},[47,53,58,73],{"type":18,"tag":48,"props":49,"children":50},"li",{},[51],{"type":27,"value":52},"A mapping function that will map the raw drupal api response to a Vue component and the props to pass to that Vue component",{"type":18,"tag":48,"props":54,"children":55},{},[56],{"type":27,"value":57},"A Vue component that will render the component",{"type":18,"tag":48,"props":59,"children":60},{},[61,63,71],{"type":27,"value":62},"A list of 'includes' to send to Drupal JSON API (See drupal docs for ",{"type":18,"tag":30,"props":64,"children":68},{"href":65,"rel":66},"https://www.drupal.org/docs/core-modules-and-themes/core-modules/jsonapi-module/includes",[67],"nofollow",[69],{"type":27,"value":70},"Includes",{"type":27,"value":72},")",{"type":18,"tag":48,"props":74,"children":75},{},[76],{"type":27,"value":77},"A list of content types that the dynamic component can be added to",{"type":18,"tag":23,"props":79,"children":80},{},[81,83,90],{"type":27,"value":82},"Each dynamic component then needs to be registered against the name of the ",{"type":18,"tag":30,"props":84,"children":87},{"href":85,"rel":86},"https://www.drupal.org/project/paragraphs",[67],[88],{"type":27,"value":89},"paragraph",{"type":27,"value":91}," in Drupal.",{"type":18,"tag":93,"props":94,"children":96},"h2",{"id":95},"registering-the-dynamic-component",[97],{"type":27,"value":98},"Registering the dynamic component",{"type":18,"tag":23,"props":100,"children":101},{},[102,104,111],{"type":27,"value":103},"Dynamic components need to registered inside a ",{"type":18,"tag":30,"props":105,"children":108},{"href":106,"rel":107},"https://nitro.unjs.io/guide/plugins",[67],[109],{"type":27,"value":110},"Nitro Plugins",{"type":27,"value":112},". Nitro is the server engine used in Nuxt 3.",{"type":18,"tag":23,"props":114,"children":115},{},[116,118,125],{"type":27,"value":117},"Nitro Plugins can be added in the ",{"type":18,"tag":119,"props":120,"children":122},"code",{"className":121},[],[123],{"type":27,"value":124},"/server/plugins",{"type":27,"value":126}," folder in your project.",{"type":18,"tag":23,"props":128,"children":129},{},[130,132,138],{"type":27,"value":131},"Use the ",{"type":18,"tag":119,"props":133,"children":135},{"className":134},[],[136],{"type":27,"value":137},"setDynamicComponent",{"type":27,"value":139}," method to register your component.",{"type":18,"tag":23,"props":141,"children":142},{},[143,148],{"type":18,"tag":119,"props":144,"children":146},{"className":145},[],[147],{"type":27,"value":137},{"type":27,"value":149}," takes the following parameters:",{"type":18,"tag":44,"props":151,"children":152},{},[153,158],{"type":18,"tag":48,"props":154,"children":155},{},[156],{"type":27,"value":157},"name of the component in Drupal (paragraph name)",{"type":18,"tag":48,"props":159,"children":160},{},[161],{"type":27,"value":162},"the mapping function, includes and list of content types",{"type":18,"tag":164,"props":165,"children":169},"pre",{"className":166,"code":167,"language":168,"meta":10,"style":10},"language-ts shiki shiki-themes github-light","// /server/plugins/my-content-type.ts\n\nexport default defineNitroPlugin(async (nitroApp: NitroApp) => {\n  nitroApp.tide?.pageApi.setDynamicComponent('paragraph--my_dynamic_component', {\n    mapping: (field) => { ... },\n    includes: [ ... ],\n    contentTypes: [ ... ]\n  })\n})\n","ts",[170],{"type":18,"tag":119,"props":171,"children":172},{"__ignoreMap":10},[173,185,195,263,291,333,351,369,378],{"type":18,"tag":174,"props":175,"children":178},"span",{"class":176,"line":177},"line",1,[179],{"type":18,"tag":174,"props":180,"children":182},{"style":181},"--shiki-default:#6A737D",[183],{"type":27,"value":184},"// /server/plugins/my-content-type.ts\n",{"type":18,"tag":174,"props":186,"children":188},{"class":176,"line":187},2,[189],{"type":18,"tag":174,"props":190,"children":192},{"emptyLinePlaceholder":191},true,[193],{"type":27,"value":194},"\n",{"type":18,"tag":174,"props":196,"children":198},{"class":176,"line":197},3,[199,205,210,216,222,227,232,238,243,248,253,258],{"type":18,"tag":174,"props":200,"children":202},{"style":201},"--shiki-default:#D73A49",[203],{"type":27,"value":204},"export",{"type":18,"tag":174,"props":206,"children":207},{"style":201},[208],{"type":27,"value":209}," default",{"type":18,"tag":174,"props":211,"children":213},{"style":212},"--shiki-default:#6F42C1",[214],{"type":27,"value":215}," defineNitroPlugin",{"type":18,"tag":174,"props":217,"children":219},{"style":218},"--shiki-default:#24292E",[220],{"type":27,"value":221},"(",{"type":18,"tag":174,"props":223,"children":224},{"style":201},[225],{"type":27,"value":226},"async",{"type":18,"tag":174,"props":228,"children":229},{"style":218},[230],{"type":27,"value":231}," (",{"type":18,"tag":174,"props":233,"children":235},{"style":234},"--shiki-default:#E36209",[236],{"type":27,"value":237},"nitroApp",{"type":18,"tag":174,"props":239,"children":240},{"style":201},[241],{"type":27,"value":242},":",{"type":18,"tag":174,"props":244,"children":245},{"style":212},[246],{"type":27,"value":247}," NitroApp",{"type":18,"tag":174,"props":249,"children":250},{"style":218},[251],{"type":27,"value":252},") ",{"type":18,"tag":174,"props":254,"children":255},{"style":201},[256],{"type":27,"value":257},"=>",{"type":18,"tag":174,"props":259,"children":260},{"style":218},[261],{"type":27,"value":262}," {\n",{"type":18,"tag":174,"props":264,"children":266},{"class":176,"line":265},4,[267,272,276,280,286],{"type":18,"tag":174,"props":268,"children":269},{"style":218},[270],{"type":27,"value":271},"  nitroApp.tide?.pageApi.",{"type":18,"tag":174,"props":273,"children":274},{"style":212},[275],{"type":27,"value":137},{"type":18,"tag":174,"props":277,"children":278},{"style":218},[279],{"type":27,"value":221},{"type":18,"tag":174,"props":281,"children":283},{"style":282},"--shiki-default:#032F62",[284],{"type":27,"value":285},"'paragraph--my_dynamic_component'",{"type":18,"tag":174,"props":287,"children":288},{"style":218},[289],{"type":27,"value":290},", {\n",{"type":18,"tag":174,"props":292,"children":294},{"class":176,"line":293},5,[295,300,305,310,314,318,323,328],{"type":18,"tag":174,"props":296,"children":297},{"style":212},[298],{"type":27,"value":299},"    mapping",{"type":18,"tag":174,"props":301,"children":302},{"style":218},[303],{"type":27,"value":304},": (",{"type":18,"tag":174,"props":306,"children":307},{"style":234},[308],{"type":27,"value":309},"field",{"type":18,"tag":174,"props":311,"children":312},{"style":218},[313],{"type":27,"value":252},{"type":18,"tag":174,"props":315,"children":316},{"style":201},[317],{"type":27,"value":257},{"type":18,"tag":174,"props":319,"children":320},{"style":218},[321],{"type":27,"value":322}," { ",{"type":18,"tag":174,"props":324,"children":325},{"style":201},[326],{"type":27,"value":327},"...",{"type":18,"tag":174,"props":329,"children":330},{"style":218},[331],{"type":27,"value":332}," },\n",{"type":18,"tag":174,"props":334,"children":336},{"class":176,"line":335},6,[337,342,346],{"type":18,"tag":174,"props":338,"children":339},{"style":218},[340],{"type":27,"value":341},"    includes: [ ",{"type":18,"tag":174,"props":343,"children":344},{"style":201},[345],{"type":27,"value":327},{"type":18,"tag":174,"props":347,"children":348},{"style":218},[349],{"type":27,"value":350}," ],\n",{"type":18,"tag":174,"props":352,"children":354},{"class":176,"line":353},7,[355,360,364],{"type":18,"tag":174,"props":356,"children":357},{"style":218},[358],{"type":27,"value":359},"    contentTypes: [ ",{"type":18,"tag":174,"props":361,"children":362},{"style":201},[363],{"type":27,"value":327},{"type":18,"tag":174,"props":365,"children":366},{"style":218},[367],{"type":27,"value":368}," ]\n",{"type":18,"tag":174,"props":370,"children":372},{"class":176,"line":371},8,[373],{"type":18,"tag":174,"props":374,"children":375},{"style":218},[376],{"type":27,"value":377},"  })\n",{"type":18,"tag":174,"props":379,"children":381},{"class":176,"line":380},9,[382],{"type":18,"tag":174,"props":383,"children":384},{"style":218},[385],{"type":27,"value":386},"})\n",{"type":18,"tag":23,"props":388,"children":389},{},[390],{"type":27,"value":391},"The individual elements of a dynamic component are covered below.",{"type":18,"tag":93,"props":393,"children":395},{"id":394},"the-mapping-function",[396],{"type":27,"value":397},"The mapping function",{"type":18,"tag":23,"props":399,"children":400},{},[401],{"type":27,"value":402},"The mapping function takes the raw response from the drupal JSON API and returns a standard structure that ultimately ties the dynamic component with a Vue component.",{"type":18,"tag":164,"props":404,"children":406},{"className":166,"code":405,"language":168,"meta":10,"style":10},"import { TideDynamicPageComponent } from '@dpc-sdp/ripple-tide-api/types'\n\ninterface IMyDynamicComponentProps {\n  someProp1: boolean,\n  someProp2: string\n}\n\nconst mappingFunction = (field): TideDynamicPageComponent\u003CIMyDynamicComponentProps> => {\n  return {\n    // This should be the name to the Vue component you created\n    component: 'MyDynamicComponent',\n\n    // Always include a unique id\n    id: field.drupal_internal__id.toString(),\n\n    // Some components have titles above them, which you can add here. This is optional\n    title: field.field_paragraph_title,\n\n    // These props will be passed to `MyDynamicComponent`\n    props: {\n      someProp1: false,\n      someProp2: field.field_paragraph_description\n    }\n  }\n}\n",[407],{"type":18,"tag":119,"props":408,"children":409},{"__ignoreMap":10},[410,433,440,457,480,497,505,512,574,586,595,613,621,630,649,657,666,675,683,692,701,719,728,737,746],{"type":18,"tag":174,"props":411,"children":412},{"class":176,"line":177},[413,418,423,428],{"type":18,"tag":174,"props":414,"children":415},{"style":201},[416],{"type":27,"value":417},"import",{"type":18,"tag":174,"props":419,"children":420},{"style":218},[421],{"type":27,"value":422}," { TideDynamicPageComponent } ",{"type":18,"tag":174,"props":424,"children":425},{"style":201},[426],{"type":27,"value":427},"from",{"type":18,"tag":174,"props":429,"children":430},{"style":282},[431],{"type":27,"value":432}," '@dpc-sdp/ripple-tide-api/types'\n",{"type":18,"tag":174,"props":434,"children":435},{"class":176,"line":187},[436],{"type":18,"tag":174,"props":437,"children":438},{"emptyLinePlaceholder":191},[439],{"type":27,"value":194},{"type":18,"tag":174,"props":441,"children":442},{"class":176,"line":197},[443,448,453],{"type":18,"tag":174,"props":444,"children":445},{"style":201},[446],{"type":27,"value":447},"interface",{"type":18,"tag":174,"props":449,"children":450},{"style":212},[451],{"type":27,"value":452}," IMyDynamicComponentProps",{"type":18,"tag":174,"props":454,"children":455},{"style":218},[456],{"type":27,"value":262},{"type":18,"tag":174,"props":458,"children":459},{"class":176,"line":265},[460,465,469,475],{"type":18,"tag":174,"props":461,"children":462},{"style":234},[463],{"type":27,"value":464},"  someProp1",{"type":18,"tag":174,"props":466,"children":467},{"style":201},[468],{"type":27,"value":242},{"type":18,"tag":174,"props":470,"children":472},{"style":471},"--shiki-default:#005CC5",[473],{"type":27,"value":474}," boolean",{"type":18,"tag":174,"props":476,"children":477},{"style":218},[478],{"type":27,"value":479},",\n",{"type":18,"tag":174,"props":481,"children":482},{"class":176,"line":293},[483,488,492],{"type":18,"tag":174,"props":484,"children":485},{"style":234},[486],{"type":27,"value":487},"  someProp2",{"type":18,"tag":174,"props":489,"children":490},{"style":201},[491],{"type":27,"value":242},{"type":18,"tag":174,"props":493,"children":494},{"style":471},[495],{"type":27,"value":496}," string\n",{"type":18,"tag":174,"props":498,"children":499},{"class":176,"line":335},[500],{"type":18,"tag":174,"props":501,"children":502},{"style":218},[503],{"type":27,"value":504},"}\n",{"type":18,"tag":174,"props":506,"children":507},{"class":176,"line":353},[508],{"type":18,"tag":174,"props":509,"children":510},{"emptyLinePlaceholder":191},[511],{"type":27,"value":194},{"type":18,"tag":174,"props":513,"children":514},{"class":176,"line":371},[515,520,525,530,534,538,542,546,551,556,561,566,570],{"type":18,"tag":174,"props":516,"children":517},{"style":201},[518],{"type":27,"value":519},"const",{"type":18,"tag":174,"props":521,"children":522},{"style":212},[523],{"type":27,"value":524}," mappingFunction",{"type":18,"tag":174,"props":526,"children":527},{"style":201},[528],{"type":27,"value":529}," =",{"type":18,"tag":174,"props":531,"children":532},{"style":218},[533],{"type":27,"value":231},{"type":18,"tag":174,"props":535,"children":536},{"style":234},[537],{"type":27,"value":309},{"type":18,"tag":174,"props":539,"children":540},{"style":218},[541],{"type":27,"value":72},{"type":18,"tag":174,"props":543,"children":544},{"style":201},[545],{"type":27,"value":242},{"type":18,"tag":174,"props":547,"children":548},{"style":212},[549],{"type":27,"value":550}," TideDynamicPageComponent",{"type":18,"tag":174,"props":552,"children":553},{"style":218},[554],{"type":27,"value":555},"\u003C",{"type":18,"tag":174,"props":557,"children":558},{"style":212},[559],{"type":27,"value":560},"IMyDynamicComponentProps",{"type":18,"tag":174,"props":562,"children":563},{"style":218},[564],{"type":27,"value":565},"> ",{"type":18,"tag":174,"props":567,"children":568},{"style":201},[569],{"type":27,"value":257},{"type":18,"tag":174,"props":571,"children":572},{"style":218},[573],{"type":27,"value":262},{"type":18,"tag":174,"props":575,"children":576},{"class":176,"line":380},[577,582],{"type":18,"tag":174,"props":578,"children":579},{"style":201},[580],{"type":27,"value":581},"  return",{"type":18,"tag":174,"props":583,"children":584},{"style":218},[585],{"type":27,"value":262},{"type":18,"tag":174,"props":587,"children":589},{"class":176,"line":588},10,[590],{"type":18,"tag":174,"props":591,"children":592},{"style":181},[593],{"type":27,"value":594},"    // This should be the name to the Vue component you created\n",{"type":18,"tag":174,"props":596,"children":598},{"class":176,"line":597},11,[599,604,609],{"type":18,"tag":174,"props":600,"children":601},{"style":218},[602],{"type":27,"value":603},"    component: ",{"type":18,"tag":174,"props":605,"children":606},{"style":282},[607],{"type":27,"value":608},"'MyDynamicComponent'",{"type":18,"tag":174,"props":610,"children":611},{"style":218},[612],{"type":27,"value":479},{"type":18,"tag":174,"props":614,"children":616},{"class":176,"line":615},12,[617],{"type":18,"tag":174,"props":618,"children":619},{"emptyLinePlaceholder":191},[620],{"type":27,"value":194},{"type":18,"tag":174,"props":622,"children":624},{"class":176,"line":623},13,[625],{"type":18,"tag":174,"props":626,"children":627},{"style":181},[628],{"type":27,"value":629},"    // Always include a unique id\n",{"type":18,"tag":174,"props":631,"children":633},{"class":176,"line":632},14,[634,639,644],{"type":18,"tag":174,"props":635,"children":636},{"style":218},[637],{"type":27,"value":638},"    id: field.drupal_internal__id.",{"type":18,"tag":174,"props":640,"children":641},{"style":212},[642],{"type":27,"value":643},"toString",{"type":18,"tag":174,"props":645,"children":646},{"style":218},[647],{"type":27,"value":648},"(),\n",{"type":18,"tag":174,"props":650,"children":652},{"class":176,"line":651},15,[653],{"type":18,"tag":174,"props":654,"children":655},{"emptyLinePlaceholder":191},[656],{"type":27,"value":194},{"type":18,"tag":174,"props":658,"children":660},{"class":176,"line":659},16,[661],{"type":18,"tag":174,"props":662,"children":663},{"style":181},[664],{"type":27,"value":665},"    // Some components have titles above them, which you can add here. This is optional\n",{"type":18,"tag":174,"props":667,"children":669},{"class":176,"line":668},17,[670],{"type":18,"tag":174,"props":671,"children":672},{"style":218},[673],{"type":27,"value":674},"    title: field.field_paragraph_title,\n",{"type":18,"tag":174,"props":676,"children":678},{"class":176,"line":677},18,[679],{"type":18,"tag":174,"props":680,"children":681},{"emptyLinePlaceholder":191},[682],{"type":27,"value":194},{"type":18,"tag":174,"props":684,"children":686},{"class":176,"line":685},19,[687],{"type":18,"tag":174,"props":688,"children":689},{"style":181},[690],{"type":27,"value":691},"    // These props will be passed to `MyDynamicComponent`\n",{"type":18,"tag":174,"props":693,"children":695},{"class":176,"line":694},20,[696],{"type":18,"tag":174,"props":697,"children":698},{"style":218},[699],{"type":27,"value":700},"    props: {\n",{"type":18,"tag":174,"props":702,"children":704},{"class":176,"line":703},21,[705,710,715],{"type":18,"tag":174,"props":706,"children":707},{"style":218},[708],{"type":27,"value":709},"      someProp1: ",{"type":18,"tag":174,"props":711,"children":712},{"style":471},[713],{"type":27,"value":714},"false",{"type":18,"tag":174,"props":716,"children":717},{"style":218},[718],{"type":27,"value":479},{"type":18,"tag":174,"props":720,"children":722},{"class":176,"line":721},22,[723],{"type":18,"tag":174,"props":724,"children":725},{"style":218},[726],{"type":27,"value":727},"      someProp2: field.field_paragraph_description\n",{"type":18,"tag":174,"props":729,"children":731},{"class":176,"line":730},23,[732],{"type":18,"tag":174,"props":733,"children":734},{"style":218},[735],{"type":27,"value":736},"    }\n",{"type":18,"tag":174,"props":738,"children":740},{"class":176,"line":739},24,[741],{"type":18,"tag":174,"props":742,"children":743},{"style":218},[744],{"type":27,"value":745},"  }\n",{"type":18,"tag":174,"props":747,"children":749},{"class":176,"line":748},25,[750],{"type":18,"tag":174,"props":751,"children":752},{"style":218},[753],{"type":27,"value":504},{"type":18,"tag":93,"props":755,"children":757},{"id":756},"the-vue-component",[758],{"type":27,"value":759},"The Vue component",{"type":18,"tag":23,"props":761,"children":762},{},[763],{"type":27,"value":764},"Create a Vue component that will render your dynamic component.",{"type":18,"tag":23,"props":766,"children":767},{},[768],{"type":27,"value":769},"This component will be rendered each time your component appears on a page and will receive any props that were specified from the mapping function.",{"type":18,"tag":19,"props":771,"children":772},{},[773,792],{"type":18,"tag":23,"props":774,"children":775},{},[776,782,784,790],{"type":18,"tag":777,"props":778,"children":779},"strong",{},[780],{"type":27,"value":781},"Important note",{"type":27,"value":783},": For this to work, your component needs to be registered globally. The simplest way to do this is to add the component to the ",{"type":18,"tag":119,"props":785,"children":787},{"className":786},[],[788],{"type":27,"value":789},"/components/global",{"type":27,"value":791}," folder in your layer.",{"type":18,"tag":23,"props":793,"children":794},{},[795],{"type":27,"value":796},"Because they are global it's also important to choose non generic names so that they don't clash and overwrite other dynamic components",{"type":18,"tag":164,"props":798,"children":800},{"className":166,"code":799,"language":168,"meta":10,"style":10},"// /components/global/MyDynamicComponent.vue\n\n\u003Cscript setup lang=\"ts\">\ndefineProps\u003C{\n  someProp1: boolean,\n  someProp2: string\n}>()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    {{someProp2}}\n  \u003C/div>\n\u003C/template>\n",[801],{"type":18,"tag":119,"props":802,"children":803},{"__ignoreMap":10},[804,812,819,846,859,878,893,901,918,925,941,958,966,982],{"type":18,"tag":174,"props":805,"children":806},{"class":176,"line":177},[807],{"type":18,"tag":174,"props":808,"children":809},{"style":181},[810],{"type":27,"value":811},"// /components/global/MyDynamicComponent.vue\n",{"type":18,"tag":174,"props":813,"children":814},{"class":176,"line":187},[815],{"type":18,"tag":174,"props":816,"children":817},{"emptyLinePlaceholder":191},[818],{"type":27,"value":194},{"type":18,"tag":174,"props":820,"children":821},{"class":176,"line":197},[822,826,831,836,841],{"type":18,"tag":174,"props":823,"children":824},{"style":201},[825],{"type":27,"value":555},{"type":18,"tag":174,"props":827,"children":828},{"style":218},[829],{"type":27,"value":830},"script setup lang",{"type":18,"tag":174,"props":832,"children":833},{"style":201},[834],{"type":27,"value":835},"=",{"type":18,"tag":174,"props":837,"children":838},{"style":282},[839],{"type":27,"value":840},"\"ts\"",{"type":18,"tag":174,"props":842,"children":843},{"style":201},[844],{"type":27,"value":845},">\n",{"type":18,"tag":174,"props":847,"children":848},{"class":176,"line":265},[849,854],{"type":18,"tag":174,"props":850,"children":851},{"style":212},[852],{"type":27,"value":853},"defineProps",{"type":18,"tag":174,"props":855,"children":856},{"style":218},[857],{"type":27,"value":858},"\u003C{\n",{"type":18,"tag":174,"props":860,"children":861},{"class":176,"line":293},[862,866,870,874],{"type":18,"tag":174,"props":863,"children":864},{"style":234},[865],{"type":27,"value":464},{"type":18,"tag":174,"props":867,"children":868},{"style":201},[869],{"type":27,"value":242},{"type":18,"tag":174,"props":871,"children":872},{"style":471},[873],{"type":27,"value":474},{"type":18,"tag":174,"props":875,"children":876},{"style":218},[877],{"type":27,"value":479},{"type":18,"tag":174,"props":879,"children":880},{"class":176,"line":335},[881,885,889],{"type":18,"tag":174,"props":882,"children":883},{"style":234},[884],{"type":27,"value":487},{"type":18,"tag":174,"props":886,"children":887},{"style":201},[888],{"type":27,"value":242},{"type":18,"tag":174,"props":890,"children":891},{"style":471},[892],{"type":27,"value":496},{"type":18,"tag":174,"props":894,"children":895},{"class":176,"line":353},[896],{"type":18,"tag":174,"props":897,"children":898},{"style":218},[899],{"type":27,"value":900},"}>()\n",{"type":18,"tag":174,"props":902,"children":903},{"class":176,"line":371},[904,909,914],{"type":18,"tag":174,"props":905,"children":906},{"style":201},[907],{"type":27,"value":908},"\u003C/",{"type":18,"tag":174,"props":910,"children":911},{"style":218},[912],{"type":27,"value":913},"script",{"type":18,"tag":174,"props":915,"children":916},{"style":201},[917],{"type":27,"value":845},{"type":18,"tag":174,"props":919,"children":920},{"class":176,"line":380},[921],{"type":18,"tag":174,"props":922,"children":923},{"emptyLinePlaceholder":191},[924],{"type":27,"value":194},{"type":18,"tag":174,"props":926,"children":927},{"class":176,"line":588},[928,932,937],{"type":18,"tag":174,"props":929,"children":930},{"style":218},[931],{"type":27,"value":555},{"type":18,"tag":174,"props":933,"children":934},{"style":212},[935],{"type":27,"value":936},"template",{"type":18,"tag":174,"props":938,"children":939},{"style":218},[940],{"type":27,"value":845},{"type":18,"tag":174,"props":942,"children":943},{"class":176,"line":597},[944,949,954],{"type":18,"tag":174,"props":945,"children":946},{"style":218},[947],{"type":27,"value":948},"  \u003C",{"type":18,"tag":174,"props":950,"children":951},{"style":212},[952],{"type":27,"value":953},"div",{"type":18,"tag":174,"props":955,"children":956},{"style":218},[957],{"type":27,"value":845},{"type":18,"tag":174,"props":959,"children":960},{"class":176,"line":615},[961],{"type":18,"tag":174,"props":962,"children":963},{"style":218},[964],{"type":27,"value":965},"    {{someProp2}}\n",{"type":18,"tag":174,"props":967,"children":968},{"class":176,"line":623},[969,974,978],{"type":18,"tag":174,"props":970,"children":971},{"style":201},[972],{"type":27,"value":973},"  \u003C/",{"type":18,"tag":174,"props":975,"children":976},{"style":218},[977],{"type":27,"value":953},{"type":18,"tag":174,"props":979,"children":980},{"style":201},[981],{"type":27,"value":845},{"type":18,"tag":174,"props":983,"children":984},{"class":176,"line":632},[985,989,993],{"type":18,"tag":174,"props":986,"children":987},{"style":201},[988],{"type":27,"value":908},{"type":18,"tag":174,"props":990,"children":991},{"style":218},[992],{"type":27,"value":936},{"type":18,"tag":174,"props":994,"children":995},{"style":201},[996],{"type":27,"value":845},{"type":18,"tag":93,"props":998,"children":1000},{"id":999},"the-list-of-includes",[1001],{"type":27,"value":1002},"The list of includes",{"type":18,"tag":23,"props":1004,"children":1005},{},[1006],{"type":27,"value":1007},"Each dynamic component should specify an array of 'includes' that it needs in order to function properly.",{"type":18,"tag":164,"props":1009,"children":1011},{"className":166,"code":1010,"language":168,"meta":10,"style":10},"const includes = [\n  'field_landing_page_component.field_paragraph_accordion'\n]\n",[1012],{"type":18,"tag":119,"props":1013,"children":1014},{"__ignoreMap":10},[1015,1036,1044],{"type":18,"tag":174,"props":1016,"children":1017},{"class":176,"line":177},[1018,1022,1027,1031],{"type":18,"tag":174,"props":1019,"children":1020},{"style":201},[1021],{"type":27,"value":519},{"type":18,"tag":174,"props":1023,"children":1024},{"style":471},[1025],{"type":27,"value":1026}," includes",{"type":18,"tag":174,"props":1028,"children":1029},{"style":201},[1030],{"type":27,"value":529},{"type":18,"tag":174,"props":1032,"children":1033},{"style":218},[1034],{"type":27,"value":1035}," [\n",{"type":18,"tag":174,"props":1037,"children":1038},{"class":176,"line":187},[1039],{"type":18,"tag":174,"props":1040,"children":1041},{"style":282},[1042],{"type":27,"value":1043},"  'field_landing_page_component.field_paragraph_accordion'\n",{"type":18,"tag":174,"props":1045,"children":1046},{"class":176,"line":197},[1047],{"type":18,"tag":174,"props":1048,"children":1049},{"style":218},[1050],{"type":27,"value":1051},"]\n",{"type":18,"tag":93,"props":1053,"children":1055},{"id":1054},"the-list-of-content-types",[1056],{"type":27,"value":1057},"The list of content types",{"type":18,"tag":23,"props":1059,"children":1060},{},[1061],{"type":27,"value":1062},"Each dynamic component should specify an array of 'content types' that the dynamic component can appear on.",{"type":18,"tag":164,"props":1064,"children":1066},{"className":166,"code":1065,"language":168,"meta":10,"style":10},"const contentTypes = [\n  'landing_page',\n  'some_content_type'\n]\n",[1067],{"type":18,"tag":119,"props":1068,"children":1069},{"__ignoreMap":10},[1070,1090,1102,1110],{"type":18,"tag":174,"props":1071,"children":1072},{"class":176,"line":177},[1073,1077,1082,1086],{"type":18,"tag":174,"props":1074,"children":1075},{"style":201},[1076],{"type":27,"value":519},{"type":18,"tag":174,"props":1078,"children":1079},{"style":471},[1080],{"type":27,"value":1081}," contentTypes",{"type":18,"tag":174,"props":1083,"children":1084},{"style":201},[1085],{"type":27,"value":529},{"type":18,"tag":174,"props":1087,"children":1088},{"style":218},[1089],{"type":27,"value":1035},{"type":18,"tag":174,"props":1091,"children":1092},{"class":176,"line":187},[1093,1098],{"type":18,"tag":174,"props":1094,"children":1095},{"style":282},[1096],{"type":27,"value":1097},"  'landing_page'",{"type":18,"tag":174,"props":1099,"children":1100},{"style":218},[1101],{"type":27,"value":479},{"type":18,"tag":174,"props":1103,"children":1104},{"class":176,"line":197},[1105],{"type":18,"tag":174,"props":1106,"children":1107},{"style":282},[1108],{"type":27,"value":1109},"  'some_content_type'\n",{"type":18,"tag":174,"props":1111,"children":1112},{"class":176,"line":265},[1113],{"type":18,"tag":174,"props":1114,"children":1115},{"style":218},[1116],{"type":27,"value":1051},{"type":18,"tag":1118,"props":1119,"children":1120},"style",{},[1121],{"type":27,"value":1122},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":10,"searchDepth":187,"depth":187,"links":1124},[1125,1126,1127,1128,1129],{"id":95,"depth":187,"text":98},{"id":394,"depth":187,"text":397},{"id":756,"depth":187,"text":759},{"id":999,"depth":187,"text":1002},{"id":1054,"depth":187,"text":1057},"markdown","content:framework:3.guides:5.dynamic-components.md","content","framework/3.guides/5.dynamic-components.md","md",["ShallowRef",1136],["ShallowReactive",1137],{"/framework/guides/dynamic-components":1138},[1139,1149],{"_path":1140,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":1141,"description":1142,"layout":13,"links":1143,"_type":1130,"_id":1147,"_source":1132,"_file":1148,"_extension":1134},"/framework/guides/creating-new-layers","Creating new layers","Implementing custom functionality through layers",[1144],{"text":1145,"url":1146},"Nuxt layers documentation","https://nuxt.com/docs/getting-started/layers","content:framework:3.guides:5.creating-new-layers.md","framework/3.guides/5.creating-new-layers.md",{"_path":1150,"_dir":1151,"_draft":9,"_partial":9,"_locale":10,"title":1152,"description":1153,"layout":13,"_type":1130,"_id":1154,"_source":1132,"_file":1155,"_extension":1134},"/framework/core-modules","framework","Core modules","A listing of all current core Ripple layers and packages","content:framework:4.core-modules.md","framework/4.core-modules.md",["ShallowRef",1157],{},[1159,1164,1412],{"title":1160,"_path":1161,"icon":1162,"layout":1163},"Ripple Design System","/","carbon:home","home",{"title":1165,"_path":1166,"children":1167},"Design System","/design-system",[1168,1184,1200,1230,1264],{"title":1169,"_path":1170,"children":1171},"About","/design-system/about",[1172,1175,1178,1181],{"title":1173,"_path":1174,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":1176,"_path":1177,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":1179,"_path":1180,"layout":13},"Support","/design-system/about/getting-support",{"title":1182,"_path":1183,"layout":13},"Contributing","/design-system/about/contributing",{"title":1185,"_path":1186,"children":1187},"Design","/design-system/design",[1188,1191,1194,1197],{"title":1189,"_path":1190,"layout":13},"Getting started","/design-system/design/getting-started",{"title":1192,"_path":1193,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":1195,"_path":1196,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":1198,"_path":1199,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":1201,"_path":1202,"children":1203},"Develop","/design-system/develop",[1204,1206,1208,1211],{"title":1189,"_path":1205,"layout":13},"/design-system/develop/getting-started",{"title":1182,"_path":1207,"layout":13},"/design-system/develop/contributing",{"title":1209,"_path":1210,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":1212,"_path":1213,"children":1214,"layout":13},"Usage","/design-system/develop/usage",[1215,1218,1221,1224,1227],{"title":1216,"_path":1217,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":1219,"_path":1220,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":1222,"_path":1223,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":1225,"_path":1226,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":1228,"_path":1229,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":1231,"_path":1232,"children":1233},"Styles","/design-system/styles",[1234,1237,1240,1243,1246,1249,1252,1255,1258,1261],{"title":1235,"_path":1236,"layout":13},"Colour","/design-system/styles/colour",{"title":1238,"_path":1239,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":1241,"_path":1242,"layout":13},"Grid","/design-system/styles/grid",{"title":1244,"_path":1245,"layout":13},"Icons","/design-system/styles/icons",{"title":1247,"_path":1248,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":1250,"_path":1251,"layout":13},"Layout","/design-system/styles/layout",{"title":1253,"_path":1254,"layout":13},"Logo","/design-system/styles/logo",{"title":1256,"_path":1257,"layout":13},"Motion","/design-system/styles/motion",{"title":1259,"_path":1260,"layout":13},"Spacing","/design-system/styles/spacing",{"title":1262,"_path":1263,"layout":13},"Typography","/design-system/styles/typography",{"title":1265,"_path":1266,"children":1267},"Components","/design-system/components",[1268,1271,1274,1277,1280,1283,1286,1289,1292,1295,1298,1301,1304,1307,1310,1313,1316,1319,1322,1325,1328,1331,1334,1337,1340,1343,1346,1349,1352,1355,1358,1361,1364,1367,1370,1373,1376,1379,1382,1385,1388,1391,1394,1397,1400,1403,1406,1409],{"title":1269,"_path":1270,"layout":13},"Accordion","/design-system/components/accordion",{"title":1272,"_path":1273,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":1275,"_path":1276,"layout":13},"Alert","/design-system/components/alert",{"title":1278,"_path":1279,"layout":13},"Block quote","/design-system/components/block-quote",{"title":1281,"_path":1282,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":1284,"_path":1285,"layout":13},"Button","/design-system/components/button",{"title":1287,"_path":1288,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":1290,"_path":1291,"layout":13},"Callout","/design-system/components/callout",{"title":1293,"_path":1294,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":1296,"_path":1297,"layout":13},"Card","/design-system/components/card",{"title":1299,"_path":1300,"layout":13},"Carousel","/design-system/components/carousel",{"title":1302,"_path":1303,"layout":13},"Category grid","/design-system/components/category-grid",{"title":1305,"_path":1306,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":1308,"_path":1309,"layout":13},"Chip","/design-system/components/chip",{"title":1311,"_path":1312,"layout":13},"Contact us","/design-system/components/contact-us",{"title":1314,"_path":1315,"layout":13},"Date input","/design-system/components/date-input",{"title":1317,"_path":1318,"layout":13},"Detail list","/design-system/components/detail-list",{"title":1320,"_path":1321,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":1323,"_path":1324,"layout":13},"File","/design-system/components/file",{"title":1326,"_path":1327,"layout":13},"Footer","/design-system/components/footer",{"title":1329,"_path":1330,"layout":13},"Form","/design-system/components/form",{"title":1332,"_path":1333,"layout":13},"Form alert","/design-system/components/form-alert",{"title":1335,"_path":1336,"layout":13},"Header","/design-system/components/header",{"title":1338,"_path":1339,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":1341,"_path":1342,"layout":13},"Input field","/design-system/components/input-field",{"title":1344,"_path":1345,"layout":13},"Key dates","/design-system/components/key-dates",{"title":1347,"_path":1348,"layout":13},"Media","/design-system/components/media",{"title":1350,"_path":1351,"layout":13},"Media embed","/design-system/components/media-embed",{"title":1353,"_path":1354,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":1356,"_path":1357,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":1359,"_path":1360,"layout":13},"Option button","/design-system/components/option-button",{"title":1362,"_path":1363,"layout":13},"Page action","/design-system/components/page-action",{"title":1365,"_path":1366,"layout":13},"Pagination","/design-system/components/pagination",{"title":1368,"_path":1369,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":1371,"_path":1372,"layout":13},"Profile","/design-system/components/profile",{"title":1374,"_path":1375,"layout":13},"Radio button","/design-system/components/radio-button",{"title":1377,"_path":1378,"layout":13},"Related links","/design-system/components/related-links",{"title":1380,"_path":1381,"layout":13},"Results listing","/design-system/components/results-listing",{"title":1383,"_path":1384,"layout":13},"Search bar","/design-system/components/search-bar",{"title":1386,"_path":1387,"layout":13},"Skip link","/design-system/components/skip-link",{"title":1389,"_path":1390,"layout":13},"Social share","/design-system/components/social-share",{"title":1392,"_path":1393,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":1395,"_path":1396,"layout":13},"Table","/design-system/components/table",{"title":1398,"_path":1399,"layout":13},"Tabs","/design-system/components/tabs",{"title":1401,"_path":1402,"layout":13},"Tag","/design-system/components/tag",{"title":1404,"_path":1405,"layout":13},"Text area","/design-system/components/text-area",{"title":1407,"_path":1408,"layout":13},"Timeline","/design-system/components/timeline",{"title":1410,"_path":1411,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":1413,"_path":1414,"children":1415,"layout":13},"Ripple Framework","/framework",[1416,1417,1434,1452],{"title":1413,"_path":1414,"layout":13},{"title":1418,"_path":1419,"children":1420},"Key Concepts","/framework/key-concepts",[1421,1423,1426,1429,1432],{"title":1222,"_path":1422,"layout":13},"/framework/key-concepts/nuxt",{"title":1424,"_path":1425,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":1427,"_path":1428,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":1430,"_path":1431,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":1433,"_path":32,"layout":13},"Dynamic components",{"title":1435,"_path":1436,"children":1437},"Guides","/framework/guides",[1438,1441,1444,1447,1450,1451],{"title":1439,"_path":1440,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":1442,"_path":1443,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":1445,"_path":1446,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":1448,"_path":1449,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":1141,"_path":1140,"layout":13},{"title":11,"_path":7,"layout":13},{"title":1152,"_path":1150,"layout":13},["Reactive",1454],["Set"],["Reactive",1456],{"module-navigation":1457},null,1714695649541]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/framework/guides/migrating/_payload.json b/framework/guides/migrating/_payload.json
index a58c01938f..bd65820774 100644
--- a/framework/guides/migrating/_payload.json
+++ b/framework/guides/migrating/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,27,50],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",false,{"id":9,"text":10,"url":9,"active":7,"items":11},"/framework/key-concepts","Key Concepts",[12,15,18,21,24],{"id":13,"text":14,"url":13,"active":7,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":22,"text":23,"url":22,"active":7,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":25,"text":26,"url":25,"active":7,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":28,"text":29,"url":28,"active":30,"items":31},"/framework/guides","Guides",true,[32,35,38,41,44,47],{"id":33,"text":34,"url":33,"active":30,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":39,"text":40,"url":39,"active":7,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":42,"text":43,"url":42,"active":7,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":45,"text":46,"url":45,"active":7,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":48,"text":49,"url":48,"active":7,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":51,"text":52,"url":51,"active":7,"items":-1},"/framework/core-modules","Core modules",1714695151267]
\ No newline at end of file
+[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,27,50],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",false,{"id":9,"text":10,"url":9,"active":7,"items":11},"/framework/key-concepts","Key Concepts",[12,15,18,21,24],{"id":13,"text":14,"url":13,"active":7,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":22,"text":23,"url":22,"active":7,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":25,"text":26,"url":25,"active":7,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":28,"text":29,"url":28,"active":30,"items":31},"/framework/guides","Guides",true,[32,35,38,41,44,47],{"id":33,"text":34,"url":33,"active":30,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":39,"text":40,"url":39,"active":7,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":42,"text":43,"url":42,"active":7,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":45,"text":46,"url":45,"active":7,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":48,"text":49,"url":48,"active":7,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":51,"text":52,"url":51,"active":7,"items":-1},"/framework/core-modules","Core modules",1714695649506]
\ No newline at end of file
diff --git a/framework/guides/migrating/index.html b/framework/guides/migrating/index.html
index 61dd553cd6..713bada70f 100644
--- a/framework/guides/migrating/index.html
+++ b/framework/guides/migrating/index.html
@@ -23,68 +23,68 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.lp_k9Hpd.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseEm.D-92YCoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.Czpq-HHw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseEm.jWeQl8xp.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Nuxt</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/api-endpoints" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>API endpoints</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dynamic components</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/guides-toggle"><span class="rpl-vertical-nav__toggle-text">Guides</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/guides-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/migrating" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Migrating from Ripple 1.x</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/new-sites" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Setting up a new site</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/brand-application" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Applying theme and brand</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Creating content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-new-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Creating new layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Adding a new dynamic component</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><!----><a href="/framework/core-modules" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Core modules</span><!--]--></a></li><!--]--></ul></nav><a href="/design-system/about/what-is-ripple" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Design System<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Migrating from Ripple 1.x</h1><p class="rpl-type-p-large" data-v-3163c6df>This guide is intended to outline the process of updating SDP sites using Ripple 1.x to Ripple 2. It is intended for developers tasked with porting Ripple 1 sites and features to Ripple 2.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><h2 class="rpl-type-h2 docs-h2" id="background" data-v-fff5b905><a href="#background" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Background<!--]--></a></h2><p><!--[-->Ripple 2 is a complete rewrite of both the design system and the Nuxt modules used to create SDP sites with it. It is a breaking change with the processes used to create sites and functionality used in Ripple 1. This was required due to the following reasons:<!--]--></p><ul><!--[--><li><!--[-->Latest versions of Vue and Nuxt 3 introducing breaking changes<!--]--></li><li><!--[-->Deprecation of IE11 support allowing us to support modern browser features<!--]--></li><li><!--[-->Opportunity to adopt best practices such as Typescript and modern CSS<!--]--></li><li><!--[-->Build up of technical and design debt<!--]--></li><li><!--[-->Improvements to the design allowing better theming and accessibility<!--]--></li><!--]--></ul><blockquote class="rpl-callout"><!--[--><p><!--[-->Due to breaking changes between versions 2 and 3 of both Vue and Nuxt there is no automated way to upgrade Ripple components and sites.
 <em><!--[-->Custom functionality built on Ripple 1 will need to be rewritten to use Ripple 2 API’s and design.<!--]--></em><!--]--></p><!--]--></blockquote><h2 class="rpl-type-h2 docs-h2" id="migrating-your-site" data-v-fff5b905><a href="#migrating-your-site" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Migrating your site<!--]--></a></h2><p><!--[-->If your site is supported by the SDP team for upgrades, the initial site upgrade will be handled by the SDP team. The process will be as follows:<!--]--></p><ul><!--[--><li><!--[-->a new empty V2 branch will be created in the site repository<!--]--></li><li><!--[-->a fresh install of Ripple 2 will be added to the site<!--]--></li><li><!--[-->all required environment variables will be added to the project to connect the site to the Tide content backend<!--]--></li><li><!--[-->the V2 branch will be setup to be served from behind the Section.io CDN<!--]--></li><!--]--></ul><p><!--[-->The migration of the following will be out of scope for sites without an MoU for SDP support:<!--]--></p><ul><!--[--><li><!--[-->Custom content types<!--]--></li><li><!--[-->Custom user facing components<!--]--></li><li><!--[-->Custom pages<!--]--></li><li><!--[-->Extensive theme customisation outside of those documented in the theming guide<!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="migrating-features-from-ripple-1x" data-v-fff5b905><a href="#migrating-features-from-ripple-1x" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Migrating features from Ripple 1.x<!--]--></a></h2><p><!--[-->Please review the following concepts before proceeding:<!--]--></p><ul><!--[--><li><!--[--><a href="/framework/key-concepts/content-types" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Content types<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/framework/key-concepts/api-endpoints" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->API mapping<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="/framework/key-concepts/dynamic-components" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Dynamic components<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><h2 class="rpl-type-h3 docs-h3" id="content-types" data-v-ea525968><a href="#content-types" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Content types<!--]--></a></h2><p><!--[-->Content types in Tide allow for defining custom fields that can be returned via the Drupal JSON API. Because SDP sites are headless, we need to tell Ripple how to render each custom content type on the front end.<!--]--></p><p><!--[-->In Ripple 1.x, each content type was added through the convention of adding a folder named tide and each content type as a subfolder. See <a href="https://github.com/dpc-sdp/ripple/tree/develop/examples/basic-examples/tide/modules/example-content-type" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Ripple 1 example<!--]--><!--]--><!----><!--]--></a>.
-The mapping of the tide API response was done through <a href="https://github.com/dpc-sdp/ripple/blob/develop/packages/ripple-nuxt-tide/modules/news/tide.config.j" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->tide.config.js<!--]--><!--]--><!----><!--]--></a>. The JSON API response was returned in its entirety and mapping the Drupal fields to Ripple components was done through the Page component.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[-->In Ripple 2.x we move the mapping of data to the Nuxt server layer. This allows us to only return the necessary data needed to the end user, reducing the JSON payload from Drupal.<!--]--></p><!--]--></blockquote><p><!--[-->For more information on creating new content types see the guide on <a href="creating-content-types" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->creating content types<!--]--><!--]--><!----><!--]--></a><!--]--></p><h2 class="rpl-type-h3 docs-h3" id="dynamic-components" data-v-ea525968><a href="#dynamic-components" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Dynamic components<!--]--></a></h2><p><!--[-->Tide CMS makes use of <a href="https://www.drupal.org/project/paragraphs" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Drupal paragraphs<!--]--><!--]--><!----><!--]--></a> to structure content types to allow content creators flexibility when composing content. Creating new paragraph types that can be reused for the landing page content or across others is a common customisation task.<!--]--></p><p><!--[-->In Ripple 1, new paragraph support was added through custom mappings <a href="https://github.com/dpc-sdp/ripple/blob/develop/examples/basic-examples/tide/modules/example-override-mapping/tide.config.js" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->See Ripple 1<!--]--><!--]--><!----><!--]--></a><!--]--></p><p><!--[-->In Ripple 2, we need to add similar support - See <a href="dynamic-components" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Guide to creating dynamic components<!--]--><!--]--><!----><!--]--></a><!--]--></p><h2 class="rpl-type-h3 docs-h3" id="search-listing-pages" data-v-ea525968><a href="#search-listing-pages" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Search listing pages<!--]--></a></h2><blockquote class="rpl-callout"><!--[--><p><!--[-->This feature is still in Beta, please see the <a href="https://github.com/dpc-sdp/ripple-framework/discussions/660" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->feature proposal<!--]--><!--]--><!----><!--]--></a> for more information.<!--]--></p><!--]--></blockquote><p><!--[-->Listing pages are pages that contain dynamic lists of links to other pages. These are typically used to generate index pages when there are large amounts of similar items. See <a href="https://www.vic.gov.au/grants" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.vic.gov.au/grants<!--]--><!--]--><!----><!--]--></a>, <a href="https://www.vic.gov.au/victorian-honour-roll-of-women" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.vic.gov.au/victorian-honour-roll-of-women<!--]--><!--]--><!----><!--]--></a> for example.<!--]--></p><p><!--[-->In Ripple 1 there was no dedicated content type for creating listing pages and hence these pages were usually created as static pages in the frontend.<!--]--></p><p><!--[-->In Ripple 2 we intend to move to a standard content type that allows configuring the search experience from the backend. Please see the <a href="https://github.com/dpc-sdp/ripple-framework/discussions/660" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->feature proposal<!--]--><!--]--><!----><!--]--></a> for more info.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/3.guides/1.migrating.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/guides/migrating/_payload.json">[{"state":1,"once":663,"_errors":665,"serverRendered":667,"path":7,"prerenderedAt":668},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":353,"$sdd-globals":368,"$sdd-navigation":370},["ShallowRef",4],["ShallowReactive",5],{"/framework/guides/migrating":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":348,"_id":349,"_source":350,"_file":351,"_extension":352},"/framework/guides/migrating","guides",false,"","Migrating from Ripple 1.x","This guide is intended to outline the process of updating SDP sites using Ripple 1.x to Ripple 2. It is intended for developers tasked with porting Ripple 1 sites and features to Ripple 2.","page",{"type":15,"children":16,"toc":337},"root",[17,26,32,62,77,83,88,111,116,139,145,150,181,187,192,216,224,235,240,254,266,276,282,299,320,325],{"type":18,"tag":19,"props":20,"children":22},"element","h2",{"id":21},"background",[23],{"type":24,"value":25},"text","Background",{"type":18,"tag":27,"props":28,"children":29},"p",{},[30],{"type":24,"value":31},"Ripple 2 is a complete rewrite of both the design system and the Nuxt modules used to create SDP sites with it. It is a breaking change with the processes used to create sites and functionality used in Ripple 1. This was required due to the following reasons:",{"type":18,"tag":33,"props":34,"children":35},"ul",{},[36,42,47,52,57],{"type":18,"tag":37,"props":38,"children":39},"li",{},[40],{"type":24,"value":41},"Latest versions of Vue and Nuxt 3 introducing breaking changes",{"type":18,"tag":37,"props":43,"children":44},{},[45],{"type":24,"value":46},"Deprecation of IE11 support allowing us to support modern browser features",{"type":18,"tag":37,"props":48,"children":49},{},[50],{"type":24,"value":51},"Opportunity to adopt best practices such as Typescript and modern CSS",{"type":18,"tag":37,"props":53,"children":54},{},[55],{"type":24,"value":56},"Build up of technical and design debt",{"type":18,"tag":37,"props":58,"children":59},{},[60],{"type":24,"value":61},"Improvements to the design allowing better theming and accessibility",{"type":18,"tag":63,"props":64,"children":65},"blockquote",{},[66],{"type":18,"tag":27,"props":67,"children":68},{},[69,71],{"type":24,"value":70},"Due to breaking changes between versions 2 and 3 of both Vue and Nuxt there is no automated way to upgrade Ripple components and sites.\n",{"type":18,"tag":72,"props":73,"children":74},"em",{},[75],{"type":24,"value":76},"Custom functionality built on Ripple 1 will need to be rewritten to use Ripple 2 API’s and design.",{"type":18,"tag":19,"props":78,"children":80},{"id":79},"migrating-your-site",[81],{"type":24,"value":82},"Migrating your site",{"type":18,"tag":27,"props":84,"children":85},{},[86],{"type":24,"value":87},"If your site is supported by the SDP team for upgrades, the initial site upgrade will be handled by the SDP team. The process will be as follows:",{"type":18,"tag":33,"props":89,"children":90},{},[91,96,101,106],{"type":18,"tag":37,"props":92,"children":93},{},[94],{"type":24,"value":95},"a new empty V2 branch will be created in the site repository",{"type":18,"tag":37,"props":97,"children":98},{},[99],{"type":24,"value":100},"a fresh install of Ripple 2 will be added to the site",{"type":18,"tag":37,"props":102,"children":103},{},[104],{"type":24,"value":105},"all required environment variables will be added to the project to connect the site to the Tide content backend",{"type":18,"tag":37,"props":107,"children":108},{},[109],{"type":24,"value":110},"the V2 branch will be setup to be served from behind the Section.io CDN",{"type":18,"tag":27,"props":112,"children":113},{},[114],{"type":24,"value":115},"The migration of the following will be out of scope for sites without an MoU for SDP support:",{"type":18,"tag":33,"props":117,"children":118},{},[119,124,129,134],{"type":18,"tag":37,"props":120,"children":121},{},[122],{"type":24,"value":123},"Custom content types",{"type":18,"tag":37,"props":125,"children":126},{},[127],{"type":24,"value":128},"Custom user facing components",{"type":18,"tag":37,"props":130,"children":131},{},[132],{"type":24,"value":133},"Custom pages",{"type":18,"tag":37,"props":135,"children":136},{},[137],{"type":24,"value":138},"Extensive theme customisation outside of those documented in the theming guide",{"type":18,"tag":19,"props":140,"children":142},{"id":141},"migrating-features-from-ripple-1x",[143],{"type":24,"value":144},"Migrating features from Ripple 1.x",{"type":18,"tag":27,"props":146,"children":147},{},[148],{"type":24,"value":149},"Please review the following concepts before proceeding:",{"type":18,"tag":33,"props":151,"children":152},{},[153,163,172],{"type":18,"tag":37,"props":154,"children":155},{},[156],{"type":18,"tag":157,"props":158,"children":160},"a",{"href":159},"/framework/key-concepts/content-types",[161],{"type":24,"value":162},"Content types",{"type":18,"tag":37,"props":164,"children":165},{},[166],{"type":18,"tag":157,"props":167,"children":169},{"href":168},"/framework/key-concepts/api-endpoints",[170],{"type":24,"value":171},"API mapping",{"type":18,"tag":37,"props":173,"children":174},{},[175],{"type":18,"tag":157,"props":176,"children":178},{"href":177},"/framework/key-concepts/dynamic-components",[179],{"type":24,"value":180},"Dynamic components",{"type":18,"tag":182,"props":183,"children":185},"h3",{"id":184},"content-types",[186],{"type":24,"value":162},{"type":18,"tag":27,"props":188,"children":189},{},[190],{"type":24,"value":191},"Content types in Tide allow for defining custom fields that can be returned via the Drupal JSON API. Because SDP sites are headless, we need to tell Ripple how to render each custom content type on the front end.",{"type":18,"tag":27,"props":193,"children":194},{},[195,197,205,207,214],{"type":24,"value":196},"In Ripple 1.x, each content type was added through the convention of adding a folder named tide and each content type as a subfolder. See ",{"type":18,"tag":157,"props":198,"children":202},{"href":199,"rel":200},"https://github.com/dpc-sdp/ripple/tree/develop/examples/basic-examples/tide/modules/example-content-type",[201],"nofollow",[203],{"type":24,"value":204},"Ripple 1 example",{"type":24,"value":206},".\nThe mapping of the tide API response was done through ",{"type":18,"tag":157,"props":208,"children":211},{"href":209,"rel":210},"https://github.com/dpc-sdp/ripple/blob/develop/packages/ripple-nuxt-tide/modules/news/tide.config.j",[201],[212],{"type":24,"value":213},"tide.config.js",{"type":24,"value":215},". The JSON API response was returned in its entirety and mapping the Drupal fields to Ripple components was done through the Page component.",{"type":18,"tag":63,"props":217,"children":218},{},[219],{"type":18,"tag":27,"props":220,"children":221},{},[222],{"type":24,"value":223},"In Ripple 2.x we move the mapping of data to the Nuxt server layer. This allows us to only return the necessary data needed to the end user, reducing the JSON payload from Drupal.",{"type":18,"tag":27,"props":225,"children":226},{},[227,229],{"type":24,"value":228},"For more information on creating new content types see the guide on ",{"type":18,"tag":157,"props":230,"children":232},{"href":231},"creating-content-types",[233],{"type":24,"value":234},"creating content types",{"type":18,"tag":182,"props":236,"children":238},{"id":237},"dynamic-components",[239],{"type":24,"value":180},{"type":18,"tag":27,"props":241,"children":242},{},[243,245,252],{"type":24,"value":244},"Tide CMS makes use of ",{"type":18,"tag":157,"props":246,"children":249},{"href":247,"rel":248},"https://www.drupal.org/project/paragraphs",[201],[250],{"type":24,"value":251},"Drupal paragraphs",{"type":24,"value":253}," to structure content types to allow content creators flexibility when composing content. Creating new paragraph types that can be reused for the landing page content or across others is a common customisation task.",{"type":18,"tag":27,"props":255,"children":256},{},[257,259],{"type":24,"value":258},"In Ripple 1, new paragraph support was added through custom mappings ",{"type":18,"tag":157,"props":260,"children":263},{"href":261,"rel":262},"https://github.com/dpc-sdp/ripple/blob/develop/examples/basic-examples/tide/modules/example-override-mapping/tide.config.js",[201],[264],{"type":24,"value":265},"See Ripple 1",{"type":18,"tag":27,"props":267,"children":268},{},[269,271],{"type":24,"value":270},"In Ripple 2, we need to add similar support - See ",{"type":18,"tag":157,"props":272,"children":273},{"href":237},[274],{"type":24,"value":275},"Guide to creating dynamic components",{"type":18,"tag":182,"props":277,"children":279},{"id":278},"search-listing-pages",[280],{"type":24,"value":281},"Search listing pages",{"type":18,"tag":63,"props":283,"children":284},{},[285],{"type":18,"tag":27,"props":286,"children":287},{},[288,290,297],{"type":24,"value":289},"This feature is still in Beta, please see the ",{"type":18,"tag":157,"props":291,"children":294},{"href":292,"rel":293},"https://github.com/dpc-sdp/ripple-framework/discussions/660",[201],[295],{"type":24,"value":296},"feature proposal",{"type":24,"value":298}," for more information.",{"type":18,"tag":27,"props":300,"children":301},{},[302,304,310,312,318],{"type":24,"value":303},"Listing pages are pages that contain dynamic lists of links to other pages. These are typically used to generate index pages when there are large amounts of similar items. See ",{"type":18,"tag":157,"props":305,"children":308},{"href":306,"rel":307},"https://www.vic.gov.au/grants",[201],[309],{"type":24,"value":306},{"type":24,"value":311},", ",{"type":18,"tag":157,"props":313,"children":316},{"href":314,"rel":315},"https://www.vic.gov.au/victorian-honour-roll-of-women",[201],[317],{"type":24,"value":314},{"type":24,"value":319}," for example.",{"type":18,"tag":27,"props":321,"children":322},{},[323],{"type":24,"value":324},"In Ripple 1 there was no dedicated content type for creating listing pages and hence these pages were usually created as static pages in the frontend.",{"type":18,"tag":27,"props":326,"children":327},{},[328,330,335],{"type":24,"value":329},"In Ripple 2 we intend to move to a standard content type that allows configuring the search experience from the backend. Please see the ",{"type":18,"tag":157,"props":331,"children":333},{"href":292,"rel":332},[201],[334],{"type":24,"value":296},{"type":24,"value":336}," for more info.",{"title":10,"searchDepth":338,"depth":338,"links":339},2,[340,341,342],{"id":21,"depth":338,"text":25},{"id":79,"depth":338,"text":82},{"id":141,"depth":338,"text":144,"children":343},[344,346,347],{"id":184,"depth":345,"text":162},3,{"id":237,"depth":345,"text":180},{"id":278,"depth":345,"text":281},"markdown","content:framework:3.guides:1.migrating.md","content","framework/3.guides/1.migrating.md","md",["ShallowRef",354],["ShallowReactive",355],{"/framework/guides/migrating":356},[357,362],{"_path":177,"_dir":358,"_draft":9,"_partial":9,"_locale":10,"title":180,"description":359,"layout":13,"_type":348,"_id":360,"_source":350,"_file":361,"_extension":352},"key-concepts",null,"content:framework:2.key-concepts:5.dynamic-components.md","framework/2.key-concepts/5.dynamic-components.md",{"_path":363,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":364,"description":365,"layout":13,"_type":348,"_id":366,"_source":350,"_file":367,"_extension":352},"/framework/guides/new-sites","Setting up a new site","A guide to setting up new SDP frontend sites using Ripple framework.","content:framework:3.guides:2.new-sites.md","framework/3.guides/2.new-sites.md",["ShallowRef",369],{},[371,376,624],{"title":372,"_path":373,"icon":374,"layout":375},"Ripple Design System","/","carbon:home","home",{"title":377,"_path":378,"children":379},"Design System","/design-system",[380,396,412,442,476],{"title":381,"_path":382,"children":383},"About","/design-system/about",[384,387,390,393],{"title":385,"_path":386,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":388,"_path":389,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":391,"_path":392,"layout":13},"Support","/design-system/about/getting-support",{"title":394,"_path":395,"layout":13},"Contributing","/design-system/about/contributing",{"title":397,"_path":398,"children":399},"Design","/design-system/design",[400,403,406,409],{"title":401,"_path":402,"layout":13},"Getting started","/design-system/design/getting-started",{"title":404,"_path":405,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":407,"_path":408,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":410,"_path":411,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":413,"_path":414,"children":415},"Develop","/design-system/develop",[416,418,420,423],{"title":401,"_path":417,"layout":13},"/design-system/develop/getting-started",{"title":394,"_path":419,"layout":13},"/design-system/develop/contributing",{"title":421,"_path":422,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":424,"_path":425,"children":426,"layout":13},"Usage","/design-system/develop/usage",[427,430,433,436,439],{"title":428,"_path":429,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":431,"_path":432,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":434,"_path":435,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":437,"_path":438,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":440,"_path":441,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":443,"_path":444,"children":445},"Styles","/design-system/styles",[446,449,452,455,458,461,464,467,470,473],{"title":447,"_path":448,"layout":13},"Colour","/design-system/styles/colour",{"title":450,"_path":451,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":453,"_path":454,"layout":13},"Grid","/design-system/styles/grid",{"title":456,"_path":457,"layout":13},"Icons","/design-system/styles/icons",{"title":459,"_path":460,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":462,"_path":463,"layout":13},"Layout","/design-system/styles/layout",{"title":465,"_path":466,"layout":13},"Logo","/design-system/styles/logo",{"title":468,"_path":469,"layout":13},"Motion","/design-system/styles/motion",{"title":471,"_path":472,"layout":13},"Spacing","/design-system/styles/spacing",{"title":474,"_path":475,"layout":13},"Typography","/design-system/styles/typography",{"title":477,"_path":478,"children":479},"Components","/design-system/components",[480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543,546,549,552,555,558,561,564,567,570,573,576,579,582,585,588,591,594,597,600,603,606,609,612,615,618,621],{"title":481,"_path":482,"layout":13},"Accordion","/design-system/components/accordion",{"title":484,"_path":485,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":487,"_path":488,"layout":13},"Alert","/design-system/components/alert",{"title":490,"_path":491,"layout":13},"Block quote","/design-system/components/block-quote",{"title":493,"_path":494,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":496,"_path":497,"layout":13},"Button","/design-system/components/button",{"title":499,"_path":500,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":502,"_path":503,"layout":13},"Callout","/design-system/components/callout",{"title":505,"_path":506,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":508,"_path":509,"layout":13},"Card","/design-system/components/card",{"title":511,"_path":512,"layout":13},"Carousel","/design-system/components/carousel",{"title":514,"_path":515,"layout":13},"Category grid","/design-system/components/category-grid",{"title":517,"_path":518,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":520,"_path":521,"layout":13},"Chip","/design-system/components/chip",{"title":523,"_path":524,"layout":13},"Contact us","/design-system/components/contact-us",{"title":526,"_path":527,"layout":13},"Date input","/design-system/components/date-input",{"title":529,"_path":530,"layout":13},"Detail list","/design-system/components/detail-list",{"title":532,"_path":533,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":535,"_path":536,"layout":13},"File","/design-system/components/file",{"title":538,"_path":539,"layout":13},"Footer","/design-system/components/footer",{"title":541,"_path":542,"layout":13},"Form","/design-system/components/form",{"title":544,"_path":545,"layout":13},"Form alert","/design-system/components/form-alert",{"title":547,"_path":548,"layout":13},"Header","/design-system/components/header",{"title":550,"_path":551,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":553,"_path":554,"layout":13},"Input field","/design-system/components/input-field",{"title":556,"_path":557,"layout":13},"Key dates","/design-system/components/key-dates",{"title":559,"_path":560,"layout":13},"Media","/design-system/components/media",{"title":562,"_path":563,"layout":13},"Media embed","/design-system/components/media-embed",{"title":565,"_path":566,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":568,"_path":569,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":571,"_path":572,"layout":13},"Option button","/design-system/components/option-button",{"title":574,"_path":575,"layout":13},"Page action","/design-system/components/page-action",{"title":577,"_path":578,"layout":13},"Pagination","/design-system/components/pagination",{"title":580,"_path":581,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":583,"_path":584,"layout":13},"Profile","/design-system/components/profile",{"title":586,"_path":587,"layout":13},"Radio button","/design-system/components/radio-button",{"title":589,"_path":590,"layout":13},"Related links","/design-system/components/related-links",{"title":592,"_path":593,"layout":13},"Results listing","/design-system/components/results-listing",{"title":595,"_path":596,"layout":13},"Search bar","/design-system/components/search-bar",{"title":598,"_path":599,"layout":13},"Skip link","/design-system/components/skip-link",{"title":601,"_path":602,"layout":13},"Social share","/design-system/components/social-share",{"title":604,"_path":605,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":607,"_path":608,"layout":13},"Table","/design-system/components/table",{"title":610,"_path":611,"layout":13},"Tabs","/design-system/components/tabs",{"title":613,"_path":614,"layout":13},"Tag","/design-system/components/tag",{"title":616,"_path":617,"layout":13},"Text area","/design-system/components/text-area",{"title":619,"_path":620,"layout":13},"Timeline","/design-system/components/timeline",{"title":622,"_path":623,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":625,"_path":626,"children":627,"layout":13},"Ripple Framework","/framework",[628,629,642,660],{"title":625,"_path":626,"layout":13},{"title":630,"_path":631,"children":632},"Key Concepts","/framework/key-concepts",[633,635,638,640,641],{"title":434,"_path":634,"layout":13},"/framework/key-concepts/nuxt",{"title":636,"_path":637,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":639,"_path":168,"layout":13},"API endpoints",{"title":162,"_path":159,"layout":13},{"title":180,"_path":177,"layout":13},{"title":643,"_path":644,"children":645},"Guides","/framework/guides",[646,647,648,651,654,657],{"title":11,"_path":7,"layout":13},{"title":364,"_path":363,"layout":13},{"title":649,"_path":650,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":652,"_path":653,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":655,"_path":656,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":658,"_path":659,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":661,"_path":662,"layout":13},"Core modules","/framework/core-modules",["Reactive",664],["Set"],["Reactive",666],{"module-navigation":359},true,1714695151267]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+The mapping of the tide API response was done through <a href="https://github.com/dpc-sdp/ripple/blob/develop/packages/ripple-nuxt-tide/modules/news/tide.config.j" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->tide.config.js<!--]--><!--]--><!----><!--]--></a>. The JSON API response was returned in its entirety and mapping the Drupal fields to Ripple components was done through the Page component.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[-->In Ripple 2.x we move the mapping of data to the Nuxt server layer. This allows us to only return the necessary data needed to the end user, reducing the JSON payload from Drupal.<!--]--></p><!--]--></blockquote><p><!--[-->For more information on creating new content types see the guide on <a href="creating-content-types" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->creating content types<!--]--><!--]--><!----><!--]--></a><!--]--></p><h2 class="rpl-type-h3 docs-h3" id="dynamic-components" data-v-ea525968><a href="#dynamic-components" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Dynamic components<!--]--></a></h2><p><!--[-->Tide CMS makes use of <a href="https://www.drupal.org/project/paragraphs" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Drupal paragraphs<!--]--><!--]--><!----><!--]--></a> to structure content types to allow content creators flexibility when composing content. Creating new paragraph types that can be reused for the landing page content or across others is a common customisation task.<!--]--></p><p><!--[-->In Ripple 1, new paragraph support was added through custom mappings <a href="https://github.com/dpc-sdp/ripple/blob/develop/examples/basic-examples/tide/modules/example-override-mapping/tide.config.js" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->See Ripple 1<!--]--><!--]--><!----><!--]--></a><!--]--></p><p><!--[-->In Ripple 2, we need to add similar support - See <a href="dynamic-components" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Guide to creating dynamic components<!--]--><!--]--><!----><!--]--></a><!--]--></p><h2 class="rpl-type-h3 docs-h3" id="search-listing-pages" data-v-ea525968><a href="#search-listing-pages" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Search listing pages<!--]--></a></h2><blockquote class="rpl-callout"><!--[--><p><!--[-->This feature is still in Beta, please see the <a href="https://github.com/dpc-sdp/ripple-framework/discussions/660" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->feature proposal<!--]--><!--]--><!----><!--]--></a> for more information.<!--]--></p><!--]--></blockquote><p><!--[-->Listing pages are pages that contain dynamic lists of links to other pages. These are typically used to generate index pages when there are large amounts of similar items. See <a href="https://www.vic.gov.au/grants" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.vic.gov.au/grants<!--]--><!--]--><!----><!--]--></a>, <a href="https://www.vic.gov.au/victorian-honour-roll-of-women" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.vic.gov.au/victorian-honour-roll-of-women<!--]--><!--]--><!----><!--]--></a> for example.<!--]--></p><p><!--[-->In Ripple 1 there was no dedicated content type for creating listing pages and hence these pages were usually created as static pages in the frontend.<!--]--></p><p><!--[-->In Ripple 2 we intend to move to a standard content type that allows configuring the search experience from the backend. Please see the <a href="https://github.com/dpc-sdp/ripple-framework/discussions/660" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->feature proposal<!--]--><!--]--><!----><!--]--></a> for more info.<!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/3.guides/1.migrating.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/guides/migrating/_payload.json">[{"state":1,"once":663,"_errors":665,"serverRendered":667,"path":7,"prerenderedAt":668},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":353,"$sdd-globals":368,"$sdd-navigation":370},["ShallowRef",4],["ShallowReactive",5],{"/framework/guides/migrating":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":348,"_id":349,"_source":350,"_file":351,"_extension":352},"/framework/guides/migrating","guides",false,"","Migrating from Ripple 1.x","This guide is intended to outline the process of updating SDP sites using Ripple 1.x to Ripple 2. It is intended for developers tasked with porting Ripple 1 sites and features to Ripple 2.","page",{"type":15,"children":16,"toc":337},"root",[17,26,32,62,77,83,88,111,116,139,145,150,181,187,192,216,224,235,240,254,266,276,282,299,320,325],{"type":18,"tag":19,"props":20,"children":22},"element","h2",{"id":21},"background",[23],{"type":24,"value":25},"text","Background",{"type":18,"tag":27,"props":28,"children":29},"p",{},[30],{"type":24,"value":31},"Ripple 2 is a complete rewrite of both the design system and the Nuxt modules used to create SDP sites with it. It is a breaking change with the processes used to create sites and functionality used in Ripple 1. This was required due to the following reasons:",{"type":18,"tag":33,"props":34,"children":35},"ul",{},[36,42,47,52,57],{"type":18,"tag":37,"props":38,"children":39},"li",{},[40],{"type":24,"value":41},"Latest versions of Vue and Nuxt 3 introducing breaking changes",{"type":18,"tag":37,"props":43,"children":44},{},[45],{"type":24,"value":46},"Deprecation of IE11 support allowing us to support modern browser features",{"type":18,"tag":37,"props":48,"children":49},{},[50],{"type":24,"value":51},"Opportunity to adopt best practices such as Typescript and modern CSS",{"type":18,"tag":37,"props":53,"children":54},{},[55],{"type":24,"value":56},"Build up of technical and design debt",{"type":18,"tag":37,"props":58,"children":59},{},[60],{"type":24,"value":61},"Improvements to the design allowing better theming and accessibility",{"type":18,"tag":63,"props":64,"children":65},"blockquote",{},[66],{"type":18,"tag":27,"props":67,"children":68},{},[69,71],{"type":24,"value":70},"Due to breaking changes between versions 2 and 3 of both Vue and Nuxt there is no automated way to upgrade Ripple components and sites.\n",{"type":18,"tag":72,"props":73,"children":74},"em",{},[75],{"type":24,"value":76},"Custom functionality built on Ripple 1 will need to be rewritten to use Ripple 2 API’s and design.",{"type":18,"tag":19,"props":78,"children":80},{"id":79},"migrating-your-site",[81],{"type":24,"value":82},"Migrating your site",{"type":18,"tag":27,"props":84,"children":85},{},[86],{"type":24,"value":87},"If your site is supported by the SDP team for upgrades, the initial site upgrade will be handled by the SDP team. The process will be as follows:",{"type":18,"tag":33,"props":89,"children":90},{},[91,96,101,106],{"type":18,"tag":37,"props":92,"children":93},{},[94],{"type":24,"value":95},"a new empty V2 branch will be created in the site repository",{"type":18,"tag":37,"props":97,"children":98},{},[99],{"type":24,"value":100},"a fresh install of Ripple 2 will be added to the site",{"type":18,"tag":37,"props":102,"children":103},{},[104],{"type":24,"value":105},"all required environment variables will be added to the project to connect the site to the Tide content backend",{"type":18,"tag":37,"props":107,"children":108},{},[109],{"type":24,"value":110},"the V2 branch will be setup to be served from behind the Section.io CDN",{"type":18,"tag":27,"props":112,"children":113},{},[114],{"type":24,"value":115},"The migration of the following will be out of scope for sites without an MoU for SDP support:",{"type":18,"tag":33,"props":117,"children":118},{},[119,124,129,134],{"type":18,"tag":37,"props":120,"children":121},{},[122],{"type":24,"value":123},"Custom content types",{"type":18,"tag":37,"props":125,"children":126},{},[127],{"type":24,"value":128},"Custom user facing components",{"type":18,"tag":37,"props":130,"children":131},{},[132],{"type":24,"value":133},"Custom pages",{"type":18,"tag":37,"props":135,"children":136},{},[137],{"type":24,"value":138},"Extensive theme customisation outside of those documented in the theming guide",{"type":18,"tag":19,"props":140,"children":142},{"id":141},"migrating-features-from-ripple-1x",[143],{"type":24,"value":144},"Migrating features from Ripple 1.x",{"type":18,"tag":27,"props":146,"children":147},{},[148],{"type":24,"value":149},"Please review the following concepts before proceeding:",{"type":18,"tag":33,"props":151,"children":152},{},[153,163,172],{"type":18,"tag":37,"props":154,"children":155},{},[156],{"type":18,"tag":157,"props":158,"children":160},"a",{"href":159},"/framework/key-concepts/content-types",[161],{"type":24,"value":162},"Content types",{"type":18,"tag":37,"props":164,"children":165},{},[166],{"type":18,"tag":157,"props":167,"children":169},{"href":168},"/framework/key-concepts/api-endpoints",[170],{"type":24,"value":171},"API mapping",{"type":18,"tag":37,"props":173,"children":174},{},[175],{"type":18,"tag":157,"props":176,"children":178},{"href":177},"/framework/key-concepts/dynamic-components",[179],{"type":24,"value":180},"Dynamic components",{"type":18,"tag":182,"props":183,"children":185},"h3",{"id":184},"content-types",[186],{"type":24,"value":162},{"type":18,"tag":27,"props":188,"children":189},{},[190],{"type":24,"value":191},"Content types in Tide allow for defining custom fields that can be returned via the Drupal JSON API. Because SDP sites are headless, we need to tell Ripple how to render each custom content type on the front end.",{"type":18,"tag":27,"props":193,"children":194},{},[195,197,205,207,214],{"type":24,"value":196},"In Ripple 1.x, each content type was added through the convention of adding a folder named tide and each content type as a subfolder. See ",{"type":18,"tag":157,"props":198,"children":202},{"href":199,"rel":200},"https://github.com/dpc-sdp/ripple/tree/develop/examples/basic-examples/tide/modules/example-content-type",[201],"nofollow",[203],{"type":24,"value":204},"Ripple 1 example",{"type":24,"value":206},".\nThe mapping of the tide API response was done through ",{"type":18,"tag":157,"props":208,"children":211},{"href":209,"rel":210},"https://github.com/dpc-sdp/ripple/blob/develop/packages/ripple-nuxt-tide/modules/news/tide.config.j",[201],[212],{"type":24,"value":213},"tide.config.js",{"type":24,"value":215},". The JSON API response was returned in its entirety and mapping the Drupal fields to Ripple components was done through the Page component.",{"type":18,"tag":63,"props":217,"children":218},{},[219],{"type":18,"tag":27,"props":220,"children":221},{},[222],{"type":24,"value":223},"In Ripple 2.x we move the mapping of data to the Nuxt server layer. This allows us to only return the necessary data needed to the end user, reducing the JSON payload from Drupal.",{"type":18,"tag":27,"props":225,"children":226},{},[227,229],{"type":24,"value":228},"For more information on creating new content types see the guide on ",{"type":18,"tag":157,"props":230,"children":232},{"href":231},"creating-content-types",[233],{"type":24,"value":234},"creating content types",{"type":18,"tag":182,"props":236,"children":238},{"id":237},"dynamic-components",[239],{"type":24,"value":180},{"type":18,"tag":27,"props":241,"children":242},{},[243,245,252],{"type":24,"value":244},"Tide CMS makes use of ",{"type":18,"tag":157,"props":246,"children":249},{"href":247,"rel":248},"https://www.drupal.org/project/paragraphs",[201],[250],{"type":24,"value":251},"Drupal paragraphs",{"type":24,"value":253}," to structure content types to allow content creators flexibility when composing content. Creating new paragraph types that can be reused for the landing page content or across others is a common customisation task.",{"type":18,"tag":27,"props":255,"children":256},{},[257,259],{"type":24,"value":258},"In Ripple 1, new paragraph support was added through custom mappings ",{"type":18,"tag":157,"props":260,"children":263},{"href":261,"rel":262},"https://github.com/dpc-sdp/ripple/blob/develop/examples/basic-examples/tide/modules/example-override-mapping/tide.config.js",[201],[264],{"type":24,"value":265},"See Ripple 1",{"type":18,"tag":27,"props":267,"children":268},{},[269,271],{"type":24,"value":270},"In Ripple 2, we need to add similar support - See ",{"type":18,"tag":157,"props":272,"children":273},{"href":237},[274],{"type":24,"value":275},"Guide to creating dynamic components",{"type":18,"tag":182,"props":277,"children":279},{"id":278},"search-listing-pages",[280],{"type":24,"value":281},"Search listing pages",{"type":18,"tag":63,"props":283,"children":284},{},[285],{"type":18,"tag":27,"props":286,"children":287},{},[288,290,297],{"type":24,"value":289},"This feature is still in Beta, please see the ",{"type":18,"tag":157,"props":291,"children":294},{"href":292,"rel":293},"https://github.com/dpc-sdp/ripple-framework/discussions/660",[201],[295],{"type":24,"value":296},"feature proposal",{"type":24,"value":298}," for more information.",{"type":18,"tag":27,"props":300,"children":301},{},[302,304,310,312,318],{"type":24,"value":303},"Listing pages are pages that contain dynamic lists of links to other pages. These are typically used to generate index pages when there are large amounts of similar items. See ",{"type":18,"tag":157,"props":305,"children":308},{"href":306,"rel":307},"https://www.vic.gov.au/grants",[201],[309],{"type":24,"value":306},{"type":24,"value":311},", ",{"type":18,"tag":157,"props":313,"children":316},{"href":314,"rel":315},"https://www.vic.gov.au/victorian-honour-roll-of-women",[201],[317],{"type":24,"value":314},{"type":24,"value":319}," for example.",{"type":18,"tag":27,"props":321,"children":322},{},[323],{"type":24,"value":324},"In Ripple 1 there was no dedicated content type for creating listing pages and hence these pages were usually created as static pages in the frontend.",{"type":18,"tag":27,"props":326,"children":327},{},[328,330,335],{"type":24,"value":329},"In Ripple 2 we intend to move to a standard content type that allows configuring the search experience from the backend. Please see the ",{"type":18,"tag":157,"props":331,"children":333},{"href":292,"rel":332},[201],[334],{"type":24,"value":296},{"type":24,"value":336}," for more info.",{"title":10,"searchDepth":338,"depth":338,"links":339},2,[340,341,342],{"id":21,"depth":338,"text":25},{"id":79,"depth":338,"text":82},{"id":141,"depth":338,"text":144,"children":343},[344,346,347],{"id":184,"depth":345,"text":162},3,{"id":237,"depth":345,"text":180},{"id":278,"depth":345,"text":281},"markdown","content:framework:3.guides:1.migrating.md","content","framework/3.guides/1.migrating.md","md",["ShallowRef",354],["ShallowReactive",355],{"/framework/guides/migrating":356},[357,362],{"_path":177,"_dir":358,"_draft":9,"_partial":9,"_locale":10,"title":180,"description":359,"layout":13,"_type":348,"_id":360,"_source":350,"_file":361,"_extension":352},"key-concepts",null,"content:framework:2.key-concepts:5.dynamic-components.md","framework/2.key-concepts/5.dynamic-components.md",{"_path":363,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":364,"description":365,"layout":13,"_type":348,"_id":366,"_source":350,"_file":367,"_extension":352},"/framework/guides/new-sites","Setting up a new site","A guide to setting up new SDP frontend sites using Ripple framework.","content:framework:3.guides:2.new-sites.md","framework/3.guides/2.new-sites.md",["ShallowRef",369],{},[371,376,624],{"title":372,"_path":373,"icon":374,"layout":375},"Ripple Design System","/","carbon:home","home",{"title":377,"_path":378,"children":379},"Design System","/design-system",[380,396,412,442,476],{"title":381,"_path":382,"children":383},"About","/design-system/about",[384,387,390,393],{"title":385,"_path":386,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":388,"_path":389,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":391,"_path":392,"layout":13},"Support","/design-system/about/getting-support",{"title":394,"_path":395,"layout":13},"Contributing","/design-system/about/contributing",{"title":397,"_path":398,"children":399},"Design","/design-system/design",[400,403,406,409],{"title":401,"_path":402,"layout":13},"Getting started","/design-system/design/getting-started",{"title":404,"_path":405,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":407,"_path":408,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":410,"_path":411,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":413,"_path":414,"children":415},"Develop","/design-system/develop",[416,418,420,423],{"title":401,"_path":417,"layout":13},"/design-system/develop/getting-started",{"title":394,"_path":419,"layout":13},"/design-system/develop/contributing",{"title":421,"_path":422,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":424,"_path":425,"children":426,"layout":13},"Usage","/design-system/develop/usage",[427,430,433,436,439],{"title":428,"_path":429,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":431,"_path":432,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":434,"_path":435,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":437,"_path":438,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":440,"_path":441,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":443,"_path":444,"children":445},"Styles","/design-system/styles",[446,449,452,455,458,461,464,467,470,473],{"title":447,"_path":448,"layout":13},"Colour","/design-system/styles/colour",{"title":450,"_path":451,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":453,"_path":454,"layout":13},"Grid","/design-system/styles/grid",{"title":456,"_path":457,"layout":13},"Icons","/design-system/styles/icons",{"title":459,"_path":460,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":462,"_path":463,"layout":13},"Layout","/design-system/styles/layout",{"title":465,"_path":466,"layout":13},"Logo","/design-system/styles/logo",{"title":468,"_path":469,"layout":13},"Motion","/design-system/styles/motion",{"title":471,"_path":472,"layout":13},"Spacing","/design-system/styles/spacing",{"title":474,"_path":475,"layout":13},"Typography","/design-system/styles/typography",{"title":477,"_path":478,"children":479},"Components","/design-system/components",[480,483,486,489,492,495,498,501,504,507,510,513,516,519,522,525,528,531,534,537,540,543,546,549,552,555,558,561,564,567,570,573,576,579,582,585,588,591,594,597,600,603,606,609,612,615,618,621],{"title":481,"_path":482,"layout":13},"Accordion","/design-system/components/accordion",{"title":484,"_path":485,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":487,"_path":488,"layout":13},"Alert","/design-system/components/alert",{"title":490,"_path":491,"layout":13},"Block quote","/design-system/components/block-quote",{"title":493,"_path":494,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":496,"_path":497,"layout":13},"Button","/design-system/components/button",{"title":499,"_path":500,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":502,"_path":503,"layout":13},"Callout","/design-system/components/callout",{"title":505,"_path":506,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":508,"_path":509,"layout":13},"Card","/design-system/components/card",{"title":511,"_path":512,"layout":13},"Carousel","/design-system/components/carousel",{"title":514,"_path":515,"layout":13},"Category grid","/design-system/components/category-grid",{"title":517,"_path":518,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":520,"_path":521,"layout":13},"Chip","/design-system/components/chip",{"title":523,"_path":524,"layout":13},"Contact us","/design-system/components/contact-us",{"title":526,"_path":527,"layout":13},"Date input","/design-system/components/date-input",{"title":529,"_path":530,"layout":13},"Detail list","/design-system/components/detail-list",{"title":532,"_path":533,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":535,"_path":536,"layout":13},"File","/design-system/components/file",{"title":538,"_path":539,"layout":13},"Footer","/design-system/components/footer",{"title":541,"_path":542,"layout":13},"Form","/design-system/components/form",{"title":544,"_path":545,"layout":13},"Form alert","/design-system/components/form-alert",{"title":547,"_path":548,"layout":13},"Header","/design-system/components/header",{"title":550,"_path":551,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":553,"_path":554,"layout":13},"Input field","/design-system/components/input-field",{"title":556,"_path":557,"layout":13},"Key dates","/design-system/components/key-dates",{"title":559,"_path":560,"layout":13},"Media","/design-system/components/media",{"title":562,"_path":563,"layout":13},"Media embed","/design-system/components/media-embed",{"title":565,"_path":566,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":568,"_path":569,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":571,"_path":572,"layout":13},"Option button","/design-system/components/option-button",{"title":574,"_path":575,"layout":13},"Page action","/design-system/components/page-action",{"title":577,"_path":578,"layout":13},"Pagination","/design-system/components/pagination",{"title":580,"_path":581,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":583,"_path":584,"layout":13},"Profile","/design-system/components/profile",{"title":586,"_path":587,"layout":13},"Radio button","/design-system/components/radio-button",{"title":589,"_path":590,"layout":13},"Related links","/design-system/components/related-links",{"title":592,"_path":593,"layout":13},"Results listing","/design-system/components/results-listing",{"title":595,"_path":596,"layout":13},"Search bar","/design-system/components/search-bar",{"title":598,"_path":599,"layout":13},"Skip link","/design-system/components/skip-link",{"title":601,"_path":602,"layout":13},"Social share","/design-system/components/social-share",{"title":604,"_path":605,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":607,"_path":608,"layout":13},"Table","/design-system/components/table",{"title":610,"_path":611,"layout":13},"Tabs","/design-system/components/tabs",{"title":613,"_path":614,"layout":13},"Tag","/design-system/components/tag",{"title":616,"_path":617,"layout":13},"Text area","/design-system/components/text-area",{"title":619,"_path":620,"layout":13},"Timeline","/design-system/components/timeline",{"title":622,"_path":623,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":625,"_path":626,"children":627,"layout":13},"Ripple Framework","/framework",[628,629,642,660],{"title":625,"_path":626,"layout":13},{"title":630,"_path":631,"children":632},"Key Concepts","/framework/key-concepts",[633,635,638,640,641],{"title":434,"_path":634,"layout":13},"/framework/key-concepts/nuxt",{"title":636,"_path":637,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":639,"_path":168,"layout":13},"API endpoints",{"title":162,"_path":159,"layout":13},{"title":180,"_path":177,"layout":13},{"title":643,"_path":644,"children":645},"Guides","/framework/guides",[646,647,648,651,654,657],{"title":11,"_path":7,"layout":13},{"title":364,"_path":363,"layout":13},{"title":649,"_path":650,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":652,"_path":653,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":655,"_path":656,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":658,"_path":659,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":661,"_path":662,"layout":13},"Core modules","/framework/core-modules",["Reactive",664],["Set"],["Reactive",666],{"module-navigation":359},true,1714695649506]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/framework/guides/new-sites/_payload.json b/framework/guides/new-sites/_payload.json
index 300ae01991..77e0a3bf44 100644
--- a/framework/guides/new-sites/_payload.json
+++ b/framework/guides/new-sites/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,27,50],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",false,{"id":9,"text":10,"url":9,"active":7,"items":11},"/framework/key-concepts","Key Concepts",[12,15,18,21,24],{"id":13,"text":14,"url":13,"active":7,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":22,"text":23,"url":22,"active":7,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":25,"text":26,"url":25,"active":7,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":28,"text":29,"url":28,"active":30,"items":31},"/framework/guides","Guides",true,[32,35,38,41,44,47],{"id":33,"text":34,"url":33,"active":7,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":36,"text":37,"url":36,"active":30,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":39,"text":40,"url":39,"active":7,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":42,"text":43,"url":42,"active":7,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":45,"text":46,"url":45,"active":7,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":48,"text":49,"url":48,"active":7,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":51,"text":52,"url":51,"active":7,"items":-1},"/framework/core-modules","Core modules",1714695151271]
\ No newline at end of file
+[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,27,50],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",false,{"id":9,"text":10,"url":9,"active":7,"items":11},"/framework/key-concepts","Key Concepts",[12,15,18,21,24],{"id":13,"text":14,"url":13,"active":7,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":16,"text":17,"url":16,"active":7,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":19,"text":20,"url":19,"active":7,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":22,"text":23,"url":22,"active":7,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":25,"text":26,"url":25,"active":7,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":28,"text":29,"url":28,"active":30,"items":31},"/framework/guides","Guides",true,[32,35,38,41,44,47],{"id":33,"text":34,"url":33,"active":7,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":36,"text":37,"url":36,"active":30,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":39,"text":40,"url":39,"active":7,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":42,"text":43,"url":42,"active":7,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":45,"text":46,"url":45,"active":7,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":48,"text":49,"url":48,"active":7,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":51,"text":52,"url":51,"active":7,"items":-1},"/framework/core-modules","Core modules",1714695649511]
\ No newline at end of file
diff --git a/framework/guides/new-sites/index.html b/framework/guides/new-sites/index.html
index 398ca8b67a..f7e6429e4c 100644
--- a/framework/guides/new-sites/index.html
+++ b/framework/guides/new-sites/index.html
@@ -25,70 +25,70 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.uDpSgjM7.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.lp_k9Hpd.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProsePre.1p0bzX0t.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCode.ggTmuEB2.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCodeInline.iJ9KJvnk.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.Czpq-HHw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProsePre.928ctTB_.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseCode.Xz7xMLuq.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Nuxt</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/api-endpoints" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>API endpoints</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dynamic components</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/guides-toggle"><span class="rpl-vertical-nav__toggle-text">Guides</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/guides-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/migrating" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Migrating from Ripple 1.x</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/new-sites" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Setting up a new site</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/brand-application" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Applying theme and brand</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Creating content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-new-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Creating new layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Adding a new dynamic component</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><!----><a href="/framework/core-modules" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Core modules</span><!--]--></a></li><!--]--></ul></nav><a href="/design-system/about/what-is-ripple" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Design System<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Setting up a new site</h1><p class="rpl-type-p-large" data-v-3163c6df>A guide to setting up new SDP frontend sites using Ripple framework.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->Setting up new sites with Ripple 2 is made easy with our CLI tool and provisioning process. Before you do so though please ensure you have got in touch with the SDP engagement manager (<a href="mailto:digital@dpc.vic.gov.au" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->digital@dpc.vic.gov.au<!--]--><!--]--><!----><!--]--></a>) prior and have submitted a support request to the Digital Victoria Help Centre <a href="https://digital-vic.atlassian.net/servicedesk/customer/portals" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://digital-vic.atlassian.net/servicedesk/customer/portals<!--]--><!--]--><!----><!--]--></a><!--]--></p><h2 class="rpl-type-h2 docs-h2" id="requirements" data-v-fff5b905><a href="#requirements" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Requirements<!--]--></a></h2><p><!--[-->When onboarding a new project to SDP the following will be provisioned for you:<!--]--></p><ul><!--[--><li><!--[-->Git repo created<!--]--></li><li><!--[-->Required platform files added to repo, required Dockerfile, etc<!--]--></li><li><!--[-->Bay hosting environment configured<!--]--></li><li><!--[-->Section.io CDN setup and configured<!--]--></li><li><!--[-->Environment variables set to your project specific requirements<!--]--></li><!--]--></ul><h2 class="rpl-type-h2 docs-h2" id="local-development-dependencies" data-v-fff5b905><a href="#local-development-dependencies" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Local development dependencies<!--]--></a></h2><p><!--[-->Please make sure you have the following dependencies installed before proceeding. Typically local development is not performed through a docker container on the front end.<!--]--></p><ul><!--[--><li><!--[-->Node version 16.11.0 or greater (We recommend installing Node through Node Version Manager - See <a href="https://github.com/nvm-sh/nvm" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://github.com/nvm-sh/nvm<!--]--><!--]--><!----><!--]--></a> for install guide)<!--]--></li><li><!--[-->NPM version 8.1.0 or greater<!--]--></li><!--]--></ul><p><!--[-->Please see the <code class="docs-code-inline" data-v-2e6046ca><!--[-->engines<!--]--></code> key in <code class="docs-code-inline" data-v-2e6046ca><!--[-->package.json<!--]--></code> for most accurate versions.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="installing-ripple" data-v-fff5b905><a href="#installing-ripple" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Installing Ripple<!--]--></a></h2><blockquote class="rpl-callout"><!--[--><p><!--[-->For SDP sites, this will also be applied. However, if you wish to create a local install of Ripple outside of a project see below.<!--]--></p><!--]--></blockquote><p><!--[-->Installing Ripple is easy with the included CLI tool:<!--]--></p><div class="docs-code-block" data-v-efa4b2dc><!--[--><pre class="" style=""><!--[--><code>npx @dpc-sdp/nuxt-ripple-cli init site ~/path/to/site --name &quot;My Site&quot;
 </code><!--]--></pre><!--]--></div><p><!--[-->This will copy the required files needed to setup your site into <code class="docs-code-inline" data-v-2e6046ca><!--[-->~/path/to/site<!--]--></code><!--]--></p><div class="docs-code-block" data-v-efa4b2dc><!--[--><pre class="" style=""><!--[--><code>cd ~/path/to/site &amp;&amp; npm install
 </code><!--]--></pre><!--]--></div><p><!--[-->This will install all dependencies with NPM, you can then run the development server with<!--]--></p><div class="docs-code-block" data-v-efa4b2dc><!--[--><pre class="" style=""><!--[--><code>npm run dev
-</code><!--]--></pre><!--]--></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/3.guides/2.new-sites.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/guides/new-sites/_payload.json">[{"state":1,"once":523,"_errors":525,"serverRendered":528,"path":7,"prerenderedAt":529},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":209,"$sdd-globals":225,"$sdd-navigation":227},["ShallowRef",4],["ShallowReactive",5],{"/framework/guides/new-sites":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":204,"_id":205,"_source":206,"_file":207,"_extension":208},"/framework/guides/new-sites","guides",false,"","Setting up a new site","A guide to setting up new SDP frontend sites using Ripple framework.","page",{"type":15,"children":16,"toc":198},"root",[17,41,48,53,83,89,94,115,137,143,152,157,166,177,185,190],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22,25,32,34],{"type":23,"value":24},"text","Setting up new sites with Ripple 2 is made easy with our CLI tool and provisioning process. Before you do so though please ensure you have got in touch with the SDP engagement manager (",{"type":18,"tag":26,"props":27,"children":29},"a",{"href":28},"mailto:digital@dpc.vic.gov.au",[30],{"type":23,"value":31},"digital@dpc.vic.gov.au",{"type":23,"value":33},") prior and have submitted a support request to the Digital Victoria Help Centre ",{"type":18,"tag":26,"props":35,"children":39},{"href":36,"rel":37},"https://digital-vic.atlassian.net/servicedesk/customer/portals",[38],"nofollow",[40],{"type":23,"value":36},{"type":18,"tag":42,"props":43,"children":45},"h2",{"id":44},"requirements",[46],{"type":23,"value":47},"Requirements",{"type":18,"tag":19,"props":49,"children":50},{},[51],{"type":23,"value":52},"When onboarding a new project to SDP the following will be provisioned for you:",{"type":18,"tag":54,"props":55,"children":56},"ul",{},[57,63,68,73,78],{"type":18,"tag":58,"props":59,"children":60},"li",{},[61],{"type":23,"value":62},"Git repo created",{"type":18,"tag":58,"props":64,"children":65},{},[66],{"type":23,"value":67},"Required platform files added to repo, required Dockerfile, etc",{"type":18,"tag":58,"props":69,"children":70},{},[71],{"type":23,"value":72},"Bay hosting environment configured",{"type":18,"tag":58,"props":74,"children":75},{},[76],{"type":23,"value":77},"Section.io CDN setup and configured",{"type":18,"tag":58,"props":79,"children":80},{},[81],{"type":23,"value":82},"Environment variables set to your project specific requirements",{"type":18,"tag":42,"props":84,"children":86},{"id":85},"local-development-dependencies",[87],{"type":23,"value":88},"Local development dependencies",{"type":18,"tag":19,"props":90,"children":91},{},[92],{"type":23,"value":93},"Please make sure you have the following dependencies installed before proceeding. Typically local development is not performed through a docker container on the front end.",{"type":18,"tag":54,"props":95,"children":96},{},[97,110],{"type":18,"tag":58,"props":98,"children":99},{},[100,102,108],{"type":23,"value":101},"Node version 16.11.0 or greater (We recommend installing Node through Node Version Manager - See ",{"type":18,"tag":26,"props":103,"children":106},{"href":104,"rel":105},"https://github.com/nvm-sh/nvm",[38],[107],{"type":23,"value":104},{"type":23,"value":109}," for install guide)",{"type":18,"tag":58,"props":111,"children":112},{},[113],{"type":23,"value":114},"NPM version 8.1.0 or greater",{"type":18,"tag":19,"props":116,"children":117},{},[118,120,127,129,135],{"type":23,"value":119},"Please see the ",{"type":18,"tag":121,"props":122,"children":124},"code",{"className":123},[],[125],{"type":23,"value":126},"engines",{"type":23,"value":128}," key in ",{"type":18,"tag":121,"props":130,"children":132},{"className":131},[],[133],{"type":23,"value":134},"package.json",{"type":23,"value":136}," for most accurate versions.",{"type":18,"tag":42,"props":138,"children":140},{"id":139},"installing-ripple",[141],{"type":23,"value":142},"Installing Ripple",{"type":18,"tag":144,"props":145,"children":146},"blockquote",{},[147],{"type":18,"tag":19,"props":148,"children":149},{},[150],{"type":23,"value":151},"For SDP sites, this will also be applied. However, if you wish to create a local install of Ripple outside of a project see below.",{"type":18,"tag":19,"props":153,"children":154},{},[155],{"type":23,"value":156},"Installing Ripple is easy with the included CLI tool:",{"type":18,"tag":158,"props":159,"children":161},"pre",{"code":160},"npx @dpc-sdp/nuxt-ripple-cli init site ~/path/to/site --name \"My Site\"\n",[162],{"type":18,"tag":121,"props":163,"children":164},{"__ignoreMap":10},[165],{"type":23,"value":160},{"type":18,"tag":19,"props":167,"children":168},{},[169,171],{"type":23,"value":170},"This will copy the required files needed to setup your site into ",{"type":18,"tag":121,"props":172,"children":174},{"className":173},[],[175],{"type":23,"value":176},"~/path/to/site",{"type":18,"tag":158,"props":178,"children":180},{"code":179},"cd ~/path/to/site && npm install\n",[181],{"type":18,"tag":121,"props":182,"children":183},{"__ignoreMap":10},[184],{"type":23,"value":179},{"type":18,"tag":19,"props":186,"children":187},{},[188],{"type":23,"value":189},"This will install all dependencies with NPM, you can then run the development server with",{"type":18,"tag":158,"props":191,"children":193},{"code":192},"npm run dev\n",[194],{"type":18,"tag":121,"props":195,"children":196},{"__ignoreMap":10},[197],{"type":23,"value":192},{"title":10,"searchDepth":199,"depth":199,"links":200},2,[201,202,203],{"id":44,"depth":199,"text":47},{"id":85,"depth":199,"text":88},{"id":139,"depth":199,"text":142},"markdown","content:framework:3.guides:2.new-sites.md","content","framework/3.guides/2.new-sites.md","md",["ShallowRef",210],["ShallowReactive",211],{"/framework/guides/new-sites":212},[213,219],{"_path":214,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":215,"description":216,"layout":13,"_type":204,"_id":217,"_source":206,"_file":218,"_extension":208},"/framework/guides/migrating","Migrating from Ripple 1.x","This guide is intended to outline the process of updating SDP sites using Ripple 1.x to Ripple 2. It is intended for developers tasked with porting Ripple 1 sites and features to Ripple 2.","content:framework:3.guides:1.migrating.md","framework/3.guides/1.migrating.md",{"_path":220,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":221,"description":222,"layout":13,"_type":204,"_id":223,"_source":206,"_file":224,"_extension":208},"/framework/guides/brand-application","Applying theme and brand","A guide to applying theme and brand assets to Ripple sites.","content:framework:3.guides:3.brand-application.md","framework/3.guides/3.brand-application.md",["ShallowRef",226],{},[228,233,481],{"title":229,"_path":230,"icon":231,"layout":232},"Ripple Design System","/","carbon:home","home",{"title":234,"_path":235,"children":236},"Design System","/design-system",[237,253,269,299,333],{"title":238,"_path":239,"children":240},"About","/design-system/about",[241,244,247,250],{"title":242,"_path":243,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":245,"_path":246,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":248,"_path":249,"layout":13},"Support","/design-system/about/getting-support",{"title":251,"_path":252,"layout":13},"Contributing","/design-system/about/contributing",{"title":254,"_path":255,"children":256},"Design","/design-system/design",[257,260,263,266],{"title":258,"_path":259,"layout":13},"Getting started","/design-system/design/getting-started",{"title":261,"_path":262,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":264,"_path":265,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":267,"_path":268,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":270,"_path":271,"children":272},"Develop","/design-system/develop",[273,275,277,280],{"title":258,"_path":274,"layout":13},"/design-system/develop/getting-started",{"title":251,"_path":276,"layout":13},"/design-system/develop/contributing",{"title":278,"_path":279,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":281,"_path":282,"children":283,"layout":13},"Usage","/design-system/develop/usage",[284,287,290,293,296],{"title":285,"_path":286,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":288,"_path":289,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":291,"_path":292,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":294,"_path":295,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":297,"_path":298,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":300,"_path":301,"children":302},"Styles","/design-system/styles",[303,306,309,312,315,318,321,324,327,330],{"title":304,"_path":305,"layout":13},"Colour","/design-system/styles/colour",{"title":307,"_path":308,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":310,"_path":311,"layout":13},"Grid","/design-system/styles/grid",{"title":313,"_path":314,"layout":13},"Icons","/design-system/styles/icons",{"title":316,"_path":317,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":319,"_path":320,"layout":13},"Layout","/design-system/styles/layout",{"title":322,"_path":323,"layout":13},"Logo","/design-system/styles/logo",{"title":325,"_path":326,"layout":13},"Motion","/design-system/styles/motion",{"title":328,"_path":329,"layout":13},"Spacing","/design-system/styles/spacing",{"title":331,"_path":332,"layout":13},"Typography","/design-system/styles/typography",{"title":334,"_path":335,"children":336},"Components","/design-system/components",[337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478],{"title":338,"_path":339,"layout":13},"Accordion","/design-system/components/accordion",{"title":341,"_path":342,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":344,"_path":345,"layout":13},"Alert","/design-system/components/alert",{"title":347,"_path":348,"layout":13},"Block quote","/design-system/components/block-quote",{"title":350,"_path":351,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":353,"_path":354,"layout":13},"Button","/design-system/components/button",{"title":356,"_path":357,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":359,"_path":360,"layout":13},"Callout","/design-system/components/callout",{"title":362,"_path":363,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":365,"_path":366,"layout":13},"Card","/design-system/components/card",{"title":368,"_path":369,"layout":13},"Carousel","/design-system/components/carousel",{"title":371,"_path":372,"layout":13},"Category grid","/design-system/components/category-grid",{"title":374,"_path":375,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":377,"_path":378,"layout":13},"Chip","/design-system/components/chip",{"title":380,"_path":381,"layout":13},"Contact us","/design-system/components/contact-us",{"title":383,"_path":384,"layout":13},"Date input","/design-system/components/date-input",{"title":386,"_path":387,"layout":13},"Detail list","/design-system/components/detail-list",{"title":389,"_path":390,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":392,"_path":393,"layout":13},"File","/design-system/components/file",{"title":395,"_path":396,"layout":13},"Footer","/design-system/components/footer",{"title":398,"_path":399,"layout":13},"Form","/design-system/components/form",{"title":401,"_path":402,"layout":13},"Form alert","/design-system/components/form-alert",{"title":404,"_path":405,"layout":13},"Header","/design-system/components/header",{"title":407,"_path":408,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":410,"_path":411,"layout":13},"Input field","/design-system/components/input-field",{"title":413,"_path":414,"layout":13},"Key dates","/design-system/components/key-dates",{"title":416,"_path":417,"layout":13},"Media","/design-system/components/media",{"title":419,"_path":420,"layout":13},"Media embed","/design-system/components/media-embed",{"title":422,"_path":423,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":425,"_path":426,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":428,"_path":429,"layout":13},"Option button","/design-system/components/option-button",{"title":431,"_path":432,"layout":13},"Page action","/design-system/components/page-action",{"title":434,"_path":435,"layout":13},"Pagination","/design-system/components/pagination",{"title":437,"_path":438,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":440,"_path":441,"layout":13},"Profile","/design-system/components/profile",{"title":443,"_path":444,"layout":13},"Radio button","/design-system/components/radio-button",{"title":446,"_path":447,"layout":13},"Related links","/design-system/components/related-links",{"title":449,"_path":450,"layout":13},"Results listing","/design-system/components/results-listing",{"title":452,"_path":453,"layout":13},"Search bar","/design-system/components/search-bar",{"title":455,"_path":456,"layout":13},"Skip link","/design-system/components/skip-link",{"title":458,"_path":459,"layout":13},"Social share","/design-system/components/social-share",{"title":461,"_path":462,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":464,"_path":465,"layout":13},"Table","/design-system/components/table",{"title":467,"_path":468,"layout":13},"Tabs","/design-system/components/tabs",{"title":470,"_path":471,"layout":13},"Tag","/design-system/components/tag",{"title":473,"_path":474,"layout":13},"Text area","/design-system/components/text-area",{"title":476,"_path":477,"layout":13},"Timeline","/design-system/components/timeline",{"title":479,"_path":480,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":482,"_path":483,"children":484,"layout":13},"Ripple Framework","/framework",[485,486,504,520],{"title":482,"_path":483,"layout":13},{"title":487,"_path":488,"children":489},"Key Concepts","/framework/key-concepts",[490,492,495,498,501],{"title":291,"_path":491,"layout":13},"/framework/key-concepts/nuxt",{"title":493,"_path":494,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":496,"_path":497,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":499,"_path":500,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":502,"_path":503,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":505,"_path":506,"children":507},"Guides","/framework/guides",[508,509,510,511,514,517],{"title":215,"_path":214,"layout":13},{"title":11,"_path":7,"layout":13},{"title":221,"_path":220,"layout":13},{"title":512,"_path":513,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":515,"_path":516,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":518,"_path":519,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":521,"_path":522,"layout":13},"Core modules","/framework/core-modules",["Reactive",524],["Set"],["Reactive",526],{"module-navigation":527},null,true,1714695151271]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+</code><!--]--></pre><!--]--></div><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/3.guides/2.new-sites.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/guides/new-sites/_payload.json">[{"state":1,"once":523,"_errors":525,"serverRendered":528,"path":7,"prerenderedAt":529},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":209,"$sdd-globals":225,"$sdd-navigation":227},["ShallowRef",4],["ShallowReactive",5],{"/framework/guides/new-sites":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":204,"_id":205,"_source":206,"_file":207,"_extension":208},"/framework/guides/new-sites","guides",false,"","Setting up a new site","A guide to setting up new SDP frontend sites using Ripple framework.","page",{"type":15,"children":16,"toc":198},"root",[17,41,48,53,83,89,94,115,137,143,152,157,166,177,185,190],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22,25,32,34],{"type":23,"value":24},"text","Setting up new sites with Ripple 2 is made easy with our CLI tool and provisioning process. Before you do so though please ensure you have got in touch with the SDP engagement manager (",{"type":18,"tag":26,"props":27,"children":29},"a",{"href":28},"mailto:digital@dpc.vic.gov.au",[30],{"type":23,"value":31},"digital@dpc.vic.gov.au",{"type":23,"value":33},") prior and have submitted a support request to the Digital Victoria Help Centre ",{"type":18,"tag":26,"props":35,"children":39},{"href":36,"rel":37},"https://digital-vic.atlassian.net/servicedesk/customer/portals",[38],"nofollow",[40],{"type":23,"value":36},{"type":18,"tag":42,"props":43,"children":45},"h2",{"id":44},"requirements",[46],{"type":23,"value":47},"Requirements",{"type":18,"tag":19,"props":49,"children":50},{},[51],{"type":23,"value":52},"When onboarding a new project to SDP the following will be provisioned for you:",{"type":18,"tag":54,"props":55,"children":56},"ul",{},[57,63,68,73,78],{"type":18,"tag":58,"props":59,"children":60},"li",{},[61],{"type":23,"value":62},"Git repo created",{"type":18,"tag":58,"props":64,"children":65},{},[66],{"type":23,"value":67},"Required platform files added to repo, required Dockerfile, etc",{"type":18,"tag":58,"props":69,"children":70},{},[71],{"type":23,"value":72},"Bay hosting environment configured",{"type":18,"tag":58,"props":74,"children":75},{},[76],{"type":23,"value":77},"Section.io CDN setup and configured",{"type":18,"tag":58,"props":79,"children":80},{},[81],{"type":23,"value":82},"Environment variables set to your project specific requirements",{"type":18,"tag":42,"props":84,"children":86},{"id":85},"local-development-dependencies",[87],{"type":23,"value":88},"Local development dependencies",{"type":18,"tag":19,"props":90,"children":91},{},[92],{"type":23,"value":93},"Please make sure you have the following dependencies installed before proceeding. Typically local development is not performed through a docker container on the front end.",{"type":18,"tag":54,"props":95,"children":96},{},[97,110],{"type":18,"tag":58,"props":98,"children":99},{},[100,102,108],{"type":23,"value":101},"Node version 16.11.0 or greater (We recommend installing Node through Node Version Manager - See ",{"type":18,"tag":26,"props":103,"children":106},{"href":104,"rel":105},"https://github.com/nvm-sh/nvm",[38],[107],{"type":23,"value":104},{"type":23,"value":109}," for install guide)",{"type":18,"tag":58,"props":111,"children":112},{},[113],{"type":23,"value":114},"NPM version 8.1.0 or greater",{"type":18,"tag":19,"props":116,"children":117},{},[118,120,127,129,135],{"type":23,"value":119},"Please see the ",{"type":18,"tag":121,"props":122,"children":124},"code",{"className":123},[],[125],{"type":23,"value":126},"engines",{"type":23,"value":128}," key in ",{"type":18,"tag":121,"props":130,"children":132},{"className":131},[],[133],{"type":23,"value":134},"package.json",{"type":23,"value":136}," for most accurate versions.",{"type":18,"tag":42,"props":138,"children":140},{"id":139},"installing-ripple",[141],{"type":23,"value":142},"Installing Ripple",{"type":18,"tag":144,"props":145,"children":146},"blockquote",{},[147],{"type":18,"tag":19,"props":148,"children":149},{},[150],{"type":23,"value":151},"For SDP sites, this will also be applied. However, if you wish to create a local install of Ripple outside of a project see below.",{"type":18,"tag":19,"props":153,"children":154},{},[155],{"type":23,"value":156},"Installing Ripple is easy with the included CLI tool:",{"type":18,"tag":158,"props":159,"children":161},"pre",{"code":160},"npx @dpc-sdp/nuxt-ripple-cli init site ~/path/to/site --name \"My Site\"\n",[162],{"type":18,"tag":121,"props":163,"children":164},{"__ignoreMap":10},[165],{"type":23,"value":160},{"type":18,"tag":19,"props":167,"children":168},{},[169,171],{"type":23,"value":170},"This will copy the required files needed to setup your site into ",{"type":18,"tag":121,"props":172,"children":174},{"className":173},[],[175],{"type":23,"value":176},"~/path/to/site",{"type":18,"tag":158,"props":178,"children":180},{"code":179},"cd ~/path/to/site && npm install\n",[181],{"type":18,"tag":121,"props":182,"children":183},{"__ignoreMap":10},[184],{"type":23,"value":179},{"type":18,"tag":19,"props":186,"children":187},{},[188],{"type":23,"value":189},"This will install all dependencies with NPM, you can then run the development server with",{"type":18,"tag":158,"props":191,"children":193},{"code":192},"npm run dev\n",[194],{"type":18,"tag":121,"props":195,"children":196},{"__ignoreMap":10},[197],{"type":23,"value":192},{"title":10,"searchDepth":199,"depth":199,"links":200},2,[201,202,203],{"id":44,"depth":199,"text":47},{"id":85,"depth":199,"text":88},{"id":139,"depth":199,"text":142},"markdown","content:framework:3.guides:2.new-sites.md","content","framework/3.guides/2.new-sites.md","md",["ShallowRef",210],["ShallowReactive",211],{"/framework/guides/new-sites":212},[213,219],{"_path":214,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":215,"description":216,"layout":13,"_type":204,"_id":217,"_source":206,"_file":218,"_extension":208},"/framework/guides/migrating","Migrating from Ripple 1.x","This guide is intended to outline the process of updating SDP sites using Ripple 1.x to Ripple 2. It is intended for developers tasked with porting Ripple 1 sites and features to Ripple 2.","content:framework:3.guides:1.migrating.md","framework/3.guides/1.migrating.md",{"_path":220,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":221,"description":222,"layout":13,"_type":204,"_id":223,"_source":206,"_file":224,"_extension":208},"/framework/guides/brand-application","Applying theme and brand","A guide to applying theme and brand assets to Ripple sites.","content:framework:3.guides:3.brand-application.md","framework/3.guides/3.brand-application.md",["ShallowRef",226],{},[228,233,481],{"title":229,"_path":230,"icon":231,"layout":232},"Ripple Design System","/","carbon:home","home",{"title":234,"_path":235,"children":236},"Design System","/design-system",[237,253,269,299,333],{"title":238,"_path":239,"children":240},"About","/design-system/about",[241,244,247,250],{"title":242,"_path":243,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":245,"_path":246,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":248,"_path":249,"layout":13},"Support","/design-system/about/getting-support",{"title":251,"_path":252,"layout":13},"Contributing","/design-system/about/contributing",{"title":254,"_path":255,"children":256},"Design","/design-system/design",[257,260,263,266],{"title":258,"_path":259,"layout":13},"Getting started","/design-system/design/getting-started",{"title":261,"_path":262,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":264,"_path":265,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":267,"_path":268,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":270,"_path":271,"children":272},"Develop","/design-system/develop",[273,275,277,280],{"title":258,"_path":274,"layout":13},"/design-system/develop/getting-started",{"title":251,"_path":276,"layout":13},"/design-system/develop/contributing",{"title":278,"_path":279,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":281,"_path":282,"children":283,"layout":13},"Usage","/design-system/develop/usage",[284,287,290,293,296],{"title":285,"_path":286,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":288,"_path":289,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":291,"_path":292,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":294,"_path":295,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":297,"_path":298,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":300,"_path":301,"children":302},"Styles","/design-system/styles",[303,306,309,312,315,318,321,324,327,330],{"title":304,"_path":305,"layout":13},"Colour","/design-system/styles/colour",{"title":307,"_path":308,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":310,"_path":311,"layout":13},"Grid","/design-system/styles/grid",{"title":313,"_path":314,"layout":13},"Icons","/design-system/styles/icons",{"title":316,"_path":317,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":319,"_path":320,"layout":13},"Layout","/design-system/styles/layout",{"title":322,"_path":323,"layout":13},"Logo","/design-system/styles/logo",{"title":325,"_path":326,"layout":13},"Motion","/design-system/styles/motion",{"title":328,"_path":329,"layout":13},"Spacing","/design-system/styles/spacing",{"title":331,"_path":332,"layout":13},"Typography","/design-system/styles/typography",{"title":334,"_path":335,"children":336},"Components","/design-system/components",[337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421,424,427,430,433,436,439,442,445,448,451,454,457,460,463,466,469,472,475,478],{"title":338,"_path":339,"layout":13},"Accordion","/design-system/components/accordion",{"title":341,"_path":342,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":344,"_path":345,"layout":13},"Alert","/design-system/components/alert",{"title":347,"_path":348,"layout":13},"Block quote","/design-system/components/block-quote",{"title":350,"_path":351,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":353,"_path":354,"layout":13},"Button","/design-system/components/button",{"title":356,"_path":357,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":359,"_path":360,"layout":13},"Callout","/design-system/components/callout",{"title":362,"_path":363,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":365,"_path":366,"layout":13},"Card","/design-system/components/card",{"title":368,"_path":369,"layout":13},"Carousel","/design-system/components/carousel",{"title":371,"_path":372,"layout":13},"Category grid","/design-system/components/category-grid",{"title":374,"_path":375,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":377,"_path":378,"layout":13},"Chip","/design-system/components/chip",{"title":380,"_path":381,"layout":13},"Contact us","/design-system/components/contact-us",{"title":383,"_path":384,"layout":13},"Date input","/design-system/components/date-input",{"title":386,"_path":387,"layout":13},"Detail list","/design-system/components/detail-list",{"title":389,"_path":390,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":392,"_path":393,"layout":13},"File","/design-system/components/file",{"title":395,"_path":396,"layout":13},"Footer","/design-system/components/footer",{"title":398,"_path":399,"layout":13},"Form","/design-system/components/form",{"title":401,"_path":402,"layout":13},"Form alert","/design-system/components/form-alert",{"title":404,"_path":405,"layout":13},"Header","/design-system/components/header",{"title":407,"_path":408,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":410,"_path":411,"layout":13},"Input field","/design-system/components/input-field",{"title":413,"_path":414,"layout":13},"Key dates","/design-system/components/key-dates",{"title":416,"_path":417,"layout":13},"Media","/design-system/components/media",{"title":419,"_path":420,"layout":13},"Media embed","/design-system/components/media-embed",{"title":422,"_path":423,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":425,"_path":426,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":428,"_path":429,"layout":13},"Option button","/design-system/components/option-button",{"title":431,"_path":432,"layout":13},"Page action","/design-system/components/page-action",{"title":434,"_path":435,"layout":13},"Pagination","/design-system/components/pagination",{"title":437,"_path":438,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":440,"_path":441,"layout":13},"Profile","/design-system/components/profile",{"title":443,"_path":444,"layout":13},"Radio button","/design-system/components/radio-button",{"title":446,"_path":447,"layout":13},"Related links","/design-system/components/related-links",{"title":449,"_path":450,"layout":13},"Results listing","/design-system/components/results-listing",{"title":452,"_path":453,"layout":13},"Search bar","/design-system/components/search-bar",{"title":455,"_path":456,"layout":13},"Skip link","/design-system/components/skip-link",{"title":458,"_path":459,"layout":13},"Social share","/design-system/components/social-share",{"title":461,"_path":462,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":464,"_path":465,"layout":13},"Table","/design-system/components/table",{"title":467,"_path":468,"layout":13},"Tabs","/design-system/components/tabs",{"title":470,"_path":471,"layout":13},"Tag","/design-system/components/tag",{"title":473,"_path":474,"layout":13},"Text area","/design-system/components/text-area",{"title":476,"_path":477,"layout":13},"Timeline","/design-system/components/timeline",{"title":479,"_path":480,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":482,"_path":483,"children":484,"layout":13},"Ripple Framework","/framework",[485,486,504,520],{"title":482,"_path":483,"layout":13},{"title":487,"_path":488,"children":489},"Key Concepts","/framework/key-concepts",[490,492,495,498,501],{"title":291,"_path":491,"layout":13},"/framework/key-concepts/nuxt",{"title":493,"_path":494,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":496,"_path":497,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":499,"_path":500,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":502,"_path":503,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":505,"_path":506,"children":507},"Guides","/framework/guides",[508,509,510,511,514,517],{"title":215,"_path":214,"layout":13},{"title":11,"_path":7,"layout":13},{"title":221,"_path":220,"layout":13},{"title":512,"_path":513,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":515,"_path":516,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":518,"_path":519,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":521,"_path":522,"layout":13},"Core modules","/framework/core-modules",["Reactive",524],["Set"],["Reactive",526],{"module-navigation":527},null,true,1714695649511]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/framework/index.html b/framework/index.html
index 225b7dcca7..c9483a9556 100644
--- a/framework/index.html
+++ b/framework/index.html
@@ -23,64 +23,64 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseImg.wgVpK8mn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseEm.D-92YCoe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseImg.Wu9xgcX7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseEm.jWeQl8xp.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Nuxt</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/api-endpoints" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>API endpoints</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Dynamic components</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/guides-toggle"><span class="rpl-vertical-nav__toggle-text">Guides</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/guides-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/migrating" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Migrating from Ripple 1.x</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/new-sites" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Setting up a new site</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/brand-application" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Applying theme and brand</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-new-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating new layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Adding a new dynamic component</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><!----><a href="/framework/core-modules" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Core modules</span><!--]--></a></li><!--]--></ul></nav><a href="/design-system/about/what-is-ripple" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Design System<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Ripple Framework</h1><p class="rpl-type-p-large" data-v-3163c6df>Ripple framework contains the tools for building SDP sites using the Ripple design system components.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[--><img src="/assets/img/ripple-header.png" alt="Ripple Framework" style="margin-top:-20px;padding-bottom:50px;"><!--]--></p><h2 class="rpl-type-h2 docs-h2" id="what-is-it" data-v-fff5b905><a href="#what-is-it" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->What is it?<!--]--></a></h2><p><!--[-->The Ripple design system consists of the design elements and components used to build <em><!--[-->any<!--]--></em> web application using the Victorian government brand. Ripple <em><!--[-->framework<!--]--></em> is a collection of <a href="/framework/key-concepts/nuxt" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Nuxt 3<!--]--><!--]--><!----><!--]--></a> modules and <a href="/framework/key-concepts/nuxt-layers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->layers<!--]--><!--]--><!----><!--]--></a> primarily used to create headless SDP websites using the Tide Drupal CMS.<!--]--></p><p><!--[--><img src="/assets/img/modules/rpl-modules.png" alt="ripple is made up of Figma design, CSS styles, Vue JS components and Nuxt JS Sites" class="rpl-u-padding-t-4"><!--]--></p><h2 class="rpl-type-h2 docs-h2" id="whos-it-for" data-v-fff5b905><a href="#whos-it-for" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Who&#39;s it for?<!--]--></a></h2><p><!--[-->Whilst the Ripple UI components can be used in non SDP projects, Ripple framework assumes a Tide Drupal backend in most cases.<!--]--></p><p><!--[-->Using the Ripple framework, developers are able to build headless frontend websites that derive content from the Tide Drupal CMS via it&#39;s JSON API.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="sdp-architecture" data-v-ea525968><a href="#sdp-architecture" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->SDP architecture<!--]--></a></h2><p><!--[--><img src="/assets/img/modules/sdp-architecture.png" alt="SDP Architecture" class="rpl-u-padding-12"><!--]--></p><p><!--[-->To find out more about Single Digital Presence please visit <a href="https://www.vic.gov.au/single-digital-presence" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.vic.gov.au/single-digital-presence<!--]--><!--]--><!----><!--]--></a><!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/1.index.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/_payload.json">[{"state":1,"once":458,"_errors":460,"serverRendered":463,"path":7,"prerenderedAt":464},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":140,"$sdd-globals":162,"$sdd-navigation":164},["ShallowRef",4],["ShallowReactive",5],{"/framework":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":8,"title":10,"description":11,"layout":12,"body":13,"_type":135,"_id":136,"_source":137,"_file":138,"_extension":139},"/framework","",false,"Ripple Framework","Ripple framework contains the tools for building SDP sites using the Ripple design system components.","page",{"type":14,"children":15,"toc":127},"root",[16,27,35,72,82,88,93,98,105,115],{"type":17,"tag":18,"props":19,"children":20},"element","p",{},[21],{"type":17,"tag":22,"props":23,"children":26},"img",{"alt":10,"src":24,"style":25},"/assets/img/ripple-header.png","margin-top: -20px; padding-bottom: 50px; ",[],{"type":17,"tag":28,"props":29,"children":31},"h2",{"id":30},"what-is-it",[32],{"type":33,"value":34},"text","What is it?",{"type":17,"tag":18,"props":36,"children":37},{},[38,40,46,48,53,55,62,64,70],{"type":33,"value":39},"The Ripple design system consists of the design elements and components used to build ",{"type":17,"tag":41,"props":42,"children":43},"em",{},[44],{"type":33,"value":45},"any",{"type":33,"value":47}," web application using the Victorian government brand. Ripple ",{"type":17,"tag":41,"props":49,"children":50},{},[51],{"type":33,"value":52},"framework",{"type":33,"value":54}," is a collection of ",{"type":17,"tag":56,"props":57,"children":59},"a",{"href":58},"/framework/key-concepts/nuxt",[60],{"type":33,"value":61},"Nuxt 3",{"type":33,"value":63}," modules and ",{"type":17,"tag":56,"props":65,"children":67},{"href":66},"/framework/key-concepts/nuxt-layers",[68],{"type":33,"value":69},"layers",{"type":33,"value":71}," primarily used to create headless SDP websites using the Tide Drupal CMS.",{"type":17,"tag":18,"props":73,"children":74},{},[75],{"type":17,"tag":22,"props":76,"children":81},{"alt":77,"src":78,"className":79},"ripple is made up of Figma design, CSS styles, Vue JS components and Nuxt JS Sites","/assets/img/modules/rpl-modules.png",[80],"rpl-u-padding-t-4",[],{"type":17,"tag":28,"props":83,"children":85},{"id":84},"whos-it-for",[86],{"type":33,"value":87},"Who's it for?",{"type":17,"tag":18,"props":89,"children":90},{},[91],{"type":33,"value":92},"Whilst the Ripple UI components can be used in non SDP projects, Ripple framework assumes a Tide Drupal backend in most cases.",{"type":17,"tag":18,"props":94,"children":95},{},[96],{"type":33,"value":97},"Using the Ripple framework, developers are able to build headless frontend websites that derive content from the Tide Drupal CMS via it's JSON API.",{"type":17,"tag":99,"props":100,"children":102},"h3",{"id":101},"sdp-architecture",[103],{"type":33,"value":104},"SDP architecture",{"type":17,"tag":18,"props":106,"children":107},{},[108],{"type":17,"tag":22,"props":109,"children":114},{"alt":110,"src":111,"className":112},"SDP Architecture","/assets/img/modules/sdp-architecture.png",[113],"rpl-u-padding-12",[],{"type":17,"tag":18,"props":116,"children":117},{},[118,120],{"type":33,"value":119},"To find out more about Single Digital Presence please visit ",{"type":17,"tag":56,"props":121,"children":125},{"href":122,"rel":123},"https://www.vic.gov.au/single-digital-presence",[124],"nofollow",[126],{"type":33,"value":122},{"title":8,"searchDepth":128,"depth":128,"links":129},2,[130,131],{"id":30,"depth":128,"text":34},{"id":84,"depth":128,"text":87,"children":132},[133],{"id":101,"depth":134,"text":104},3,"markdown","content:framework:1.index.md","content","framework/1.index.md","md",["ShallowRef",141],["ShallowReactive",142],{"/framework":143},[144,152],{"_path":145,"_dir":146,"_draft":9,"_partial":9,"_locale":8,"title":147,"description":148,"layout":12,"label":149,"_type":135,"_id":150,"_source":137,"_file":151,"_extension":139},"/design-system/components/vertical-navigation","components","Vertical navigation","The Vertical navigation component displays a list of links to help users navigate a section of related pages.","Core","content:design-system:5.components:vertical-navigation.md","design-system/5.components/vertical-navigation.md",{"_path":58,"_dir":153,"_draft":9,"_partial":9,"_locale":8,"title":154,"description":155,"layout":12,"links":156,"_type":135,"_id":160,"_source":137,"_file":161,"_extension":139},"key-concepts","Nuxt","Nuxt is the framework used in Ripple to deliver headless SDP websites that connect to Tide Drupal backends for content.",[157],{"text":158,"url":159},"Nuxt documentation","https://nuxt.com/","content:framework:2.key-concepts:1.nuxt.md","framework/2.key-concepts/1.nuxt.md",["ShallowRef",163],{},[165,170,414],{"title":166,"_path":167,"icon":168,"layout":169},"Ripple Design System","/","carbon:home","home",{"title":171,"_path":172,"children":173},"Design System","/design-system",[174,189,205,234,268],{"title":175,"_path":176,"children":177},"About","/design-system/about",[178,181,183,186],{"title":179,"_path":180,"layout":12},"What is Ripple?","/design-system/about/what-is-ripple",{"title":87,"_path":182,"layout":12},"/design-system/about/whos-it-for",{"title":184,"_path":185,"layout":12},"Support","/design-system/about/getting-support",{"title":187,"_path":188,"layout":12},"Contributing","/design-system/about/contributing",{"title":190,"_path":191,"children":192},"Design","/design-system/design",[193,196,199,202],{"title":194,"_path":195,"layout":12},"Getting started","/design-system/design/getting-started",{"title":197,"_path":198,"layout":12},"Our design principles","/design-system/design/our-design-principles",{"title":200,"_path":201,"layout":12},"Design tokens","/design-system/design/design-tokens",{"title":203,"_path":204,"layout":12},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":206,"_path":207,"children":208},"Develop","/design-system/develop",[209,211,213,216],{"title":194,"_path":210,"layout":12},"/design-system/develop/getting-started",{"title":187,"_path":212,"layout":12},"/design-system/develop/contributing",{"title":214,"_path":215,"layout":12},"Theme and brand application","/design-system/develop/theming",{"title":217,"_path":218,"children":219,"layout":12},"Usage","/design-system/develop/usage",[220,223,226,228,231],{"title":221,"_path":222,"layout":12},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":224,"_path":225,"layout":12},"Vue","/design-system/develop/usage/vue",{"title":154,"_path":227,"layout":12},"/design-system/develop/usage/nuxt",{"title":229,"_path":230,"layout":12},"Web components","/design-system/develop/usage/webcomponents",{"title":232,"_path":233,"layout":12},"Styles only","/design-system/develop/usage/css-only",{"title":235,"_path":236,"children":237},"Styles","/design-system/styles",[238,241,244,247,250,253,256,259,262,265],{"title":239,"_path":240,"layout":12},"Colour","/design-system/styles/colour",{"title":242,"_path":243,"layout":12},"Focus state","/design-system/styles/focus-state",{"title":245,"_path":246,"layout":12},"Grid","/design-system/styles/grid",{"title":248,"_path":249,"layout":12},"Icons","/design-system/styles/icons",{"title":251,"_path":252,"layout":12},"Layer styles","/design-system/styles/layer-styles",{"title":254,"_path":255,"layout":12},"Layout","/design-system/styles/layout",{"title":257,"_path":258,"layout":12},"Logo","/design-system/styles/logo",{"title":260,"_path":261,"layout":12},"Motion","/design-system/styles/motion",{"title":263,"_path":264,"layout":12},"Spacing","/design-system/styles/spacing",{"title":266,"_path":267,"layout":12},"Typography","/design-system/styles/typography",{"title":269,"_path":270,"children":271},"Components","/design-system/components",[272,275,278,281,284,287,290,293,296,299,302,305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413],{"title":273,"_path":274,"layout":12},"Accordion","/design-system/components/accordion",{"title":276,"_path":277,"layout":12},"Acknowledgement","/design-system/components/acknowledgment",{"title":279,"_path":280,"layout":12},"Alert","/design-system/components/alert",{"title":282,"_path":283,"layout":12},"Block quote","/design-system/components/block-quote",{"title":285,"_path":286,"layout":12},"Breadcrumb","/design-system/components/breadcrumb",{"title":288,"_path":289,"layout":12},"Button","/design-system/components/button",{"title":291,"_path":292,"layout":12},"Call to action","/design-system/components/call-to-action",{"title":294,"_path":295,"layout":12},"Callout","/design-system/components/callout",{"title":297,"_path":298,"layout":12},"Campaign banner","/design-system/components/campaign-banner",{"title":300,"_path":301,"layout":12},"Card","/design-system/components/card",{"title":303,"_path":304,"layout":12},"Carousel","/design-system/components/carousel",{"title":306,"_path":307,"layout":12},"Category grid","/design-system/components/category-grid",{"title":309,"_path":310,"layout":12},"Checkbox","/design-system/components/checkbox",{"title":312,"_path":313,"layout":12},"Chip","/design-system/components/chip",{"title":315,"_path":316,"layout":12},"Contact us","/design-system/components/contact-us",{"title":318,"_path":319,"layout":12},"Date input","/design-system/components/date-input",{"title":321,"_path":322,"layout":12},"Detail list","/design-system/components/detail-list",{"title":324,"_path":325,"layout":12},"Dropdown","/design-system/components/dropdown",{"title":327,"_path":328,"layout":12},"File","/design-system/components/file",{"title":330,"_path":331,"layout":12},"Footer","/design-system/components/footer",{"title":333,"_path":334,"layout":12},"Form","/design-system/components/form",{"title":336,"_path":337,"layout":12},"Form alert","/design-system/components/form-alert",{"title":339,"_path":340,"layout":12},"Header","/design-system/components/header",{"title":342,"_path":343,"layout":12},"In-page navigation","/design-system/components/in-page-navigation",{"title":345,"_path":346,"layout":12},"Input field","/design-system/components/input-field",{"title":348,"_path":349,"layout":12},"Key dates","/design-system/components/key-dates",{"title":351,"_path":352,"layout":12},"Media","/design-system/components/media",{"title":354,"_path":355,"layout":12},"Media embed","/design-system/components/media-embed",{"title":357,"_path":358,"layout":12},"Media fullscreen","/design-system/components/media-fullscreen",{"title":360,"_path":361,"layout":12},"Media gallery","/design-system/components/media-gallery",{"title":363,"_path":364,"layout":12},"Option button","/design-system/components/option-button",{"title":366,"_path":367,"layout":12},"Page action","/design-system/components/page-action",{"title":369,"_path":370,"layout":12},"Pagination","/design-system/components/pagination",{"title":372,"_path":373,"layout":12},"Primary navigation","/design-system/components/primary-navigation",{"title":375,"_path":376,"layout":12},"Profile","/design-system/components/profile",{"title":378,"_path":379,"layout":12},"Radio button","/design-system/components/radio-button",{"title":381,"_path":382,"layout":12},"Related links","/design-system/components/related-links",{"title":384,"_path":385,"layout":12},"Results listing","/design-system/components/results-listing",{"title":387,"_path":388,"layout":12},"Search bar","/design-system/components/search-bar",{"title":390,"_path":391,"layout":12},"Skip link","/design-system/components/skip-link",{"title":393,"_path":394,"layout":12},"Social share","/design-system/components/social-share",{"title":396,"_path":397,"layout":12},"Statistics grid","/design-system/components/statistics-grid",{"title":399,"_path":400,"layout":12},"Table","/design-system/components/table",{"title":402,"_path":403,"layout":12},"Tabs","/design-system/components/tabs",{"title":405,"_path":406,"layout":12},"Tag","/design-system/components/tag",{"title":408,"_path":409,"layout":12},"Text area","/design-system/components/text-area",{"title":411,"_path":412,"layout":12},"Timeline","/design-system/components/timeline",{"title":147,"_path":145,"layout":12},{"title":10,"_path":7,"children":415,"layout":12},[416,417,433,455],{"title":10,"_path":7,"layout":12},{"title":418,"_path":419,"children":420},"Key Concepts","/framework/key-concepts",[421,422,424,427,430],{"title":154,"_path":58,"layout":12},{"title":423,"_path":66,"layout":12},"Layers",{"title":425,"_path":426,"layout":12},"API endpoints","/framework/key-concepts/api-endpoints",{"title":428,"_path":429,"layout":12},"Content types","/framework/key-concepts/content-types",{"title":431,"_path":432,"layout":12},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":434,"_path":435,"children":436},"Guides","/framework/guides",[437,440,443,446,449,452],{"title":438,"_path":439,"layout":12},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":441,"_path":442,"layout":12},"Setting up a new site","/framework/guides/new-sites",{"title":444,"_path":445,"layout":12},"Applying theme and brand","/framework/guides/brand-application",{"title":447,"_path":448,"layout":12},"Creating content types","/framework/guides/creating-content-types",{"title":450,"_path":451,"layout":12},"Creating new layers","/framework/guides/creating-new-layers",{"title":453,"_path":454,"layout":12},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":456,"_path":457,"layout":12},"Core modules","/framework/core-modules",["Reactive",459],["Set"],["Reactive",461],{"module-navigation":462},null,true,1714695150862]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/migrating" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Migrating from Ripple 1.x</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/new-sites" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Setting up a new site</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/brand-application" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Applying theme and brand</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-new-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating new layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Adding a new dynamic component</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><!----><a href="/framework/core-modules" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Core modules</span><!--]--></a></li><!--]--></ul></nav><a href="/design-system/about/what-is-ripple" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Design System<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Ripple Framework</h1><p class="rpl-type-p-large" data-v-3163c6df>Ripple framework contains the tools for building SDP sites using the Ripple design system components.</p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[--><img src="/assets/img/ripple-header.png" alt="Ripple Framework" style="margin-top:-20px;padding-bottom:50px;"><!--]--></p><h2 class="rpl-type-h2 docs-h2" id="what-is-it" data-v-fff5b905><a href="#what-is-it" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->What is it?<!--]--></a></h2><p><!--[-->The Ripple design system consists of the design elements and components used to build <em><!--[-->any<!--]--></em> web application using the Victorian government brand. Ripple <em><!--[-->framework<!--]--></em> is a collection of <a href="/framework/key-concepts/nuxt" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Nuxt 3<!--]--><!--]--><!----><!--]--></a> modules and <a href="/framework/key-concepts/nuxt-layers" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->layers<!--]--><!--]--><!----><!--]--></a> primarily used to create headless SDP websites using the Tide Drupal CMS.<!--]--></p><p><!--[--><img src="/assets/img/modules/rpl-modules.png" alt="ripple is made up of Figma design, CSS styles, Vue JS components and Nuxt JS Sites" class="rpl-u-padding-t-4"><!--]--></p><h2 class="rpl-type-h2 docs-h2" id="whos-it-for" data-v-fff5b905><a href="#whos-it-for" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Who&#39;s it for?<!--]--></a></h2><p><!--[-->Whilst the Ripple UI components can be used in non SDP projects, Ripple framework assumes a Tide Drupal backend in most cases.<!--]--></p><p><!--[-->Using the Ripple framework, developers are able to build headless frontend websites that derive content from the Tide Drupal CMS via it&#39;s JSON API.<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="sdp-architecture" data-v-ea525968><a href="#sdp-architecture" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->SDP architecture<!--]--></a></h2><p><!--[--><img src="/assets/img/modules/sdp-architecture.png" alt="SDP Architecture" class="rpl-u-padding-12"><!--]--></p><p><!--[-->To find out more about Single Digital Presence please visit <a href="https://www.vic.gov.au/single-digital-presence" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.vic.gov.au/single-digital-presence<!--]--><!--]--><!----><!--]--></a><!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/1.index.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/_payload.json">[{"state":1,"once":458,"_errors":460,"serverRendered":463,"path":7,"prerenderedAt":464},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":140,"$sdd-globals":162,"$sdd-navigation":164},["ShallowRef",4],["ShallowReactive",5],{"/framework":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":8,"title":10,"description":11,"layout":12,"body":13,"_type":135,"_id":136,"_source":137,"_file":138,"_extension":139},"/framework","",false,"Ripple Framework","Ripple framework contains the tools for building SDP sites using the Ripple design system components.","page",{"type":14,"children":15,"toc":127},"root",[16,27,35,72,82,88,93,98,105,115],{"type":17,"tag":18,"props":19,"children":20},"element","p",{},[21],{"type":17,"tag":22,"props":23,"children":26},"img",{"alt":10,"src":24,"style":25},"/assets/img/ripple-header.png","margin-top: -20px; padding-bottom: 50px; ",[],{"type":17,"tag":28,"props":29,"children":31},"h2",{"id":30},"what-is-it",[32],{"type":33,"value":34},"text","What is it?",{"type":17,"tag":18,"props":36,"children":37},{},[38,40,46,48,53,55,62,64,70],{"type":33,"value":39},"The Ripple design system consists of the design elements and components used to build ",{"type":17,"tag":41,"props":42,"children":43},"em",{},[44],{"type":33,"value":45},"any",{"type":33,"value":47}," web application using the Victorian government brand. Ripple ",{"type":17,"tag":41,"props":49,"children":50},{},[51],{"type":33,"value":52},"framework",{"type":33,"value":54}," is a collection of ",{"type":17,"tag":56,"props":57,"children":59},"a",{"href":58},"/framework/key-concepts/nuxt",[60],{"type":33,"value":61},"Nuxt 3",{"type":33,"value":63}," modules and ",{"type":17,"tag":56,"props":65,"children":67},{"href":66},"/framework/key-concepts/nuxt-layers",[68],{"type":33,"value":69},"layers",{"type":33,"value":71}," primarily used to create headless SDP websites using the Tide Drupal CMS.",{"type":17,"tag":18,"props":73,"children":74},{},[75],{"type":17,"tag":22,"props":76,"children":81},{"alt":77,"src":78,"className":79},"ripple is made up of Figma design, CSS styles, Vue JS components and Nuxt JS Sites","/assets/img/modules/rpl-modules.png",[80],"rpl-u-padding-t-4",[],{"type":17,"tag":28,"props":83,"children":85},{"id":84},"whos-it-for",[86],{"type":33,"value":87},"Who's it for?",{"type":17,"tag":18,"props":89,"children":90},{},[91],{"type":33,"value":92},"Whilst the Ripple UI components can be used in non SDP projects, Ripple framework assumes a Tide Drupal backend in most cases.",{"type":17,"tag":18,"props":94,"children":95},{},[96],{"type":33,"value":97},"Using the Ripple framework, developers are able to build headless frontend websites that derive content from the Tide Drupal CMS via it's JSON API.",{"type":17,"tag":99,"props":100,"children":102},"h3",{"id":101},"sdp-architecture",[103],{"type":33,"value":104},"SDP architecture",{"type":17,"tag":18,"props":106,"children":107},{},[108],{"type":17,"tag":22,"props":109,"children":114},{"alt":110,"src":111,"className":112},"SDP Architecture","/assets/img/modules/sdp-architecture.png",[113],"rpl-u-padding-12",[],{"type":17,"tag":18,"props":116,"children":117},{},[118,120],{"type":33,"value":119},"To find out more about Single Digital Presence please visit ",{"type":17,"tag":56,"props":121,"children":125},{"href":122,"rel":123},"https://www.vic.gov.au/single-digital-presence",[124],"nofollow",[126],{"type":33,"value":122},{"title":8,"searchDepth":128,"depth":128,"links":129},2,[130,131],{"id":30,"depth":128,"text":34},{"id":84,"depth":128,"text":87,"children":132},[133],{"id":101,"depth":134,"text":104},3,"markdown","content:framework:1.index.md","content","framework/1.index.md","md",["ShallowRef",141],["ShallowReactive",142],{"/framework":143},[144,152],{"_path":145,"_dir":146,"_draft":9,"_partial":9,"_locale":8,"title":147,"description":148,"layout":12,"label":149,"_type":135,"_id":150,"_source":137,"_file":151,"_extension":139},"/design-system/components/vertical-navigation","components","Vertical navigation","The Vertical navigation component displays a list of links to help users navigate a section of related pages.","Core","content:design-system:5.components:vertical-navigation.md","design-system/5.components/vertical-navigation.md",{"_path":58,"_dir":153,"_draft":9,"_partial":9,"_locale":8,"title":154,"description":155,"layout":12,"links":156,"_type":135,"_id":160,"_source":137,"_file":161,"_extension":139},"key-concepts","Nuxt","Nuxt is the framework used in Ripple to deliver headless SDP websites that connect to Tide Drupal backends for content.",[157],{"text":158,"url":159},"Nuxt documentation","https://nuxt.com/","content:framework:2.key-concepts:1.nuxt.md","framework/2.key-concepts/1.nuxt.md",["ShallowRef",163],{},[165,170,414],{"title":166,"_path":167,"icon":168,"layout":169},"Ripple Design System","/","carbon:home","home",{"title":171,"_path":172,"children":173},"Design System","/design-system",[174,189,205,234,268],{"title":175,"_path":176,"children":177},"About","/design-system/about",[178,181,183,186],{"title":179,"_path":180,"layout":12},"What is Ripple?","/design-system/about/what-is-ripple",{"title":87,"_path":182,"layout":12},"/design-system/about/whos-it-for",{"title":184,"_path":185,"layout":12},"Support","/design-system/about/getting-support",{"title":187,"_path":188,"layout":12},"Contributing","/design-system/about/contributing",{"title":190,"_path":191,"children":192},"Design","/design-system/design",[193,196,199,202],{"title":194,"_path":195,"layout":12},"Getting started","/design-system/design/getting-started",{"title":197,"_path":198,"layout":12},"Our design principles","/design-system/design/our-design-principles",{"title":200,"_path":201,"layout":12},"Design tokens","/design-system/design/design-tokens",{"title":203,"_path":204,"layout":12},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":206,"_path":207,"children":208},"Develop","/design-system/develop",[209,211,213,216],{"title":194,"_path":210,"layout":12},"/design-system/develop/getting-started",{"title":187,"_path":212,"layout":12},"/design-system/develop/contributing",{"title":214,"_path":215,"layout":12},"Theme and brand application","/design-system/develop/theming",{"title":217,"_path":218,"children":219,"layout":12},"Usage","/design-system/develop/usage",[220,223,226,228,231],{"title":221,"_path":222,"layout":12},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":224,"_path":225,"layout":12},"Vue","/design-system/develop/usage/vue",{"title":154,"_path":227,"layout":12},"/design-system/develop/usage/nuxt",{"title":229,"_path":230,"layout":12},"Web components","/design-system/develop/usage/webcomponents",{"title":232,"_path":233,"layout":12},"Styles only","/design-system/develop/usage/css-only",{"title":235,"_path":236,"children":237},"Styles","/design-system/styles",[238,241,244,247,250,253,256,259,262,265],{"title":239,"_path":240,"layout":12},"Colour","/design-system/styles/colour",{"title":242,"_path":243,"layout":12},"Focus state","/design-system/styles/focus-state",{"title":245,"_path":246,"layout":12},"Grid","/design-system/styles/grid",{"title":248,"_path":249,"layout":12},"Icons","/design-system/styles/icons",{"title":251,"_path":252,"layout":12},"Layer styles","/design-system/styles/layer-styles",{"title":254,"_path":255,"layout":12},"Layout","/design-system/styles/layout",{"title":257,"_path":258,"layout":12},"Logo","/design-system/styles/logo",{"title":260,"_path":261,"layout":12},"Motion","/design-system/styles/motion",{"title":263,"_path":264,"layout":12},"Spacing","/design-system/styles/spacing",{"title":266,"_path":267,"layout":12},"Typography","/design-system/styles/typography",{"title":269,"_path":270,"children":271},"Components","/design-system/components",[272,275,278,281,284,287,290,293,296,299,302,305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413],{"title":273,"_path":274,"layout":12},"Accordion","/design-system/components/accordion",{"title":276,"_path":277,"layout":12},"Acknowledgement","/design-system/components/acknowledgment",{"title":279,"_path":280,"layout":12},"Alert","/design-system/components/alert",{"title":282,"_path":283,"layout":12},"Block quote","/design-system/components/block-quote",{"title":285,"_path":286,"layout":12},"Breadcrumb","/design-system/components/breadcrumb",{"title":288,"_path":289,"layout":12},"Button","/design-system/components/button",{"title":291,"_path":292,"layout":12},"Call to action","/design-system/components/call-to-action",{"title":294,"_path":295,"layout":12},"Callout","/design-system/components/callout",{"title":297,"_path":298,"layout":12},"Campaign banner","/design-system/components/campaign-banner",{"title":300,"_path":301,"layout":12},"Card","/design-system/components/card",{"title":303,"_path":304,"layout":12},"Carousel","/design-system/components/carousel",{"title":306,"_path":307,"layout":12},"Category grid","/design-system/components/category-grid",{"title":309,"_path":310,"layout":12},"Checkbox","/design-system/components/checkbox",{"title":312,"_path":313,"layout":12},"Chip","/design-system/components/chip",{"title":315,"_path":316,"layout":12},"Contact us","/design-system/components/contact-us",{"title":318,"_path":319,"layout":12},"Date input","/design-system/components/date-input",{"title":321,"_path":322,"layout":12},"Detail list","/design-system/components/detail-list",{"title":324,"_path":325,"layout":12},"Dropdown","/design-system/components/dropdown",{"title":327,"_path":328,"layout":12},"File","/design-system/components/file",{"title":330,"_path":331,"layout":12},"Footer","/design-system/components/footer",{"title":333,"_path":334,"layout":12},"Form","/design-system/components/form",{"title":336,"_path":337,"layout":12},"Form alert","/design-system/components/form-alert",{"title":339,"_path":340,"layout":12},"Header","/design-system/components/header",{"title":342,"_path":343,"layout":12},"In-page navigation","/design-system/components/in-page-navigation",{"title":345,"_path":346,"layout":12},"Input field","/design-system/components/input-field",{"title":348,"_path":349,"layout":12},"Key dates","/design-system/components/key-dates",{"title":351,"_path":352,"layout":12},"Media","/design-system/components/media",{"title":354,"_path":355,"layout":12},"Media embed","/design-system/components/media-embed",{"title":357,"_path":358,"layout":12},"Media fullscreen","/design-system/components/media-fullscreen",{"title":360,"_path":361,"layout":12},"Media gallery","/design-system/components/media-gallery",{"title":363,"_path":364,"layout":12},"Option button","/design-system/components/option-button",{"title":366,"_path":367,"layout":12},"Page action","/design-system/components/page-action",{"title":369,"_path":370,"layout":12},"Pagination","/design-system/components/pagination",{"title":372,"_path":373,"layout":12},"Primary navigation","/design-system/components/primary-navigation",{"title":375,"_path":376,"layout":12},"Profile","/design-system/components/profile",{"title":378,"_path":379,"layout":12},"Radio button","/design-system/components/radio-button",{"title":381,"_path":382,"layout":12},"Related links","/design-system/components/related-links",{"title":384,"_path":385,"layout":12},"Results listing","/design-system/components/results-listing",{"title":387,"_path":388,"layout":12},"Search bar","/design-system/components/search-bar",{"title":390,"_path":391,"layout":12},"Skip link","/design-system/components/skip-link",{"title":393,"_path":394,"layout":12},"Social share","/design-system/components/social-share",{"title":396,"_path":397,"layout":12},"Statistics grid","/design-system/components/statistics-grid",{"title":399,"_path":400,"layout":12},"Table","/design-system/components/table",{"title":402,"_path":403,"layout":12},"Tabs","/design-system/components/tabs",{"title":405,"_path":406,"layout":12},"Tag","/design-system/components/tag",{"title":408,"_path":409,"layout":12},"Text area","/design-system/components/text-area",{"title":411,"_path":412,"layout":12},"Timeline","/design-system/components/timeline",{"title":147,"_path":145,"layout":12},{"title":10,"_path":7,"children":415,"layout":12},[416,417,433,455],{"title":10,"_path":7,"layout":12},{"title":418,"_path":419,"children":420},"Key Concepts","/framework/key-concepts",[421,422,424,427,430],{"title":154,"_path":58,"layout":12},{"title":423,"_path":66,"layout":12},"Layers",{"title":425,"_path":426,"layout":12},"API endpoints","/framework/key-concepts/api-endpoints",{"title":428,"_path":429,"layout":12},"Content types","/framework/key-concepts/content-types",{"title":431,"_path":432,"layout":12},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":434,"_path":435,"children":436},"Guides","/framework/guides",[437,440,443,446,449,452],{"title":438,"_path":439,"layout":12},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":441,"_path":442,"layout":12},"Setting up a new site","/framework/guides/new-sites",{"title":444,"_path":445,"layout":12},"Applying theme and brand","/framework/guides/brand-application",{"title":447,"_path":448,"layout":12},"Creating content types","/framework/guides/creating-content-types",{"title":450,"_path":451,"layout":12},"Creating new layers","/framework/guides/creating-new-layers",{"title":453,"_path":454,"layout":12},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":456,"_path":457,"layout":12},"Core modules","/framework/core-modules",["Reactive",459],["Set"],["Reactive",461],{"module-navigation":462},null,true,1714695649116]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/framework/key-concepts/api-endpoints/_payload.json b/framework/key-concepts/api-endpoints/_payload.json
index 6e4c54a4bb..d25200e9c4 100644
--- a/framework/key-concepts/api-endpoints/_payload.json
+++ b/framework/key-concepts/api-endpoints/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,28,50],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",false,{"id":9,"text":10,"url":9,"active":11,"items":12},"/framework/key-concepts","Key Concepts",true,[13,16,19,22,25],{"id":14,"text":15,"url":14,"active":7,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":17,"text":18,"url":17,"active":7,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":20,"text":21,"url":20,"active":11,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":23,"text":24,"url":23,"active":7,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":26,"text":27,"url":26,"active":7,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":29,"text":30,"url":29,"active":7,"items":31},"/framework/guides","Guides",[32,35,38,41,44,47],{"id":33,"text":34,"url":33,"active":7,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":39,"text":40,"url":39,"active":7,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":42,"text":43,"url":42,"active":7,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":45,"text":46,"url":45,"active":7,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":48,"text":49,"url":48,"active":7,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":51,"text":52,"url":51,"active":7,"items":-1},"/framework/core-modules","Core modules",1714695151246]
\ No newline at end of file
+[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,28,50],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",false,{"id":9,"text":10,"url":9,"active":11,"items":12},"/framework/key-concepts","Key Concepts",true,[13,16,19,22,25],{"id":14,"text":15,"url":14,"active":7,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":17,"text":18,"url":17,"active":7,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":20,"text":21,"url":20,"active":11,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":23,"text":24,"url":23,"active":7,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":26,"text":27,"url":26,"active":7,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":29,"text":30,"url":29,"active":7,"items":31},"/framework/guides","Guides",[32,35,38,41,44,47],{"id":33,"text":34,"url":33,"active":7,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":39,"text":40,"url":39,"active":7,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":42,"text":43,"url":42,"active":7,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":45,"text":46,"url":45,"active":7,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":48,"text":49,"url":48,"active":7,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":51,"text":52,"url":51,"active":7,"items":-1},"/framework/core-modules","Core modules",1714695649482]
\ No newline at end of file
diff --git a/framework/key-concepts/api-endpoints/index.html b/framework/key-concepts/api-endpoints/index.html
index 0ca9be8ccf..5d73cd86b7 100644
--- a/framework/key-concepts/api-endpoints/index.html
+++ b/framework/key-concepts/api-endpoints/index.html
@@ -23,62 +23,62 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseImg.wgVpK8mn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseImg.Wu9xgcX7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Nuxt</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/api-endpoints" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>API endpoints</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dynamic components</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/guides-toggle"><span class="rpl-vertical-nav__toggle-text">Guides</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/guides-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/migrating" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Migrating from Ripple 1.x</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/new-sites" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Setting up a new site</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/brand-application" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Applying theme and brand</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-new-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating new layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Adding a new dynamic component</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><!----><a href="/framework/core-modules" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Core modules</span><!--]--></a></li><!--]--></ul></nav><a href="/design-system/about/what-is-ripple" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Design System<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>API endpoints</h1><p class="rpl-type-p-large" data-v-3163c6df>Ripple creates an API that handles the translation of Drupal data into exactly whats needed on the page.</p><ul class="links rpl-u-margin-t-5" data-v-3163c6df><!--[--><li data-v-3163c6df><a href="https://nuxt.com/docs/guide/directory-structure/server#api-routes" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p rpl-type-p" target="_blank" data-v-3163c6df data-v-5d4aedf1><!--[--><!--[--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--[-->Nuxt API routes documentation<!--]--><!----><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></li><!--]--></ul></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->In Ripple 2 we use API routes to create a <a href="https://medium.com/mobilepeople/backend-for-frontend-pattern-why-you-need-to-know-it-46f94ce420b0" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->backend for frontend<!--]--><!--]--><!----><!--]--></a> API that handles communicating with the Drupal Tide JSON API and maps the response to only what is required to render the page in Ripple.<!--]--></p><p><!--[--><img src="/assets/img/modules/api-routes.png" alt="API routes diagram"><!--]--></p><h2 class="rpl-type-h2 docs-h2" id="nitro-server-routes" data-v-fff5b905><a href="#nitro-server-routes" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Nitro server routes<!--]--></a></h2><p><!--[-->Nuxt 3 introduces the concept of <a href="https://nuxt.com/docs/guide/directory-structure/server#api-routes" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->server API routes<!--]--><!--]--><!----><!--]--></a>   powered by the <a href="https://nitro.unjs.io/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Nitro rendering engine<!--]--><!--]--><!----><!--]--></a> and <a href="https://github.com/unjs/h3" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->H3<!--]--><!--]--><!----><!--]--></a> server.<!--]--></p><p><!--[-->Nitro is the server layer that creates API routes in a Nuxt application. Nitro plugins run at build time and we use them to add the mapping needed to tell Ripple-tide-api package how to respond to a Drupal JSON API request for a content type node<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="ripple-tide-api" data-v-fff5b905><a href="#ripple-tide-api" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Ripple Tide API<!--]--></a></h2><p><!--[-->Ripple Tide API is the module that handles communication with Tide Drupal JSON API. It provides a wrapper service for API calls to Tide and provides an interface for adding mapping functions which transform the response from Drupal into only what&#39;s needed for rendering the website. This makes creating pages easier and improves performance by moving all data transformation into the server bundle where it can be easily cached.<!--]--></p><p><!--[--><img src="/assets/img/modules/ripple-tide-api.png" alt="API routes diagram"><!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/2.key-concepts/3.API-endpoints.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/key-concepts/api-endpoints/_payload.json">[{"state":1,"once":442,"_errors":444,"serverRendered":447,"path":7,"prerenderedAt":448},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":120,"$sdd-globals":144,"$sdd-navigation":146},["ShallowRef",4],["ShallowReactive",5],{"/framework/key-concepts/api-endpoints":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"links":14,"body":18,"_type":115,"_id":116,"_source":117,"_file":118,"_extension":119},"/framework/key-concepts/api-endpoints","key-concepts",false,"","API endpoints","Ripple creates an API that handles the translation of Drupal data into exactly whats needed on the page.","page",[15],{"text":16,"url":17},"Nuxt API routes documentation","https://nuxt.com/docs/guide/directory-structure/server#api-routes",{"type":19,"children":20,"toc":110},"root",[21,40,49,56,87,92,98,103],{"type":22,"tag":23,"props":24,"children":25},"element","p",{},[26,29,38],{"type":27,"value":28},"text","In Ripple 2 we use API routes to create a ",{"type":22,"tag":30,"props":31,"children":35},"a",{"href":32,"rel":33},"https://medium.com/mobilepeople/backend-for-frontend-pattern-why-you-need-to-know-it-46f94ce420b0",[34],"nofollow",[36],{"type":27,"value":37},"backend for frontend",{"type":27,"value":39}," API that handles communicating with the Drupal Tide JSON API and maps the response to only what is required to render the page in Ripple.",{"type":22,"tag":23,"props":41,"children":42},{},[43],{"type":22,"tag":44,"props":45,"children":48},"img",{"alt":46,"src":47},"API routes diagram","/assets/img/modules/api-routes.png",[],{"type":22,"tag":50,"props":51,"children":53},"h2",{"id":52},"nitro-server-routes",[54],{"type":27,"value":55},"Nitro server routes",{"type":22,"tag":23,"props":57,"children":58},{},[59,61,67,69,76,78,85],{"type":27,"value":60},"Nuxt 3 introduces the concept of ",{"type":22,"tag":30,"props":62,"children":64},{"href":17,"rel":63},[34],[65],{"type":27,"value":66},"server API routes",{"type":27,"value":68},"   powered by the ",{"type":22,"tag":30,"props":70,"children":73},{"href":71,"rel":72},"https://nitro.unjs.io/",[34],[74],{"type":27,"value":75},"Nitro rendering engine",{"type":27,"value":77}," and ",{"type":22,"tag":30,"props":79,"children":82},{"href":80,"rel":81},"https://github.com/unjs/h3",[34],[83],{"type":27,"value":84},"H3",{"type":27,"value":86}," server.",{"type":22,"tag":23,"props":88,"children":89},{},[90],{"type":27,"value":91},"Nitro is the server layer that creates API routes in a Nuxt application. Nitro plugins run at build time and we use them to add the mapping needed to tell Ripple-tide-api package how to respond to a Drupal JSON API request for a content type node",{"type":22,"tag":50,"props":93,"children":95},{"id":94},"ripple-tide-api",[96],{"type":27,"value":97},"Ripple Tide API",{"type":22,"tag":23,"props":99,"children":100},{},[101],{"type":27,"value":102},"Ripple Tide API is the module that handles communication with Tide Drupal JSON API. It provides a wrapper service for API calls to Tide and provides an interface for adding mapping functions which transform the response from Drupal into only what's needed for rendering the website. This makes creating pages easier and improves performance by moving all data transformation into the server bundle where it can be easily cached.",{"type":22,"tag":23,"props":104,"children":105},{},[106],{"type":22,"tag":44,"props":107,"children":109},{"alt":46,"src":108},"/assets/img/modules/ripple-tide-api.png",[],{"title":10,"searchDepth":111,"depth":111,"links":112},2,[113,114],{"id":52,"depth":111,"text":55},{"id":94,"depth":111,"text":97},"markdown","content:framework:2.key-concepts:3.API-endpoints.md","content","framework/2.key-concepts/3.API-endpoints.md","md",["ShallowRef",121],["ShallowReactive",122],{"/framework/key-concepts/api-endpoints":123},[124,134],{"_path":125,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":126,"description":127,"layout":13,"links":128,"_type":115,"_id":132,"_source":117,"_file":133,"_extension":119},"/framework/key-concepts/nuxt-layers","Layers","Nuxt layers are used to encapsulate Ripple functionality to share and reuse",[129],{"text":130,"url":131},"Nuxt layers documentation","https://nuxt.com/docs/getting-started/layers","content:framework:2.key-concepts:2.nuxt-layers.md","framework/2.key-concepts/2.nuxt-layers.md",{"_path":135,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":136,"description":137,"layout":13,"links":138,"_type":115,"_id":142,"_source":117,"_file":143,"_extension":119},"/framework/key-concepts/content-types","Content types","Implementing content type specific page layouts",[139],{"text":140,"url":141},"Drupal content types","https://www.drupal.org/docs/7/understanding-drupal/content-types","content:framework:2.key-concepts:4.content-types.md","framework/2.key-concepts/4.content-types.md",["ShallowRef",145],{},[147,152,400],{"title":148,"_path":149,"icon":150,"layout":151},"Ripple Design System","/","carbon:home","home",{"title":153,"_path":154,"children":155},"Design System","/design-system",[156,172,188,218,252],{"title":157,"_path":158,"children":159},"About","/design-system/about",[160,163,166,169],{"title":161,"_path":162,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":164,"_path":165,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":167,"_path":168,"layout":13},"Support","/design-system/about/getting-support",{"title":170,"_path":171,"layout":13},"Contributing","/design-system/about/contributing",{"title":173,"_path":174,"children":175},"Design","/design-system/design",[176,179,182,185],{"title":177,"_path":178,"layout":13},"Getting started","/design-system/design/getting-started",{"title":180,"_path":181,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":183,"_path":184,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":186,"_path":187,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":189,"_path":190,"children":191},"Develop","/design-system/develop",[192,194,196,199],{"title":177,"_path":193,"layout":13},"/design-system/develop/getting-started",{"title":170,"_path":195,"layout":13},"/design-system/develop/contributing",{"title":197,"_path":198,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":200,"_path":201,"children":202,"layout":13},"Usage","/design-system/develop/usage",[203,206,209,212,215],{"title":204,"_path":205,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":207,"_path":208,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":210,"_path":211,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":213,"_path":214,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":216,"_path":217,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":219,"_path":220,"children":221},"Styles","/design-system/styles",[222,225,228,231,234,237,240,243,246,249],{"title":223,"_path":224,"layout":13},"Colour","/design-system/styles/colour",{"title":226,"_path":227,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":229,"_path":230,"layout":13},"Grid","/design-system/styles/grid",{"title":232,"_path":233,"layout":13},"Icons","/design-system/styles/icons",{"title":235,"_path":236,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":238,"_path":239,"layout":13},"Layout","/design-system/styles/layout",{"title":241,"_path":242,"layout":13},"Logo","/design-system/styles/logo",{"title":244,"_path":245,"layout":13},"Motion","/design-system/styles/motion",{"title":247,"_path":248,"layout":13},"Spacing","/design-system/styles/spacing",{"title":250,"_path":251,"layout":13},"Typography","/design-system/styles/typography",{"title":253,"_path":254,"children":255},"Components","/design-system/components",[256,259,262,265,268,271,274,277,280,283,286,289,292,295,298,301,304,307,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397],{"title":257,"_path":258,"layout":13},"Accordion","/design-system/components/accordion",{"title":260,"_path":261,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":263,"_path":264,"layout":13},"Alert","/design-system/components/alert",{"title":266,"_path":267,"layout":13},"Block quote","/design-system/components/block-quote",{"title":269,"_path":270,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":272,"_path":273,"layout":13},"Button","/design-system/components/button",{"title":275,"_path":276,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":278,"_path":279,"layout":13},"Callout","/design-system/components/callout",{"title":281,"_path":282,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":284,"_path":285,"layout":13},"Card","/design-system/components/card",{"title":287,"_path":288,"layout":13},"Carousel","/design-system/components/carousel",{"title":290,"_path":291,"layout":13},"Category grid","/design-system/components/category-grid",{"title":293,"_path":294,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":296,"_path":297,"layout":13},"Chip","/design-system/components/chip",{"title":299,"_path":300,"layout":13},"Contact us","/design-system/components/contact-us",{"title":302,"_path":303,"layout":13},"Date input","/design-system/components/date-input",{"title":305,"_path":306,"layout":13},"Detail list","/design-system/components/detail-list",{"title":308,"_path":309,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":311,"_path":312,"layout":13},"File","/design-system/components/file",{"title":314,"_path":315,"layout":13},"Footer","/design-system/components/footer",{"title":317,"_path":318,"layout":13},"Form","/design-system/components/form",{"title":320,"_path":321,"layout":13},"Form alert","/design-system/components/form-alert",{"title":323,"_path":324,"layout":13},"Header","/design-system/components/header",{"title":326,"_path":327,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":329,"_path":330,"layout":13},"Input field","/design-system/components/input-field",{"title":332,"_path":333,"layout":13},"Key dates","/design-system/components/key-dates",{"title":335,"_path":336,"layout":13},"Media","/design-system/components/media",{"title":338,"_path":339,"layout":13},"Media embed","/design-system/components/media-embed",{"title":341,"_path":342,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":344,"_path":345,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":347,"_path":348,"layout":13},"Option button","/design-system/components/option-button",{"title":350,"_path":351,"layout":13},"Page action","/design-system/components/page-action",{"title":353,"_path":354,"layout":13},"Pagination","/design-system/components/pagination",{"title":356,"_path":357,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":359,"_path":360,"layout":13},"Profile","/design-system/components/profile",{"title":362,"_path":363,"layout":13},"Radio button","/design-system/components/radio-button",{"title":365,"_path":366,"layout":13},"Related links","/design-system/components/related-links",{"title":368,"_path":369,"layout":13},"Results listing","/design-system/components/results-listing",{"title":371,"_path":372,"layout":13},"Search bar","/design-system/components/search-bar",{"title":374,"_path":375,"layout":13},"Skip link","/design-system/components/skip-link",{"title":377,"_path":378,"layout":13},"Social share","/design-system/components/social-share",{"title":380,"_path":381,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":383,"_path":384,"layout":13},"Table","/design-system/components/table",{"title":386,"_path":387,"layout":13},"Tabs","/design-system/components/tabs",{"title":389,"_path":390,"layout":13},"Tag","/design-system/components/tag",{"title":392,"_path":393,"layout":13},"Text area","/design-system/components/text-area",{"title":395,"_path":396,"layout":13},"Timeline","/design-system/components/timeline",{"title":398,"_path":399,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":401,"_path":402,"children":403,"layout":13},"Ripple Framework","/framework",[404,405,417,439],{"title":401,"_path":402,"layout":13},{"title":406,"_path":407,"children":408},"Key Concepts","/framework/key-concepts",[409,411,412,413,414],{"title":210,"_path":410,"layout":13},"/framework/key-concepts/nuxt",{"title":126,"_path":125,"layout":13},{"title":11,"_path":7,"layout":13},{"title":136,"_path":135,"layout":13},{"title":415,"_path":416,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":418,"_path":419,"children":420},"Guides","/framework/guides",[421,424,427,430,433,436],{"title":422,"_path":423,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":425,"_path":426,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":428,"_path":429,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":431,"_path":432,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":434,"_path":435,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":437,"_path":438,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":440,"_path":441,"layout":13},"Core modules","/framework/core-modules",["Reactive",443],["Set"],["Reactive",445],{"module-navigation":446},null,true,1714695151246]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/migrating" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Migrating from Ripple 1.x</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/new-sites" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Setting up a new site</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/brand-application" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Applying theme and brand</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-new-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating new layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Adding a new dynamic component</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><!----><a href="/framework/core-modules" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Core modules</span><!--]--></a></li><!--]--></ul></nav><a href="/design-system/about/what-is-ripple" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Design System<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>API endpoints</h1><p class="rpl-type-p-large" data-v-3163c6df>Ripple creates an API that handles the translation of Drupal data into exactly whats needed on the page.</p><ul class="links rpl-u-margin-t-5" data-v-3163c6df><!--[--><li data-v-3163c6df><a href="https://nuxt.com/docs/guide/directory-structure/server#api-routes" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p rpl-type-p" target="_blank" data-v-3163c6df data-v-5d4aedf1><!--[--><!--[--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--[-->Nuxt API routes documentation<!--]--><!----><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></li><!--]--></ul></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->In Ripple 2 we use API routes to create a <a href="https://medium.com/mobilepeople/backend-for-frontend-pattern-why-you-need-to-know-it-46f94ce420b0" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->backend for frontend<!--]--><!--]--><!----><!--]--></a> API that handles communicating with the Drupal Tide JSON API and maps the response to only what is required to render the page in Ripple.<!--]--></p><p><!--[--><img src="/assets/img/modules/api-routes.png" alt="API routes diagram"><!--]--></p><h2 class="rpl-type-h2 docs-h2" id="nitro-server-routes" data-v-fff5b905><a href="#nitro-server-routes" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Nitro server routes<!--]--></a></h2><p><!--[-->Nuxt 3 introduces the concept of <a href="https://nuxt.com/docs/guide/directory-structure/server#api-routes" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->server API routes<!--]--><!--]--><!----><!--]--></a>   powered by the <a href="https://nitro.unjs.io/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Nitro rendering engine<!--]--><!--]--><!----><!--]--></a> and <a href="https://github.com/unjs/h3" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->H3<!--]--><!--]--><!----><!--]--></a> server.<!--]--></p><p><!--[-->Nitro is the server layer that creates API routes in a Nuxt application. Nitro plugins run at build time and we use them to add the mapping needed to tell Ripple-tide-api package how to respond to a Drupal JSON API request for a content type node<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="ripple-tide-api" data-v-fff5b905><a href="#ripple-tide-api" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Ripple Tide API<!--]--></a></h2><p><!--[-->Ripple Tide API is the module that handles communication with Tide Drupal JSON API. It provides a wrapper service for API calls to Tide and provides an interface for adding mapping functions which transform the response from Drupal into only what&#39;s needed for rendering the website. This makes creating pages easier and improves performance by moving all data transformation into the server bundle where it can be easily cached.<!--]--></p><p><!--[--><img src="/assets/img/modules/ripple-tide-api.png" alt="API routes diagram"><!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/2.key-concepts/3.API-endpoints.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/key-concepts/api-endpoints/_payload.json">[{"state":1,"once":442,"_errors":444,"serverRendered":447,"path":7,"prerenderedAt":448},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":120,"$sdd-globals":144,"$sdd-navigation":146},["ShallowRef",4],["ShallowReactive",5],{"/framework/key-concepts/api-endpoints":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"links":14,"body":18,"_type":115,"_id":116,"_source":117,"_file":118,"_extension":119},"/framework/key-concepts/api-endpoints","key-concepts",false,"","API endpoints","Ripple creates an API that handles the translation of Drupal data into exactly whats needed on the page.","page",[15],{"text":16,"url":17},"Nuxt API routes documentation","https://nuxt.com/docs/guide/directory-structure/server#api-routes",{"type":19,"children":20,"toc":110},"root",[21,40,49,56,87,92,98,103],{"type":22,"tag":23,"props":24,"children":25},"element","p",{},[26,29,38],{"type":27,"value":28},"text","In Ripple 2 we use API routes to create a ",{"type":22,"tag":30,"props":31,"children":35},"a",{"href":32,"rel":33},"https://medium.com/mobilepeople/backend-for-frontend-pattern-why-you-need-to-know-it-46f94ce420b0",[34],"nofollow",[36],{"type":27,"value":37},"backend for frontend",{"type":27,"value":39}," API that handles communicating with the Drupal Tide JSON API and maps the response to only what is required to render the page in Ripple.",{"type":22,"tag":23,"props":41,"children":42},{},[43],{"type":22,"tag":44,"props":45,"children":48},"img",{"alt":46,"src":47},"API routes diagram","/assets/img/modules/api-routes.png",[],{"type":22,"tag":50,"props":51,"children":53},"h2",{"id":52},"nitro-server-routes",[54],{"type":27,"value":55},"Nitro server routes",{"type":22,"tag":23,"props":57,"children":58},{},[59,61,67,69,76,78,85],{"type":27,"value":60},"Nuxt 3 introduces the concept of ",{"type":22,"tag":30,"props":62,"children":64},{"href":17,"rel":63},[34],[65],{"type":27,"value":66},"server API routes",{"type":27,"value":68},"   powered by the ",{"type":22,"tag":30,"props":70,"children":73},{"href":71,"rel":72},"https://nitro.unjs.io/",[34],[74],{"type":27,"value":75},"Nitro rendering engine",{"type":27,"value":77}," and ",{"type":22,"tag":30,"props":79,"children":82},{"href":80,"rel":81},"https://github.com/unjs/h3",[34],[83],{"type":27,"value":84},"H3",{"type":27,"value":86}," server.",{"type":22,"tag":23,"props":88,"children":89},{},[90],{"type":27,"value":91},"Nitro is the server layer that creates API routes in a Nuxt application. Nitro plugins run at build time and we use them to add the mapping needed to tell Ripple-tide-api package how to respond to a Drupal JSON API request for a content type node",{"type":22,"tag":50,"props":93,"children":95},{"id":94},"ripple-tide-api",[96],{"type":27,"value":97},"Ripple Tide API",{"type":22,"tag":23,"props":99,"children":100},{},[101],{"type":27,"value":102},"Ripple Tide API is the module that handles communication with Tide Drupal JSON API. It provides a wrapper service for API calls to Tide and provides an interface for adding mapping functions which transform the response from Drupal into only what's needed for rendering the website. This makes creating pages easier and improves performance by moving all data transformation into the server bundle where it can be easily cached.",{"type":22,"tag":23,"props":104,"children":105},{},[106],{"type":22,"tag":44,"props":107,"children":109},{"alt":46,"src":108},"/assets/img/modules/ripple-tide-api.png",[],{"title":10,"searchDepth":111,"depth":111,"links":112},2,[113,114],{"id":52,"depth":111,"text":55},{"id":94,"depth":111,"text":97},"markdown","content:framework:2.key-concepts:3.API-endpoints.md","content","framework/2.key-concepts/3.API-endpoints.md","md",["ShallowRef",121],["ShallowReactive",122],{"/framework/key-concepts/api-endpoints":123},[124,134],{"_path":125,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":126,"description":127,"layout":13,"links":128,"_type":115,"_id":132,"_source":117,"_file":133,"_extension":119},"/framework/key-concepts/nuxt-layers","Layers","Nuxt layers are used to encapsulate Ripple functionality to share and reuse",[129],{"text":130,"url":131},"Nuxt layers documentation","https://nuxt.com/docs/getting-started/layers","content:framework:2.key-concepts:2.nuxt-layers.md","framework/2.key-concepts/2.nuxt-layers.md",{"_path":135,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":136,"description":137,"layout":13,"links":138,"_type":115,"_id":142,"_source":117,"_file":143,"_extension":119},"/framework/key-concepts/content-types","Content types","Implementing content type specific page layouts",[139],{"text":140,"url":141},"Drupal content types","https://www.drupal.org/docs/7/understanding-drupal/content-types","content:framework:2.key-concepts:4.content-types.md","framework/2.key-concepts/4.content-types.md",["ShallowRef",145],{},[147,152,400],{"title":148,"_path":149,"icon":150,"layout":151},"Ripple Design System","/","carbon:home","home",{"title":153,"_path":154,"children":155},"Design System","/design-system",[156,172,188,218,252],{"title":157,"_path":158,"children":159},"About","/design-system/about",[160,163,166,169],{"title":161,"_path":162,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":164,"_path":165,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":167,"_path":168,"layout":13},"Support","/design-system/about/getting-support",{"title":170,"_path":171,"layout":13},"Contributing","/design-system/about/contributing",{"title":173,"_path":174,"children":175},"Design","/design-system/design",[176,179,182,185],{"title":177,"_path":178,"layout":13},"Getting started","/design-system/design/getting-started",{"title":180,"_path":181,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":183,"_path":184,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":186,"_path":187,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":189,"_path":190,"children":191},"Develop","/design-system/develop",[192,194,196,199],{"title":177,"_path":193,"layout":13},"/design-system/develop/getting-started",{"title":170,"_path":195,"layout":13},"/design-system/develop/contributing",{"title":197,"_path":198,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":200,"_path":201,"children":202,"layout":13},"Usage","/design-system/develop/usage",[203,206,209,212,215],{"title":204,"_path":205,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":207,"_path":208,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":210,"_path":211,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":213,"_path":214,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":216,"_path":217,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":219,"_path":220,"children":221},"Styles","/design-system/styles",[222,225,228,231,234,237,240,243,246,249],{"title":223,"_path":224,"layout":13},"Colour","/design-system/styles/colour",{"title":226,"_path":227,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":229,"_path":230,"layout":13},"Grid","/design-system/styles/grid",{"title":232,"_path":233,"layout":13},"Icons","/design-system/styles/icons",{"title":235,"_path":236,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":238,"_path":239,"layout":13},"Layout","/design-system/styles/layout",{"title":241,"_path":242,"layout":13},"Logo","/design-system/styles/logo",{"title":244,"_path":245,"layout":13},"Motion","/design-system/styles/motion",{"title":247,"_path":248,"layout":13},"Spacing","/design-system/styles/spacing",{"title":250,"_path":251,"layout":13},"Typography","/design-system/styles/typography",{"title":253,"_path":254,"children":255},"Components","/design-system/components",[256,259,262,265,268,271,274,277,280,283,286,289,292,295,298,301,304,307,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367,370,373,376,379,382,385,388,391,394,397],{"title":257,"_path":258,"layout":13},"Accordion","/design-system/components/accordion",{"title":260,"_path":261,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":263,"_path":264,"layout":13},"Alert","/design-system/components/alert",{"title":266,"_path":267,"layout":13},"Block quote","/design-system/components/block-quote",{"title":269,"_path":270,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":272,"_path":273,"layout":13},"Button","/design-system/components/button",{"title":275,"_path":276,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":278,"_path":279,"layout":13},"Callout","/design-system/components/callout",{"title":281,"_path":282,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":284,"_path":285,"layout":13},"Card","/design-system/components/card",{"title":287,"_path":288,"layout":13},"Carousel","/design-system/components/carousel",{"title":290,"_path":291,"layout":13},"Category grid","/design-system/components/category-grid",{"title":293,"_path":294,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":296,"_path":297,"layout":13},"Chip","/design-system/components/chip",{"title":299,"_path":300,"layout":13},"Contact us","/design-system/components/contact-us",{"title":302,"_path":303,"layout":13},"Date input","/design-system/components/date-input",{"title":305,"_path":306,"layout":13},"Detail list","/design-system/components/detail-list",{"title":308,"_path":309,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":311,"_path":312,"layout":13},"File","/design-system/components/file",{"title":314,"_path":315,"layout":13},"Footer","/design-system/components/footer",{"title":317,"_path":318,"layout":13},"Form","/design-system/components/form",{"title":320,"_path":321,"layout":13},"Form alert","/design-system/components/form-alert",{"title":323,"_path":324,"layout":13},"Header","/design-system/components/header",{"title":326,"_path":327,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":329,"_path":330,"layout":13},"Input field","/design-system/components/input-field",{"title":332,"_path":333,"layout":13},"Key dates","/design-system/components/key-dates",{"title":335,"_path":336,"layout":13},"Media","/design-system/components/media",{"title":338,"_path":339,"layout":13},"Media embed","/design-system/components/media-embed",{"title":341,"_path":342,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":344,"_path":345,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":347,"_path":348,"layout":13},"Option button","/design-system/components/option-button",{"title":350,"_path":351,"layout":13},"Page action","/design-system/components/page-action",{"title":353,"_path":354,"layout":13},"Pagination","/design-system/components/pagination",{"title":356,"_path":357,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":359,"_path":360,"layout":13},"Profile","/design-system/components/profile",{"title":362,"_path":363,"layout":13},"Radio button","/design-system/components/radio-button",{"title":365,"_path":366,"layout":13},"Related links","/design-system/components/related-links",{"title":368,"_path":369,"layout":13},"Results listing","/design-system/components/results-listing",{"title":371,"_path":372,"layout":13},"Search bar","/design-system/components/search-bar",{"title":374,"_path":375,"layout":13},"Skip link","/design-system/components/skip-link",{"title":377,"_path":378,"layout":13},"Social share","/design-system/components/social-share",{"title":380,"_path":381,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":383,"_path":384,"layout":13},"Table","/design-system/components/table",{"title":386,"_path":387,"layout":13},"Tabs","/design-system/components/tabs",{"title":389,"_path":390,"layout":13},"Tag","/design-system/components/tag",{"title":392,"_path":393,"layout":13},"Text area","/design-system/components/text-area",{"title":395,"_path":396,"layout":13},"Timeline","/design-system/components/timeline",{"title":398,"_path":399,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":401,"_path":402,"children":403,"layout":13},"Ripple Framework","/framework",[404,405,417,439],{"title":401,"_path":402,"layout":13},{"title":406,"_path":407,"children":408},"Key Concepts","/framework/key-concepts",[409,411,412,413,414],{"title":210,"_path":410,"layout":13},"/framework/key-concepts/nuxt",{"title":126,"_path":125,"layout":13},{"title":11,"_path":7,"layout":13},{"title":136,"_path":135,"layout":13},{"title":415,"_path":416,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":418,"_path":419,"children":420},"Guides","/framework/guides",[421,424,427,430,433,436],{"title":422,"_path":423,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":425,"_path":426,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":428,"_path":429,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":431,"_path":432,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":434,"_path":435,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":437,"_path":438,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":440,"_path":441,"layout":13},"Core modules","/framework/core-modules",["Reactive",443],["Set"],["Reactive",445],{"module-navigation":446},null,true,1714695649482]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/framework/key-concepts/content-types/_payload.json b/framework/key-concepts/content-types/_payload.json
index 73861af25e..3d13dc0bf8 100644
--- a/framework/key-concepts/content-types/_payload.json
+++ b/framework/key-concepts/content-types/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,28,50],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",false,{"id":9,"text":10,"url":9,"active":11,"items":12},"/framework/key-concepts","Key Concepts",true,[13,16,19,22,25],{"id":14,"text":15,"url":14,"active":7,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":17,"text":18,"url":17,"active":7,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":20,"text":21,"url":20,"active":7,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":23,"text":24,"url":23,"active":11,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":26,"text":27,"url":26,"active":7,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":29,"text":30,"url":29,"active":7,"items":31},"/framework/guides","Guides",[32,35,38,41,44,47],{"id":33,"text":34,"url":33,"active":7,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":39,"text":40,"url":39,"active":7,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":42,"text":43,"url":42,"active":7,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":45,"text":46,"url":45,"active":7,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":48,"text":49,"url":48,"active":7,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":51,"text":52,"url":51,"active":7,"items":-1},"/framework/core-modules","Core modules",1714695151252]
\ No newline at end of file
+[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,28,50],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",false,{"id":9,"text":10,"url":9,"active":11,"items":12},"/framework/key-concepts","Key Concepts",true,[13,16,19,22,25],{"id":14,"text":15,"url":14,"active":7,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":17,"text":18,"url":17,"active":7,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":20,"text":21,"url":20,"active":7,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":23,"text":24,"url":23,"active":11,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":26,"text":27,"url":26,"active":7,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":29,"text":30,"url":29,"active":7,"items":31},"/framework/guides","Guides",[32,35,38,41,44,47],{"id":33,"text":34,"url":33,"active":7,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":39,"text":40,"url":39,"active":7,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":42,"text":43,"url":42,"active":7,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":45,"text":46,"url":45,"active":7,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":48,"text":49,"url":48,"active":7,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":51,"text":52,"url":51,"active":7,"items":-1},"/framework/core-modules","Core modules",1714695649487]
\ No newline at end of file
diff --git a/framework/key-concepts/content-types/index.html b/framework/key-concepts/content-types/index.html
index 4787e86c2c..667be5e902 100644
--- a/framework/key-concepts/content-types/index.html
+++ b/framework/key-concepts/content-types/index.html
@@ -24,65 +24,65 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.ugZKdBSy.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.zV8FfIjw.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.lp_k9Hpd.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH2.G8mCS4ry.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseH3.WHOIDSwD.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.Czpq-HHw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Nuxt</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/api-endpoints" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>API endpoints</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/content-types" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dynamic components</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/guides-toggle"><span class="rpl-vertical-nav__toggle-text">Guides</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/guides-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/migrating" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Migrating from Ripple 1.x</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/new-sites" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Setting up a new site</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/brand-application" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Applying theme and brand</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-new-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating new layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Adding a new dynamic component</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><!----><a href="/framework/core-modules" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Core modules</span><!--]--></a></li><!--]--></ul></nav><a href="/design-system/about/what-is-ripple" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Design System<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Content types</h1><p class="rpl-type-p-large" data-v-3163c6df>Implementing content type specific page layouts</p><ul class="links rpl-u-margin-t-5" data-v-3163c6df><!--[--><li data-v-3163c6df><a href="https://www.drupal.org/docs/7/understanding-drupal/content-types" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p rpl-type-p" target="_blank" data-v-3163c6df data-v-5d4aedf1><!--[--><!--[--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--[-->Drupal content types<!--]--><!----><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></li><!--]--></ul></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->Content types are a Drupal concept that allow for modelling content using fields to describe the data structure. See the <a href="https://www.drupal.org/docs/7/understanding-drupal/content-types" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Drupal documentation<!--]--><!--]--><!----><!--]--></a> for more details.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="ripple-content-types" data-v-fff5b905><a href="#ripple-content-types" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Ripple content types<!--]--></a></h2><p><!--[-->As SDP is a <a href="https://salsa.digital/insights/dissecting-the-single-digital-presence-platform" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->headless CMS using a decoupled architecture<!--]--><!--]--><!----><!--]--></a> once we have modelled content in Tide, we need a way to render it into a template that can be delivered to end users. Ripple content types allow you to support custom templates for new content types.<!--]--></p><p><!--[-->Ripple content types consist of the following parts:<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="api-mapping" data-v-ea525968><a href="#api-mapping" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->API Mapping<!--]--></a></h2><p><!--[-->See <a href="/framework/key-concepts/api-endpoints" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->API Endpoints<!--]--><!--]--><!----><!--]--></a> for more information the Tide API translation layer. For each content type we supply a function that maps the Tide Drupal API response into more concise fields that match the data needed for<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="template" data-v-ea525968><a href="#template" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Template<!--]--></a></h2><p><!--[-->To render the page using Ripple UI components, we need to create a Vue component that is passed the data from the API request and, using Ripple UI components, creates a layout that matches your intended design.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[-->See the <a href="/framework/guides/creating-content-types" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Content type guide<!--]--><!--]--><!----><!--]--></a> for more information on creating new content types.<!--]--></p><!--]--></blockquote><h2 class="rpl-type-h2 docs-h2" id="core-content-types" data-v-fff5b905><a href="#core-content-types" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Core content types<!--]--></a></h2><p><!--[-->In Tide we have a number of content types which are part of the core distribution and are initially included in SDP sites<!--]--></p><ul><!--[--><li><!--[-->Landing page<!--]--></li><li><!--[-->Event<!--]--></li><li><!--[-->Grant<!--]--></li><li><!--[-->News<!--]--></li><li><!--[-->Publication (page)<!--]--></li><li><!--[-->Alert<!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/2.key-concepts/4.content-types.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/key-concepts/content-types/_payload.json">[{"state":1,"once":488,"_errors":490,"serverRendered":492,"path":7,"prerenderedAt":493},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":173,"$sdd-globals":192,"$sdd-navigation":194},["ShallowRef",4],["ShallowReactive",5],{"/framework/key-concepts/content-types":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"links":14,"body":18,"_type":168,"_id":169,"_source":170,"_file":171,"_extension":172},"/framework/key-concepts/content-types","key-concepts",false,"","Content types","Implementing content type specific page layouts","page",[15],{"text":16,"url":17},"Drupal content types","https://www.drupal.org/docs/7/understanding-drupal/content-types",{"type":19,"children":20,"toc":159},"root",[21,39,46,60,65,72,85,91,96,113,119,124],{"type":22,"tag":23,"props":24,"children":25},"element","p",{},[26,29,37],{"type":27,"value":28},"text","Content types are a Drupal concept that allow for modelling content using fields to describe the data structure. See the ",{"type":22,"tag":30,"props":31,"children":34},"a",{"href":17,"rel":32},[33],"nofollow",[35],{"type":27,"value":36},"Drupal documentation",{"type":27,"value":38}," for more details.",{"type":22,"tag":40,"props":41,"children":43},"h2",{"id":42},"ripple-content-types",[44],{"type":27,"value":45},"Ripple content types",{"type":22,"tag":23,"props":47,"children":48},{},[49,51,58],{"type":27,"value":50},"As SDP is a ",{"type":22,"tag":30,"props":52,"children":55},{"href":53,"rel":54},"https://salsa.digital/insights/dissecting-the-single-digital-presence-platform",[33],[56],{"type":27,"value":57},"headless CMS using a decoupled architecture",{"type":27,"value":59}," once we have modelled content in Tide, we need a way to render it into a template that can be delivered to end users. Ripple content types allow you to support custom templates for new content types.",{"type":22,"tag":23,"props":61,"children":62},{},[63],{"type":27,"value":64},"Ripple content types consist of the following parts:",{"type":22,"tag":66,"props":67,"children":69},"h3",{"id":68},"api-mapping",[70],{"type":27,"value":71},"API Mapping",{"type":22,"tag":23,"props":73,"children":74},{},[75,77,83],{"type":27,"value":76},"See ",{"type":22,"tag":30,"props":78,"children":80},{"href":79},"/framework/key-concepts/api-endpoints",[81],{"type":27,"value":82},"API Endpoints",{"type":27,"value":84}," for more information the Tide API translation layer. For each content type we supply a function that maps the Tide Drupal API response into more concise fields that match the data needed for",{"type":22,"tag":66,"props":86,"children":88},{"id":87},"template",[89],{"type":27,"value":90},"Template",{"type":22,"tag":23,"props":92,"children":93},{},[94],{"type":27,"value":95},"To render the page using Ripple UI components, we need to create a Vue component that is passed the data from the API request and, using Ripple UI components, creates a layout that matches your intended design.",{"type":22,"tag":97,"props":98,"children":99},"blockquote",{},[100],{"type":22,"tag":23,"props":101,"children":102},{},[103,105,111],{"type":27,"value":104},"See the ",{"type":22,"tag":30,"props":106,"children":108},{"href":107},"/framework/guides/creating-content-types",[109],{"type":27,"value":110},"Content type guide",{"type":27,"value":112}," for more information on creating new content types.",{"type":22,"tag":40,"props":114,"children":116},{"id":115},"core-content-types",[117],{"type":27,"value":118},"Core content types",{"type":22,"tag":23,"props":120,"children":121},{},[122],{"type":27,"value":123},"In Tide we have a number of content types which are part of the core distribution and are initially included in SDP sites",{"type":22,"tag":125,"props":126,"children":127},"ul",{},[128,134,139,144,149,154],{"type":22,"tag":129,"props":130,"children":131},"li",{},[132],{"type":27,"value":133},"Landing page",{"type":22,"tag":129,"props":135,"children":136},{},[137],{"type":27,"value":138},"Event",{"type":22,"tag":129,"props":140,"children":141},{},[142],{"type":27,"value":143},"Grant",{"type":22,"tag":129,"props":145,"children":146},{},[147],{"type":27,"value":148},"News",{"type":22,"tag":129,"props":150,"children":151},{},[152],{"type":27,"value":153},"Publication (page)",{"type":22,"tag":129,"props":155,"children":156},{},[157],{"type":27,"value":158},"Alert",{"title":10,"searchDepth":160,"depth":160,"links":161},2,[162,167],{"id":42,"depth":160,"text":45,"children":163},[164,166],{"id":68,"depth":165,"text":71},3,{"id":87,"depth":165,"text":90},{"id":115,"depth":160,"text":118},"markdown","content:framework:2.key-concepts:4.content-types.md","content","framework/2.key-concepts/4.content-types.md","md",["ShallowRef",174],["ShallowReactive",175],{"/framework/key-concepts/content-types":176},[177,186],{"_path":79,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":178,"description":179,"layout":13,"links":180,"_type":168,"_id":184,"_source":170,"_file":185,"_extension":172},"API endpoints","Ripple creates an API that handles the translation of Drupal data into exactly whats needed on the page.",[181],{"text":182,"url":183},"Nuxt API routes documentation","https://nuxt.com/docs/guide/directory-structure/server#api-routes","content:framework:2.key-concepts:3.API-endpoints.md","framework/2.key-concepts/3.API-endpoints.md",{"_path":187,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":188,"description":189,"layout":13,"_type":168,"_id":190,"_source":170,"_file":191,"_extension":172},"/framework/key-concepts/dynamic-components","Dynamic components",null,"content:framework:2.key-concepts:5.dynamic-components.md","framework/2.key-concepts/5.dynamic-components.md",["ShallowRef",193],{},[195,200,447],{"title":196,"_path":197,"icon":198,"layout":199},"Ripple Design System","/","carbon:home","home",{"title":201,"_path":202,"children":203},"Design System","/design-system",[204,220,236,266,300],{"title":205,"_path":206,"children":207},"About","/design-system/about",[208,211,214,217],{"title":209,"_path":210,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":212,"_path":213,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":215,"_path":216,"layout":13},"Support","/design-system/about/getting-support",{"title":218,"_path":219,"layout":13},"Contributing","/design-system/about/contributing",{"title":221,"_path":222,"children":223},"Design","/design-system/design",[224,227,230,233],{"title":225,"_path":226,"layout":13},"Getting started","/design-system/design/getting-started",{"title":228,"_path":229,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":231,"_path":232,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":234,"_path":235,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":237,"_path":238,"children":239},"Develop","/design-system/develop",[240,242,244,247],{"title":225,"_path":241,"layout":13},"/design-system/develop/getting-started",{"title":218,"_path":243,"layout":13},"/design-system/develop/contributing",{"title":245,"_path":246,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":248,"_path":249,"children":250,"layout":13},"Usage","/design-system/develop/usage",[251,254,257,260,263],{"title":252,"_path":253,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":255,"_path":256,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":258,"_path":259,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":261,"_path":262,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":264,"_path":265,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":267,"_path":268,"children":269},"Styles","/design-system/styles",[270,273,276,279,282,285,288,291,294,297],{"title":271,"_path":272,"layout":13},"Colour","/design-system/styles/colour",{"title":274,"_path":275,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":277,"_path":278,"layout":13},"Grid","/design-system/styles/grid",{"title":280,"_path":281,"layout":13},"Icons","/design-system/styles/icons",{"title":283,"_path":284,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":286,"_path":287,"layout":13},"Layout","/design-system/styles/layout",{"title":289,"_path":290,"layout":13},"Logo","/design-system/styles/logo",{"title":292,"_path":293,"layout":13},"Motion","/design-system/styles/motion",{"title":295,"_path":296,"layout":13},"Spacing","/design-system/styles/spacing",{"title":298,"_path":299,"layout":13},"Typography","/design-system/styles/typography",{"title":301,"_path":302,"children":303},"Components","/design-system/components",[304,307,310,312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,441,444],{"title":305,"_path":306,"layout":13},"Accordion","/design-system/components/accordion",{"title":308,"_path":309,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":158,"_path":311,"layout":13},"/design-system/components/alert",{"title":313,"_path":314,"layout":13},"Block quote","/design-system/components/block-quote",{"title":316,"_path":317,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":319,"_path":320,"layout":13},"Button","/design-system/components/button",{"title":322,"_path":323,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":325,"_path":326,"layout":13},"Callout","/design-system/components/callout",{"title":328,"_path":329,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":331,"_path":332,"layout":13},"Card","/design-system/components/card",{"title":334,"_path":335,"layout":13},"Carousel","/design-system/components/carousel",{"title":337,"_path":338,"layout":13},"Category grid","/design-system/components/category-grid",{"title":340,"_path":341,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":343,"_path":344,"layout":13},"Chip","/design-system/components/chip",{"title":346,"_path":347,"layout":13},"Contact us","/design-system/components/contact-us",{"title":349,"_path":350,"layout":13},"Date input","/design-system/components/date-input",{"title":352,"_path":353,"layout":13},"Detail list","/design-system/components/detail-list",{"title":355,"_path":356,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":358,"_path":359,"layout":13},"File","/design-system/components/file",{"title":361,"_path":362,"layout":13},"Footer","/design-system/components/footer",{"title":364,"_path":365,"layout":13},"Form","/design-system/components/form",{"title":367,"_path":368,"layout":13},"Form alert","/design-system/components/form-alert",{"title":370,"_path":371,"layout":13},"Header","/design-system/components/header",{"title":373,"_path":374,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":376,"_path":377,"layout":13},"Input field","/design-system/components/input-field",{"title":379,"_path":380,"layout":13},"Key dates","/design-system/components/key-dates",{"title":382,"_path":383,"layout":13},"Media","/design-system/components/media",{"title":385,"_path":386,"layout":13},"Media embed","/design-system/components/media-embed",{"title":388,"_path":389,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":391,"_path":392,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":394,"_path":395,"layout":13},"Option button","/design-system/components/option-button",{"title":397,"_path":398,"layout":13},"Page action","/design-system/components/page-action",{"title":400,"_path":401,"layout":13},"Pagination","/design-system/components/pagination",{"title":403,"_path":404,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":406,"_path":407,"layout":13},"Profile","/design-system/components/profile",{"title":409,"_path":410,"layout":13},"Radio button","/design-system/components/radio-button",{"title":412,"_path":413,"layout":13},"Related links","/design-system/components/related-links",{"title":415,"_path":416,"layout":13},"Results listing","/design-system/components/results-listing",{"title":418,"_path":419,"layout":13},"Search bar","/design-system/components/search-bar",{"title":421,"_path":422,"layout":13},"Skip link","/design-system/components/skip-link",{"title":424,"_path":425,"layout":13},"Social share","/design-system/components/social-share",{"title":427,"_path":428,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":430,"_path":431,"layout":13},"Table","/design-system/components/table",{"title":433,"_path":434,"layout":13},"Tabs","/design-system/components/tabs",{"title":436,"_path":437,"layout":13},"Tag","/design-system/components/tag",{"title":439,"_path":440,"layout":13},"Text area","/design-system/components/text-area",{"title":442,"_path":443,"layout":13},"Timeline","/design-system/components/timeline",{"title":445,"_path":446,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":448,"_path":449,"children":450,"layout":13},"Ripple Framework","/framework",[451,452,464,485],{"title":448,"_path":449,"layout":13},{"title":453,"_path":454,"children":455},"Key Concepts","/framework/key-concepts",[456,458,461,462,463],{"title":258,"_path":457,"layout":13},"/framework/key-concepts/nuxt",{"title":459,"_path":460,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":178,"_path":79,"layout":13},{"title":11,"_path":7,"layout":13},{"title":188,"_path":187,"layout":13},{"title":465,"_path":466,"children":467},"Guides","/framework/guides",[468,471,474,477,479,482],{"title":469,"_path":470,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":472,"_path":473,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":475,"_path":476,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":478,"_path":107,"layout":13},"Creating content types",{"title":480,"_path":481,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":483,"_path":484,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":486,"_path":487,"layout":13},"Core modules","/framework/core-modules",["Reactive",489],["Set"],["Reactive",491],{"module-navigation":189},true,1714695151252]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/migrating" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Migrating from Ripple 1.x</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/new-sites" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Setting up a new site</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/brand-application" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Applying theme and brand</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-new-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating new layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Adding a new dynamic component</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><!----><a href="/framework/core-modules" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Core modules</span><!--]--></a></li><!--]--></ul></nav><a href="/design-system/about/what-is-ripple" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Design System<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Content types</h1><p class="rpl-type-p-large" data-v-3163c6df>Implementing content type specific page layouts</p><ul class="links rpl-u-margin-t-5" data-v-3163c6df><!--[--><li data-v-3163c6df><a href="https://www.drupal.org/docs/7/understanding-drupal/content-types" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p rpl-type-p" target="_blank" data-v-3163c6df data-v-5d4aedf1><!--[--><!--[--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--[-->Drupal content types<!--]--><!----><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></li><!--]--></ul></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->Content types are a Drupal concept that allow for modelling content using fields to describe the data structure. See the <a href="https://www.drupal.org/docs/7/understanding-drupal/content-types" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Drupal documentation<!--]--><!--]--><!----><!--]--></a> for more details.<!--]--></p><h2 class="rpl-type-h2 docs-h2" id="ripple-content-types" data-v-fff5b905><a href="#ripple-content-types" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Ripple content types<!--]--></a></h2><p><!--[-->As SDP is a <a href="https://salsa.digital/insights/dissecting-the-single-digital-presence-platform" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->headless CMS using a decoupled architecture<!--]--><!--]--><!----><!--]--></a> once we have modelled content in Tide, we need a way to render it into a template that can be delivered to end users. Ripple content types allow you to support custom templates for new content types.<!--]--></p><p><!--[-->Ripple content types consist of the following parts:<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="api-mapping" data-v-ea525968><a href="#api-mapping" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->API Mapping<!--]--></a></h2><p><!--[-->See <a href="/framework/key-concepts/api-endpoints" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->API Endpoints<!--]--><!--]--><!----><!--]--></a> for more information the Tide API translation layer. For each content type we supply a function that maps the Tide Drupal API response into more concise fields that match the data needed for<!--]--></p><h2 class="rpl-type-h3 docs-h3" id="template" data-v-ea525968><a href="#template" data-v-ea525968><span class="docs-h3--hash" data-v-ea525968>#</span><!--[-->Template<!--]--></a></h2><p><!--[-->To render the page using Ripple UI components, we need to create a Vue component that is passed the data from the API request and, using Ripple UI components, creates a layout that matches your intended design.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[-->See the <a href="/framework/guides/creating-content-types" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Content type guide<!--]--><!--]--><!----><!--]--></a> for more information on creating new content types.<!--]--></p><!--]--></blockquote><h2 class="rpl-type-h2 docs-h2" id="core-content-types" data-v-fff5b905><a href="#core-content-types" data-v-fff5b905><span class="docs-h2--hash" data-v-fff5b905>#</span><!--[-->Core content types<!--]--></a></h2><p><!--[-->In Tide we have a number of content types which are part of the core distribution and are initially included in SDP sites<!--]--></p><ul><!--[--><li><!--[-->Landing page<!--]--></li><li><!--[-->Event<!--]--></li><li><!--[-->Grant<!--]--></li><li><!--[-->News<!--]--></li><li><!--[-->Publication (page)<!--]--></li><li><!--[-->Alert<!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/2.key-concepts/4.content-types.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/key-concepts/content-types/_payload.json">[{"state":1,"once":488,"_errors":490,"serverRendered":492,"path":7,"prerenderedAt":493},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":173,"$sdd-globals":192,"$sdd-navigation":194},["ShallowRef",4],["ShallowReactive",5],{"/framework/key-concepts/content-types":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"links":14,"body":18,"_type":168,"_id":169,"_source":170,"_file":171,"_extension":172},"/framework/key-concepts/content-types","key-concepts",false,"","Content types","Implementing content type specific page layouts","page",[15],{"text":16,"url":17},"Drupal content types","https://www.drupal.org/docs/7/understanding-drupal/content-types",{"type":19,"children":20,"toc":159},"root",[21,39,46,60,65,72,85,91,96,113,119,124],{"type":22,"tag":23,"props":24,"children":25},"element","p",{},[26,29,37],{"type":27,"value":28},"text","Content types are a Drupal concept that allow for modelling content using fields to describe the data structure. See the ",{"type":22,"tag":30,"props":31,"children":34},"a",{"href":17,"rel":32},[33],"nofollow",[35],{"type":27,"value":36},"Drupal documentation",{"type":27,"value":38}," for more details.",{"type":22,"tag":40,"props":41,"children":43},"h2",{"id":42},"ripple-content-types",[44],{"type":27,"value":45},"Ripple content types",{"type":22,"tag":23,"props":47,"children":48},{},[49,51,58],{"type":27,"value":50},"As SDP is a ",{"type":22,"tag":30,"props":52,"children":55},{"href":53,"rel":54},"https://salsa.digital/insights/dissecting-the-single-digital-presence-platform",[33],[56],{"type":27,"value":57},"headless CMS using a decoupled architecture",{"type":27,"value":59}," once we have modelled content in Tide, we need a way to render it into a template that can be delivered to end users. Ripple content types allow you to support custom templates for new content types.",{"type":22,"tag":23,"props":61,"children":62},{},[63],{"type":27,"value":64},"Ripple content types consist of the following parts:",{"type":22,"tag":66,"props":67,"children":69},"h3",{"id":68},"api-mapping",[70],{"type":27,"value":71},"API Mapping",{"type":22,"tag":23,"props":73,"children":74},{},[75,77,83],{"type":27,"value":76},"See ",{"type":22,"tag":30,"props":78,"children":80},{"href":79},"/framework/key-concepts/api-endpoints",[81],{"type":27,"value":82},"API Endpoints",{"type":27,"value":84}," for more information the Tide API translation layer. For each content type we supply a function that maps the Tide Drupal API response into more concise fields that match the data needed for",{"type":22,"tag":66,"props":86,"children":88},{"id":87},"template",[89],{"type":27,"value":90},"Template",{"type":22,"tag":23,"props":92,"children":93},{},[94],{"type":27,"value":95},"To render the page using Ripple UI components, we need to create a Vue component that is passed the data from the API request and, using Ripple UI components, creates a layout that matches your intended design.",{"type":22,"tag":97,"props":98,"children":99},"blockquote",{},[100],{"type":22,"tag":23,"props":101,"children":102},{},[103,105,111],{"type":27,"value":104},"See the ",{"type":22,"tag":30,"props":106,"children":108},{"href":107},"/framework/guides/creating-content-types",[109],{"type":27,"value":110},"Content type guide",{"type":27,"value":112}," for more information on creating new content types.",{"type":22,"tag":40,"props":114,"children":116},{"id":115},"core-content-types",[117],{"type":27,"value":118},"Core content types",{"type":22,"tag":23,"props":120,"children":121},{},[122],{"type":27,"value":123},"In Tide we have a number of content types which are part of the core distribution and are initially included in SDP sites",{"type":22,"tag":125,"props":126,"children":127},"ul",{},[128,134,139,144,149,154],{"type":22,"tag":129,"props":130,"children":131},"li",{},[132],{"type":27,"value":133},"Landing page",{"type":22,"tag":129,"props":135,"children":136},{},[137],{"type":27,"value":138},"Event",{"type":22,"tag":129,"props":140,"children":141},{},[142],{"type":27,"value":143},"Grant",{"type":22,"tag":129,"props":145,"children":146},{},[147],{"type":27,"value":148},"News",{"type":22,"tag":129,"props":150,"children":151},{},[152],{"type":27,"value":153},"Publication (page)",{"type":22,"tag":129,"props":155,"children":156},{},[157],{"type":27,"value":158},"Alert",{"title":10,"searchDepth":160,"depth":160,"links":161},2,[162,167],{"id":42,"depth":160,"text":45,"children":163},[164,166],{"id":68,"depth":165,"text":71},3,{"id":87,"depth":165,"text":90},{"id":115,"depth":160,"text":118},"markdown","content:framework:2.key-concepts:4.content-types.md","content","framework/2.key-concepts/4.content-types.md","md",["ShallowRef",174],["ShallowReactive",175],{"/framework/key-concepts/content-types":176},[177,186],{"_path":79,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":178,"description":179,"layout":13,"links":180,"_type":168,"_id":184,"_source":170,"_file":185,"_extension":172},"API endpoints","Ripple creates an API that handles the translation of Drupal data into exactly whats needed on the page.",[181],{"text":182,"url":183},"Nuxt API routes documentation","https://nuxt.com/docs/guide/directory-structure/server#api-routes","content:framework:2.key-concepts:3.API-endpoints.md","framework/2.key-concepts/3.API-endpoints.md",{"_path":187,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":188,"description":189,"layout":13,"_type":168,"_id":190,"_source":170,"_file":191,"_extension":172},"/framework/key-concepts/dynamic-components","Dynamic components",null,"content:framework:2.key-concepts:5.dynamic-components.md","framework/2.key-concepts/5.dynamic-components.md",["ShallowRef",193],{},[195,200,447],{"title":196,"_path":197,"icon":198,"layout":199},"Ripple Design System","/","carbon:home","home",{"title":201,"_path":202,"children":203},"Design System","/design-system",[204,220,236,266,300],{"title":205,"_path":206,"children":207},"About","/design-system/about",[208,211,214,217],{"title":209,"_path":210,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":212,"_path":213,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":215,"_path":216,"layout":13},"Support","/design-system/about/getting-support",{"title":218,"_path":219,"layout":13},"Contributing","/design-system/about/contributing",{"title":221,"_path":222,"children":223},"Design","/design-system/design",[224,227,230,233],{"title":225,"_path":226,"layout":13},"Getting started","/design-system/design/getting-started",{"title":228,"_path":229,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":231,"_path":232,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":234,"_path":235,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":237,"_path":238,"children":239},"Develop","/design-system/develop",[240,242,244,247],{"title":225,"_path":241,"layout":13},"/design-system/develop/getting-started",{"title":218,"_path":243,"layout":13},"/design-system/develop/contributing",{"title":245,"_path":246,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":248,"_path":249,"children":250,"layout":13},"Usage","/design-system/develop/usage",[251,254,257,260,263],{"title":252,"_path":253,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":255,"_path":256,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":258,"_path":259,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":261,"_path":262,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":264,"_path":265,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":267,"_path":268,"children":269},"Styles","/design-system/styles",[270,273,276,279,282,285,288,291,294,297],{"title":271,"_path":272,"layout":13},"Colour","/design-system/styles/colour",{"title":274,"_path":275,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":277,"_path":278,"layout":13},"Grid","/design-system/styles/grid",{"title":280,"_path":281,"layout":13},"Icons","/design-system/styles/icons",{"title":283,"_path":284,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":286,"_path":287,"layout":13},"Layout","/design-system/styles/layout",{"title":289,"_path":290,"layout":13},"Logo","/design-system/styles/logo",{"title":292,"_path":293,"layout":13},"Motion","/design-system/styles/motion",{"title":295,"_path":296,"layout":13},"Spacing","/design-system/styles/spacing",{"title":298,"_path":299,"layout":13},"Typography","/design-system/styles/typography",{"title":301,"_path":302,"children":303},"Components","/design-system/components",[304,307,310,312,315,318,321,324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402,405,408,411,414,417,420,423,426,429,432,435,438,441,444],{"title":305,"_path":306,"layout":13},"Accordion","/design-system/components/accordion",{"title":308,"_path":309,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":158,"_path":311,"layout":13},"/design-system/components/alert",{"title":313,"_path":314,"layout":13},"Block quote","/design-system/components/block-quote",{"title":316,"_path":317,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":319,"_path":320,"layout":13},"Button","/design-system/components/button",{"title":322,"_path":323,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":325,"_path":326,"layout":13},"Callout","/design-system/components/callout",{"title":328,"_path":329,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":331,"_path":332,"layout":13},"Card","/design-system/components/card",{"title":334,"_path":335,"layout":13},"Carousel","/design-system/components/carousel",{"title":337,"_path":338,"layout":13},"Category grid","/design-system/components/category-grid",{"title":340,"_path":341,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":343,"_path":344,"layout":13},"Chip","/design-system/components/chip",{"title":346,"_path":347,"layout":13},"Contact us","/design-system/components/contact-us",{"title":349,"_path":350,"layout":13},"Date input","/design-system/components/date-input",{"title":352,"_path":353,"layout":13},"Detail list","/design-system/components/detail-list",{"title":355,"_path":356,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":358,"_path":359,"layout":13},"File","/design-system/components/file",{"title":361,"_path":362,"layout":13},"Footer","/design-system/components/footer",{"title":364,"_path":365,"layout":13},"Form","/design-system/components/form",{"title":367,"_path":368,"layout":13},"Form alert","/design-system/components/form-alert",{"title":370,"_path":371,"layout":13},"Header","/design-system/components/header",{"title":373,"_path":374,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":376,"_path":377,"layout":13},"Input field","/design-system/components/input-field",{"title":379,"_path":380,"layout":13},"Key dates","/design-system/components/key-dates",{"title":382,"_path":383,"layout":13},"Media","/design-system/components/media",{"title":385,"_path":386,"layout":13},"Media embed","/design-system/components/media-embed",{"title":388,"_path":389,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":391,"_path":392,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":394,"_path":395,"layout":13},"Option button","/design-system/components/option-button",{"title":397,"_path":398,"layout":13},"Page action","/design-system/components/page-action",{"title":400,"_path":401,"layout":13},"Pagination","/design-system/components/pagination",{"title":403,"_path":404,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":406,"_path":407,"layout":13},"Profile","/design-system/components/profile",{"title":409,"_path":410,"layout":13},"Radio button","/design-system/components/radio-button",{"title":412,"_path":413,"layout":13},"Related links","/design-system/components/related-links",{"title":415,"_path":416,"layout":13},"Results listing","/design-system/components/results-listing",{"title":418,"_path":419,"layout":13},"Search bar","/design-system/components/search-bar",{"title":421,"_path":422,"layout":13},"Skip link","/design-system/components/skip-link",{"title":424,"_path":425,"layout":13},"Social share","/design-system/components/social-share",{"title":427,"_path":428,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":430,"_path":431,"layout":13},"Table","/design-system/components/table",{"title":433,"_path":434,"layout":13},"Tabs","/design-system/components/tabs",{"title":436,"_path":437,"layout":13},"Tag","/design-system/components/tag",{"title":439,"_path":440,"layout":13},"Text area","/design-system/components/text-area",{"title":442,"_path":443,"layout":13},"Timeline","/design-system/components/timeline",{"title":445,"_path":446,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":448,"_path":449,"children":450,"layout":13},"Ripple Framework","/framework",[451,452,464,485],{"title":448,"_path":449,"layout":13},{"title":453,"_path":454,"children":455},"Key Concepts","/framework/key-concepts",[456,458,461,462,463],{"title":258,"_path":457,"layout":13},"/framework/key-concepts/nuxt",{"title":459,"_path":460,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":178,"_path":79,"layout":13},{"title":11,"_path":7,"layout":13},{"title":188,"_path":187,"layout":13},{"title":465,"_path":466,"children":467},"Guides","/framework/guides",[468,471,474,477,479,482],{"title":469,"_path":470,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":472,"_path":473,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":475,"_path":476,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":478,"_path":107,"layout":13},"Creating content types",{"title":480,"_path":481,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":483,"_path":484,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":486,"_path":487,"layout":13},"Core modules","/framework/core-modules",["Reactive",489],["Set"],["Reactive",491],{"module-navigation":189},true,1714695649487]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/framework/key-concepts/dynamic-components/_payload.json b/framework/key-concepts/dynamic-components/_payload.json
index 81c8f7595c..f94ce0beb4 100644
--- a/framework/key-concepts/dynamic-components/_payload.json
+++ b/framework/key-concepts/dynamic-components/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,28,50],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",false,{"id":9,"text":10,"url":9,"active":11,"items":12},"/framework/key-concepts","Key Concepts",true,[13,16,19,22,25],{"id":14,"text":15,"url":14,"active":7,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":17,"text":18,"url":17,"active":7,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":20,"text":21,"url":20,"active":7,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":23,"text":24,"url":23,"active":7,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":26,"text":27,"url":26,"active":11,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":29,"text":30,"url":29,"active":7,"items":31},"/framework/guides","Guides",[32,35,38,41,44,47],{"id":33,"text":34,"url":33,"active":7,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":39,"text":40,"url":39,"active":7,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":42,"text":43,"url":42,"active":7,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":45,"text":46,"url":45,"active":7,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":48,"text":49,"url":48,"active":7,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":51,"text":52,"url":51,"active":7,"items":-1},"/framework/core-modules","Core modules",1714695151257]
\ No newline at end of file
+[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,28,50],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",false,{"id":9,"text":10,"url":9,"active":11,"items":12},"/framework/key-concepts","Key Concepts",true,[13,16,19,22,25],{"id":14,"text":15,"url":14,"active":7,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":17,"text":18,"url":17,"active":7,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":20,"text":21,"url":20,"active":7,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":23,"text":24,"url":23,"active":7,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":26,"text":27,"url":26,"active":11,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":29,"text":30,"url":29,"active":7,"items":31},"/framework/guides","Guides",[32,35,38,41,44,47],{"id":33,"text":34,"url":33,"active":7,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":39,"text":40,"url":39,"active":7,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":42,"text":43,"url":42,"active":7,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":45,"text":46,"url":45,"active":7,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":48,"text":49,"url":48,"active":7,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":51,"text":52,"url":51,"active":7,"items":-1},"/framework/core-modules","Core modules",1714695649494]
\ No newline at end of file
diff --git a/framework/key-concepts/dynamic-components/index.html b/framework/key-concepts/dynamic-components/index.html
index 253055d888..60e285d493 100644
--- a/framework/key-concepts/dynamic-components/index.html
+++ b/framework/key-concepts/dynamic-components/index.html
@@ -19,61 +19,61 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseImg.wgVpK8mn.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseImg.Wu9xgcX7.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Nuxt</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/api-endpoints" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>API endpoints</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dynamic components</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/guides-toggle"><span class="rpl-vertical-nav__toggle-text">Guides</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/guides-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/migrating" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Migrating from Ripple 1.x</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/new-sites" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Setting up a new site</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/brand-application" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Applying theme and brand</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-new-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating new layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Adding a new dynamic component</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><!----><a href="/framework/core-modules" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Core modules</span><!--]--></a></li><!--]--></ul></nav><a href="/design-system/about/what-is-ripple" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Design System<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Dynamic components</h1><p class="rpl-type-p-large" data-v-3163c6df></p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->Dynamic components are a concept in Ripple that is closely tied to the concept of &#39;Paragraphs&#39; in Drupal. See the <a href="https://www.drupal.org/project/paragraphs" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Drupal documentation for Paragraphs<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><p><!--[-->Dynamic components/paragraphs can be added to pages in drupal (see <a href="https://www.drupal.org/project/paragraphs" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Key concepts - content types<!--]--><!--]--><!----><!--]--></a>).<!--]--></p><p><!--[-->In Ripple the raw paragraphs from the Drupal JSON API and &#39;mapped&#39; to a Vue component, along with the props required for that component to render. This Vue component, along with the associated mapping is what is referred to as the &#39;Dynamic component&#39;.<!--]--></p><p><!--[--><img src="/assets/img/modules/dynamic-components.png" alt="Illustration of hows how dynamic components are mapped from drupal paragraphs to vue components"><!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/2.key-concepts/5.dynamic-components.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/key-concepts/dynamic-components/_payload.json">[{"state":1,"once":390,"_errors":392,"serverRendered":394,"path":7,"prerenderedAt":395},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":71,"$sdd-globals":92,"$sdd-navigation":94},["ShallowRef",4],["ShallowReactive",5],{"/framework/key-concepts/dynamic-components":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":66,"_id":67,"_source":68,"_file":69,"_extension":70},"/framework/key-concepts/dynamic-components","key-concepts",false,"","Dynamic components",null,"page",{"type":15,"children":16,"toc":63},"root",[17,36,49,54],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22,25,34],{"type":23,"value":24},"text","Dynamic components are a concept in Ripple that is closely tied to the concept of 'Paragraphs' in Drupal. See the ",{"type":18,"tag":26,"props":27,"children":31},"a",{"href":28,"rel":29},"https://www.drupal.org/project/paragraphs",[30],"nofollow",[32],{"type":23,"value":33},"Drupal documentation for Paragraphs",{"type":23,"value":35},".",{"type":18,"tag":19,"props":37,"children":38},{},[39,41,47],{"type":23,"value":40},"Dynamic components/paragraphs can be added to pages in drupal (see ",{"type":18,"tag":26,"props":42,"children":44},{"href":28,"rel":43},[30],[45],{"type":23,"value":46},"Key concepts - content types",{"type":23,"value":48},").",{"type":18,"tag":19,"props":50,"children":51},{},[52],{"type":23,"value":53},"In Ripple the raw paragraphs from the Drupal JSON API and 'mapped' to a Vue component, along with the props required for that component to render. This Vue component, along with the associated mapping is what is referred to as the 'Dynamic component'.",{"type":18,"tag":19,"props":55,"children":56},{},[57],{"type":18,"tag":58,"props":59,"children":62},"img",{"alt":60,"src":61},"Illustration of hows how dynamic components are mapped from drupal paragraphs to vue components","/assets/img/modules/dynamic-components.png",[],{"title":10,"searchDepth":64,"depth":64,"links":65},2,[],"markdown","content:framework:2.key-concepts:5.dynamic-components.md","content","framework/2.key-concepts/5.dynamic-components.md","md",["ShallowRef",72],["ShallowReactive",73],{"/framework/key-concepts/dynamic-components":74},[75,85],{"_path":76,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":77,"description":78,"layout":13,"links":79,"_type":66,"_id":83,"_source":68,"_file":84,"_extension":70},"/framework/key-concepts/content-types","Content types","Implementing content type specific page layouts",[80],{"text":81,"url":82},"Drupal content types","https://www.drupal.org/docs/7/understanding-drupal/content-types","content:framework:2.key-concepts:4.content-types.md","framework/2.key-concepts/4.content-types.md",{"_path":86,"_dir":87,"_draft":9,"_partial":9,"_locale":10,"title":88,"description":89,"layout":13,"_type":66,"_id":90,"_source":68,"_file":91,"_extension":70},"/framework/guides/migrating","guides","Migrating from Ripple 1.x","This guide is intended to outline the process of updating SDP sites using Ripple 1.x to Ripple 2. It is intended for developers tasked with porting Ripple 1 sites and features to Ripple 2.","content:framework:3.guides:1.migrating.md","framework/3.guides/1.migrating.md",["ShallowRef",93],{},[95,100,348],{"title":96,"_path":97,"icon":98,"layout":99},"Ripple Design System","/","carbon:home","home",{"title":101,"_path":102,"children":103},"Design System","/design-system",[104,120,136,166,200],{"title":105,"_path":106,"children":107},"About","/design-system/about",[108,111,114,117],{"title":109,"_path":110,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":112,"_path":113,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":115,"_path":116,"layout":13},"Support","/design-system/about/getting-support",{"title":118,"_path":119,"layout":13},"Contributing","/design-system/about/contributing",{"title":121,"_path":122,"children":123},"Design","/design-system/design",[124,127,130,133],{"title":125,"_path":126,"layout":13},"Getting started","/design-system/design/getting-started",{"title":128,"_path":129,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":131,"_path":132,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":134,"_path":135,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":137,"_path":138,"children":139},"Develop","/design-system/develop",[140,142,144,147],{"title":125,"_path":141,"layout":13},"/design-system/develop/getting-started",{"title":118,"_path":143,"layout":13},"/design-system/develop/contributing",{"title":145,"_path":146,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":148,"_path":149,"children":150,"layout":13},"Usage","/design-system/develop/usage",[151,154,157,160,163],{"title":152,"_path":153,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":155,"_path":156,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":158,"_path":159,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":161,"_path":162,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":164,"_path":165,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":167,"_path":168,"children":169},"Styles","/design-system/styles",[170,173,176,179,182,185,188,191,194,197],{"title":171,"_path":172,"layout":13},"Colour","/design-system/styles/colour",{"title":174,"_path":175,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":177,"_path":178,"layout":13},"Grid","/design-system/styles/grid",{"title":180,"_path":181,"layout":13},"Icons","/design-system/styles/icons",{"title":183,"_path":184,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":186,"_path":187,"layout":13},"Layout","/design-system/styles/layout",{"title":189,"_path":190,"layout":13},"Logo","/design-system/styles/logo",{"title":192,"_path":193,"layout":13},"Motion","/design-system/styles/motion",{"title":195,"_path":196,"layout":13},"Spacing","/design-system/styles/spacing",{"title":198,"_path":199,"layout":13},"Typography","/design-system/styles/typography",{"title":201,"_path":202,"children":203},"Components","/design-system/components",[204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249,252,255,258,261,264,267,270,273,276,279,282,285,288,291,294,297,300,303,306,309,312,315,318,321,324,327,330,333,336,339,342,345],{"title":205,"_path":206,"layout":13},"Accordion","/design-system/components/accordion",{"title":208,"_path":209,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":211,"_path":212,"layout":13},"Alert","/design-system/components/alert",{"title":214,"_path":215,"layout":13},"Block quote","/design-system/components/block-quote",{"title":217,"_path":218,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":220,"_path":221,"layout":13},"Button","/design-system/components/button",{"title":223,"_path":224,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":226,"_path":227,"layout":13},"Callout","/design-system/components/callout",{"title":229,"_path":230,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":232,"_path":233,"layout":13},"Card","/design-system/components/card",{"title":235,"_path":236,"layout":13},"Carousel","/design-system/components/carousel",{"title":238,"_path":239,"layout":13},"Category grid","/design-system/components/category-grid",{"title":241,"_path":242,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":244,"_path":245,"layout":13},"Chip","/design-system/components/chip",{"title":247,"_path":248,"layout":13},"Contact us","/design-system/components/contact-us",{"title":250,"_path":251,"layout":13},"Date input","/design-system/components/date-input",{"title":253,"_path":254,"layout":13},"Detail list","/design-system/components/detail-list",{"title":256,"_path":257,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":259,"_path":260,"layout":13},"File","/design-system/components/file",{"title":262,"_path":263,"layout":13},"Footer","/design-system/components/footer",{"title":265,"_path":266,"layout":13},"Form","/design-system/components/form",{"title":268,"_path":269,"layout":13},"Form alert","/design-system/components/form-alert",{"title":271,"_path":272,"layout":13},"Header","/design-system/components/header",{"title":274,"_path":275,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":277,"_path":278,"layout":13},"Input field","/design-system/components/input-field",{"title":280,"_path":281,"layout":13},"Key dates","/design-system/components/key-dates",{"title":283,"_path":284,"layout":13},"Media","/design-system/components/media",{"title":286,"_path":287,"layout":13},"Media embed","/design-system/components/media-embed",{"title":289,"_path":290,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":292,"_path":293,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":295,"_path":296,"layout":13},"Option button","/design-system/components/option-button",{"title":298,"_path":299,"layout":13},"Page action","/design-system/components/page-action",{"title":301,"_path":302,"layout":13},"Pagination","/design-system/components/pagination",{"title":304,"_path":305,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":307,"_path":308,"layout":13},"Profile","/design-system/components/profile",{"title":310,"_path":311,"layout":13},"Radio button","/design-system/components/radio-button",{"title":313,"_path":314,"layout":13},"Related links","/design-system/components/related-links",{"title":316,"_path":317,"layout":13},"Results listing","/design-system/components/results-listing",{"title":319,"_path":320,"layout":13},"Search bar","/design-system/components/search-bar",{"title":322,"_path":323,"layout":13},"Skip link","/design-system/components/skip-link",{"title":325,"_path":326,"layout":13},"Social share","/design-system/components/social-share",{"title":328,"_path":329,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":331,"_path":332,"layout":13},"Table","/design-system/components/table",{"title":334,"_path":335,"layout":13},"Tabs","/design-system/components/tabs",{"title":337,"_path":338,"layout":13},"Tag","/design-system/components/tag",{"title":340,"_path":341,"layout":13},"Text area","/design-system/components/text-area",{"title":343,"_path":344,"layout":13},"Timeline","/design-system/components/timeline",{"title":346,"_path":347,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":349,"_path":350,"children":351,"layout":13},"Ripple Framework","/framework",[352,353,367,387],{"title":349,"_path":350,"layout":13},{"title":354,"_path":355,"children":356},"Key Concepts","/framework/key-concepts",[357,359,362,365,366],{"title":158,"_path":358,"layout":13},"/framework/key-concepts/nuxt",{"title":360,"_path":361,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":363,"_path":364,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":77,"_path":76,"layout":13},{"title":11,"_path":7,"layout":13},{"title":368,"_path":369,"children":370},"Guides","/framework/guides",[371,372,375,378,381,384],{"title":88,"_path":86,"layout":13},{"title":373,"_path":374,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":376,"_path":377,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":379,"_path":380,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":382,"_path":383,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":385,"_path":386,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":388,"_path":389,"layout":13},"Core modules","/framework/core-modules",["Reactive",391],["Set"],["Reactive",393],{"module-navigation":12},true,1714695151257]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/migrating" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Migrating from Ripple 1.x</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/new-sites" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Setting up a new site</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/brand-application" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Applying theme and brand</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-new-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating new layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Adding a new dynamic component</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><!----><a href="/framework/core-modules" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Core modules</span><!--]--></a></li><!--]--></ul></nav><a href="/design-system/about/what-is-ripple" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Design System<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Dynamic components</h1><p class="rpl-type-p-large" data-v-3163c6df></p><!----></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->Dynamic components are a concept in Ripple that is closely tied to the concept of &#39;Paragraphs&#39; in Drupal. See the <a href="https://www.drupal.org/project/paragraphs" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Drupal documentation for Paragraphs<!--]--><!--]--><!----><!--]--></a>.<!--]--></p><p><!--[-->Dynamic components/paragraphs can be added to pages in drupal (see <a href="https://www.drupal.org/project/paragraphs" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Key concepts - content types<!--]--><!--]--><!----><!--]--></a>).<!--]--></p><p><!--[-->In Ripple the raw paragraphs from the Drupal JSON API and &#39;mapped&#39; to a Vue component, along with the props required for that component to render. This Vue component, along with the associated mapping is what is referred to as the &#39;Dynamic component&#39;.<!--]--></p><p><!--[--><img src="/assets/img/modules/dynamic-components.png" alt="Illustration of hows how dynamic components are mapped from drupal paragraphs to vue components"><!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/2.key-concepts/5.dynamic-components.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/key-concepts/dynamic-components/_payload.json">[{"state":1,"once":390,"_errors":392,"serverRendered":394,"path":7,"prerenderedAt":395},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":71,"$sdd-globals":92,"$sdd-navigation":94},["ShallowRef",4],["ShallowReactive",5],{"/framework/key-concepts/dynamic-components":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"body":14,"_type":66,"_id":67,"_source":68,"_file":69,"_extension":70},"/framework/key-concepts/dynamic-components","key-concepts",false,"","Dynamic components",null,"page",{"type":15,"children":16,"toc":63},"root",[17,36,49,54],{"type":18,"tag":19,"props":20,"children":21},"element","p",{},[22,25,34],{"type":23,"value":24},"text","Dynamic components are a concept in Ripple that is closely tied to the concept of 'Paragraphs' in Drupal. See the ",{"type":18,"tag":26,"props":27,"children":31},"a",{"href":28,"rel":29},"https://www.drupal.org/project/paragraphs",[30],"nofollow",[32],{"type":23,"value":33},"Drupal documentation for Paragraphs",{"type":23,"value":35},".",{"type":18,"tag":19,"props":37,"children":38},{},[39,41,47],{"type":23,"value":40},"Dynamic components/paragraphs can be added to pages in drupal (see ",{"type":18,"tag":26,"props":42,"children":44},{"href":28,"rel":43},[30],[45],{"type":23,"value":46},"Key concepts - content types",{"type":23,"value":48},").",{"type":18,"tag":19,"props":50,"children":51},{},[52],{"type":23,"value":53},"In Ripple the raw paragraphs from the Drupal JSON API and 'mapped' to a Vue component, along with the props required for that component to render. This Vue component, along with the associated mapping is what is referred to as the 'Dynamic component'.",{"type":18,"tag":19,"props":55,"children":56},{},[57],{"type":18,"tag":58,"props":59,"children":62},"img",{"alt":60,"src":61},"Illustration of hows how dynamic components are mapped from drupal paragraphs to vue components","/assets/img/modules/dynamic-components.png",[],{"title":10,"searchDepth":64,"depth":64,"links":65},2,[],"markdown","content:framework:2.key-concepts:5.dynamic-components.md","content","framework/2.key-concepts/5.dynamic-components.md","md",["ShallowRef",72],["ShallowReactive",73],{"/framework/key-concepts/dynamic-components":74},[75,85],{"_path":76,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":77,"description":78,"layout":13,"links":79,"_type":66,"_id":83,"_source":68,"_file":84,"_extension":70},"/framework/key-concepts/content-types","Content types","Implementing content type specific page layouts",[80],{"text":81,"url":82},"Drupal content types","https://www.drupal.org/docs/7/understanding-drupal/content-types","content:framework:2.key-concepts:4.content-types.md","framework/2.key-concepts/4.content-types.md",{"_path":86,"_dir":87,"_draft":9,"_partial":9,"_locale":10,"title":88,"description":89,"layout":13,"_type":66,"_id":90,"_source":68,"_file":91,"_extension":70},"/framework/guides/migrating","guides","Migrating from Ripple 1.x","This guide is intended to outline the process of updating SDP sites using Ripple 1.x to Ripple 2. It is intended for developers tasked with porting Ripple 1 sites and features to Ripple 2.","content:framework:3.guides:1.migrating.md","framework/3.guides/1.migrating.md",["ShallowRef",93],{},[95,100,348],{"title":96,"_path":97,"icon":98,"layout":99},"Ripple Design System","/","carbon:home","home",{"title":101,"_path":102,"children":103},"Design System","/design-system",[104,120,136,166,200],{"title":105,"_path":106,"children":107},"About","/design-system/about",[108,111,114,117],{"title":109,"_path":110,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":112,"_path":113,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":115,"_path":116,"layout":13},"Support","/design-system/about/getting-support",{"title":118,"_path":119,"layout":13},"Contributing","/design-system/about/contributing",{"title":121,"_path":122,"children":123},"Design","/design-system/design",[124,127,130,133],{"title":125,"_path":126,"layout":13},"Getting started","/design-system/design/getting-started",{"title":128,"_path":129,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":131,"_path":132,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":134,"_path":135,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":137,"_path":138,"children":139},"Develop","/design-system/develop",[140,142,144,147],{"title":125,"_path":141,"layout":13},"/design-system/develop/getting-started",{"title":118,"_path":143,"layout":13},"/design-system/develop/contributing",{"title":145,"_path":146,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":148,"_path":149,"children":150,"layout":13},"Usage","/design-system/develop/usage",[151,154,157,160,163],{"title":152,"_path":153,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":155,"_path":156,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":158,"_path":159,"layout":13},"Nuxt","/design-system/develop/usage/nuxt",{"title":161,"_path":162,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":164,"_path":165,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":167,"_path":168,"children":169},"Styles","/design-system/styles",[170,173,176,179,182,185,188,191,194,197],{"title":171,"_path":172,"layout":13},"Colour","/design-system/styles/colour",{"title":174,"_path":175,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":177,"_path":178,"layout":13},"Grid","/design-system/styles/grid",{"title":180,"_path":181,"layout":13},"Icons","/design-system/styles/icons",{"title":183,"_path":184,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":186,"_path":187,"layout":13},"Layout","/design-system/styles/layout",{"title":189,"_path":190,"layout":13},"Logo","/design-system/styles/logo",{"title":192,"_path":193,"layout":13},"Motion","/design-system/styles/motion",{"title":195,"_path":196,"layout":13},"Spacing","/design-system/styles/spacing",{"title":198,"_path":199,"layout":13},"Typography","/design-system/styles/typography",{"title":201,"_path":202,"children":203},"Components","/design-system/components",[204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249,252,255,258,261,264,267,270,273,276,279,282,285,288,291,294,297,300,303,306,309,312,315,318,321,324,327,330,333,336,339,342,345],{"title":205,"_path":206,"layout":13},"Accordion","/design-system/components/accordion",{"title":208,"_path":209,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":211,"_path":212,"layout":13},"Alert","/design-system/components/alert",{"title":214,"_path":215,"layout":13},"Block quote","/design-system/components/block-quote",{"title":217,"_path":218,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":220,"_path":221,"layout":13},"Button","/design-system/components/button",{"title":223,"_path":224,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":226,"_path":227,"layout":13},"Callout","/design-system/components/callout",{"title":229,"_path":230,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":232,"_path":233,"layout":13},"Card","/design-system/components/card",{"title":235,"_path":236,"layout":13},"Carousel","/design-system/components/carousel",{"title":238,"_path":239,"layout":13},"Category grid","/design-system/components/category-grid",{"title":241,"_path":242,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":244,"_path":245,"layout":13},"Chip","/design-system/components/chip",{"title":247,"_path":248,"layout":13},"Contact us","/design-system/components/contact-us",{"title":250,"_path":251,"layout":13},"Date input","/design-system/components/date-input",{"title":253,"_path":254,"layout":13},"Detail list","/design-system/components/detail-list",{"title":256,"_path":257,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":259,"_path":260,"layout":13},"File","/design-system/components/file",{"title":262,"_path":263,"layout":13},"Footer","/design-system/components/footer",{"title":265,"_path":266,"layout":13},"Form","/design-system/components/form",{"title":268,"_path":269,"layout":13},"Form alert","/design-system/components/form-alert",{"title":271,"_path":272,"layout":13},"Header","/design-system/components/header",{"title":274,"_path":275,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":277,"_path":278,"layout":13},"Input field","/design-system/components/input-field",{"title":280,"_path":281,"layout":13},"Key dates","/design-system/components/key-dates",{"title":283,"_path":284,"layout":13},"Media","/design-system/components/media",{"title":286,"_path":287,"layout":13},"Media embed","/design-system/components/media-embed",{"title":289,"_path":290,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":292,"_path":293,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":295,"_path":296,"layout":13},"Option button","/design-system/components/option-button",{"title":298,"_path":299,"layout":13},"Page action","/design-system/components/page-action",{"title":301,"_path":302,"layout":13},"Pagination","/design-system/components/pagination",{"title":304,"_path":305,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":307,"_path":308,"layout":13},"Profile","/design-system/components/profile",{"title":310,"_path":311,"layout":13},"Radio button","/design-system/components/radio-button",{"title":313,"_path":314,"layout":13},"Related links","/design-system/components/related-links",{"title":316,"_path":317,"layout":13},"Results listing","/design-system/components/results-listing",{"title":319,"_path":320,"layout":13},"Search bar","/design-system/components/search-bar",{"title":322,"_path":323,"layout":13},"Skip link","/design-system/components/skip-link",{"title":325,"_path":326,"layout":13},"Social share","/design-system/components/social-share",{"title":328,"_path":329,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":331,"_path":332,"layout":13},"Table","/design-system/components/table",{"title":334,"_path":335,"layout":13},"Tabs","/design-system/components/tabs",{"title":337,"_path":338,"layout":13},"Tag","/design-system/components/tag",{"title":340,"_path":341,"layout":13},"Text area","/design-system/components/text-area",{"title":343,"_path":344,"layout":13},"Timeline","/design-system/components/timeline",{"title":346,"_path":347,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":349,"_path":350,"children":351,"layout":13},"Ripple Framework","/framework",[352,353,367,387],{"title":349,"_path":350,"layout":13},{"title":354,"_path":355,"children":356},"Key Concepts","/framework/key-concepts",[357,359,362,365,366],{"title":158,"_path":358,"layout":13},"/framework/key-concepts/nuxt",{"title":360,"_path":361,"layout":13},"Layers","/framework/key-concepts/nuxt-layers",{"title":363,"_path":364,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":77,"_path":76,"layout":13},{"title":11,"_path":7,"layout":13},{"title":368,"_path":369,"children":370},"Guides","/framework/guides",[371,372,375,378,381,384],{"title":88,"_path":86,"layout":13},{"title":373,"_path":374,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":376,"_path":377,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":379,"_path":380,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":382,"_path":383,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":385,"_path":386,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":388,"_path":389,"layout":13},"Core modules","/framework/core-modules",["Reactive",391],["Set"],["Reactive",393],{"module-navigation":12},true,1714695649494]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/framework/key-concepts/nuxt-layers/_payload.json b/framework/key-concepts/nuxt-layers/_payload.json
index 7831a3330c..e86e4c112f 100644
--- a/framework/key-concepts/nuxt-layers/_payload.json
+++ b/framework/key-concepts/nuxt-layers/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,28,50],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",false,{"id":9,"text":10,"url":9,"active":11,"items":12},"/framework/key-concepts","Key Concepts",true,[13,16,19,22,25],{"id":14,"text":15,"url":14,"active":7,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":17,"text":18,"url":17,"active":11,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":20,"text":21,"url":20,"active":7,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":23,"text":24,"url":23,"active":7,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":26,"text":27,"url":26,"active":7,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":29,"text":30,"url":29,"active":7,"items":31},"/framework/guides","Guides",[32,35,38,41,44,47],{"id":33,"text":34,"url":33,"active":7,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":39,"text":40,"url":39,"active":7,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":42,"text":43,"url":42,"active":7,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":45,"text":46,"url":45,"active":7,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":48,"text":49,"url":48,"active":7,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":51,"text":52,"url":51,"active":7,"items":-1},"/framework/core-modules","Core modules",1714695151241]
\ No newline at end of file
+[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,28,50],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",false,{"id":9,"text":10,"url":9,"active":11,"items":12},"/framework/key-concepts","Key Concepts",true,[13,16,19,22,25],{"id":14,"text":15,"url":14,"active":7,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":17,"text":18,"url":17,"active":11,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":20,"text":21,"url":20,"active":7,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":23,"text":24,"url":23,"active":7,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":26,"text":27,"url":26,"active":7,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":29,"text":30,"url":29,"active":7,"items":31},"/framework/guides","Guides",[32,35,38,41,44,47],{"id":33,"text":34,"url":33,"active":7,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":39,"text":40,"url":39,"active":7,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":42,"text":43,"url":42,"active":7,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":45,"text":46,"url":45,"active":7,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":48,"text":49,"url":48,"active":7,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":51,"text":52,"url":51,"active":7,"items":-1},"/framework/core-modules","Core modules",1714695649477]
\ No newline at end of file
diff --git a/framework/key-concepts/nuxt-layers/index.html b/framework/key-concepts/nuxt-layers/index.html
index 62884ccc35..ed4a86b7f3 100644
--- a/framework/key-concepts/nuxt-layers/index.html
+++ b/framework/key-concepts/nuxt-layers/index.html
@@ -22,62 +22,62 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.lp_k9Hpd.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseImg.wgVpK8mn.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.Czpq-HHw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseImg.Wu9xgcX7.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Nuxt</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt-layers" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/api-endpoints" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>API endpoints</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dynamic components</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/guides-toggle"><span class="rpl-vertical-nav__toggle-text">Guides</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/guides-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/migrating" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Migrating from Ripple 1.x</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/new-sites" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Setting up a new site</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/brand-application" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Applying theme and brand</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-new-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating new layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Adding a new dynamic component</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><!----><a href="/framework/core-modules" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Core modules</span><!--]--></a></li><!--]--></ul></nav><a href="/design-system/about/what-is-ripple" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Design System<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Layers</h1><p class="rpl-type-p-large" data-v-3163c6df>Nuxt layers are used to encapsulate Ripple functionality to share and reuse</p><ul class="links rpl-u-margin-t-5" data-v-3163c6df><!--[--><li data-v-3163c6df><a href="https://nuxt.com/docs/getting-started/layers" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p rpl-type-p" target="_blank" data-v-3163c6df data-v-5d4aedf1><!--[--><!--[--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--[-->Nuxt layers documentation<!--]--><!----><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></li><!--]--></ul></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[--><a href="nuxt" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Nuxt<!--]--><!--]--><!----><!--]--></a> 3 provides a way to encapsulate part of a Nuxt project into what they call a Layer.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[-->Nuxt layers are a powerful feature that you can use to share and reuse partial Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain.<!--]--></p><!--]--></blockquote><iframe width="800" height="500" class="rpl-u-padding-t-8 rpl-u-padding-b-8" style="width: 100%" src="https://www.youtube.com/embed/lnFCM7c9f7I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe><p><!--[-->In Ripple 2, we utilise Nuxt Layers extensively to share isolated features between SDP sites. A good example is a content type. Using a Nuxt Layer we are able to add the components, API endpoints, composables, etc needed to implement the feature, without having the overhead of a Nuxt Module.<!--]--></p><p><!--[-->A great feature of Nuxt Layers is that you can reference them from any public or private Git repo in addition to publishing via an NPM module.<!--]--></p><p><!--[-->Below is a diagram showing how Ripple 2 features are distributed through Nuxt layers and used within projects.<!--]--></p><p><!--[--><img src="/assets/img/modules/layers.png" alt="Ripple layers architecture diagram. Shows how modules can be shared between projects"><!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/2.key-concepts/2.nuxt-layers.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/key-concepts/nuxt-layers/_payload.json">[{"state":1,"once":413,"_errors":415,"serverRendered":58,"path":7,"prerenderedAt":418},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":92,"$sdd-globals":115,"$sdd-navigation":117},["ShallowRef",4],["ShallowReactive",5],{"/framework/key-concepts/nuxt-layers":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"links":14,"body":18,"_type":87,"_id":88,"_source":89,"_file":90,"_extension":91},"/framework/key-concepts/nuxt-layers","key-concepts",false,"","Layers","Nuxt layers are used to encapsulate Ripple functionality to share and reuse","page",[15],{"text":16,"url":17},"Nuxt layers documentation","https://nuxt.com/docs/getting-started/layers",{"type":19,"children":20,"toc":84},"root",[21,36,45,60,65,70,75],{"type":22,"tag":23,"props":24,"children":25},"element","p",{},[26,34],{"type":22,"tag":27,"props":28,"children":30},"a",{"href":29},"nuxt",[31],{"type":32,"value":33},"text","Nuxt",{"type":32,"value":35}," 3 provides a way to encapsulate part of a Nuxt project into what they call a Layer.",{"type":22,"tag":37,"props":38,"children":39},"blockquote",{},[40],{"type":22,"tag":23,"props":41,"children":42},{},[43],{"type":32,"value":44},"Nuxt layers are a powerful feature that you can use to share and reuse partial Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain.",{"type":22,"tag":46,"props":47,"children":59},"iframe",{"width":48,"height":49,"className":50,"style":53,"src":54,"title":55,"frameBorder":56,"allow":57,"allowFullScreen":58},800,500,[51,52],"rpl-u-padding-t-8","rpl-u-padding-b-8","width: 100%","https://www.youtube.com/embed/lnFCM7c9f7I","YouTube video player","0","accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",true,[],{"type":22,"tag":23,"props":61,"children":62},{},[63],{"type":32,"value":64},"In Ripple 2, we utilise Nuxt Layers extensively to share isolated features between SDP sites. A good example is a content type. Using a Nuxt Layer we are able to add the components, API endpoints, composables, etc needed to implement the feature, without having the overhead of a Nuxt Module.",{"type":22,"tag":23,"props":66,"children":67},{},[68],{"type":32,"value":69},"A great feature of Nuxt Layers is that you can reference them from any public or private Git repo in addition to publishing via an NPM module.",{"type":22,"tag":23,"props":71,"children":72},{},[73],{"type":32,"value":74},"Below is a diagram showing how Ripple 2 features are distributed through Nuxt layers and used within projects.",{"type":22,"tag":23,"props":76,"children":77},{},[78],{"type":22,"tag":79,"props":80,"children":83},"img",{"alt":81,"src":82},"Ripple layers architecture diagram. Shows how modules can be shared between projects","/assets/img/modules/layers.png",[],{"title":10,"searchDepth":85,"depth":85,"links":86},2,[],"markdown","content:framework:2.key-concepts:2.nuxt-layers.md","content","framework/2.key-concepts/2.nuxt-layers.md","md",["ShallowRef",93],["ShallowReactive",94],{"/framework/key-concepts/nuxt-layers":95},[96,105],{"_path":97,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":33,"description":98,"layout":13,"links":99,"_type":87,"_id":103,"_source":89,"_file":104,"_extension":91},"/framework/key-concepts/nuxt","Nuxt is the framework used in Ripple to deliver headless SDP websites that connect to Tide Drupal backends for content.",[100],{"text":101,"url":102},"Nuxt documentation","https://nuxt.com/","content:framework:2.key-concepts:1.nuxt.md","framework/2.key-concepts/1.nuxt.md",{"_path":106,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":107,"description":108,"layout":13,"links":109,"_type":87,"_id":113,"_source":89,"_file":114,"_extension":91},"/framework/key-concepts/api-endpoints","API endpoints","Ripple creates an API that handles the translation of Drupal data into exactly whats needed on the page.",[110],{"text":111,"url":112},"Nuxt API routes documentation","https://nuxt.com/docs/guide/directory-structure/server#api-routes","content:framework:2.key-concepts:3.API-endpoints.md","framework/2.key-concepts/3.API-endpoints.md",["ShallowRef",116],{},[118,123,370],{"title":119,"_path":120,"icon":121,"layout":122},"Ripple Design System","/","carbon:home","home",{"title":124,"_path":125,"children":126},"Design System","/design-system",[127,143,159,188,222],{"title":128,"_path":129,"children":130},"About","/design-system/about",[131,134,137,140],{"title":132,"_path":133,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":135,"_path":136,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":138,"_path":139,"layout":13},"Support","/design-system/about/getting-support",{"title":141,"_path":142,"layout":13},"Contributing","/design-system/about/contributing",{"title":144,"_path":145,"children":146},"Design","/design-system/design",[147,150,153,156],{"title":148,"_path":149,"layout":13},"Getting started","/design-system/design/getting-started",{"title":151,"_path":152,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":154,"_path":155,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":157,"_path":158,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":160,"_path":161,"children":162},"Develop","/design-system/develop",[163,165,167,170],{"title":148,"_path":164,"layout":13},"/design-system/develop/getting-started",{"title":141,"_path":166,"layout":13},"/design-system/develop/contributing",{"title":168,"_path":169,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":171,"_path":172,"children":173,"layout":13},"Usage","/design-system/develop/usage",[174,177,180,182,185],{"title":175,"_path":176,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":178,"_path":179,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":33,"_path":181,"layout":13},"/design-system/develop/usage/nuxt",{"title":183,"_path":184,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":186,"_path":187,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":189,"_path":190,"children":191},"Styles","/design-system/styles",[192,195,198,201,204,207,210,213,216,219],{"title":193,"_path":194,"layout":13},"Colour","/design-system/styles/colour",{"title":196,"_path":197,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":199,"_path":200,"layout":13},"Grid","/design-system/styles/grid",{"title":202,"_path":203,"layout":13},"Icons","/design-system/styles/icons",{"title":205,"_path":206,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":208,"_path":209,"layout":13},"Layout","/design-system/styles/layout",{"title":211,"_path":212,"layout":13},"Logo","/design-system/styles/logo",{"title":214,"_path":215,"layout":13},"Motion","/design-system/styles/motion",{"title":217,"_path":218,"layout":13},"Spacing","/design-system/styles/spacing",{"title":220,"_path":221,"layout":13},"Typography","/design-system/styles/typography",{"title":223,"_path":224,"children":225},"Components","/design-system/components",[226,229,232,235,238,241,244,247,250,253,256,259,262,265,268,271,274,277,280,283,286,289,292,295,298,301,304,307,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367],{"title":227,"_path":228,"layout":13},"Accordion","/design-system/components/accordion",{"title":230,"_path":231,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":233,"_path":234,"layout":13},"Alert","/design-system/components/alert",{"title":236,"_path":237,"layout":13},"Block quote","/design-system/components/block-quote",{"title":239,"_path":240,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":242,"_path":243,"layout":13},"Button","/design-system/components/button",{"title":245,"_path":246,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":248,"_path":249,"layout":13},"Callout","/design-system/components/callout",{"title":251,"_path":252,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":254,"_path":255,"layout":13},"Card","/design-system/components/card",{"title":257,"_path":258,"layout":13},"Carousel","/design-system/components/carousel",{"title":260,"_path":261,"layout":13},"Category grid","/design-system/components/category-grid",{"title":263,"_path":264,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":266,"_path":267,"layout":13},"Chip","/design-system/components/chip",{"title":269,"_path":270,"layout":13},"Contact us","/design-system/components/contact-us",{"title":272,"_path":273,"layout":13},"Date input","/design-system/components/date-input",{"title":275,"_path":276,"layout":13},"Detail list","/design-system/components/detail-list",{"title":278,"_path":279,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":281,"_path":282,"layout":13},"File","/design-system/components/file",{"title":284,"_path":285,"layout":13},"Footer","/design-system/components/footer",{"title":287,"_path":288,"layout":13},"Form","/design-system/components/form",{"title":290,"_path":291,"layout":13},"Form alert","/design-system/components/form-alert",{"title":293,"_path":294,"layout":13},"Header","/design-system/components/header",{"title":296,"_path":297,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":299,"_path":300,"layout":13},"Input field","/design-system/components/input-field",{"title":302,"_path":303,"layout":13},"Key dates","/design-system/components/key-dates",{"title":305,"_path":306,"layout":13},"Media","/design-system/components/media",{"title":308,"_path":309,"layout":13},"Media embed","/design-system/components/media-embed",{"title":311,"_path":312,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":314,"_path":315,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":317,"_path":318,"layout":13},"Option button","/design-system/components/option-button",{"title":320,"_path":321,"layout":13},"Page action","/design-system/components/page-action",{"title":323,"_path":324,"layout":13},"Pagination","/design-system/components/pagination",{"title":326,"_path":327,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":329,"_path":330,"layout":13},"Profile","/design-system/components/profile",{"title":332,"_path":333,"layout":13},"Radio button","/design-system/components/radio-button",{"title":335,"_path":336,"layout":13},"Related links","/design-system/components/related-links",{"title":338,"_path":339,"layout":13},"Results listing","/design-system/components/results-listing",{"title":341,"_path":342,"layout":13},"Search bar","/design-system/components/search-bar",{"title":344,"_path":345,"layout":13},"Skip link","/design-system/components/skip-link",{"title":347,"_path":348,"layout":13},"Social share","/design-system/components/social-share",{"title":350,"_path":351,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":353,"_path":354,"layout":13},"Table","/design-system/components/table",{"title":356,"_path":357,"layout":13},"Tabs","/design-system/components/tabs",{"title":359,"_path":360,"layout":13},"Tag","/design-system/components/tag",{"title":362,"_path":363,"layout":13},"Text area","/design-system/components/text-area",{"title":365,"_path":366,"layout":13},"Timeline","/design-system/components/timeline",{"title":368,"_path":369,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":371,"_path":372,"children":373,"layout":13},"Ripple Framework","/framework",[374,375,388,410],{"title":371,"_path":372,"layout":13},{"title":376,"_path":377,"children":378},"Key Concepts","/framework/key-concepts",[379,380,381,382,385],{"title":33,"_path":97,"layout":13},{"title":11,"_path":7,"layout":13},{"title":107,"_path":106,"layout":13},{"title":383,"_path":384,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":386,"_path":387,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":389,"_path":390,"children":391},"Guides","/framework/guides",[392,395,398,401,404,407],{"title":393,"_path":394,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":396,"_path":397,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":399,"_path":400,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":402,"_path":403,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":405,"_path":406,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":408,"_path":409,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":411,"_path":412,"layout":13},"Core modules","/framework/core-modules",["Reactive",414],["Set"],["Reactive",416],{"module-navigation":417},null,1714695151241]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/migrating" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Migrating from Ripple 1.x</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/new-sites" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Setting up a new site</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/brand-application" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Applying theme and brand</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-new-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating new layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Adding a new dynamic component</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><!----><a href="/framework/core-modules" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Core modules</span><!--]--></a></li><!--]--></ul></nav><a href="/design-system/about/what-is-ripple" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Design System<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Layers</h1><p class="rpl-type-p-large" data-v-3163c6df>Nuxt layers are used to encapsulate Ripple functionality to share and reuse</p><ul class="links rpl-u-margin-t-5" data-v-3163c6df><!--[--><li data-v-3163c6df><a href="https://nuxt.com/docs/getting-started/layers" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p rpl-type-p" target="_blank" data-v-3163c6df data-v-5d4aedf1><!--[--><!--[--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--[-->Nuxt layers documentation<!--]--><!----><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></li><!--]--></ul></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[--><a href="nuxt" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[--><!--[-->Nuxt<!--]--><!--]--><!----><!--]--></a> 3 provides a way to encapsulate part of a Nuxt project into what they call a Layer.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[-->Nuxt layers are a powerful feature that you can use to share and reuse partial Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain.<!--]--></p><!--]--></blockquote><iframe width="800" height="500" class="rpl-u-padding-t-8 rpl-u-padding-b-8" style="width: 100%" src="https://www.youtube.com/embed/lnFCM7c9f7I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe><p><!--[-->In Ripple 2, we utilise Nuxt Layers extensively to share isolated features between SDP sites. A good example is a content type. Using a Nuxt Layer we are able to add the components, API endpoints, composables, etc needed to implement the feature, without having the overhead of a Nuxt Module.<!--]--></p><p><!--[-->A great feature of Nuxt Layers is that you can reference them from any public or private Git repo in addition to publishing via an NPM module.<!--]--></p><p><!--[-->Below is a diagram showing how Ripple 2 features are distributed through Nuxt layers and used within projects.<!--]--></p><p><!--[--><img src="/assets/img/modules/layers.png" alt="Ripple layers architecture diagram. Shows how modules can be shared between projects"><!--]--></p><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/2.key-concepts/2.nuxt-layers.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/key-concepts/nuxt-layers/_payload.json">[{"state":1,"once":413,"_errors":415,"serverRendered":58,"path":7,"prerenderedAt":418},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":92,"$sdd-globals":115,"$sdd-navigation":117},["ShallowRef",4],["ShallowReactive",5],{"/framework/key-concepts/nuxt-layers":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"links":14,"body":18,"_type":87,"_id":88,"_source":89,"_file":90,"_extension":91},"/framework/key-concepts/nuxt-layers","key-concepts",false,"","Layers","Nuxt layers are used to encapsulate Ripple functionality to share and reuse","page",[15],{"text":16,"url":17},"Nuxt layers documentation","https://nuxt.com/docs/getting-started/layers",{"type":19,"children":20,"toc":84},"root",[21,36,45,60,65,70,75],{"type":22,"tag":23,"props":24,"children":25},"element","p",{},[26,34],{"type":22,"tag":27,"props":28,"children":30},"a",{"href":29},"nuxt",[31],{"type":32,"value":33},"text","Nuxt",{"type":32,"value":35}," 3 provides a way to encapsulate part of a Nuxt project into what they call a Layer.",{"type":22,"tag":37,"props":38,"children":39},"blockquote",{},[40],{"type":22,"tag":23,"props":41,"children":42},{},[43],{"type":32,"value":44},"Nuxt layers are a powerful feature that you can use to share and reuse partial Nuxt applications within a monorepo, or from a git repository or npm package. The layers structure is almost identical to a standard Nuxt application, which makes them easy to author and maintain.",{"type":22,"tag":46,"props":47,"children":59},"iframe",{"width":48,"height":49,"className":50,"style":53,"src":54,"title":55,"frameBorder":56,"allow":57,"allowFullScreen":58},800,500,[51,52],"rpl-u-padding-t-8","rpl-u-padding-b-8","width: 100%","https://www.youtube.com/embed/lnFCM7c9f7I","YouTube video player","0","accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",true,[],{"type":22,"tag":23,"props":61,"children":62},{},[63],{"type":32,"value":64},"In Ripple 2, we utilise Nuxt Layers extensively to share isolated features between SDP sites. A good example is a content type. Using a Nuxt Layer we are able to add the components, API endpoints, composables, etc needed to implement the feature, without having the overhead of a Nuxt Module.",{"type":22,"tag":23,"props":66,"children":67},{},[68],{"type":32,"value":69},"A great feature of Nuxt Layers is that you can reference them from any public or private Git repo in addition to publishing via an NPM module.",{"type":22,"tag":23,"props":71,"children":72},{},[73],{"type":32,"value":74},"Below is a diagram showing how Ripple 2 features are distributed through Nuxt layers and used within projects.",{"type":22,"tag":23,"props":76,"children":77},{},[78],{"type":22,"tag":79,"props":80,"children":83},"img",{"alt":81,"src":82},"Ripple layers architecture diagram. Shows how modules can be shared between projects","/assets/img/modules/layers.png",[],{"title":10,"searchDepth":85,"depth":85,"links":86},2,[],"markdown","content:framework:2.key-concepts:2.nuxt-layers.md","content","framework/2.key-concepts/2.nuxt-layers.md","md",["ShallowRef",93],["ShallowReactive",94],{"/framework/key-concepts/nuxt-layers":95},[96,105],{"_path":97,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":33,"description":98,"layout":13,"links":99,"_type":87,"_id":103,"_source":89,"_file":104,"_extension":91},"/framework/key-concepts/nuxt","Nuxt is the framework used in Ripple to deliver headless SDP websites that connect to Tide Drupal backends for content.",[100],{"text":101,"url":102},"Nuxt documentation","https://nuxt.com/","content:framework:2.key-concepts:1.nuxt.md","framework/2.key-concepts/1.nuxt.md",{"_path":106,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":107,"description":108,"layout":13,"links":109,"_type":87,"_id":113,"_source":89,"_file":114,"_extension":91},"/framework/key-concepts/api-endpoints","API endpoints","Ripple creates an API that handles the translation of Drupal data into exactly whats needed on the page.",[110],{"text":111,"url":112},"Nuxt API routes documentation","https://nuxt.com/docs/guide/directory-structure/server#api-routes","content:framework:2.key-concepts:3.API-endpoints.md","framework/2.key-concepts/3.API-endpoints.md",["ShallowRef",116],{},[118,123,370],{"title":119,"_path":120,"icon":121,"layout":122},"Ripple Design System","/","carbon:home","home",{"title":124,"_path":125,"children":126},"Design System","/design-system",[127,143,159,188,222],{"title":128,"_path":129,"children":130},"About","/design-system/about",[131,134,137,140],{"title":132,"_path":133,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":135,"_path":136,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":138,"_path":139,"layout":13},"Support","/design-system/about/getting-support",{"title":141,"_path":142,"layout":13},"Contributing","/design-system/about/contributing",{"title":144,"_path":145,"children":146},"Design","/design-system/design",[147,150,153,156],{"title":148,"_path":149,"layout":13},"Getting started","/design-system/design/getting-started",{"title":151,"_path":152,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":154,"_path":155,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":157,"_path":158,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":160,"_path":161,"children":162},"Develop","/design-system/develop",[163,165,167,170],{"title":148,"_path":164,"layout":13},"/design-system/develop/getting-started",{"title":141,"_path":166,"layout":13},"/design-system/develop/contributing",{"title":168,"_path":169,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":171,"_path":172,"children":173,"layout":13},"Usage","/design-system/develop/usage",[174,177,180,182,185],{"title":175,"_path":176,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":178,"_path":179,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":33,"_path":181,"layout":13},"/design-system/develop/usage/nuxt",{"title":183,"_path":184,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":186,"_path":187,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":189,"_path":190,"children":191},"Styles","/design-system/styles",[192,195,198,201,204,207,210,213,216,219],{"title":193,"_path":194,"layout":13},"Colour","/design-system/styles/colour",{"title":196,"_path":197,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":199,"_path":200,"layout":13},"Grid","/design-system/styles/grid",{"title":202,"_path":203,"layout":13},"Icons","/design-system/styles/icons",{"title":205,"_path":206,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":208,"_path":209,"layout":13},"Layout","/design-system/styles/layout",{"title":211,"_path":212,"layout":13},"Logo","/design-system/styles/logo",{"title":214,"_path":215,"layout":13},"Motion","/design-system/styles/motion",{"title":217,"_path":218,"layout":13},"Spacing","/design-system/styles/spacing",{"title":220,"_path":221,"layout":13},"Typography","/design-system/styles/typography",{"title":223,"_path":224,"children":225},"Components","/design-system/components",[226,229,232,235,238,241,244,247,250,253,256,259,262,265,268,271,274,277,280,283,286,289,292,295,298,301,304,307,310,313,316,319,322,325,328,331,334,337,340,343,346,349,352,355,358,361,364,367],{"title":227,"_path":228,"layout":13},"Accordion","/design-system/components/accordion",{"title":230,"_path":231,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":233,"_path":234,"layout":13},"Alert","/design-system/components/alert",{"title":236,"_path":237,"layout":13},"Block quote","/design-system/components/block-quote",{"title":239,"_path":240,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":242,"_path":243,"layout":13},"Button","/design-system/components/button",{"title":245,"_path":246,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":248,"_path":249,"layout":13},"Callout","/design-system/components/callout",{"title":251,"_path":252,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":254,"_path":255,"layout":13},"Card","/design-system/components/card",{"title":257,"_path":258,"layout":13},"Carousel","/design-system/components/carousel",{"title":260,"_path":261,"layout":13},"Category grid","/design-system/components/category-grid",{"title":263,"_path":264,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":266,"_path":267,"layout":13},"Chip","/design-system/components/chip",{"title":269,"_path":270,"layout":13},"Contact us","/design-system/components/contact-us",{"title":272,"_path":273,"layout":13},"Date input","/design-system/components/date-input",{"title":275,"_path":276,"layout":13},"Detail list","/design-system/components/detail-list",{"title":278,"_path":279,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":281,"_path":282,"layout":13},"File","/design-system/components/file",{"title":284,"_path":285,"layout":13},"Footer","/design-system/components/footer",{"title":287,"_path":288,"layout":13},"Form","/design-system/components/form",{"title":290,"_path":291,"layout":13},"Form alert","/design-system/components/form-alert",{"title":293,"_path":294,"layout":13},"Header","/design-system/components/header",{"title":296,"_path":297,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":299,"_path":300,"layout":13},"Input field","/design-system/components/input-field",{"title":302,"_path":303,"layout":13},"Key dates","/design-system/components/key-dates",{"title":305,"_path":306,"layout":13},"Media","/design-system/components/media",{"title":308,"_path":309,"layout":13},"Media embed","/design-system/components/media-embed",{"title":311,"_path":312,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":314,"_path":315,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":317,"_path":318,"layout":13},"Option button","/design-system/components/option-button",{"title":320,"_path":321,"layout":13},"Page action","/design-system/components/page-action",{"title":323,"_path":324,"layout":13},"Pagination","/design-system/components/pagination",{"title":326,"_path":327,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":329,"_path":330,"layout":13},"Profile","/design-system/components/profile",{"title":332,"_path":333,"layout":13},"Radio button","/design-system/components/radio-button",{"title":335,"_path":336,"layout":13},"Related links","/design-system/components/related-links",{"title":338,"_path":339,"layout":13},"Results listing","/design-system/components/results-listing",{"title":341,"_path":342,"layout":13},"Search bar","/design-system/components/search-bar",{"title":344,"_path":345,"layout":13},"Skip link","/design-system/components/skip-link",{"title":347,"_path":348,"layout":13},"Social share","/design-system/components/social-share",{"title":350,"_path":351,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":353,"_path":354,"layout":13},"Table","/design-system/components/table",{"title":356,"_path":357,"layout":13},"Tabs","/design-system/components/tabs",{"title":359,"_path":360,"layout":13},"Tag","/design-system/components/tag",{"title":362,"_path":363,"layout":13},"Text area","/design-system/components/text-area",{"title":365,"_path":366,"layout":13},"Timeline","/design-system/components/timeline",{"title":368,"_path":369,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":371,"_path":372,"children":373,"layout":13},"Ripple Framework","/framework",[374,375,388,410],{"title":371,"_path":372,"layout":13},{"title":376,"_path":377,"children":378},"Key Concepts","/framework/key-concepts",[379,380,381,382,385],{"title":33,"_path":97,"layout":13},{"title":11,"_path":7,"layout":13},{"title":107,"_path":106,"layout":13},{"title":383,"_path":384,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":386,"_path":387,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":389,"_path":390,"children":391},"Guides","/framework/guides",[392,395,398,401,404,407],{"title":393,"_path":394,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":396,"_path":397,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":399,"_path":400,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":402,"_path":403,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":405,"_path":406,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":408,"_path":409,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":411,"_path":412,"layout":13},"Core modules","/framework/core-modules",["Reactive",414],["Set"],["Reactive",416],{"module-navigation":417},null,1714695649477]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/framework/key-concepts/nuxt/_payload.json b/framework/key-concepts/nuxt/_payload.json
index 787d54c6f9..32146592b6 100644
--- a/framework/key-concepts/nuxt/_payload.json
+++ b/framework/key-concepts/nuxt/_payload.json
@@ -1 +1 @@
-[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,28,50],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",false,{"id":9,"text":10,"url":9,"active":11,"items":12},"/framework/key-concepts","Key Concepts",true,[13,16,19,22,25],{"id":14,"text":15,"url":14,"active":11,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":17,"text":18,"url":17,"active":7,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":20,"text":21,"url":20,"active":7,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":23,"text":24,"url":23,"active":7,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":26,"text":27,"url":26,"active":7,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":29,"text":30,"url":29,"active":7,"items":31},"/framework/guides","Guides",[32,35,38,41,44,47],{"id":33,"text":34,"url":33,"active":7,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":39,"text":40,"url":39,"active":7,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":42,"text":43,"url":42,"active":7,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":45,"text":46,"url":45,"active":7,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":48,"text":49,"url":48,"active":7,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":51,"text":52,"url":51,"active":7,"items":-1},"/framework/core-modules","Core modules",1714695151233]
\ No newline at end of file
+[{"data":1,"prerenderedAt":53},["Reactive",2],{"module-navigation":3},[4,8,28,50],{"id":5,"text":6,"url":5,"active":7,"items":-1},"/framework","Ripple Framework",false,{"id":9,"text":10,"url":9,"active":11,"items":12},"/framework/key-concepts","Key Concepts",true,[13,16,19,22,25],{"id":14,"text":15,"url":14,"active":11,"items":-1},"/framework/key-concepts/nuxt","Nuxt",{"id":17,"text":18,"url":17,"active":7,"items":-1},"/framework/key-concepts/nuxt-layers","Layers",{"id":20,"text":21,"url":20,"active":7,"items":-1},"/framework/key-concepts/api-endpoints","API endpoints",{"id":23,"text":24,"url":23,"active":7,"items":-1},"/framework/key-concepts/content-types","Content types",{"id":26,"text":27,"url":26,"active":7,"items":-1},"/framework/key-concepts/dynamic-components","Dynamic components",{"id":29,"text":30,"url":29,"active":7,"items":31},"/framework/guides","Guides",[32,35,38,41,44,47],{"id":33,"text":34,"url":33,"active":7,"items":-1},"/framework/guides/migrating","Migrating from Ripple 1.x",{"id":36,"text":37,"url":36,"active":7,"items":-1},"/framework/guides/new-sites","Setting up a new site",{"id":39,"text":40,"url":39,"active":7,"items":-1},"/framework/guides/brand-application","Applying theme and brand",{"id":42,"text":43,"url":42,"active":7,"items":-1},"/framework/guides/creating-content-types","Creating content types",{"id":45,"text":46,"url":45,"active":7,"items":-1},"/framework/guides/creating-new-layers","Creating new layers",{"id":48,"text":49,"url":48,"active":7,"items":-1},"/framework/guides/dynamic-components","Adding a new dynamic component",{"id":51,"text":52,"url":51,"active":7,"items":-1},"/framework/core-modules","Core modules",1714695649472]
\ No newline at end of file
diff --git a/framework/key-concepts/nuxt/index.html b/framework/key-concepts/nuxt/index.html
index 3953e7e6f7..97bcac4d26 100644
--- a/framework/key-concepts/nuxt/index.html
+++ b/framework/key-concepts/nuxt/index.html
@@ -22,64 +22,64 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.jF369Aie.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.L9iJVoxE.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.cG_oeGiJ.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.lp_k9Hpd.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.F9NVvvm4.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.GyfBzrRs.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.MnotWTMg.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.gmWvIO0I.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.zskQ2UNQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsContent.SQZjpxgh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseP.xOmAEUok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseBlockquote.Czpq-HHw.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseStrong.GmB4B_NE.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseUl.ajqmVD2y.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseLi.kWofYoPt.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ProseA.2rbo7RTC.js">
 <link rel="prefetch" as="style" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle"><!--[--><ul class="rpl-vertical-nav__list
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--module"><!--[--><!--]--><header class="docs-header" style="--docs-header-color:var(--rpl-clr-dark);" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Framework</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><button class="docs-header-link rpl-u-focusable-inline" data-v-ad77f901> Menu <span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down docs-header-link-icon" data-v-ad77f901><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></button></div></div></div><!----></header><!--[--><!--]--><div class="docs-layout-content"><div class="rpl-container"><!--[--><div class="rpl-grid docs-hide-mobile-sidebar"><aside class="docs-sidebar rpl-col-12 rpl-col-3-l" style="--local-vertical-nav-background:transparent;--local-vertical-nav-item-gutter:var(--rpl-sp-3);--local-vertical-nav-hover-bg:var(--rpl-clr-neutral-100);"><!--[--><div data-v-18cbb85e><nav class="rpl-vertical-nav rpl-u-screen-only" data-v-18cbb85e><!----><ul class="rpl-vertical-nav__list rpl-vertical-nav__list--level-1 rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><!----><a href="/framework" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Ripple Framework</span><!--]--></a></li><li class="rpl-vertical-nav__list-item rpl-vertical-nav__list-item--expanded"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/key-concepts-toggle"><span class="rpl-vertical-nav__toggle-text">Key Concepts</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="" class="rpl-expandable rpl-expandable--open rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/key-concepts-toggle"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
       rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt" class="rpl-vertical-nav__item rpl-vertical-nav__item--active rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Nuxt</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/nuxt-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/api-endpoints" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>API endpoints</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/key-concepts/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="0"><!--[--><!----><span>Dynamic components</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><button class="rpl-vertical-nav__item rpl-vertical-nav__toggle rpl-u-focusable-block" id="rpl-vertical-nav-/framework/guides-toggle"><span class="rpl-vertical-nav__toggle-text">Guides</span><span class="rpl-vertical-nav__toggle-icon" aria-hidden="true"><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-chevron-down"><svg role="presentation"><!----><use xlink:href="#icon-chevron-down"></use></svg></span></span></button><div style="display:none;" class="rpl-expandable rpl-vertical-nav__list-item-children" role="region" aria-labelledby="rpl-vertical-nav-/framework/guides-toggle" aria-hidden="true"><!--[--><ul class="rpl-vertical-nav__list
       rpl-vertical-nav__list--level-2
-      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/migrating" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Migrating from Ripple 1.x</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/new-sites" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Setting up a new site</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/brand-application" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Applying theme and brand</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-new-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating new layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Adding a new dynamic component</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><!----><a href="/framework/core-modules" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Core modules</span><!--]--></a></li><!--]--></ul></nav><a href="/design-system/about/what-is-ripple" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Design System<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Nuxt</h1><p class="rpl-type-p-large" data-v-3163c6df>Nuxt is the framework used in Ripple to deliver headless SDP websites that connect to Tide Drupal backends for content.</p><ul class="links rpl-u-margin-t-5" data-v-3163c6df><!--[--><li data-v-3163c6df><a href="https://nuxt.com/" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p rpl-type-p" target="_blank" data-v-3163c6df data-v-5d4aedf1><!--[--><!--[--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--[-->Nuxt documentation<!--]--><!----><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></li><!--]--></ul></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->Nuxt is a framework for building web applications that can be rendered both server side using Node.js and client side with Vue.js components. Nuxt is the framework used in Ripple to deliver headless SDP websites that connect to Tide Drupal backends for content.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[--><strong><!--[-->&quot;Nuxt is a fantastic choice for teams building a production-grade product on the web. It aims to bake in performance best practices while maintaining excellent Vue.js DX&quot;<!--]--></strong><!--]--></p><p><!--[-->Addy Osmani - Chief Engineer of Chrome<!--]--></p><!--]--></blockquote><p><!--[-->It is recommended that developers new to Ripple familiarise themselves with Nuxt by reading the documentation site, in particular, the following sections:<!--]--></p><ul><!--[--><li><!--[--><a href="https://nuxt.com/docs/getting-started/introduction" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Introduction · Get Started with Nuxt <!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://nuxt.com/docs/guide/concepts/vuejs-development" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Vue.js Development · Nuxt Concepts<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://nuxt.com/docs/guide/concepts/server-engine" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--> Server Engine · Nuxt Concepts <!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://nuxt.com/docs/guide/directory-structure/nuxt" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->.nuxt/ · Nuxt Directory Structure<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://nuxt.com/docs/guide/going-further/layers" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Authoring Nuxt Layers · Nuxt Advanced<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><p><!--[-->For support and help working with Nuxt please see <a href="https://nuxt.com/docs/community/getting-help" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://nuxt.com/docs/community/getting-help<!--]--><!--]--><!----><!--]--></a> and <a href="https://nuxt.com/support/solutions" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://nuxt.com/support/solutions<!--]--><!--]--><!----><!--]--></a><!--]--></p><p><!--[-->There are a number of recommended resources for learning Nuxt 3 including:<!--]--></p><ul><!--[--><li><!--[--><a href="https://masteringnuxt.com/nuxt3" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://masteringnuxt.com/nuxt3<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://frontendmasters.com/courses/nuxt/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://frontendmasters.com/courses/nuxt/<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://www.youtube.com/watch?v=ww94Jvi8JJo" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.youtube.com/watch?v=ww94Jvi8JJo<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/2.key-concepts/1.nuxt.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/key-concepts/nuxt/_payload.json">[{"state":1,"once":489,"_errors":491,"serverRendered":494,"path":7,"prerenderedAt":495},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":171,"$sdd-globals":191,"$sdd-navigation":193},["ShallowRef",4],["ShallowReactive",5],{"/framework/key-concepts/nuxt":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"links":14,"body":18,"_type":166,"_id":167,"_source":168,"_file":169,"_extension":170},"/framework/key-concepts/nuxt","key-concepts",false,"","Nuxt","Nuxt is the framework used in Ripple to deliver headless SDP websites that connect to Tide Drupal backends for content.","page",[15],{"text":16,"url":17},"Nuxt documentation","https://nuxt.com/",{"type":19,"children":20,"toc":163},"root",[21,29,47,52,109,128,133],{"type":22,"tag":23,"props":24,"children":25},"element","p",{},[26],{"type":27,"value":28},"text","Nuxt is a framework for building web applications that can be rendered both server side using Node.js and client side with Vue.js components. Nuxt is the framework used in Ripple to deliver headless SDP websites that connect to Tide Drupal backends for content.",{"type":22,"tag":30,"props":31,"children":32},"blockquote",{},[33,42],{"type":22,"tag":23,"props":34,"children":35},{},[36],{"type":22,"tag":37,"props":38,"children":39},"strong",{},[40],{"type":27,"value":41},"\"Nuxt is a fantastic choice for teams building a production-grade product on the web. It aims to bake in performance best practices while maintaining excellent Vue.js DX\"",{"type":22,"tag":23,"props":43,"children":44},{},[45],{"type":27,"value":46},"Addy Osmani - Chief Engineer of Chrome",{"type":22,"tag":23,"props":48,"children":49},{},[50],{"type":27,"value":51},"It is recommended that developers new to Ripple familiarise themselves with Nuxt by reading the documentation site, in particular, the following sections:",{"type":22,"tag":53,"props":54,"children":55},"ul",{},[56,69,79,89,99],{"type":22,"tag":57,"props":58,"children":59},"li",{},[60],{"type":22,"tag":61,"props":62,"children":66},"a",{"href":63,"rel":64},"https://nuxt.com/docs/getting-started/introduction",[65],"nofollow",[67],{"type":27,"value":68},"Introduction · Get Started with Nuxt ",{"type":22,"tag":57,"props":70,"children":71},{},[72],{"type":22,"tag":61,"props":73,"children":76},{"href":74,"rel":75},"https://nuxt.com/docs/guide/concepts/vuejs-development",[65],[77],{"type":27,"value":78},"Vue.js Development · Nuxt Concepts",{"type":22,"tag":57,"props":80,"children":81},{},[82],{"type":22,"tag":61,"props":83,"children":86},{"href":84,"rel":85},"https://nuxt.com/docs/guide/concepts/server-engine",[65],[87],{"type":27,"value":88}," Server Engine · Nuxt Concepts ",{"type":22,"tag":57,"props":90,"children":91},{},[92],{"type":22,"tag":61,"props":93,"children":96},{"href":94,"rel":95},"https://nuxt.com/docs/guide/directory-structure/nuxt",[65],[97],{"type":27,"value":98},".nuxt/ · Nuxt Directory Structure",{"type":22,"tag":57,"props":100,"children":101},{},[102],{"type":22,"tag":61,"props":103,"children":106},{"href":104,"rel":105},"https://nuxt.com/docs/guide/going-further/layers",[65],[107],{"type":27,"value":108},"Authoring Nuxt Layers · Nuxt Advanced",{"type":22,"tag":23,"props":110,"children":111},{},[112,114,120,122],{"type":27,"value":113},"For support and help working with Nuxt please see ",{"type":22,"tag":61,"props":115,"children":118},{"href":116,"rel":117},"https://nuxt.com/docs/community/getting-help",[65],[119],{"type":27,"value":116},{"type":27,"value":121}," and ",{"type":22,"tag":61,"props":123,"children":126},{"href":124,"rel":125},"https://nuxt.com/support/solutions",[65],[127],{"type":27,"value":124},{"type":22,"tag":23,"props":129,"children":130},{},[131],{"type":27,"value":132},"There are a number of recommended resources for learning Nuxt 3 including:",{"type":22,"tag":53,"props":134,"children":135},{},[136,145,154],{"type":22,"tag":57,"props":137,"children":138},{},[139],{"type":22,"tag":61,"props":140,"children":143},{"href":141,"rel":142},"https://masteringnuxt.com/nuxt3",[65],[144],{"type":27,"value":141},{"type":22,"tag":57,"props":146,"children":147},{},[148],{"type":22,"tag":61,"props":149,"children":152},{"href":150,"rel":151},"https://frontendmasters.com/courses/nuxt/",[65],[153],{"type":27,"value":150},{"type":22,"tag":57,"props":155,"children":156},{},[157],{"type":22,"tag":61,"props":158,"children":161},{"href":159,"rel":160},"https://www.youtube.com/watch?v=ww94Jvi8JJo",[65],[162],{"type":27,"value":159},{"title":10,"searchDepth":164,"depth":164,"links":165},2,[],"markdown","content:framework:2.key-concepts:1.nuxt.md","content","framework/2.key-concepts/1.nuxt.md","md",["ShallowRef",172],["ShallowReactive",173],{"/framework/key-concepts/nuxt":174},[175,181],{"_path":176,"_dir":10,"_draft":9,"_partial":9,"_locale":10,"title":177,"description":178,"layout":13,"_type":166,"_id":179,"_source":168,"_file":180,"_extension":170},"/framework","Ripple Framework","Ripple framework contains the tools for building SDP sites using the Ripple design system components.","content:framework:1.index.md","framework/1.index.md",{"_path":182,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":183,"description":184,"layout":13,"links":185,"_type":166,"_id":189,"_source":168,"_file":190,"_extension":170},"/framework/key-concepts/nuxt-layers","Layers","Nuxt layers are used to encapsulate Ripple functionality to share and reuse",[186],{"text":187,"url":188},"Nuxt layers documentation","https://nuxt.com/docs/getting-started/layers","content:framework:2.key-concepts:2.nuxt-layers.md","framework/2.key-concepts/2.nuxt-layers.md",["ShallowRef",192],{},[194,199,446],{"title":195,"_path":196,"icon":197,"layout":198},"Ripple Design System","/","carbon:home","home",{"title":200,"_path":201,"children":202},"Design System","/design-system",[203,219,235,264,298],{"title":204,"_path":205,"children":206},"About","/design-system/about",[207,210,213,216],{"title":208,"_path":209,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":211,"_path":212,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":214,"_path":215,"layout":13},"Support","/design-system/about/getting-support",{"title":217,"_path":218,"layout":13},"Contributing","/design-system/about/contributing",{"title":220,"_path":221,"children":222},"Design","/design-system/design",[223,226,229,232],{"title":224,"_path":225,"layout":13},"Getting started","/design-system/design/getting-started",{"title":227,"_path":228,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":230,"_path":231,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":233,"_path":234,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":236,"_path":237,"children":238},"Develop","/design-system/develop",[239,241,243,246],{"title":224,"_path":240,"layout":13},"/design-system/develop/getting-started",{"title":217,"_path":242,"layout":13},"/design-system/develop/contributing",{"title":244,"_path":245,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":247,"_path":248,"children":249,"layout":13},"Usage","/design-system/develop/usage",[250,253,256,258,261],{"title":251,"_path":252,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":254,"_path":255,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":11,"_path":257,"layout":13},"/design-system/develop/usage/nuxt",{"title":259,"_path":260,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":262,"_path":263,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":265,"_path":266,"children":267},"Styles","/design-system/styles",[268,271,274,277,280,283,286,289,292,295],{"title":269,"_path":270,"layout":13},"Colour","/design-system/styles/colour",{"title":272,"_path":273,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":275,"_path":276,"layout":13},"Grid","/design-system/styles/grid",{"title":278,"_path":279,"layout":13},"Icons","/design-system/styles/icons",{"title":281,"_path":282,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":284,"_path":285,"layout":13},"Layout","/design-system/styles/layout",{"title":287,"_path":288,"layout":13},"Logo","/design-system/styles/logo",{"title":290,"_path":291,"layout":13},"Motion","/design-system/styles/motion",{"title":293,"_path":294,"layout":13},"Spacing","/design-system/styles/spacing",{"title":296,"_path":297,"layout":13},"Typography","/design-system/styles/typography",{"title":299,"_path":300,"children":301},"Components","/design-system/components",[302,305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440,443],{"title":303,"_path":304,"layout":13},"Accordion","/design-system/components/accordion",{"title":306,"_path":307,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":309,"_path":310,"layout":13},"Alert","/design-system/components/alert",{"title":312,"_path":313,"layout":13},"Block quote","/design-system/components/block-quote",{"title":315,"_path":316,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":318,"_path":319,"layout":13},"Button","/design-system/components/button",{"title":321,"_path":322,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":324,"_path":325,"layout":13},"Callout","/design-system/components/callout",{"title":327,"_path":328,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":330,"_path":331,"layout":13},"Card","/design-system/components/card",{"title":333,"_path":334,"layout":13},"Carousel","/design-system/components/carousel",{"title":336,"_path":337,"layout":13},"Category grid","/design-system/components/category-grid",{"title":339,"_path":340,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":342,"_path":343,"layout":13},"Chip","/design-system/components/chip",{"title":345,"_path":346,"layout":13},"Contact us","/design-system/components/contact-us",{"title":348,"_path":349,"layout":13},"Date input","/design-system/components/date-input",{"title":351,"_path":352,"layout":13},"Detail list","/design-system/components/detail-list",{"title":354,"_path":355,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":357,"_path":358,"layout":13},"File","/design-system/components/file",{"title":360,"_path":361,"layout":13},"Footer","/design-system/components/footer",{"title":363,"_path":364,"layout":13},"Form","/design-system/components/form",{"title":366,"_path":367,"layout":13},"Form alert","/design-system/components/form-alert",{"title":369,"_path":370,"layout":13},"Header","/design-system/components/header",{"title":372,"_path":373,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":375,"_path":376,"layout":13},"Input field","/design-system/components/input-field",{"title":378,"_path":379,"layout":13},"Key dates","/design-system/components/key-dates",{"title":381,"_path":382,"layout":13},"Media","/design-system/components/media",{"title":384,"_path":385,"layout":13},"Media embed","/design-system/components/media-embed",{"title":387,"_path":388,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":390,"_path":391,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":393,"_path":394,"layout":13},"Option button","/design-system/components/option-button",{"title":396,"_path":397,"layout":13},"Page action","/design-system/components/page-action",{"title":399,"_path":400,"layout":13},"Pagination","/design-system/components/pagination",{"title":402,"_path":403,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":405,"_path":406,"layout":13},"Profile","/design-system/components/profile",{"title":408,"_path":409,"layout":13},"Radio button","/design-system/components/radio-button",{"title":411,"_path":412,"layout":13},"Related links","/design-system/components/related-links",{"title":414,"_path":415,"layout":13},"Results listing","/design-system/components/results-listing",{"title":417,"_path":418,"layout":13},"Search bar","/design-system/components/search-bar",{"title":420,"_path":421,"layout":13},"Skip link","/design-system/components/skip-link",{"title":423,"_path":424,"layout":13},"Social share","/design-system/components/social-share",{"title":426,"_path":427,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":429,"_path":430,"layout":13},"Table","/design-system/components/table",{"title":432,"_path":433,"layout":13},"Tabs","/design-system/components/tabs",{"title":435,"_path":436,"layout":13},"Tag","/design-system/components/tag",{"title":438,"_path":439,"layout":13},"Text area","/design-system/components/text-area",{"title":441,"_path":442,"layout":13},"Timeline","/design-system/components/timeline",{"title":444,"_path":445,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":177,"_path":176,"children":447,"layout":13},[448,449,464,486],{"title":177,"_path":176,"layout":13},{"title":450,"_path":451,"children":452},"Key Concepts","/framework/key-concepts",[453,454,455,458,461],{"title":11,"_path":7,"layout":13},{"title":183,"_path":182,"layout":13},{"title":456,"_path":457,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":459,"_path":460,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":462,"_path":463,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":465,"_path":466,"children":467},"Guides","/framework/guides",[468,471,474,477,480,483],{"title":469,"_path":470,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":472,"_path":473,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":475,"_path":476,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":478,"_path":479,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":481,"_path":482,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":484,"_path":485,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":487,"_path":488,"layout":13},"Core modules","/framework/core-modules",["Reactive",490],["Set"],["Reactive",492],{"module-navigation":493},null,true,1714695151233]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+      rpl-type-p-small"><!--[--><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/migrating" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Migrating from Ripple 1.x</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/new-sites" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Setting up a new site</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/brand-application" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Applying theme and brand</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-content-types" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating content types</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/creating-new-layers" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Creating new layers</span><!--]--></a><!----></li><li class="rpl-vertical-nav__list-item"><a href="/framework/guides/dynamic-components" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block" tabindex="-1"><!--[--><!----><span>Adding a new dynamic component</span><!--]--></a><!----></li><!--]--></ul><!--]--></div></li><li class="rpl-vertical-nav__list-item"><!----><a href="/framework/core-modules" class="rpl-vertical-nav__item rpl-vertical-nav__link rpl-u-focusable-block"><!--[--><!----><span>Core modules</span><!--]--></a></li><!--]--></ul></nav><a href="/design-system/about/what-is-ripple" class="docs-nav-link rpl-type-p-small rpl-u-focusable-block docs-section-link" data-v-18cbb85e data-v-c9c4789e><!----><span data-v-c9c4789e><!--[-->Ripple Design System<!--]--></span><span class="rpl-icon rpl-icon--size-xs rpl-icon--icon-link-external-square-filled rpl-u-margin-r-1" data-v-c9c4789e><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span></a></div><!--]--></aside><main class="docs-main rpl-col-12 rpl-col-9-l"><!--[--><header class="docs-page-header" data-v-3163c6df><h1 class="rpl-type-h1 rpl-u-margin-b-2" data-v-3163c6df>Nuxt</h1><p class="rpl-type-p-large" data-v-3163c6df>Nuxt is the framework used in Ripple to deliver headless SDP websites that connect to Tide Drupal backends for content.</p><ul class="links rpl-u-margin-t-5" data-v-3163c6df><!--[--><li data-v-3163c6df><a href="https://nuxt.com/" class="rpl-text-link rpl-u-focusable-inline docs-link rpl-type-p rpl-type-p" target="_blank" data-v-3163c6df data-v-5d4aedf1><!--[--><!--[--><span class="rpl-icon rpl-icon--size-s rpl-icon--icon-link-external-square-filled docs-link-icon" data-v-5d4aedf1><svg role="presentation"><!----><use xlink:href="#icon-link-external-square-filled"></use></svg></span><!--[-->Nuxt documentation<!--]--><!----><!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></li><!--]--></ul></header><!--]--><div class="docs-content"><!--[--><div class="rpl-content"><!--[--><!--[--><p><!--[-->Nuxt is a framework for building web applications that can be rendered both server side using Node.js and client side with Vue.js components. Nuxt is the framework used in Ripple to deliver headless SDP websites that connect to Tide Drupal backends for content.<!--]--></p><blockquote class="rpl-callout"><!--[--><p><!--[--><strong><!--[-->&quot;Nuxt is a fantastic choice for teams building a production-grade product on the web. It aims to bake in performance best practices while maintaining excellent Vue.js DX&quot;<!--]--></strong><!--]--></p><p><!--[-->Addy Osmani - Chief Engineer of Chrome<!--]--></p><!--]--></blockquote><p><!--[-->It is recommended that developers new to Ripple familiarise themselves with Nuxt by reading the documentation site, in particular, the following sections:<!--]--></p><ul><!--[--><li><!--[--><a href="https://nuxt.com/docs/getting-started/introduction" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Introduction · Get Started with Nuxt <!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://nuxt.com/docs/guide/concepts/vuejs-development" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Vue.js Development · Nuxt Concepts<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://nuxt.com/docs/guide/concepts/server-engine" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[--> Server Engine · Nuxt Concepts <!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://nuxt.com/docs/guide/directory-structure/nuxt" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->.nuxt/ · Nuxt Directory Structure<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://nuxt.com/docs/guide/going-further/layers" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->Authoring Nuxt Layers · Nuxt Advanced<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><p><!--[-->For support and help working with Nuxt please see <a href="https://nuxt.com/docs/community/getting-help" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://nuxt.com/docs/community/getting-help<!--]--><!--]--><!----><!--]--></a> and <a href="https://nuxt.com/support/solutions" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://nuxt.com/support/solutions<!--]--><!--]--><!----><!--]--></a><!--]--></p><p><!--[-->There are a number of recommended resources for learning Nuxt 3 including:<!--]--></p><ul><!--[--><li><!--[--><a href="https://masteringnuxt.com/nuxt3" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://masteringnuxt.com/nuxt3<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://frontendmasters.com/courses/nuxt/" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://frontendmasters.com/courses/nuxt/<!--]--><!--]--><!----><!--]--></a><!--]--></li><li><!--[--><a href="https://www.youtube.com/watch?v=ww94Jvi8JJo" class="rpl-text-link rpl-u-focusable-inline" rel="nofollow"><!--[--><!--[--><!--[-->https://www.youtube.com/watch?v=ww94Jvi8JJo<!--]--><!--]--><!----><!--]--></a><!--]--></li><!--]--></ul><!--]--><!--]--></div><br><a href="https://github.com/dpc-sdp/ripple-framework/edit/develop/docs/content/framework/2.key-concepts/1.nuxt.md" class="rpl-text-link rpl-u-focusable-inline rpl-u-margin-t-12 rpl-type-p" style="display:inline-flex;align-items:center;"><!--[--><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" class="rpl-u-margin-r-1" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 12a1 1 0 0 0-1 1v6a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h6a1 1 0 0 0 0-2H5a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-6a1 1 0 0 0-1-1Zm-15 .76V17a1 1 0 0 0 1 1h4.24a1 1 0 0 0 .71-.29l6.92-6.93L21.71 8a1 1 0 0 0 0-1.42l-4.24-4.29a1 1 0 0 0-1.42 0l-2.82 2.83l-6.94 6.93a1 1 0 0 0-.29.71Zm10.76-8.35l2.83 2.83l-1.42 1.42l-2.83-2.83ZM8 13.17l5.93-5.93l2.83 2.83L10.83 16H8Z"></path></svg> Propose a change to this page on GitHub<!--]--><!----><!--]--></a>. <!--]--></div></main></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--neutral rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/framework/key-concepts/nuxt/_payload.json">[{"state":1,"once":489,"_errors":491,"serverRendered":494,"path":7,"prerenderedAt":495},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":171,"$sdd-globals":191,"$sdd-navigation":193},["ShallowRef",4],["ShallowReactive",5],{"/framework/key-concepts/nuxt":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":11,"description":12,"layout":13,"links":14,"body":18,"_type":166,"_id":167,"_source":168,"_file":169,"_extension":170},"/framework/key-concepts/nuxt","key-concepts",false,"","Nuxt","Nuxt is the framework used in Ripple to deliver headless SDP websites that connect to Tide Drupal backends for content.","page",[15],{"text":16,"url":17},"Nuxt documentation","https://nuxt.com/",{"type":19,"children":20,"toc":163},"root",[21,29,47,52,109,128,133],{"type":22,"tag":23,"props":24,"children":25},"element","p",{},[26],{"type":27,"value":28},"text","Nuxt is a framework for building web applications that can be rendered both server side using Node.js and client side with Vue.js components. Nuxt is the framework used in Ripple to deliver headless SDP websites that connect to Tide Drupal backends for content.",{"type":22,"tag":30,"props":31,"children":32},"blockquote",{},[33,42],{"type":22,"tag":23,"props":34,"children":35},{},[36],{"type":22,"tag":37,"props":38,"children":39},"strong",{},[40],{"type":27,"value":41},"\"Nuxt is a fantastic choice for teams building a production-grade product on the web. It aims to bake in performance best practices while maintaining excellent Vue.js DX\"",{"type":22,"tag":23,"props":43,"children":44},{},[45],{"type":27,"value":46},"Addy Osmani - Chief Engineer of Chrome",{"type":22,"tag":23,"props":48,"children":49},{},[50],{"type":27,"value":51},"It is recommended that developers new to Ripple familiarise themselves with Nuxt by reading the documentation site, in particular, the following sections:",{"type":22,"tag":53,"props":54,"children":55},"ul",{},[56,69,79,89,99],{"type":22,"tag":57,"props":58,"children":59},"li",{},[60],{"type":22,"tag":61,"props":62,"children":66},"a",{"href":63,"rel":64},"https://nuxt.com/docs/getting-started/introduction",[65],"nofollow",[67],{"type":27,"value":68},"Introduction · Get Started with Nuxt ",{"type":22,"tag":57,"props":70,"children":71},{},[72],{"type":22,"tag":61,"props":73,"children":76},{"href":74,"rel":75},"https://nuxt.com/docs/guide/concepts/vuejs-development",[65],[77],{"type":27,"value":78},"Vue.js Development · Nuxt Concepts",{"type":22,"tag":57,"props":80,"children":81},{},[82],{"type":22,"tag":61,"props":83,"children":86},{"href":84,"rel":85},"https://nuxt.com/docs/guide/concepts/server-engine",[65],[87],{"type":27,"value":88}," Server Engine · Nuxt Concepts ",{"type":22,"tag":57,"props":90,"children":91},{},[92],{"type":22,"tag":61,"props":93,"children":96},{"href":94,"rel":95},"https://nuxt.com/docs/guide/directory-structure/nuxt",[65],[97],{"type":27,"value":98},".nuxt/ · Nuxt Directory Structure",{"type":22,"tag":57,"props":100,"children":101},{},[102],{"type":22,"tag":61,"props":103,"children":106},{"href":104,"rel":105},"https://nuxt.com/docs/guide/going-further/layers",[65],[107],{"type":27,"value":108},"Authoring Nuxt Layers · Nuxt Advanced",{"type":22,"tag":23,"props":110,"children":111},{},[112,114,120,122],{"type":27,"value":113},"For support and help working with Nuxt please see ",{"type":22,"tag":61,"props":115,"children":118},{"href":116,"rel":117},"https://nuxt.com/docs/community/getting-help",[65],[119],{"type":27,"value":116},{"type":27,"value":121}," and ",{"type":22,"tag":61,"props":123,"children":126},{"href":124,"rel":125},"https://nuxt.com/support/solutions",[65],[127],{"type":27,"value":124},{"type":22,"tag":23,"props":129,"children":130},{},[131],{"type":27,"value":132},"There are a number of recommended resources for learning Nuxt 3 including:",{"type":22,"tag":53,"props":134,"children":135},{},[136,145,154],{"type":22,"tag":57,"props":137,"children":138},{},[139],{"type":22,"tag":61,"props":140,"children":143},{"href":141,"rel":142},"https://masteringnuxt.com/nuxt3",[65],[144],{"type":27,"value":141},{"type":22,"tag":57,"props":146,"children":147},{},[148],{"type":22,"tag":61,"props":149,"children":152},{"href":150,"rel":151},"https://frontendmasters.com/courses/nuxt/",[65],[153],{"type":27,"value":150},{"type":22,"tag":57,"props":155,"children":156},{},[157],{"type":22,"tag":61,"props":158,"children":161},{"href":159,"rel":160},"https://www.youtube.com/watch?v=ww94Jvi8JJo",[65],[162],{"type":27,"value":159},{"title":10,"searchDepth":164,"depth":164,"links":165},2,[],"markdown","content:framework:2.key-concepts:1.nuxt.md","content","framework/2.key-concepts/1.nuxt.md","md",["ShallowRef",172],["ShallowReactive",173],{"/framework/key-concepts/nuxt":174},[175,181],{"_path":176,"_dir":10,"_draft":9,"_partial":9,"_locale":10,"title":177,"description":178,"layout":13,"_type":166,"_id":179,"_source":168,"_file":180,"_extension":170},"/framework","Ripple Framework","Ripple framework contains the tools for building SDP sites using the Ripple design system components.","content:framework:1.index.md","framework/1.index.md",{"_path":182,"_dir":8,"_draft":9,"_partial":9,"_locale":10,"title":183,"description":184,"layout":13,"links":185,"_type":166,"_id":189,"_source":168,"_file":190,"_extension":170},"/framework/key-concepts/nuxt-layers","Layers","Nuxt layers are used to encapsulate Ripple functionality to share and reuse",[186],{"text":187,"url":188},"Nuxt layers documentation","https://nuxt.com/docs/getting-started/layers","content:framework:2.key-concepts:2.nuxt-layers.md","framework/2.key-concepts/2.nuxt-layers.md",["ShallowRef",192],{},[194,199,446],{"title":195,"_path":196,"icon":197,"layout":198},"Ripple Design System","/","carbon:home","home",{"title":200,"_path":201,"children":202},"Design System","/design-system",[203,219,235,264,298],{"title":204,"_path":205,"children":206},"About","/design-system/about",[207,210,213,216],{"title":208,"_path":209,"layout":13},"What is Ripple?","/design-system/about/what-is-ripple",{"title":211,"_path":212,"layout":13},"Who's it for?","/design-system/about/whos-it-for",{"title":214,"_path":215,"layout":13},"Support","/design-system/about/getting-support",{"title":217,"_path":218,"layout":13},"Contributing","/design-system/about/contributing",{"title":220,"_path":221,"children":222},"Design","/design-system/design",[223,226,229,232],{"title":224,"_path":225,"layout":13},"Getting started","/design-system/design/getting-started",{"title":227,"_path":228,"layout":13},"Our design principles","/design-system/design/our-design-principles",{"title":230,"_path":231,"layout":13},"Design tokens","/design-system/design/design-tokens",{"title":233,"_path":234,"layout":13},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":236,"_path":237,"children":238},"Develop","/design-system/develop",[239,241,243,246],{"title":224,"_path":240,"layout":13},"/design-system/develop/getting-started",{"title":217,"_path":242,"layout":13},"/design-system/develop/contributing",{"title":244,"_path":245,"layout":13},"Theme and brand application","/design-system/develop/theming",{"title":247,"_path":248,"children":249,"layout":13},"Usage","/design-system/develop/usage",[250,253,256,258,261],{"title":251,"_path":252,"layout":13},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":254,"_path":255,"layout":13},"Vue","/design-system/develop/usage/vue",{"title":11,"_path":257,"layout":13},"/design-system/develop/usage/nuxt",{"title":259,"_path":260,"layout":13},"Web components","/design-system/develop/usage/webcomponents",{"title":262,"_path":263,"layout":13},"Styles only","/design-system/develop/usage/css-only",{"title":265,"_path":266,"children":267},"Styles","/design-system/styles",[268,271,274,277,280,283,286,289,292,295],{"title":269,"_path":270,"layout":13},"Colour","/design-system/styles/colour",{"title":272,"_path":273,"layout":13},"Focus state","/design-system/styles/focus-state",{"title":275,"_path":276,"layout":13},"Grid","/design-system/styles/grid",{"title":278,"_path":279,"layout":13},"Icons","/design-system/styles/icons",{"title":281,"_path":282,"layout":13},"Layer styles","/design-system/styles/layer-styles",{"title":284,"_path":285,"layout":13},"Layout","/design-system/styles/layout",{"title":287,"_path":288,"layout":13},"Logo","/design-system/styles/logo",{"title":290,"_path":291,"layout":13},"Motion","/design-system/styles/motion",{"title":293,"_path":294,"layout":13},"Spacing","/design-system/styles/spacing",{"title":296,"_path":297,"layout":13},"Typography","/design-system/styles/typography",{"title":299,"_path":300,"children":301},"Components","/design-system/components",[302,305,308,311,314,317,320,323,326,329,332,335,338,341,344,347,350,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440,443],{"title":303,"_path":304,"layout":13},"Accordion","/design-system/components/accordion",{"title":306,"_path":307,"layout":13},"Acknowledgement","/design-system/components/acknowledgment",{"title":309,"_path":310,"layout":13},"Alert","/design-system/components/alert",{"title":312,"_path":313,"layout":13},"Block quote","/design-system/components/block-quote",{"title":315,"_path":316,"layout":13},"Breadcrumb","/design-system/components/breadcrumb",{"title":318,"_path":319,"layout":13},"Button","/design-system/components/button",{"title":321,"_path":322,"layout":13},"Call to action","/design-system/components/call-to-action",{"title":324,"_path":325,"layout":13},"Callout","/design-system/components/callout",{"title":327,"_path":328,"layout":13},"Campaign banner","/design-system/components/campaign-banner",{"title":330,"_path":331,"layout":13},"Card","/design-system/components/card",{"title":333,"_path":334,"layout":13},"Carousel","/design-system/components/carousel",{"title":336,"_path":337,"layout":13},"Category grid","/design-system/components/category-grid",{"title":339,"_path":340,"layout":13},"Checkbox","/design-system/components/checkbox",{"title":342,"_path":343,"layout":13},"Chip","/design-system/components/chip",{"title":345,"_path":346,"layout":13},"Contact us","/design-system/components/contact-us",{"title":348,"_path":349,"layout":13},"Date input","/design-system/components/date-input",{"title":351,"_path":352,"layout":13},"Detail list","/design-system/components/detail-list",{"title":354,"_path":355,"layout":13},"Dropdown","/design-system/components/dropdown",{"title":357,"_path":358,"layout":13},"File","/design-system/components/file",{"title":360,"_path":361,"layout":13},"Footer","/design-system/components/footer",{"title":363,"_path":364,"layout":13},"Form","/design-system/components/form",{"title":366,"_path":367,"layout":13},"Form alert","/design-system/components/form-alert",{"title":369,"_path":370,"layout":13},"Header","/design-system/components/header",{"title":372,"_path":373,"layout":13},"In-page navigation","/design-system/components/in-page-navigation",{"title":375,"_path":376,"layout":13},"Input field","/design-system/components/input-field",{"title":378,"_path":379,"layout":13},"Key dates","/design-system/components/key-dates",{"title":381,"_path":382,"layout":13},"Media","/design-system/components/media",{"title":384,"_path":385,"layout":13},"Media embed","/design-system/components/media-embed",{"title":387,"_path":388,"layout":13},"Media fullscreen","/design-system/components/media-fullscreen",{"title":390,"_path":391,"layout":13},"Media gallery","/design-system/components/media-gallery",{"title":393,"_path":394,"layout":13},"Option button","/design-system/components/option-button",{"title":396,"_path":397,"layout":13},"Page action","/design-system/components/page-action",{"title":399,"_path":400,"layout":13},"Pagination","/design-system/components/pagination",{"title":402,"_path":403,"layout":13},"Primary navigation","/design-system/components/primary-navigation",{"title":405,"_path":406,"layout":13},"Profile","/design-system/components/profile",{"title":408,"_path":409,"layout":13},"Radio button","/design-system/components/radio-button",{"title":411,"_path":412,"layout":13},"Related links","/design-system/components/related-links",{"title":414,"_path":415,"layout":13},"Results listing","/design-system/components/results-listing",{"title":417,"_path":418,"layout":13},"Search bar","/design-system/components/search-bar",{"title":420,"_path":421,"layout":13},"Skip link","/design-system/components/skip-link",{"title":423,"_path":424,"layout":13},"Social share","/design-system/components/social-share",{"title":426,"_path":427,"layout":13},"Statistics grid","/design-system/components/statistics-grid",{"title":429,"_path":430,"layout":13},"Table","/design-system/components/table",{"title":432,"_path":433,"layout":13},"Tabs","/design-system/components/tabs",{"title":435,"_path":436,"layout":13},"Tag","/design-system/components/tag",{"title":438,"_path":439,"layout":13},"Text area","/design-system/components/text-area",{"title":441,"_path":442,"layout":13},"Timeline","/design-system/components/timeline",{"title":444,"_path":445,"layout":13},"Vertical navigation","/design-system/components/vertical-navigation",{"title":177,"_path":176,"children":447,"layout":13},[448,449,464,486],{"title":177,"_path":176,"layout":13},{"title":450,"_path":451,"children":452},"Key Concepts","/framework/key-concepts",[453,454,455,458,461],{"title":11,"_path":7,"layout":13},{"title":183,"_path":182,"layout":13},{"title":456,"_path":457,"layout":13},"API endpoints","/framework/key-concepts/api-endpoints",{"title":459,"_path":460,"layout":13},"Content types","/framework/key-concepts/content-types",{"title":462,"_path":463,"layout":13},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":465,"_path":466,"children":467},"Guides","/framework/guides",[468,471,474,477,480,483],{"title":469,"_path":470,"layout":13},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":472,"_path":473,"layout":13},"Setting up a new site","/framework/guides/new-sites",{"title":475,"_path":476,"layout":13},"Applying theme and brand","/framework/guides/brand-application",{"title":478,"_path":479,"layout":13},"Creating content types","/framework/guides/creating-content-types",{"title":481,"_path":482,"layout":13},"Creating new layers","/framework/guides/creating-new-layers",{"title":484,"_path":485,"layout":13},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":487,"_path":488,"layout":13},"Core modules","/framework/core-modules",["Reactive",490],["Set"],["Reactive",492],{"module-navigation":493},null,true,1714695649472]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
diff --git a/index.html b/index.html
index 0c8d2733a3..44b49d7087 100644
--- a/index.html
+++ b/index.html
@@ -22,51 +22,51 @@
 <link rel="stylesheet" href="/_nuxt/RplTextLink.7g1ZSSiY.css">
 <link rel="stylesheet" href="/_nuxt/RplExpandable.G47K6rAy.css">
 <link rel="stylesheet" href="/_nuxt/RplPromoCard.U7lb3VqC.css">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.49ZHHvLB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.BWdn4QDn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.3DI1wYHv.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CgXd06ZK.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.cUVXlmIq.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.cfrovusU.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.kobVpNhn.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.NIDikUS0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.nby97MTz.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.jgZZZkZ5.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.o2mWVvok.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/entry.Do8xnxHS.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/document-driven.R0qWc0WJ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocumentDrivenEmpty.-Bd5tvR3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRenderer.CHEOl3j3.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/ContentRendererMarkdown.vue.sDq3Jws6.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplContent.css.7ezTJ87f.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplButton.css.bGBZW0Bs.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplIcon.vue.PZ-X7Qhh.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/AppLayout.vue.hqX4UWMQ.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/nuxt-link.sM27-MT7.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplImage.css.ouJWHfa9.js">
 <link rel="modulepreload" as="script" crossorigin href="/_nuxt/_plugin-vue_export-helper.x3n3nnut.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.ll_eQGN0.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.TWUjSovo.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.4pRwhR7E.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.DMJaxZxB.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.3-aUufTF.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.UNWUUq-8.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/home.p0dB_qIA.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsHeroHeader.PVXBo8Q-.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.btg01fDe.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsHomeSection.gUJpqPBN.js">
-<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsWhatsNew.3ELaYX2l.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplTextLink.css.vnmpcBOe.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplLink.vue.3IdzOFUB.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplList.vue.i5RvVHLA.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/useRippleEvent.Eg1owuZM.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplExpandable.vue.ErcNtea4.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/head.i1ysHgjT.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/home.f8bXHl7K.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsHeroHeader.VJrQvyc0.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/RplPromoCard.vue.pyq2iKcr.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsHomeSection.-8CtU5yK.js">
+<link rel="modulepreload" as="script" crossorigin href="/_nuxt/DocsWhatsNew.iLgRC7ZK.js">
 <link rel="prefetch" as="style" href="/_nuxt/module-listing.CELlW3XU.css">
 <link rel="prefetch" as="style" href="/_nuxt/AppSidebarLayout.qeUuUiMI.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.hP89siY4.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsContentNavigation.UDfK-BX9.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useDocsNavigation.w75JuMbu.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/asyncData.6xpne1x0.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsNavLink.5k-bni1U.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsPageHeader.vbDi0R7z.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsLink.5OmhIBHZ.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.CGE8nz0H.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.aU-pbmdL.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.HmGyaUlR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.1X1oFgOt.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.1q5O7tu6.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/page.ciD6J5zn.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module-listing.zWMX5a25.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsContentNavigation.sYXaW9Re.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useDocsNavigation.a2cLzZKV.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/asyncData.mgwg8A3s.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsNavLink.k4ZwJ1d1.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsPageHeader.J1YDFRG1.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsLink._8mcEyeM.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsCardGrid.PUHkyZXK.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/AppSidebarLayout.vue.6sfT1On1.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/module.ZEpf0cR7.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleNavigation.N74iA2Tc.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/DocsModuleInfo.dxnzvO_K.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/page.dJj1_Sl3.js">
 <link rel="prefetch" as="style" href="/_nuxt/useStudio.6uasHhcj.css">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.ur6OYxmR.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.W4pfov87.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/useStudio.1zk0psWL.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/client-db.lwmN9NLn.js">
 <link rel="prefetch" as="script" crossorigin href="/_nuxt/_commonjsHelpers.5-cIlDoe.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.T0EgPV7K.js">
-<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.YI21l9fK.js">
-<script type="module" src="/_nuxt/entry.49ZHHvLB.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><div class="rpl-alert-container" data-v-a9424485><!--[--><div class="rpl-alert rpl-alert--information rpl-u-screen-only" data-v-a9424485><div class="rpl-alert__inner" role="region" aria-labelledby="alert-message-storybook-alert"><span class="rpl-icon rpl-icon--size-m rpl-icon--icon-information-circle-filled rpl-alert__icon-info" nopad><svg role="presentation"><!----><use xlink:href="#icon-information-circle-filled"></use></svg></span><div class="rpl-alert__message-wrap"><div id="alert-message-storybook-alert" class="rpl-alert__message rpl-type-label rpl-type-weight-bold">These Docs are for Ripple version 2.0. If you are looking for the original Ripple Storybook please click below</div><a href="https://master--5e736ff82649250022dd830c.chromatic.com/" class="rpl-text-link rpl-u-focusable-inline rpl-alert__link rpl-type-p rpl-u-focusable--alt-colour"><!--[--><!--[-->View Ripple 1 storybook<span class="rpl-icon rpl-icon--size-s rpl-icon--icon-arrow-right"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.6 11.1 13.2.4c-.5-.5-1.3-.5-1.8 0l-1.2 1.2c-.5.5-.5 1.4 0 1.9l6.5 6.3H1.3c-.7 0-1.3.6-1.3 1.3v1.8c0 .7.6 1.3 1.3 1.3h15.4l-6.5 6.3c-.5.5-.5 1.4 0 1.9l1.2 1.2c.5.5 1.3.5 1.8 0l10.4-10.7c.5-.5.5-1.3 0-1.8z"></path></svg></span><!--]--><!----><!--]--></a></div><!----></div></div><!--]--></div><!--]--><header class="docs-header" style="" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="router-link-active router-link-exact-active docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><!----></div></div></div><!----></header><!--[--><div class="root" data-v-a9424485 data-v-22759f45><div class="rpl-container inner" data-v-22759f45><div class="rpl-grid" data-v-22759f45><div class="rpl-col-10 rpl-col-7-m" data-v-22759f45><h1 class="rpl-type-h1 rpl-u-margin-b-4" data-v-22759f45>Ripple Design System</h1><p class="rpl-type-p-large" data-v-22759f45>Ripple is the design system for Victorian government digital products</p></div></div></div></div><div class="docs-home-getting-started" data-v-a9424485><div class="rpl-container" data-v-a9424485><div class="docs-home-section" data-v-a9424485 data-v-ff42b386><h2 class="docs-home-section-title rpl-type-h2 rpl-u-margin-b-2" data-cy="page-component-title" data-v-ff42b386>Getting Started</h2><!--[--><div class="rpl-grid" data-v-a9424485><div class="rpl-col-12 rpl-col-6-m" data-v-a9424485><div class="rpl-card rpl-type-p rpl-card--promo rpl-card--link" description="Information for designers using Ripple to create brand Victoria compliant digital experiences." data-v-a9424485><!----><div class="rpl-card__upper"><!--[--><img src="/assets/img/for-designers.png" class="rpl-image rpl-image--fill rpl-image--cover rpl-u-aspect-wide rpl-u-aspect-ultrawide-s rpl-u-aspect-wide-m rpl-card__media" loading="lazy" fetchpriority="auto" alt sizes="sm:768px" style=""><!--]--></div><div class="rpl-card__body"><!--[--><!--]--><!--[--><h3 class="rpl-card__cta rpl-type-h3-fixed" data-cy="title"><a href="/design-system/design/getting-started" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[-->For Designers<!--]--><!----><!--]--></a></h3><!--]--><div class="rpl-card__content" data-cy="content"><!--[--><!--[--><p data-v-a9424485>Information for designers using Ripple to create brand Victoria compliant digital experiences.</p><!--]--><!--]--></div></div><!----></div></div><div class="rpl-col-12 rpl-col-6-m" data-v-a9424485><div class="rpl-card rpl-type-p rpl-card--promo rpl-card--link" description="How to get started implementing Ripple UI components in digital products." data-v-a9424485><!----><div class="rpl-card__upper"><!--[--><img src="/assets/img/for-developers.png" class="rpl-image rpl-image--fill rpl-image--cover rpl-u-aspect-wide rpl-u-aspect-ultrawide-s rpl-u-aspect-wide-m rpl-card__media" loading="lazy" fetchpriority="auto" alt sizes="sm:768px" style=""><!--]--></div><div class="rpl-card__body"><!--[--><!--]--><!--[--><h3 class="rpl-card__cta rpl-type-h3-fixed" data-cy="title"><a href="/design-system/develop/getting-started" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[-->For Developers<!--]--><!----><!--]--></a></h3><!--]--><div class="rpl-card__content" data-cy="content"><!--[--><!--[--><p data-v-a9424485>How to get started implementing Ripple UI components in digital products.</p><!--]--><!--]--></div></div><!----></div></div></div><!--]--></div></div></div><!--]--><div class="docs-layout-content docs-layout-content--grey"><div class="rpl-container"><!--[--><div class="docs-home-section" data-v-a9424485 data-v-ff42b386><h2 class="docs-home-section-title rpl-type-h2 rpl-u-margin-b-2" data-cy="page-component-title" data-v-ff42b386>Find out more</h2><!--[--><div class="rpl-grid" data-v-a9424485><div class="rpl-col-12 rpl-col-6-m rpl-col-4-l" data-v-a9424485><div class="rpl-card rpl-type-p rpl-card--promo rpl-card--link" description="Ripple is a system of reusable styles, components, patterns and tools for creating Victorian government digital experiences." data-v-a9424485><!----><!----><div class="rpl-card__body"><!--[--><!--]--><!--[--><h3 class="rpl-card__cta rpl-type-h3-fixed" data-cy="title"><a href="/design-system/about/what-is-ripple" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[-->About Ripple<!--]--><!----><!--]--></a></h3><!--]--><div class="rpl-card__content" data-cy="content"><!--[--><!--[--><p data-v-a9424485>Ripple is a system of reusable styles, components, patterns and tools for creating Victorian government digital experiences.</p><!--]--><!--]--></div></div><!----></div></div><div class="rpl-col-12 rpl-col-6-m rpl-col-4-l" data-v-a9424485><div class="rpl-card rpl-type-p rpl-card--promo rpl-card--link" description="Ripple is built by government for government to deliver services Victorians trust and rely on." data-v-a9424485><!----><!----><div class="rpl-card__body"><!--[--><!--]--><!--[--><h3 class="rpl-card__cta rpl-type-h3-fixed" data-cy="title"><a href="/design-system/about/whos-it-for" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[-->Who should use it<!--]--><!----><!--]--></a></h3><!--]--><div class="rpl-card__content" data-cy="content"><!--[--><!--[--><p data-v-a9424485>Ripple is built by government for government to deliver services Victorians trust and rely on.</p><!--]--><!--]--></div></div><!----></div></div><div class="rpl-col-12 rpl-col-12-m rpl-col-4-l" data-v-a9424485><div class="rpl-card rpl-type-p rpl-card--promo rpl-card--link" description="The guiding principles that are the foundation of the Ripple Design System." data-v-a9424485><!----><!----><div class="rpl-card__body"><!--[--><!--]--><!--[--><h3 class="rpl-card__cta rpl-type-h3-fixed" data-cy="title"><a href="/design-system/design/our-design-principles" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[-->Design principles<!--]--><!----><!--]--></a></h3><!--]--><div class="rpl-card__content" data-cy="content"><!--[--><!--[--><p data-v-a9424485>The guiding principles that are the foundation of the Ripple Design System.</p><!--]--><!--]--></div></div><!----></div></div></div><!--]--></div><div class="docs-home-section" data-v-a9424485 data-v-ff42b386><h2 class="docs-home-section-title rpl-type-h2 rpl-u-margin-b-2" data-cy="page-component-title" data-v-ff42b386>Using Ripple in SDP sites</h2><!--[--><div class="rpl-grid" style="--rpl-clr-gradient-horizontal:var(--rpl-clr-dark);" data-v-a9424485><div class="rpl-col-12" data-v-a9424485><div class="rpl-card rpl-type-p rpl-card--promo rpl-card--link" description="Ripple framework contains the tools for building SDP sites using Ripple design system components." data-v-a9424485><div class="rpl-card__highlight"></div><!----><div class="rpl-card__body"><!--[--><!--]--><!--[--><h3 class="rpl-card__cta rpl-type-h3-fixed" data-cy="title"><a href="/framework" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[-->Ripple framework<!--]--><!----><!--]--></a></h3><!--]--><div class="rpl-card__content" data-cy="content"><!--[--><!--[--><p data-v-a9424485>Ripple framework contains the tools for building SDP sites using Ripple design system components.</p><!--]--><!--]--></div></div><!----></div></div></div><!--]--></div><div class="docs-home-section" data-v-a9424485 data-v-ff42b386><!----><!--[--><pre class="content-full" data-v-a9424485>{
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-404.7ZxJfF8q.js">
+<link rel="prefetch" as="script" crossorigin href="/_nuxt/error-500.zxG8rMw4.js">
+<script type="module" src="/_nuxt/entry.Do8xnxHS.js" crossorigin></script></head><body><div id="__nuxt"><div><div class="document-driven-page"><!--[--><!----><!----><!----><svg id="rpl-icon-sprite" aria-hidden="true" class="rpl-svg-sprite--hidden"><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-cancel" viewBox="0 0 24 24"><path d="m14.1 12 9.4-9.4c.6-.6.6-1.5 0-2.1S22-.1 21.4.5L12 9.9 2.6.4C2-.1 1-.1.4.4s-.6 1.5 0 2.1L9.9 12 .5 21.4c-.6.6-.6 1.5 0 2.1.2.4.6.5 1 .5s.8-.1 1.1-.4l9.4-9.4 9.4 9.4c.3.3.7.4 1.1.4s.8-.1 1.1-.4c.6-.6.6-1.5 0-2.1L14.1 12z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-check-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.8 8.4-5.5 8.9c-.5.9-1.7 1-2.4.3l-3.3-3.3c-.6-.6-.6-1.6 0-2.2.6-.6 1.6-.6 2.2 0l1.9 1.9 4.5-7.2c.5-.7 1.4-1 2.2-.5.6.4.8 1.4.4 2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-down" viewBox="0 0 24 24"><path d="M11.068 18.895.387 8.214a1.319 1.319 0 0 1 0-1.865l1.245-1.246A1.319 1.319 0 0 1 3.496 5.1L12 13.566 20.505 5.1a1.319 1.319 0 0 1 1.863.002l1.246 1.246c.515.515.515 1.35 0 1.865l-10.68 10.68a1.32 1.32 0 0 1-1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-left" viewBox="0 0 24 24"><path d="M5.104 11.066 15.785.386a1.319 1.319 0 0 1 1.866 0l1.245 1.245c.515.515.516 1.348.003 1.863L10.434 12l8.465 8.505a1.319 1.319 0 0 1-.003 1.863l-1.245 1.246a1.32 1.32 0 0 1-1.866 0L5.105 12.932a1.32 1.32 0 0 1 0-1.866Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-right" viewBox="0 0 24 24"><path d="M18.896 12.931 8.216 23.614a1.319 1.319 0 0 1-1.866 0l-1.246-1.246a1.319 1.319 0 0 1-.002-1.863L13.567 12 5.102 3.495a1.319 1.319 0 0 1 .002-1.863L6.35.385a1.319 1.319 0 0 1 1.865 0l10.681 10.681a1.32 1.32 0 0 1 0 1.865Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-chevron-up" viewBox="0 0 24 24"><path d="m12.933 5.103 10.681 10.681c.515.515.515 1.35 0 1.865l-1.246 1.246a1.32 1.32 0 0 1-1.863.003L12 10.433l-8.504 8.465a1.32 1.32 0 0 1-1.864-.003L.387 17.65a1.319 1.319 0 0 1 0-1.866l10.68-10.68a1.32 1.32 0 0 1 1.866 0Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-current-location" viewBox="0 0 24 24"><path d="m2 11 9 2 2 8.9L22 2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document-lined" viewBox="0 0 24 24"><path d="M15 0H4.2C3.5 0 3 .5 3 1.2v21.6c0 .7.5 1.2 1.2 1.2h15.6c.7 0 1.2-.5 1.2-1.2V6l-6-6zm0 3.4L17.6 6H15V3.4zm3.6 18.2H5.4V2.4h7.2v4.8c0 .7.5 1.2 1.2 1.2h4.8v13.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-document" viewBox="0 0 24 24"><path d="M13.5 6.4V0H4.1C3.5 0 3 .5 3 1.1v21.8c0 .6.5 1.1 1.1 1.1h15.8c.6 0 1.1-.5 1.1-1.1V7.5h-6.4c-.6 0-1.1-.5-1.1-1.1z"></path><path d="M20.7 4.9 16.1.3c-.2-.2-.5-.3-.8-.3H15v6h6v-.3c0-.3-.1-.6-.3-.8z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-download" viewBox="0 0 24 24"><path d="M21.2 20.1H2.8c-.7 0-1.3.6-1.3 1.3v1.3c0 .7.6 1.3 1.3 1.3h18.4c.7 0 1.3-.6 1.3-1.3v-1.3c0-.7-.6-1.3-1.3-1.3zm-9.9-1.5c.4.4 1.1.4 1.5 0l8.3-8.2c.7-.7.2-1.8-.8-1.8h-4.8V1.3c0-.7-.6-1.3-1.3-1.3H9.8c-.7 0-1.3.6-1.3 1.3v7.3H3.7c-1 0-1.5 1.2-.8 1.8l8.4 8.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-10 20.1L4.7 20c-.3 0-.6-.3-.6-.6L4 12.6c0-.3.2-.6.6-.6h.8c.3 0 .6.3.6.6v4.1l3.5-3.5c.2-.2.6-.2.8 0l.6.6c.2.2.2.6 0 .8l-3.5 3.5h4.1c.3 0 .6.3.6.6v.8c-.1.3-.3.6-.7.6zm8.1-8h-.8c-.3 0-.6-.3-.6-.6V7.4l-3.5 3.5c-.2.2-.6.2-.8 0l-.6-.6c-.2-.3-.2-.6 0-.9l3.5-3.5h-4.1c-.3.1-.6-.2-.6-.5v-.8c0-.3.3-.6.6-.6l6.8.1c.3 0 .6.3.6.6l.1 6.8c0 .3-.3.6-.6.6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-enlarge" viewBox="0 0 24 24"><path d="M20.2 4.5c0-.3-.3-.6-.6-.6l-7-.1c-.3-.1-.6.2-.6.5v.8c0 .3.3.6.6.6h4.2l-3.6 3.6c-.2.2-.2.6 0 .9l.6.6c.2.2.6.2.9 0l3.6-3.6v4.2c0 .3.3.6.6.6h.8c.3 0 .6-.3.6-.6l-.1-6.9zm-8.8 13.7H7.2l3.6-3.6c.2-.2.2-.6 0-.9l-.6-.6c-.2-.1-.6-.1-.9.1l-3.6 3.6v-4.2c0-.3-.3-.6-.6-.6h-.8c-.3 0-.6.3-.6.6l.1 7c0 .3.3.6.6.6l7 .1c.3 0 .6-.3.6-.6v-.8c0-.4-.3-.7-.6-.7z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-exclamation-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm0 20c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm2-8c0 1.1-.9 2-2 2s-2-.9-2-2V6c0-1.1.9-2 2-2s2 .9 2 2v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-facebook" viewBox="0 0 24 24"><path d="M15.6 4h2.1V.2c-.3-.1-1.6-.2-3-.2-3 0-5.1 2-5.1 5.6V9H6.3v4.3h3.3V24h4.1V13.3h3.2l.5-4.3h-3.7V6.1c0-1.3.3-2.1 1.9-2.1z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-home" viewBox="0 0 24 24"><path d="M23.4 11.5 13 .5c-.6-.6-1.5-.6-2.1 0L.6 11.4c-.5.5-.8 1.6-.5 2.3.2.7.9.9 1.6.9l1.4.1v7.6c0 1 .6 1.7 1.5 1.7H9c.9 0 1.5-.7 1.5-1.7v-5.8h3v5.8c0 1 .6 1.7 1.5 1.7h4.5c.9 0 1.5-.7 1.5-1.7v-7.6h1.5c.7 0 1.2-.2 1.5-1 .2-.7-.1-1.7-.6-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-information-circle-filled" viewBox="0 0 24 24"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm2.2 17.5c0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2V11c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2v6.5zM12 7.6c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.3-1 2.2-2.2 2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-link-external-square-filled" viewBox="0 0 24 24"><path d="M21.4 0H2.6C1.2 0 0 1.2 0 2.6v18.9C0 22.8 1.2 24 2.6 24h18.9c1.4 0 2.6-1.2 2.6-2.6V2.6C24 1.2 22.8 0 21.4 0zm-.8 10.7c0 1.1-1.4 1.7-2.2.9l-1.7-1.7L6.2 20.4c-.3.3-.7.3-.9 0l-1.7-1.7c-.3-.3-.3-.7 0-.9L14.1 7.3l-1.7-1.7c-.8-.8-.2-2.2.9-2.2h6c.7 0 1.3.6 1.3 1.3v6z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-linkedin" viewBox="0 0 24 24"><path d="M5.4 24h-5V8h5v16zM2.9 5.8C1.3 5.8 0 4.5 0 2.9S1.3 0 2.9 0s2.9 1.3 2.9 2.9-1.3 2.9-2.9 2.9zM19 24v-7.8c0-1.9 0-4.2-2.6-4.2s-3 2-3 4.1V24h-5V8h4.8v2.2h.1c.7-1.3 2.3-2.6 4.7-2.6 5 0 6 3.3 6 7.6V24h-5z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-mail" viewBox="0 0 24 24"><path d="M22.8 3H1.2C.5 3 0 3.5 0 4.2v15.6c0 .7.5 1.2 1.2 1.2h21.6c.7 0 1.2-.5 1.2-1.2V4.2c0-.7-.5-1.2-1.2-1.2zm-2.4 6L12 12.6 3.6 9V6.6l8.4 3.6 8.4-3.6V9z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-phone" viewBox="0 0 24 24"><path d="m23.6 18.3-4-4c-.6-.6-1.6-.6-2.2 0l-3.5 3.5-7.7-7.7 3.5-3.5c.6-.6.6-1.6 0-2.2l-4-4c-.6-.6-1.6-.6-2.2 0L0 4c0 11 9 20 20 20l3.5-3.5c.6-.6.7-1.6.1-2.2z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-pin" viewBox="0 0 24 24"><path d="M12 0C7 0 3 4.1 3 9c0 6.6 9 15 9 15s9-8.4 9-15c0-4.9-4-9-9-9zm0 12.4c-1.9 0-3.4-1.5-3.4-3.4s1.5-3.4 3.4-3.4 3.4 1.5 3.4 3.4-1.5 3.4-3.4 3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-twitter" viewBox="0 0 24 24"><path d="M21.5 7.2v.6c0 6.4-4.9 13.8-14 13.8-2.8 0-5.4-.8-7.6-2.2.4 0 .8.1 1.2.1 2.3 0 4.4-.8 6.1-2.1-2.2 0-4-1.4-4.6-3.4.3 0 .6.1.9.1.4 0 .9-.1 1.3-.2C2.7 13.5 1 11.6 1 9.2c.7.4 1.4.6 2.2.6C1.9 8.9 1 7.4 1 5.7c0-.9.2-1.7.7-2.4 2.4 2.9 6.1 4.9 10.1 5.1-.1-.4-.1-.7-.1-1.1 0-2.7 2.2-4.8 4.9-4.8 1.4 0 2.7.6 3.6 1.5 1.1-.2 2.2-.6 3.1-1.2-.4 1.1-1.1 2.1-2.2 2.7 1-.1 1.9-.4 2.8-.7-.6.8-1.4 1.7-2.4 2.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-view" viewBox="0 0 24 24"><path d="M12 4C6.5 4 1.9 7.4 0 12c1.9 4.7 6.5 8 12 8s10.1-3.3 12-8c-1.9-4.6-6.5-8-12-8zm0 13.7c-3 0-5.5-2.5-5.5-5.6C6.5 8.9 9 6.4 12 6.4s5.5 2.5 5.5 5.6c0 3.1-2.5 5.7-5.5 5.7z"></path><path d="M12 8.6c-1.8 0-3.3 1.5-3.3 3.4s1.5 3.4 3.3 3.4 3.3-1.5 3.3-3.4-1.5-3.4-3.3-3.4z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-whatsapp" viewBox="0 0 24 24"><path d="M12.001 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.954 9.954 0 0 1-5.03-1.355L2.005 22l1.352-4.968A9.953 9.953 0 0 1 2.001 12c0-5.523 4.477-10 10-10ZM8.593 7.3l-.2.008a.961.961 0 0 0-.372.1 1.293 1.293 0 0 0-.294.228c-.12.113-.188.211-.261.306A2.73 2.73 0 0 0 6.9 9.62c.002.49.13.967.33 1.413.409.902 1.082 1.857 1.97 2.742.214.213.424.427.65.626a9.448 9.448 0 0 0 3.84 2.046l.568.087c.185.01.37-.004.556-.013a1.99 1.99 0 0 0 .833-.231 4.83 4.83 0 0 0 .383-.22s.043-.028.125-.09c.135-.1.218-.171.33-.288.083-.086.155-.187.21-.302.078-.163.156-.474.188-.733.024-.198.017-.306.014-.373-.004-.107-.093-.218-.19-.265l-.582-.261s-.87-.379-1.402-.621a.497.497 0 0 0-.176-.041.482.482 0 0 0-.378.127c-.005-.002-.072.055-.795.931a.35.35 0 0 1-.368.13 1.43 1.43 0 0 1-.191-.066c-.124-.052-.167-.072-.252-.108a6.025 6.025 0 0 1-1.575-1.003c-.126-.11-.243-.23-.363-.346a6.297 6.297 0 0 1-1.02-1.268l-.059-.095a.923.923 0 0 1-.102-.205c-.038-.147.061-.265.061-.265s.243-.266.356-.41c.11-.14.203-.276.263-.373.118-.19.155-.385.093-.536-.28-.684-.57-1.365-.868-2.041-.059-.134-.234-.23-.393-.249-.054-.006-.108-.012-.162-.016a3.385 3.385 0 0 0-.403.004l.201-.008Z"></path></symbol></defs><defs><symbol xmlns="http://www.w3.org/2000/svg" id="icon-x" viewBox="0 0 32 32"><path d="M18.635 13.55 30.291 0h-2.763L17.406 11.765 9.323 0H0l12.224 17.79L0 32h2.763l10.688-12.425L21.988 32h9.323L18.635 13.55Zm-3.783 4.396-1.24-1.771L3.758 2.08H8l7.953 11.376 1.24 1.772L27.53 30.014h-4.242l-8.436-12.067Z"></path></symbol></defs></svg><div class="docs-theme--default"><!--[--><div class="rpl-alert-container" data-v-a9424485><!--[--><div class="rpl-alert rpl-alert--information rpl-u-screen-only" data-v-a9424485><div class="rpl-alert__inner" role="region" aria-labelledby="alert-message-storybook-alert"><span class="rpl-icon rpl-icon--size-m rpl-icon--icon-information-circle-filled rpl-alert__icon-info" nopad><svg role="presentation"><!----><use xlink:href="#icon-information-circle-filled"></use></svg></span><div class="rpl-alert__message-wrap"><div id="alert-message-storybook-alert" class="rpl-alert__message rpl-type-label rpl-type-weight-bold">These Docs are for Ripple version 2.0. If you are looking for the original Ripple Storybook please click below</div><a href="https://master--5e736ff82649250022dd830c.chromatic.com/" class="rpl-text-link rpl-u-focusable-inline rpl-alert__link rpl-type-p rpl-u-focusable--alt-colour"><!--[--><!--[-->View Ripple 1 storybook<span class="rpl-icon rpl-icon--size-s rpl-icon--icon-arrow-right"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.6 11.1 13.2.4c-.5-.5-1.3-.5-1.8 0l-1.2 1.2c-.5.5-.5 1.4 0 1.9l6.5 6.3H1.3c-.7 0-1.3.6-1.3 1.3v1.8c0 .7.6 1.3 1.3 1.3h15.4l-6.5 6.3c-.5.5-.5 1.4 0 1.9l1.2 1.2c.5.5 1.3.5 1.8 0l10.4-10.7c.5-.5.5-1.3 0-1.8z"></path></svg></span><!--]--><!----><!--]--></a></div><!----></div></div><!--]--></div><!--]--><header class="docs-header" style="" data-v-ad77f901><div class="docs-header-top" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-inner" data-v-ad77f901><a aria-current="page" href="/" class="router-link-active router-link-exact-active docs-header-logo rpl-u-focusable-outline" data-v-ad77f901><img src="/img/vicgovau-logo.svg" width="106" alt="Victoria government logo" data-v-ad77f901></a><span class="docs-header-title" data-v-ad77f901>Ripple Design System</span></div></div></div><div class="docs-header-bottom" data-v-ad77f901><div class="rpl-container" data-v-ad77f901><div class="docs-header-bottom-inner" data-v-ad77f901><!----></div></div></div><!----></header><!--[--><div class="root" data-v-a9424485 data-v-22759f45><div class="rpl-container inner" data-v-22759f45><div class="rpl-grid" data-v-22759f45><div class="rpl-col-10 rpl-col-7-m" data-v-22759f45><h1 class="rpl-type-h1 rpl-u-margin-b-4" data-v-22759f45>Ripple Design System</h1><p class="rpl-type-p-large" data-v-22759f45>Ripple is the design system for Victorian government digital products</p></div></div></div></div><div class="docs-home-getting-started" data-v-a9424485><div class="rpl-container" data-v-a9424485><div class="docs-home-section" data-v-a9424485 data-v-ff42b386><h2 class="docs-home-section-title rpl-type-h2 rpl-u-margin-b-2" data-cy="page-component-title" data-v-ff42b386>Getting Started</h2><!--[--><div class="rpl-grid" data-v-a9424485><div class="rpl-col-12 rpl-col-6-m" data-v-a9424485><div class="rpl-card rpl-type-p rpl-card--promo rpl-card--link" description="Information for designers using Ripple to create brand Victoria compliant digital experiences." data-v-a9424485><!----><div class="rpl-card__upper"><!--[--><img src="/assets/img/for-designers.png" class="rpl-image rpl-image--fill rpl-image--cover rpl-u-aspect-wide rpl-u-aspect-ultrawide-s rpl-u-aspect-wide-m rpl-card__media" loading="lazy" fetchpriority="auto" alt sizes="sm:768px" style=""><!--]--></div><div class="rpl-card__body"><!--[--><!--]--><!--[--><h3 class="rpl-card__cta rpl-type-h3-fixed" data-cy="title"><a href="/design-system/design/getting-started" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[-->For Designers<!--]--><!----><!--]--></a></h3><!--]--><div class="rpl-card__content" data-cy="content"><!--[--><!--[--><p data-v-a9424485>Information for designers using Ripple to create brand Victoria compliant digital experiences.</p><!--]--><!--]--></div></div><!----></div></div><div class="rpl-col-12 rpl-col-6-m" data-v-a9424485><div class="rpl-card rpl-type-p rpl-card--promo rpl-card--link" description="How to get started implementing Ripple UI components in digital products." data-v-a9424485><!----><div class="rpl-card__upper"><!--[--><img src="/assets/img/for-developers.png" class="rpl-image rpl-image--fill rpl-image--cover rpl-u-aspect-wide rpl-u-aspect-ultrawide-s rpl-u-aspect-wide-m rpl-card__media" loading="lazy" fetchpriority="auto" alt sizes="sm:768px" style=""><!--]--></div><div class="rpl-card__body"><!--[--><!--]--><!--[--><h3 class="rpl-card__cta rpl-type-h3-fixed" data-cy="title"><a href="/design-system/develop/getting-started" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[-->For Developers<!--]--><!----><!--]--></a></h3><!--]--><div class="rpl-card__content" data-cy="content"><!--[--><!--[--><p data-v-a9424485>How to get started implementing Ripple UI components in digital products.</p><!--]--><!--]--></div></div><!----></div></div></div><!--]--></div></div></div><!--]--><div class="docs-layout-content docs-layout-content--grey"><div class="rpl-container"><!--[--><div class="docs-home-section" data-v-a9424485 data-v-ff42b386><h2 class="docs-home-section-title rpl-type-h2 rpl-u-margin-b-2" data-cy="page-component-title" data-v-ff42b386>Find out more</h2><!--[--><div class="rpl-grid" data-v-a9424485><div class="rpl-col-12 rpl-col-6-m rpl-col-4-l" data-v-a9424485><div class="rpl-card rpl-type-p rpl-card--promo rpl-card--link" description="Ripple is a system of reusable styles, components, patterns and tools for creating Victorian government digital experiences." data-v-a9424485><!----><!----><div class="rpl-card__body"><!--[--><!--]--><!--[--><h3 class="rpl-card__cta rpl-type-h3-fixed" data-cy="title"><a href="/design-system/about/what-is-ripple" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[-->About Ripple<!--]--><!----><!--]--></a></h3><!--]--><div class="rpl-card__content" data-cy="content"><!--[--><!--[--><p data-v-a9424485>Ripple is a system of reusable styles, components, patterns and tools for creating Victorian government digital experiences.</p><!--]--><!--]--></div></div><!----></div></div><div class="rpl-col-12 rpl-col-6-m rpl-col-4-l" data-v-a9424485><div class="rpl-card rpl-type-p rpl-card--promo rpl-card--link" description="Ripple is built by government for government to deliver services Victorians trust and rely on." data-v-a9424485><!----><!----><div class="rpl-card__body"><!--[--><!--]--><!--[--><h3 class="rpl-card__cta rpl-type-h3-fixed" data-cy="title"><a href="/design-system/about/whos-it-for" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[-->Who should use it<!--]--><!----><!--]--></a></h3><!--]--><div class="rpl-card__content" data-cy="content"><!--[--><!--[--><p data-v-a9424485>Ripple is built by government for government to deliver services Victorians trust and rely on.</p><!--]--><!--]--></div></div><!----></div></div><div class="rpl-col-12 rpl-col-12-m rpl-col-4-l" data-v-a9424485><div class="rpl-card rpl-type-p rpl-card--promo rpl-card--link" description="The guiding principles that are the foundation of the Ripple Design System." data-v-a9424485><!----><!----><div class="rpl-card__body"><!--[--><!--]--><!--[--><h3 class="rpl-card__cta rpl-type-h3-fixed" data-cy="title"><a href="/design-system/design/our-design-principles" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[-->Design principles<!--]--><!----><!--]--></a></h3><!--]--><div class="rpl-card__content" data-cy="content"><!--[--><!--[--><p data-v-a9424485>The guiding principles that are the foundation of the Ripple Design System.</p><!--]--><!--]--></div></div><!----></div></div></div><!--]--></div><div class="docs-home-section" data-v-a9424485 data-v-ff42b386><h2 class="docs-home-section-title rpl-type-h2 rpl-u-margin-b-2" data-cy="page-component-title" data-v-ff42b386>Using Ripple in SDP sites</h2><!--[--><div class="rpl-grid" style="--rpl-clr-gradient-horizontal:var(--rpl-clr-dark);" data-v-a9424485><div class="rpl-col-12" data-v-a9424485><div class="rpl-card rpl-type-p rpl-card--promo rpl-card--link" description="Ripple framework contains the tools for building SDP sites using Ripple design system components." data-v-a9424485><div class="rpl-card__highlight"></div><!----><div class="rpl-card__body"><!--[--><!--]--><!--[--><h3 class="rpl-card__cta rpl-type-h3-fixed" data-cy="title"><a href="/framework" class="rpl-text-link rpl-u-focusable-inline"><!--[--><!--[-->Ripple framework<!--]--><!----><!--]--></a></h3><!--]--><div class="rpl-card__content" data-cy="content"><!--[--><!--[--><p data-v-a9424485>Ripple framework contains the tools for building SDP sites using Ripple design system components.</p><!--]--><!--]--></div></div><!----></div></div></div><!--]--></div><div class="docs-home-section" data-v-a9424485 data-v-ff42b386><!----><!--[--><pre class="content-full" data-v-a9424485>{
   &quot;message&quot;: &quot;You should use slots with &lt;ContentRenderer&gt;&quot;,
   &quot;value&quot;: {
     &quot;_path&quot;: &quot;/&quot;,
@@ -137,8 +137,8 @@
   },
   &quot;excerpt&quot;: false,
   &quot;tag&quot;: &quot;DocsContent&quot;
-}</pre><!--]--></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/_payload.json">[{"state":1,"once":361,"_errors":363,"serverRendered":365,"path":7,"prerenderedAt":366},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":56,"$sdd-globals":68,"$sdd-navigation":70},["ShallowRef",4],["ShallowReactive",5],{"/":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":8,"title":10,"description":11,"icon":12,"layout":13,"primaryCTA":14,"secondaryCTA":20,"modulesCTA":26,"quickLink1":30,"quickLink2":34,"quickLink3":38,"framework":42,"body":45,"_type":51,"_id":52,"_source":53,"_file":54,"_extension":55},"/","",false,"Ripple Design System","Ripple is the design system for Victorian government digital products","carbon:home","home",{"title":15,"description":16,"image":17,"url":19},"For Designers","Information for designers using Ripple to create brand Victoria compliant digital experiences.",{"src":18},"/assets/img/for-designers.png","/design-system/design/getting-started",{"title":21,"description":22,"image":23,"url":25},"For Developers","How to get started implementing Ripple UI components in digital products.",{"src":24},"/assets/img/for-developers.png","/design-system/develop/getting-started",{"title":27,"description":28,"url":29},"Modules","Paragraph Default. Cards contain actionable content about a single topic. These are usually grouped as similar style sets.","/framework",{"title":31,"description":32,"url":33},"About Ripple","Ripple is a system of reusable styles, components, patterns and tools for creating Victorian government digital experiences.","/design-system/about/what-is-ripple",{"title":35,"description":36,"url":37},"Who should use it","Ripple is built by government for government to deliver services Victorians trust and rely on.","/design-system/about/whos-it-for",{"title":39,"description":40,"url":41},"Design principles","The guiding principles that are the foundation of the Ripple Design System.","/design-system/design/our-design-principles",{"title":43,"description":44,"url":29},"Ripple framework","Ripple framework contains the tools for building SDP sites using Ripple design system components.",{"type":46,"children":47,"toc":48},"root",[],{"title":8,"searchDepth":49,"depth":49,"links":50},2,[],"markdown","content:1.index.md","content","1.index.md","md",["ShallowRef",57],["ShallowReactive",58],{"/":59},[60,61],null,{"_path":33,"_dir":62,"_draft":9,"_partial":9,"_locale":8,"title":63,"description":64,"layout":65,"_type":51,"_id":66,"_source":53,"_file":67,"_extension":55},"about","What is Ripple?","Ripple is the digital design system of the Victorian government","page","content:design-system:1.about:1.what-is-ripple.md","design-system/1.about/1.what-is-ripple.md",["ShallowRef",69],{},[71,72,314],{"title":10,"_path":7,"icon":12,"layout":13},{"title":73,"_path":74,"children":75},"Design System","/design-system",[76,89,103,132,166],{"title":77,"_path":78,"children":79},"About","/design-system/about",[80,81,83,86],{"title":63,"_path":33,"layout":65},{"title":82,"_path":37,"layout":65},"Who's it for?",{"title":84,"_path":85,"layout":65},"Support","/design-system/about/getting-support",{"title":87,"_path":88,"layout":65},"Contributing","/design-system/about/contributing",{"title":90,"_path":91,"children":92},"Design","/design-system/design",[93,95,97,100],{"title":94,"_path":19,"layout":65},"Getting started",{"title":96,"_path":41,"layout":65},"Our design principles",{"title":98,"_path":99,"layout":65},"Design tokens","/design-system/design/design-tokens",{"title":101,"_path":102,"layout":65},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":104,"_path":105,"children":106},"Develop","/design-system/develop",[107,108,110,113],{"title":94,"_path":25,"layout":65},{"title":87,"_path":109,"layout":65},"/design-system/develop/contributing",{"title":111,"_path":112,"layout":65},"Theme and brand application","/design-system/develop/theming",{"title":114,"_path":115,"children":116,"layout":65},"Usage","/design-system/develop/usage",[117,120,123,126,129],{"title":118,"_path":119,"layout":65},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":121,"_path":122,"layout":65},"Vue","/design-system/develop/usage/vue",{"title":124,"_path":125,"layout":65},"Nuxt","/design-system/develop/usage/nuxt",{"title":127,"_path":128,"layout":65},"Web components","/design-system/develop/usage/webcomponents",{"title":130,"_path":131,"layout":65},"Styles only","/design-system/develop/usage/css-only",{"title":133,"_path":134,"children":135},"Styles","/design-system/styles",[136,139,142,145,148,151,154,157,160,163],{"title":137,"_path":138,"layout":65},"Colour","/design-system/styles/colour",{"title":140,"_path":141,"layout":65},"Focus state","/design-system/styles/focus-state",{"title":143,"_path":144,"layout":65},"Grid","/design-system/styles/grid",{"title":146,"_path":147,"layout":65},"Icons","/design-system/styles/icons",{"title":149,"_path":150,"layout":65},"Layer styles","/design-system/styles/layer-styles",{"title":152,"_path":153,"layout":65},"Layout","/design-system/styles/layout",{"title":155,"_path":156,"layout":65},"Logo","/design-system/styles/logo",{"title":158,"_path":159,"layout":65},"Motion","/design-system/styles/motion",{"title":161,"_path":162,"layout":65},"Spacing","/design-system/styles/spacing",{"title":164,"_path":165,"layout":65},"Typography","/design-system/styles/typography",{"title":167,"_path":168,"children":169},"Components","/design-system/components",[170,173,176,179,182,185,188,191,194,197,200,203,206,209,212,215,218,221,224,227,230,233,236,239,242,245,248,251,254,257,260,263,266,269,272,275,278,281,284,287,290,293,296,299,302,305,308,311],{"title":171,"_path":172,"layout":65},"Accordion","/design-system/components/accordion",{"title":174,"_path":175,"layout":65},"Acknowledgement","/design-system/components/acknowledgment",{"title":177,"_path":178,"layout":65},"Alert","/design-system/components/alert",{"title":180,"_path":181,"layout":65},"Block quote","/design-system/components/block-quote",{"title":183,"_path":184,"layout":65},"Breadcrumb","/design-system/components/breadcrumb",{"title":186,"_path":187,"layout":65},"Button","/design-system/components/button",{"title":189,"_path":190,"layout":65},"Call to action","/design-system/components/call-to-action",{"title":192,"_path":193,"layout":65},"Callout","/design-system/components/callout",{"title":195,"_path":196,"layout":65},"Campaign banner","/design-system/components/campaign-banner",{"title":198,"_path":199,"layout":65},"Card","/design-system/components/card",{"title":201,"_path":202,"layout":65},"Carousel","/design-system/components/carousel",{"title":204,"_path":205,"layout":65},"Category grid","/design-system/components/category-grid",{"title":207,"_path":208,"layout":65},"Checkbox","/design-system/components/checkbox",{"title":210,"_path":211,"layout":65},"Chip","/design-system/components/chip",{"title":213,"_path":214,"layout":65},"Contact us","/design-system/components/contact-us",{"title":216,"_path":217,"layout":65},"Date input","/design-system/components/date-input",{"title":219,"_path":220,"layout":65},"Detail list","/design-system/components/detail-list",{"title":222,"_path":223,"layout":65},"Dropdown","/design-system/components/dropdown",{"title":225,"_path":226,"layout":65},"File","/design-system/components/file",{"title":228,"_path":229,"layout":65},"Footer","/design-system/components/footer",{"title":231,"_path":232,"layout":65},"Form","/design-system/components/form",{"title":234,"_path":235,"layout":65},"Form alert","/design-system/components/form-alert",{"title":237,"_path":238,"layout":65},"Header","/design-system/components/header",{"title":240,"_path":241,"layout":65},"In-page navigation","/design-system/components/in-page-navigation",{"title":243,"_path":244,"layout":65},"Input field","/design-system/components/input-field",{"title":246,"_path":247,"layout":65},"Key dates","/design-system/components/key-dates",{"title":249,"_path":250,"layout":65},"Media","/design-system/components/media",{"title":252,"_path":253,"layout":65},"Media embed","/design-system/components/media-embed",{"title":255,"_path":256,"layout":65},"Media fullscreen","/design-system/components/media-fullscreen",{"title":258,"_path":259,"layout":65},"Media gallery","/design-system/components/media-gallery",{"title":261,"_path":262,"layout":65},"Option button","/design-system/components/option-button",{"title":264,"_path":265,"layout":65},"Page action","/design-system/components/page-action",{"title":267,"_path":268,"layout":65},"Pagination","/design-system/components/pagination",{"title":270,"_path":271,"layout":65},"Primary navigation","/design-system/components/primary-navigation",{"title":273,"_path":274,"layout":65},"Profile","/design-system/components/profile",{"title":276,"_path":277,"layout":65},"Radio button","/design-system/components/radio-button",{"title":279,"_path":280,"layout":65},"Related links","/design-system/components/related-links",{"title":282,"_path":283,"layout":65},"Results listing","/design-system/components/results-listing",{"title":285,"_path":286,"layout":65},"Search bar","/design-system/components/search-bar",{"title":288,"_path":289,"layout":65},"Skip link","/design-system/components/skip-link",{"title":291,"_path":292,"layout":65},"Social share","/design-system/components/social-share",{"title":294,"_path":295,"layout":65},"Statistics grid","/design-system/components/statistics-grid",{"title":297,"_path":298,"layout":65},"Table","/design-system/components/table",{"title":300,"_path":301,"layout":65},"Tabs","/design-system/components/tabs",{"title":303,"_path":304,"layout":65},"Tag","/design-system/components/tag",{"title":306,"_path":307,"layout":65},"Text area","/design-system/components/text-area",{"title":309,"_path":310,"layout":65},"Timeline","/design-system/components/timeline",{"title":312,"_path":313,"layout":65},"Vertical navigation","/design-system/components/vertical-navigation",{"title":315,"_path":29,"children":316,"layout":65},"Ripple Framework",[317,318,336,358],{"title":315,"_path":29,"layout":65},{"title":319,"_path":320,"children":321},"Key Concepts","/framework/key-concepts",[322,324,327,330,333],{"title":124,"_path":323,"layout":65},"/framework/key-concepts/nuxt",{"title":325,"_path":326,"layout":65},"Layers","/framework/key-concepts/nuxt-layers",{"title":328,"_path":329,"layout":65},"API endpoints","/framework/key-concepts/api-endpoints",{"title":331,"_path":332,"layout":65},"Content types","/framework/key-concepts/content-types",{"title":334,"_path":335,"layout":65},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":337,"_path":338,"children":339},"Guides","/framework/guides",[340,343,346,349,352,355],{"title":341,"_path":342,"layout":65},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":344,"_path":345,"layout":65},"Setting up a new site","/framework/guides/new-sites",{"title":347,"_path":348,"layout":65},"Applying theme and brand","/framework/guides/brand-application",{"title":350,"_path":351,"layout":65},"Creating content types","/framework/guides/creating-content-types",{"title":353,"_path":354,"layout":65},"Creating new layers","/framework/guides/creating-new-layers",{"title":356,"_path":357,"layout":65},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":359,"_path":360,"layout":65},"Core modules","/framework/core-modules",["Reactive",362],["Set"],["Reactive",364],{},true,1714695147306]</script>
-<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695122636,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
+}</pre><!--]--></div><!--]--></div></div><!--[--><!--]--><footer class="rpl-footer rpl-footer--default rpl-u-screen-only" data-component-type="site-footer"><div class="rpl-container"><nav class="rpl-footer__nav" aria-label="Footer navigation"><!--[--><!--]--></nav></div><div class="rpl-footer__custom-content"><div class="rpl-container"><!--[--><div class="rpl-acknowledgement rpl-u-screen-only"><div class="rpl-acknowledgement__flags"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cg%20clip-path=&#39;url(%23clip0_7045_41129)&#39;%3e%3cpath%20d=&#39;M200%200H0V70H200V0Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M200%2070H0V140H200V70Z&#39;%20fill=&#39;%23CC0000&#39;/%3e%3cpath%20d=&#39;M100%20105C119.079%20105%20134.545%2089.33%20134.545%2070C134.545%2050.67%20119.079%2035%20100%2035C80.9211%2035%2065.4545%2050.67%2065.4545%2070C65.4545%2089.33%2080.9211%20105%20100%20105Z&#39;%20fill=&#39;%23FFFF00&#39;/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id=&#39;clip0_7045_41129&#39;%3e%3crect%20width=&#39;200&#39;%20height=&#39;140&#39;%20fill=&#39;white&#39;/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e" alt="Aboriginal flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"><img src="data:image/svg+xml,%3csvg%20width=&#39;200&#39;%20height=&#39;140&#39;%20viewBox=&#39;0%200%20200%20140&#39;%20fill=&#39;none&#39;%20xmlns=&#39;http://www.w3.org/2000/svg&#39;%3e%3cpath%20d=&#39;M201%200H0V24.2665H201V0Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%20115.733H-1.52588e-05V140H201V115.733Z&#39;%20fill=&#39;%23009966&#39;/%3e%3cpath%20d=&#39;M201%2031.2666H-1.52588e-05V108.733H201V31.2666Z&#39;%20fill=&#39;%23000099&#39;/%3e%3cpath%20d=&#39;M201%2024.2665H-1.52588e-05V31.2666H201V24.2665Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M7.62939e-05%20115.734L201%20115.734V108.734L7.62939e-05%20108.734V115.734Z&#39;%20fill=&#39;black&#39;/%3e%3cpath%20d=&#39;M100.501%2079.1032L92.2294%2085.3954L95.3698%2075.1883L87.118%2068.8682L97.3294%2068.8533L100.501%2058.6561L103.671%2068.8533L113.882%2068.8682L105.63%2075.1883L108.771%2085.3954L100.501%2079.1032Z&#39;%20fill=&#39;white&#39;/%3e%3cpath%20d=&#39;M125.855%2094.1751C125.945%2093.9447%20126.022%2093.7257%20126.117%2093.5133C127.281%2090.922%20128.359%2088.2962%20129.295%2085.6094C130.733%2081.4756%20131.849%2077.2594%20132.491%2072.923C132.78%2070.9672%20132.936%2068.9949%20132.954%2067.021C132.994%2062.6089%20132.36%2058.3104%20130.719%2054.1897C128.919%2049.6739%20126.45%2046.2183%20122.82%2043.0393C119.959%2040.5336%20116.763%2038.5531%20113.353%2036.9101C110.603%2035.5848%20107.087%2034.0604%20103.948%2033.2487L100.502%2048.133L97.0567%2033.2487C93.918%2034.0604%2090.402%2035.5848%2087.6519%2036.9101C84.2421%2038.5531%2081.0463%2040.5336%2078.1852%2043.0393C74.5549%2046.2183%2072.0841%2049.6723%2070.2861%2054.1897C68.6449%2058.3104%2068.0097%2062.6106%2068.0505%2067.021C68.0684%2068.9949%2068.2252%2070.9672%2068.5143%2072.923C69.1544%2077.261%2070.2698%2081.4772%2071.7101%2085.6094C72.6459%2088.2945%2073.7237%2090.9204%2074.888%2093.5133C74.9828%2093.7241%2075.0595%2093.9447%2075.1493%2094.1751C74.9648%2094.3678%2061.8971%20106.787%2061.8971%20106.787L85.8981%2097.9139L85.9062%2065.8867C85.9062%2065.8867%2086.014%2065.6184%2086.2524%2065.2825C87.6127%2063.358%2089.1984%2061.6557%2091.1222%2060.2942C93.5832%2058.5524%2096.2352%2057.4971%2099.1159%2057.2617C99.5732%2057.2239%20100.037%2057.2074%20100.506%2057.2123C100.974%2057.2074%20101.438%2057.2255%20101.895%2057.2617C104.776%2057.4971%20107.428%2058.5524%20109.889%2060.2942C111.811%2061.6557%20113.397%2063.358%20114.759%2065.2825C114.997%2065.6184%20115.105%2065.8867%20115.105%2065.8867L115.113%2097.9139L139.114%20106.787C139.114%20106.787%20126.04%2094.3694%20125.855%2094.1751Z&#39;%20fill=&#39;white&#39;/%3e%3c/svg%3e" alt="Torres Strait Islander flag" width="55" height="38" class="rpl-image rpl-image--cover rpl-acknowledgement__flag" loading="lazy" fetchpriority="auto"></div><p class="rpl-acknowledgement__message rpl-type-p rpl-type-weight-bold">The Victorian Government acknowledges Aboriginal and Torres Strait Islander people as the Traditional Custodians of the land and acknowledges and pays respect to their Elders, past and present.</p></div><p class="rpl-u-margin-t-6 rpl-type-label-small"> This site is powered by <a href="https://www.netlify.com/" class="rpl-text-link rpl-u-focusable-inline" target="_blank"><!--[--><!--[-->Netlify<!--]--><span class="rpl-u-visually-hidden"> (opens in a new window) </span><!--]--></a></p><!--]--><!----></div></div><div class="rpl-container"><div class="rpl-footer-bottom"><div class="rpl-footer-bottom__links"><ul class="rpl-footer-core-links"><!--[--><!--]--></ul><div class="rpl-type-label-small"><!--[--><p>© Copyright State Government of Victoria</p><!--]--></div></div><div class="rpl-footer-bottom__branding"><!--[--><!--]--><a href="https://vic.gov.au" class="rpl-footer-logo-link rpl-u-focusable-outline rpl-u-focusable-outline--no-border rpl-u-focusable--alt-colour"><!--[--><span class="rpl-u-visually-hidden">Victoria government home</span><svg viewBox="0 0 533 302" class="rpl-footer-vic-gov-logo"><path d="M322.425 111.778c9.459 0 17.265 7.729 17.265 17.093 0 9.363-7.806 17.093-17.265 17.093-9.463 0-17.273-7.73-17.273-17.093 0-9.364 7.81-17.093 17.273-17.093zm0 52.734c20.481 0 36.92-15.367 36.92-35.64 0-20.276-16.439-35.64-36.92-35.64-20.489 0-36.928 15.364-36.928 35.64 0 20.273 16.44 35.64 36.928 35.64m77.487-36.914h-12.585v-16.093h12.585c4.223 0 6.98 4.73 6.98 8.093 0 3.364-2.757 8-6.98 8zm14.14 12.457c6.619-4.545 11.856-11.274 11.856-20.457 0-14.275-11.488-24.822-25.996-24.822h-31.323v68.192h18.738v-18.55h8.82l8.544 18.55h21.03l-11.669-22.913m41.957-45.278h-18.732v68.191h18.732v-68.19m36.448 44.271 5.813-13.274h.39l5.811 13.274zm2.493-44.281-31.587 68.196h20.087l3.298-7.727h23.432l3.3 7.727h20.085l-31.587-68.196h-7.028m-350.547 67.598H125.27V95.392h19.133zm99.485.602h18.736v-51.462h18.826V94.777H236.1L280.153-.287H-.001l44.337 95.68h20.671l16.962 36.603 16.962-36.603h20.71l-31.034 66.973H75.371l64.703 139.632 66.197-142.852a34.738 34.738 0 0 1-17.45 4.678c-20.002 0-35.895-15.09-35.895-35.005 0-19.916 15.893-35.007 35.895-35.007 12.77 0 23.931 6.878 30.002 17.06l-15.626 9.375c-2.948-4.819-8.304-8.218-14.376-8.218-9.286 0-16.787 7.595-16.787 16.79s7.501 16.79 16.787 16.79c6.072 0 11.428-3.306 14.376-8.217l10.294 6.176 14.857-32.062h15.54v51.462m11.102 56.296c-4.385 0-8.404-1.704-10.864-3.677l-3.533 5.48c3.654 2.948 9.209 4.459 14.373 4.459 7.334 0 13.96-3.58 13.96-11.11 0-5.945-4.773-8.55-10.867-9.549l-1.922-.316c-4.093-.684-7.042-1.437-7.042-3.949 0-2.58 2.703-4.09 6.53-4.09 3.726 0 6.99 1.24 9.671 2.896l3.216-5.552c-4.287-2.559-8.26-3.632-13.035-3.632-7.26 0-13.593 3.7-13.593 10.816 0 6.164 4.384 8.82 10.402 9.772l2.169.34c4.75.754 7.236 1.633 7.236 3.994 0 2.632-2.924 4.118-6.701 4.118m37.028 3.776-2.341-4.97c-1.29.781-2.923 1.534-4.434 1.534-1.975 0-3.53-1.073-3.53-4.017v-8.625h8.548v-5.651h-8.549v-7.017h-6.36v7.017h-4.557v5.651h4.557v9.135c0 6.116 2.994 9.429 8.842 9.429 3.365 0 5.75-1.076 7.824-2.487m13.71-3.437c-3.728 0-6.09-2.897-6.09-6.501 0-3.604 2.362-6.505 6.09-6.505 3.632 0 6.095 2.78 6.095 6.505 0 3.73-2.463 6.5-6.095 6.5zm12.113 5.316V201.31h-6.216v2.6c-1.56-1.922-3.823-3.235-7.068-3.235-6.504 0-11.424 5.338-11.424 12.425 0 7.09 4.92 12.42 11.424 12.42 3.245 0 5.536-1.31 7.068-3.211v2.608h6.216m16.751.609c3.369 0 5.75-1.076 7.828-2.487l-2.341-4.969c-1.292.781-2.925 1.534-4.438 1.534-1.972 0-3.528-1.073-3.528-4.017v-8.625h8.548v-5.651h-8.548v-7.017h-6.361v7.017h-4.556v5.651h4.556v9.135c0 6.116 2.992 9.429 8.84 9.429m20.83-19.367c2.728 0 4.556 1.705 5.139 4.726h-10.454c.563-2.923 2.32-4.726 5.315-4.726zm6.7 11.691c-1.707 1.44-3.922 2.265-5.972 2.265-2.993 0-5.383-1.482-6.063-4.896h16.737c.07-.535.119-1.414.119-2.144-.02-7.356-4.675-12.4-11.473-12.4-7.064 0-11.939 5.068-11.939 12.495 0 7.436 5.02 12.356 12.257 12.356 3.967 0 7.384-1.125 10.058-3.58l-3.723-4.096M259.23 249.834v5.673h8.672c-.9 4.849-4.14 7.53-9.695 7.53-5.897 0-10.646-4.362-10.646-11.327 0-6.65 4.53-11.23 10.77-11.23 3.482 0 6.307 1.36 8.23 3.58l4.9-4.8c-3.021-3.293-7.53-5.24-12.938-5.24-10.474 0-18.003 7.382-18.003 17.69 0 11.012 8.382 17.66 17.833 17.66 9.67 0 16.664-7.284 16.664-17.612 0-.636-.024-1.268-.098-1.924h-15.69m31.737 13.616c-3.58 0-6.261-2.677-6.261-6.503 0-3.825 2.682-6.509 6.26-6.509 3.585 0 6.286 2.684 6.286 6.51 0 3.825-2.7 6.502-6.285 6.502zm0-18.929c-7.334 0-12.742 5.313-12.742 12.426 0 7.115 5.408 12.424 12.742 12.424 7.36 0 12.79-5.31 12.79-12.424 0-7.113-5.43-12.426-12.79-12.426m26.459 17.541-6.12-16.905h-6.918l9.33 23.606h7.335l9.233-23.606h-6.7l-6.16 16.905m20.091-7.332c.562-2.924 2.312-4.725 5.313-4.725 2.73 0 4.55 1.705 5.14 4.726zm5.36-10.209c-7.068 0-11.937 5.067-11.937 12.498 0 7.43 5.021 12.352 12.251 12.352 3.973 0 7.384-1.121 10.064-3.58l-3.73-4.095c-1.702 1.438-3.924 2.268-5.966 2.268-2.992 0-5.383-1.486-6.064-4.898h16.732c.077-.536.125-1.411.125-2.144-.028-7.358-4.681-12.4-11.474-12.4m21.85 3.214v-2.58h-6.167v23.607h6.362V255.9c0-3.51 2.02-5.313 4.966-5.313 1.291 0 2.805.292 3.855.757l.945-6.308c-.876-.32-1.945-.515-3.314-.515-2.895 0-5.16 1-6.647 3.215m26.455-3.215c-2.682 0-5.264.902-6.945 3.41v-2.774h-6.189v23.606h6.356v-12.938c0-3.556 2.27-5.335 5-5.335 2.897 0 4.604 1.875 4.604 5.287v12.986h6.355v-15.032c0-5.48-3.827-9.21-9.18-9.21m43.622 0c-3.09 0-6.188 1.048-8.014 4.044-1.585-2.508-4.383-4.044-7.793-4.044-2.682 0-5.265.902-6.946 3.41v-2.774h-6.19v23.606h6.358v-12.938c0-3.556 2.27-5.335 5-5.335 2.896 0 4.604 1.875 4.604 5.287v12.986h6.356v-12.938c0-3.556 2.263-5.335 4.993-5.335 2.875 0 4.604 1.875 4.604 5.287v12.986h6.335v-15.032c0-5.48-3.751-9.21-9.307-9.21m19.925 10.209c.556-2.924 2.313-4.725 5.307-4.725 2.729 0 4.556 1.705 5.14 4.726zm5.355-10.209c-7.064 0-11.938 5.067-11.938 12.498 0 7.43 5.021 12.352 12.257 12.352 3.973 0 7.383-1.121 10.064-3.58l-3.73-4.095c-1.708 1.438-3.923 2.268-5.965 2.268-3 0-5.39-1.486-6.07-4.898h16.738c.07-.536.118-1.411.118-2.144-.02-7.358-4.674-12.4-11.474-12.4m28.815-.001c-2.672 0-5.257.902-6.938 3.41v-2.774h-6.188v23.606h6.355v-12.938c0-3.556 2.265-5.335 4.993-5.335 2.903 0 4.604 1.875 4.604 5.287v12.986h6.363v-15.032c0-5.48-3.826-9.21-9.189-9.21m26.552 18.929c-1.972 0-3.535-1.07-3.535-4.018v-8.626h8.557v-5.65h-8.557v-7.019h-6.355v7.02h-4.557v5.649h4.557v9.136c0 6.116 2.993 9.429 8.841 9.429 3.362 0 5.752-1.073 7.82-2.486l-2.333-4.97c-1.29.781-2.923 1.535-4.438 1.535"></path></svg><!--]--></a></div></div></div></footer></div><!--]--></div></div></div><script type="application/json" id="__NUXT_DATA__" data-ssr="true" data-src="/_payload.json">[{"state":1,"once":361,"_errors":363,"serverRendered":365,"path":7,"prerenderedAt":366},["Reactive",2],{"$sdd-pages":3,"$sdd-surrounds":56,"$sdd-globals":68,"$sdd-navigation":70},["ShallowRef",4],["ShallowReactive",5],{"/":6},{"_path":7,"_dir":8,"_draft":9,"_partial":9,"_locale":8,"title":10,"description":11,"icon":12,"layout":13,"primaryCTA":14,"secondaryCTA":20,"modulesCTA":26,"quickLink1":30,"quickLink2":34,"quickLink3":38,"framework":42,"body":45,"_type":51,"_id":52,"_source":53,"_file":54,"_extension":55},"/","",false,"Ripple Design System","Ripple is the design system for Victorian government digital products","carbon:home","home",{"title":15,"description":16,"image":17,"url":19},"For Designers","Information for designers using Ripple to create brand Victoria compliant digital experiences.",{"src":18},"/assets/img/for-designers.png","/design-system/design/getting-started",{"title":21,"description":22,"image":23,"url":25},"For Developers","How to get started implementing Ripple UI components in digital products.",{"src":24},"/assets/img/for-developers.png","/design-system/develop/getting-started",{"title":27,"description":28,"url":29},"Modules","Paragraph Default. Cards contain actionable content about a single topic. These are usually grouped as similar style sets.","/framework",{"title":31,"description":32,"url":33},"About Ripple","Ripple is a system of reusable styles, components, patterns and tools for creating Victorian government digital experiences.","/design-system/about/what-is-ripple",{"title":35,"description":36,"url":37},"Who should use it","Ripple is built by government for government to deliver services Victorians trust and rely on.","/design-system/about/whos-it-for",{"title":39,"description":40,"url":41},"Design principles","The guiding principles that are the foundation of the Ripple Design System.","/design-system/design/our-design-principles",{"title":43,"description":44,"url":29},"Ripple framework","Ripple framework contains the tools for building SDP sites using Ripple design system components.",{"type":46,"children":47,"toc":48},"root",[],{"title":8,"searchDepth":49,"depth":49,"links":50},2,[],"markdown","content:1.index.md","content","1.index.md","md",["ShallowRef",57],["ShallowReactive",58],{"/":59},[60,61],null,{"_path":33,"_dir":62,"_draft":9,"_partial":9,"_locale":8,"title":63,"description":64,"layout":65,"_type":51,"_id":66,"_source":53,"_file":67,"_extension":55},"about","What is Ripple?","Ripple is the digital design system of the Victorian government","page","content:design-system:1.about:1.what-is-ripple.md","design-system/1.about/1.what-is-ripple.md",["ShallowRef",69],{},[71,72,314],{"title":10,"_path":7,"icon":12,"layout":13},{"title":73,"_path":74,"children":75},"Design System","/design-system",[76,89,103,132,166],{"title":77,"_path":78,"children":79},"About","/design-system/about",[80,81,83,86],{"title":63,"_path":33,"layout":65},{"title":82,"_path":37,"layout":65},"Who's it for?",{"title":84,"_path":85,"layout":65},"Support","/design-system/about/getting-support",{"title":87,"_path":88,"layout":65},"Contributing","/design-system/about/contributing",{"title":90,"_path":91,"children":92},"Design","/design-system/design",[93,95,97,100],{"title":94,"_path":19,"layout":65},"Getting started",{"title":96,"_path":41,"layout":65},"Our design principles",{"title":98,"_path":99,"layout":65},"Design tokens","/design-system/design/design-tokens",{"title":101,"_path":102,"layout":65},"Theming guidance for designers","/design-system/design/theming-guidance-for-designers",{"title":104,"_path":105,"children":106},"Develop","/design-system/develop",[107,108,110,113],{"title":94,"_path":25,"layout":65},{"title":87,"_path":109,"layout":65},"/design-system/develop/contributing",{"title":111,"_path":112,"layout":65},"Theme and brand application","/design-system/develop/theming",{"title":114,"_path":115,"children":116,"layout":65},"Usage","/design-system/develop/usage",[117,120,123,126,129],{"title":118,"_path":119,"layout":65},"Access to Github Packages","/design-system/develop/usage/access-to-github-packages",{"title":121,"_path":122,"layout":65},"Vue","/design-system/develop/usage/vue",{"title":124,"_path":125,"layout":65},"Nuxt","/design-system/develop/usage/nuxt",{"title":127,"_path":128,"layout":65},"Web components","/design-system/develop/usage/webcomponents",{"title":130,"_path":131,"layout":65},"Styles only","/design-system/develop/usage/css-only",{"title":133,"_path":134,"children":135},"Styles","/design-system/styles",[136,139,142,145,148,151,154,157,160,163],{"title":137,"_path":138,"layout":65},"Colour","/design-system/styles/colour",{"title":140,"_path":141,"layout":65},"Focus state","/design-system/styles/focus-state",{"title":143,"_path":144,"layout":65},"Grid","/design-system/styles/grid",{"title":146,"_path":147,"layout":65},"Icons","/design-system/styles/icons",{"title":149,"_path":150,"layout":65},"Layer styles","/design-system/styles/layer-styles",{"title":152,"_path":153,"layout":65},"Layout","/design-system/styles/layout",{"title":155,"_path":156,"layout":65},"Logo","/design-system/styles/logo",{"title":158,"_path":159,"layout":65},"Motion","/design-system/styles/motion",{"title":161,"_path":162,"layout":65},"Spacing","/design-system/styles/spacing",{"title":164,"_path":165,"layout":65},"Typography","/design-system/styles/typography",{"title":167,"_path":168,"children":169},"Components","/design-system/components",[170,173,176,179,182,185,188,191,194,197,200,203,206,209,212,215,218,221,224,227,230,233,236,239,242,245,248,251,254,257,260,263,266,269,272,275,278,281,284,287,290,293,296,299,302,305,308,311],{"title":171,"_path":172,"layout":65},"Accordion","/design-system/components/accordion",{"title":174,"_path":175,"layout":65},"Acknowledgement","/design-system/components/acknowledgment",{"title":177,"_path":178,"layout":65},"Alert","/design-system/components/alert",{"title":180,"_path":181,"layout":65},"Block quote","/design-system/components/block-quote",{"title":183,"_path":184,"layout":65},"Breadcrumb","/design-system/components/breadcrumb",{"title":186,"_path":187,"layout":65},"Button","/design-system/components/button",{"title":189,"_path":190,"layout":65},"Call to action","/design-system/components/call-to-action",{"title":192,"_path":193,"layout":65},"Callout","/design-system/components/callout",{"title":195,"_path":196,"layout":65},"Campaign banner","/design-system/components/campaign-banner",{"title":198,"_path":199,"layout":65},"Card","/design-system/components/card",{"title":201,"_path":202,"layout":65},"Carousel","/design-system/components/carousel",{"title":204,"_path":205,"layout":65},"Category grid","/design-system/components/category-grid",{"title":207,"_path":208,"layout":65},"Checkbox","/design-system/components/checkbox",{"title":210,"_path":211,"layout":65},"Chip","/design-system/components/chip",{"title":213,"_path":214,"layout":65},"Contact us","/design-system/components/contact-us",{"title":216,"_path":217,"layout":65},"Date input","/design-system/components/date-input",{"title":219,"_path":220,"layout":65},"Detail list","/design-system/components/detail-list",{"title":222,"_path":223,"layout":65},"Dropdown","/design-system/components/dropdown",{"title":225,"_path":226,"layout":65},"File","/design-system/components/file",{"title":228,"_path":229,"layout":65},"Footer","/design-system/components/footer",{"title":231,"_path":232,"layout":65},"Form","/design-system/components/form",{"title":234,"_path":235,"layout":65},"Form alert","/design-system/components/form-alert",{"title":237,"_path":238,"layout":65},"Header","/design-system/components/header",{"title":240,"_path":241,"layout":65},"In-page navigation","/design-system/components/in-page-navigation",{"title":243,"_path":244,"layout":65},"Input field","/design-system/components/input-field",{"title":246,"_path":247,"layout":65},"Key dates","/design-system/components/key-dates",{"title":249,"_path":250,"layout":65},"Media","/design-system/components/media",{"title":252,"_path":253,"layout":65},"Media embed","/design-system/components/media-embed",{"title":255,"_path":256,"layout":65},"Media fullscreen","/design-system/components/media-fullscreen",{"title":258,"_path":259,"layout":65},"Media gallery","/design-system/components/media-gallery",{"title":261,"_path":262,"layout":65},"Option button","/design-system/components/option-button",{"title":264,"_path":265,"layout":65},"Page action","/design-system/components/page-action",{"title":267,"_path":268,"layout":65},"Pagination","/design-system/components/pagination",{"title":270,"_path":271,"layout":65},"Primary navigation","/design-system/components/primary-navigation",{"title":273,"_path":274,"layout":65},"Profile","/design-system/components/profile",{"title":276,"_path":277,"layout":65},"Radio button","/design-system/components/radio-button",{"title":279,"_path":280,"layout":65},"Related links","/design-system/components/related-links",{"title":282,"_path":283,"layout":65},"Results listing","/design-system/components/results-listing",{"title":285,"_path":286,"layout":65},"Search bar","/design-system/components/search-bar",{"title":288,"_path":289,"layout":65},"Skip link","/design-system/components/skip-link",{"title":291,"_path":292,"layout":65},"Social share","/design-system/components/social-share",{"title":294,"_path":295,"layout":65},"Statistics grid","/design-system/components/statistics-grid",{"title":297,"_path":298,"layout":65},"Table","/design-system/components/table",{"title":300,"_path":301,"layout":65},"Tabs","/design-system/components/tabs",{"title":303,"_path":304,"layout":65},"Tag","/design-system/components/tag",{"title":306,"_path":307,"layout":65},"Text area","/design-system/components/text-area",{"title":309,"_path":310,"layout":65},"Timeline","/design-system/components/timeline",{"title":312,"_path":313,"layout":65},"Vertical navigation","/design-system/components/vertical-navigation",{"title":315,"_path":29,"children":316,"layout":65},"Ripple Framework",[317,318,336,358],{"title":315,"_path":29,"layout":65},{"title":319,"_path":320,"children":321},"Key Concepts","/framework/key-concepts",[322,324,327,330,333],{"title":124,"_path":323,"layout":65},"/framework/key-concepts/nuxt",{"title":325,"_path":326,"layout":65},"Layers","/framework/key-concepts/nuxt-layers",{"title":328,"_path":329,"layout":65},"API endpoints","/framework/key-concepts/api-endpoints",{"title":331,"_path":332,"layout":65},"Content types","/framework/key-concepts/content-types",{"title":334,"_path":335,"layout":65},"Dynamic components","/framework/key-concepts/dynamic-components",{"title":337,"_path":338,"children":339},"Guides","/framework/guides",[340,343,346,349,352,355],{"title":341,"_path":342,"layout":65},"Migrating from Ripple 1.x","/framework/guides/migrating",{"title":344,"_path":345,"layout":65},"Setting up a new site","/framework/guides/new-sites",{"title":347,"_path":348,"layout":65},"Applying theme and brand","/framework/guides/brand-application",{"title":350,"_path":351,"layout":65},"Creating content types","/framework/guides/creating-content-types",{"title":353,"_path":354,"layout":65},"Creating new layers","/framework/guides/creating-new-layers",{"title":356,"_path":357,"layout":65},"Adding a new dynamic component","/framework/guides/dynamic-components",{"title":359,"_path":360,"layout":65},"Core modules","/framework/core-modules",["Reactive",362],["Set"],["Reactive",364],{},true,1714695645630]</script>
+<script>window.__NUXT__={};window.__NUXT__.config={public:{mdc:{components:{prose:true,map:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"}},headings:{anchorLinks:{h1:false,h2:true,h3:true,h4:true,h5:false,h6:false}}},content:{locales:[],defaultLocale:"",integrity:1714695620480,experimental:{stripQueryParameters:false,advanceQuery:false,clientDB:false},respectPathCase:false,api:{baseURL:"/api/_content"},navigation:{fields:["icon","layout"]},tags:{p:"prose-p",a:"prose-a",blockquote:"prose-blockquote","code-inline":"prose-code-inline",code:"ProseCodeInline",em:"prose-em",h1:"prose-h1",h2:"prose-h2",h3:"prose-h3",h4:"prose-h4",h5:"prose-h5",h6:"prose-h6",hr:"prose-hr",img:"prose-img",ul:"prose-ul",ol:"prose-ol",li:"prose-li",strong:"prose-strong",table:"prose-table",thead:"prose-thead",tbody:"prose-tbody",td:"prose-td",th:"prose-th",tr:"prose-tr"},highlight:{theme:"github-light",preload:["vue","bash","markdown"],highlighter:"shiki",langs:["js","jsx","json","ts","tsx","vue","css","html","vue","bash","md","mdc","yaml","vue","bash","markdown"]},wsUrl:"",documentDriven:{page:true,navigation:true,surround:true,globals:{},layoutFallbacks:["page"],injectPage:true},host:"",trailingSlash:false,search:"",contentHead:true,anchorLinks:{depth:4,exclude:[1]}},studio:{apiURL:"https://api.nuxt.studio"}},app:{baseURL:"/",buildAssetsDir:"/_nuxt/",cdnURL:""}}</script>
 <script src="https://www.googletagmanager.com/gtag/js?id=G-JHL6XDTXK0" async></script>
 <script>window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}